Transcript 전문 다운로드

NAVER 개편에 대한 OVERVIEW
2009. 01. 05
1차수정 : 2009. 01. 08
2차수정 : 2009. 01. 13
작성자 : 오아라
1
 OVERVIEW
• Main UI
- 깔끔하게 정리된 컨텐츠와 UI
• Page coding layout
- 로그인폼의 이동
- 이용자만의 서비스 메뉴바
- 뉴스 캐스트
- 오픈 캐스트 : 이용자 참여형 서비스
- 네이버 캐스트
- 타임스퀘어 : 필요한 정보들 위젯 사용
2
“ 양질의 컨텐츠를 보다 편리하게 이용할 수 있도록 지원하는 것을 목표로 개편 ”
 Main UI
중복되었던 컨텐츠와 불필요했던 화면구성으로
노출되어 있던 컨텐츠들이 많아 다소 정신없고 복잡했던 메인
에서 깔끔하고, 심플하게 디자인 위주의 개편.
안정된 느낌이 들었던
예전 레이아웃에서 왼쪽 테이블을 없애고 센터에 있던 광고배너,뉴
스 등의 컨텐츠 영역을 넓혀 사용자 시선에 약간 어색한 구성.
더 넓어진 해상도에 비해 폰트크기가 작아져 중요한 이슈들이 한눈
에 들어오지 않는 디자인과 이용자의 의도와
상관없이 마우스오버만 해도 아무때나 뜨는 동영상 광고에 불편
함과 반감을 유발.
Before
After
로그인
광고배너
뉴스
오픈캐스트
타임스퀘어
전
후
전
후
전
후
전
후
595x205
397x443
595x162
190x102
280x158
376x444
595x235
191x421
280x357
1
6
1~3
Icon 4
Icon 10
1
3
8
12
뉴스밑
Right하
Right하
Left하
Left하
Right하
Right하
쇼핑
전
후
전
후
전
이미지 size
197x100
280x100
388x100
595x100
390x241
이미지 갯수
x
x
1
1
1
영역
Left 상
Right 상
Center상
Left 상
광고밑
문구 글자수
31
35
x
x
17~20
25~30
17~20
17~21
8~12
18~19
17~20
4~11
4~12
4~6
문구 줄(행)수
(Title 제외)
x
x
x
x
7줄
6줄
12줄
4줄
2줄
4줄
3줄
12줄외17줄
19줄
20줄
세부 내용
이미지↑.
좌 > 우 이동.
글자수↑.
이미지↑.
중앙 > 좌 이동.
후
네이버캐스트
광고밑
이미지↑.
좌측으로 영역확대.
글자수↑.
줄(행)수↓
뉴스밑
이미지↑, 갯수↓.
좌측으로 영역확대.
줄(행)수↓.
이미지수↑.
icon수↑.
글자수↑ / 행 ↑.
이미지↑, 갯수↑.
글자수↓.
줄(행)수↓
이미지↑, 갯수↑.
글자수↓.
* 전체적으로 컨텐츠의 영역은 넓혔지만 해당 문구와 이미지는 최소한으로 심플하게 정리.
3
 로그인폼의 이동 의도
Right
로그인폼의 이동
Left
• 네이버 개편의 큰변화
- 3단구조의 메인에서 2단구조
형식으로 변형.
- 좌측상단에 있던 로그인폼의
위치를 우측상단으로 이동.
( 개편에 대한 관심 유도를 위한
하나의 수단으로 추측됨)
사용자들의 시선이 잘 닿지 않고
이용률이 매우 저조.
Before
이용율이 적은 영역을 없애고 전체적인 홈페이지 효율적 이용율을
높히기 위해 좌측 로그인폼을 과감하게 우측으로 이동.
센터의 컨텐츠영역을 넓혀 3단구조의 메인에서 2단구조로 변경.
(네이버 사내 테스트 결과 > 로그인실패 없음)
After
4
 Page coding layout
• 불필요하고 정신 사나운 컨텐
츠들을 과감히 정리하여 새롭
고 필요한 메뉴들로만 구성되
어진 UI로 개편되었지만
그만큼 오히려 더 비중을 많이
차지하게 된 광고 배너들로 인
해 사용자들의 메뉴별 관심 저
하를 초래.
• 원하는 컨텐츠 접근을 위한 클
릭수가 많아져 불편.
• 전체적으로 예전의 정보지식
포털 사이트의 이미지보다 홍
보적 성향의 사이트의 이미지
가 큼.
• 코딩방식의 차이점
개편전 일반코딩방식(Table for
Layout)에서 현재 개편후의 웹표
준 코딩방식(CSS Layout)의 메인
상단부분은 최대한 div의 활용으로
제대로 코딩하려고 노력하였으나
스크롤바가 내려지는 하단은
Table에 div만 덮은 형식으로 코딩
소스를 비교해보면
전체적으로 table이 아닌 div만을
이용함으로써 한눈에도 파일의
Table을 전혀 사용하지 않고
Div를 최대한 활용하여
전체적으로 디자인과 개발의 구분 관리가
편리한 웹표준화 형식으로 코딩.
용량이 많이 절감된 것을 알 수
Before
*
Table사용 코딩 영역
있고 각각 기능별 컨텐츠의 오류
After
수정 및 삭제 등 관리에 있어서
더욱 시간이 절약되고 편리하다.
5
 이용자만의 서비스 메뉴바
