다음의 최신유행 디자인, 그리고 이미지 열거 기술

다음이나 네이버나 페이지 개편하는 모습을 보면 참 재미있다. 내부 일 처리 과정이 어떻게 되어가는지는 몰라도 뭔가, '파도타기 한다'는 느낌을 받을 정도다. 한 시즌 유행이 시작되면 모든 페이지를 유행에 맞춰 개편했다가, 다른 유행이 찾아오면 다시 한번 서비스별로 순차적으로 개편해나간다.

지금 설정되어있는 다음의 유행은 아래와 같다.

이렇게 파란 톤을 브랜드 이미지로 단일화해주고, 블루/화이트로 쭉 나간다. 적어도 내 디자인 감각에선 더이상 깔게 없다. 가끔 들쑥날쑥하게 규약을 어긴것으로 보이는 UI(신지식의 활성탭 모양, 운세 페이지의 hot 색이 파란색인것)등은 눈에 띄지만, 그래도 크게 지적질 할만한건 아니니까.

애드클릭스, DNA, 자료실, 그린넷, 웹인사이드, 취업센터, 복권, 보안넷, VOD, 블로그, 카페, 미즈넷 등이 아직 업데이트 안된 예전 디자인을 하고있고, 어떤건 중구난방이기도 하다. 하지만 이들이 우선순위만 뒤쳐졌을 뿐, 몇달 안에 모두 다음 최신 유행으로 개편될것 같다.

TV팟이나 위젯뱅크, 하이픈, pomm, 미즈쿡, 미디어다음 등은 최신유행의 형태를 띄고있으나 핑크나 블랙 등등 색상이 다소 다른데, 이건 해당 서비스의 성격을 고려하여 색상 변경을 허용한게 아닌가 생각된다.

이런 UI변경은 비단 모양에만 국한된게 아니다. 모양새 뿐만 아니라 내부 구조도 최신유행을 적용하고있다.

지금까지의 UI는 이런 이미지 하나하나를 불러오는 형태였는데, 이게 아래와 같이 바뀐다.

이렇게 네비게이션에 필요한 통짜 그림을 불러와서, 자바스크립트로 필요한 부분만 보여준다. 이렇게 했을 때 일단 사용자 입장에서는 이미지를 통으로 로딩하기에 이미지가 하나씩 주르륵 로딩되는 모습은 보지 않으며, 여러개의 이미지를 불러오는것보다 하나의 이미지를 불러오는게 더 빠르다는 점이 장점이다. 이 기법을 Image Concatenation(이미지 컨캐러네이션, 이미지 연결)이라고 부르더라.

주위에서 쉽게 볼 수 있는 예는 구글 코리아의 메인 페이지다.

아래에 마우스를 올리면 애니메이션으로 퐁 튀어나오는 장면을 이미지 한장으로 구현했다. 구글 성격상 메인 페이지에 플래시를 넣는 파격을 할것 같진 않고, 저걸 Animated GIF로 만들면 페이지 로딩 된 다음 Stop이 안걸리니 만들기 어려웠으리라 생각된다. 품질도 썩 좋지 않았을거고.

위의 이미지 한장으로 오덕스러울정도로 효율적으로 뽑아낸게 지금의 구글코리아 메인페이지다. 이 부분에 대해서는 여러 블로거들이 다루었다.

[참조글] Hooney :: 변경된 구글 코리아의 첫 화면을 뜯어 보자.

[참조글] Make It True :: 변경된 구글 코리아의 첫 화면을 뜯어 보자

그리고 근래에 본 양키 오타쿠의 작품은 플리커 창업자인 Caterina Fake가 만든 Hunch.com이다.

이렇게 큰 메인페이지를, 아래의 한장의 이미지만 써서 표현한다.

진짜 뭐라 말도 못할만큼 오덕스럽다. 하지만 대단하기도 해. 좀 멋있고.

아아.. 다음 탑 개편 이야기하다가 산으로 갔는데, 아무튼 저렇게 이미지 열거 방식을 이용해서 로딩 타임도 줄이고, 디자인도 좋게 뽑아낸 케이스라는것이다. 네이버의 경우 디자인은 예쁘게 뽑아놨지만 이미지 열거 등은 메인페이지 일부에 한해 제한적으로 사용한것 같다.

이 글이 도움이 되었다면 RSS로 구독하세요.

http://blog.daum.net/xml/rss/miriya

이 블로그의 모든 글은 자유롭게 링크할 수 있으며, 오픈캐스트 발행을 허용합니다.

다음 블로그로 스크랩하거나, 출처와 함께 퍼가도 뭐라 안합니다.(출처 없으면 뭐라 할겁니다.)