아이콘 버튼 가이드: 구성과 사용법
Icon button 디자인 시스템 기반 구성부터 사용법까지 완벽 가이드
아이콘 버튼 디자인 시스템 설계와 구성아이콘 버튼은 일반적으로 텍스트 label 없이도 의미가 직관적으로 전달되어야 한다. 이를 위해서는 대부분의 사용자에게 이미 학습된 보편적인 아이콘을 사용하는 것이 중요하다.
이 글은 아이콘 버튼에 대한 기본 개념부터 사용 가이드까지 담고 있으며, 디자인 시스템을 구축하면서 직접 겪은 시행착오와 그로부터 얻은 교훈들이 곳곳에 녹아 있다. 신입 디자이너들이 같은 실수를 반복하지 않길 바라는 마음으로 이 글을 써 내려간다.
이전글 Link button 디자인 시스템 설계와 사용법
https://brunch.co.kr/@uxui-neo/11
1. Anatomy
아이콘 버튼의 구조는 아래와 같이 구성된다.
1. 아이콘
2. Toucharea
위 구조에서 볼 수 있듯이 아이콘은 버튼이 아니다. 아이콘을 감싸고 있는 컨테이너(Toucharea)와 아이콘이 합쳐진 상태가 아이콘 버튼이다.
(아이콘 버튼에 대해서 개념이 잘 잡히지 않은 디자이너들이 아이콘과 아이콘버튼을 동일시하거나 아이콘 자체를 버튼으로 알고 있는 경우가 많으니 내 글로써 개념을 확실히 잡는 것도 좋다. )
2. Type
아이콘 버튼의 타입아이콘 버튼의 타입은 Common button의 타입과 거의 동일하게 사용된다.
2-1. Primary icon button
Primary icon button은 페이지나 특정 영역에서 가장 중요한 작업을 돋보이게 하기 위해 사용된다.
다만 일반적으로는 중요 작업에는 텍스트 레이블이 있는 버튼이 더 명확성을 주기 때문에, Primary icon button은 비교적 자주 사용되지 않는 편이다.
2-2. Secondary icon button
Secondary icon button은 보조적인 작업에 사용되며, 기본 버튼보다 시각적 우선순위가 낮다. 주로 덜 중요한 액션을 나타내거나, 추가 옵션을 제공할 때 활용된다.
2-3. Tertiary icon button
Tertiary icon button은 가장 낮은 우선도의 작업을 위해 사용된다. 화면에서 부각되지 않도록 설계되었으며, 대체적으로 선택적이거나 부가적인 기능을 제공한다.
2-4. Danger icon button
Danger icon button은 주의가 필요한 작업이나 중요한 경고를 나타냅니다. 일반적으로 삭제 또는 취소와 같은 파괴적인 작업에 사용되며, 보통 중요한 자료를 삭제할 때 경고를 나타내는 Semantic color인 Red를 사용해서 아이콘 컬러를 구성한다.
3. Size
버튼과 같은 작은 요소를 구성할 때에, 사이즈는 시각적으로 또는 신체적으로 어려움이 있는 사람들이 사용하기 편할 수 있도록 최소 사이즈(최소 24*24)를 기준으로 구성하는 것을 권장한다.
Accessibility (접근성) 기준으로 아이콘 버튼의 Toucharea는 최소 24를 기준으로 하는 것을 권장한다.아이콘 버튼을 설계할 때 Tip을 하나 주겠다.
사이즈 Variation마다 들어가는 Icon의 크기를 다양하게 Variation 할 수 있도록 버튼을 설계해라.
말로는 설명이 어렵고 아래 이미지를 참고해 보자
디자인 시스템 아이콘 버튼 설계 방법 아이콘 버튼의 사이즈가 Large일 때, 버튼 안에 들어가는 아이콘의 크기는 고정되어서는 안 된다. 시각적인 균형을 맞춰야 하는 다양한 경우에 대응하기 위해, 아이콘은 상황에 따라 크기 조절이 가능하도록 설계되어야 한다. 이렇게 해야 시각 보정이 필요한 수많은 케이스에 유연하게 대응할 수 있다.
4. 사용법(Usage)
- Icon button은 텍스트 레이블 없이도 직관적으로 이해될 수 있도록 아이콘 선정을 고려해라.
아이콘은 메타포를 함축한 도구이다. 문화적, 나이, 성별, 페이지의 맥락에 따라서 그 메타포는 다르게 해석될 수 있다.
그러므로 가장 일반적이고, 그 의미가 직관적으로 전달되도록 아이콘을 설계해야 한다..
필요한 경우에는 마우스 호버시에 Tooltip이나 텍스트 레이블을 함께 제공하여 그 의미를 파악할 수 있어야 한다. (필자는 필수적이라고 생각한다.)
마우스 호버시에 Tooltip(툴팁)을 통해서 그 의미를 파악할 수 있어야 한다.- 아이콘 버튼의 개수는 3~4개로 제한해라.(Feat. 훅의 법칙(Hick's Law))
여러 작업을 한 화면에 담아야 할 경우, ‘더 보기’ 아이콘 버튼(점 세 개)을 사용해 관련된 아이콘 버튼들을 그룹화하면 사용자에게 불필요한 시각적 부담을 줄일 수 있다.
아이콘 버튼을 한 줄에 4개 이상 나열하면, 선택지가 과도해지면서 사용자의 인지 부담이 커지고 결정 시간이 길어질 수 있다. 이는 선택지가 많을수록 판단 시간이 늘어난다는 힉의 법칙(Hick’s Law)에 기반한 설계 원칙이다.
이상으로 아이콘 버튼을 기본적이고도 필수적인 개념글에 대해서 마무리한다. 내 글이 신입디자이너들의 어려움 속 "실마리를 찾는" 글이 되길 바란다. 이상이다.
참고문헌
* 힉의 법칙(Hick's Law) : https://lawsofux.com/hicks-law/
