B2C 웹사이트 UX, UI의 기초 2. 다음 뜯어보기

‘무료 메일 서비스의 창시자, 다음’

다음의 의미

1. Next: 어떤 차례의 뒤, 커뮤니케이션의 선도자로 미래지향적인 의지와 다양한 목소리를 내겠다.

2. 多音: 많을 다(多), 소리 음(音)으로 다양한 소리를 조화롭게 담아내겠다.

2010년, 얼굴이 바뀌다.

2010년 다음의 로고가 바뀌었다. 국내 포털 사이트 중 가장 빨리 모바일에 최적화된 서비스답게 PC 환경뿐만 아니라 작은 기기인 핸드폰에서도 잘 보이도록 변경되었다. 사용된 색상부터 폰트의 두께, 삐침을 수정했다. 7개 색상 조합은 유지하면서 기존 컬러의 명도와 채도를 수정하며 색상과 위치를 수정해서 과거보다 현재의 로고가 선명하고 무게감 있게 변했다.

2014년, 카카오와 함께하다.

2014년 카카오가 다음을 합병하면서 다음카카오가 되었다. 다음 해, 2015년 소유자의 이름이 카카오로 이름이 변경되면서 지금은 카카오 계정과 다음 계정으로 이용 가능하다. 다음 사이트에 카카오의 서비스가, 카카오에서도 다음의 서비스가 들어와 서로의 기능을 보완하고 유저를 편의를 증진시켰다.

다음은 어떻게 이뤄져 있을까?

PC Font

사용 폰트 

• Code: HelveticaNeue-Light, AppleSDGothicNeo-Light, 'Malgun Gothic', '맑은 고딕', sans-serif

사용된 사이즈: 16px, 14px, 13px, 12px, 11px

• 최대: 16px(Title)
• 최소: 11px(caption)

Mobile Font

사용 폰트 

• Code: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은고딕', dotum, '돋움', sans-serif

사용된 사이즈: 17px, 16px, 15px, 14px, 13px,10px

• 최대: 17px(Title)
• 최소: 10px(caption)

PC Icon

PC에서는 별도의 아이콘이나 로고를 함께 배치하지 않고 간결하게 텍스트만 나열해 원하는 메뉴를 찾도록 만든다. 주요 메뉴뿐만 아니라 더보기를 통한 다양한 서비스도 텍스트만 사용해 다양한 서비스를 바로 갈 수 있도록 정리했다.

홈페이지에서 찾아볼 수 있는 아이콘은 날씨 아이콘이 유일한데, 이 아이콘은 모바일 버전에서도 사용되고 있다. 검은색 외곽선과 통일된 노랑, 파란색을 사용해서 표현한 아이콘은 카카오의 스타일이다.

Mobile Icon 

검색 필터: 검색 필터에 변형된 다음 로고가 들어가 있다. 웹사이트에서는 기본 로고형으로 Daum이 적힌 로고가 있다면 모바일에서는 ‘D’ 형태 안에 기존 4가지 컬러가 섞여있다. 이는 사이즈가 작은 모바일 환경에서 볼 수 있는 응용형 아이콘이자 로고이다.

더보기: 웹사이트와 다르게 각 서비스의 로고, 아이콘이 들어있어 작은 모바일 사이즈 내에서 쉽게 알아볼 수 있다. 다음 사용자가 주로 사용하는 서비스 및 카카오의 주요 서비스를 우선 보여준 뒤 ‘전체 서비스' 내에서는 웹사이트에서 그랬던 것처럼 전체 서비스를 살펴볼 수 있다.

모바일 웹, 모바일 앱으로 나누어진 서비스 리스트 목록은 얼핏 보면 정렬된 서비스 아이콘 스타일은 통일되지 않는다고 느낄 수 있다. 하지만 자세히 보면 카테고리 별, 운영 주체별로 그래픽 스타일을 공유하고 있다. 다음 로고에서 사용된 색상을 주로 사용하고 있거나, 모바일에서 볼 수 있는 혼합 그라데이션을 사용하고 있어 뜯어보면 정리가 되어있다. 카카오가 이미 가지고 있던 서비스는 카카오의 상징색인 노란색을 배경으로 사용하고 있으며, ‘다음’만의 주요 서비스는 다음 로고를 섞은 라인으로 표현되고, 미디어 서비스에서는 보라색과 파란색의 그라데이션 배경색과 흰색 아이콘을 사용해 내부적으로 서비스별 통일감을 주고 있기도 하다.

UX Point

검색 키워드 추천: 순위가 있는 인기 검색어는 아니지만 많이 검색되는 키워드를 나열해서 사용자가 검색하기에 유용하고, 화제가 무엇인지 쉽게 알 수 있는 기능을 제공한다. 원하는 검색을 할 뿐만 아니라 다른 검색을 유도하면서 머무는 시간과 이용을 늘릴 수 있다. 순위를 제공하고 있지 않기 때문에 사용자는 오직 개인의 취향에 맞춰 궁금한 키워드를 눌러보거나 넘겨볼 수 있다.

카카오 로그인: 2015년 카카오에 합병되면서 기존 사용하던 다음 계정으로 로그인할 수 있을 뿐 아니라, 카카오 계정으로 로그인해 기존 다음의 서비스를 이용할 수 있게 되었다. 타사의 포탈 서비스는 메일, 블로그, 카페를 이용하기 위해서 해당 포털 사이트를 가입해야 하는 번거로움이 있다면 다음은 카카오 계정으로 로그인을 통해 쉽게 연동해서 사용할 수 있도록 만들었다.

