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>

wiki/sources/EOS-part3-principles.md

@@ -32,6 +32,8 @@ Part III(Ch9~11)는 좋은 개념 설계를 위한 세 가지 핵심 원칙을
 
 명백히 필요하지만 구현되지 않은 개념들:
 
+> **fig. 9.1** (*How lack of a correspondent concept in email leads to arbitrary search results.*): Apple Mail 검색창에 "Claudia Marbach"를 입력한 결과로, People 섹션에 "Claudia Marbach claudiammarbach@gmail.com", "Claudia Marbach (Google Docs) — comments-nore...", "Claudia Jackson Marbach — claudia@lcs.mit.edu", "Daniel Jackson — dnj@mit.edu", "Sender contains: Claudia Marbach" 등 서로 다른 이메일 주소를 가진 여러 항목이 나열된다. *correspondent* 개념이 없어 같은 사람(Claudia Marbach)이 여러 이메일 주소로 분산되고, 심지어 관련 없는 "Daniel Jackson"도 검색 결과에 포함되는 임의적 검색 결과 문제를 시각화한다.
+
 - **Email *correspondent* 개념 부재**: 발신자를 고유하게 식별하는 개념이 없어 Apple Mail에서 동일인을 여러 이름으로 검색해야 함. 오픈 이메일 시스템에서 구현이 어렵다는 기술적 제약이 있다.
 - **백업의 삭제 경고 개념 부재**: 대부분의 백업 유틸리티는 원본 기기에서 삭제된 파일이 30일 후 클라우드에서도 삭제된다. 의도치 않은 삭제를 탐지·경고하는 개념이 없다.
 - **PowerPoint의 *style* 개념 부재**: Keynote는 최근 추가했지만 PowerPoint는 여전히 없어 일관된 서식 유지가 어렵다.
@@ -56,6 +58,8 @@ Part III(Ch9~11)는 좋은 개념 설계를 위한 세 가지 핵심 원칙을
 - *rule*: 조건에 맞는 메시지에 액션 적용
 - 공통 목적(메시지 필터링)인데 기능이 불완전하게 겹침. Gmail은 이를 단일 개념으로 통합.
 
