Styling Story for Makers

“어떻게 하면 더 보기 좋게 꾸밀까?” 인쇄소 풀과 가위에서 오늘의 웹사이트까지, 디자이너들의 이야기

1980년대 잡지 디자이너들은 사진과 글을 종이 위에 풀로 붙여 가며 페이지를 만들었어요. 그러다 모니터에서 직접 페이지를 짤 수 있는 도구가 나왔을 때 한 디자이너가 놀라며 말했죠. “이제는 화면에서 끌어다 놓기만 하면 잡지가 만들어진다고요?” 인쇄실의 풀과 가위가 사라지고 그 자리에 마우스와 픽셀이 들어왔어요.

인터넷이 등장하자 새로운 고민이 생겼어요. “글만 빼곡한 페이지를 어떻게 색깔과 여백으로 꾸밀까?” 한 연구자가 “꾸미는 방법을 따로 적어 두자”고 제안한 게 오늘 우리가 보는 알록달록한 웹사이트의 시작이었어요. 그 후 디자이너들은 “PC, 태블릿, 스마트폰 화면 크기가 다 다른데 하나의 디자인으로 어떻게 다 맞출까?”라는 또 다른 도전에 나섰어요.

이제는 회의실에서 디자인 팀이 “카드 크기만 알면 알아서 가지런히 정렬돼요”라고 시연해요. 연도 버튼을 누르면 그 시절 사람들이 어떻게 고민하고 풀어냈는지 이야기로 따라갈 수 있어요. 낯선 개념은 이야기 안에서 다시 나와요.

연대기를 누르면 같은 화면에서 상세 이야기를 읽을 수 있습니다.

1980s

“화면에 보이는 그대로 종이에 인쇄되게”

인쇄소에 맡기지 않고도 컴퓨터 화면에서 글꼴과 배치를 직접 다듬는 전자출판(DTP) 시대가 열리면서, 훗날 웹 디자인이 물려받을 시각적 기초가 만들어졌어요.

1990s

“문서의 내용과 옷차림을 분리하자”

글자마다 색상 태그를 덕지덕지 붙이던 혼란을 끝내고, 스타일시트(CSS) 파일 하나로 사이트 전체의 글꼴과 여백, 위치를 깔끔하게 입히는 표준이 탄생했어요.

2000s

“HTML 한 줄 안 고치고도 완전히 다른 디자인으로”

CSS Zen Garden이 스타일시트의 진짜 힘을 증명했고, 브라우저에서 실시간으로 스타일을 고쳐 보는 Firebug와 변수·중첩을 도입한 Sass가 디자이너와 개발자의 날개가 됐어요.

2010s

“스마트폰부터 대형 모니터까지, 막힘없는 레이아웃”

화면 크기에 맞춰 유연하게 바뀌는 반응형 웹, 가로·세로 정렬과 2차원 격자를 정복한 Flexbox와 Grid, 그리고 표준 CSS 변수와 유틸리티 퍼스트(Tailwind)가 등장한 황금기예요.

2020s

“외부 도구 없이도 스스로 똑똑해진 현대 CSS”

화면 전체가 아니라 자신이 놓인 칸 크기에 반응하는 컨테이너 쿼리, 우선순위 충돌을 막는 캐스케이드 레이어, 기본 중첩 문법까지 CSS 자체에 모두 들어왔어요.

더 깊이 읽을 거리

CSS 사양, 레이아웃 가이드, 현대 스타일링 사례를 정리한 자료들입니다. 실험 기록과 실무 사례를 모아 두었습니다.