▲

메뉴 곳곳에 퍼진 아이콘 — 도와주세요

 (blog.jim-nielsen.com)
1P by GN⁺ 4일전 | ★ favorite | 댓글 3개
  • 메뉴 항목마다 아이콘을 기본으로 넣는 디자인 관행이 확산되고 있으며, 이는 불필요한 시각적 잡음을 유발함
  • Google Sheets와 macOS Tahoe 버전의 메뉴 시스템이 대표적 사례로, 거의 모든 메뉴 항목에 아이콘이 추가됨
  • 일부 메뉴에서는 아이콘의 유무 기준이 불명확하고, 토글 표시와 겹치며 정렬 혼란을 일으킴
  • 반면 Finder의 창 정렬 메뉴처럼 시각적 이해를 돕는 아이콘은 유용해서, 아이콘 사용의 맥락적 판단이 중요함
  • Apple이 과거 자체 인터페이스 가이드라인에서 “임의의 아이콘 사용을 피하라”고 했던 원칙을 버린 점이 문제

메뉴 아이콘 남용에 대한 비판

  • 모든 메뉴 항목에 아이콘을 붙이는 방식이 기본값으로 확산되며 인터페이스가 지나치게 복잡해지는 현상이 나타나고 있음
    • Google Sheets의 “File”, “Edit”, “View” 메뉴처럼 모든 항목에 아이콘이 붙음
    • 이러한 접근은 “공간을 채우기 위한 아이콘”을 만드는 습관으로 이어짐
    • 각 메뉴의 맥락과 인지적 부담(cognitive load) 을 고려하지 않은 단순한 템플릿화에 불과
  • 아이콘 사용은 맥락에 따라 신중히 선택되어야 함
    • 아이콘이 실제로 사용성을 높이는지, 아니면 혼란을 주는지를 판단해야 함
    • 단순히 “모든 메뉴에 아이콘을 넣자”는 접근은 사고의 결여

macOS Tahoe의 변화

  • macOS는 오랫동안 이러한 방식에서 거리를 두었으나 macOS Tahoe에서 메뉴 전반에 아이콘이 도입됨
    • Apple 메뉴, Safari의 “Safari”, “File”, “View” 메뉴 등에서 일부 항목만 아이콘이 표시됨
    • “Settings”에는 아이콘이 있으나 “Privacy Report”에는 없는 등 일관성이 결여됨
    • Safari File 메뉴에서는 일부 그룹만 아이콘과 들여쓰기가 적용되고 다른 그룹은 그렇지 않음
  • “View” 메뉴에서는 체크 표시(토글) 와 아이콘이 동시에 존재해 정렬이 어긋남
    • Mail 앱의 “View” 메뉴에서도 텍스트, 토글, 아이콘이 혼합되어 복잡한 시각 구조 형성
    • 아이콘의 존재 이유나 선택 기준이 명확하지 않음

아이콘이 유용한 예외 사례

  • Finder의 창 정렬 메뉴처럼 상징을 통해 즉각적으로 공간적 배치를 이해할 수 있는 경우는 아이콘이 큰 효율을 제공함
    • “Top Left”, “Bottom & Top”, “Quarters” 등의 텍스트보다 시각적 배치 아이콘이 즉각적인 이해 제공
    • 이러한 경우는 아이콘이 인지 효율을 높이는 긍정적 사용 사례임
  • 즉, 아이콘이 “기본값”이 아닌 상황별 선택이 되어야 함

Apple의 가이드라인과의 모순

  • Apple의 992·2005·2020년 Human Interface Guidelines에서는 “임의의 아이콘을 메뉴에 사용하지 말라”고 명시
    • “시각적 혼란을 초래하고 사용자를 혼란스럽게 할 수 있다”는 경고 포함
    • 당시 가이드라인의 ‘하지 말아야 할 예시’가 현재 macOS Tahoe 메뉴와 유사함
    • Apple이 자사 원칙을 스스로 위반한 셈

