UX 가이드가 왜 필요한가?
전민수의 UX 가이드 칼럼 #01
Today UX 아티클
네이버는 PC 메인 화면을 3년 만에 개편했습니다. 기존 메인 화면에서 보여줬던 콘텐츠는 구유지하되 사용성과 디자인 개편의 목적을 뒀습니다.
첫째. 심플한 디자인을 추구한다
1. 검색창 영역
로고 색상은 채도를 낮게 하고 검색창 테두리는 더 얇아졌습니다. 검색창 크기는 이전에 비해 더 커지고 버튼명은 텍스트에서 돋보기 아이콘으로 바꾸었습니다. 특히. 이전에 검색창 하단영역에 있는 추천키워드가 떴었는데 이를 과감하게 삭제한것은 네이버의 대단한 결정이었습니다. 그 만큼 이번 개편 목적은 디자인의 간결성을 높이겠다는 의지를 들어낸것이죠.
before
after
2. 상단 메뉴 영역
상단 메뉴 영역은 이전과 동일한 메뉴 구성으로 별다른 차이점이 없어 보입니다. 다만, 메뉴 영역을 깔끔한 형태로 제공하기 위해 녹색 배경색을 제거한 것이 큰 특징입니다.
before
after
3. 전체 서비스 영역
상단 메뉴 영역에 있는 '더보기' 선택 시 전체서비스가 하단에 펼쳐집니다. 개편된 네이버에는 사용자가 현재 보고 있는 화면 영역에 더 집중할 수 있도록 전체서비스 외 나머지 영역은 음영처리하여 시선을 유도하고 있습니다.
before
after
4. 한줄 뉴스 영역
이전 네이버는 한줄뉴스 영역에 회색 바탕의 배경색이 어두운 측면이 있었는데, 개편된 네이버는 이를 과감히 제거하였습니다. 또한 화면 우측에 네이버뉴스, 연애 등 뉴스 카테고리의 경계선을 없애고 화면 영역을 간결하고 깔끔한 형태로 보여주고 있습니다.
before
after
5. Today 영역
네이버는 투데이라는 코너를 운영하고 있습니다. 시간대별 현재의 이슈를 알 수 있고, 지역 기반의 날씨 정보, 주가 정보, 스포츠 기사 등을 섹션 별로 조회할 수 있습니다.
그런데 이전 네이버는 투데이 코너가 작은 화면 영역임에도 불구하고 주제 또한 다양하고, 텍스트도 많아 가독성이 매우 떨어집니다. 정보 제공 시 사용자에게 전달해야 할 정보를 어떻게 핵심 위주로 전달할 것인지가 중요한데, 그렇지 못한 것이 아쉬웠습니다.
반면, 개편된 네이버는 주제별 구분이 명확하고 핵심 위주로 정보를 추려 깔끔하게 정보를 전달하고 있습니다.
before
after
6. 뉴스 스탠드 바둑형
뉴스 스탠드는 종합편성채널, 지역신문 등 더 다양한 언론사의 뉴스 기사를 선택하여 보실 수 있고,
마이 뉴스나 기사 보기에서는 사진뉴스까지 함께 보실 수 있는 코너입니다.
이전 네이버는 뉴스 스탠드 영역에 각 언론사별 뉴스 메인 화면을 썸네일 형식으로 보여주고 있는데, 다수의 색상, 이미지 등이 있어 화면 영역이 복잡해 보입니다. 반면, 개편된 네이버는 언론사 로고 형태로 보여주고 있어 화면 구성이 간결하고 깔끔해 보입니다.
before
after
7. 뉴스 스탠드 목록형
이번 네이버는 뉴스 스탠드 목록에 두개의 언론사를 한 꺼번에 보여줘 시선이 분산되었습니다. 반면 개편된 네이버는 한 언론사만 보여줘 시선이 분산되는 것을 막고 있습니다.
before
after
8. 실시간 급상승 영역
개편된 네이버의 실시간 급상승은 순위에 테두리를 제거하고 숫자에 브랜드 컬러를 적용하여 깔끔함이 돋보입니다.
before
after
9. 카테고리 메뉴
카테고리 메뉴는 네이버의 주요 콘텐츠를 한 눈에 알아볼 수 있는 영역입니다. 이전 네이버는 13개 메뉴만 제공하여 콘텐츠를 접하는데 한계가 있었습니다. 반면 개편된 네이버는 좌우 스크롤 방식으로 메뉴를 더 조회할 수 있도록 편의를 고려하였습니다. 또한 화면 구성의 간결함을 돋보이기 위해 메뉴 아이콘을 제거하고 텍스트 형태로 보여주고 있습니다.
before
after
둘째. 아이콘, 버튼, 레이블 등은 의미 전달이 명확해야 한다
전체서비스의 경우 펼쳐진 전체서비스를 닫고자 하는 경우 이전 네이버는 눈에 잘 띄지도 않는 작은 '더보기' 삼각형 버튼이 있었는데, 개편된 네이버는 '접기' 네이밍과 아이콘으로 그 의미를 직관적으로 전달하고 있습니다. 혹시나 해서 '접기' 버튼을 인지하지 못하는 사용자를 배려하여 화면 우측 영역에 'X'버튼도 추가적으로 제공하여 사용자의 편의를 배려하고 있습니다.
before
after
셋째. 사용자가 다음 행위를 바로 할 수 있도록 직관성을 강화한다
1. 로그인 영역
사이트에 방문하는 사용자들이 빈번하게 하는 행위에 포인트 컬러 등을 적용하여 시선을 유도해야 합니다. 이전 네이버는 브랜드 컬러가 상단 메뉴 영역에 집중된 반면 로그인 영역에는 포인트 컬러가 없어 로그인 영역보다는 상단 메뉴 영역에 시선이 더 갔었습니다.
반면 개편된 네이버는 상단 메뉴 영역은 브랜드 컬러 색상을 제거하고, 로그인 버튼에 포인트 컬러를 적용하여 사용자의 시선을 끌어 모으고 있습니다.
before
after
넷째. 같은 의미의 성격을 지닌 메뉴는 통합하여 보여준다
1. 전체 서비스 영역
상단 메뉴 영역에 있는 '더보기' 선택 시 전체서비스가 하단에 펼쳐집니다. 이전 네이버에서 웹 전체 서비스를 찾기 위해서는 '더보기' 선택해야 했고, 모바일 앱의 전체 서비스를 살펴보기 위해서는 로그인 영역에 있는 'MY 서비스'를 선택했어야 하는 등 번거로움이 있었습니다. 또한 MY서비스의 경우 웹의 전체 서비스인지, 모바일인지 모호했었습니다.
반면 개편된 네이버에는 웹의 전체 서비스 외 모바일 앱까지 한 번에 조회할 수 있도록 편의를 높이고 있습니다.
before
after
다섯째. 정보는 찾기 쉬어야 한다
1. 언론사 선택
이전 네이버는 언론사를 선택하기 위해서는 매번 상단에 있는 드롭다운 버튼을 눌러야 하는 불편함이 있습니다. 찾고자 하는 언론사가 없으면 드롭다운 버튼을 재차 눌러야 하는 번거로움이 있었습니다.
반면 개편된 네이버는 드롭다운 선택으로 언론사를 선택하는 것이 아니라 언론사 목록을 펼침 상태로 줘 한 눈에 알아보기 편하고, 상단 좌우 버튼을 눌러 찾고자 하는 언론사 전체 내역을 빠르게 조회가 가능합니다
before
after
여섯째. 개인화 기능을 강화한다
1. 자주 사용하는 메뉴 설정
이전 네이버 로그인 하단 영역에 포스트, 클라우드, 오피스 등 네이버의 주요 서비스가 제공되고 있었는데 사용자의 관심사와 활용도는 실제 낮았습니다. 네이버에서 제공되고 있는 MY서비스는 이름만 개인화 서비스일뿐 나의 관심사를 삭제하거나 추가할 수 없기 때문입니다. 네이버가 일방적으로 사용자에게 추천하고 있는 서비스로만 보일 뿐입니다. 이로 인해 나의 관심 사항이 아닌 서비스가 로그인 주변에 있어 눈에 거슬립니다.
개편된 네이버는 메일, 블로그, 카페 등 사용자가 자주사용하는 메뉴를 직접 설정하여 로그인 외 개인화 영역의 활용도를 높이고자 노력하고 있음을 엿보입니다.
before
after
2. 관심 주제 설정
네이버 홈에서 가장 먼저 싶은 메뉴를 설정할 수 있도록 '선호 주제 설정하기' 기능이 제공되고 있습니다. 이전 네이버는 관심주제 설졍이 페이지 하단에 있어 눈에 띄지도 않아, 이런 기능이 있다는 자체를 인지하기 어렵습니다. 또한, 보고 싶지 않은 주제는 삭제할 수 있는 기능 자체가 없어 불편했었습니다.
반면 개편된 네이버는 관심 주제의 순서를 사용자가 원하는대로 변경할 수 있고, 불 필요한 주제는 삭제가 가능하여 사용자 편의의 서비스를 제공하고 있습니다.
before
after
일곱째. 관심 콘텐츠에 더 많은 관심을 갖게한다
콘텐츠 (예. 리빙)
이전 네이버는 카테고리별 세부 관심 주제가 없어, 더 정보를 보고 싶어하는 사용자에게 2% 부족했습니다. 반면, 개편된 네이버는 카테고리별 상단 영역에 세부 관심 주제가 추천되어 정보 조회의 편의를 높이고 있습니다.
before
after
네이버 홈페이지의 각 화면 영역별 개편 사례를 살펴보았습니다.
UX 디자이너는 사이트 개편 시 사용자 관점에서 좀 더 좋은 서비스를 제공하기 위해 오늘 이시간에도 사용자 조사를 하면서 밤을 새고 있습니다. 네이버도 이번 개편에 앞서 몇 개월전에 사용자 조사를 실시하여 사용자의 다양한 의견을 수렴했습니다.
UX 디자이너는 디자인 설계에 앞서 '사이트에 방문하는 사용자의 기대는 무엇인지? 사이트에 방문했을 때 첫 인상이 사용자의 기대와 일치하는지? 사용자의 관심 사항이 홈페이지에 잘 나타나 있는지? 홈페이지는 감성적 느낌을 잘 전달하는지, 사용자가 과업을 수행 시 자신이 목적을 달성하기 위해서 노력을 덜 들이는지? 과업 수행하는데 있어 장애물을 만나지 않았는지? 또 다른 과업을 쉽게 달성할 수 있도록 재탐색 UI 환경이 조성되었는가 등 이 모든 것에 대해 고민과 고민을 해야 합니다.
그런 고민이 UX 철학과 가이드로 담겨져야 합니다.
그렇다면 네이버 홈페이지 홈에는 어떤 UX 철학이 숨겨져 있나요? 필자는 다음과 같은 문장이 떠오릅니다.
"사용성 관점에서 보면 개인화 기능을 강화하고 관심 정보에 보다 쉽게 접근할 수 있어야 한다. 디자인은 미니멀리즘 디자인 이미지를 추구한다.
UX 철학이 정의되었다면 이를 토대로 UX 디자인 가이드를 5가지로 정의하면 다음과 같습니다.
- 디자인은 심플한가?
- 아이콘, 버튼, 레이블 등은 직관적이고 의미 전달이 명확한가?
- 원하는 정보를 찾기 쉬운가?
- 개인화 기능이 강화되었는가?
- 콘텐츠에 더 많은 관심을 갖게 하는가?
이와 같은 UX 가이드를 참조하여 디자인 개편 작업이 있었을 것이라 생각됩니다. 참조로, 네이버 홈의 UX 철학과 가이드는 여러분에게 이해를 높이기 위해 제 개인적인 생각을 정리하였다는 것을 밝힙니다.
우리가 흔히 알고 있는 UI가이드는 UX 가이드가 아닙니다. UI 가이드는 사이트에 일관적으로 적용하는 버튼, 폰트, 색상 등 표준 규칙을 의미합니다. 반면 필자가 이 글에서 애기하고 싶은 것은 버튼은 어떻게 구성하고, 버튼을 어떻게 디자인 하느냐가 아니라 사이트에 방문하는 사용자의 기대를 어떻게 Task 관점에서 UX 디자인으로 풀어 낼 것이냐 하는 것입니다. 필자는 이를 UX 가이드라고 합니다. UI 가이드가 완벽하더라도 UX 가이드와 다른 서비스 설계가 이뤄지면 사용자는 사이트에 방문 시 자신의 경험으로 축적된 멘탈모델과 다르다면 당황하고, 사용성의 불편을 느껴 점점 자사 사이트 방문을 외면할 것입니다.
서론이 길었네요. 여러분도 어떤 UX 디자인 프로젝트를 수행한다면 여러분도 자사 사이트의 UX 철학과 가이드 갖고 프로젝트를 수행해야 하지 않나요?
앞으로 UX 가이드 개념 이해, UX 가이드 개발 방법, 사용자 멘탈모델 관점에서 UX 컨셉과 UX 가이드를 어떻게 설계하는지 하나 하나 알아보도록 합시다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
