델봉하우

이 글은 실무 아이콘 디자인을 하며 겪은 개인적인 경험과 부족한 부분을 리서치해  정리한 글입니다. UX 실무에 처음 입문하신 분들에게 조금이라도 도움 되길 바랍니다 👏  

Product Designer의 업무 단계중, 디자인 단계에선 아이콘이 필요합니다. 대부분 구글의 Material Icons, iOS의 SF Symbols 등을 기초로 아이콘을 활용합니다. 혹은 빠르게 개발에 사용될 수 있도록 별도 디자인 없이 Font Awsome 등의 아이콘 폰트를 임베드해 사용하기도 합니다.

하지만, 제품의 완성도를 높이거나 별도의 컨셉을 제공하려면 구글, iOS에서 제공하는 아이콘을 적용하는 대신 직접 아이콘을 만들어야 할 때도 있습니다.

이런 상황에 필요한 실무에서 고려해야할 아이콘 디자인 경험을 나눠보겠습니다.

1. 아이콘 만들 목적 알기

아이콘은 제품을 아름답게 하기 위해 쓰는 도구가 아닙니다 (일부 그런 용도로 활용할 수도 있습니다…). 단순히 화면에 글씨만 보이기 때문에 단조로워 추가하는 디자인도 아닙니다.

아이콘을 추가하기 위해선 목적과 이유가 필요합니다. 아이콘은 문자를 대신해 사용하는 시각적 언어중 하나입니다. 아이콘을 통해 문자보다도 더 효과적으로 명확하게 기능을 이해할 수 있도록 합니다.

대다수의 UX 디자이너가 아이콘을 제공하는데는 이유를 다음과 같이 크게 3가지로 정리할 수 있습니다.

1. 내가 만들 제품, 서비스의 아이덴티티를 보여주기 위해
   • 로고 (ex, 구글 로고, 네이버 로고,..)
     
2. 아이콘을 통한 명확한 의미전달을 하거나 제한된 영역에서 텍스트 대신 의미 전달을 하기 위해
   • 편집, 삭제, 내려받기, 새 창에서 열기 아이콘 등
   • Editor Tool 등에서 볼 수 있는 Tool bar 등
     
3. 일관된 아이콘 디자인으로 하나의 제품이라는걸 보여주기 위해
   • 아이콘의 둥글기, 선의 두께, 컬러 등
   • 제품의 일관된 특성을 보여주는 일러스트 (ex, Figma에서 제공하는 일러스트 들)
     

위 3가지 중, 아이콘을 디자인하는 목적에 따라서 리서치 방향과 컨셉 결과가 서로 다르게 나오게 됩니다

2. 목적별 아이콘 리서치 방향

2-1 내가 만들 제품, 서비스의 아이덴티티를 보여주기 위해

아이콘을 활용해 로고 뿐 아니라, 전체적인 디자인에 개성을 부여해 제품의 특성을 보여주기도 합니다. 이를 통해 브랜드의 인지도를 높일 수 있죠. 아이콘으로 브랜드 특성을 보여주는 대표적인 사례가 바로 ‘토스’ 입니다. 토스 앱을 보면 3D 형태의 아이콘을 익숙하게 볼 수 있죠.

사용자에게 기업의 아이덴티티를 전달하기 위해 리서치 단계부터 제품에 브랜드 이미지, 제품의 특성 등을 어떻게 담을지부터 고민을 해야 합니다.
단순히 아이콘 모양을 리서치 하는게 아닌, 브랜딩 단계부터 고민해야 합니다.

즉, ‘제품/서비스의 타깃 고객, 목적 분석 > 아이디에이션 > 브랜드 아이덴티티 파악 > 컨셉 정의 ‘ 와 같은 리서치 단계 진행이 필요합니다.

만약 어떤 컨셉으로 진행할 지 감을 잡기 어렵다면 인지도 높은 브랜드의 앱/서비스를 직접 사용해 보며 이들이 어떤 아이덴티티를 제품에 반영하는지 분석해보는것도 방법입니다.

📍 리서치 팁

