지난한 도전과 응전 : 웹 디자인의 역사

//지난한 도전과 응전 : 웹 디자인의 역사

NEWS

도모브로더
지난한 도전과 응전 : 웹 디자인의 역사

 


현재 vs. 과거

두 가지 웹 페이지 중, 어떤 쪽이 더 여러분의 눈길을 끄나요? 

각자의 취향일 뿐 정해진 답은 없습니다. 다만, 두 디자인 사이에는 약 11년의 시간이 흐르고 있습니다. 두 디자인 모두 브랜드의 정체성을 담고 그 시대의 기술과 트렌드로 브랜드의 고민을 해결해가는 과정 중 하나입니다.
모든 역사는 도전과 응전의 기록이라고 하죠. 웹디자인의 역사 역시 기술의 발전과 함께 치열한 도전과 응전을 계속하고 있습니다. 모든 디자인이 과거의 디자인에 대한 반성과 복기, 그리고 기술의 발전을 디딤돌 삼아 보다 사용자의 눈을 끌기 위해 고군분투하며 하나의 흐름을 만들어내고 있었습니다.

 


 

도전 vs. 응전

도모브로더가 매주 수요일 진행하는 [도모브로더 리더 수요 세미나, DLWS]. 이번 주에는 Rain(노승언 크리에이티브 팀장)이 [웹 디자인의 역사]라는 주제로 발표를 했습니다. 어떤 상황에서도 사라지지 않는 Rain의 꼭꼭 집어주는 말솜씨로, 실로 재미있는 디자인의 역사 강연이 펼쳐졌습니다. 

Rain이 처음 디자인을 시작했던 2008년부터 현재에 이르기까지 각 시대를 풍미했던 디자인 트렌드와 그 대표작을 시계열적으로 보여주었는데요. 위에서 보신 두 개의 디자인 중 좌측 [디자인1]은 2019년 디자인 트렌드를 모두 반영한 웹 페이지이고, 우측 [디자인2]는 2008년에 유행하던 웹 페이지 형식이라고 합니다. 

 

[사진1] 열강하는 도모레인

사실 이번 DLWS 포스팅은 Rain 특유의 촌철살인 같은 유머와 설명이 없으면 그 흥미진진함이 10%도 전해지지 않아서 무척 아쉽습니다. 전 과정을 찍어 통으로 올리고 싶었지만, Rain의 만류가 눈에 보듯 뻔해 이렇게 평면적인 포스팅으로라도 전해볼까 합니다.  

 

 

2011-12, 웹기술 ‘범람’의 시기

범람이라는 단어에서도 눈치 챌 수 있듯이, 이 시기에는 웹페이지 기술이 좋아지고 광고주가 스마트폰과 더 큰 모니터를 사용하게 되면서 가능한 모든 시도가 다 허용되었다고 합니다. 

데스크 탑만이 아니라 태블릿과 모바일 폰에서도 웹사이트를 볼 수 있도록 크기를 조율하는 반응형 디자인이 등장하고, 일러스트레이션이 대담하게 쓰였으며, 마우스 스크롤로 페이지 이동이 가능한 스크롤 페이지도 등장했습니다. 데이터와 지식을 시각적으료 표현한 인포그래픽을 앞세운 디자인, 정사각형에 국한되지 않는 Diagonal 디자인, HTML5 / CSS3 / Javascript 등 새로운 웹기술과 함께 실험적인 인터페이스, 웹 페이지 내의 스크롤이나 버튼 클릭으로 자연스럽게 스토리가 이어지는 스토리 텔링도 이 시기에 나타났습니다. 

 [표1] 2011-12년 등장한 다양한 웹 디자인

2013-14, 혼돈에서 질서로

 

                                    [디자인3] iOS7이전                                     [디자인4] iOS7이후

아이폰을 쓰는 분이라면 기억하실 것 같아요. iOS 업데이트를 했던 어느 날, 폰의 앱이 너무 번쩍거려 눈이 부셨고, 매우 난감했죠. 앱의 컬러 톤만 바뀐 것이 아니라 뭔가 유치한 듯 바뀐 앱 디자인을 두고 많은 이야기가 오고 갔던 기억이 납니다. 