결론

  • 메뉴 곳곳에 등장하는 과도한 아이콘이 시각적 소음을 유발함
    • Apple이 “모든 메뉴에 아이콘을 넣는” 방향으로 전환하면서, 아이콘 최소화 설득이 어려워짐
    • “정당한 이유가 없다면 기본값은 아이콘 없음이어함”
  • 현재는 아이콘이 메뉴를 뒤덮은 시대라며, 풍자적으로 “도와주세요” 라고 표현
▲
wedding 2일전  [-]

비언어적 정보라 좋은거 같기도 하면서도..
ai가 만들어내는 문장 같은 느낌같기도 하고..

답변달기
▲
ng0301 3일전  [-]

오히려 자주 사용하는 애플리케이션일수록 텍스트보다 그림이나 색을 찾게 됩니다. 화면 크기에 따라 병행 표기할지 아이콘만 쓸지는 다르겠지만, 대체로는 있는 편이 좋다고 생각합니다.

답변달기
▲
GN⁺ 4일전  [-]
Hacker News 의견

  • 접근성과 현지화 관점에서 보면, 아이콘+텍스트 조합이 가장 이상적임
    단순히 공간을 채우기 위한 아이콘 사용은 문제지만, 아이콘과 텍스트가 불일치하면 오히려 인지 부하가 커짐
    텍스트를 가린 실험에서도 아이콘+텍스트 조합이 가장 효과적이었음
    아이콘을 일관되게 사용하는 것이 시각적·언어적 사용자 모두에게 유리하며, 뷰포트가 좁은 환경에서도 도움이 됨
    결국 문제는 “디자이너 비용을 들일 의지가 있느냐”의 문제라고 생각함

    • 3년 전 뇌졸중을 겪은 이후로 접근성의 중요성을 체감하고 있음
      텍스트를 읽기 어려울 때 아이콘이 큰 도움이 됨
    • 문맹이거나 읽기 속도가 느린 사람들에게 아이콘은 매우 중요함
      미국 인구의 약 20%가 문맹인데, 이들은 아이콘과 버튼 위치를 기억하며 기술을 사용함
    • 아이콘이 있으면 뇌가 시각적으로 빠르게 검색·필터링할 수 있어, 텍스트만 있을 때보다 훨씬 효율적임
      아이콘만 있을 때는 의미 파악이 어렵지만, 둘 다 있으면 전체 뇌가 작동하는 느낌임

  • 메뉴에 아이콘이 있는 이유는 툴바의 동일 기능과 시각적 매칭을 위해서라고 생각함
    메뉴에 아이콘이 없으면 툴바에도 없다는 신호로 작용함

    • Microsoft Office 97에서 처음으로 메뉴 옆에 아이콘이 붙은 걸 봤음
      메뉴와 툴바가 모두 커스터마이징 가능했고, 각 항목은 아이콘+라벨로 구성되어 있었음
    • 예전에는 메뉴 항목을 드래그해서 툴바로 옮길 수 있는 프로그램도 있었음

  • 요즘 아이콘 팩(Font Awesome, Material Icons 등) 이 너무 많아, 개발자들이 “그나마 비슷한” 아이콘을 고르는 경향이 있음
    우리 팀도 가끔 맞춤 아이콘을 만들지만, 비용이 많이 들어서 대부분은 구글의 방대한 라이브러리에서 적당한 걸 찾는 수준임

  • “아이콘을 추가할 이유가 없다면 기본적으로 넣지 말자”는 주장에 대해, 시각적 기억이 강한 사용자는 자주 쓰는 메뉴의 아이콘을 기억해 더 빨리 찾을 수 있다고 생각함
    나는 개인적으로 단축키를 기억하는 편이라 아이콘보다는 핫키 충돌이 더 신경 쓰임

    • 아이콘이 시각적으로 구분되고 의미가 명확하다면 좋은 아이디어라고 생각함
      예전 Gmail에서 링크와 첨부파일 아이콘이 거의 같아서 자주 헷갈렸는데, 최근에 종이클립 모양으로 바뀌어 훨씬 나아졌음
    • MS Office 97 시절부터 메뉴에 툴바 아이콘을 넣어, 기능을 다른 방식으로도 사용할 수 있음을 발견하게 해주는 역할을 했음

  • 예시에서 가장 거슬린 건 메뉴 섹션마다 들여쓰기 불일치였음
    어떤 항목에만 아이콘이 있으면 그 줄만 들여쓰기 되고, 없으면 안 되는데, 체크 표시가 있을 땐 전체가 들여쓰기 되는 불균형함이 있음
    Apple이라면 이런 부분을 더 세련되게 처리했을 거라 기대했는데 아쉬움

    • 스티브 잡스였다면 그 메뉴를 디자인한 사람의 노트북을 창밖으로 던졌을 것 같음

  • 예전에 팔로우하던 만화가가 실루엣 디자인의 중요성을 강조했는데, 지금의 아이콘들도 같은 문제를 겪고 있음
    AWS 대시보드는 아이콘이 서로 구분되지 않아 시각적 소음만 가득함
    반면 카드게임처럼 색상과 형태를 함께 구분해 색맹 사용자도 인식할 수 있게 한 디자인은 훌륭함
    Google Sheets는 이 점에서 잘하고 있지만, 다른 예시는 그렇지 않음

    • macOS Tahoe는 독특한 형태의 앱 아이콘을 모두 squircle 안에 가두어버렸음
      관련 글, 디자인 가이드라인 붕괴, 아이콘 복원 방법 참고
      덕분에 macOS의 사용성이 크게 떨어졌다고 느낌
    • AWS도 문제지만 Atlassian은 더 심함
      브라우저 탭이 전부 똑같이 보여서 어떤 탭이 어떤 작업인지 구분이 안 됨
    • 최근의 단색·저해상도 아이콘 트렌드는 가독성을 더 악화시킴

  • Google Docs의 아이콘 예시는 마음에 듦
    텍스트를 읽지 않아도 추가/삭제 같은 액션 유형을 빠르게 찾을 수 있음

    • 나도 비슷하게 느꼈음
      아이콘으로 대략적인 위치를 찾고, 텍스트로 세부 기능을 확인함
      덕분에 메뉴 탐색 시간이 줄고 인지 부하가 감소함
    • 하지만 “Add”나 “Delete” 아이콘이 전부 똑같은 건 문제임
      아마 “아이콘 개선” 티켓이 어딘가에 묻혀 있을 듯함

  • Google Docs 예시에서 “Insert Link”보다 링크 아이콘을 찾는 게 훨씬 빠름
    들여쓰기나 정렬 같은 기능도 표준화된 아이콘 덕분에 쉽게 찾을 수 있음
    또한 비영어권 사용자에게도 도움이 됨
    예를 들어 일본어가 서툰 사용자는 아이콘 덕분에 원하는 기능을 더 쉽게 찾을 수 있음

  • 나는 거의 모든 메뉴 항목에 아이콘을 넣는 편임
    그 결과 정신적 피로감 감소와 빠른 선택이 가능해졌음
    복잡한 메뉴일수록 색상을 추가해 감각을 다양하게 활용하는 것도 좋다고 생각함
    단, 아이콘은 반드시 의미 있는 형태여야 함

    • 나는 아이콘이 어디에나 있기를 원함
      심지어 의미가 없어도, 동일한 아이콘 세트의 “두 번째 항목”을 찾는 게 텍스트를 읽는 것보다 훨씬 빠름

  • 일부 항목에만 아이콘이 있으면, 그것들이 특별하거나 자주 쓰이는 기능처럼 보임
    모든 항목에 아이콘이 있을 때보다 훨씬 유용하다고 느낌

    • 어떤 앱들은 메뉴 항목에 아이콘을 넣어, 툴바 등 다른 UI에서도 같은 기능을 연결해주는 역할을 함
      일종의 역 툴팁처럼 작동함
      하지만 특정 항목만 강조하려면 아이콘보다는 일관된 시각적 구분이나 정렬 순서가 더 효과적이라고 생각함
    • 자주 찾는 항목에만 시선을 끌어주는 건 좋지만, 추상적인 단색 아이콘을 남발하면 오히려 찾기 어려워짐
      자주 쓰지 않는 항목은 천천히 스캔해도 괜찮음
답변달기