30문제가 다루는 내용
레벨별로 어떤 개념을 묻는지 정리했습니다. 정답은 직접 풀어 보며 확인하세요.
레벨 1 · 초급 — UX 기본 원칙
| 분야 | 개념 |
|---|---|
| 버튼 | 명확한 레이블 |
| 타이포그래피 | 텍스트 가독성 |
| 색상 | 색상 대비 |
| 폼 | 폼 레이블 |
| 터치 | 터치 타겟 |
| 여백 | 여백과 밀도 |
| 아이콘 | 아이콘 + 텍스트 |
| 일관성 | 디자인 일관성 |
| 텍스트 | 텍스트 오버플로우 |
| 상태 | 비활성 상태 |
레벨 2 · 중급 — 인터랙션과 피드백
| 분야 | 개념 |
|---|---|
| 폼 | 선택 UI 패턴 |
| 피드백 | 인라인 에러 |
| 피드백 | 로딩 상태 |
| 네비게이션 | 정보 구조 |
| 폼 | 스마트 기본값 |
| 피드백 | 토스트 알림 |
| 네비게이션 | 브레드크럼 |
| 빈 상태 | 빈 상태 디자인 |
| 모달 | 인라인 확장 |
| 패스워드 | 실시간 유효성 |
레벨 3 · 고급 — 패턴과 접근성
| 분야 | 개념 |
|---|---|
| 패턴 | Undo 패턴 |
| 접근성 | 색상 독립성 |
| 패턴 | 점진적 공개 |
| 마이크로인터랙션 | 시각적 피드백 |
| 레이아웃 | 모바일 퍼스트 |
| 다크패턴 | 다크 패턴 회피 |
| 인지 부하 | 시각적 위계 |
| 피츠의 법칙 | 피츠의 법칙 |
| 게슈탈트 | 근접성 원리 |
| 에러 방지 | 오류 방지 설계 |
자주 나오는 원칙
대비와 색상
WCAG AA는 본문 텍스트에 4.5:1 이상의 대비를 요구하고, 색상만으로 상태를 구분하지 말라고 정합니다. 옅은 회색 글씨, 빨강·초록 점만으로 된 상태 표시는 실제 사용자를 놓칩니다.
누르는 영역과 거리
터치 영역은 Apple 기준 44×44pt, Material 기준 48×48dp 이상이 권장됩니다. 피츠의 법칙은 반대로도 씁니다. 삭제 같은 위험한 버튼은 작게, 주요 버튼과 떨어뜨려 둡니다.
피드백과 되돌리기
오류는 해당 입력칸 바로 아래에, 불러오는 중에는 진행 상태를 보여 주고, '정말 삭제할까요?'보다 되돌리기를 우선합니다. 확인 창은 몇 번 지나면 아무도 읽지 않습니다.
한 번에 보여 줄 양 줄이기
점진적 공개, 시각적 위계, 게슈탈트 근접성은 모두 사용자가 머릿속에 들고 있어야 할 양을 줄입니다. 고급 기능은 숨기고, 관련된 것은 묶고, 중요한 것은 크게 보여 줍니다.