2003년 데이브 셰이가 공개한 CSS 젠 가든(CSS Zen Garden)은 웹 디자이너 세대에게 하나의 이상을 심어줬다. 단 하나의 HTML 파일을 두고 CSS만 갈아 끼우면 전혀 다른 디자인이 되는 이 데모는, 내용과 표현을 완전히 분리한다는 웹 표준의 꿈을 눈으로 보여줬다. 그러나 실제 상용 프로젝트에 그 이상을 적용하려는 순간 꿈은 무너졌다. CSS 변수는 존재하지 않았고, 표현력이 부족한 속성들 탓에 서버 사이드 처리, 이미지, 테이블 기반 레이아웃, 그리고 끝없는 편법에 기댈 수밖에 없었다. 브라우저마다 렌더링이 달라 작업의 상당 부분은 '하나의 디자인을 모든 브라우저에서 똑같이 보이게 만드는' 일에 소모됐다.
젠 가든을 처음 접했던 필자가 회고하듯, 이 간극을 메우는 데 거의 20년이 걸렸고 그 대부분은 최근 몇 년 사이에 이뤄졌다. 커스텀 프로퍼티(custom properties)는 브라우저가 이해하는 진짜 변수를 안겨줬고, 그리드(Grid)와 플렉스박스(Flexbox)는 매체와 싸우지 않는 레이아웃을 가능하게 했다. 2008년에 없던 속성들이 지금은 존재할 뿐 아니라, 여러 브라우저에서 일관되게 구현돼 있어 이제는 속성을 '우회하며' 설계하는 대신 속성에 '기대어' 설계할 수 있게 됐다.
전처리기 없이 만든 70여 개 컴포넌트
이 변화가 실제 제품에서 어디까지 통하는지를 가늠할 수 있는 사례가 Firefox.com 재구축 프로젝트다. 필자는 모질라(Mozilla) 및 링컨 루프(Lincoln Loop) 팀과 함께 이 사이트 전체를 전처리기 없이 현대적인 네이티브 CSS만으로 구축했다. 커스텀 프로퍼티는 디자인 파일에서 곧바로 추출되고, 네이티브 CSS는 편법 없이 한 번만 작성되며, 모든 최신 브라우저에서 동작한다. 구형 브라우저에는 최소한의 브랜드 스타일시트가 기본적이고 접근성 있는 브랜딩을 제공한다.
결과물은 70개가 넘는 컴포넌트와 25개 페이지 템플릿으로 이뤄진 디자인 시스템이다. 이들은 Wagtail 컴포넌트로 구현돼, 콘텐츠 팀이 엔지니어의 손을 빌리지 않고도 페이지를 조립할 수 있다. 사이트는 현재 19개 로케일을 지원한다. 실무 관점에서 이 구조가 갖는 의미는 분명하다. 디자인 결정이 코드로 옮겨지는 과정에서 세 번씩 번역되지 않고, 콘텐츠 운영과 개발이 병목 없이 분리된다는 점이다.
'빌드 스텝 없음'이라는 말의 함정
다만 솔직한 각주가 하나 붙는다. 이 프로젝트도 프로덕션에서 PostCSS를 썼다. 용도는 단 하나, @import 문을 인라인으로 펼치는 작업이다. 네이티브 @import는 일부 브라우저에서 여전히 성능 특성이 나쁘고, 이 정도 규모의 사이트에서는 그 문제가 아키텍처의 순수성보다 더 중요하다. 핵심은 작성된 CSS 자체는 여전히 순수한 네이티브 CSS라는 점이다. 빌드 단계는 브라우저가 직렬로 가져올 파일들을 미리 평탄화할 뿐, CSS가 유효하거나 의미를 갖기 위해 빌드에 의존하는 부분은 없다.
이 구분은 누군가 '이 프로젝트는 빌드 스텝이 없다'고 말할 때 되새겨볼 만하다. 진짜 중요한 것은 빌드 유무 자체가 아니라, 우리가 작성하는 소스가 브라우저가 실제로 말하는 언어인지, 아니면 컴파일 전까지만 존재하는 방언인지다. 소스가 곧 표준 언어라면 도구 체인이 바뀌어도 코드는 살아남는다.
웹 표준을 20년간 옹호해온 모질라가, 그 표준으로 만든 브라우저를 소개하는 사이트를 바로 그 표준으로 지었다는 점은 상징적이다. 플랫폼이 정말 준비됐는지를 확인하기에 이보다 적절한 무대는 드물다. 니콜 설리번, 레이철 앤드루, 젠 시먼스, 크리스 코이어, 에릭 마이어 등 CSS를 '시스템'으로 사고하도록 한 세대를 가르친 이들의 유산이 여기에 닿아 있다.
한국 실무자에게 이 사례가 주는 교훈은 특정 도구 예찬이 아니다. 필자 스스로도 순수 CSS든 Tailwind든 shadcn/ui든 상관없이 관통하는 원칙을 강조한다. 도구는 몇 년마다 바뀌지만, '올바른 방법이 곧 가장 쉬운 방법'이 되는 시스템, 그리고 디자이너의 결정이 왜곡 없이 프로덕션까지 전달되는 시스템의 가치는 변하지 않는다는 것이다. 다만 이 이야기는 모질라라는 표준 지향 조직, 명확한 디자인-코드 파이프라인, @import 성능처럼 실용적 타협을 허용하는 판단이 맞물린 조건에서 나온 성과라는 점은 함께 기억할 필요가 있다. 모든 팀이 전처리기를 전면 폐기해야 한다는 결론으로 곧장 이어지지는 않는다.