Design

올림픽 사이트로 웹디자인 트렌드 찾기 – 2012년 2016년 비교

August 17, 2016

author:

올림픽 사이트로 웹디자인 트렌드 찾기 – 2012년 2016년 비교

시간은 언제나 많은 것을 변화시킨다. 웹사이트도 변하고 모바일 사이트도 앱도 변한다. 변화를 가장 쉽게 느끼게 하는 것은 언제나 디자인이다. 대부분의 사용자는 기능상의 변화는 크게 기억하지 못한다. 그냥 새로운 기능이 업데이트 된 그 순간에 작거나 큰 ‘편함’ 을 느낄 뿐이다. 주시한다고 하고 보는 나도 기능상의 변화는 크게 기억하지 못할 때가 사실 많다- 는 사족

웬만한 포털이나 뉴스 사이트에서, 동일 주제로, 동시에, 주기적으로 업데이트 하거나 다시 만들어야 하는 사이트가 몇개나 있을까?
정답은 올림픽 사이트와 월드컵 사이트다.  올림픽과 월드컵 사이트를 보면 시간의 변화에 따른 디자인의 변화를 확실하게 느낄 수 있다.

 

02
2012년 런던올림픽

 

2012년의 런던올림픽 사이트다, 공중파 채널에서 만든 나름대로 신경 쓴 디자인일텐데도 지금 보면 촌스럽다. 정확히 무엇으로 인해 이미지를 큼지막 하게 쓰게 된 것인지 알 수 없지만 (개인적인 생각이지만 패럴랙스 스크롤링과 모바일이 이미지를 크게 쓰는 경향에 일조했다고 생각한다) 지금 이미지를 큼지막하게 쓰는 것에 비하면 이미지가 많이 작다.

 

03

실제 크기가 이정도? 우측의 광고가 뜨지 않는 건 2013년에 한 캡쳐라 그렇다. 2012년에는 학생이었기 때문에 사이트 관심도 없었다 ㅋㅋㅋ

 

그렇다면 2016년 리우 올림픽 사이트는 어떨까? 바로 이렇다.

 

04
2016년 리우올림픽

 

확실히 이미지가 커졌다. 그리고 스크롤은 늘어났다. 한 개의 페이지에 어찌되었던 비슷한 양의 정보를 담아야 하기 때문에 스크롤은 길어 질 수 밖에 없다. 우측 영역 없이 가로 배열만 사용하는 것도 달라진 점이다. 더불어 브라우저의 중간에 정확히 사각형의 영역을 잡고 그 안에서만 콘텐츠를 사용했던 것과 다르게 (브라우저에 여백이 있어도 컨텐츠는 절대 튀어나오지 않는다) 지금은 모니터나 브라우저 전체를 사각의 영역으로 생각한다.

05
회색이 레이아웃, 연보라색이 컨텐츠 영역

 

06
실제로 보면 이런 느낌, 두 캡쳐 모두 똑같은 모니터에서 한 것,

 

사각형 일색이던 2012년에 비해 2016년에는 레이아웃이 확실히 대범해 졌다. 색상도 대범해진건 리우이기 때문일까?…

 

다음은 Daum이다.

 

07
2012년 런던올림픽

 

08
2016년 리우올림픽

 

별도의 <사이트>를 만드는 언론사와 다르게 포털의 올림픽 페이지는 하나의 <섹션>이다. 그래서인지 사이트보다는 조금 더 네모네모한 레이아웃이지만 역시 세로로 우측과 좌측의 단을 나누는 레이아웃은 없다. 가로 배열이다.  전체적으로 2014년에 비해 2016의 사이트는 다음과 같은 몇가지가 변했다고 정리할 수 있을 것 같다.

  1.  이미지와 폰트가 커졌다.
  2.  우측과 좌측의 영역을 구분하지 않는다.
  3.  탭 메뉴, 이미지 슬라이드, 마우스 롤오버등 액션의 사용이 다시 많아졌다.
  4.  동영상 컨텐츠가 많아졌다.
  5.  #해쉬태그의 사용
  6.  버튼 사용이 많아짐

이정도?