GN⁺: 텍스트 레이블이 필요한 이유 (아이콘만으로는 충분하지 않음)
(chrbutler.com)- 텍스트 레이블(text labels) 을 강력히 지지함
- 현대 인터페이스는 아이콘이 과도하게 많아 사용자가 아이콘의 의미를 해석하는 데 너무 많은 인지 자원을 소모하게 됨
- 이로 인해 작업 속도가 느려지고, 비효율적인 경험을 반복적으로 겪게 됨
- 아이콘만으로 의미를 전달하는 것은 쉽지 않으며, 대부분의 아이콘은 텍스트 레이블 없이는 불완전함
# 아이콘이 만드는 문제점
1. 대부분의 아이콘은 즉각적으로 명확한 의미를 전달하지 못함
- “좋은 아이콘”이라면 의미를 충분히 전달할 수 있다는 주장이 있지만, 현실적으로 어떤 아이콘이든 해석하는 데 인지적 부담이 따름
- 예를 들어, "쓰레기통 아이콘"은 비교적 명확하게 삭제(Delete)를 의미하지만, "연필 아이콘"은 애매함
- 글쓰기? 수정? 그리기? 생성?
- 문맥(Context)이 의미를 보완할 수 있지만, 이 역시 추가적인 인지적 부담을 요구함
2. 인터페이스 내 아이콘이 많아질수록 탐색이 어려워짐
- 기능이 많아질수록 아이콘만으로 차별화하기가 어려움.
- 5-7개 기능까지는 아이콘으로 구별 가능하지만, 15-20개가 되면 저장/공유/편집/생성 등의 유사한 아이콘이 서로 헷갈릴 가능성이 큼.
- 비슷한 기능을 가진 아이콘 간의 차별성이 약해지면서 가독성이 떨어짐.
3. 아이콘은 특정 인터페이스 안에서만 의미가 통함
- 사용자는 다양한 인터페이스 환경(웹 브라우저, 운영체제, 앱 등) 을 오가며 사용해야 함
- 한 인터페이스에서 사용되는 아이콘이 다른 환경에서 전혀 다른 의미를 가질 수도 있음
- 특히 표준 아이콘 세트(Google Material Design 등) 를 사용할 때, 동일한 아이콘이 다른 의미로 사용되면 혼란이 가중됨
# 텍스트 레이블이 인터페이스에 주는 이점
1. 텍스트만으로도 더 효율적임
- 우리의 뇌는 단어를 빠르게 인식하도록 최적화되어 있음.
- 친숙한 단어는 문자를 하나하나 읽지 않아도 즉시 이해 가능
- 반면, 대부분의 아이콘은 새로운 시각적 언어를 학습해야 하므로 더 많은 노력이 필요함
- 텍스트 목록은 위에서 아래로 읽으면 되지만, 아이콘만 있는 경우 가로/세로로 번갈아가며 스캔해야 함.
- 특히 모바일 환경에서 비슷한 모양의 아이콘이 나열되면 시각적 혼란이 커짐.
2. 텍스트가 아이콘을 더 효율적으로 만듦
- 텍스트 레이블이 추가되면:
- 아이콘의 의미가 더 명확해지고 탐색이 빨라짐
- 디자이너가 아이콘 하나만으로 모든 의미를 전달해야 하는 부담이 줄어듦.
3. 아이콘은 텍스트 중심 인터페이스에서 중요한 시각적 요소가 될 수 있음
- 아이콘이 시각적 구분점(visual anchor) 역할을 하며, 텍스트와 결합했을 때 가장 효과적인 인터페이스를 제공함
아이콘과 텍스트의 균형 찾기
- 아이콘과 텍스트 레이블을 선택할 때, 사용자의 인지 부담을 고려해야 함.
- 아이콘만으로 구성된 UI는 처음에는 깔끔해 보일 수 있지만, 오히려 사용자에게 해석의 부담을 주어 비효율적일 수 있음
- 완벽한 아이콘을 찾는 것이 해답이 아님.
→ 아이콘과 텍스트를 조합하여 최적의 경험을 제공하는 것이 중요함.
# 최적의 UI 디자인을 위한 핵심 원칙
- 아이콘만으로 모든 것을 표현하려 하지 말 것.
- 텍스트 레이블을 추가하면 가독성과 접근성이 향상됨.
- 아이콘과 텍스트는 경쟁 관계가 아니라 상호 보완적인 요소임.
- 앱이나 웹사이트가 전체적인 디지털 환경에서 어떻게 사용되는지를 고려할 것.
- 사용자가 인터페이스를 ‘해석’하는 것이 아니라, ‘즉시 이해’할 수 있도록 만들 것.
결론: "보기 좋은 UI"가 아니라 "이해하기 쉬운 UI"가 중요하다
- 새로운 아이콘을 만들거나, 텍스트 레이블을 제거하려는 유혹이 생길 때마다 다시 생각해 보자.
- 진정으로 깔끔한 디자인은 "단순해 보이는 것"이 아니라, "이해하기 쉬운 것"이다.
저희는 아이콘만 사용하는 상황을 극도로 제한합니다.
- 자명한 아이콘을 자명한 위치에 넣는 경우 (ChevronLeft를 좌상단에, Vertical3Dots를 우상단에)
- 해당 아이콘이 출력되기 위해서는 사용자의 인터랙션이 요구되고, 또 그 인터랙션 영역에 동일한 아이콘이 라벨과 함께 출력되는 경우 (알림끄기 액션 시 해당 요소에 BellOff 아이콘)
- 자명한 수치 데이터가 뒤따르는 경우 (좋아요, 싫어요, 시간)
- 해당 아이콘 또는 그 묶음을 설명하는 툴팁, 튜토리얼 등을 통해 아이콘의 용도를 설명하는 기능이 포함된 경우
** 고객이 요청하는 경우ㅋㅋ;
Hacker News 의견
- 균형이 중요함. 메뉴에 일부 아이콘이 있으면 고정점이 되어 메뉴에 독특한 "형태"를 제공함
- 모든 메뉴 항목에 아이콘이 있으면 혼란스러움
- 1990년대부터 UI 연구는 라벨이 아이콘보다 인식에 더 좋다는 것을 보여줌
- 현재는 더 나은 디스플레이 기술이 있지만, 디자인 트렌드와 현지화의 게으름 때문에 텍스트를 제거하려는 경향이 있음
- 사용성 지침이 있어도 무시됨. UI 디자인이 감각 기반 직업이 되었기 때문임
- 예를 들어, Apple의 iOS 인간 인터페이스 지침은 탭 바에 아이콘과 텍스트 라벨을 포함해야 한다고 명확히 명시함
- 많은 디자이너가 이러한 지침을 읽지 않음
- 많은 연구가 유럽과 미국에서 다르게 재현될 것이라는 추측이 있음
- 미국의 도로 표지판은 주로 텍스트로 구성됨
- 유럽은 작은 국가들이 많아 픽토그램을 사용함
- 유럽인은 미국인보다 픽토그램에서 의미를 더 잘 파악함
- 대부분의 세계는 오래전에 음성 문자로 전환함
- 픽토그램보다 음성 문자가 우월함
- 아이콘은 선택 사항이고 텍스트는 필수임
- 특정 주제에 대해 바쁠 때 다음 날 HN에 나타나는 경우가 많음
- 27개월 된 아들을 위해 작은 드로잉 앱을 만들었는데, 처음에는 아이콘만 사용했지만 혼란스러워함
- 텍스트 라벨을 추가하니 시각적 혼란이 줄어들었음
- 아이콘은 괜찮지만 마우스를 올렸을 때 툴팁이나 대체 텍스트 스타일 라벨이 없으면 좌절감을 느낌
- 새로운 소프트웨어 학습이 느려지고 문서나 비디오 튜토리얼을 찾아야 함
- UX Myth — 아이콘이 사용성을 향상시킨다는 신화
- 아이콘과 그 확산을 항상 싫어했음
- 텍스트를 옹호하지만 잘 받아들여지지 않음
- 많은 사람들이 느린 독자라는 새로운 가설을 세움
- 메뉴의 모든 라벨을 읽는 데 약 1초가 걸림
- 아이콘보다 텍스트를 해석하는 것이 더 빠른 경우가 없음
- 느린 독자를 고려해야 한다는 점에 동의하게 됨
- 텍스트를 비어 있음으로부터 방어하고 싶음
- 텍스트 라벨이 작고 주변에 충분한 공간이 있음
- 텍스트를 강조하고 시각적 스캔을 쉽게 할 수 있음
- 궁극적인 해결책은 사용자가 디자이너의 실수를 무시할 수 있도록 하는 것임
- 텍스트 인식이 아이콘 인식보다 쉽다는 점을 강조함
- 아이콘은 공간을 덜 차지하고 효율성이 높음
- "그림은 천 마디 말의 가치가 있지만, 종종 하나면 충분함"이라는 표현을 들음