UI/UX아이콘 디자인가이드

안녕하세요 찐망고입니다.

이번 포스팅도 제가 자주 보는 글을 번역해서 올려보도록 하겠습니다.

아이콘은 다른 언어보다 더 보편적으로 이해될 수 있는 시각적 언어로, 물체의 특성을 강조하는 기호로 표현됩니다. 

UI 아이콘, 픽토그램, 그리고 표지 등으로 나타내며, 작은 공간을 차지하면서 의미를 전달할 수 있어서 

다양한 분야에서 사용되는데요

아이콘은 다른 요소들보다 쉽게 개성을 부여할 수 있고,

 시각적 원리를 실험할 수 있기 때문에 많은 디자이너들에게 사랑받고 있습니다. 

이 글에서는 아이콘의 특성과 UI 디자인에서 권장되는 아이콘 디자인 가이드를 요약하였습니다.

 

 

 

 

Usage

UI 디자인에서 아이콘은 주로 앱 아이콘과 시스템 아이콘으로 널리 사용됩니다. 

앱 아이콘은 브랜드를 표현하기 위해 사용되며, 

시스템 아이콘은 사용자가 빠르게 정보를 이해하고 조치를 취할 수 있도록 도와줍니다.

 

앱아이콘과 시스템아이콘

 

 

 

 

Style

아이콘을 표현하는 방법에는 선, 채우기, 컬러, 이미지 등이 있습니다. 

아이콘이 사용되는 공간에 따라 목적이 다르며, 

주로 사용자의 동작에 대한 피드백을 제공하거나 주목도를 높이는 데 사용됩니다.

 

라인, 채우기, 컬러, 이미지 아이콘들

 

• 라인(Line)과 채우기(Fill): 기본적인 형태로 레이아웃에 배치
• 컬러드(Colored): 주로 사용자의 동작에 대한 피드백을 제공하거나 주목도를 높이기 위해 사용
• 이미지(Image): 높은 주목이 필요할 때 사용됩니다. 종종 이모지나 독특한 아이콘으로 표현

 

 

 

Weight

스타일은 조합하여 다양한 무게(Weight)의 아이콘을 만들 수 있습니다.
서비스가 주로 이미지를 중심으로 한다면, 아이콘의 무게를 최소화하여 사용해야 하며,
텍스트 중심의 서비스라면 사용자에게 시각적인 쾌락을 제공하기 위해 무거운 아이콘을 사용할 수 있습니다.

 

아이콘 무게에서 오는 느낌

 

 

 

 

Properties

아이콘을 구성하는 요소들로는 Thickness, Ends & Join, Radius등이 있는데

이러한 표현 규칙은 뷰어가 아이콘을 식별하는 데 필요한 최소한의 변화만을 제공하기 위해 통일되어 있습니다.

 

Thickness, Ends & join, Radius 아이콘

 

• Thickness께: 디지털 화면에서 표현할 수 없는 소수점은 반올림되기 때문에, 1px과 2px를 사용
  (스마트폰 사양이 개선되면 때로는 소수점이 사용됩니다.)
• Ends & Join: 각각 각진 끝과 둥근 끝이 있으며, 부드러운 표현을 위해 주로 둥글게  작업
• Radius: 일관성을 유지하기 위해 끝 부분과 접합에는 같은 규칙이 적용되며,
  부드러운 표현을 위해 주로 둥근 형태가 사용

 

 

 

Grid

눈(Eyes)은 시각적 그리드와 아웃라인을 사용하여 아이콘들을 분리합니다. 

시각적 그리드는 

같은 크기 영역 내에서 여러 형태의 아이콘이 동일한 무게와 중심 점을 갖도록 하는 그리드를 의미하는데요. 

기하학적으로 분해된 객체는 원, 정사각형, 직사각형, 정삼각형으로 구성된 그리드에 따라 생성됩니다.

 

시각적그리드

 

 

 

 

Scale

다양한 환경에서 원활한 관리를 위해 8px, 16px, 24px, 32px와 같이 8의 배수를 기준으로 사용하는 경향이 있습니다.

모바일에서 작은 공간에 주로 사용되는 시스템 아이콘은 때로는 다양성을 위해 4px의 배수로 사용됩니다.

 

8의배수 아이콘

 

 

 

 

Clarity

사용자가 빠르게 이해할 수 있는 최소한의 요소로 디자인하세요. 

가능하면 사용자 친화적으로 만들고, 필요한 경우 간단한 비유를 적용하세요. 

복잡한 아이콘은 사용자가 그 의미를 이해하지 못할 수도 있거나 오랜 시간이 걸릴 수 있습니다.

 

복잡한 아이콘 안돼

 

 

 

Detail

아이콘이 가장 중요한 목표인 "빠른 정보 전달"을 위해 좁은 공간 내에서 디테일을 최소화하는 것이 권장되는데. 

특히 작은 공간에 맞추어지는 시스템 아이콘의 경우, 

해당하는 내용만 최소한으로 남기고 다른 장식 요소들은 제거하는 것이 좋습니다.

디테일을 최소화

 

 

 

 

Consistency

한 서비스 내에서 동일한 기능을 수행하는 아이콘은 동일한 스타일로 표현되는데요
채우기(Fill)와 선(Line)은 사용되는 맥락에 따라 함께 사용될 수 있지만,
동일한 맥락에서 사용되는 아이콘들은 동일한 속성으로 표현됩니다.

동일한아이콘 스타일 표현

 

 

 

 

Perspective

아이콘을 가능한 한 정면에서 본 듯한 퍼스펙티브 뷰로 만드는 것이 좋습니다. 

현실의 디지털 기기는 평평하고, 아이콘은 주로 평면 카드 공간에 사용되므로 

공간적인 느낌을 준다면 인식적 불일치를 느낄 수 있습니다. 

특별한 주의를 기울여 사용되는 경우가 제한적으로 있지만 권장하지는 않습니다.

 

정면뷰 2D로 아이콘을 만들자

 

 

 

 

Familiarity

일반적으로 저는 플랫폼과 관계없이 동일한 아이콘을 사용합니다. 

그러나 OS 플랫폼 내에서 자주 사용되는 스타일에 대해서는

 OS의 기본 템플릿을 사용하는 것이 사용자가 더 빠르게 의미를 이해할 수 있습니다. 

기본 템플릿은 대부분의 사용자들이 익숙한 형태이기 때문입니다.

 

OS기본템플릿 아이콘

 

 

 

 

Optical Correction

그래픽 디자인 툴의 한계로 인해 가끔 시각적 보정이 필요한데요

아래의 플레이 버튼의 경우, 그래픽 툴에서는 레이어의 끝에 맞추어 정렬됩니다. 

하지만 실제로는 삼각형은 원이나 정사각형과 다른 중심점을 갖기 때문에 조정이 필요합니다.

 

실제 센터와 보이는 센터는 다르다

참고사이트

https://bootcamp.uxdesign.cc/ultimate-guide-for-a-good-ui-icon-beefc840c2e5

Ultimate guide for a good UI: icon