Files

minsung 18b46520b8 feat: EOS 전 챕터 Vision 이미지 분석 삽입 (fig. 1.1–11.5, E.1–E.10)

- 9개 wiki 소스 페이지에 총 69개 JPEG 이미지 Vision 분석 결과 삽입
- fig. 2.1–2.8, 3.1, 3.3–3.5: EOS-part1-motivations (Backblaze·Dropbox 설계 결함)
- fig. 4.1, 4.3, 4.5–4.6: EOS-ch4-concept-structure (개념 5요소·상태 기계)
- fig. 5.1–5.10: EOS-ch5-concept-purposes (목적 기준·미스피트 사례)
- fig. 6.1, 6.4, 6.6, 6.9: EOS-ch6-concept-composition (시너지·동기화 문제)
- fig. 7.1–7.3: EOS-ch7-concept-dependence (의존 다이어그램)
- fig. 8.1–8.5, 8.7, 8.10–8.11: EOS-ch8-concept-mapping (UI 매핑·다크 패턴)
- fig. 9.1, 9.3–9.4, 9.6–9.9, 10.1–10.3, 11.1–11.2, 11.4–11.5: EOS-part3-principles
- fig. E.1–E.5: EOS-endnotes-formalism (상태 기계·관계형 모델·Photoshop layer)
- fig. E.6–E.9: EOS-endnotes-context (Bosch·Gmail·nail clipper·Photoshop crop)
- fig. E.10: EOS-part3-principles (Apple Pages '09 부분 스타일)
- 책 표지·챕터 헤더 이미지는 스킵

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-04-30 17:18:35 +09:00

12 KiB

Raw Permalink Blame History

title, tags, source, chapter, updated

title

EOS Ch8 — 개념의 매핑

핵심 아이디어

개념은 사용자 인터페이스의 뒤에서 실행된다. UI 설계는 개념의 행동과 상태를 버튼·뷰 등 물질적 형태로 연결하는 매핑(mapping) 설계다. 개념 자체가 단순하더라도 매핑이 잘못되면 사용하기 어렵고, 반대로 복잡한 개념도 훌륭한 매핑으로 이해하기 쉬워진다. 또한 의도적 또는 무의도적 매핑 설계 결함이 다크 패턴을 낳는다.

매핑이란

UI 설계자는 다음을 결정한다:

개념의 행동(action) → 사용자의 제스처(버튼 클릭, 드래그 등)
개념의 상태(state) → 화면에 표시되는 뷰

매핑 설계는 개념 설계와 독립적으로 이루어질 수 있어야 한다. 먼저 개념을 설계하고, 그다음 매핑을 설계한다.

단순한 개념도 잘못된 매핑으로 어려워진다

Oracle Java 설치 다이얼로그 예시: "Install"과 "Remove" 두 버튼이 있는 다이얼로그. "Remove"가 기본 선택으로 강조돼 있어 업그레이드하러 온 사용자가 혼란에 빠진다. install 개념의 두 운영 원칙(설치 vs. 제거)을 별도 워크플로로 분리했다면 명확했을 것이다.

fig. 8.1 (A puzzling dialog in a Java installation process. What does "remove" mean?): "Install Java 8 Update 281" 다이얼로그로, Oracle Java 로고 아래 "Welcome to Java – Updated License Terms" 제목과 라이선스 변경 안내 문단이 표시돼 있다. 하단에 "Install"(왼쪽, 강조 없음)과 "Remove"(오른쪽, 어두운 배경으로 기본 선택) 두 버튼이 있다. 업그레이드 프롬프트를 클릭해서 설치 프로그램을 실행한 사용자에게 "Remove"가 기본 버튼으로 표시되는 매핑 오류 — 사용자 의도(업그레이드)와 UI 기본값(제거)의 불일치를 보여준다.

개선 방향:

설치와 제거를 별도 탭이나 흐름으로 분리
"Remove"보다 "Uninstall"이 의미를 더 정확히 전달
업그레이드 프롬프트 후 실행했으므로 설치가 기본값이어야 함

복잡한 개념은 UI에 설명을 내장해야 한다

Backblaze 백업 메시지: "You are backed up as of: Today, 1:05 pm"이라는 메시지는 오해를 낳는다. 더 나은 표현: "Last backup: Today, 1:05pm — This backup included all files saved prior to the scan that began at 12:48pm."

Apple의 "Do Not Disturb" 개념도 "repeated calls" 옵션 아래에 작은 글씨로 해설 문장을 붙여 의미를 보완한다.

다크 패턴: 의도적 매핑 왜곡

change.org 사례들

서명 수 조작: 페이지 로드 시 실제 서명 수보다 낮은 숫자에서 시작해 실제 수까지 실시간으로 올라가는 애니메이션 — 가짜 실시간 활동 인상 조작.
기부 오해 유도: 서명 후 나타나는 "기부" 요청이 청원 주최자에게 가는 것처럼 보이지만, 실제로는 change.org의 광고 비용. 개념의 운영 원칙을 숨김.

fig. 8.2 (The petition owner's view of a change.org petition reveals a small deception: signers are shown a lower count (the 683 on the right in the body of the petition) than the actual count visible to the owner (the 698 in the admin bar at the top left).): "Save Newton's Parks!" 청원 페이지로, 왼쪽 상단 관리자 바에 "698 supporters"가 표시되고, 오른쪽 청원 본문에는 "683 have signed."라고 표시돼 있다. 청원 소유자에게만 보이는 실제 수(698)와 방문자에게 보이는 낮은 수(683)의 차이가 가짜 실시간 증가 애니메이션의 시작점임을 보여준다. 의도적 매핑 왜곡으로 실시간 활동 인상을 조작하는 다크 패턴 사례다.

fig. 8.3 (An invitation to support a change.org petition. Or is it?): change.org 서명 후 화면으로, "Can you chip in $2 to get this petition on the agenda?" 요청과 함께 겨울 공원 사진, "Become a hero. Join the 1,045 people helping reach the next goal." 문구, "Yes, I'll chip in $2 or more"(강조 버튼)와 "No, I'll share instead" 버튼, PayPal 결제 옵션이 표시돼 있다. 기부금이 청원 주최자가 아닌 change.org 광고비로 사용된다는 사실을 숨기고, 청원을 지원하는 것처럼 오해하게 만드는 기만적 매핑 사례다.

Amazon Prime 사례

두 버튼("Try Prime FREE" — 노란색, "Continue with FREE One-Day Delivery" — 파란색)이 모두 Prime 가입 액션에 연결됨. 가입 거부 옵션은 훨씬 작은 파란색 링크로 숨겨짐. 두 개의 버튼이 실제로는 하나의 행동을 공유한다는 사실을 매핑이 숨긴다.

fig. 8.4 (Two buttons, one stacked above the other (and colored yellow and blue on the site itself), for apparently distinct actions of the Amazon Prime concept, but actually both bound to the same action.): Amazon UK 페이지로, "Daniel N. Jackson, why wait for delivery? Get FREE One-Day Delivery on this order — Start your 30-day free trial of Amazon Prime" 제목 아래 Standard/One-Day/Same-Day Delivery 모두 "FREE"로 표시된 비교 표가 있다. 오른쪽 하단에 "Try Prime FREE"(어두운 강조 버튼)와 그 아래 "Continue with FREE One-Day Delivery / Pay later"(두 번째 버튼)가 나란히 있고, 왼쪽에 작은 링크 "Continue and don't gain Amazon Prime benefits"가 숨어 있다. 두 버튼이 실제로는 같은 Prime 가입 액션에 연결된다는 사실이 매핑으로 숨겨진 다크 패턴이다.

복잡한 조합 매핑: Gmail 레이블의 수수께끼

Gmail은 label 개념과 conversation 개념을 조합하면서, 레이블은 메시지에 부착하지만 레이블 표시는 대화(conversation)에 표시한다.

이 불일치로 인한 이상 현상:

대화가 "hacking"과 "meetups" 두 레이블을 갖는 것처럼 보임
그러나 각각의 레이블로는 검색 결과에 나타나지만, 두 레이블을 동시에 검색하면 결과 없음 (두 레이블이 서로 다른 메시지에 부착돼 있기 때문)

fig. 8.5 (Labeling in Gmail: a conversation with two labels, "hacking" and "meetups."): Gmail 받은 편지함 화면으로, Primary와 Social 탭 아래 "Alyssa, me 3"라는 대화 항목에 "hacking", "meetups", "javascript" 세 레이블 태그가 표시돼 있다. 레이블이 개별 메시지가 아닌 대화 단위로 표시되기 때문에, 서로 다른 메시지에 부착된 레이블들이 마치 하나의 대화가 두 레이블 모두를 갖는 것처럼 보인다. 이것이 아래 fig. 8.6의 검색 이상 현상의 원인이다.

실무적 문제: sent 뷰를 보면 내가 보낸 메시지가 포함된 대화 전체가 보이고, 내가 보내지 않은 메시지들도 포함된다. 설계자들이 이 문제를 인지했지만 아직 완전히 해결되지 않았다.

fig. 8.7 (Filtering on sent messages in Gmail: the sent message is the first of the two.): Gmail "in:sent" 검색 결과 화면으로, "javascript" 제목의 대화가 펼쳐져 있다. 상단에 "Inbox", "hacking", "meetups" 레이블 태그가 있고, 첫 번째 메시지는 Alyssa P. Hacker가 "to me"로 보낸 "Reminds you of the old days, eh?", 두 번째는 Ben Bitdiddle이 "to Alyssa"로 보낸 "Yes, it does."가 표시된다. 보낸 메시지만 보려 했지만 관련 대화 전체(내가 보내지 않은 메시지 포함)가 표시되는 label+conversation 조합 매핑의 실용적 문제를 보여준다.

명확하지만 사용하기 어려운 매핑: Backblaze 복원

파일 버전을 복원하는 흐름: 날짜 범위 설정 → 폴더 트리 로딩(~20초) → 파일 선택 → 다운로드. 손상된 파일의 마지막 정상 버전을 찾으려면 날짜를 하루씩 소급해가며 반복해야 하는데, 매번 폴더 트리가 리셋된다.

개선 방향: Carbonite나 Crashplan처럼 파일의 모든 버전 목록(수정 날짜 포함)을 한 번에 보여주는 방식.

라이브 필터링 딜레마: Apple Mail의 Flag

플래그된 메시지 목록을 보는 중, 한 메시지의 플래그를 해제하면 그 메시지를 즉시 목록에서 제거해야 할까?

직관적 답변(제거): 일관성 있어 보이지만 실용적으로 나쁘다. 실수로 플래그 해제 후 메시지를 찾을 수 없게 됨.

실제 Apple Mail 동작(유지): 플래그가 해제돼도 메시지가 목록에 남아있어, 즉시 재플래그 가능. 뷰를 나갔다 돌아오면 그때 목록이 갱신됨.

fig. 8.10 (A skillful mapping of the flag concept in Apple Mail: messages with yellow flags are being shown. The flag has been removed from the first message, but the message is still listed.): Apple Mail 화면으로, 왼쪽 사이드바에 Inbox, VIPs, Flagged(Orange 2, Red 216, Purple, Yellow 5), Drafts 18, Sent, Trash, Archive 등이 나열돼 있고, "Yellow" 폴더가 선택된 상태다. 오른쪽 메시지 목록에는 노란 플래그가 제거됐음에도 여전히 리스트에 남아있는 첫 번째 메시지(ThermoCheck)와 다른 5개의 메시지가 표시돼 있다. 플래그 해제 후 즉시 목록에서 사라지지 않도록 함으로써 실수로 해제했을 때 바로 복구할 수 있도록 한 사려 깊은 매핑 설계를 보여준다.

교훈: 매핑은 단순한 액션-상태 연결이 아니라 전형적 사용 시나리오와 사용 패턴을 고려해야 한다.

모호한 액션 해소: Adobe Lightroom 컬렉션

collection 개념: 아이템이 여러 컬렉션에 동시에 속할 수 있음.

두 컬렉션이 동시에 선택된 상태에서 한 아이템을 제거하려 하면 어느 컬렉션에서 제거할지 모호하다. Lightroom은 처음에 에러 메시지를 표시하다가, 나중에 선택된 모든 컬렉션에서 동시에 제거하도록 변경했다. 이 문제는 UI 위젯 설계의 한계에서 비롯된다.

fig. 8.11 (A mapping dilemma for the collection concept in Adobe Lightroom: with two collections showing, selecting a photo for removal does not identify which collection to remove it from.): Adobe Lightroom 화면으로, 왼쪽 패널에 "Website > American Spaces" 하위에 "Possibles(68)"와 "Selected(33)" 두 컬렉션이 모두 선택(하이라이트)된 상태다. 오른쪽에는 풍경 사진 6장이 그리드로 표시돼 있으며, 두 번째 사진이 선택(흰 테두리)돼 있다. 두 컬렉션이 동시에 선택된 상태에서 사진 삭제를 시도할 경우 어느 컬렉션에서 제거할지 매핑이 결정할 수 없는 모호성 문제를 시각화한다.

비표준 위젯 필요: "없음" 값 입력

partial style 개념: 서식의 일부 속성만 지정하는 스타일. 예: 이탤릭만 지정하고 폰트 크기는 지정 안 함.

문제: 기존에 설정된 속성을 "설정 안 함(none)"으로 되돌리는 UI 요소가 없다. 3상태 체크박스(on/off/not-set), 값 편집 가능한 드롭다운 등 비표준 위젯이 필요하다. 이 요구는 현재 UI 툴킷의 한계를 드러낸다.

핵심 인용

"The design of mappings has been extensively studied by human-computer interaction researchers, and the guidelines that have been developed—mostly at the physical and linguistic levels of design—apply equally well to systems that have been designed with concepts."

"Attempts to make the user interface simpler than the underlying concepts may backfire."

"The mapping must take into account typical usage patterns, which… may be more complicated than performing a single action."

12 KiB Raw Permalink Blame History Unescape Escape