지난 17일 네이버가 새로운 PC 홈을 공개했습니다. 2020년 10월 PC 메인 개편 이후 3년 만입니다. 모바일 사용자가 PC 사용자의 3배가 된 시점에서 모바일 중심의 경험을 PC에서도 사용할 수 있게 변경했습니다.
모바일에서 사용하는 메뉴, 네이버페이, 알림 등을 동일한 위치에서 사용할 수 있으며 모바일에서 사용하는 기능을 PC에서도 자연스럽게 사용할 수 있습니다.
![](https://i0.wp.com/designcompass.org/wp-content/uploads/2023/05/naver-home-02.png?resize=800%2C800&ssl=1)
👁️ 디자이너의 눈
전 국민이 쓰는 만큼 다양한 환경을 고려해 설계되었습니다. 어떤 PC 화면에서도 편하게 사용할 수 있게 레이아웃을 제공합니다. 가로 크기가 2560px 이상의 화면에서는 세로 3단으로 정보를 보여줍니다. 이보다 가로 크기가 줄면 2단으로 바뀝니다. 가로 크기가 모바일 정도로 줄면 하단에서 모바일 버전으로 이동할 수 있는 링크로 모바일 버전을 사용할 수 있습니다.
기존의 네이버의 시각 언어를 지키면서 콘텐츠를 탐색하기 편한 GUI로 바뀌었습니다. 정보를 묶는 컨테이너의 꼭지점이 많이 둥글어졌습니다. 외곽선으로 구분하던 탭은 / (슬래시)로 구분하고 상세 탭은 회색 배경에 가운데 점으로 구분합니다. 우측 아래 톱니바퀴 아이콘을 눌러 더 많은 시각 경험을 설정할 수 있습니다. 축소, 기본, 확대 중 하나를 선택해 글자 크기를 조절할 수 있습니다. 라이트 모드, 다크 모드, 기기 설정을 선택해 화면의 밝기도 조절할 수 있습니다.
기존 PC 경험을 지키면서 모바일 경험을 가져왔습니다. naver.com과 m.naver.com은 다릅니다. 네이버 앱, 모바일과 네이버 PC에서 보여주는 콘텐츠 내용이 다릅니다. PC 홈에서는 뉴스, 증시 등 본래 자주 사용하던 기능을 바로 발견할 수 있습니다. 여기에 더해 위젯 보드에서 원하는 앱을 선택하면 새 창이 떠 모바일 앱과 같은 경험을 할 수 있습니다. 캘린더와 메모와 같은 민감한 정보는 잠근 기능도 제공합니다.
![](https://i0.wp.com/designcompass.org/wp-content/uploads/2023/05/naver-home-03.png?resize=800%2C800&ssl=1)
![](https://i0.wp.com/designcompass.org/wp-content/uploads/2023/05/naver-home-04.png?resize=800%2C800&ssl=1)
![](https://i0.wp.com/designcompass.org/wp-content/uploads/2023/05/naver-home-05.png?resize=800%2C800&ssl=1)
![](https://i0.wp.com/designcompass.org/wp-content/uploads/2023/05/naver-home-06.png?resize=800%2C800&ssl=1)
📕 에디터 노트
PC 경험을 지키면서 모바일 경험을 가져온 멋진 해답이라는 생각이 듭니다. 효율을 위해 모바일을 PC에 그대로 사용하는 패턴이 많은데 작은 세로형 스크린에 손가락으로 제어하는 것과 큰 가로형 스크린을 키보드 마우스로 제어하는 것은 경험 차이가 큽니다. 서서히 모바일 중심의 UX 패턴으로 PC도 변할텐데 그 과도기에서 사용자가 불편하지 않으면서 PC를 편하게 사용할 수 있는 멋진 변화입니다.
네이버의 상징인 PC 홈은 모바일 홈처럼 변했고 ‘NAVER’ 로고 대신 ‘N’ 심볼이 남았습니다. PC 웹 검색은 네이버의 상징입니다. 닷컴 시절부터 지금까지 네이버가 성장하는 데 가장 중요한 역할을 했던 것은 ‘검색’이었습니다. 전 국민이 궁금한 것이 있을 때 PC로 초록창에서 검색했습니다. 이제는 완전히 모바일 시대가 되었고 네이버 역시 검색 그 이상의 서비스로 변했습니다. 많은 생각이 드네요.
더 보기 및 출처
- https://campaign.naver.com/naverdetails/newpc/?pcode=naver_pcanniversary
- https://naver.com/
- https://m.naver.com/