Styling Story for Makers
1980년대 잡지 디자이너는 “이제는 모니터에서 직접 지면을 짠다고요?”라며 PageMaker를 만져 봤고, 활자 장인은 “벡터 글꼴이면 확대해도 깨지지 않네”라며 PostScript에 고개를 끄덕였습니다. 인쇄실 냄새가 사라진 자리에 픽셀과 격자가 들어왔습니다.
웹이 등장하자 하콤 위움리는 “HTML만으로는 색과 여백을 못 맞춰요”라며 CSS 제안을 올렸고, 디자이너들은 CSS Zen Garden에서 “같은 마크업인데 분위기가 완전히 달라지네!”라고 감탄했습니다. Flexbox와 Grid를 붙잡은 개발 팀은 “모든 화면을 한 레이아웃으로 버틸 순 없어”라며 반응형 접근을 실험했습니다.
이제 회의실에서 스타일 시스템 팀이 “컨테이너 크기만 알면 카드가 알아서 정렬돼요”라고 시연합니다. 연도를 눌러 사람들의 걱정과 해결책을 따라가 보세요. 다소 낯선 개념은 이야기 안에서 다시 풀어 드립니다.
연대기를 누르면 같은 화면에서 상세 이야기를 읽을 수 있습니다.
1980s
데스크톱 퍼블리싱 붐 속에서 디자이너들은 마우스를 잡고 “화면에서도 인쇄 퀄리티를 뽑자”며 도구와 글꼴을 갈아탔습니다.
1990s
CSS 제안이 올라오자 브라우저 팀이 “같은 규칙표를 공유하자”며 스타일 언어와 레이아웃의 첫걸음을 내디뎠습니다.
2000s
Zen Garden이 “마크업 건드리지 말고 스타일만 바꿔 보자”고 도전했고, Sass 같은 도구가 “코드로 색과 여백을 재사용하자”는 흐름을 만들었습니다.
2010s
반응형 개념과 Flexbox, Grid가 “모든 디바이스에서 읽히는 레이아웃”을 현실로 만들며 실무 기본기로 자리 잡았습니다.
2020s
컨테이너 쿼리, 캐스케이드 레이어, 네이티브 네스팅이 “컴포넌트마다 규칙을 나눠 갖자”는 요구에 응답하며 스타일 시스템을 뒷받침합니다.
CSS 사양, 레이아웃 가이드, 현대 스타일링 사례를 정리한 자료들입니다. 실험과 실무 사례를 함께 살펴보세요.
1984
Aldus PageMaker가 출시되자 디자이너들은 “모니터에서 바로 레이아웃을 짤 수 있다.”며 환호했습니다.
시애틀의 한 소규모 잡지사에서 디자이너 린다는 Macintosh를 켜고 PageMaker를 실행했습니다. 종이와 칼 대신 마우스를 잡은 그는 “사진을 드래그하면 바로 정렬되네!”라며 감탄했습니다.
편집장은 밤늦게까지 남아 페이지 템플릿을 만들고, 다음날 스튜디오에서는 “이제는 시안이 바로 PDF로 나오네요.”라는 말이 돌았습니다.
PageMaker는 WYSIWYG 레이아웃 패러다임을 보급했습니다. 콘텐츠와 스타일을 분리하려는 이후 웹 기술에도 영향을 주며, 여행잡지와 뉴스레터 제작 방식이 근본적으로 바뀌었습니다.
1987
“인쇄소 곡선이 화면에도 살아있네!”라며 디자이너들이 환호했고, Adobe Type 1 덕분에 같은 글꼴을 어디서나 쓰게 됐습니다.
타이포그래피 스튜디오에서 기술자 미아는 Type 1 폰트를 로드하고 레이저 프린터로 샘플을 뽑았습니다. 결과물을 본 편집장은 “인쇄소에서 보던 곡선이 화면에도 그대로 살아있네요.”라고 말했습니다.
광고 대행사는 즉시 라이선스를 구매해, 브랜드 가이드를 디지털 파일로 배포하기 시작했습니다.
벡터 기반 글꼴이 디지털 환경에 도입되면서, 웹에서도 폰트 임베딩을 상상할 수 있는 기반이 생겼습니다. 화면과 인쇄의 일관성을 지키려는 흐름이 이후 @font-face 도입의 근거가 됩니다.
1994
하콘 비움 리가 링크 스타일을 분리하자는 메모를 돌리자, 웹 커뮤니티는 구조와 표현을 나누는 아이디어에 주목했습니다.
CERN 세미나에서 하콘은 HTML에 직접 색상을 넣는 대신, 별도의 스타일 규칙을 적용하자는 구상을 발표했습니다. 참석자들은 “그러면 문서를 여러 모양으로 재사용할 수 있겠네.”라며 기록을 남겼습니다.
그의 메모는 메일링 리스트로 퍼져, 브라우저 팀과 학자들이 “스타일 언어 문법을 논의하자.”라는 스레드를 생성했습니다.
CSS 제안은 HTML과 스타일을 분리해 유지보수를 쉽게 하자는 철학을 제시했습니다. 선택자와 선언 블록 구조는 이후 CSS 사양의 뼈대가 되었습니다.
1996
“이제 스타일 파일 하나면 돼요”라며 팀이 환호했고, CSS1 권고로 브라우저가 같은 모델을 공유하기 시작했습니다.
W3C 발표 이후 브라우저 벤더는 지원 계획을 공개했습니다. 인터넷 익스플로러 팀은 `font`, `color`, `margin` 속성을 구현했고, 넷스케이프는 시험 버전에서 스타일 시트를 로드하도록 업데이트했습니다.
웹 디자이너 에이미는 기존의 `` 태그를 지우고 CSS 파일을 연결한 뒤, 코드가 간결해진 것을 보고 “이제 페이지마다 색을 바꾸려면 파일 하나만 수정하면 돼요.”라고 팀원에게 말했습니다.
CSS1은 선택자, 상속, 박스모델을 정의하며 스타일링 언어의 기반을 마련했습니다. 표준이 등장하자 브라우저 간 레이아웃 품질을 맞추는 일이 쉬워졌고, 스타일링 작업이 문서 전체로 확장되었습니다.
1998
W3C가 CSS2를 발표하며 “스크린·프린트·음성마다 규칙을 나눠 쓰자.”고 제안하자, 스타일 전략이 한층 정교해졌습니다.
1998년 W3C 브리핑에서 하콘 비움 리는 `@media print`와 절대·상대 위치 지정이 담긴 CSS2 초안을 소개했습니다. 컨퍼런스 참가자 미나는 “이제 메뉴는 고정하고 내용만 스크롤하게 할 수 있겠네요.”라며 즉석에서 데모를 따라 했습니다.
신문사와 포털은 같은 HTML을 두고 인쇄 스타일과 화면 스타일을 분리했습니다. 접근성 팀은 `aural` 미디어 타입으로 음성 브라우저를 지원하며 “스타일만 바꿔도 사용자 경험이 달라진다.”는 사실을 증명했습니다.
CSS2는 포지셔닝, z-index, 미디어 쿼리 전신, @font-face를 명세하면서 레이아웃과 타이포그래피를 코드로 제어할 기반을 마련했습니다. 프론트엔드는 구조를 건드리지 않고 연출을 조정할 수 있게 됐고, 백엔드는 같은 마크업을 여러 채널로 재사용하며 퍼블리싱 효율을 높였습니다.
2003
제프리 즈엘드만과 데이브 셰이는 같은 HTML로 전혀 다른 디자인을 완성하며 CSS의 표현력을 증명했습니다.
CSS Zen Garden 사이트가 공개되자 디자이너들이 몰려들었습니다. 모두 같은 HTML 파일을 내려받아 자신만의 스타일 시트를 제출했고, 하루 만에 수십 개의 작품이 전시되었습니다.
학생 디자이너 지안은 “HTML 구조를 건드리지 않고도 완전히 다른 느낌을 낼 수 있네요.”라며 자신의 스타일 시트를 커뮤니티에 공유했습니다.
Zen Garden은 구조와 표현 분리를 실감나게 보여 준 사례입니다. CSS만으로 디자인을 교체할 수 있다는 메시지가 퍼지며, 테이블 레이아웃에서 CSS 레이아웃으로 전환하려는 팀이 늘어났습니다.
2006
파이어폭스 확장 Firebug가 “요소를 클릭하면 규칙이 바로 보입니다.”라며 발표되자 프론트엔드 팀이 밤새 디버깅을 갈아탔습니다.
2006년, 조 롤이 Mozilla Summit에서 Firebug를 시연했습니다. 요소를 클릭하자 오른쪽 패널에 적용된 CSS와 상속 경로가 즉시 나타났고, 색상 값을 수정하자 화면이 곧바로 바뀌었습니다. 관객은 “뷰소스 시대가 끝났네!”라며 탄성을 질렀습니다.
웹 에이전시들은 그날 밤부터 테이블을 Flexbox로, float를 정리하며 실험했습니다. 스타일 수정이 저장 없이 이루어지자 디자인 검수 회의도 훨씬 가벼워졌습니다.
Firebug는 DOM 검사, CSS 실시간 편집, 네트워크 패널을 제공하며 개발자 도구의 표준을 정했습니다. 이후 Chrome DevTools, Safari Web Inspector 등 모든 브라우저가 비슷한 기능을 기본 제공했고, 스타일 시스템도 빠른 피드백을 전제로 설계되기 시작했습니다.
2009
“색상 값을 변수로 묶자!”라는 외침과 함께 Sass 3.0이 도입되자, 팀은 믹스인과 함수로 스타일 시스템을 짜기 시작했습니다.
루비 커뮤니티 밋업에서 햄프턴 캐틀린은 SCSS 문법을 발표했습니다. 참석자 사라는 `@mixin button($color)` 같은 예제를 따라하며 “버튼 스타일을 한 번에 바꿀 수 있네요.”라고 환호했습니다.
얼마 후 대형 커머스팀은 테마 색상을 변수로 정리해 시즌 캠페인 때마다 빠르게 스타일을 교체했습니다.
Sass는 네스팅, 변수, 함수 개념을 CSS에 도입했습니다. 반복되는 패턴을 축약하고 디자인 시스템을 코드로 관리할 수 있게 되며, 규모 있는 프로젝트에서도 일관된 스타일을 유지하게 되었습니다.
2010
이선 마커의 글이 공개되자, 디자이너들은 “한 코드베이스로 모든 화면을 대응해 보자.”며 미디어쿼리를 연구했습니다.
A List Apart에 글이 올라온 날, 스튜디오 슬랙에는 “이거 봤어요? 레이아웃이 화면에 따라 자연스럽게 변해요.”라는 메시지가 쏟아졌습니다. 팀은 즉시 데모를 만들어 모바일 브라우저에서 테스트했습니다.
클라이언트 미팅에서 디자이너는 데스크톱과 휴대전화에서 동시에 페이지를 열어 보이며 “이 구조라면 페이지를 따로 만들 필요가 없습니다.”라고 설명했습니다.
반응형 웹 디자인은 유연한 그리드, 유동 이미지, 미디어쿼리를 활용해 하나의 HTML로 다양한 화면을 지원하자는 전략이었습니다. 이 접근이 보편화되면서, 스타일 시스템도 화면 크기에 따라 책임을 나누도록 설계되었습니다.
2017
“이제 그리드를 진짜 그리드처럼 쓰자”는 말이 퍼졌고, 주요 브라우저 동시 지원으로 잡지형 구성이 CSS에 안착했습니다.
런던의 한 미디어 회사는 Grid 지원 소식을 듣고 잡지형 레이아웃을 실험했습니다. 디자이너 클로이는 `grid-template-areas`를 선언한 뒤 “컬럼이 화면 비율에 따라 자연스럽게 조정돼요.”라고 말했다.
개발팀은 IE를 위한 fall back을 준비하면서도, 최신 브라우저에서는 복잡한 템플릿을 그대로 사용했습니다.
CSS Grid는 행과 열을 동시에 제어할 수 있는 모듈을 제공하며, 레이아웃 설계 방식을 바꿨습니다. 반복되는 `float`와 `clearfix` 패턴이 사라지고, 의미 있는 영역 이름으로 구조를 설명할 수 있게 되었습니다.
2018
브라우저가 커스텀 속성을 안정 지원하자 디자이너들은 “--brand-color만 바꾸면 브랜드 전체가 바뀐다.”며 토큰 전략을 확산시켰습니다.
2018년, 모든 메이저 브라우저가 CSS 커스텀 속성을 기본 지원하면서 디자인 시스템 팀은 색상과 거리 값을 변수로 묶었습니다. 프론트엔드 개발자 진수는 `:root { --spacing-md: 1.5rem; }`를 선언하고 “테마 JSON만 바꾸면 전체 간격이 맞춰져요.”라고 설명했습니다.
React, Vue 컴포넌트 라이브러리는 커스텀 속성을 토큰으로 사용하며, 고객사별 테마 교체 시간을 크게 줄였습니다. 사용자들에게는 다크 모드 전환이 실시간으로 제공됐습니다.
커스텀 속성은 런타임에 값이 바뀌고 자식 요소가 상속받는다는 점에서 전처리기 변수와 다릅니다. 덕분에 프론트엔드는 테마, 상태, 사용자 설정을 CSS 계층에서 직접 표현할 수 있고, 백엔드는 토큰 파일을 내려주어 다중 브랜드를 지원할 수 있게 되었습니다.
2021
디자인 시스템 팀이 “부모 너비만 알려주면 우리가 알아서 정리할게요”라며 컨테이너 쿼리 프로토타입을 곧장 배포했습니다.
디자인 시스템 챕터는 컴포넌트 샌드박스에서 `@container` 규칙을 적용했습니다. 카드 컴포넌트가 부모 폭에 따라 자동으로 레이아웃을 바꾸는 모습을 보고 “이제 페이지 그리드를 몰라도 컴포넌트가 스스로 적응하네.”라는 말이 나왔습니다.
엔지니어 민수는 프로덕션 적용을 위해 폴리필과 지원 브라우저를 검토하고, 접근성 테스트 자동화 스크립트를 업데이트했습니다.
컨테이너 쿼리는 요소가 자신의 부모 크기나 스타일 컨텍스트를 기준으로 조건을 평가하도록 했습니다. 컴포넌트 단위로 반응형을 설계할 수 있어, 디자인 시스템과 모듈화 전략이 크게 단순해졌습니다.
2022
사양 edit 팀이 “레이어마다 우선순위를 지정하자.”고 제안하자, 대형 서비스는 스타일 충돌을 정리한 레이어 가이드를 채택했습니다.
2022년, Chrome 99와 Firefox 97이 @layer를 지원하자 디자인 시스템 팀은 `@layer reset, base, components, utilities;`를 선언한 뒤 슬랙에 붙여 넣었습니다. QA 엔지니어 세라는 “reset 레이어 덕분에 유틸 클래스가 마음대로 덮어쓰지 못하네요.”라며 안도했습니다.
대시보드 제품은 기능별 레이어를 분리해 실험 기능이 기본 테마를 망가뜨리지 않도록 했고, 오픈소스 프레임워크는 레이어 순서를 문서화하며 협업 규칙을 공유했습니다.
캐스케이드 레이어는 CSS 우선순위를 선언적으로 관리할 수 있게 했습니다. 프론트엔드는 레이어별 책임을 문서화해 충돌을 예방하고, 백엔드는 빌드 도구에서 레이어를 병합해 테마 패키지를 배포하며 다중 브랜드 환경을 안정화했습니다.
2023
“이제는 build 없이도 중첩 쓸 수 있어요!”라는 환호 속에 네이티브 CSS 네스팅이 전처리기 의존을 줄였습니다.
스타트업 프론트엔드 팀은 신규 프로젝트에서 Sass 대신 네이티브 CSS를 채택했습니다. 개발자 지호는 `.card { &__title { font-weight: 700; } }`와 비슷한 문법이 지원되는 모습을 보고 “빌드 단계가 간단해졌어요.”라고 말했다.
CI 파이프라인에서 스타일 빌드 타임이 줄어들자, DevOps 팀은 “컴파일 시간이 거의 사라졌네요.”라며 결과를 공유했습니다.
네이티브 네스팅은 선택자 중복을 줄이고 구조를 시각적으로 보여 주어, CSS만으로도 충분히 대규모 스타일 아키텍처를 구성할 수 있게 도왔습니다. 전처리기 없이도 유지보수성과 성능을 동시에 잡으려는 움직임에 힘이 실렸습니다.
