트렌드

“모바일 네이버 ‘디자인’ 비결 나눠드려요”

2014.12.12

네이버가 스마트폰 얼굴을 고친다. 모바일에서 가장 처음 보이는 통합검색 화면 디자인을 개편한다. 모바일 시대에 걸맞은 5가지 원칙을 세우고 여기에 맞춰 모바일 환경에 어울리는 디자인을 올해 안에 내놓을 예정이다. 네이버는 사용자에게 가까이 가는 디자인 원칙, ‘인디자인(in-design)’이라고 이름 붙였다.

김효정 네이버 검색디자인실장

▲김효정 네이버 검색디자인실장

김효정 검색디자인실장을 만나 네이버가 모바일 시대에 걸맞은 옷으로 갈아입기까지 어떤 고민을 했는지 들어봤다. 모바일 서비스나 앱을 어떻게 디자인할지 고민이라면 네이버가 앞서 간 길을 참고하자.

짐작할 수 있는 디자인

모바일 기기는 작다. 화면도 작다. 이용 환경도 느긋하게 집중하기 힘든 경우가 많다. 많은 사용자가 출퇴근길이나 약속시간을 기다리는 짬짬이 스마트폰을 들여다본다.

네이버가 첫 번째로 내세운 디자인 원칙은 한눈에 기능을 알아볼 수 있을 만큼 직관적이어야 한다는 것이다. 예를 들어 지식인이라면 질문에 ‘Q’, 답변에 ‘A’ 아이콘을 붙여 단박에 질문과 답변으로 이뤄진 콘텐츠임을 알 수 있게 한다. 음악 콘텐츠는 음반을 상징하는 앨범 표지와 LP판을 보여주는 식이다.

집중해서 글자를 읽기 전에 콘텐츠의 성격을 바로 알아챌 수 있도록 콘텐츠의 내용을 직관적으로 보여준다는 것이 네이버가 추구하는 직관적 디자인이다.

개편 예정인 네이버 모바일 통합검색 화면(네이버 제공)

▲개편 예정인 네이버 모바일 통합검색 화면(네이버 제공)

읽기 쉬운 디자인

모바일 사용자는 콘텐츠를 집중해서 읽지 않는다. 화면을 쭉 흝어내려가다 눈에 띄는 콘텐츠에서 눈길을 멈춘다. 네이버는 사용자가 어떻게 시선을 움직이는지 연구해 디자인에 반영했다.

콘텐츠는 카드에 나눠 담았다. 단순히 유행을 좇은 게 아니다. 검색 정보를 다양한 플랫폼에 뿌리는 방안을 고려한 결과다. 김효정 실장은 “검색 정보가 통합검색에만 있을 필요는 없다”라며 “메신저에서도 서로 정보를 주고받을 수 있는데, 그러려면 데이터베이스(DB)를 하나씩 떼내 따로 놓아야 하는데 이걸 모듈화할 수 있는 제일 좋은 인터페이스가 카드 형식이다”라고 카드 형태를 채용한 이유를 설명했다.

카드는 안에 담긴 내용에 따라 각자 다른 디자인을 띤다. 전체 콘텐츠를 각각의 카드가 나눠 담지만, 동시에 카드 낱장이 전체 형태를 구성하기도 한다. 김효정 실장은 형태주의(게슈탈트·Gestalt) 철학을 팀원과 공부해 디자인에 적용했다고 밝혔다.

지식iN처럼 카드 1장에 콘텐츠 하나를 담는 카드도 있고, 동영상처럼 여러 콘텐츠를 가로로 1장에 보여주기도 한다. 또 부동산 정보는 세로 목록형으로 카드 1장 안에 여러 정보를 보여준다.

단, 통합검색 화면은 위에서 아래로 내려오며 보는 것이 일반적이기 때문에 세로로 보는 카드를 가로로 보는 카드보다 많이 쓴다. 비율은 7대3 이상이다.

미리보기 그림이 왼편에 있어 시선이 들쭉날쭉하던 문제를 손봤다. 미리보기 사진을 오른쪽으로 옮겨서 사용자가 그림과 글을 골고루 볼 수 있도록 했다. 그림은 그림끼리 묶고 글은 글끼리 모아 사용자가 알아보기 쉽도록 했다.

