NAVER System Icon Guide

아이콘 진화를 위한 가이드 업데이트 경험기

네이버에 연결되어 있는 서비스는 100여가지가 넘으며 그 만큼 다양한 아이콘을 사용하고 있다.
서비스에 사용하는 시스템 아이콘 또한 시대 흐름에 맞게 변해가는데, 점점 더 복잡해지는 서비스 이용 패턴에 따라 어떤 환경에서도 자연스럽게 서비스 경험이 연결될 수 있도록 아이콘의 일관된 디자인 원칙이 필요했다.

일관성을 위한 디자인

각 서비스 성격과 시스템 기능을 직관적으로 표현하며, 동시에 브랜드가 통합되어질 수 있도록 심볼의 조형원리와 색상의 사용을 체계화하였다. 또한 아이콘 심벌의 스케일을 규정하고 자칫 다양하게 만들어질 수 있는 사선에 대한 각도 규칙을 정립하여 기본 도형의 조합만으로 구성하도록 하였다.
최대한 단순하고 직관적인 형태로 아이콘 세트를 구성하도록 하였다.

서비스 아이콘 가이드

UI 아이콘

UI 아이콘은 알기 쉬운 메타포와 간결한 형태로 보다 직관적인 사용자 경험을 유도하도록 불필요한 라운딩을 과감하게 생략하여 다양한 영역에 대응할 수 있도록 하였다. 조형 원리를 체계화하여 다른 형태의 아이콘들이 같이 사용될 때 통일감 있고 양감이 동일해 보이도록 하였다.

새로운 규칙의 적용

UI 아이콘을 실 서비스에 적용하면서 몇가지 문제가 제기되었는데, Square 사용은 좋으나 각진 모서리가 아이콘 메타포를 빠르게 파악하는데 방해가 되는 요소로 판별되었다. 또한 48px내 구성한 라인의 굵기 2px 규정이 표현에 한계가 있고 서비스 성격을 포함한 아이콘을 제작하는데 어려움이 있다고 판단되었다.
라이브러리를 분리하여 90px 내 3px 굵기의 라인을 사용하도록 규정을 정비하고 신규 아이콘 제작과 서비스 아이콘 재제작에 활용하도록 하였다.

새 가이드가 적용된 아이콘

 

후기 또는 잡담

Square 아이콘 설계는 BX팀에서 진행하였고 UI 아이콘에 적용하기 위해 SVG로 제작되는 아이콘 설계를 위해 기존 XEICON 설계 경험을 통해 가이드를 추가하고 Wiki로 업데이트를 진행하였던 프로젝트다. 다소 얇은 굵기의 아이콘 제작으로 실 서비스에 적용되는 작은 아이콘은 추가로 굵기를 조정하여 업데이트하는 방식을 취하고 있다. 다소 불편한 부분은 있으나, 큰 플랫폼에서 이미지였던 아이콘들을 SVG 아이콘 형태로 사용하기 시작한 데에 나름 의미가 있다고 생각된다. (그만큼 인력도 있으니 뭐…)