제 1 강 - 디자인의 본질

1. 엘리베이터
   - 층수 버튼이 숫자 순서대로 명확히 표시
   - 현재 층수와 방향을 화살표로 표시
   - 선택된 층은 불이 들어옴

2. 자동차 계기판
   - 속도, 연료, 경고등이 운전자 시야에 배치
   - 중요한 경고는 빨간색으로 강조

3. 이커머스 장바구니
   - 우측 상단에 장바구니 아이콘과 개수 표시
   - 결제 버튼이 눈에 띄는 색상과 크기

1. 숨겨진 햄버거 메뉴
   - 주요 기능이 3줄 아이콘 뒤에 숨겨짐
   - 사용자가 기능의 존재를 모를 수 있음

2. 제스처 기반 네비게이션
   - 보이지 않는 스와이프 동작
   - 발견하기 어려움

3. 툴팁에만 설명
   - 마우스를 올려야만 보이는 정보
   - 모바일에서는 사용 불가

- 버튼 클릭: 색상 변화, 눌림 효과
- 로딩: 스피너, 프로그레스 바, 스켈레톤 UI
- 성공: 체크 마크, 초록색 배경
- 실패: X 마크, 빨간색 배경
- 포커스: 테두리 강조, 그림자

- 알림: "띵" 소리
- 오류: 경고음
- 성공: 긍정적인 효과음
- 타이핑: 키보드 클릭음 (선택사항)

- 버튼 클릭: 진동
- 스크롤 끝: 바운스 효과
- 중요 알림: 강한 진동

1. iPhone 키보드
   - 키 입력 시 시각적 강조
   - 햅틱 피드백 (선택 가능)
   - 자동 완성 제안

2. 파일 업로드
   - 프로그레스 바 (0% → 100%)
   - 완료 시 "업로드 완료" 메시지
   - 실패 시 재시도 옵션 제공

3. 좋아요 버튼
   - 클릭 즉시 색상 변경
   - 하트 애니메이션 효과
   - 숫자 카운트 업데이트

1. 반응 없는 버튼
   - 클릭 후 아무 변화 없음
   - 사용자가 여러 번 클릭 (중복 요청)

2. 로딩 표시 없음
   - "지금 처리 중인가?"
   - 사용자가 멈춤인지 로딩인지 구분 불가

3. 모호한 오류 메시지
   - "오류가 발생했습니다"
   - 무엇이 잘못됐는지, 어떻게 해결할지 불명확

좋은 오류 메시지:
❌ "오류가 발생했습니다"
✅ "비밀번호는 8자 이상이어야 합니다"

좋은 성공 메시지:
❌ "완료"
✅ "프로필이 성공적으로 업데이트되었습니다"

좋은 로딩 메시지:
❌ "로딩 중..."
✅ "데이터를 불러오는 중입니다 (약 5초 소요)"

하드웨어/물리적 구조로 잘못된 사용 방지

예시:
✅ USB-A: 한 방향으로만 삽입 가능
✅ USB-C: 양방향 모두 가능 (더 개선)
✅ SIM 카드: 한 모서리가 잘려 있어 방향 제한
✅ 자동차 시동: 브레이크를 밟아야 시동 가능
✅ 세탁기: 문이 닫혀야 작동

규칙과 로직으로 오류 방지

예시:
✅ 필수 입력란이 비어있으면 제출 버튼 비활성화
✅ 이메일 형식이 맞지 않으면 에러 표시
✅ 재고가 없으면 구매 버튼 회색 처리
✅ 과거 날짜는 선택 불가
✅ 최대 업로드 용량 제한 (10MB)

의미와 맥락에 기반한 제약

예시:
✅ "삭제" 버튼은 빨간색 (위험 암시)
✅ "확인" 버튼은 초록색 (안전 암시)
✅ 전원 버튼은 원형 (⏻)
✅ 재생 버튼은 삼각형 (▶)

문화적 관습과 학습된 규칙