통합 검색 화면에서 문서를 얼마나 보여줄지도 고민했다. 너무 많은 글자를 보여주면 오히려 집중도가 떨어지기 때문이다. 연구 결과, 가장 효율적인 분량은 300바이트로 나타났다. 영문 300자, 한글 150자다. 이를 바탕으로 모바일 통합 검색 결과에 보여주는 글자는 많아도 6줄을 넘지 않도록 했다.

네이버 모바일 통합 검색 화면 디자인 개편 5대 원칙 인디자인(in-design) (출처:네이버 모바일 통합검색 개편 예고 동영상)

▲네이버 모바일 통합 검색 화면 디자인 개편 5대 원칙 인디자인(in-design) (출처:네이버 모바일 통합검색 개편 예고 동영상)

기능 중심 디자인

기름기도 걷어냈다. 담백하게 기능에 충실하게 디자인을 내놓았다.

멋내기 위한 장식 없이 오로지 기능적인 요소만 배치했다. 화살표와 꺾쇠 같은 기호(symbol)는 주요 기능을 표현하는 데만 쓴다. 딱 9개다. 또 화장실 앞 남녀 그림처럼 사용자가 쉽게 알아볼 수 있도록 돕는 픽토그램도 25개로 가지수를 한정지었다. 색도 모노톤을 기본으로 RGB 원색과 파생 색상만 사용한다. “보라색을 쓰면 빼라고 했어요.” 김효정 실장이 웃으며 말했다.

김효정 실장은 절제하는 디자인이 더 어려웠다고 술회했다. “정보를 탐색하는 디자인은 장식적일 수 없거든요. 그러다보니 디자이너들이 어떻게 하면 사용자를 배려하면서 절제하는 디자인을 할 수 있을지 고민이 많았죠. 올해 초부터 1년 가까이 디자인 원칙과 철학을 정리하면서 통합검색 화면을 작업했어요.”

모바일 화면이니만큼 단추 개수도 최소화했다. 단추는 카드 아래 평평한 디자인으로 2~3개까지 붙인다는 원칙을 세웠다. 단추 1개 크기는 손가락으로 누를 수 있을 만큼 충분히 크게 만들자고 뜻을 모았다.

글꼴은 정보를 전달하는 가장 중요한 요소 중 하나다. 콘텐츠 대다수가 문서이기 때문이다. 모바일 환경에서 가장 잘 보이는 글꼴을 찾기 위해 검색디자인실 디자이너는 머리를 싸맸다. 같은 글꼴도 아이폰 화면에서는 너무 작아보이고, 갤럭시노트에선 너무 커 보이곤 했다. 양 극단에 놓인 기기를 함께 놓고 수십번 글꼴 크기를 바꿔가며 비교했다.

네이버가 최종적으로 결정한 글꼴은 한글 산돌네오고딕과 영문 헬베티카다. 두 글꼴의 3가지 굵기를 타이틀(bold)과 일반 본문(normal), 부가 정보(thin)용으로 나눠 쓴다.

정보의 중요도는 글꼴 크기로 달리 보여준다. 검색창 키워드와 서비스 제목 같이 가장 중요한 정보는 18pt(포인트)로 보여준다. 콘텐츠 제목은 17pt, 콘텐츠 본문은 14pt, 부가 정보는 13pt로 쓴다.

수학적인 디자인

디자인은 다분히 주관적인 영역처럼 보인다. 디자이너 눈에는 훌륭한 디자인이 의사결정자 눈에는 어색해보일 수도 있다. 그래서 ‘개취(개인의 취향)’라는 말도 나온다. 같은 업무를 수행하는 디자이너끼리도 취향이 엇갈릴 수 있다. 그래서 네이버는 디자인 할 때 객관적으로 업무를 진행할 수 있도록 수학적인 기준을 도입했다.

황금분할 등 다양한 공식을 활용해 기준선을 만들었다. 화면 좌우에 5픽셀씩 여백을 주고, 카드 사이는 15픽셀씩 띄우는 식이다. 김효정 실장은 “디자이너가 즉흥적으로 그리는 게 아니라 수학적으로 철저히 계산된 디자인이기 때문에 보기 편할 수밖에 없다”라고 자신했다.

낯설지만 익숙한 디자인

