통합 요약노트
Ch.8 UX 법칙 (상)
피츠의 법칙, 힉의 법칙, 밀러의 법칙
이 챕터의 내용
피츠의 법칙 — 크기와 거리
1954년 심리학자 Paul Fitts가 발견한 피츠의 법칙 — 타겟의 크기와 거리가 조작 시간을 결정합니다.
타겟이 크고 가까울수록 빠르게 도달합니다
피츠의 법칙(Fitts's Law)은 인간-컴퓨터 상호작용(HCI)의 가장 기본적인 법칙입니다. 1954년 심리학자 Paul Fitts가 실험으로 증명했으며, 이후 수천 건의 연구로 검증되었습니다.
핵심 통찰: D(거리)가 줄면 빨라지고, W(크기)가 커지면 빨라진다 — 로그 함수이므로 극단적으로 크게 만들 필요는 없다
- 피츠의 법칙: T = a + b × log₂(2D/W) — 크기(W)↑ 거리(D)↓ = 빠른 조작
- 최소 터치 타겟: Apple 44pt, Google 48dp — 손가락 끝 면적 기반
- 무한 너비 효과: 화면 가장자리 버튼은 방향만 맞으면 도달
- 실무: 하단 내비게이션, 컨텍스트 메뉴, 관련 액션 그룹핑
- 핵심: UI 배치의 모든 결정은 '크기와 거리'에서 시작된다
힉의 법칙 — 선택의 역설
1952년 심리학자 William Hick과 Ray Hyman이 발견한 힉의 법칙 — 선택지가 많을수록 결정이 느려집니다.
선택지가 늘면 결정 시간은 로그적으로 증가합니다
힉의 법칙(Hick's Law)에 따르면, 결정 시간(T)은 선택지 수(n)에 비례하여 로그적으로 증가합니다. 선택지가 2배가 되면 결정 시간은 2배가 아니라, 일정량만큼 증가합니다.
핵심: 선택지 2개 → 1초, 4개 → 2초, 8개 → 3초, 16개 → 4초 — 선택지가 2배씩 늘어도 시간은 1초씩만 증가
- 힉의 법칙: T = b × log₂(n+1) — 선택지↑ 결정시간 로그적↑
- 선택의 역설: 선택지가 너무 많으면 오히려 선택을 포기함
- 점진적 공개: 현재 단계에 필요한 선택지만 노출
- 카테고리화: 100개를 5그룹 × 20개로 구조화 → 인지 부담 감소
- 핵심: '한 번에 마주하는 선택지 수'를 줄여라
밀러의 법칙 — 7±2의 마법
1956년 인지심리학자 George Miller가 발견한 7±2의 법칙 — 작업기억(Working Memory)의 용량 한계입니다.
한 번에 기억할 수 있는 항목은 5~9개가 한계입니다
1956년 George Miller는 논문 'The Magical Number Seven, Plus or Minus Two'에서, 인간의 작업기억(Working Memory)이 한 번에 7±2개의 항목(chunk)만 처리할 수 있음을 발표했습니다.
작업기억 용량: 최소 5개 ~ 최대 9개 (평균 7개) — 이것이 '마법의 숫자 7'이다
- 밀러의 법칙: 작업기억 용량 = 7±2 chunks
- 청킹(Chunking): 개별 항목을 의미 있는 묶음으로 그룹핑
- 전화번호·카드번호: 하이픈/공백으로 chunk 분리 → 기억·입력 오류 감소
- UI 적용: 내비게이션 5~7개, 탭바 3~5개, 폼 필드 5~7개/섹션
- 핵심: 정보를 줄이는 것이 아니라 '묶어서 보여주는' 것이 목표
핵심 용어 모음
최소 터치 타겟
44×44px 이상 — 성인 손가락 끝 평균 접촉 면적이 약 10mm(≈44px)
하단 내비게이션
엄지 도달 거리(Thumb Zone) 내에 핵심 액션 배치 → D 최소화
컨텍스트 메뉴
우클릭/롱프레스 위치에 메뉴 표시 → 커서에서 타겟까지 D ≈ 0
관련 액션 그룹핑
삭제 버튼은 항목 바로 옆에 → 시선·커서 이동 최소화
TV 리모컨
50개 버튼 → Apple Remote 6개 버튼. 자주 쓰는 기능만 물리 버튼, 나머지는 화면 UI로
검색 필터
모든 필터를 한 번에 표시 ✗ → 단계별 좁히기(가격 → 브랜드 → 색상) ✓
회원가입 폼
한 화면에 20개 필드 ✗ → 3단계 위저드(기본정보 → 프로필 → 설정) ✓
설정 화면
모든 설정 나열 ✗ → 카테고리별 그룹핑(일반 / 알림 / 보안 / 계정) ✓
상단 내비게이션
메뉴 항목 5~7개 이내 — 초과 시 '더보기(···)' 또는 드롭다운으로 그룹핑
하단 탭바
iOS/Android 권장: 3~5개. 5개 초과 시 '더보기' 탭 추가
폼 필드
한 화면에 5~7개 필드 — 초과 시 섹션 분리 또는 다단계 위저드
카드 목록
한 행(row)에 3~4장 — 초과 시 시각적 그룹핑 또는 캐러셀
비교 정리
| 항목 | 피츠 법칙 준수 | 피츠 법칙 위반 |
|---|---|---|
| CTA 버튼 | 화면 하단 고정, 전체 너비, 높이 48px 이상 | 화면 상단 구석, 작은 텍스트 링크 |
| 닫기 버튼 | 모달 우상단, 44px 이상 터치 영역 | 20px 미만의 작은 X 아이콘, 팝업 밖에 위치 |
| 삭제 확인 | 삭제 버튼 바로 아래에 '확인/취소' 표시 | 삭제 버튼은 좌측, 확인 팝업은 화면 중앙 |
| 내비게이션 | 하단 탭바 5개 이내, 아이콘 + 레이블 | 상단 햄버거 메뉴 안에 모든 메뉴 숨김 |
| 항목 | 힉의 법칙 적용 | 선택지 과부하 |
|---|---|---|
| 내비게이션 | 상위 5개 메뉴 → 하위 메뉴 펼침 | 모든 하위 메뉴를 한 번에 나열 (20+개) |
| 이커머스 필터 | 가격대 먼저 → 브랜드 → 색상 순차 좁히기 | 가격·브랜드·색상·사이즈·평점 한꺼번에 노출 |
| 온보딩 | 관심사 3개만 선택 → 추천 알고리즘이 나머지 결정 | 30개 카테고리 중 원하는 것을 모두 선택하세요 |
| 결정 속도 | 각 단계에서 3~5개 중 택1 → 빠른 결정 | 한 번에 20개 중 택1 → 분석 마비(Analysis Paralysis) |
| 항목 | 청킹 적용 | 청킹 미적용 |
|---|---|---|
| 전화번호 입력 | 3칸 분리: [010]-[1234]-[5678] | 1칸 입력: [01012345678] |
| 내비게이션 | 5개 메인 메뉴 + 드롭다운 서브메뉴 | 12개 메뉴를 한 줄에 나열 |
| 긴 폼 (15필드) | 3섹션(기본정보 5 + 주소 5 + 결제 5) | 15개 필드를 스크롤로 나열 |
| 사용자 반응 | 구조가 보여서 '할 만하다' 느낌 | 끝이 안 보여서 '포기하고 싶다' 느낌 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기