미리암 수잔은 콜로라도주 덴버에 거주하는 작가, 아티스트, 웹 개발자이며 현재 컨테이너 쿼리, 캐스케이드 레이어와 같은 흥미로운 CSS 사양을 작업하고 있습니다.
이 게시물은 Designcember의 일부입니다. web.dev에서 제공하는 웹 디자인 축제입니다.
미리암 수잔은 콜로라도주 덴버에 거주하는 작가, 아티스트, 웹 개발자입니다. OddBird (웹 에이전시)의 공동 창업자이자 CSS Tricks의 직원 작가, Sass 핵심팀의 멤버, CSS 워킹 그룹의 W3C 초청 전문가입니다. 최근에는 캐스케이드 레이어, 컨테이너 쿼리, 범위와 같은 새로운 CSS 기능 개발에 집중하고 있습니다. 오프라인에서 Miriam은 출판된 소설가, 극작가, 음악가입니다. Sass 및 CSS에 관한 그녀의 작업에 관해 이야기를 나눴습니다.
레이첼: 그리드 프레임워크 Susy를 통해 처음으로 귀하의 작업을 알게 되었습니다. 이 프레임워크를 만들게 된 계기가 무엇인가요?
미리암: 2008년에는 웹의 레이아웃이 지금과 매우 달랐습니다. 개발자들은 테이블 레이아웃에서 더 시맨틱한 (하지만 여전히 해키한) 플로팅 그리드로 이동했습니다. 사전 정의된 CSS 클래스 집합이 있는 사전 정의된 (일반적으로 정적) 그리드를 제공하는 범용 12열 '그리드 프레임워크'가 인기를 끌었습니다. 더 많은 맞춤설정이 필요하면 직접 해야 했습니다. 웹사이트의 반응성이 향상되어야 한다는 것은 분명했지만 아직 미디어 쿼리를 사용할 수 없었고 유동적인 플로트와 관련된 브라우저 호환성 문제가 많았습니다.
저는 폰트와 표시 영역 크기에 모두 대응하는 Natalie Downe의 CSS 시스템 접근 방식을 사용하고 있었는데, 반복되는 수학과 브라우저 해킹이 필요하다는 점이 불만족스러웠습니다. 동시에 Sass가 주목받기 시작했고, 제가 필요로 하는 것과 완벽하게 맞아떨어졌습니다. Susy의 첫 번째 초안은 매우 간단했습니다. 수학을 수행하고 필요한 해킹을 추가하는 몇 가지 믹스인만 있었습니다. 목표는 최소한의 필수 코드만 출력하는 것이었습니다. 사전 정의된 클래스 없이 완전히 맞춤설정 가능한 그리드
레이첼: CSS 전처리기 작업에서 CSS 사양 작업으로 어떻게 전환하셨나요? 전처리기를 작업하는 것이 사양 작성에 좋은 배경이 되었다고 생각하시나요?
미리암: 제 경험상 겹치는 부분이 많고, 저는 여전히 양쪽 모두에서 활발하게 활동하고 있습니다. 하지만 이는 웹 표준 개발과 원활하게 통합되는 도구를 개발하려고 노력하는 나탈리 바이젠바움이 이끄는 Sass팀 덕분이라고 생각합니다. 핵심 웹 표준의 미래를 생각할 때는 범용적인 '의견이 있는' 솔루션을 넘어 장기적인 유연성을 위해 빌드하는 것이 필수적입니다.
접근성 및 기타 중요한 고려사항을 장려하고 촉진하면서도 개발자 요구사항과 접근 방식의 다양성을 존중하는 도구를 어떻게 빌드할 수 있을까요?
레이첼: 기존에 Sass의 일부였던 기능을 대체하는 다양한 요소가 CSS에 도입되고 있습니다. Sass와 같은 것을 계속 사용해야 하는 강력한 이유가 있나요?
미리암: 네, 일부 사용자에게는 그렇습니다. 하지만 보편적인 답은 없습니다. 변수를 예로 들어 보겠습니다. Sass 변수는 어휘 범위가 지정되고 서버에서 컴파일되며 목록 및 객체, 색상 조작 등과 같은 체계적인 데이터 구조를 사용합니다. 이는 브라우저에서 실행할 필요가 없는 디자인 시스템 로직에 적합합니다.
CSS 변수는 일부 중복이 있으며 값을 저장할 수도 있지만, 캐스케이드 기반의 강점과 약점이 완전히 다릅니다. Sass는 맞춤 속성을 처리할 수 없고 CSS는 구조화된 데이터를 처리할 수 없습니다. 두 가지 모두 유용하고 강력하지만 구체적인 요구사항은 다를 수 있습니다.
더 이상 필요하지 않은 도구를 삭제할 수 있는 것은 좋은 일이며 일부 프로젝트에는 서버 측 변수와 클라이언트 측 변수가 모두 필요하지 않을 수 있습니다. 제약 없이 적용 가능합니다. 하지만 이것이 동일하다는 의미이며 하나가 다른 하나를 대체한다고 가정하는 것은 너무 단순합니다. 언어가 기본적으로 동일한 기능을 제공하는 시점에 도달하더라도 일부 설계 로직은 서버 측에서 발생하고 일부는 클라이언트 측에서 발생하는 사용 사례가 항상 존재합니다. 전처리기는 장기적으로 사용됩니다.
레이첼: 표준을 만드는 작업에 더 많이 참여하면서 놀라웠던 점이 있나요? 아니면 일반적으로 사람들이 이 과정에 대해 잘 모를 수 있다고 생각하는 점이 있나요?
미리암: 참여하기 전에는 표준 프로세스가 신비롭고 마법 같은 블랙박스처럼 느껴져서 무엇을 기대해야 할지 잘 몰랐습니다. 브라우저 내부 구조에 대한 지식이 부족해서 기여하지 못할까 봐 두려웠지만, 실제로는 브라우저 엔지니어가 더 필요하지 않습니다. 실제 웹사이트와 애플리케이션을 구축하는 개발자와 디자이너가 더 필요합니다.
참여한 사람들 중 표준에 주로 집중하는 사람은 거의 없지만 웹사이트를 주로 개발하거나 설계하는 사람도 거의 없다는 사실에 놀랐습니다. W3C는 회원 조직의 '자원봉사자'로 구성되어 있으며 (종종 해당 조직에서 급여를 지급하지만 기본 직업은 아님) 회원 가입 비용이 저렴하지 않습니다. 이로 인해 일상적인 디자이너와 개발자, 특히 소규모 대행사에서 클라이언트 작업을 하거나 프리랜서로 일하는 사람들이 참여하지 못하게 됩니다. 이 작업에 대한 외부 자금을 찾지 못했다면 초청 전문가로서의 제 역할은 완전히 자원봉사였을 것이고, 비싼 취미였을 것입니다.
실제로 이 과정은 매우 개방적이고 공개적이며 개발자의 참여가 필요하지만 한 번에 너무 많은 대화가 진행되므로 참여하기가 어려울 수 있습니다. 특히 본업이 아닌 경우 더욱 그렇습니다.
레이첼: 컨테이너 쿼리는 오랫동안 많은 웹 개발자들의 숙원이었습니다. 이러한 기능을 제공하게 되어 매우 기쁩니다. 많은 사람들이 컨테이너 쿼리의 유용성에 대해 생각하고 있는 것 같습니다. 컨테이너 쿼리가 더 많은 창의성을 발휘할 수 있는 잠재력이 있다고 생각하시나요?
미리암: 물론입니다. 하지만 완전히 별개라고 보지는 않습니다. 시간이 제한되어 있으므로 유지보수 가능하고 성능이 좋은 코드를 작성하려고 노력합니다. 실제로 하기 어려운 일이 있으면 가능한 일에 창의력을 발휘할 가능성이 낮아집니다.
하지만 웹 업계는 현재 대기업의 이해관계가 지배하고 있으므로 이러한 비즈니스 문제가 웹 아티스트보다 항상 더 많이 방송됩니다. 기능의 기본 사용 사례로 웹 창의성을 무시하면 많은 것을 잃게 된다고 생각합니다. CSS 아트 커뮤니티에서 컨테이너 쿼리 프로토타입을 사용해 보는 것을 보니 매우 흥미로웠습니다. 제이 톰킨스는 오래된 CSS 반대 밈에 대한 해설로 CSS 베네치아 블라인드의 특히 영리하고 대화형 데모를 빌드했습니다. 이 분야에서 더 많은 것을 탐색할 수 있을 것 같고, 사람들이 또 어떤 아이디어를 낼지 기대됩니다.
이 대화에서는 원래 사용 사례인 크기 기반 쿼리에 중점을 두었지만, CSS 속성이나 변수의 값을 기반으로 조건부 스타일을 작성하는 기능인 스타일 쿼리를 사람들이 어떻게 사용할지 기대됩니다. 매우 강력한 기능이지만 아직 대부분 탐색되지 않았습니다. 더 많은 창의적인 기회가 열릴 것 같습니다.
레이첼: CSS에서 할 수 없거나 곧 할 수 있게 될 것 같은데 유용할 것 같은 기능이 있나요?
미리암: 제가 작업 중인 다른 사양도 매우 기대됩니다. 캐스케이드 레이어를 사용하면 작성자가 구체성 문제를 더 효과적으로 제어할 수 있으며, 범위는 더 정확한 선택기 타겟팅에 도움이 됩니다. 하지만 둘 다 상위 수준 아키텍처 문제입니다. 아티스트로서 저는 CSS 전환, 선언적 방식으로 대화형 스타일을 만드는 방법, 미디어 또는 컨테이너 중단점 간에 값을 부드럽게 전환할 수 있는 컨테이너 '타임라인'과 같은 기능에 더 큰 기대를 걸고 있습니다. 이는 반응형 서체에 매우 실용적인 의미를 지니며 반응형 아트와 애니메이션을 위한 많은 창의적인 기회를 열어줍니다.
레이첼: 지금 웹에서 정말 흥미롭고 재미있거나 창의적인 작업을 하고 있는 다른 사람이 있나요?
미리암: 어떻게 대답해야 할지 모르겠어요. 다양한 분야에서 창의적인 작업을 하는 사람들이 너무 많거든요. CSSWG와 Open-UI에서 파편화에 관한 작업을 비롯해 흥미로운 표준 작업이 많이 진행되고 있습니다. 하지만 저는 웹 아티스트와 사람들이 상업과 직접적으로 관련이 없는 방식으로 이러한 도구를 제작에 사용하는 방식에서 가장 많은 영감을 얻습니다. Jhey, Lynn Fisher, Yuan Chuan과 같이 웹 기술이 시각적 및 대화형으로 할 수 있는 일의 경계를 넓히는 많은 사람들이 있습니다. 비즈니스 중심의 업무를 하는 사람도 아티스트의 기술을 통해 많은 것을 배울 수 있습니다.
또한 웹과 특히 소셜 미디어에서 우리가 원하는 것을 다시 생각해 보도록 끊임없이 촉구하는 벤 그로서와 같은 사람들의 더 개념적인 웹 아트도 높이 평가합니다. 예를 들어 그의 새로운 minus.social을 확인해 보세요.
레이첼: css.oddbird.net에서 미리암의 CSS 작업을 확인하고 miriam.codes 웹사이트와 @TerribleMia 트위터를 통해 다른 활동도 확인하세요.