37signals의 빌드 도구 없는 모던 CSS 전략: Campfire, Writebook, Fizzy 사례 분석

Vanilla CSS is all you need

작성자
The Awesome Ruby
발행일
2025년 12월 03일
원문 보기
www.zolkos.com

핵심 요약

  • 1 37signals는 Campfire, Writebook, Fizzy 개발에 Sass, PostCSS 등 빌드 도구 없이 순수 CSS만을 사용하여 정교한 웹 애플리케이션을 구축했습니다.
  • 2 OKLCH 색상, `ch` 단위 간격, `:has()` 선택자, `color-mix()`, `@layer`, `@starting-style` 등 최신 CSS 기능을 활용하여 단순하면서도 강력한 아키텍처를 구현했습니다.
  • 3 이들의 접근 방식은 복잡한 툴체인 없이도 현대 CSS의 잠재력을 극대화할 수 있음을 보여주며, CSS에 대한 깊은 이해를 바탕으로 더 단순한 솔루션이 가능함을 시사합니다.

도입

37signals는 2024년 4월 Jason Zimdars의 Campfire 현대 CSS 패턴 게시물 이후, Writebook과 Fizzy를 포함한 세 가지 제품을 빌드 도구 없이 순수 CSS만으로 개발했습니다. 이 글은 Campfire, Writebook, Fizzy의 소스 코드를 분석하여 37signals의 CSS 아키텍처가 어떻게 진화했는지, 그리고 현대 CSS 기능만으로도 복잡한 웹 애플리케이션을 구축할 수 있는지 탐구합니다. 저자는 일관성과 진보적인 개선에 놀라움을 표하며, 이는 단순한 취미 프로젝트가 아닌 실제 운영되는 고도화된 애플리케이션임을 강조합니다.

37signals의 CSS 아키텍처는 app/assets/stylesheets/ 아래에 각 개념별로 파일을 두는 평면적인 구조를 채택하여 제로 설정, 제로 빌드 시간을 실현합니다.

주요 특징 및 진화는 다음과 같습니다:

1. 기반 아키텍처 및 색상/간격 시스템

  • 단순한 파일 구조: 서브디렉토리 없이 개념별 단일 파일 구성으로 높은 가독성과 유지보수성을 제공합니다.

  • OKLCH 색상: 지각적으로 균일한 OKLCH 색상 공간을 :root 변수로 정의하고, @media 쿼리로 다크 모드를, color-mix()로 동적 색상 팔레트를 구현합니다.

  • ch 단위 간격: 수평 간격에 문자 너비(ch) 단위를 사용하여 콘텐츠와 비례하는 자연스러운 간격을 제공하며, 이를 반응형 브레이크포인트에도 활용합니다.

2. 현대 CSS 기능의 적극적인 활용

  • 유틸리티 클래스: 핵심 스타일은 의미론적 컴포넌트 클래스에 정의하고, 유틸리티 클래스는 보조적으로 사용하여 HTML 가독성과 유지보수성을 높입니다.

  • :has() 선택자: JavaScript 없이 부모 요소를 자식 요소의 상태에 따라 스타일링하여 복잡한 상호작용(예: 사이드바 토글, 칸반 레이아웃)을 순수 CSS로 구현합니다.

  • 점진적 진화: Campfire에서 기반을 다지고, Writebook에서 컨테이너 쿼리와 @starting-style을 도입했으며, Fizzy에서는 @layer를 통한 명시도 관리, color-mix(), 복잡한 :has() 체인을 활용하여 현대 CSS 기능을 총체적으로 적용했습니다.

  • 순수 CSS 애니메이션: 이미지 없이 CSS 마스크로 로딩 스피너를, 비대칭 border-radius로 손으로 그린 듯한 mark 하이라이트를 구현합니다. 또한, @starting-style과 allow-discrete를 사용하여 HTML <dialog> 요소의 부드러운 애니메이션을 순수 CSS로 처리합니다.

결론

37signals의 Campfire, Writebook, Fizzy 사례는 빌드 도구 없이 현대 CSS의 잠재력을 최대한 활용하여 복잡한 웹 애플리케이션을 구축할 수 있음을 입증합니다. OKLCH, `:has()`, `color-mix()`, `@layer`, `@starting-style` 등 최신 CSS 기능을 점진적으로 도입하며 발전해온 이들의 'nobuild' 철학은, 개발자들이 불필요한 복잡한 툴체인 대신 네이티브 CSS의 강력함을 활용하여 더 단순하고 효율적인 방식으로 고품질 결과물을 만들 수 있다는 중요한 시사점을 제공합니다. 이는 모든 팀에 적합하진 않더라도, CSS에 대한 깊은 이해를 가진 팀에게는 복잡성에서 벗어나 새로운 대안을 모색할 영감을 줍니다.

관련 글들

37signals의 노빌드(No-Build) CSS 전략: 모던 CSS의 진화와 실용성

37signals는 Campfire, Writebook, Fizzy에서 Sass, PostCSS, 빌드 도구 없이 바닐라 CSS만으로 정교한 웹 애플리케이션을 구축합니다.

12/03 읽어보기 →

Forge에서 활용된 현대적인 CSS 구성 기법

CSS Layers는 스타일의 캐스케이딩 방식을 명확하게 제어하여 예측 가능하고 유지보수하기 쉬운 CSS를 가능하게 합니다.

09/04 읽어보기 →

Tailwind CSS v4의 @utility, @variant, :where()를 이용한 시맨틱 CSS 클래스 작성 전략

Tailwind CSS v4의 `@utility`, `@variant` 및 `:where()`를 활용하여 재사용 가능하고 가독성 높은 시맨틱 CSS 클래스를 작성하는 새로운 접근 방식을 제시합니다.

01/02 읽어보기 →

2025년 현대적 CSS의 주요 기능 및 발전 현황 개요

현대 CSS는 Tailwind와 같은 추상화 도구 없이도 강력한 레이아웃과 반응형 디자인 기능을 표준으로 제공합니다.

05/29 읽어보기 →

댓글 0

로그인이 필요합니다

댓글을 작성하거나 대화에 참여하려면 로그인이 필요합니다.

로그인 하러 가기

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!