예시:
✅ 빨간 신호등 = 멈춤
✅ 체크박스 = 선택/해제
✅ 휴지통 = 삭제
✅ 돋보기 = 검색
✅ ⚙️ = 설정

1. 비밀번호 입력
   - 최소 8자, 대문자/소문자/숫자/특수문자 요구
   - 실시간 검증 및 피드백
   - 요구사항 체크리스트 표시

2. 날짜 선택기
   - 달력 UI로 잘못된 날짜 입력 방지
   - 과거/미래 날짜 제한 옵션
   - 공휴일 자동 표시

3. 중요한 작업 전 확인
   - "정말 삭제하시겠습니까?"
   - 실행 취소 불가능한 작업은 2단계 확인
   - 입력 재확인 (이메일, 비밀번호)

4. 파일 드래그 앤 드롭
   - 허용된 파일 형식만 업로드 가능
   - 드롭 영역 시각적 강조
   - 잘못된 형식은 거부 메시지

1. 제약 없는 입력란
   - 전화번호에 문자 입력 가능
   - 이메일 형식 검증 없음
   - 제출 후에야 오류 발견

2. 되돌릴 수 없는 삭제
   - 확인 없이 바로 삭제
   - 복구 불가능
   - 사용자 후회

3. 모호한 버튼
   - "확인"과 "취소"가 같은 스타일
   - 위험한 행동이 강조되지 않음

❌ 너무 많은 제약
→ 사용자가 답답함을 느낌
→ 특수한 상황 대응 불가

✅ 적절한 제약
→ 일반적인 오류 방지
→ 고급 옵션으로 예외 처리

예시:
기본: 엄격한 제약으로 오류 방지
고급 모드: 전문가를 위한 유연성 제공

컨트롤의 위치와 결과의 위치가 일치

좋은 예 ✅:
- 가스레인지: 버튼 배치 = 불판 배치
  [1][2]     [불판1][불판2]
  [3][4]     [불판3][불판4]

- 자동차 사이드미러 조절
  조이스틱을 왼쪽으로 → 미러가 왼쪽으로
  조이스틱을 위로 → 미러가 위로

- 윈도우 창 배치
  창을 화면 왼쪽으로 드래그 → 왼쪽 반 화면 차지

나쁜 예 ❌:
- 가스레인지: 4개 버튼이 일렬 배치
  [1][2][3][4] → 어느 불판인지 헷갈림

컨트롤과 기능 사이의 논리적 관계

좋은 예 ✅:
- 볼륨 슬라이더
  오른쪽으로 → 소리 증가 (더 많음)
  왼쪽으로 → 소리 감소 (더 적음)

- 확대/축소
  + 버튼 → 확대 (더 크게)
  - 버튼 → 축소 (더 작게)

- 스크롤
  휠을 아래로 → 페이지가 아래로 이동
  (또는 콘텐츠가 위로 올라감)

나쁜 예 ❌:
- 비직관적인 방향
  위로 밀면 볼륨 감소 (예상: 증가)
  아래로 밀면 볼륨 증가 (예상: 감소)

현실 세계의 경험과 일치

좋은 예 ✅:
- 스티어링 휠
  오른쪽으로 돌리면 → 차가 오른쪽으로
  왼쪽으로 돌리면 → 차가 왼쪽으로

- 전등 스위치
  위로 올리면 → 켜짐 (밝음 = 위)
  아래로 내리면 → 꺼짐 (어둠 = 아래)

- 온도 조절
  빨간색 쪽 → 뜨거움
  파란색 쪽 → 차가움

좋은 매핑 ✅:
MacOS Mission Control
- 3손가락 위로 스와이프 → 모든 창 보기 (위 = 전체 조망)
- 3손가락 좌우 스와이프 → 데스크탑 전환

Windows Snap
- 창을 화면 가장자리로 드래그 → 그 위치에 스냅
- 왼쪽 = 왼쪽 반, 오른쪽 = 오른쪽 반

