아이콘 설계 UI 가이드라인 9가지
UX 디자인 배우기 #90
Today UX 아티클
UX Movement에 올라온 Anthony의 9 Guidelines for Clear and Intuitive Icons을 전문 번역한 글입니다.
아이콘의 의미를 알아내려고 고민했던 적이 있으십니까? 유저는 익숙하지 않은 아이콘을 볼 때면 언제나 고민에 빠집니다. 바로 이것이 아이콘을 명확하고 직관적으로 만드는 것이 중요한 이유입니다. 다음 가이드라인을 따르면 유저가 머리를 긁적이지 않도록 아이콘을 만들 수 있습니다.
1. 공간이 제한되지 않았다면 아이콘에 레이블을 붙인다
여러분이 이용하는 아이콘이 보편적으로 알려진 아이콘(예: 재생, 프린트, 닫기, 도움말)이 아니라면, 언제나 레이블을 붙여야 합니다.
한 가지 예외 상황은 공간이 제한적인 경우뿐입니다. 많은 아이콘을 가지고 있거나 컨트롤 영역이 모바일 디스플레이 같은 좁은 공간인 경우에 이런 상황이 발생합니다. 그런 경우라면, 마우스를 올렸을 때 레이블이 보이도록 만드는 툴팁(tooltips)을 보여줍니다. 하지만 모바일에서 아이콘을 보여줄 때는 호버 효과를 줄 수 없기 때문에 사실 툴팁을 이용할 수 없습니다. 바로 이것이 모바일 화면에서 쓰이는 아이콘의 직관성이 매우 중요한 이유입니다.
한 번에 여러 아이콘이 묶여서 보여지면 레이블을 붙일 공간이 없습니다. 툴팁은 혼선을 줄이는 데 도움이 됩니다.2. 아이콘은 행동과 대상을 모두 보여준다.
아이콘을 최대한 직관적으로 만들기 위해서는, 언제나 아이콘이 행동(action)과 대상(object)을 모두 보여주도록 만들어야 합니다. 먼저, 거의 모든 유저가 쉽게 이해할 수 있는 명확한 대상을 골라야 합니다. 그다음에 아이콘이 하는 행동을 잘 표현하는 방식으로 그 대상을 디자인해야 합니다.
아래 보이는 종이비행기는 ‘이메일 보내기’를 나타내는 아이콘으로, 아이콘을 영리하게 만든 사례입니다. 종이 자체는 이메일을 표현하는 것이고, 비행기 모양으로 접힌 종이는 보내는 행동을 표현하는 것입니다.
종이 비행기 아이콘은 명확한 행동과 대상을 보여준다.3. 비슷한 아이콘끼리 묶는다
비슷한 기능을 하는 아이콘끼리는 묶습니다. 이렇게 하면 유저가 태스크를 완료하는 데 필요한 모든 옵션을 쉽고 빠르게 찾을 수 있습니다. 비슷한 아이콘끼리 묶어두면 기능을 명확히 보여주기 위해 각 그룹별로 레이블을 붙이면 됩니다. 이렇게 하면 아이콘을 쉽게 훑어볼 수 있을 뿐만 아니라 유저가 모든 아이콘의 기능을 하나씩이 아닌 묶음 별로 이해하는데 도움이 됩니다.
비슷한 기능을 공유하는 아이콘은 같이 묶어서 레이블을 붙인다.4. 아이콘 순서와 배치에 일관성을 지킨다
유저는 아이콘의 기능을 이해하는 데 단순히 그 모양에만 의존하지 않습니다. 아이콘의 순서와 배치에도 의지하여 기능을 이해합니다. 한 연구에 따르면, 아이콘의 모양을 바꾸는 건 유저가 적응하기 쉽지만, 아이콘의 위치를 바꾸는 건 유저가 훨씬 더 적응하기 어렵다고 합니다.
이러한 결과는 “아이콘의 위치가 시각적 이미지보다 더 중요하고, 사람들은 어디에 무엇이 있는지를 기억하지 어떻게 생겼는지를 기억하는 것이 아니다”는 것을 뜻합니다. 아이콘 위치의 변화는 유저를 어질어질하게 만들 수 있습니다. 때문에 아이콘에게 가장 이상적인 위치를 찾고, 인터페이스를 다시 디자인할 때도 그 위치를 유지해야 합니다.
아이콘 순서와 배치는 디자인이 바뀌어도 일관적이다.5. 아이콘에는 일반적인 비주얼 모티프(common visual motif)를 사용한다
공통된 비주얼 모티프를 공유한 아이콘은 모양과 느낌이 더 비슷해집니다. 만일 인터페이스에 공통된 비주얼 모티프를 공유하는 한 세트의 아이콘을 넣는다면, 유저가 공유된 스타일을 보고도 어떤 아이콘이 서로 관련이 있는지 없는지 알 수 있을 겁니다. 이렇게 하면 어떤 아이콘이 비슷한 기능을 하는지 이해하는 데 도움이 됩니다. 한 세트의 아이콘에서 공통된 비주얼 모티프를 찾는다면, 모든 레벨에서 그 모티프를 일관되게 이용하는 것이 중요합니다.
아래 사례를 보면 비주얼 모티프의 일관성을 지키지 않은 취소선 아이콘(strikethrough icon)이 나옵니다. 대부분의 편집기에서는 ‘굵게’ 아이콘은 두꺼운 ‘B’ 자로, ‘기울임 꼴’ 아이콘은 기울어진 ‘I’ 자로, ‘밑줄’ 아이콘은 밑줄 쳐진 ‘U’ 자로 표현하고 있습니다. 하지만 여기서 취소선 아이콘에는 ‘S’ 자를 쓰는 대신 ABC를 이용하여 실수를 범했습니다.
이는 다른 편집 옵션과 시각적으로 일관되지 않게 만든 사례로, 유저를 헷갈리게 만들 수 있습니다. 사실, 한 연구에 따르면, 테스트했던 유저 전부가 굵게, 기울임 꼴, 밑줄 아이콘은 이해했지만, 54.55%만 취소선 아이콘을 이해했다고 합니다. 비주얼 모티프가 약간 다른 것 치고는 엄청난 차이입니다.
일관된 비주얼 모티프를 따른 또 다른 아이콘 사례. 하지만 이 취소선 아이콘(strikethrough icon)은 ‘S’자를 사용하지 않아 일관성이 깨졌다.6. 일반적인 비주얼 모티프를 공유하는 아이콘은 느낌과 모양이 더 비슷하게 느껴집니다
추상적인 액션보다는 명확한 액션에 아이콘을 사용하는 것이 좋습니다. 명확한 액션에는 액션을 공통적으로 대표하는 명확한 작업 대상이 있기 때문입니다. 추상적인 액션은 액션을 공통적으로 연상할 수 있는 대상을 생각해 내려고 애써야 합니다. 마침내 한 가지를 생각해내더라도, 유저가 다르게 해석할 수 있다는 리스크가 존재합니다.
앞서 언급한 연구결과에 따르면, 그들이 테스트한 유저의 반 이상이 ‘작업 취소(undo)’와 ‘재작업(redo)’ 아이콘을 이해하지 못했다고 합니다. 이 추상적인 액션에는 왼쪽 오른쪽 화살표가 사용되었습니다. 화살표 아이콘은 유저가 여러 인터페이스에서 다양한 액션을 수행하는데 이용했을 것이기 때문에 유저에게 여러 의미를 지닙니다.
이런 상황에서는 화살표만 이용하는 대신에, ‘작업 취소’과 ‘재작업’ 문구를 줄인 ‘취소(un)’와 ‘다시(re)’라는 문구를 화살표 밑에 작게 붙이는 것이 좋습니다. 화살표만 있으면 여러 의미를 가질 수 있습니다. 하지만 액션을 표현하는 독특한 요소를 더해주면 아이콘을 보다 명확하고 직관적으로 만들 수 있습니다.
화살표만으로는 여러 의미를 가질 수 있다. ‘Un’이나 ‘Re’라는 문구를 더해주면 유저가 특정 액션을 생각할 수 있습니다.7. 지나치게 비유적인 아이콘 이미지 사용은 피한다
해당 액션을 대표하는 명확한 이미지가 없는 경우에는 아이콘에 비유적 의미를 담은 이미지를 사용하는 경향이 있습니다. 비유적 이미지가 해당 액션을 제대로 표현하지 못하는 경우에는 역효과를 낼 수도 있습니다.
‘자르기’라는 액션을 표현하는 데 가위 모양 이미지를 사용하는 건 이해하기 쉽습니다. 대부분의 사람들이 가위를 자르는 도구로 인식하기 때문입니다. 하지만 하이퍼텍스트 링크 걸기를 보여주는 데 체인링크(chain link)를 사용하는 것은 이해하기 어려울 수도 있습니다. 이 두 가지가 가까운 연관성이 없기 때문입니다. 앞서 언급했던 연구에 따르면 그들이 테스트한 유저 중 64.71%가 체인 아이콘이 하이퍼텍스트 링크 걸기 아이콘이라는 것을 이해하지 못했다고 합니다.
테스트한 유저 중 100%가 이해했던, 굵게, 기울임 꼴, 밑줄 아이콘의 비주얼 모티프를 따라서 만든 아래의 아이콘을 이용하는 것이 하이퍼텍스트 링크 걸기 아이콘에 더 적합할 수도 있습니다. 하이퍼텍스트 링크 스타일에서 쓰인 ‘L’은 아이콘의 액션과 기능을 모두 표현해주는 이미지입니다. ‘L’ 자는 링크(link)에서 따온 글자입니다. 파란색에 밑줄도 쳐져있습니다.
물론 밑줄 치는 아이콘에도 밑줄이 표시되어 있지만, 여기서는 ‘L’ 자를 이용하였습니다. 링크 아이콘과 밑줄 치기 아이콘을 구분해주는 것은 파란 색상과 특별한 문자(L)입니다. 또는 링크 아이콘을 한 픽셀 정도 더 두껍게 만들어서 보다 구분되게 만들 수도 있습니다.
사람들은 체인 링크를 보고는 웹 링크를 연상하지 않습는다. 하지만 파란 색과 밑줄을 보고는 웹 링크를 연상합니다.8. 아이콘에 너무 많은 디테일을 주는 것은 피한다
대부분의 디자이너는 아이콘을 더 예쁘게 만들고 싶어 합니다. 하지만 어떤 디자이너는 적정선을 넘어서 아이콘에 너무 구체적인 디테일을 주려고 합니다. 때로는 아이콘이 너무 구체적이어서 아이콘이라기보단 사진 같아 보이기도 합니다. 아이콘은 너무 구체적으로 만들면 유저가 아이콘의 일반적인 의미를 이해하는 것을 방해할 수 있습니다.
어떤 글에서는 ‘집’ 아이콘의 다양한 디테일 수준을 비교해 보았다고 합니다. 집이 너무 디테일하면 특정 주택 건물의 사진처럼 보이기 시작합니다. 하지만, 집의 일반적 개념에서 따온 핵심 특징(예: 지붕, 굴뚝, 문)만 보여주면, 보다 ‘집’ 모양 아이콘처럼 보이기 시작합니다.
디테일에서 균형을 잡는 것은 아이콘을 보다 명확하고 직관적으로 만드는 데 중요합니다. 아이콘에 명확한 대상을 이용한다면, 대상의 몇 가지 공통된 특징만 선택하고, 나머지는 제거해야 합니다.
유저에게 해당 아이콘이 ‘집’을 의미한다는 것을 전달하는 데는 지붕, 굴뚝, 문이라는 특징만 있으면 됩니다9. 작은 아이콘에서는 3D 모양은 피한다
아이콘에 3D 효과나 무거운 그림자 효과를 주면 더 눈에 띄고, 현실적으로 보일 수도 있고, 시각적 커뮤니케이션을 강화할 수도 있습니다. 하지만 작은 아이콘에서도 이런 효과를 사용하게 되면 흐릿하고 헷갈려 보일 수 있습니다.
3D 효과는 크거나 중간 사이즈의 아이콘에 적합합니다. 유저가 그 효과를 알아볼 수 있기 때문입니다. 하지만, 아이콘이 작아지면은 3D 효과의 정확도는 흐려지고 유저는 아이콘을 낯선 각도에서 보고 있는 자신을 발견하게 됩니다. 아이콘이 작아지면, 평평한 아이콘을 사용하여 유저가 아이콘을 분리된 모양으로 인식하지 않게 만들어야 합니다.
진하게 드리워진 그림자 효과를 작은 아이콘에서 사용하게 되면 유저가 헷갈릴 수 있습니다. 그림자 효과가 너무 진해지면, 아이콘이 비현실적이거나 칙칙해 보입니다. 만일 아이콘에 그림자가 필요하다면, 그림자 크기를 줄이거나 타이트하게 만들어야 합니다. 이렇게 하면 그림자가 아이콘을 약간 강화해 주면서도 외곽선과 모양을 뭉개지 않도록 만들 수 있습니다.
작은 사이트에서는, 3D 효과나 그림자 효과를 주면 아이콘이 덜 예뻐 보이거나 헷갈려 보입니다결론
유저 인터페이스에서 아이콘을 이용하면 많은 이점이 있습니다. 컨트롤을 넣을 공간을 절약해주고 어떤 문화권에서건 이해할 수 있게 만들어 줍니다. 하지만 무엇보다도 아이콘은 인터페이스 액션을 보다 쉽게 찾을 수 있도록 만들어줍니다. 아이콘이 명확하고 직관적이지 않으면 유저는 이 중 어떤 장점도 경험할 수 없을 겁니다.
위의 9가지 가이드라인은 아이콘을 어떻게 디자인하고 보여줄지 이해하는데 중요합니다. 이 가이드를 따르되, 여기에 국한되진 말아야 합니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
https://www.inflearn.com/users/196290
