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