아이콘을 어떻게 테스트해야 하는지, 언제 텍스트 라벨을 사용해야 하는지, 그리고 언제 아이콘과 텍스트를 함께 사용해야 하는지에 대한 실용 가이드.
왜 텍스트 라벨이 필요한가?
1. 보편적으로 이해되는 아이콘은 매우 적다
예시: 🏠 홈(Home) 🔍 검색(Search) ✏️ 편집(Edit) 🗑️ 삭제(Delete) 📅 일정(Calendar)
이 정도를 제외하면 대부분의 아이콘은 맥락을 통해 해석해야 한다.
✅ 대부분의 아이콘은 모호하며 상황에 따라 의미를 해석해야 한다.
✅ 추상적인 기능은 복잡한 개념에 의존하는 경우가 많다.
✅ 비슷한 기능들이 비슷한 아이콘으로 표현되는 경우가 많다.
예시:
생성(Create) vs 편집(Edit)
저장(Save) vs 보관(Archive)
업로드(Upload) vs 다운로드(Download)
2. 사람은 아이콘보다 텍스트를 더 빨리 읽는다
🤔 10개의 아이콘을 훑어보는 것보다 10개의 단어를 읽는 것이 더 빠르고 쉽다.
🤔 시력이 좋지 않은 사용자는 아이콘의 세부 형태를 구분하기 어렵다.
✅ 스크린리더 사용자는 아이콘을 인식하기 위해 텍스트 라벨이 필요하다.
✅ 아이콘의 의미는 문화권에 따라 크게 달라질 수 있다.
예시:
👕 = 중국에서는 "사용자 설정(Customization)" 의미
🍔 = 서구권에서는 "메뉴(Menu)"
🧭 = 중국에서는 "메뉴(Menu)"
3. 툴팁에 의존하지 말라
🚫 아이콘 설명을 위해 툴팁(tooltip)이나 마우스 오버(hover)에 의존하지 말라.
🤔 사용자는 시간이 지나면서 라벨 없는 아이콘을 학습하기도 하지만, 다시 잊어버리기도 한다.
✅ 내비게이션 메뉴와 주요 액션은 "아이콘 + 텍스트" 조합이 가장 효과적이다.
✅ 아이콘이 올바르게 인식되고 해석되는지 반드시 테스트해야 한다.
✅ 가능하면 아이콘과 텍스트를 함께 사용하라. 특히 복잡한 개념일수록 그렇다.
아이콘만 사용하는 문제점
아이콘의 가장 큰 장점 중 하나는 화면 공간을 절약해 준다는 것이다.
하지만 그 대가로 사용자는 다음과 같은 문제를 겪는다.
혼란(Confusion)
메뉴를 이리저리 탐색하는 행동(Zig-zagging)
원하는 기능을 찾기 위해 여러 영역을 오가는 행동
특히 의미가 툴팁이나 마우스 오버로만 제공될 때 이런 문제가 심해진다.
사람들이 실제로 기억하는 것은?
우리는 사용자가 아이콘을 기억하고 나중에도 알아볼 것이라고 생각한다.
하지만 실제 사용성 테스트에서는 다른 결과가 자주 나타난다.
많은 사용자는
아이콘도 기억하지 않고
텍스트도 기억하지 않으며
오히려
📍 "그 기능이 화면 어디에 있었는가"
를 기억하는 경우가 많다.
아이콘 위치를 자주 바꾸지 말라
사용 빈도에 따라 아이콘 위치를 계속 변경하지 말라.
만약 메뉴에 텍스트 라벨을 넣기 어렵다면,
다음과 같은 위치에 텍스트를 표시하는 방법을 고려하라.
데이터 테이블 옆
차트 옆
대시보드 영역
그리고
칩(Chip)
액션 버튼(Action Button)
형태로 제공하는 것도 좋은 방법이다.
아이콘 테스트 방법
1. 연상 테스트 (Association)
아이콘 하나를 보여주고
4개의 의미 중 하나를 선택하게 한다.
2. 역방향 테스트 (Reverse)
기능 설명을 보여주고
4개의 아이콘 중 맞는 것을 선택하게 한다.
3. 회상 테스트 (Recall)
아이콘을 잠깐 보여준 뒤
어떤 기능인지 설명하게 한다.
4. 자유 응답 테스트 (Free Response)
아이콘을 보여주고
연상되는 단어를 자유롭게 말하게 한다.
5. 설명 테스트 (Recounting)
사용자가 친구에게 설명하듯
그 아이콘을 묘사하게 한다.
6. 맥락 테스트 (In-context)
실제 UI 화면의 일부와 함께 아이콘을 테스트한다.
7. 찾기 시간 테스트 (Time to Locate)
아이콘만 보고 특정 기능을 얼마나 빨리 찾는지 측정한다.
8. 바나나 테스트 (Banana Testing)
모든 텍스트 라벨을 "Banana(바나나)"로 바꾼 뒤
사용자에게 기능을 설명해 보라고 한다.
텍스트가 없어도 기능을 이해할 수 있는지 검증하는 방법이다.
결론
아이콘 사용이 애매하다면 텍스트 라벨을 추가하라.
보기에는 덜 세련되어 보일 수 있지만,
사용자가 기능을 빠르게 이해하고 올바르게 사용할 수 있게 만드는 경우가 훨씬 많다.
즉,
UX 관점의 우선순위
우선순위
방법
평가
1
아이콘 + 텍스트
★★★★★
2
텍스트만
★★★★☆
3
아이콘만
★★☆☆☆
특히 기업용(B2B) 소프트웨어, ERP, 금융, 의료, 제조, 분석 대시보드 같은 복잡한 시스템에서는 "아이콘 + 텍스트"가 사실상 정답에 가깝다는 것이 이 글의 핵심 메시지다.
source : https://www.linkedin.com/posts/vitalyfriedman_do-icons-need-text-labels-yes-practical-share-7470012142319181824-U_dO/?utm_source=share&utm_medium=member_android&rcm=ACoAAAETYhYB7JiAiqP9yTX7xn44bdAMgvUqIjg