자동변환과 검색: 검색 포탈 서비스에서 볼 수 있는 기본 기능으로 오탈자, 미처 영문 전환을 하지 못했을 경우 자동으로 변환해주는 기능에서 자동 변환된 단어에 대한 정보를 우측 패널에서 제공해주고 있다.

추가 정보: 검색 시 패널을 분리해서 다양한 정보를 함께 보여준다. 좌측 패널에서는 관련 키워드와 검색한 정보의 기본 정보가 나온다면 우측 패널에서는 검색한 키워드의 특징에 따라 추가 정보를 제공한다. 기본 페이지에서 제공하지 않았던 순위도 필요하다면 함께 제공하고 있다. 검색어 분야에 맞춰서 영화면 해당 영화의 출연진, 현재 영화 순위 등을 함께 제공하고, 가수를 검색하면 해당 그룹의 멤버에 대해 바로 검색을 할 수 있도록 우측 패널을 이용해 제공하고 있다. 기본적인 정보는 검색창 하단, 좌측 패널에서 제공해 검색 목적을 달성하게 만든다면, 우측 패널은 부연 정보를 함께 제공해 검색이 끊임없이 이어지도록 만든다.

카카오톡으로 들어간 다음: 모바일에서 기본으로 설정되어 있는 ‘뉴스'가 카카오톡 ‘#’ 메뉴의 기본 메뉴인 ‘#뉴스'로 들어가 있다. 굳이 다음에 접속하지 않아도 같은 뉴스를 볼 수 있다. 뉴스뿐만 아니라 TV, 쇼핑 등의 기능도 함께 이용할 수 있어 카카오톡에 다음이 들어있다고 봐도 무방하다. 카카오톡 유저에게는 무척 편리한 기능이지만, ‘다음’ 자체 포털 사이트 이용자로 집계되지 않고 ‘다음'을 직접 사용하지 않게 만들어 점유율에 포함되지 않는 단점이 있다. 

국내 포털 사이트와 국외 포털 사이트의 차이점

검색창밖에 없는 구글

구글에 접속하면 다음과 네이버와 다르게 검색창밖에 없다. 다음에 있는 검색창 하단의 검색 키워드도 없고, 오직 사용자가 직접 검색해야 한다. PC와 동일하게 모바일도 검색창밖에 없다. 오직 ‘검색’에 집중했다. 뉴스, 날씨 정보도 없이 오직 검색에만 집중한 구글은 검색 결과 창도 국내 포털사이트와 조금 다르다. 

숨어있는 다양한 서비스 

검색창만 보여준다고 해서 다른 기능과 서비스가 없는 건 아니다. 다양한 기능을 가지고 있고, 다른 사람과 협업하기 좋은 기능들이 많다. 게다가 아이콘도 구글에서 정리한 디자인 시스템을 이용해서 정리되어 있다. 하지만 해당 기능을 메인 화면에서 노출하지 않고 메인에서 ‘더보기’ 아이콘을 통해 정리해두고, 필요할 때 찾아 쓸 수 있도록 만들었다. 

검색어에 집중하다: 국내 포털 사이트는 해당 검색어의 기본적인 정보를 보여준다면 구글은 사용자의 환경 정보까지 응용해서 검색어에 대한 다양한 정보를 보여준다. 영화를 검색할 경우 국내 사이트에서는 영화의 기본정보를 우선 제공 후 ‘영화' 카테고리에 속한 다른 영화 정보를 보여주는 반면, 구글은 해당 검색 영화에 집중해 예매 시간과 함께 다양한 포털 사이트의 검색 결과를 보여준다. 

다양한 검색 결과: 구글에서 제공하는 검색 결과는 크게 5가지의 조합니다. 이 조합은 주로 자사 콘텐츠, 정보를 노출해주는 국내 포털 사이트보다 더 광범위한 정보를 가져온다. 

검색 결과 조합 - 1. 웹페이지 2. Google 지도, 마이 비즈니스 등 구글 사용자의 제출 콘텐츠 3. 스캔 도서 4. 인터넷의 공개 데이터 베이스 5. 기타 여러 소스 

취향따라, 필요에 따라

2021 인터넷 이용자 조사(NPR) 결과 국내 PC·모바일 정보 검색 서비스 점유율 순위는 네이버(88.1%), 유튜브(57.4%), 구글(48.6%), 다음(25.4%) 순으로 집계되었다. 구글의 서비스인 유튜브와 구글 자체를 함께 본다면 국내 서비스인 네이버와 비등하다. 오히려 네이버와 다음도 가지고 있는 영상 플랫폼을 대중화시켜 검색 서비스로 자리 잡게 만든 걸 생각한다면 다양한 서비스를 처음부터 보여주는 것보다 하나의 서비스에 집중하도록 유도하는 방법은 다양한 메뉴와 정보를 처음부터 보여주는 국내 포털 사이트와 다른 방향을 보여준다. 물론 검색할 게 없다면 들어오지 않게 되겠지만 검색어에 대한 다양하고 전문 정보가 필요하다면 찾아올 수밖에 없다. 기존 일상에서 검색을 더한 국내 사이트와 검색에 전문성을 더한 국외 사이트의 차이점은 사용자가 필요에 따라 선택할 수 있는 장점으로 다가온다.

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.