NHN 그룹 웹사이트 UX 리뉴얼

NHN은 결제와 게임, 웹툰, 커머스까지 마흔 개가 넘는 B2B·B2C 서비스를 운영하는 IT 기업이다. 그룹 웹사이트는 오래됐다. 게임 회사로 먼저 알려진 이름 뒤에 어떤 사업들이 있는지를 공식 사이트가 다시 보여줘야 했다. 이 사이트를 다시 짜는 일을 디자이너 둘이서 맡았다.

문제 — 첫 화면에서 끝나는 방문

둘이서 사이트가 실제로 어떻게 쓰이는지부터 봤다. 주요 20개 페이지 평균으로 이탈률은 74.0%, 전환율은 26.0%, 체류시간은 1분 4초였다. 이탈률과 전환율은 무난하다고 봤고, 체류시간만 짧았다.

저니 데이터에서 같은 문제가 더 크게 보였다. 55,542명 중 87.5%인 48,604명이 메인으로 들어왔다. 그중 94.7%가 메인에서 사이트를 떠났다. 메인에 머문 시간은 1분 8초였다.

메인에서 회사소개로 넘어간 사람은 2.8%였다. 회사소개에 1,377명이 닿았고, 거기서 서비스소개까지 간 사람은 277명이었다. 가장 굵은 경로 하나를 따라가면 55,542로 시작한 흐름의 끝에 277이 남는다.

메인에서 누른 건 메뉴뿐

클릭 히트맵에서 클릭이 몰린 곳은 회사소개와 서비스소개였다. 채용과 기업문화 소개가 그다음이었다. 네 곳 모두 화면 맨 위 메뉴 줄, 곧 GNB에 있는 버튼이었다. 같은 화면(2,466 PV)에서 접속 기기는 PC가 64.3%, 모바일이 34.7%, 태블릿이 1.0%였다. PC 비중이 3분의 2에 가까워, 길고 인터랙티브한 화면을 택했다.

스크롤 히트맵에서는 메인의 화면 높이부터가 짧았고, 상단의 이미지와 GNB 말고는 소비되는 콘텐츠가 거의 없었다. 아래쪽까지 내려간 흔적도 드물었다.

좁은 통로가 된 메인

클릭은 메뉴로 몰렸는데, 가장 많이 몰린 회사소개조차 메인에서 실제로 도착한 사람은 2.8%였다.

메인은 다음 화면으로 사람을 보내는 통로였는데, 첫 화면 자체가 짧아 볼 것이 없었다. 그래서 개선의 단위를 화면 한 장이 아니라 메인에서 다음 화면으로 가는 길로 삼았다. 길만 넓혀서는 부족했다. 도착해서 볼 것이 게임 하나로 읽히면 사이트를 다시 짤 이유가 없다.

전략 — 길을 잇고 그 끝에 볼 것을

클릭이 몰리는 메뉴로 가는 흐름부터 자연스럽게 잇기로 했다. 회사소개, 서비스소개, 채용이 그 메뉴다. 여기에 아래로 내려갈 이유를 더해야 했다. 앞쪽은 메뉴 구조를 다시 짜는 일로, 뒤쪽은 첫 화면을 새로 만드는 일로 잡았다.

하이픈과 WEAVE

하나는 NHN 로고 가운데의 하이픈을 모티브로 삼아 파티클로 푸는 안이었다. 다른 하나는 NHN이 쓰던 Connect 개념을 ‘엮다’라는 뜻의 WEAVE로 발전시킨 안이었다. 앞쪽은 로고의 조형에서, 뒤쪽은 사업의 구조에서 출발했다.

하이픈 안은 담을 수 있는 의미가 좁아 쓰지 않았다. WEAVE는 사업이 다섯 갈래로 나뉜 회사의 구조를 그대로 받았다. 서로 다른 선이 얽혀 하나의 새로운 가치가 되고, 그 형태가 다시 다섯 사업의 바탕이 된다. 이 은유로 다섯 사업을 각자의 형태로 그려 새로운 NHN을 보여주기로 했다.