– 브랜드의 로고 – 아이콘을 한 화면에 모두 붙여 두세요
– 제품의 소개 페이지에서 어떤 컨셉으로 서비스를 제공하는지 생각해 보고, 주요 타겟층을 고민해보세요.
– 떠오르는 생각을 옆에 적어보세요.

• 인지도 높은 브랜드 예시 :
  • 쉽게 사용할 수 있는 앱 : 네이버, 토스, 카카오, 배민, 당근
    (이 중에서 토스, 배민의 경우 개성이 높고,
    네이버, 카카오의 경우 모든 연령대가 사용하는 서비스기에 상대적으로 개성이 적습니다.)
    
  • 해외 서비스 : Apple, Google, Figma
    (Apple, Goole 또한 국내의 네이버, 카카오와 같이 범용적인 디자인을 제공합니다. 반면 Figma는 개성이 강한걸 볼 수 있죠)

2-2 아이콘을 통한 명확한 의미전달을 하거나, 제한된 영역에서 텍스트 대신 의미 전달을 위해

명확한 의미 전달을 하기 위해선 모두가 이해할 수 있는 아이콘을 리서치 해야 합니다.
(물론 재능있으신 분들 중에선, 머리에 바로 떠오르곤 합니다. 하지만 저같은 일반인이라면.. 리서치가 중요 합니다!)

예를 들어 AI에게 물어보기 위한 메세지 전송 아이콘을 만들어야 합니다.
이 때 가장 중요한건 일반적으로 어떤 형태의 아이콘이 가장 많이 사용되는지 파악하는게 가장 중요 합니다.
검색했을 때 결과가 많이 나온다면 그만큼 대중에게 친숙해져 있음을 생각해 볼 수 있습니다.

어떤 아이콘 모양이 적합할지 리서치하는 방법 예시 입니다.

2-3 일관된 아이콘 디자인으로 하나의 제품이라는걸 보여주기 위해

위 2-1과도 연계된 파트중 하나 입니다.
별도의 섹션으로 분리한 이유는, 처음 UI UX 업무를 협업하게 될 경우 놓치기 쉬운 부분들이 있기 때문에 분리했습니다.

아이콘 디자인 리서치를 하기에 앞서 현재 우리 회사에 적용된 아이콘이 어떤 디자인으로 적용됐는지 파악해 두는게 가장 중요합니다. 특히나, 중소 중견 기업들 중 디자이 시스템이 아직 갖춰져 있는 기업이 아닐 경우엔 더더욱 중요한 작업 입니다.

규칙을 파악해 두지 않은채 맘에 드는 디자인으로 아이콘을 적용했을 경우, 기존의 아이콘과 어우러 지지 않아 제품의 완성도가 떨어질 수 있기 때문입니다.

이 때 주로 살펴봐야 할 것들은 아래와 같습니다.

• 아이콘에 사용된 디자인 컨셉, 컬러 규칙 파악하기
• 디자인 세부 요소인 라운딩, 라인 두께 등을 파악하기
• 이미 제공되고 있는 아이콘 종류들 파악하기 : 기존 아이콘들은 이미 제품에서 제공하고 있기 때문에, 이미 있는 것들을 충분히 활용하고, 새로 디자인이 필요한 경우라면 기존 것들을 조합해 사용자에게 일관된 사용성을 제공하기 위함입니다.
  ex) 포인트 확인하기, 결제하기, 포인트 추가하기 등 비슷한 계열의 기능을 설명할 때, 키 아이콘을 활용해 변형해 보는 것도 방법 입니다.

3. 마무리

여기까지 아이콘 만드는 법에 대해 정리해 보았습니다.

가장 중요한건 아이콘이 단순히 이쁘다고 되는게 아닙니다.
1) 어떤 제품에 2) 어느 위치에 3) 어느 목적 4) 어떤 형태로 5) 다른 아이콘과 얼마나 어울리는지
등이 모두 함께 고려되어야 합니다.

디자인 비전공자로서 UX 기획 업무만을 진행하다 GUI까지 진행하게 되며 아이콘 만드는 과정이 막막했던 경험이 있습니다.
실제 다양한 아티클들을 사례로 배워온 내용을 피그마를 활용해 적용해 보았는데, 다른 분들에게도 도움이 됐음 좋겠습니다.