짤방으로 이해하는 웹 디자인의 역사

웹 디자인의 역사는 어떻게 발전해왔을까요? 전에 반응형 웹 디자인을 짤방으로 설명했던 산디스 씨(Sandijs Ruluks)가, 이번에는 웹 디자인의 역사를 짤방으로 간단하게 정리했는데요. 그는 웹 디자이너들이 '디자이너가 개발을 배워야 하는가?' 논하기 전에, 웹 디자인의 역사에 대해 알 필요가 있다고 생각해서 이 글을 썼습니다.

1. 웹 디자인의 암흑기

웹 디자인의 초창기는 매우 어두웠습니다. 검은색화면에 단색의 글씨만 존재했지요. 디자인이라고 할 수 있는 것은 특수문자와 탭키를 이용한 것이 전부였습니다.

 

2. 테이블 - 웹 디자인의 시작

브라우저가 생기고 이미지를 올릴 수 있으면서웹 디자인이 시작되었습니다. 그리고 테이블을 통해 정보를 구성할 수 있었는데요. 하지만 사람들은 레이아웃을 잡기 위해 테이블을 사용했습니다. 수직 정렬이나 그리드를 맞추기가 편하다는 장점을 가지고 있었는데요. 하지만 이 방식은 테이블 본연의 기능이 아니고, 유동적이지 못했습니다.

3.자바스크립트의 구원

 

자바스크립트가 html의 한계를 극복하기 시작했습니다. 예를 들어 팝업창이 필요하거나, 빠르게 코드를 수정하고 싶을 때, 자바스크립트를 사용했습니다. 웹사이트에 동적인 요소가 추가되면서 웹사이트는 한층 다채로워졌습니다. 요즘은 css가 좋아져서 자바스크립트를 대체하고 있지만, 그래도 여전히 강력한 재료입니다.

 

4. 표현력의 황금시대 - 플래시

플래시가 보급되면서 웹 디자인의 표현력은 황금시대를 맞이합니다. 디자이너는 모양, 레이아웃, 애니메이션, 인터랙션, 그리고 어떠한 폰트도 사용할 수 있었습니다. 플래시는 사용자 컴퓨터에 최신 버전이 설치되어 있고, 약간의 로딩시간을 기다리면 마법처럼 현란하게 작동했습니다.

하지만 검색에 최적화 되지 않았으며, 높은 CPU 점유율 때문에 아이폰에서 제외됩니다. (그러면서 웹 디자인에서 플래시는 몰락하게 되죠.)

 

5. CSS

플래시와 비슷하게 나온 css는 기술적으로 더 좋은 방식으로 접근하는데요. 플래시와 달리 기존 html로 구조를 유지하면서 css로 꾸미는 방법입니다. html을 뼈와 살이라면, css는 옷이라고 할 수 있겠네요.

css의 첫 번째 버전은 유연하지 않았습니다. 가장 큰 문제는 당시 구형 브라우저들이 css를 지원하지 않았는데요. 이 브라우저들이 css를 완전히 지원하기까지 오랜 시간이 걸렸습니다. 어느 정도의 표준이 생기고 css3까지 나오면서, 자바스크립트를 대체할 수 있을 정도로 발전했습니다.

이 글의 필자 산디스 씨는 css가 개발 언어라기보다 서술문에 가깝고, 디자이너들은 반드시 알아야 한다고 강조했습니다. 저처럼 영어가 익숙하지 않은 사람은 서술문이라는 표현은 동의 못하겠지만 디자이너가 반드시 알아야 한다는 사실은 동의할 것입니다.

 

6. 모바일 시대의 도래 : 단(column)을 이용한 디자인

 

모바일로 웹사이트를 브라우징 하는 것은 대단한 도전이었습니다. 속도가 매우 느리고, 기기에 따라 디자인이 전부 달랐습니다. 또한, 잘 못 쓰면 폭탄 요금을 맞을 수 있었기 때문에 인터넷 버튼을 누르는 것조차 두려워했습니다.

하지만 스마트폰이 보급되고, 모바일 인터넷 환경이 좋아지면서 모바일 웹 디자인도 발전하기 시작합니다. 처음에는 단(column)을 이용하는 디자인으로 모바일에 대응했습니다. 대표적으로 960 그리드 시스템을 12단으로 나눠서 사용했습니다.

그다음으로는 자주 쓰이는 서식, 메뉴, 버튼 등 일반적인 UI를 쉽게 사용할 수 있는 라이브러리가 등장했습니다. 부트스트랩(Bootstrap)과 파운데이션(Foundation)이 대표적인데요. 모바일도 대응할 수 있는 웹 사이트를 빠르고 쉽게 만들 수 있게 되었습니다. 하지만 그만큼 디자인이 비슷한 사이트들이 많아졌으며, 디자이너들이 사용하기에는 코드가 어려웠습니다.

 

7. 반응형 웹 디자인

 

디자이너 겸 개발자 에단 마콧 씨(Ethan Marcotte)는 같은 콘텐츠로 화면 넓이에 따라 디자인을 바꿀 수 있는 '반응형 웹 디자인'이라는 용어를 만들고 제안했습니다. 반응형 웹 디자인은 html 수정없이 css 수정으로 모든 크기의 화면에 대응할 수 있습니다. 모바일 웹사이트를 따로 만들 필요도 없어 효율적이며, 어디서나 같은 콘텐츠를 보여줄 수 있습니다.

하지만 반응형 웹 디자인에도 몇 가지 문제가 있는데요. 디자이너들은 반응형 웹 디자인을 위해 여러 가지 화면에 맞는 디자인을 각각 만들어야 합니다. 또한,개발자들은 이미지를 어떻게 사용할지, 데스크톱 혹은 모바일 우선인지 신경 써야 할 것이 많습니다.

 

8.플랫 디자인의 시대

수 많은 기기에 맞춰 디자인하는 것은 시간이 오래 걸립니다. 이에 사람들은 정교하지만 오랜 시간이 걸리는 스큐어모픽 디자인을 버리기 시작합니다. 그리고 단순하고 콘텐츠가 돋보이는 플랫디자인을 선호하기 시작하는데요. 형태는 기능을 따른다는 말처럼, 이미 오래전부터 플랫디자인의 시대가 예견되었을지도 모릅니다.

9. 웹 디자인의 미래는?

 

우리가 디자인한 이미지파일이 바로 브라우저에서 작동한다면 어떨까요? 거기에 웹 표준과 접근성까지 준수하면서 모든 환경에 대응한다면 어떨까요? 디자이너들은 디자인에 집중하고, 개발자들은 브라우저 호환을 걱정할 필요 없이, 실질적인 개발에 집중할 수 있을 것입니다. 물론 저 같은 웹 퍼블리셔는 일자리를 잃을 수도 있겠지만, 기술의 발전에 뿌듯할 것 같네요. 어쩌면 미래에 기술력보다 더 중요한 것은 좋은 웹사이트를 만들수 있는 기획과 창의력이 아닐까 생각해봅니다.

by 원숭이발자국

출처: FroontBlog