Styling Story for Makers

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

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

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

이제는 회의실에서 디자인 팀이 “카드 크기만 알면 알아서 가지런히 정렬돼요”라고 시연합니다. 연도 버튼을 눌러 그 시절 사람들이 어떻게 고민하고 풀어냈는지 따라가 보세요. 다소 낯선 개념도 이야기 안에서 다시 풀어드릴게요.

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

1980s

“인쇄소 풀과 가위가 모니터로 들어왔다”

디자이너들이 처음으로 화면에서 직접 잡지를 만들 수 있게 되고, 어떤 크기로 키워도 깨지지 않는 글꼴이 등장했어요.

1990s

“꾸미는 방법은 따로 적어두자”

글만 빼곡한 페이지를 색깔과 여백으로 꾸미는 방법이 등장하고, 모든 브라우저가 같은 규칙을 따르기로 약속하기 시작했어요.

2000s

“같은 글, 천 가지 분위기”

같은 페이지가 디자이너 손에서 완전히 다른 모양으로 변신할 수 있다는 게 증명되고, 디자인을 코드처럼 다룰 수 있는 도구들이 나오기 시작했어요.

2010s

“PC, 태블릿, 폰 어디서든 보기 좋게”

스마트폰 시대에 맞춰 한 사이트가 화면 크기에 따라 알아서 모양을 바꾸고, 잡지처럼 자유로운 배치도 가능해진 시기예요.

2020s

“조각조각 만들어 어디서든 재사용”

한 번 만든 부품이 어디에 놓이든 알아서 적응하는 기능들이 등장하면서, 거대한 사이트도 깔끔하게 관리할 수 있게 됐어요.

더 깊이 읽을 거리

CSS 사양, 레이아웃 가이드, 현대 스타일링 사례를 정리한 자료들입니다. 실험과 실무 사례를 함께 살펴보세요.