<주간 UIUX 디자인 : ui 아이콘>

UIUX 디자인 잘하는 법 : ui 아이콘 정복하기 (무료 사이트 활용 팁)

제로베이스 UIUX 디자인 스쿨

지난 시간에 스케치(Sketch)에 대해서 알아보면서 아이콘(Icon)은 UIUX 디자인에서 빠질 수 없는 요소라고 언급했었죠! 단순해보이고, 작다고 무시했다가는 큰일나요! 아이콘(Icon)은 UI 디자인 뿐만 아니라 UX 디자인 측면에서도 아주 중요한 역할을 하고 있거든요. 아이콘(Icon)의 역할과 개념, 어떻게 하면 아이콘 디자인을 잘 할 수 있는 지까지! 아이콘(Icon)을 완전 정복해봅시다. 아이콘(Icon)을 제대로 이해하고 디자인 한다면, 더 좋은 UIUX 디자인을 할 수 있을 거에요!

잠깐, UIUX 디자인 스쿨이 궁금하다면? 자세히보러가기 >

인스타그램 아이콘 예시

위 이미지는 인스타그램 피드 UI에 사용되는 아이콘(Icon)들입니다. 각각 어떤 뜻을 지니는지 대부분의 사용자는 바로 떠올릴 수 있을 거예요. 왼쪽에서부터 순서대로 좋아요, 댓글 달기, 저장하기 기능을 수행하고 있죠. 이처럼 텍스트 없이 아이콘만 보고도 뭔지 바로 알아볼 수 있는 이유는 우리가 서비스를 사용하며 축적된 경험으로 자연스럽게 학습했기 때문이에요.

GUI(graphical user interface)에서의 아이콘은 액션이나 상태, 정보 등을 상징적인 기호로 축약한 하나의 시각적 언어입니다. 문자처럼 약속된 체계로 옳고 그름이 정해진 것은 아니지만, 보편적이고 직관적인 형태로 의미를 표현할 필요가 있죠. 잘 디자인된 아이콘은 사용자가 해석할 필요 없이 곧바로 이해하고 활용할 수 있고요.

인터페이스를 디자인할 때 아이콘을 사용하는 이유는 다양해요. 우선, 아이콘은 적은 면적을 차지하기 때문에 한정된 디바이스 화면상에 효율적으로 배치할 수 있습니다. 사용자의 시선을 주목시키고 중요한 요소를 강조하는 역할도 하고 있어요. 또한, 아이콘은 브랜드의 성격을 첨가하기도 좋고요. 아이콘의 스타일에 따라 서비스의 인상이 달라지기도 합니다.

아이콘에 대해서 이해가 되셨나요? 그렇다면 이제 본격적으로 아이콘에 대해서 알아봅시다.

1. UX/UI 디자인에 사용되는 아이콘의 용도는 무엇일까요?

1) 사용자 액션 유도

아이콘은 버튼 컴포넌트처럼 액션을 실행시킬 수 있어요. 검색, 추가, 재생, 삭제 등 대중적인 기능들은 텍스트를 생략한 채 아이콘으로만 표기하는 경우도 많죠. 이때, 사용자가 탭하거나 클릭하는 인터랙션이 작용되기 때문에 일정 이상의 면적, 즉 touch area,를 보장해주는 게 중요합니다.

좌: 재생 아이콘 버튼을 사용한 스포티파이
우: 삭제 기능을 ‘-’ 기호로 표현한 The Guardian

👀 UX POINT | 유도성

사용자가 아이콘을 보고 무엇을 할 수 있는지 즉각적으로 이해할 수 있어야 하고, 원하는 작업을 수행하도록 사용자의 액션을 유도할 수 있어야 해요.

2) 상태와 과정 안내

아이콘을 활용해 상태(status)와 과정(progress)를 효과적으로 표시할 수 있어요. 사용자가 어떤 액션을 취했을 때 친절한 UI는 즉각적인 반응을 제공하죠. 성공적으로 완료됐는지 혹은 에러가 발생했는지 아직 로딩 중인지 알려줌으로써 사용자의 불안감을 해소시키는 것입니다. 초록, 주황, 빨강 등의 기능적인 색상을 적용하면 의미를 더욱 명확하게 전달할 수 있고요.

좌 : 과정 중 완료된 부분을 초록 체크 아이콘으로 구분한 soundcloud
우 : 버튼 안에 아이콘을 추가해 로딩 중임을 알리는 NeoFinancial

👀 UX POINT | 직관성

아이콘은 사용자에게 상태를 직관적으로, 빠르게 전달함으로써 사용자의 불안감을 해소시킬 수 있어요.

3) 정보 전달 및 강조 (Symbol)

정보를 강조하거나 이해를 돕기 위해서도 아이콘을 사용할 수 있어요. 메뉴나 카테고리 등의 UI에서 텍스트만 나열했을 때의 떨어지는 집중도를 높이며, 정보를 그룹화하는 것을 쉽게 찾아볼 수 있습니다.

카테고리 별 아이콘을 추가해 시각적 인지를 돕는 마켓컬리와 waze

👀 UX POINT | 시각적 구분

아이콘은 특정 페이지에서 핵심 요소를 나타냄으로써 사용자가 원하는 정보로 쉽게 이동하고 필요한 정보를 빠르게 찾을 수 있도록 도와주는 역할을 해요.

2. 좋은 아이콘 디자인은 무엇이고 어떤 노하우가 있을까요?

1) 좋은 아이콘 디자인 : 이해하기 쉬운 아이콘

UI상의 아이콘은 결국 정보 표현의 수단입니다. 따라서 이해하기 쉬워야 해요. 대표적인 UX 컨설팅 그룹인 닐슨 노먼 그룹(Nielsen Norman Group)은 아이콘 디자인 시 5-second rule을 제안하는데요. 어떤 대상을 아이콘화 할 때 대표할만한 심볼(symbol)이 5초 내로 생각나지 않는다면, 그 대상은 아이콘으로 만들기에 부적절할 수 있다는 내용이에요.
또한, 아이콘에만 너무 의존하기보다 가능한 경우에는 텍스트 레이블을 함께 표기해 주어 사용자의 혼란을 줄여줄 것을 추천하고 있어요. 결국은 아이콘도 사용자가 이해해야 할 정보의 일종임을 명심하고 접근해야 한다는 이야기죠.

아이콘 텍스트 레이블 표기 예시

2) 아이콘 디자인 노하우 : 충분히 리서치 하기

무엇보다 적절한 아이콘의 형태와 사용을 위해 충분히 리서치하고 테스트하는 것이 중요합니다. 요즘 많은 IT 기업에서 그들의 디자인 시스템을 무료로 공개 배포하는 추세인데, 아이콘도 포함한 곳이 많아요. 각 브랜드나 서비스의 특성에 따라 아이콘이 어떻게 다른지 비교하며 사용해보는 것도 큰 도움이 될 것이라 생각합니다. 아이콘 디자인에 참고할 만한 대표적인 기업들을 소개할게요.

✨ 참고할만한 디자인 시스템 5가지

잠깐, 이런 방법도 있어요 🤗

피그마로 디자인하는 분들이라면 플러그인을 활용하는 것도 좋은 방법이에요. 대표적으로 Iconify 플러그인을 설치하면 오픈 소스 아이콘들이 통합되어 제공되는데, 작업 중인 디자인에 바로 추가할 수 있어 매우 편리하거든요!

오늘은 아이콘이 왜 중요한지, 아이콘을 어떻게 디자인 해야 하는지 알아봤어요. UIUX 디자이너를 꿈꾸는 분들에게 도움이 되었길 바라며 글을 마칠게요!