CSS Zen Garden 꿈의 실현: 현대 웹 표준의 진화
The CSS Zen Garden dream shipped
Hacker News오랜 웹 개발의 꿈이었던 'CSS Zen Garden'이 모질라의 실제 대규모 서비스 구축을 통해 현실화되었습니다.
- 커스텀 속성, 그리드, 플렉스박스와 같은 현대적인 네이티브 CSS 기능들이 발전하여, 과거의 복잡한 전처리기나 해킹 없이도 고도의 디자인 시스템 구현이 가능해졌습니다.
- 이는 웹 표준 자체가 기업 수준의 디자인 시스템을 완벽하게 지원할 만큼 성숙했음을 입증하며, 콘텐츠 팀이 개발자의 도움 없이도 일관성 있게 페이지를 구성하는 것이 가능해졌습니다.
- 코드가 네이티브 CSS로 작성되더라도, 성능 최적화를 위한 빌드 과정(예: `@import` 처리)은 여전히 필요할 수 있으므로 '빌드 단계가 없다'는 주장은 주의 깊게 검토해야 합니다.
2008년, CSS Zen Garden은 하나의 HTML 파일이 순수 CSS만으로 완전히 다른 디자인으로 재구성될 수 있다는 가능성을 보여주며 클린한 디자인 시스템에 대한 기대를 높였습니다. 그러나 실제 상용 프로젝트에서는 CSS 변수의 부재와 제한적인 속성들 때문에 서버 측 처리, 이미지, 테이블 기반 레이아웃 등 다양한 '해킹' 방식이 필요했습니다. 이 간극은 커스텀 속성(Custom properties), 그리드, 플렉스박스 같은 현대적 기능들이 등장하며 메워졌고, 이제는 디자인을 우회하는 것이 아니라 직접 설계할 수 있는 수준에 이르렀습니다.
모질라와 협력하여 진행된 Firefox.com 재구축 프로젝트에서는 이러한 발전이 실제로 구현되었습니다. 이 시스템은 전처리기 없이 순수하고 네이티브한 CSS만을 사용하여 구축되었으며, 디자인 파일에서 커스텀 속성이 직접 추출됩니다. 결과적으로 70개 이상의 컴포넌트와 25개의 페이지 템플릿으로 구성된 디자인 시스템을 완성했으며, 현재 19개 로케일을 지원합니다.
기술적인 관점에서 볼 때, 소스 코드가 브라우저가 이해하는 네이티브 언어여야 한다는 점이 중요합니다. 비록 작성된 CSS 자체가 순수하고 네이티브하더라도, 성능 최적화를 위해 `@import` 문을 인라인 처리하는 등의 빌드 과정(예: PostCSS 사용)은 여전히 필요할 수 있습니다. 따라서 프로젝트가 '빌드 단계가 없다'고 주장하기보다는, 소스 코드가 브라우저가 직접 사용하는 언어인지 확인하는 것이 중요합니다.