Tahoe 아이콘은 정당화하기 어렵다
원문은 Nikita Prokopov님이 에 게재했습니다. 이 블로그 구독하기
1992년판 Macintosh Human Interface Guidelines를 읽다가 근사한 삽화를 발견했다:
다음과 같은 설명이 함께 붙어 있었다:
시간을 빨리 감아 2025년으로 가보자. Apple이 macOS Tahoe를 출시했다. 핵심은? 모든 메뉴 항목에 불쾌하고, 산만하고, 읽기 어렵고, 지저분하고, 어수선하고, 혼란스럽고, 답답한 아이콘(내 말이 아니라 그들 말이다!)을 추가한 것이다:
나쁘다. 하지만 정확히 왜 나쁜 걸까? 한번 파고들어 보자!
참고: 스크린샷은 macOS 26.1과 26.2를 섞은 것이며, 시스템에 기본으로 설치된 Apple 기본 앱에서만 가져왔다. 시스템 설정은 아무 것도 변경하지 않았다.
아이콘은 구별되어야 한다
아이콘의 주된 기능은 원하는 것을 더 빨리 찾을 수 있도록 돕는 것이다.
다소 직관에 반할지 모르지만, 모든 것에 아이콘을 다는 것은 정확히 잘못된 방법이다. 눈에 띄려면 달라야 한다. 하지만 모든 항목에 아이콘이 있으면 아무 것도 눈에 띄지 않는다.
색에도 마찬가지가 적용된다. 흑백 아이콘은 깔끔해 보이지만, 더 빨리 찾는 데는 도움이 되지 않는다!
Microsoft는 예전엔 이걸 알고 있었다:
오른쪽 버전에서 저장이나 공유를 얼마나 더 빨리 찾을 수 있는지 보라:
게다가 더 깔끔해 보인다. 덜 어수선하다.
색을 넣은 버전이라면 더 좋을 것이다(텍스트와 아이콘의 분리가 더 명확하고, 더 빨리 찾을 수 있다):
보기 좋지 않다고 느낄 거라는 걸 안다. 나도 마음에 들지 않는다. 이런 아이콘은 다루기 어렵다. 보기 좋게 만들려면 색을 고려해 제대로 디자인해야 한다. 하지만 원칙은 유효하다. 사용하기가 훨씬 더 쉽다는 것이다.
앱 간의 일관성
아이콘이 제 역할을 하려면 일관되어야 한다. 무엇을 찾아야 할지 학습할 수 있어야 한다.
예를 들어, “잘라내기” 명령 옆에 
가 있는 것을 본다. 알겠다고 생각한다. 다음에 “잘라내기”를 찾을 때는 시간을 좀 아끼기 위해 를 먼저 찾아볼 수도 있다.
그 점에서 Tahoe는 어떨까? “새로 만들기”의 오십 가지 그림자를 소개한다:
상황이 얼마나 어처구니없는지 더 잘 보이도록 일부러 전부 모아봤다.
물론 일부는 서로 다른 동작이므로 아이콘이 다른 것은 인정한다. 스마트 폴더를 만드는 것과 저널 항목을 만드는 것이 다르다는 건 알겠다. 하지만 이건 어떤가?
혹은 이건?
또 이건?
변명의 여지가 없다.
“열기”도 마찬가지다:
“저장”:
그렇다. 그중 하나는 체크 표시다. 게다가 화살표 방향조차 통일하지 못했다!
“닫기”:
“찾기”(때로는 “검색”, 때로는 “필터”라고 불린다):
“삭제”(잘라내기-복사-붙여넣기-삭제의 그 삭제):
윈도우 최소화.
이것들은 무슨 obscur하고 독특한 동작이 아니다. OS의 기본이며 토대이다. 모든 앱에 있고 항상 같은 자리에 있다. 다르게 보여서는 안 된다!
같은 앱 안에서의 일관성
아이콘은 툴바에서도 쓰인다. 개념적으로 툴바의 동작은 메뉴를 통해 호출되는 동작과 동일하므로 같은 아이콘을 써야 한다. 가장 구현하기 쉬운 경우다. 같은 앱 안에서, 심지어 같은 화면에서다. 일관성을 유지하는 게 그렇게 어려운 일일까?
미리보기:
사진: 같은 
와 
불일치가 있지만, 뒤바뀌어 있다 ¯\_(ツ)_/¯
지도 등에서는 확대/축소에 다른 기호를 쓰는 경우가 많다:
아이콘 재사용
또 다른 중대한 실수는 같은 아이콘을 다른 동작에 쓰는 것이다. 상상해 보라. 나는 
가 “새로 만들기”를 의미한다고 배웠다:
그런데 다른 앱을 열었더니 가 보인다. “좋아”라고 생각한다. “이미 무슨 뜻인지 아니까”:
속았다!
이렇게 생각할 수도 있다. 좋아, 
는 Quick Look이겠지:
때로는 맞다. 하지만 다른 때 는 “완료된 항목 보기”를 의미한다:
때로는 
가 “가져오기”다:
때로는 가 “업데이트”다:
일관성 문제와 마찬가지로, 아이콘 재사용도 앱 사이에서만 일어나는 일이 아니다. 때로는 툴바에서 
를 본다:
그러고는 같은 앱의 메뉴로 가보면 가 전혀 다른 의미를 갖고 있다:
때로는 동일한 아이콘이 같은 메뉴 안에서 만나기도 한다.
때로는 바로 옆에 나란히 있다.
때로는 동일한 아이콘을 한 줄로 도배해 놓기도 한다:
이건 누구에게도 도움이 되지 않는다. 모든 아이콘이 같다면 어떤 사용자도 메뉴 항목을 더 빨리 찾거나 기능을 더 잘 이해할 수 없다.
지금까지 아이콘 재사용의 최악 사례는 사진 앱이었다:
모든 메뉴 항목에 고유한 아이콘을 고르라는 임무를 맡은 사람이 아이디어가 바닥난 것처럼 느껴진다.
이해는 간다.
지나치게 미묘한 차이
아이콘을 볼 때 우리는 보통 실행상의 미세한 차이는 너그럽게 넘긴다. 덕분에 예를 들어 엄밀히는 다른 이 도로 표지판들이 같은 의미라는 걸 이해할 수 있다:
아이콘도 마찬가지다. 한 곳에서는 상자 밖으로 나가는 화살표를 그리고, 다른 곳에서는 화살표와 상자를 약간 다른 각도로, 혹은 다른 선 두께로 그리거나, 하나를 채운 형태로 그려도 우리는 같은 의미로 이해한다.
이를테면 가 
와 다른 의미라니? 제발!
혹은 글자 크기만 약간 다른 두 개의 A:
연필은 “이름 변경”인데 조금 더 두꺼운 연필은 “강조 표시”라는 건가?
대각선 방향이 다른 화살표?
공간 ⅔를 차지하는 세 점과 전체를 차지하는 세 점. 진심인가?
약간 더 진한 점?
모서리가 접혔는지, 안에 선이 있는지에 따라 의미가 바뀌는 종이 한 장?
하지만 최종 보스는 화살표다. 전부 다 다르다:
아마도 사용자는 원이 얼마나 찌그러졌는지, 화살표가 위에서 오른쪽으로 시작하는지 아래에서 오른쪽으로 시작하는지, 화살표 끝이 얼마나 멀리 가는지를 구분하는 전문가가 되어야 하나 보다.
내가 신경 쓸까? 솔직히 전혀 아니다. Apple이 이런 것들을 일관되게 적용했다면 한번 시도라도 해볼 수 있었을지 모른다. 그런데 Apple은 한 곳에서는 와 
가 같은 의미라고 여기면서, 다른 곳에서는 이런 미세한 차이를 알아보길 기대하는 건가?
미안하지만, 믿을 수 없다. 지금까지 본 것들을 생각하면 더더욱.
디테일
아이콘은 멀리서도 쉽게 알아볼 수 있어야 한다. 모든 아이콘 디자이너가 안다. 작은 디테일은 금물이라는 것을. 미적인 목적으로 가끔 넣을 수는 있겠지만, 그런 디테일에 의존해서는 안 된다.
그런데 Tahoe 메뉴의 아이콘은 아주 작다. 대부분 12×12 픽셀 정사각형 안에 들어가며(레티나 때문에 실제 해상도는 24×24다), 많은 아이콘이 정사각형이 아니기 때문에 한쪽 치수는 보통 12보다도 작다.
작업할 공간이 그리 많지 않다는 뜻이다! Windows 95도 16×16 아이콘을 썼다. 당시 일반적인 DPI인 72dpi를 기준으로 하면 물리적 아이콘 크기는 0.22인치(5.6mm)다. 254DPI인 최신 MacBook Pro에서 Tahoe의 24×24 아이콘은 0.09인치(2.4mm)에 불과하다. 물론 24가 16보다 크긴 하지만, 실제로는 이 아이콘들의 면적이 4배나 작다!
그래서 이걸 보면:
헷갈린다. 다르다는 건 알겠다. 하지만 정확히 뭘 그린 건지는 도저히 알아보기 힘들다.
20배로 확대해도 여전히 엉망이다:
혹은 여기. 이건 세 개의 서로 다른 아이콘이다:
여기서 더하기 기호와 반짝이를 구분하라는 건가?
이 선들 중 일부는 다른 선보다 0.5픽셀 더 두꺼운데, 그게 핵심 포인트란다:
이건 화살표인가?
붓인가?
봐라, 아주 작은 카메라다.
심지어 더 작은 뷰파인더까지 있는데, 20배로 확대해야 겨우 보인다:
혹은 여기. 상자가 있고, 그 상자 안에 원이 있고, 그 안에 전체 높이가 2픽셀인 아주 작은 문자 i가 있다:
안 보이는가?
나도 안 보인다. 하지만 거기 있다...
그리고 이건 윈도우다! 심지어 트래픽 라이트까지 있다! 얼마나 사랑스러운가:
기억하라. 이건 레티나 픽셀로, 실제 픽셀의 ¼ 크기다. 스티브 잡스 본인도 이건 눈에 보이지 않는다고 주장했다.
인치당 300픽셀 근처에 마법의 숫자가 있는데, 눈에서 10~12인치 정도 떨어뜨려 들고 보면 인간 망막이 픽셀을 구분할 수 있는 한계라는 것이 밝혀졌습니다.
그런데도 Tahoe 아이콘은 당신이 그걸 볼 수 있다는 전제에 의존한다.
픽셀 그리드
작업할 공간이 그토록 적을 때는 모든 픽셀이 중요하다. 좋은 아이콘을 만들 수는 있지만, 픽셀 하나하나를 매우 신중하게 선택해야 한다.
Tahoe 아이콘에 Apple은 전통적인 비트맵 대신 벡터 폰트를 사용하기로 했다. Apple의 리소스를 아낄 수 있다. 한 번 그려서 어디서나 쓴다. 어떤 크기, 어떤 디스플레이 해상도, 어떤 폰트 두께에서든.
하지만 단점도 있다. 폰트는 수직 위치를 잡기 어렵고, 크기가 픽셀에 직접 대응하지 않으며, 선 두께도 픽셀 그리드에 1대1로 대응하지 않는 등 여러 문제가 있다. 그래서 어디서나 동작은 하지만, 어디서나 흐릿하고 어중간해 보인다:
더 많은 픽셀을 주면 확실히 더 잘 동작하기 시작한다.
혹은 그래픽을 더 단순하게 만들면. 하지만 작은 디테일과 아주 작은 아이콘 크기의 조합은 치명적이다. 그러니 380 DPI 이상의 MacBook이 나오기 전까지는, 안타깝게도 여전히 픽셀 그리드를 신경 써야 한다.
혼란스러운 은유
아이콘은 또 다른 기능을 할 수도 있다. 사용자가 명령의 의미를 이해하도록 돕는 것이다.
예를 들어, 맥락(윈도우 이동)을 알고 나면 이 아이콘들은 단어보다 더 빨리 무슨 일이 일어나는지 설명해 준다:
하지만 이게 동작하려면 사용자는 아이콘에 그려진 것이 무엇인지 이해해야 한다. 컴퓨터 동작으로 명확하게 치환되는 친숙한 사물(휴지통 → 삭제 같은)이나, 널리 쓰이는 기호, 혹은 이해하기 쉬운 도식이어야 한다. HIG:
초보적인 실수는 대상을 잘못 표현하는 것이다. 예를 들어, 선택 영역은 이렇게 생겼다:
하지만 그 아이콘은 이렇게 생겼다:
솔직히 이 글을 일주일째 쓰고 있지만, 왜 이렇게 생겼는지 전혀 감이 안 온다. 이렇게 생긴 대상이 하나 있긴 한데, Freeform/미리보기의 텍스트 블록이다:
SF Symbols에서는 character.textbox라고 불린다:
왜 이게 “전체 선택”의 은유가 되었을까? 내 추측으로는 실수인 것 같다.
다른 곳에서는 iOS의 텍스트 선택을 은유로 쓴다. Mac에서 말이다!
어떤 개념은 분명하고 잘 정립된 은유가 있다. 그런 경우엔 그걸 쓰지 않는 것이 실수다. 예를 들어 북마크: 
. Apple은 어째서인지 책을 선택했다:
때로는 이미 인터페이스 요소가 있어서 아이콘으로 활용할 수도 있다. 하지만 사용자를 혼란스럽게 하지 않도록 하라. 사각형 안의 점들은 권한이 아니라 비밀번호 입력처럼 보인다:
여기 아이콘은 “체크”라고 말하지만 동작은 “체크 해제”다.
끔찍한 실수다. 아이콘이 도움이 되지 않을 뿐 아니라 적극적으로 사용자를 혼란시킨다.
사물과 일종의 표시자를 결합한 2단계 아이콘을 만들고 싶은 유혹도 있다. 이를테면 체크박스와 X를 결합해 “체크박스 삭제”를 의미하게 하는 식이다:
혹은 사용자와 체크 표시를 결합해 “사용자 확인”처럼 말이다:
안타깝게도 이런 구성은 거의 동작하지 않는다. 사용자는 당신이 제공한 조각들로 문장을 만들지 않는다. 그런 퍼즐을 풀고 싶은 욕구도 없다.
은유를 찾는 건 어렵다. 명사는 동사보다 쉽고, 메뉴 항목은 대부분 동사다. “열기”는 어떻게 생겨야 할까? 오른쪽 위를 가리키는 화살표처럼? 왜?
Apple이 놓친 “열기”에 대한 분명한 은유가 있다고 말하는 것이 아니다. 그런 건 없다. 하지만 그게 핵심이다. 좋은 은유를 찾을 수 없다면, 나쁘고 혼란스럽고 무의미한 아이콘을 쓰는 것보다 아이콘을 쓰지 않는 편이 낫다.
은유의 품질을 테스트하기 위해 내가 즐겨 하는 게임이 있다. 레이블을 지우고 의미를 맞춰 보는 것이다. 한번 해보라:
열심히 고민하면 모든 동작에 좋은 아이콘이 있을 거라 생각하는 건 망상이다. 그런 건 없다. 애초에 질 수밖에 없는 싸움이다. 아무리 돈을 쏟아붓고 “경영진의 결정”을 내려도 바뀌지 않는다. 문제는 100% 자초한 것이다.
이렇게 말은 했지만, 인정할 건 인정해야 한다. Apple이 은유를 잘 고를 때는 정말 잘한다:
대칭적인 동작
혼란스러운 은유의 특수한 경우는 정반대 동작에 서로 다른 은유를 쓰는 것이다. 실행 취소/다시 실행, 열기/닫기, 왼쪽/오른쪽 같은 경우다.
아이콘이 같은 은유를 쓸 때 좋다:
시간과 인지 자원을 아껴주기 때문이다. 하나를 배우면 다른 하나는 덤으로 얻는다.
그래서 관련된 동작에 공통된 은유를 쓰지 않는 것은 실수다:
혹은 여기:
또 다른 실수는 대칭이 존재하지 않는데 대칭을 만드는 것이다. “뒤로”와 “모두 보기”?
Tahoe의 일부 메뉴는 두 가지 실수를 모두 범한다. 예를 들어 보기/가리기 사이의 대칭 부족과, 완료됨/하위 작업 사이의 거짓 대칭:
가져오기가 내보내기가 아니라 공유와 짝을 이룬다:
아이콘 속 텍스트
다시 HIG:
HIG 저자들은 아이콘의 일부로 텍스트를 포함하는 것에 반대한다. 그러니 이런 것은:
혹은 이런 것은:
1992년에는 통과하지 못했을 것이다.
동의한다. 하지만 Tahoe에는 더 심각한 문제가 있다. 오로지 텍스트로만 이루어진 아이콘이다. 이를테면 이런 것:
“문자 그대로 읽히지 않아야 할 은유적이고 추상적인 아이콘 텍스트”가 어디서 끝나고 실제 텍스트가 어디서 시작되는지 불분명하다. 같은 폰트, 같은 색을 쓰는데 어떻게 구분하라는 건가? 아이콘은 그냥 방해만 된다. A...완료? Aa글꼴? 이게 무슨 뜻인가?
와 
는 어쩌면 이해할 수 있다. 점이 무언가를 나타내려는 의도였을 것이다. 그런 생각이 
로 이어졌다고 상상할 수 있다. 하지만 
? 아무 장식도 없다. 효과도 없다. 그냥 평범한 Abc다. 정말인가?
텍스트 변형
텍스트 변형을 설명하기 위해 아이콘을 쓰는 게 더 좋은 아이디어라고 생각할 수도 있다.
이를테면, 이걸 보면:
혹은 이걸 보면:
혹은 이걸 보면:
아이콘만 보고도 텍스트에 무슨 일이 일어날지 이해할 수 있다. 아이콘이 동작을 설명하는 것이다.
게다가 BIU는 워드 프로세싱에서 잘 정립되어 있으니 장점뿐인가?
꼭 그렇지는 않다. 문제는 같다. 텍스트 아이콘은 아이콘이 아니라 텍스트처럼 보인다. 게다가 이 아이콘들은 과잉이다. 첫 글자를 가져와 반복하는 게 무슨 의미인가? 단어 “Bold”는 이미 “B”로 시작하고, 그 자체로도 충분히 쉽게 읽히는데 왜 중복하는가? 다시 한번 보라:
게다가 단축키로 한 번 더 반복된다...
이 메뉴를 디자인하는 더 나은 방법이 있다:
그리고 Apple은 적어도 33년 전부터 그 방법을 알고 있었다.
아이콘 속 시스템 요소
운영체제는 물론 자체적인 목적을 위해 일부 시각 요소를 사용한다. 윈도우 컨트롤, 크기 조절 핸들, 커서, 단축키 등이다. 그런 것들을 아이콘에 쓰는 것은 실수일 것이다.
안타깝게도 Apple도 이 함정에 빠졌다. 화살표를 재사용했다.
단축키:
HIG에는 말줄임표에 대한 섹션이 따로 있을 정도이며, 메뉴의 다른 곳에서 이를 사용하는 것이 얼마나 위험한지 설명한다.
그리고 정확히 이 문제가 Tahoe에도 있다.
아이콘은 훑어보기를 방해한다
아이콘이 없으면 메뉴를 위에서 아래로 훑으며 첫 글자만 읽으면 된다. 모두 정렬되어 있기 때문이다:
하지만 Tahoe에서는 일부 메뉴 항목에는 아이콘이 있고 일부에는 없으며, 정렬도 다르게 되어 있다:
일부 항목은 체크 표시 와 아이콘을 모두 가질 수도 있고, 둘 중 하나만 갖거나 둘 다 없을 수도 있어, 이런 상황이 생긴다:
으.
특별 언급
이 메뉴는 별도 카테고리로 다룰 만하다:
다른 동작에 같은 아이콘. очевид한 은유의 부재. 어째서인지 첫 번째 것을 두 번째와 세 번째보다 약간 작게 만들기. 축하한다! 전부 다 해냈다.
HIG는 아직도 유효한가?
HIG를 많이 언급했는데, 이런 생각이 들 수도 있다. 1992년의 인터페이스 매뉴얼이 오늘날에도 여전히 유효한가? 컴퓨터가 너무 많이 변해서 전혀 새로운 원칙, 디자인, 관용구가 적용되어야 하는 것 아닌가?
그렇기도 하고 아니기도 하다. 물론 흑백 디스플레이에 맞게 아이콘을 조정하는 방법 같은 조언은 시대에 뒤떨어졌다. 하지만 원칙은 — 좋은 원칙인 한 — 여전히 적용된다. 그것이 컴퓨터가 어떻게 동작하는지가 아니라 인간이 어떻게 동작하는지에 기반하기 때문이다.
인간은 매년 새 버전으로 출시되지 않는다. 우리 기억력이 두 배가 되지 않는다. 시력이 더 날카로워지지도 않는다. 주의력은 예전과 똑같이 동작한다. 시각적 인지, 운동 능력 — 이 모든 것은 1992년과 정확히 같다.
그러니 그렇다, 뇌에 칩을 직접 연결하는 인터페이스가 나오기 전까지는 HIG는 계속 유효할 것이다.
결론
내 생각에 Apple은 불가능한 과제를 떠맡았다. 모든 메뉴 항목에 아이콘을 다는 일이다. 그런 일을 할 만큼 좋은 은유가 충분히 존재하지 않는다.
하지만 설령 있다 하더라도, 전제 자체가 의심스럽다. 모든 것에 아이콘이 있다고 해서 사용자가 원하는 것을 더 빨리 찾는다는 의미는 아니다.
그리고 설령 전제가 탄탄했다 하더라도, 그래도 이렇게 말할 수 있었으면 좋겠다. 목표를 고려하면 최선을 다했다고. 하지만 그것도 사실이 아니다. 은유를 일관되게 적용하는 것도, 아이콘 자체를 디자인하는 것도 형편없이 했다.
Apple이 한 OS 릴리스에 모두 모아 놓은 아이콘 디자인의 흔한 실수를 피하는 데 이 글이 도움이 되길 바란다. 나는 컴퓨터를 사랑하고, 인터페이스를 사랑하고, 시각적 커뮤니케이션을 사랑한다. 30년 전부터 이미 접근 가능했던 완벽히 좋은 지식이 오늘날 완전히 무시되거나 버려지는 것을 보면 슬퍼진다.
긍정적인 면을 보자면, 이제 Apple보다 더 잘 디자인하는 건 그리 어렵지 않다! 그걸 위해 건배하자. 새해 복 많이 받으시길!
참고
이 글을 검토하는 동안 Jim Nielsen의 글을 알게 되었는데, 내가 지적한 많은 부분과 겹친다. 우리 추론 뒤에 어떤 공통된 진실이 있다는 신호로 받아들인다.
추가로: Safari → 파일 메뉴는 26.0 이후로 더 나빠졌다. 원래 아이콘이 4개뿐이었는데, 이제는 18개다!
이 글의 초고를 읽어준 Kevin, Ryan, Nicki에게 감사한다.
댓글
로그인하고 댓글 남기기