+> **fig. 9.3** (*Apple Mail's filters (top) and rules (below), embody two versions of one concept.*): 상단에 Apple Mail의 필터 바가 표시되고 "FROM▾ Daniel Jackson SUBJECT▾ concept ✕" 조건이 설정돼 있다. 하단에는 룰 편집 다이얼로그로, Description: "Rule", "If any of the following conditions are met:" 아래 "From contains Daniel Jackson"과 "Subject contains concept" 두 조건이 있고, "Perform the following actions:" 아래 "Move Message to mailbox: Concept Design"이 설정돼 있다. 동일한 메시지 필터링 목적을 수행하는 두 개의 다른 UI — 상단의 *filter*(일시적·뷰 한정)와 하단의 *rule*(영구적·액션 포함)이 중복 개념을 이루고 있음을 보여준다.
+
 ### 과부하 개념(Overloaded concepts)
 
 하나의 개념이 여러 목적을 가질 때. 4가지 원인:
@@ -67,6 +71,10 @@ Part III(Ch9~11)는 좋은 개념 설계를 위한 세 가지 핵심 원칙을
 | **Emergent purpose** | 시간이 지나며 새 목적이 생김 | 이메일 *subject line* = 요약 → listserv 출처 표시 → 대화 그룹화 |
 | **Piggybacking** | 기존 개념에 새 목적 얹기 | Epson 프린터 드라이버: *paper size* 개념에 *paper feed* 붙이기 |
 
+> **fig. 9.4** (*Example of denied purpose: using commits for backup. The lower, gray path is a separate 'branch'...*): Git 커밋 히스토리 다이어그램으로, 굵은 검은 선 위에 여러 커밋 점이 일렬로 나열된 주 브랜치가 있다. 중간 지점에서 회색 선이 분기해 "feature setup", "backup just in case", "feature completion" 레이블이 붙은 세 개의 회색 점을 거쳐 다시 주 브랜치로 합류한다. *commit* 개념이 버전 히스토리를 위해 설계됐지만, 사용자가 "backup just in case"와 같이 단순 백업 목적으로 커밋을 남기는 목적 부정(denied purpose) 사례를 시각화한다.
+
+> **fig. 9.6** (*Epson printer driver: paper feed piggybacked onto paper size.*): Epson Stylus Photo R2400 Page Setup 다이얼로그로, Paper Size 드롭다운 메뉴가 열려 있다. "US Letter"를 선택하면 하위 메뉴에 "US Letter (Manual – Front)", "US Letter", "US Letter (Manual – Roll)", "US Letter (Sheet Feeder – Borderless)", "US Letter (Manual – Roll (Borderless))" 등 급지 방식이 포함된 여러 옵션이 나타난다. 종이 크기(paper size) 개념에 급지 방식(paper feed)이 피기백으로 얹혀, 크기 선택 UI에서 급지 방식도 함께 선택해야 하는 과부하 개념 문제를 보여준다.
+
 ### Facebook *like* 개념 분석
 
 Facebook *like*는 세 목적을 동시에 가진다:
@@ -82,6 +90,12 @@ Facebook *like*는 세 목적을 동시에 가진다:
 
 **해결책**: 세 개념으로 분리 — *reaction* + *recommendation* + *profiling*
 
+> **fig. 9.7** (*Shooting with a square aspect ratio: a great feature of mirrorless digital cameras.*): Fujifilm 미러리스 카메라 뷰파인더 화면으로, 여성 피사체를 촬영하는 장면이다. 뷰파인더 상단에 ISO 100, 잔여 702 프레임, RAW L 표시가 있고, 중앙 하단에 정사각형 마스킹 영역이 흰색 테두리로 표시돼 있다. 하단에 A(자동), 초점 모드, F4.0 조리개, AUTO 1600 ISO가 표시된다. *image size/aspect ratio* 개념이 촬영 시 정사각형 크롭 미리보기를 제공하는 기능을 보여주며, 이후 fig 9.8에서 설명될 피기백 문제의 맥락이 된다.
+
+> **fig. 9.8** (*Piggybacking in Fujifilm cameras: Setting image size/aspect ratio (left); setting image quality (middle); choosing 'W' as quality greys out the size option...*): 세 패널로 구성된 Fujifilm SHOOTING MENU 화면이다. 왼쪽 패널은 이미지 크기/비율 설정으로 L:3:2(664), L:16:9(681), L:1:1(702), M:3:2(707) 등 크기와 화면비 조합이 나열된다. 중간 패널은 이미지 품질 설정으로 FINE, NORMAL, FINE+RAW, NORMAL+RAW, RAW 옵션이 표시된다. 오른쪽 패널은 전체 SHOOTING MENU로 IMAGE SIZE 항목이 회색 처리(비활성화)된 상태를 보여준다. RAW 품질을 선택하면 이미지 크기 옵션이 비활성화되는 피기백 설계 — 품질 개념에 크기 제어가 얹혀 있어 사용자가 독립적으로 설정하지 못하는 과부하 개념 문제를 시각화한다.
+
+> **fig. 9.9** (*The like concept in Facebook: the emoticons have tooltips that identify them as 'like,' 'love,' 'care,' 'haha,' 'wow,' 'sad,' and 'angry.'*): Facebook 게시물 하단 반응 영역으로, 7개의 이모티콘이 가로로 나열돼 있다. 왼쪽부터 엄지 위(like), 하트(love), 포옹하는 얼굴(care), 웃는 얼굴(haha), 놀란 얼굴(wow), 슬픈 얼굴(sad), 화난 얼굴(angry) 이모티콘이 표시된다. 하단에 "Like"와 "Comment" 버튼이 있다. Facebook *like* 개념이 단순한 '좋아요'를 넘어 7가지 감정 반응으로 확장된 상태를 보여주며, 동일한 *like* 개념 하에 상반된 감정(like vs. angry)이 공존하는 과부하 개념 문제를 시각화한다.
+
 ---
 
 ## Ch10 — 개념 친숙성(Concept Familiarity)
@@ -95,6 +109,8 @@ Facebook *like*는 세 목적을 동시에 가진다:
 
 ### 성공적 재사용: Twitter *follower*
 
+> **fig. 10.1** (*Barack Obama's Twitter profile shows an extraordinary number of followers (120.8 million) compared to those he follows (602.9 thousand).*): Barack Obama의 Twitter 프로필 페이지로, 파크 장면 커버 사진과 원형 프로필 사진이 표시된다. "Barack Obama @BarackObama"라는 이름 아래 파란색 인증 배지가 있고, "Dad, husband, President, citizen."이라는 바이오와 워싱턴 DC, obama.org, 1961년 8월 4일생, 2007년 3월 가입 정보가 표시된다. 하단에 "602.9K Following"과 "120.8M Followers"가 표시된다. *follower* 개념의 비대칭 구독 관계 — 팔로잉(602.9K)과 팔로워(1억 2080만명)의 극적인 차이가 *subscription* 개념(구독자가 많은 채널)의 재사용으로 자연스럽게 이해되는 사례다.
+
 Twitter는 *follower* 개념을 소개하면서 이미 알려진 *subscription* 개념임을 명시한다: "Following someone means you've chosen to **subscribe** to their Twitter updates." — 운영 원칙을 직접 제공하며, 기존 개념과의 연결로 학습 부담 제거.
 
 ### 재발명의 실패: PowerPoint *section* vs. Keynote *slide group*
@@ -110,10 +126,14 @@ Twitter는 *follower* 개념을 소개하면서 이미 알려진 *subscription*
 
 Keynote가 더 효과적인 이유: 처음부터 새로 만든 것이 아니라 친숙한 *outline tree* 개념을 재사용했기 때문.
 
+> **fig. 10.2** (*Organizing slides in Keynote and PowerPoint. On the left, the Keynote group concept, which reuses the familiar concept of the tree outline; in the middle, the PowerPoint section concept, which is novel and unfamiliar; on the right, some actions on sections whose behavior is unpredictable.*): 세 영역으로 구성된 화면이다. 왼쪽은 Keynote 슬라이드 패널로, 슬라이드 1, 8(concept familiarity), 9, 10(grouping slides - 들여쓰기 그룹화), 11이 트리 구조로 표시된다. 가운데는 PowerPoint의 "concept familiarity" 섹션 아래 슬라이드 8, 9, 10, 11이 나열된다. 오른쪽은 PowerPoint 섹션 메뉴로 "Add Section", "Rename Section", "Remove Section", "Remove Section and Slides", "Remove All Sections" 항목이 표시된다. Keynote는 친숙한 아웃라인 트리로 직관적 그룹화를 제공하는 반면, PowerPoint 섹션은 예측 불가능한 동작을 가진 새로운 개념을 사용함을 대비하여 보여준다.
+
 ### 확장이 친숙성을 깨뜨린 경우: Lightroom 내보내기 프리셋
 
 *preset* 개념은 반복 명령의 파라미터를 저장하는 친숙한 개념이다. Adobe Lightroom의 내보내기 다이얼로그는 여기에 "여러 프리셋 체크로 복수 내보내기" 기능을 추가했다. 결과: 프리셋 이름 클릭과 체크박스 클릭이 다른 동작을 함 → 사용자 혼란. 해법: *action* 개념처럼 별도의 "명령 시퀀스" 개념을 분리했어야 했다.
 
+> **fig. 10.3** (*The export dialog in Adobe Lightroom, which uses an unconventional variant of the preset concept. In addition to selecting a preset by clicking on its name (left), you can also check the box (right); this allows multiple presets to be selected, which allow the same set of photos to exported multiple times, with different settings each time.*): 두 상태의 Adobe Lightroom "Export One File" 다이얼로그가 나란히 표시된다. 왼쪽은 이름 클릭으로 "Export to DNG" 프리셋이 선택된 상태(하이라이트)로, 오른쪽 파라미터 패널이 숨겨져 있다. 오른쪽은 체크박스로 "Export to DNG"를 선택한 상태로, File Settings(DNG), Image Sizing, Output Sharpening 등 파라미터 섹션이 표시된다. 하단에 "Multiple Presets: Selected 1 Preset. Some sections are hidden when presets are checked Learn More..." 메시지가 있다. 이름 클릭(단일 선택)과 체크박스(복수 선택)가 다른 동작을 하는 비표준 확장이 친숙한 *preset* 개념의 직관성을 깨뜨린 사례다.
+
 ### 개념 인스턴스는 표준 동작을 따라야 한다
 
 친숙한 개념의 인스턴스라면, 표준 동작에서 벗어날 때는 명확한 이유가 있어야 하고 그 차이를 사용자에게 분명히 알려야 한다.
@@ -141,16 +161,22 @@ Keynote가 더 효과적인 이유: 처음부터 새로 만든 것이 아니라
 
 ### 미묘한 위반: 폰트 서식
 
+> **fig. 11.1** (*The format toggle concept in the first versions of MacWrite (1984).*): 1984년 MacWrite 워드 프로세서 화면으로, 상단에 Apple 메뉴, File, Edit, Search, Format, Font, Style 메뉴가 있다. Style 드롭다운이 열려 있고, "✓Plain Text ⌘P", "**Bold** ⌘B", "*Italic* ⌘I", "Underline ⌘U", "Outline ⌘0", "Shadow ⌘S", "Superscript ⌘H", "Subscript ⌘L" 항목과 아래에 9~24포인트 크기 선택이 표시된다. 본문에는 "MacWrite is a leading word processor for the Macintosh"라는 텍스트가 굵게, 이탤릭, 크게 서식이 적용돼 있다. 초기 *format toggle* 개념 — Plain/Bold/Italic/Underline 네 가지 속성을 토글로 전환하는 간단하고 직관적인 서식 개념의 원형을 보여준다.
+
 초기 *format toggle* + *typeface* 조합은 작동했다: 이탤릭 적용 시 이탤릭 폰트 파일로 전환, 볼드 적용 시 볼드-이탤릭 파일로 전환 (toggle 명세 유지).
 
 전문 폰트 등장 이후 문제: Helvetica Light에 볼드를 두 번 적용해도 Light로 돌아오지 않고 Regular가 됨 → *format toggle*의 "두 번 적용하면 원래 상태로 복귀" 운영 원칙 위반.
 
+> **fig. 11.2** (*Integrity violation example in TextEdit: bolding once (second line) turns the text from light to bold; bolding again (third line) leaves the text in regular, not light.*): Apple TextEdit 화면으로, 상단에 Helvetica 폰트 패밀리의 변형 목록(Regular, Oblique, Light, Light Oblique, Bold, Bold Oblique)이 드롭다운으로 표시된다. 본문에는 세 줄의 텍스트가 있다: 첫 번째 줄 "sample text in Helvetica Light"(Light 서체), 두 번째 줄 "**sample text in Helvetica Light, bold toggled**"(Bold 서체), 세 번째 줄 "sample text in Helvetica Light, bold toggled again"(Regular 서체). 볼드를 두 번 적용해도 원래의 Light로 돌아오지 않고 Regular가 되는 *format toggle* 무결성 위반 — "두 번 토글하면 원상복귀" 운영 원칙이 전문 폰트 환경에서 깨지는 현상을 명확히 보여준다.
+
 - **Apple TextEdit**: 위반 그대로
 - **Apple Pages**: 숨겨진 매직으로 복귀 동작 구현 → 다른 문제 유발
 - **Adobe InDesign**: 문자 스타일이 특정 폰트 패밀리에만 적용되는 비표준 동작
 
 이 문제는 근본적으로 해결되지 않았다. *format toggle* 개념과 더 정교해진 타이포그래피 개념들은 원천적으로 조화가 어렵다.
 
+> **fig. E.10** (*Apple Pages '09의 부분 스타일 정의 시도*): "New character style" 다이얼로그. 스타일 이름: "Emphasis". 체크박스로 적용할 속성 선택: Font: Magma Light, Size: 12.0 pt, Bold: Off, Italic: Off, Color, Shadow, Ligatures, Capitalization, Superscript, Baseline Shift, Underline, Strikethrough 등. 하단: Deselect All / Select Overrides 버튼. 2009년 Pages의 시도: 일부 속성만 포함하는 부분 스타일(partial style)로 format toggle 무결성 문제 우회. 그러나 폰트 패밀리를 TrueType/OpenType subfamilies로 분해하는 방식이 새로운 문제 유발 — Bold 변형이 없는 Magma Light 같은 subfamily는 볼드 적용이 불가능 (Note 111).
+
 ### 중대한 위반: Google Drive 동기화
 
 *synchronization* 개념의 운영 원칙: "한 컬렉션의 변경이 다른 컬렉션에 전파됨. 두 장소의 아이템 복사본은 동일해야 함."
@@ -165,6 +191,8 @@ Google Drive는 `.gdoc` 같은 Google 앱 파일을 로컬 디스크에 저장
 
 기술적으로 수정 가능한 문제이나 Google이 아직 우선순위를 두지 않고 있다.
 
+> **fig. 11.4** (*Integrity violation in Google Drive: the cloud-app concept breaks the synchronization concept. A user moved files out of his Google drive in order to make space in the cloud, but the files he moved turned out just to be links to files in the cloud that no longer existed.*): 세 단계로 구성된 다이어그램이다. 각 단계는 "Google drive in cloud"(구름 모양), "Google drive on client machine"(직사각형 박스), "Another directory on client machine"(직사각형 박스) 세 영역으로 이루어진다. 왼쪽(초기 상태): 클라우드와 클라이언트 폴더 양쪽에 book.gdoc과 book.pdf 아이콘이 있고, book.gdoc은 점선으로 클라우드 원본을 참조한다. 가운데(파일 이동 후): 클라이언트 Google Drive 폴더는 비어 있고, 다른 디렉토리에 book.gdoc과 book.pdf가 이동해 있다. 오른쪽(동기화 후): 클라우드도 비어 있고, 클라이언트의 다른 디렉토리에만 파일이 남아 있다. *cloud app* 개념(링크로만 저장)과 *synchronization* 개념(동일한 복사본 유지)의 조합이 *synchronization* 명세를 위반해 사용자의 파일을 영구적으로 잃게 만드는 무결성 위반 메커니즘을 단계별로 시각화한다.
+
 ### 세 원칙의 그림 요약 (Fig.11.5)
 
 - 목적과 개념 사이의 선: 개념이 목적을 충족
@@ -172,6 +200,8 @@ Google Drive는 `.gdoc` 같은 Google 앱 파일을 로컬 디스크에 저장
 - 개념 간 선: 조합(composition)
 - 점선 박스: 앱
 
+> **fig. 11.5** (*A pictographic summary of the principles of Chapters 9 to 11. A line between a purpose and a concept indicates that the concept fulfills the purpose; the broken line (for the integrity violation) indicates non-fulfillment, due to the interference of another concept; lines between concepts denote composition; dotted boxes represent applications.*): 세 가지 원칙을 6개의 미니 다이어그램으로 요약한 도식이다. 왼쪽 열 — **특정성(specificity)**: 목적과 개념이 1:1 대응(P1-C1, P2-C2)하는 정상 케이스, 오른쪽에 목적 없는 개념(C2 고립), 개념 없는 목적(P2 고립), 중복 개념(P1이 C1·C2 양쪽 연결), 과부하 개념(C1이 P1·P2 양쪽 연결) 4가지 위반 유형이 표시된다. 가운데 열 — **친숙성(familiarity)**: 다른 앱 A1·A2에서 동일 목적 P1에 동일 개념 C1을 사용하는 정상 케이스와, 다른 앱에서 동일 목적에 서로 다른 개념 C1₁·C1₂를 사용하는 친숙성 위반 케이스. 오른쪽 열 — **무결성(integrity)**: 조합 시에도 각 개념이 목적을 충족하는 정상 케이스와, 한 개념이 다른 개념을 깨뜨려(C2→C1 방향 화살표에 물결선) 목적-개념 연결이 끊기는 무결성 위반 케이스. Ch9-11 세 원칙의 핵심 아이디어가 통일된 시각 언어로 집약돼 있다.
+
 ---
 
 ## 핵심 인용