[UX원칙#25] 아이콘 설계 UX 가이드라인 9가지

아이콘 설계 UX 가이드라인 9가지

 
앤서니의 [아이콘 설계 UX 가이드라인 9가지] 소개하고자 합니다.

아이콘의 의미를 알아내려고 고민했던 적이 있으십니까? 사용자는 익숙하지 않은 아이콘을 볼 때면 언제나 고민에 빠집니다. 바로 이것이 아이콘을 명확하고 직관적으로 만드는 것이 중요한 이유입니다. 다음 가이드라인을 따르면 사용자가 머리를 긁적이지 않도록 아이콘을 만들 수 있습니다. 

원칙 1. 공간이 제한되지 않았다면 아이콘에 레이블을 붙인다

여러분이 이용하는 아이콘이 보편적으로 알려진 아이콘(예: 재생, 프린트, 닫기, 도움말)이 아니라면, 언제나 레이블을 붙여야 합니다. 

(1) 직관성 향상
보편적으로 알려진 아이콘은 사용자가 쉽게 인식하고 이해할 수 있지만, 그 외의 아이콘은 사용자가 그 의미를 즉시 이해하지 못할 수 있습니다. 레이블을 추가하면 아이콘의 기능을 명확히 전달하여 사용자가 혼란을 느끼지 않도록 돕습니다.

(2) 사용자 경험 개선
사용자들이 각 아이콘의 기능을 쉽게 이해할 수 있도록 해주면, 앱을 탐색하는 데 소요되는 시간을 줄일 수 있습니다. 이는 사용자가 원하는 작업을 빠르게 수행할 수 있게 하여 전반적인 사용자 경험을 향상시킵니다.

(3) 오작동 방지
아이콘의 의미가 불명확할 경우 사용자가 잘못된 아이콘을 클릭할 위험이 높아집니다. 레이블을 통해 아이콘의 정확한 기능을 명시함으로써 오작동을 줄이고, 사용자에게 더 나은 경험을 제공합니다.

(4) 접근성 향상
모든 사용자가 동일한 방식으로 아이콘을 인식하는 것은 아닙니다. 특히, 특정 문화적 배경이나 경험에 따라 아이콘의 해석이 다를 수 있습니다. 레이블은 이러한 다양성을 고려하여 모든 사용자가 기능을 이해할 수 있도록 돕습니다.

(5) 일관성 유지
앱 내에서 모든 아이콘에 대해 레이블을 붙이면, 사용자는 일관된 패턴을 인식하게 됩니다. 이는 사용자가 앱 사용 중에 느끼는 안정감을 높이고, 탐색의 예측 가능성을 증가시킵니다.

한 가지 예외 상황은 공간이 제한적인 경우 뿐입니다. 

(1) 공간 제약
모바일 디스플레이와 같은 좁은 공간에서는 많은 아이콘이나 컨트롤을 배치하기 어려워 레이블을 추가하기 힘든 경우가 많습니다. 이때는 공간을 효율적으로 활용해야 하며, 아이콘에 레이블을 붙이는 것이 어려워질 수 있습니다.

(2) 툴팁의 한계
일반적으로 데스크톱 환경에서는 마우스를 올리면 툴팁이 나타나 아이콘의 기능을 설명해 줄 수 있습니다. 그러나 모바일 환경에서는 사용자가 마우스를 사용할 수 없기 때문에 호버 효과를 제공할 수 없습니다. 이로 인해 사용자는 아이콘의 의미를 즉시 알 수 있는 방법이 제한됩니다.

원칙 2. 아이콘은 행동과 대상을 모두 보여준다

아이콘의 디자인에서 행동(action)과 대상(object)을 명확히 표현해야 합니다. 

(1) 명확한 의사소통
아이콘이 행동과 대상을 모두 보여주면 사용자가 그 기능을 즉시 이해할 수 있습니다. 이는 아이콘의 목적이 무엇인지 명확히 전달함으로써 사용자의 혼란을 줄이고, 앱을 쉽게 탐색할 수 있도록 돕습니다.

(2) 직관적인 경험 제공
사용자가 아이콘을 클릭했을 때 어떤 결과를 기대할 수 있는지를 명확히 하는 것은 매우 중요합니다. 행동과 대상을 분명히 표현하면 사용자에게 직관적인 경험을 제공하여, 불필요한 학습이나 실수를 줄일 수 있습니다.

(3) 일관성 강화
명확한 대상과 행동을 가진 아이콘은 다른 아이콘들과의 일관성을 높이는 데 효과적입니다. 사용자들은 비슷한 기능을 가진 아이콘이 유사한 방식으로 디자인되어 있을 때 더 쉽게 기억하고 인식할 수 있습니다.

(4) 사용자 인식 향상
아이콘이 특정 행동을 잘 표현하고, 그에 맞는 대상을 사용하면, 사용자는 그 아이콘이 수행할 작업을 쉽게 인식할 수 있습니다. 이는 사용자가 앱을 더 빠르고 효율적으로 사용할 수 있습니다.

(5) 접근성 개선
명확한 아이콘 디자인은 다양한 사용자에게 접근성을 제공합니다. 사용자가 아이콘의 의미를 직관적으로 이해할 수 있다면, 앱을 사용하는 데 있어 더 많은 사용자들이 편리함을 느낄 수 있습니다.

아래 보이는 종이비행기는 ‘이메일 보내기’를 나타내는 아이콘으로, 아이콘을 영리하게 만든 사례입니다. 종이 자체는 이메일을 표현하는 것이고, 비행기 모양으로 접힌 종이는 보내는 행동을 표현하는 것입니다.

원칙 3. 비슷한 아이콘끼리 묶는다

비슷한 기능을 하는 아이콘을 묶는 것은 사용자에게 탐색의 효율성을 높이고, 명확한 기능 이해를 도우며, 전반적인 사용자 경험을 개선하는 데 중요한 역할을 합니다.

(1) 탐색 효율성 향상
비슷한 아이콘을 묶으면 사용자가 Task를 완료하는 데 필요한 모든 옵션을 한눈에 쉽게 찾을 수 있습니다. 이는 사용자가 원하는 기능을 찾는 데 드는 시간을 줄이고, 탐색 과정을 간소화합니다.

(2) 명확한 기능 이해
아이콘 그룹별로 레이블을 붙이면 각 그룹의 기능이 무엇인지 명확하게 전달할 수 있습니다. 이는 사용자가 각 아이콘이 어떤 역할을 하는지 쉽게 이해하도록 도와줍니다.

(3) 사용자 경험 개선
비슷한 아이콘을 묶어두면 사용자는 모든 아이콘을 하나씩 살펴보는 대신, 묶음으로 이해할 수 있어 사용자 경험이 향상됩니다. 이는 사용자가 앱을 더 직관적으로 사용할 수 있도록 만듭니다.

(4) 정보의 구조화
아이콘을 기능별로 그룹화하면 정보가 구조화되어 사용자가 혼란 없이 필요한 기능을 찾을 수 있습니다. 이는 앱의 전반적인 사용성이 좋아집니다. 

(5) 시각적 정리
아이콘을 묶어서 배치하면 시각적으로 정돈된 느낌을 주어 사용자가 앱을 사용할 때 더 편안함을 느끼게 합니다. 이는 사용자에게 긍정적인 인상을 남기고, 앱에 대한 신뢰도를 높이는 데 도움이 됩니다.

원칙 4. 아이콘 순서와 배치에 일관성을 지킨다

사용자는 아이콘의 기능을 이해하는 데 단순히 그 모양에만 의존하지 않습니다. 아이콘의 순서와 배치에도 의지하여 기능을 이해합니다. 한 연구에 따르면, 아이콘의 모양을 바꾸는 건 유저가 적응하기 쉽지만, 아이콘의 위치를 바꾸는 건 유저가 훨씬 더 적응하기 어렵다고 합니다.

이러한 결과는 “아이콘의 위치가 시각적 이미지보다 더 중요하고, 사람들은 어디에 무엇이 있는지를 기억하지 어떻게 생겼는지를 기억하는 것이 아니다”는 것을 뜻합니다. 아이콘 위치의 변화는 유저를 어질어질하게 만들 수 있습니다. 때문에 아이콘에게 가장 이상적인 위치를 찾고, 인터페이스를 다시 디자인할 때도 그 위치를 유지해야 합니다.

원칙 5. 아이콘에는 일반적인 비주얼 모티프(common visual motif)를 사용한다

공통된 비주얼 모티프를 가진 아이콘은 사용자에게 기능 간의 관계를 명확하게 전달하고, 사용자 경험을 향상시키며, 브랜드 아이덴티티를 강화하는 데 중요한 역할을 합니다.

(1) 인지적 연관성
비슷한 스타일의 아이콘은 사용자에게 특정 기능이나 카테고리 간의 관계를 자연스럽게 전달합니다. 사용자는 공유된 비주얼 스타일을 통해 어떤 아이콘이 비슷한 기능을 수행하는지를 직관적으로 이해할 수 있습니다.

(2) 사용자 경험 향상
공통된 비주얼 모티프는 사용자가 아이콘을 더 쉽게 기억하고 인식할 수 있도록 도와줍니다. 일관된 디자인은 사용자가 앱을 탐색하는 데 드는 인지적 부담을 줄이고, 전반적인 사용자 경험을 개선합니다.

(3) 일관성의 중요성
한 세트의 아이콘에서 공통된 비주얼 모티프를 일관되게 유지하는 것은 필수적입니다. 일관된 디자인이 없으면 사용자는 각 아이콘의 기능을 혼동할 수 있으며, 이는 탐색의 효율성을 떨어뜨리고 사용자에게 혼란을 초래할 수 있습니다.

(4) 브랜드 이미지 강화
공통된 비주얼 모티프는 브랜드의 아이덴티티를 강화합니다. 사용자에게 친숙한 스타일은 브랜드에 대한 긍정적인 인식을 형성하고, 사용자 충성도를 높이는 데 기여할 수 있습니다.

아래 사례를 보면 비주얼 모티프의 일관성을 지키지 않은 취소선 아이콘(strikethrough icon)이 나옵니다. 대부분의 편집기에서는 ‘굵게’ 아이콘은 두꺼운 ‘B’ 자로, ‘기울임 꼴’ 아이콘은 기울어진 ‘I’ 자로, ‘밑줄’ 아이콘은 밑줄 쳐진 ‘U’ 자로 표현하고 있습니다. 하지만 여기서 취소선 아이콘에는 ‘S’ 자를 쓰는 대신 ABC를 이용하여 실수를 범했습니다.

원칙 6. 일반적인 비주얼 모티프를 공유하는 아이콘은 느낌과 모양이 더 비슷하게 느껴진다

추상적인 액션보다는 명확한 액션에 아이콘을 사용하는 것이 좋습니다. 명확한 액션에는 액션을 공통적으로 대표하는 명확한 작업 대상이 있기 때문입니다. 추상적인 액션은 액션을 공통적으로 연상할 수 있는 대상을 생각해 내려고 애써야 합니다. 마침내 한 가지를 생각해내더라도, 유저가 다르게 해석할 수 있다는 리스크가 존재합니다.

(1) 직관적 이해
명확한 액션 아이콘은 특정 작업을 직접적으로 나타내는 대상을 포함하고 있어 사용자가 즉시 이해할 수 있습니다. 예를 들어, ‘재생’ 아이콘은 일반적으로 ▶ 모양으로, 사용자가 쉽게 그 기능을 인식하고 사용할 수 있습니다.

(2) 추상적 해석의 어려움
추상적인 액션 아이콘은 사용자가 그 의미를 이해하기 위해 추가적인 사고를 해야 하므로 혼란을 초래할 수 있습니다. 사용자가 특정 아이콘에 대해 여러 가지 해석을 할 가능성이 높아지며, 이는 사용자 경험을 저하시킵니다.

(3) 일관성 유지
명확한 액션은 공통적으로 연상할 수 있는 대상을 기반으로 하므로, 사용자들이 비슷한 기능을 가진 아이콘을 일관되게 인식할 수 있습니다. 이는 탐색의 효율성을 높이고 사용자가 원하는 작업을 더 쉽게 수행할 수 있도록 돕습니다.

(4) 사용자 신뢰 구축:
명확한 액션 아이콘은 사용자가 기능을 신뢰하고 쉽게 사용할 수 있도록 합니다. 사용자가 아이콘을 클릭했을 때 예상한 결과가 나타나면, 이는 긍정적인 사용자 경험을 만들어내며, 앱에 대한 신뢰를 구축하는 데 많은 도움이 됩니다.

앞서 언급한 연구 결과에 따르면, 그들이 테스트한 유저의 반 이상이 ‘작업 취소(undo)’와 ‘재작업(redo)’ 아이콘을 이해하지 못했다고 합니다. 이 추상적인 액션에는 왼쪽 오른쪽 화살표가 사용되었습니다. 화살표 아이콘은 유저가 여러 인터페이스에서 다양한 액션을 수행하는데 이용했을 것이기 때문에 유저에게 여러 의미를 지닙니다. 

이런 상황에서는 화살표만 이용하는 대신에, ‘작업 취소’과 ‘재작업’ 문구를 줄인 ‘취소(un)’와 ‘다시(re)’라는 문구를 화살표 밑에 작게 붙이는 것이 좋습니다. 화살표만 있으면 여러 의미를 가질 수 있습니다. 하지만 액션을 표현하는 독특한 요소를 더해주면 아이콘을 보다 명확하고 직관적으로 만들 수 있습니다.

원칙 7. 지나치게 비유적인 아이콘 이미지 사용은 피한다

해당 액션을 대표하는 명확한 이미지가 없는 경우에는 아이콘에 비유적 의미를 담은 이미지를 사용하는 경향이 있습니다. 비유적 이미지가 해당 액션을 제대로 표현하지 못하는 경우에는 역효과를 낼 수도 있습니다. 

(1) 명확성 부족
비유적 아이콘 이미지는 해당 액션을 직접적으로 나타내지 않기 때문에 사용자가 그 의미를 이해하는 데 어려움을 겪을 수 있습니다. 사용자는 아이콘을 보고 무엇을 해야 할지 명확하게 알지 못해 혼란스러움을 느낄 수 있습니다.

(2) 다양한 해석
비유적 아이콘 이미지는 개인의 경험이나 문화적 배경에 따라 다르게 해석될 수 있습니다. 이로 인해 사용자가 동일한 아이콘을 보고 전혀 다른 의미를 부여하게 되어, 기능을 잘못 이해하거나 잘못된 액션을 취할 위험이 있습니다.

(3) 역효과 발생
비유적 아이콘 이미지가 해당 액션을 제대로 표현하지 못할 경우, 사용자는 아이콘의 기능을 잘못 인식하게 됩니다. 이는 사용자가 앱을 사용할 때 불편함을 느끼거나, 원하는 작업을 수행하지 못하게 만들어 사용자 경험을 저하시킬 수 있습니다.

(4) 일관성의 결여
비유적 아이콘 이미지는 종종 다양한 스타일로 표현될 수 있어 일관성을 유지하기 어렵습니다. 사용자가 여러 아이콘을 비교할 때, 비유적 이미지가 사용되면 각 아이콘 간의 관계를 이해하는 데 어려움을 겪을 수 있습니다.

예를 들어, ‘자르기’라는 액션을 표현하는 데 가위 모양 이미지를 사용하는 건 이해하기 쉽습니다. 대부분의 사람들이 가위를 자르는 도구로 인식하기 때문입니다.

하지만 하이퍼텍스트 링크 걸기를 보여주는 데 체인 링크(chain link)를 사용하는 것은 이해하기 어려울 수도 있습니다. 이 두 가지가 가까운 연관성이 없기 때문입니다. 앞서 언급했던 연구에 따르면 그들이 테스트한 사용 중 64.71%가 체인 아이콘이 하이퍼텍스트 링크 걸기 아이콘이라는 것을 이해하지 못했다고 합니다. 

테스트한 사용 중 100%가 이해했던, 굵게, 기울임 꼴, 밑줄 아이콘의 비주얼 모티프를 따라서 만든 아래의 아이콘을 이용하는 것이 하이퍼텍스트 링크 걸기 아이콘에 더 적합할 수도 있습니다. 하이퍼텍스트 링크 스타일에서 쓰인 ‘L’은 아이콘의 액션과 기능을 모두 표현해주는 이미지입니다. ‘L’ 자는 링크(link)에서 따온 글자입니다. 파란색에 밑줄도 쳐져있습니다. 

물론 밑줄 치는 아이콘에도 밑줄이 표시되어 있지만, 여기서는 ‘L’ 자를 이용하였습니다. 링크 아이콘과 밑줄 치기 아이콘을 구분해주는 것은 파란 색상과 특별한 문자(L)입니다. 또는 링크 아이콘을 한 픽셀 정도 더 두껍게 만들어서 보다 구분되게 만들 수도 있습니다.

원칙 8. 아이콘에 너무 많은 디테일을 주는 것은 피한다

아이콘 디자인에서 구체적인 디테일을 과도하게 추가하는 것은 사용자의 이해와 경험을 저하시킬 수 있습니다. 아이콘은 간단하고 명확해야 하며, 사용자가 즉시 인식할 수 있도록 디자인 되어야 합니다.

(1) 직관성 저하
아이콘이 지나치게 구체적이면 사용자가 그 의미를 즉각적으로 인식하기 어려워집니다. 아이콘은 간단하고 명확해야 하며, 복잡한 디테일은 오히려 사용자의 이해를 방해할 수 있습니다. 사용자는 아이콘의 의도를 파악하는 데 더 많은 시간을 소모하게 됩니다.

(2) 시각적 혼란
세부적인 디테일이 많아지면 아이콘이 원래의 기능을 잃고 사진처럼 보일 수 있습니다. 이는 사용자가 아이콘을 빠르게 스캔하고 인식하는 데 방해가 되어, 탐색의 효율성을 떨어뜨립니다.

(3) 일관성 결여
구체적인 디테일이 들어간 아이콘은 다른 아이콘들과의 스타일이나 형태에서 일관성을 잃을 수 있습니다. 이는 사용자가 다양한 아이콘 간의 관계를 이해하는 데 혼란을 초래하며, 전체적인 사용자 경험을 저하시킬 수 있습니다.

(4) 사용자 피로감
복잡한 아이콘은 시각적으로 부담이 될 수 있으며, 사용자가 앱을 사용할 때 피로감을 느낄 수 있습니다. 이는 사용자가 앱을 지속적으로 사용하는 데 부정적인 영향을 미칠 수 있습니다.

(5) 반응성 저하
모바일 기기에서는 아이콘이 작은 화면에서 사용되기 때문에, 지나치게 구체적인 디자인은 사용자가 아이콘을 클릭하거나 탭할 때 오작동을 유발할 수 있습니다. 이는 사용자에게 불편함을 초래하게 됩니다.

어떤 글에서는 ‘집’ 아이콘의 다양한 디테일 수준을 비교해 보았다고 합니다. 집이 너무 디테일하면 특정 주택 건물의 사진처럼 보이기 시작합니다. 하지만, 집의 일반적 개념에서 따온 핵심 특징(예: 지붕, 굴뚝, 문)만 보여주면, 보다 ‘집’ 모양 아이콘처럼 보이기 시작합니다.

따라서, 디테일에서 균형을 잡는 것은 아이콘을 보다 명확하고 직관적으로 만드는 데 중요합니다. 아이콘에 명확한 대상을 이용한다면, 대상의 몇 가지 공통된 특징만 선택하고, 나머지는 제거해야 합니다.

(1) 명확성 증대
아이콘이 명확한 대상을 기반으로 할 때, 그 대상의 핵심적인 특징만 선택하여 표현하면 사용자가 쉽게 이해할 수 있습니다. 불필요한 디테일을 제거함으로써 아이콘의 목적이 더 분명해지고, 사용자에게 직관적으로 다가갈 수 있습니다.

(2) 시각적 단순화
너무 많은 디테일은 아이콘을 복잡하게 만들어 시각적으로 혼란을 초래할 수 있습니다. 공통된 특징만을 강조함으로써 아이콘을 간결하게 유지하고, 사용자가 빠르게 인식할 수 있도록 합니다.

(3) 기억 용이성
단순하고 명확한 아이콘은 사용자가 쉽게 기억하고 인식할 수 있게 합니다. 핵심적인 특징만 남기면, 사용자는 아이콘을 보고 직관적으로 그 기능을 떠올릴 수 있습니다.

(4) 일관성 유지
여러 아이콘이 동일한 디자인 원칙에 따라 공통된 특징을 갖추면, 전체적인 디자인의 일관성이 유지됩니다. 이는 사용자가 다양한 아이콘 간의 관계를 쉽게 이해하도록 도와줍니다.

(5) 사용자 경험 향상
디테일의 균형을 맞추면 사용자는 아이콘을 사용할 때 더 나은 경험을 하게 됩니다. 즉각적으로 이해할 수 있는 아이콘은 탐색의 효율성을 높이고, 사용자가 원하는 기능을 쉽게 찾을 수 있도록 합니다.

원칙 9. 작은 아이콘에서는 3D 모양은 피한다

아이콘에 3D 효과나 무거운 그림자 효과를 주면 더 눈에 띄고, 현실적으로 보일 수도 있고, 시각적 커뮤니케이션을 강화할 수도 있습니다. 하지만 작은 아이콘에서도 이런 효과를 사용하게 되면 흐릿하고 헷갈려 보일 수 있습니다.

3D 효과는 크거나 중간 사이즈의 아이콘에 적합합니다. 사용자가 그 효과를 알아볼 수 있기 때문입니다. 하지만, 아이콘이 작아지면은 3D 효과의 정확도는 흐려지고 사용는 아이콘을 낯선 각도에서 보고 있는 자신을 발견하게 됩니다. 아이콘이 작아지면, 평평한 아이콘을 사용하여 유저가 아이콘을 분리된 모양으로 인식하지 않게 만들어야 합니다.

진하게 드리워진 그림자 효과를 작은 아이콘에서 사용하게 되면 유저가 헷갈릴 수 있습니다. 그림자 효과가 너무 진해지면, 아이콘이 비현실적이거나 칙칙해 보입니다. 만일 아이콘에 그림자가 필요하다면, 그림자 크기를 줄이거나 타이트하게 만들어야 합니다. 이렇게 하면 그림자가 아이콘을 약간 강화해 주면서도 외곽선과 모양을 뭉개지 않도록 만들 수 있습니다.

결론

유저 인터페이스에서 아이콘을 이용하면 많은 이점이 있습니다. 컨트롤을 넣을 공간을 절약해주고 어떤 문화권에서건 이해할 수 있게 만들어 줍니다. 하지만 무엇보다도 아이콘은 인터페이스 액션을 보다 쉽게 찾을 수 있도록 만들어줍니다. 아이콘이 명확하고 직관적이지 않으면 유저는 이 중 어떤 장점도 경험할 수 없을 겁니다.

위의 9가지 가이드라인은 아이콘을 어떻게 디자인하고 보여줄지 이해하는데 중요합니다. 이 가이드를 따르되, 여기에 국한되진 말아야 합니다.