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