CSS Zen Garden의 꿈, 마침내 실현되다 — 순수 CSS로 재구축한 Firefox.com

본문

2008년 Dave Shea의 CSS Zen Garden은 하나의 HTML 파일을 CSS만으로 완전히 다르게 스타일링할 수 있다는 가능성을 보여준 프로젝트였습니다. 저자는 이 프로젝트를 통해 콘텐츠와 완전히 분리된 깨끗하고 재사용 가능한 디자인이라는 꿈을 접했지만, 실제 클라이언트 작업에서는 그 꿈이 곧바로 무너졌다고 회고합니다. 이 글은 그 꿈이 약 20년 만에 실제 프로덕션에서 실현된 사례, 즉 Mozilla 및 Lincoln Loop과 함께 진행한 Firefox.com 재구축을 다룹니다.

2008년, 꿈과 현실의 간극

당시에는 CSS 변수가 없었고, 사용 가능한 속성만으로는 완성도 높은 디자인을 표현할 수 없었습니다. 그래서 서버 사이드 처리, 이미지, 테이블 기반 레이아웃, 그리고 수많은 해킹 기법에 의존해야 했습니다. 브라우저마다 렌더링이 달라 하나의 디자인을 모든 브라우저에서 동작하게 만드는 것 자체가 작업의 상당 부분을 차지했습니다. Zen Garden은 이론적으로 무엇이 가능한지를 보여줬지만, 프로덕션은 전혀 다른 이야기였습니다.

간극이 닫히다

이 간극은 거의 20년에 걸쳐 닫혔고, 대부분은 최근 몇 년 사이에 일어났습니다. Custom Properties는 브라우저가 이해하는 변수를 제공했고, Grid와 Flexbox는 매체와 싸우지 않는 레이아웃을 가능하게 했습니다. 2008년에는 존재하지 않던 속성들이 이제는 있고, 브라우저들이 이를 충분히 일관되게 구현했기 때문에 이제는 브라우저를 우회하는 대신 브라우저를 대상으로 삼아 디자인할 수 있게 됐습니다.

Firefox.com 재구축

저자는 Mozilla 및 Lincoln Loop 팀과 함께 Firefox.com을 전처리기 없이 모던 네이티브 CSS만으로 구축했습니다. Custom Properties는 디자인 파일에서 그대로보내지고, 네이티브 CSS는 해킹 없이 한 번만 작성되며 모든 모던 브라우저에서 동작합니다. 레거시 브라우저에는 최소한의 브랜드 스타일시트를 통해 기본적이고 접근 가능한 브랜딩만 제공합니다. 결과물은 70개 이상의 컴포넌트와 25개의 페이지 템플릿으로 구성된 디자인 시스템으로, Wagtail 컴포넌트로 구현되어 콘텐츠 팀이 엔지니어링 지원 없이 페이지를 조립할 수 있습니다. 사이트는 현재 19개 로케일을 지원합니다.

정직한 각주 — PostCSS

다만 한 가지 각주가 있습니다. 프로덕션에는 PostCSS가 단 하나의 작업, 즉 @import 문의 인라인 처리를 위해 사용됐습니다. 네이티브 @import는 일부 브라우저에서 여전히 성능 특성이 좋지 않고, 이런 규모의 사이트에서는 아키텍처적 순수성보다 성능이 더 중요했기 때문입니다. 그러나 작성된 CSS 자체는 여전히 평범한 네이티브 CSS이며, 빌드 단계 없이도 유효하고 그 의미가 통합니다. 빌드는 브라우저가 직렬로 가져왔을 파일들을 평탄화할 뿐입니다. 저자는 누군가 프로젝트가 '빌드 단계 없음'이라고 말할 때 중요한 것은 작성한 소스가 브라우저가 이해하는 언어인지, 아니면 컴파일 전까지만 존재하는 방언인지의 여부라고 지적합니다.

왜 중요한가

저자에게 이 작업은 Zen Garden의 꿈이 마침내 프로덕션에서 실현된 순간이었고, 웹 표준을 이끌어온 조직인 Mozilla와 함께했다는 점이 의미를 더합니다. 브라우저에 관한 사이트를, 20년간 플랫폼을 옹호해온 조직이 만든다는 것이 플랫폼의 준비 상태를 시험하기에 이보다 좋은 자리는 없다고 말합니다. 결론은 '준비됐다'입니다. 저자는 Nicole Sullivan, Rachel Andrew, Jen Simmons, Chris Coyier, Kasey Kelly, Eric Meyer 등 자신에게 CSS를 시스템으로 생각하는 법을 가르쳐준 이들에게 감사를 표합니다. 도구는 몇 년마다 바뀌지만, 옳은 일이 쉬운 일이 되는 시스템, 그리고 디자이너의 결정이 여러 번 번역되지 않고 프로덕션에 도달하는 시스템의 가치는 변하지 않는다는 것이 그의 작업 전체를 관통하는 주제라고 정리합니다.

Hacker News 반응

• @yosito — 글쓴이입니다. HN의 많은 분들처럼 Dave Shea의 CSS Zen Garden으로 CSS를 처음 배웠습니다. 하나의 HTML 파일에 스타일시트를 만들며 CSS를 시스템으로 생각하게 됐고, 그게 남았습니다. 거의 20년 뒤 Lincoln Loop 팀과 함께 Mozilla와의 계약으로 새 Firefox.com의 디자인 시스템을 순수 모던 CSS로 만들었습니다(거의). 성능상 이유로 몇 가지를 전처리기에 돌렸지만, 사이트의 CSS는 전부 순수 CSS 문법으로 작성됐습니다. 질문은 기꺼이 받겠습니다.
• @moritz — 코드는 오픈소스인가요? Protocol 디자인 시스템의 일부가 아닌가요?
• @settsu — 저도 CSS Zen Garden이 추구하던 아이디어에 큰 영감을 받았지만, 실제 현업은 그렇게 보이거나 동작하지 않았습니다. HN에서 어떤 글이 이렇게 부정적인 반응을 끌어내는지 항상 이상하지만 신경 쓰지 마세요. 다른 사람이 행복한 걸 못 참는 사람도 있고 그냥 하루가 안 좋은 사람도 있으니까요. 이룬 것을 자랑스러워하세요. Firefox 같은 프로젝트에 기여했다는 게 기분 좋을 겁니다.
• @kreetx — 사이트는 아직 운영 중입니다. 디자인 목록은 여기서 볼 수 있습니다.
• @yosito — 맞아요, 감사합니다. 글에서도 사이트를 링크했습니다. 현재 CSS를 배우는 분들에게 훌륭한 자료입니다.

원문: josprague.com (via Hacker News) / 번역·요약: Trawling