네이버 웹사이트 리뉴얼 분석

2020.4.23 사내블로그에 기재했던 글입니다.

2020년 4월에 네이버 메인페이지가 개편된다는 소식이 보았고, 자타공인 한국의 대표 웹사이트가 어떻게 리뉴얼되는지 디자이너로서 궁금했다. 무진장 많은 사람들이 사용하는 웹사이트라서, 또 대기업이기 때문에 의사결정이 쉽지 않았을테고 그렇게 신중히 결정된 결과가 무엇인지, 어떻게 달라졌는지, 어떤 점을 중요하게 생각했는지, 어떤 흐름을 지향하는지 확인해보고 싶었다.

개인적으로 개편이 되는 과정을 지켜보는 것은 즐거운데, 예전 직방 재직시절 브랜드칼라에 대한 글을 쓰면서 다른 사례(곰플레이어, 왓챠 등)에서 비슷한 변천과정을 찾아본적이 있다. 개편이 되면 되돌아가서 확인하는 것이 내부직원이 아닌 이상 불가능하고 내 눈은 금새 적응을 하기때문에 개편 시점에서 이런 기록을 남기는 것은 의미가 있다. 더군다나 이번 네이버 개편은 <이전버전으로 되돌리기> 기능을 일부 지원했기 때문에 이를 묶어서 한꺼번에 정리해보려고 한다. 예를들어, 네이버 부동산이나 네이버 지도서비스는 작년쯤 개편이 된 것으로 기억하는데 아직도 <이전버전으로 되돌리기> 기능을 살려놓았다.

네이버 지도

2019년 이전 네이버 지도 인터페이스

건물을 찾으면 지도위에 말풍선이 뜨고 상세내용을 클릭하면 새탭 & 전체화면으로 제공된다. 파셀의 width는 345px로 2010년대 후반

2020년 현재 네이버 지도 인터페이스

건물을 찾으면 기존의 말풍선은 없어지고 (지도 위의 거대한 UI는 촌스럽고 가독성을 떨어뜨리며 동작을 무겁게 만드는 원인으로 취급되는 추세이다) 곧바로 왼쪽 파셀에서 상세내용이 표시된다. 파셀 width는 390px으로 이전 버전에 비해 45px 늘어났다. 참고로 랜드북은 375, 호갱노노 375으로 가장 좁고, 직방 400, 구글맵 408이다. 여기까지는 모바일 레이아웃을 함께 사용하고 있고 데스크탑 레이아웃을 따로 사용하는 에어비앤비는 840, 다방은 640으로 매우 넓은편이다.

네이버 부동산

2019년 이전의 네이버 부동산 인터페이스

전통적인 부동산업체 웹 인터페이스에서 많이 사용하던 레이아웃(중앙정렬된 컨텐츠, 지도는 그래픽으로 행정구역을 선택하는 역할, 부동산 물건보다는 다른 컨텐츠의 비중이 높음)이다. width가 980인데 이는 1080으로 확장 개편되기 전의 네이버메인의 width일 것이다.

2020년 현재 서비스되고 있는 네이버 부동산 인터페이스

2019년쯤에 베타버전으로 오픈했는데 아직도 이전버전으로 되돌릴 수 있는 기능을 없애지 않고 있다. 네이버 지도와 마찬가지로 좌측에 파셀이 뜨고 지도위에는 작은 마커(말풍선)이 표시되고 대부분의 정보는 파셀에서 처리된다. 파셀 width는 네이버지도보다 10px 키운 400px인데 네이버 내부에서 지도팀과 부동산팀은 다르겠지만 390과 400사이에서 어떤 논의들을 했을지 상상된다.

특이한 점은, 네이버지도와 다르게 파셀이 하나 더 열린다. 두번째 파셀의 width는 560px. 2개를 모두 펼쳤을 때 960px이 살짝 넘는데 반응형은 아니라서 1000px에 가까운 해상도의 환경에서는 우측 지도영역이 거의 보이지 않게 된다. (열림/닫힘이 가능하기때문에 크게 우려되는 사항은 아님) 이런 방식은 호갱노노에서도 사용되고 있는데 호갱노노보다 나은점은 1x width 파셀이 반복해서 열리는것이 아니라 1.5x width 파셀이 열려 총 2.5x width가 되어 공간의 이점을 많이 활용한다는 점이다. 파셀 레이아웃을 유지하면서 더 넓은 공간이 필요한 상세페이지의 경우, 이런 결과가 상당히 논리적이라 생각한다.

네이버 메인

다시 메인페이지로 돌아와서, 상단 배너를 클릭하면 바로 리뉴얼 디자인이 적용된다. 개편된 디자인의 첫 인상을 나열해보자면   

밝아졌다.

가벼워졌다.

오브젝트가 살짝 커졌다.

메인페이지 상단, 리뉴얼 예고 배너. 사용하기를 클릭하면 되돌릴 수 없다.

가장 중요한 width가 1080px에서 1130px로 50px 늘어났다. 모니터 해상도가 점점 높아지는 영향때문인데, 개인적인 경험과 느낌으로는 2000년대 초반까진 17인치, 2000년대 중반무렵 22인치, 2010년부터 24인치가 국민모니터 사이즈로 선호되어 왔고, 2010년 중반 이후로는 주로 해상도가 상향 발전되는 식으로 전개되어왔다. 이번에 50px가 늘어난 것도 이 점과 연관되는 것으로 해석된다.

네이버 개편 이전의 인터페이스

상단 검색창을 740 그리드에 억지로 맞추었다. (당연히 상단 검색창은 중앙정렬인줄 알았으나 좌측정렬이었다는 사실을 처음 알게됨) 바탕은 옅은 회색을 사용해서 컨텐츠 박스영역에 시선을 집중시키고 살짝 띄어보이게(floating) 만들었다. 나도 이런 방식을 선호하는 편인데 요즘 추세는 이렇게 solid로 구분하는 방식보다는 더 플랫한 방식을 사용하는 추세이다.

개편 이후의 현재(2020.6) 인터페이스

좌우 25px씩 총 50px width가 늘어난만큼 적당히 height도 늘어났고 상단 검색창은 굳이 그리드를 맞추지 않고 크기를 넉넉하게 조정했다. 좌측은 10, 우측은 20씩 width가 늘어나서 광고배너 영역도 커졌다. (우측 광고배너는 height가 25%나 늘어나서 이걸 빌미로 광고비를 올렸을 것 같음) 간격은 전반적으로 넓어졌고 컨텐츠의 연관성에 따라서 넓이의 종류가 다양해졌다. 상단 검색창을 그리드에 맞추지 않은 점, 간격이 들쑥날쑥해진 변화는 주목할만 하다. 칼같이 맞춘 그리드 디자인은 마치 자연의 황금비율처럼 으례 훌륭한 디자인으로 둔갑하기 매우 쉬운데 그런 레이아웃이 궁극적으로 인간에게 어떤 이점을 줄 수 있을지 생각해보자면 충분히 다양한 결론에 다다를 수 있다. 반드시 지켜야하는 룰과 굳이 지킬필요가 없는 룰을 나누는 기준은 맥락에 따라 달라지기 때문에 이런 케이스 스터디가 필요하다.

이전 버전이 그림의 완성도는 오히려 더 높음. 이후 버전과 비교하면 좀 더 아동스러운 느낌.

그림의 동세는 이전보다 원근법이 강조되어 역동적이지만 표현은 플랫하게 변경됨

이전의 평범한 로그아웃 UI

이렇게 변경되었다는 것은 데스크탑 UI가 태블릿 UI를 지향한다는 의미로 읽힌다.