모질라(Mozilla)가 웹사이트 파이어폭스닷컴(Firefox.com)을 링컨 루프(Lincoln Loop)와 협력하여 전처리기나 특수 문법 없이 순수한 네이티브 CSS로 재구축했습니다. 이는 2008년 데이브 셰이(Dave Shea)의 'CSS 젠 가든(CSS Zen Garden)' 프로젝트가 제시했던 '디자인과 마크업의 분리'라는 이상을 현대 웹 환경에서 실제로 구현한 사례로 주목받고 있습니다. 당시에는 상상하기 어려웠던 유연성과 효율성을 최신 CSS 기술로 달성한 것입니다.
이번 재구축은 CSS 커스텀 프로퍼티(Custom Properties), CSS 그리드(Grid), 플렉스박스(Flexbox) 등 현대 CSS 기술의 발전과 브라우저 간 일관된 구현 덕분에 가능했습니다. 과거에는 변수 부재, 복잡한 레이아웃 구현의 어려움, 브라우저별 렌더링 차이 등으로 인해 서버 측 처리나 이미지 기반 레이아웃 같은 우회 기법이 필수적이었습니다. 하지만 이제는 이러한 우회 없이도 복잡하고 현대적인 디자인을 충실하게 구현할 수 있게 되었습니다. 파이어폭스닷컴은 70개 이상의 컴포넌트와 25개 페이지 템플릿을 웨그테일(Wagtail) 컴포넌트로 구현하여, 콘텐츠 팀이 개발자의 도움 없이도 다양한 언어 및 지역 페이지를 직접 생성할 수 있도록 했습니다. 모든 스타일은 네이티브 CSS로 작성되었지만, 프로덕션 환경에서는 @import 성능 문제를 해결하기 위해 포스트CSS(PostCSS)로 가져오기 구문을 인라인 처리합니다.
이번 파이어폭스닷컴 재구축은 단순히 웹사이트를 개선한 것을 넘어, 웹 표준 기술의 성숙과 가능성을 보여주는 중요한 의미를 가집니다. CSS 젠 가든이 하나의 HTML에 여러 디자인을 입혀 CSS의 표현력을 과시했다면, 파이어폭스닷컴은 디자인과 마크업의 엄격한 분리를 통해 CSS의 힘과 브라우저 지원의 성숙도를 입증했습니다. 이는 웹 개발자들이 더 이상 특정 프레임워크나 전처리기에 의존하지 않고도 강력하고 유지보수하기 쉬운 웹 애플리케이션을 구축할 수 있음을 시사합니다. 또한, 콘텐츠 팀이 디자인 시스템 기반으로 직접 페이지를 관리할 수 있게 함으로써 개발 효율성을 높이고, 궁극적으로는 사용자 경험을 향상시키는 데 기여할 것으로 기대됩니다.