UI/UX

“왜 이렇게 바뀌었지?” 네이버 개편 뒷면에 숨겨진 UI·UX 법칙

UI·UX 심리학 법칙 5가지로 보는 네이버 메인 개편

2023.06.16

새삼 당연하고 슬프게도 여러 연구 결과에 따르면 첫 인상에 가장 큰 영향을 미치는 것은 ‘얼굴’이다. 사람은 본능적으로 시각 정보에 많은 것을 의존하며, 그렇기에 현대 사회에서 디자인은 항상 중요하게 작용한다.

포털사이트에도 이런 얼굴과도 같은 요소가 존재한다. 바로 첫 페이지인 ‘메인 화면’이다. 그리고 이런 포털사이트의 대표 주자 ‘네이버’가 지난 5월 메인 화면을 개편했다. 2020년 10월 이후 약 3년 만의 메인 화면 개편인 것이다.

업계에선 네이버의 메인 화면 변화는 단순히 네이버 하나만의 변화를 의미하지 않는다. 「네이버 메인디자인 개편과 진행, 이후 국내 포털사이트의 디자인 아이덴티티 구축을 위한 디자인의 변화와 영향」 논문은 “그동안 네이버의 디자인 개편은 매번 ‘다음’, ‘네이트’를 비롯한 여러 경쟁사들의 메인 디자인에 영향을 미쳤다. 더 나아가 디자인 업계의 트렌드 반영 현상으로 이어지고 있다”며 네이버 디자인의 영향력을 강조했다.

때문에 동종업계 관계자뿐만 아니라 디자인 흐름에 민감한 많은 디자이너가 이번 네이버의 메인 개편에 주목하고 있다. 이에 네이버의 개편을 UI·UX 법칙에 따라 세심히 뜯어봤다.

사용자는 언제나 익숙한 것을 기대한다 ‘제이콥의 법칙(Jakob’s law)‘

네이버가 메인 개편을 진행하면서 제시한 콘셉트는 ‘PC답게 때로는 모바일처럼’이다. 요컨대 PC 메인 화면에 모바일 요소를 투입해 모바일 버전과 연계성을 높이겠다는 말이다.

실제로 모든 검색 포털사이트의 알파이자 오메가인 검색창 디자인부터 모바일과 동일하게 변경됐다. 네이버의 전통과도 같았던 모자는 사라지고, 네이버 로고의 ‘N’ 부분만이 살아남아 검색창 내부에 편입됐다.

좌측 상단에는 햄버거 버튼(hamburger button)이 추가됐다. 클릭 시 모바일과 동일한 바로가기 모음 화면을 출력한다. 우측 하단에는 아예 PC 환경에서 따로 모바일 화면을 열어둘 수 있는 ‘모바일 네이버 메인 열기’ 버튼까지 생겼다.

이는 언제나 사용자는 새로운 변화에 불안을 느끼며, 그동안 축적된 경험대로 디자인이 작동되기를 기대한다는 ‘제이콥의 법칙’에 충실한 디자인이다.

제이콥의 법칙은 일반적인 디자인의 관습을 따를 것을 권장한다. 그래야 사용자가 콘텐츠나 메시지, 혹은 제품에 더욱 집중할 수 있다는 것이다. 반대로 새롭고 특이한 관습을 적용하면 사용자는 불만과 혼란을 느끼고, 최종적으로는 이탈로 이어질 수 있다고 주장한다.

새롭게 론칭하는 모바일 앱이 기존 앱·서비스와 유사한 UI 디자인을 적용하는 것이 대표적인 사례다. 이번에 네이버는 PC 메인 화면 개편에서 모바일 앱 디자인을 사용해 플랫폼 사이의 괴리감을 줄였다.

실제로 네이버 관계자는 “모바일과 PC버전의 메인 경험을 유사하게 지원해 기기 변동 등으로 인한 불편이 느껴지지 않도록 하는데 중점을 뒀다”면서 “이용자가 모바일 버전에서 많이 쓰는 기능을 PC버전에 추가하는 등 대폭 개선할 예정”이라고 심리스 경험을 강조했다.

텍스트보단 이미지, 이미지는 더 크고 가깝게 ’피츠의 법칙(Fitts’ Law)’

