파이어폭스닷컴, 전처리기 없이 네이티브 CSS로 재구축: 70여 개 컴포넌트·25개 템플릿·19개 로케일
- Lincoln Loop와 Mozilla의 계약으로 새 firefox.com을 순수 네이티브 CSS로 재구축함. 전처리기 없이 70개 이상 컴포넌트와 25개 페이지 템플릿을 만들어 19개 로케일을 지원 중임
- 커스텀 프로퍼티를 디자인 파일에서 바로 내보내고, 컴포넌트를 Wagtail 컴포넌트로 구현해 콘텐츠 팀이 엔지니어 도움 없이 페이지를 조립함
- 프로덕션에 PostCSS가 들어갔지만 용도는 @import 인라인 처리 하나뿐이고, 작성된 CSS는 빌드 단계 없이도 유효한 순수 CSS임. 작성자는 'no build step'이라는 말을 들을 때 소스가 브라우저가 말하는 언어인지 컴파일 후에만 존재하는 방언인지를 봐야 한다고 씀
- 2008년에는 CSS 변수도, 완전한 충실도를 표현할 속성도 없어 서버사이드 처리와 이미지, 테이블 레이아웃, 브라우저별 핵에 의존했고, 이 격차가 닫히는 데 20년 가까이 걸림
- 해커뉴스 댓글 상당수는 글의 AI 문체('There's one honest footnote' 등)를 문제 삼았고, 일부는 읽기를 중단했다고 밝힘
Hacker News opinions
작성자임. CSS Zen Garden으로 CSS를 처음 배웠고, 20년 뒤에 Mozilla랑 Lincoln Loop 팀과 새 firefox.com 디자인 시스템을 만듦. 거의 순수 CSS로 작성했으니 레이어드 CSS나 레거시 폴백, 토큰 내보내기 방식 뭐든 물어봐도 됨.
코드 오픈소스임? 프로토콜 디자인 시스템의 일부는 아님?
csszengarden.com은 아직 살아있음. all designs 페이지도 있으니 CSS 배우는 사람한테 좋은 자료임.
글에서 'There's one honest footnote' 보고 바로 창 닫았음. AI 문체라 읽을 맘이 사라지더라. 뭘 놓쳐도 상관없음.
AI는 부사를 좋아함. 제목부터 AI 냄새가 남. 20년 걸려서 CSS 꿈 이루고 나서 AI 말투로 알리다니 아까움.
문체는 그렇다 쳐도, 안 올리는 것보단 낫지 않나. 뉘앙스 있게 볼 수도 있는 거고.
Zen Garden처럼 같은 콘텐츠에 완전히 다른 디자인 여러 개를 돌리는 사이트가 실제로 있음? 비공개 토렌트 트래커는 거의 다 그렇게 하던데.
디자인 시스템 오픈소스로 풀렸음? 아니면 글 끝이 컨설팅 페이지 링크로 끝나는 걸 보면 아닌 듯.
mozmeao/springfield 저장소에 'flare' 찾아보면 CSS 나옴. 오픈소스 맞음.
Zen Garden은 마크업 파일이 하나였으니까 됐던 거고 실무에선 안 됨. CSS 규칙이 DOM에 매핑되는 암묵적 구조가 생기는데, Tailwind는 그 구조가 명시적이고 눈에 보임.
HTML과 스타일을 깔끔하게 분리 못 함. 현지화할 때 언어별로 패딩이나 브레이크포인트를 바꿔야 하는 게 그 증거임. QT, GTK, SwiftUI, Flutter 다 구조와 스타일을 묶어 놓음.
진짜 갈림길은 관심사 분리가 아니라 마크업을 도메인 데이터 형식으로 볼 인력이 있느냐임. 대부분은 그냥 Tailwind 로컬 맥시마에서 편하게 살고, 그 mantra를 반복함.