좋은 매핑 ✅:
[────●────────] 50%
왼쪽 = 최소 (0%)
오른쪽 = 최대 (100%)
중간 = 중간값

나쁜 매핑 ❌:
[────────────●] 10%
오른쪽이 최소값? (반직관적)

좋은 매핑 ✅:
- 두 손가락 벌림 → 확대
- 두 손가락 오므림 → 축소
- 드래그 → 지도 이동 (직접 조작 느낌)

나쁜 매핑 ❌:
- + 버튼만으로 확대/축소
- 화살표 버튼으로만 이동
- 제스처 불가

서양 (LTR - Left to Right):
[◀ 이전] [다음 ▶]
왼쪽 = 과거, 오른쪽 = 미래

중동 (RTL - Right to Left):
[다음 ▶] [◀ 이전]
오른쪽 = 과거, 왼쪽 = 미래

→ 글로벌 제품은 문화권별 조정 필요

1. 사용자에게 물어보기
   "이 버튼을 누르면 무슨 일이 일어날 것 같나요?"
   
2. 첫 사용자 테스트
   - 설명 없이 사용하게 하기
   - 어디서 헤매는지 관찰

3. 시선 추적 (Eye Tracking)
   - 사용자가 어디를 먼저 보는가?
   - 기대한 곳을 보는가?

4. A/B 테스트
   - 다른 매핑 방식 비교
   - 어느 쪽이 더 직관적인가?

같은 제품/서비스 내에서의 일관성

좋은 예 ✅:
- 모든 페이지에서 "저장" 버튼이:
  • 같은 위치 (우측 하단)
  • 같은 색상 (파란색)
  • 같은 크기
  • 같은 아이콘

- 모든 입력란이:
  • 같은 높이 (48px)
  • 같은 테두리 스타일
  • 같은 포커스 효과
  • 같은 에러 표시 방식

나쁜 예 ❌:
- 페이지 A: "저장" 버튼이 우측 하단, 파란색
- 페이지 B: "저장" 버튼이 좌측 상단, 초록색
→ 사용자 혼란

업계 표준 및 다른 제품과의 일관성

좋은 예 ✅:
플랫폼 가이드라인 준수:
- iOS: 네비게이션 바 상단, 탭 바 하단
- Android: 플로팅 액션 버튼 우측 하단
- Web: 로고 좌측 상단, 메뉴 우측 상단

일반적 컨벤션:
- ⚙️ = 설정
- 🔍 = 검색
- 🏠 = 홈
- ❤️ = 좋아요
- 🗑️ = 삭제
- Cmd/Ctrl + C = 복사
- Cmd/Ctrl + V = 붙여넣기

나쁜 예 ❌:
- 기존 앱과 다른 제스처
- 업계 표준과 반대되는 색상 (빨강 = 확인?)
- 독특한 아이콘 (사용자가 학습 필요)

디자인 요소의 통일

디자인 시스템 구성 요소:

색상 (Color):
Primary: #007AFF (주요 행동)
Secondary: #5856D6 (보조 행동)
Success: #34C759
Warning: #FF9500
Error: #FF3B30
Neutral: #8E8E93

타이포그래피 (Typography):
H1: 32px / Bold
H2: 24px / Semibold
H3: 20px / Semibold
Body: 16px / Regular
Caption: 14px / Regular

간격 (Spacing):
8px 시스템 (8, 16, 24, 32, 40, 48...)

버튼 스타일:
Primary Button: 채워진 배경
Secondary Button: 테두리만
Text Button: 텍스트만

아이콘:
같은 스타일 (Line / Filled / Outlined)
같은 굵기 (2px stroke)
같은 크기 (24x24px)

동작과 인터랙션의 통일

좋은 예 ✅:
- 모든 삭제 작업에 확인 다이얼로그
- 모든 폼에서 Enter = 제출
- 모든 목록에서 스와이프 = 삭제
- 모든 모달에서 ESC = 닫기
- 모든 이미지에 줌 기능