새로운 네이버 PC 메인 화면에서는 그동안 텍스트로만 나열됐던 메일·카페·블로그·지식인·쇼핑·페이·티비 등의 바로가기 버튼이 아이콘 이미지로 변경됐다. 디자인이 변경된 바로가기 버튼은 크기가 커진 것은 물론 검색창에 가깝게 이동했다.

이로 인해 사용자는 메인 검색창에서 조금만 커서를 움직여도 네이버 주력 서비스에 쉽게 접근할 수 있게 됐다. 덕분에 많은 사용자가 이 검색창 하단 바로가기 버튼을 이번 개편의 가장 큰 변화로 꼽았다.

이는 사용자가 대상을 사용하기까지 걸리는 시간은 대상의 크기와 거리에 영향을 받는다는 ‘피츠의 법칙’에 충실한 디자인이다. 쉽게 말해서 텍스트보단 아이콘 버튼을 적용했을 때, 그리고 버튼이 더 크고 가까이 있을수록 사용자가 더 빠르게 버튼을 누를 수 있다는 의미다. 네이버는 이를 참고해 주력 서비스 접근성을 개선함과 동시에 목록을 재검토했다.

과유불급의 ‘힉의 법칙(Hick’s Law)’ 그리고 ’밀러의 법칙(Miller’s Law)’

‘힉의 법칙’은 사용자에게 복잡 다양한 선택지를 제공하면 의사결정 시간이 늘어나 심리적 부담감과 혼란을 겪게 된다는 내용의 법칙이다. ‘밀러의 법칙’은 사용자는 작업 기억에 있어 최대 9개의 항목밖에 기억하지 못한다는 법칙이다.

공통적으로 두 법칙은 한 번에 너무 많은 정보 또는 선택지를 제공하면 오히려 디자인 의도가 무너질 수 있다는 점을 경고한다. 많은 앱이 추가 클릭을 요구하는 한이 있더라도 한 번에 제공하는 정보를 제한하는 것도 이 같은 이유에서다.

실제로 새로운 네이버 PC 메인의 바로가기 버튼 역시 9개에 맞춰져 있다. 넓게 보면 메인 화면의 블록도 9개를 넘지 않는다. 블록 내부의 콘텐츠도 9개를 넘기지 않으려 노력하고 있다. 그 예시로 쇼핑 핫딜에 관한 ‘원쁠딜’ 블록은 최대 9개의 제품만을 보여준다.

항상 사용자 입장을 고려하라 ‘포스텔의 법칙(Postel’s law)’

‘견고함의 법칙’으로도 불리는 ‘포스텔의 법칙’은 사용자의 모든 행동을 너그럽고 관대하게 받아들이고, 서비스 구축은 모든 면에서 엄격하게 구축하라고 주장한다. 요컨대 개발자가 UI·UX를 설계할 때 사용자의 입장을 충분히 고려해야 한다는 내용이다.

제품이나 서비스에 대해 모든 것을 알고 있는 개발자 입장에서는 당연한 사실도 사용자에게는 당연하지 않을 수 있다. 실제로 네이버는 곳곳에 간결한 안내 문구를 삽입해 사용자 입장에서 의문이 생길 수 있는 부분을 사전에 방지하고 보완했다.

그 예시로 PC 메인 화면 상단에 새롭게 추가된 바로가기·네이버페이·알림 버튼은 마우스 커서가 접근할 시 말풍선을 표시한다. 모바일 버전을 자주 사용하지 않는 사용자에게도 해당 버튼이 무엇인지 설명하는 것이다.

개편된 위젯 보드 블록 역시 ‘이용자는 완벽하지 않다’는 가르침에 충실했다. 사용자가 실수로 위젯 블록을 클릭하는 상황을 고려해 잠금 기능을 구현했다.

이 잠금 기능을 사용하면 클릭 실수로 내용이 손상되는 것을 방지할 수 있다. 또한 메모 내용 감추기도 가능해 타인이 자신의 PC를 이용하거나, 모니터를 엿보는 등의 돌발 상황에 대처할 수 있다.

시선 집중의 ‘폰 레스토프 효과(Von Restorff Effect)’

이번 개편된 네이버 PC 메인 화면은 멀리 떨어져 보면 눈치 챌 수 있는 차이점이 하나 더 있다. 네이버의 시그니처 컬러인 녹색이 더욱 한 군데에, 정확히는 검색창 쪽에 집중 사용됐다는 점이다.