해결 1 · 메뉴 29개를 24개로

하위 메뉴는 29개였다. 둘이서 전체를 살펴보고, 겹치는 메뉴, 이름만으로 내용을 알 수 없는 메뉴부터 뺐다. 서비스의 IT·데이터·에듀테크, 홍보의 광고/홍보영상이 여기서 걸러졌다. 메뉴명만 보고 그 안에 무엇이 있는지 예측할 수 있어야 다음 탐색을 빠르게 결정한다.

남은 것은 다시 묶었다. 결제와 광고를 하나로 합쳐 서비스는 다섯 개가 됐다. 홍보에서는 언론기사도 함께 빠지고 미디어 키트가 들어와 보도자료와 둘이 됐다. 미디어 키트는 고객 요청으로 새로 세운 메뉴다. 투자정보는 주가정보·재무정보·IR 행사·공시·공고 다섯으로 다시 짰다.

회사소개 아래는 NHN·History·사업영역 셋으로 세웠다. ESG 아홉 개는 손대지 않았다. 대메뉴 이름도 영문에서 국문으로 바꿨다. 줄어든 다섯은 서비스에서 넷, 홍보에서 하나다. 채용은 메인 GNB에 Recruit ↗로 그대로 있다.

해결 2 · 2뎁스에서 멈추던 메뉴를 4뎁스까지

기존 GNB는 2뎁스까지만 펼쳐졌다. 원하는 항목이 그 아래에 있으면 사용자는 일단 눌러 들어가 확인해야 했다. 마우스를 올리면 최대 4뎁스까지 한 번에 보이도록 바꿨다. 아홉 갈래로 뻗은 ESG처럼 깊은 메뉴에서는 들어가기 전에 목적지를 고를 수 있다.

해결 3 · 다섯 사업을 오브제 하나로, WEAVE를 화면 전체로

메인 맨 위를 채우는 히어로에 다섯 사업을 놓았다. 게임, 결제·광고, 기술, 콘텐츠, 커머스다. 좌우로 넘기는 구조이되 카드를 나란히 놓지는 않았다. 왼쪽이나 오른쪽을 고르면 실처럼 짜인 3D 오브제가 그 사업의 형태로 변형된다.

카드를 나란히 놓으면 다섯 사업은 목록이 된다. 하나의 오브제가 변형되는 구조라야 서로 다른 선이 얽혀 하나가 된다는 WEAVE의 정의가 화면 동작으로 성립한다.

사업마다 성격을 한 낱말로 붙였다. 게임은 CONNECT, 결제·광고는 TRANSITION, 기술은 SPEED, 콘텐츠는 MIX, 커머스는 BUILD다. 볼 것이 없어 내려가지 않던 화면에 내려갈 이유를 만들었다.

선이 움직이고 짜인 형태가 맞물려 리듬과 에너지를 만들도록, WEAVE를 화면의 표현 규칙으로 옮겼다. 서체는 Pretendard 하나로 가져갔고, 활자는 타이틀과 서브타이틀 두 단계로 고정했다.

색은 무채색 다섯과 유채색 다섯, 열 개를 정의했다. 지면은 무채색으로만 두고 유채색은 사업을 가르는 자리에만 쓰기로 했다. 사업마다 색을 하나씩 배정해, 오브제가 변형되면 형태와 함께 색도 바뀌게 했다.

결과 — 공개되지 않은 설계

이 설계는 체류시간과 다음 화면으로 넘어가는 비율을 개선하려 했다. 고객사 내부 사정으로 공개되지 않아 두 값은 끝내 측정되지 않았다.

tinto lab은 이 설계를 NHN Group Website UX Design Renewal이라는 이름으로 iF Design Award 2023에 출품해 수상했다.