나쁜 예 ❌:
- 어떤 삭제는 확인, 어떤 삭제는 바로 실행
- 어떤 페이지는 Enter 제출, 어떤 페이지는 안 됨

내부 일관성:
- iOS, iPadOS, macOS, watchOS 모두 비슷한 디자인 언어
- San Francisco 폰트 사용
- 같은 아이콘 세트
- 같은 제스처 (스와이프, 핀치 등)

외부 일관성:
- 업계 표준 준수 (USB-C, Bluetooth)
- 일반적인 제스처 패턴

철학: "물리적 은유"
- 카드는 종이처럼 보임
- 그림자로 깊이 표현
- 모든 Google 제품에 적용
  (Gmail, Drive, Maps, YouTube...)

일관된 컴포넌트:
- Floating Action Button (FAB)
- Bottom Navigation
- Snackbar
- App Bar

일관성 있는 요소:
✅ 모든 상품 카드가 같은 레이아웃
✅ "장바구니 담기" 버튼 항상 같은 위치
✅ 가격 표시 방식 통일
✅ 별점 표시 통일

비일관적인 요소 ❌:
❌ 카테고리마다 다른 필터 위치
❌ 일부는 "구매하기", 일부는 "주문하기"
❌ 할인율 표시 방식이 제각각

언제 일관성을 깨도 되는가?

1. 중요도 강조
   위험한 "삭제" 버튼 → 빨간색으로 차별화

2. 새로운 기능 소개
   새 기능 → 첫 사용 시 다른 스타일로 강조

3. 플랫폼 특성
   iOS와 Android는 각 플랫폼 가이드라인 따르기

4. 사용자 피드백 반영
   A/B 테스트로 더 나은 방식 발견 시 변경

원칙: 
일관성을 깨는 것은 명확한 이유가 있어야 함

□ 모든 버튼이 같은 스타일 시스템을 따르는가?
□ 색상 사용이 일관적인가?
□ 간격(spacing)이 규칙적인가?
□ 아이콘 스타일이 통일되어 있는가?
□ 폰트와 텍스트 스타일이 일관적인가?
□ 에러 메시지 형식이 통일되어 있는가?
□ 로딩 표시 방식이 같은가?
□ 네비게이션 패턴이 일관적인가?
□ 인터랙션이 예측 가능한가?
□ 플랫폼 가이드라인을 따르는가?

1. 학습 비용 감소
   - 한 번 배우면 전체 적용
   - 새 기능도 쉽게 이해

2. 개발 효율성
   - 재사용 가능한 컴포넌트
   - 빠른 개발 속도

3. 브랜드 아이덴티티
   - 일관된 경험
   - 신뢰성 향상

4. 유지보수 용이
   - 한 곳만 수정하면 전체 반영
   - 버그 감소

시각적 신호:
- 버튼: 입체감, 그림자, hover 효과
- 링크: 밑줄, 색상 (보통 파란색)
- 입력창: 테두리, 커서 깜빡임
- 드래그 가능: 손 모양 커서
- 비활성화: 회색, 투명도 감소

인터랙션 신호:
- 클릭 가능: 포인터 커서 변경
- 드래그 가능: 잡기 커서 (grab)
- 로딩 중: 대기 커서 (wait)
- 텍스트 선택: I-beam 커서

1. 목표: 친구에게 메시지를 보내고 싶다
2. 계획: 카카오톡 앱을 열어서 친구를 찾아야겠다
3. 명세화: 앱을 열고 → 친구 목록에서 선택 → 메시지 입력 → 전송
4. 수행: 실제로 클릭하고 타이핑함

5. 지각: 메시지가 채팅방에 표시됨
6. 해석: 메시지가 전송되었구나
7. 비교: 내가 보낸 내용이 맞고, 성공적으로 전송됨 ✅