Rain의 강의를 들으니 애플이 앱 디자인을 스큐어모피즘에서 플랫디자인으로 전환한 결과라고 합니다. 저 같은 사용자보다 더 멘탈이 붕괴된 사람들은 디자이너들이었다고 해요  왜냐하면, 애플의 디자인인 스큐어모피즘에 맞춰 실력을 갈고 닦고 있었는데 하루아침에 기준이 바뀐 셈이니까요. 아래 디자인을 보시면, 스큐어모피즘의 수준이 얼마나 끝 모르고 정교(?) 해졌는지, 또 그에 반해 플랫디자인은 얼마나 플랫(?)한지  확인하실 수 있습니다. 

2013-14년은 기술의 발전으로 화면이 넓어지고, 로딩시간이 단축됨에 따라, 가능한 모든 것을 구현했던 지난 시기에 비해 디자인도 훨씬 정리되었습니다. 효과적인 디자인에 대해 생각하기 시작한 결과이겠죠?

화려하지만 무거워서 웹 페이지 화면에 뜨는 순간 무조건 꺼버렸던 플래시를 대신하여 패럴랙스 스크롤이  등장하고, 핀터레스트/트위터/페이스북/ 텀블러 등이 훅훅 넘겨가며 보기 쉬우라고 무한스크롤을 도입합니다. 메인 페이지에 영상이나 고퀄의 이미지 한 장이 뙇하고 나타나기 시작했습니다. 

 

2015-16, 사용자의 경험에 기댄 디자인 + 개인화의 시작

“대충 좌측상단에 떠 있는 브랜드 로고는 Home 버튼이고 이쯤 마우스 오버하면 검색창이 있을거야” 그간 축적된 사용자들의 경험을 바탕으로 디자인은 타이포그래피의 강조, 고스트 버튼 추가 등 사용자의 경험에 충격을 주지 않는 선으로 정리되는 등 디자인적 요소는 단순화됩니다. 애플이 도입한 플랫디자인도 정착되지요.

[디자인7-8] 타이포그래피의 강조 / 고스트 버튼 사용

한편, 넷플릭스와 유투브 등은 쿠키를 통해 좀 더 개인화된 맞춤형 콘텐츠 리스트를 보여주기도 합니다. 미적 감각보다는 필요한 맞춤 정보 전달에 최적화된 디자인이죠. 

[디자인9] 넷플릭스 페이지

 

2017-19, 브랜드 정체성으로서의 웹 페이지

이제 웹 페이지는 정보가 아닌 브랜드 정체성 전달에 주목합니다. 구체적인 설명은 생략된 채 비주얼 요소만으로 브랜드를 표현합니다. 모바일 디자인이 PC화면의 변주가 아니라 사용자 경험으로 먼저 고려되는 상황에서 모바일 레이아웃이 먼저 디자인됩니다. 이에 따라 브랜드 BI 또한 모바일 환경에서 더더욱 간결해지고 있습니다. 

 

2020, ???

여러분이 최근 접속한 웹 페이지는 어떤 브랜드의 페이지였나요? 2008년부터 지금까지 고작 10년간 이렇게 숨차는 변화가 펼쳐졌는데, 이후 웹 페이지의 디자인은 어떻게 변화할까요? 스마트폰을 손에서 내려놓지 않는 Phono Sapiens에게 웹 페이지는 앞으로도 필요할까요? 어떤 대체재가 나올까요? 

 

디자이너는 힘들어

DLWS 오늘의 한마디는 “디자인은 점점 어려워지니, 빨리 다른 일을 알아봐야 하는 것은 아닌가?(웃음)” 입니다. 치열하게 엎치락뒤치락 하는 디자인의 역사를 보니, 불안감이 느껴질 만도 합니다. 

하지만, “역사를 아는 자는 무너지는 담당 아래 서지 않는다”난 말처럼 크리에이티브 팀장 Rain이 이끄는 DCU(DOMOBRODEUR Creative Universe)는 늘 대세 디자인의 반 발짝 앞에 있을 것이라 생각됩니다. DCU 화이팅! 

 

도모브로더 리더 수요 세미나는 다음주에도 계속됩니다. 읽어주셔서 고맙습니다. 

 

#도모브로더 #웹디자인의역사 #DLWS #노승언

발제자 Rain 노승언

다른 회사에 없는 디자이너

발행자 mia 김혜림

#도모에서만10년째 #도모의아무일을하는중

 

Toggle Sliding Bar Area