사용자가 더 편하게 쓰도록 디자인을 바꾼다지만, 너무 많이 바뀌면 사용자가 당황할 수도 있다. 이런 점을 감안해 기존 사용자 경험을 해치지 않도록 고심하며 디자인을 개편했다.

모든 디자인 개편에는 사용자경험(UX) 연구가 바탕이 됐다. 아이트래킹을 비롯해 다양한 연구법을 이용해 사용자가 모바일 네이버를 어떻게 이용하는지 확인했다. 문제가 나타나면 개선하는 길을 고민하고 적용해서 효과를 확인한 뒤 다시 손보는 일을 반복했다. 내부 시험 결과, 사용성이 개선된 것으로 나타났다.

지난 12월8일 오후부터 10일까지 3일 동안은 모바일 네이버에 접속하는 사용자 가운데 무작위로 10% 정도를 뽑아 개편된 통합검색 화면을 보여줬다.

네이버는 이 최종 테스트 결과를 기반으로 마지막 점검을 거친 뒤 개편된 모바일 통합 검색 화면을 선보일 예정이다. 공개 시기는 올해 말이다.

김효정 실장은 “네이버 안에서 디자인 일을 하며 깊은 고민을 하면서도 이를 밖으로 꺼내지 못해 아쉬었다”라며 “이번 인터뷰를 통해 우리가 고민한 결과를 다른 디자이너와 공유할 수 있으면 좋겠다”라고 말했다.

개편된 모바일 네이버 통합검색 디자인 미리보기

개편된 모바일 네이버 통합검색 지도 미리보기

네이버가 밝힌 모바일 통합 검색 디자인 개편 철학

5대 원칙(in-design)

  1. 짐작할 수 있게(in identity) = 문서의 정보를 미루어 짐작할 수 있는 디자인
  2. 읽기 쉽게(in readability) = 사용자가 쉽게 정보를 읽어 나갈 수 있는 디자인
  3. 기능 중심으로(in function) = 장식요소를 최소화하는 기능중심 디자인
  4. 수학적으로(in systematic) = 보이지 않는 기준선에 의한 수학적 디자인
  5. 경험이 이어지게(in experience) = 익숙한 현재의 사용성을 배려하는 디자인

10대 방법론

  1. 형태심리(in gestalt) = 정보를 개별적 부분이 아닌 조합의 전체로 인식하게 해 가독 효율을 높인다.
  2. 카드(in card) = 모든 콘텐츠는 카드 모듈에 담아 전체 균형을 이루게 한다.
  3. 탐색흐름(in flow) = 사용자의 탐색 흐름에 맞게 정보를 배열한다. 탭으로의 이동 및 더보기할 경우 화면 흐름에 대한 규칙을 갖는다.
  4. 기준선(in grid) = 정보의 배열을 주도하는, 보이지 않는 그리드 선에 의해 디자인한다. 모든 요소는 이 그리드를 따른다.
  5. 활자(in typeface) = 모바일에서 정보 가독성을 고려해 San serif 서체인 산돌Neo고딕, Helvetica를 대표 글꼴로 쓴다. Thin, Normal, Bold 세 가지 스타일을 활용한다. 정보의 중요도와 강약을 표현하는 기본 수단은 활자 크기다. 역할에 따라 4단계 폰트 크기를 쓴다.(18pt,17pt,14pt,13pt)
  6. 버튼(in button) = 카드의 하단 영역에 핵심 과업을 최소화 해 구성하며, 콘텐츠 중 외부 링크 영역이 필요한 경우 예외적으로 허용한다.
  7. 심볼(in symbol) = 화살표, 꺽쇠, 하이픈과 같은 심볼 이미지는 주요 기능을 효율적으로 표현하는데 사용한다.
  8. 픽토그램(in pictogram) = 인지를 돕는 그림 도구로 픽토그램을 사용할 수 있다.
  9. 이미지(in image) = 원형, 정사각형, 가로형, 세로형 4가지 비율만 쓴다.
  10. 색깔(in RGB) = 모노톤을 기본으로 강조색으로는 RGB 원색을 명도만 달리해서 쓴다.

nuribit@bloter.net

기술의 중심에서 사람을 봅니다. 쉽고 친절하게 쓰겠습니다. e메일 nuribit@bloter.net / 트위터 @nuri_bit / 페이스북 facebook.com/nuribit0