1. 공감 (Empathize) → 사용자 이해
2. 정의 (Define) → 문제 정의
3. 아이디어 (Ideate) → 해결책 도출
4. 프로토타입 (Prototype) → 시제품 제작
5. 테스트 (Test) → 사용자 테스트 및 개선

실제 시스템 ≠ 멘탈 모델
(How it actually works) ≠ (How users think it works)

과거 경험 + 유사한 제품 + 문화적 배경 + 직접 사용
         ↓
    멘탈 모델 형성
         ↓
    새로운 제품에 적용

현실 세계의 은유:
- 휴지통에 버리면 → 삭제되지만 복구 가능
- 휴지통을 비우면 → 완전히 삭제

현실 세계의 은유:
- 폴더 안에 파일을 넣는다
- 폴더를 열면 내용물이 보인다
- 폴더를 다른 폴더 안에 넣을 수 있다

현실 세계의 은유:
- 상품을 카트에 담는다
- 계속 쇼핑할 수 있다
- 결제 전까지 담은 물건을 빼거나 수정 가능

문제점:
- 2000년대 이후 세대는 플로피 디스크를 본 적이 없음
- 멘탈 모델 형성 불가능
해결책:
- "저장" 텍스트 라벨 추가
- 클라우드 아이콘으로 대체

문제점:
- 처음 보는 사용자는 이게 메뉴인지 모름
- "3줄 = 메뉴"라는 학습이 필요
해결책:
- "메뉴" 텍스트 라벨 추가
- 처음 사용 시 툴팁 표시

문제점:
- 숨겨진 제스처는 발견하기 어려움
- 각 앱마다 제스처가 다르면 혼란
해결책:
- 온보딩에서 제스처 안내
- 업계 표준 제스처 사용

사용자 멘탈 모델: "이렇게 작동할 거야"
         ↓
        [ 간극 ]
         ↓
  실제 시스템: "사실은 이렇게 작동해"

질문 예시:
- "이 버튼을 클릭하면 무슨 일이 일어날 것 같나요?"
- "이 기능이 어떻게 작동한다고 생각하시나요?"
- "왜 그렇게 생각하셨나요?"

방법:
- 기능 카드를 사용자가 그룹화
- 사용자가 카테고리 이름 지정
→ 사용자의 정보 구조 이해

관찰:
- 사용자가 어디서 헤매는가?
- 어떤 버튼을 눌러야 할지 고민하는가?
- 기대와 다른 결과에 놀라는가?

방법:
- 사용자에게 생각을 소리 내어 말하게 함
- "지금 뭘 하려고 하시나요?"
- "이게 뭘 하는 버튼이라고 생각하시나요?"

멘탈 모델:
📷 "앨범에 사진을 넣으면, 원본이 이동하는 거겠지?"

실제 구현:
📷 "앨범은 사진을 '참조'만 하고, 원본은 그대로 있어요"

결과:
✅ 한 사진을 여러 앨범에 넣을 수 있음
✅ 앨범에서 삭제해도 원본은 남음

디자인 결정:
→ 사용자 교육 필요
→ "앨범에서 제거" vs "사진 삭제" 명확히 구분

멘탈 모델:
💾 "바로가기는 파일의 복사본이겠지?"

실제 구현:
💾 "바로가기는 원본 파일을 가리키는 포인터예요"

결과:
✅ 바로가기는 용량을 거의 차지하지 않음
⚠️ 원본을 삭제하면 바로가기가 작동하지 않음

디자인 결정:
→ 바로가기 아이콘에 화살표 표시
→ 원본이 없으면 에러 메시지

멘탈 모델:
🖱️ "파일을 다른 폴더로 드래그하면 이동하겠지?"

실제 구현:
🖱️ "같은 드라이브면 이동, 다른 드라이브면 복사"

문제점:
❌ 사용자가 예측하기 어려움

해결책:
✅ 드래그 중 커서 모양으로 알려주기 (➕ 복사, ↗️ 이동)
✅ Shift/Ctrl 키로 명확히 지정 가능