이는 한 가지 차이점이 명확할 경우, 시선이 집중되고 최종적으로는 기억에 각인되는 ‘폰 레스토프 효과’를 응용한 디자인이다. 디자인 업계에서는 ‘고립 효과’로 알려져 있는데 여러 비슷한 물체가 존재할 때 명확히 다른 요소가 오래 기억에 남는다는 내용이다.

네이버의 경우, 이 폰 레스토프 효과를 응용해 검색창에 대한 시선 집중도를 높였다. 그 결과 더 많은 사용자가 검색창에 집중할 수 있게 됐고, 네이버는 검색 플랫폼이라는 이미지를 강화할 수 있었다.

실제로 네이버는 이와 관련해 “메인의 검색창은 그린 윈도우 아이덴티티를 강조해 검색창 자체의 주목도를 높이도록 디자인했다”고 밝혔다.

또한 사용자가 가장 많이 클릭하던 알림과 주문 배송 표시는 붉은색으로 변경됐다. 새로운 네이버 메인 화면의 유일한 붉은색 요소다. 알림의 경우 컬러 변경에 그치지 않고 혜택과 합쳐져 최상단으로 이동했다.

사용자의 시선을 특정 부분에 집중 시키는 동시에 네이버가 최근 공들이는 멤버십 혜택의 노출을 높이겠다는 의도가 돋보이는 변경이다.

네이버 PC 메인 개편, 과연 완벽한가?

개편된 네이버 메인 화면 디자인은 나름대로 과학적인 법칙에 의해 정교하게 제작됐다.

하지만 이번 개편에 호평만 있는 건 아니다. 인터넷 커뮤니티나 개인 블로그에서는 “모바일 병 걸린 회사들이 너무 많다” “예전 디자인으로 바꾸는 방법 공유 좀” 등 이전 버전 디자인을 돌려 달라 성토하는 목소리를 쉽게 찾아볼 수 있다. 심지어 디자이너 커뮤니티조차 이번 개편에 의문을 가지는 사람이 적지 않다. 무조건적인 ‘모바일화’가 오히려 사용자 경험을 떨어뜨린다는 지적이다.

또한 이번 개편에는 상술한 법칙에 충실하지 않은 부분도 여럿 존재한다. 대표적으로 관심사 블록의 추천구독, 웹툰, 패션뷰티, 책방, 지식 플러스 카테고리는 밀러의 법칙과 힉의 법칙에도 불구하고도 한 번에 11~12개나 되는 콘텐츠를 한 화면에 비춘다.

심지어 화면 중앙에 위치한 새소식 블록의 뉴스스탠드 카테고리는 한 번에 24개나 되는 언론사 로고를 보여주며 선택 구독을 요구한다. 아무리 밀러의 법칙이 모든 디자인 요소를 9개 이하로 줄이라는 뜻은 아니라지만, 사용자 입장에서는 적지 않은 부담으로 작용한다.

알림 역시 세세히 뜯어보면 편의성이 다소 감소했다. 이전에는 알림이 각 서비스 별로 분류됐지만 이제는 카테고리 상관 없이 모든 내용을 표시한다. 그 결과 여러 사용자의 항의가 이어지고 있다. 그동안 특정 서비스의 알림만 확인하던 사용자의 입장을 고려하지 못한, 포스텔의 법칙에 어긋나는 부분이다.

이에 대해 이번 PC 메인 개편 프로젝트를 담당한 김은지 디자이너는 네이버 캐리어 사내 인터뷰에서 “우리가 정말 좋은 프로덕트를 만들고 있는지 스스로 자신 있게 대답하기 위해서 늘 끊임없이 고민하고 있다”고 밝혔다.

네이버 역시 “이용자 의견을 토대로 차근차근 더 나은 모습을 준비하고 있다”며 추가 개선 의지를 전했다.

‘디자인 상대성 이론’으로 유명한 공학 칼럼니스트 헨리 페트로스키 교수는 “완벽한 디자인이란 존재하지 않는다”고 했다. 디자이너는 그저 최선을 다해 디자인하며, 끊임없이 개선 방안을 고민해 나가야 한다는 뜻이다. 앞으로도 네이버가 꾸준한 개편을 통해 더욱 개선된 메인 화면 디자인을 선보이길 바란다.

• UI
• UI·UX
• UX
• 개편
• 네이버
• 디자인
• 모바일
• 콘텐츠
• 플랫폼

• 에디터김동욱 (jkkims@ditoday.com)