“더보기” 클릭시, 전체 메뉴바 보기
After
Before
• 개편전의 네이버홈에서의 정신없던 메뉴바형식에서
깔끔하게 정리된 서비스 메뉴바
원하는 서비스 메뉴바를 설정하여 사용할 수 있도록
My 메뉴설정 컨텐츠가 생김.
•개편 후 새로움의 인식이 강해 더 편리할 수 있는 서비스 메뉴바가
실질적인 사용에 있어서 항상 애용하며 자주 즐겨찾던 메뉴의 위치를
이미 파악하고 있는 예전 네이버홈에 익숙한 유저들의 입장에서는
원하는 메뉴 찾기 불편해져
한편으로는 오히려 기존 사용자들에 대한 불만을 유발.
원하는 서비스의 메뉴 설정 최대5개 선택
“편집하기” 클릭시, My 메뉴설정 페이지
6
 뉴스 캐스트
After
Before
장점
 원하는 언론사별 뉴스를 이용자
단점
 뉴스 캐스트를 통해 타사이트의 뉴스 정보를 접할때 페이
가 선택하여 언론사에서 직접 편
지의 사이드영역의 선정적 광고들 때문에 미성년자의
집하고 운영하는 뉴스 구독 가능.
이용에 불편을 줄 뿐만 아니라 원하지 않는
 여러 언론사별 뉴스를 한눈에 볼
수 있는 편리성.
 다양한 관점으로 이해하고 접할
수 있는 다양성.
 뉴스 캐스트 전체보기를 통해 여
러 언론사의 기사를 볼 수 있을
뿐더러 원하는 언론사의 기사를
따로 네이버홈을 통하지 않더라
도 실시간으로 확인가능한
rss기능 구현.
성인광고들로 인한 성인 이용자들의 불만도 초래함.
 실질적으로 정보를 접 할때 UI만 깔끔하게 정리되어
새단장 되었을 뿐 이용하는 유저들의 입장에선
복잡하고 어수선하다는 의견들이 다수.
 여러 언론사의 뉴스를 서로 비교하며 볼 수 있다는 의도와
달리 오히려 한가지내용의 기사를 여러언론사별로
보기 힘들어 내용면에서는
정리가 잘 되어 있지 않아 불편.
 뉴스캐스트는 네이버 개편이후의 가장큰 유저들의 불만으
로 의견이 다분한 상황.
개편후 일주일간의 조사결과 뉴스캐스트 부문에서만
방문자수가 30%이상이 감소했음을 봤을때
원하는 언론사의 뉴스 설정
최대7개 선택
네이버홈의 전체적인 이용율 감소의 큰 원인.
7
 오픈 캐스트 : 이용자 참여형 서비스
정보가 있는 해당 사이트로 직접 이동.
 인터넷을 통하여 혼자만 알기에 아까운 많은 정보들을
링크로 담아 캐스트로 직접 발행.
 캐스터가 수집한 캐스트를 네이버 홈에서 다른 많은
원하는정보의 캐스트 구독하기 (login필요)
이용자들과 공유 가능.
 관심분야의 또 다른 사이트도 웹서핑 가능.
 네이버 홈에 누구든지 자유롭게 정보를 제공할수도
제공받을수도 있는 이용자 참여형 서비스
네이버 메인에 보이는 캐스트의 노출 기준은
- 구독자가 많은 캐스트 중 최근 발행활동이 활봘한 캐스트
가 일정시간(2시간정도)주기로 자동 랜덤 추출.
그러므로 특정이유로 인한 편파 편집이 불가능.
• 로그인 하는 유저들은 블로그 유저들이 대부분이므로
구지 오픈 캐스트가 아니더라도 유저들이 원하는 정보
가 있는 이웃 블로그를 통해 필요한 정보를 열람할 수
있으므로 오픈 캐스트를 통해 정보를 공유하자는 의도
는 이중적이고 큰 필요성을 느낄 수 없는 카테고리.
하지만 아직 오픈된지 얼마되지않아
더 지켜볼 필요가 있다.
8
 네이버 캐스트
 네이버 캐스트 : 오늘의 뮤직, 책, 포토, 세계인물, 과학,
영화 등의 더욱더 다양한 생활 문화 콘텐츠에 대한 각 분야의
전문가 및 양질의 컨텐츠와 정보들을 한눈에 확인 가능.
• 문화와 실생활에 관련된 양질의 정보를 사용자들에게
제공하자는 의도이지만 관심없는 사용자들에게는 메인의 너무 많은 영역을
차지하는 불필요한 컨텐츠.
9
 타임스퀘어 : 필요한 정보들 위젯 사용
 타임스퀘어를 통해 시시각각 변하는 날씨, 스포츠
경기결과, 환율 등의 다양한 정보들이 수시로
업데이트 되어 한눈에 꼼꼼히 확인.
타이머
지역번호
국가번호
시계
달력
스포츠
계산기
날씨
 그 외에 검색을 통해서 알수 있었던
달력, 계산기, 단위변환, 국가별 시간 및 번호 등의
많은 정보들을 네이버홈 뿐만 아니라
블로그에서도 위젯 사용으로 편리.
 타임스퀘어 메뉴는 아주 간단하고 편리하지만 네이버 홈페이지를
방문하거나 위젯이 가능한 페이지에서만 사용.
네이버로 바로 갈수 있는 네이버 로고 버튼을 삽입한
별도 타임스퀘어 다운로드 기능을 추가하여
네이버 홈페이지로 더 간단히 이동이 가능하고 인터넷 창을 이용하지 않고도
사용 가능한 기능이 구현되었으면 한다.
Before
After
단위변환
환율
10