핵심 비유
'잘 정리된 교실' 비유 — 좋은 디자인은 잘 정리된 교실 같다. ①사물함이 다 같은 모양이라 한 번 여는 법을 배우면 전부 연다(일관성), ②미술 도구는 미술 도구끼리, 청소 도구는 청소 도구끼리 가까이 모여 있다(그루핑), ③칠판엔 오늘 핵심만 적혀 있고 자세한 자료는 필요할 때 서랍에서 꺼낸다(점진적 공개). 이 세 가지는 화면을 '한눈에 이해되게' 만드는 정리정돈의 기술이다.
핵심 포인트
- 일관성 — 같은 기능은 같은 모습. 버튼 스타일 1세트, 색 팔레트·간격·폰트 통일. 한 번 배우면 어디서든 통한다.
- 일관성이 깨지면 페이지마다 다시 학습해야 하고 아마추어처럼 보인다(교복 비유: 같은 학교면 같은 교복).
- 그루핑(근접성) — 관련된 것은 가까이(8px), 다른 그룹은 멀리(24px+). 간격 비율 3:1이면 라벨 없이도 묶여 보인다.
- 점진적 공개 — 처음엔 핵심 3~5개만, 나머지는 '더보기'로. 모든 옵션을 한 번에 펼치면 인지 과부하(게임 튜토리얼: 처음에 모든 기술을 다 주지 않음).
- 세 원리의 공통점 = 인지 부하를 낮춘다 — 사용자가 머리를 덜 쓰게 하는 게 좋은 디자인.
- 일관성은 '내 앱 안'뿐 아니라 세상의 약속도 따른다 — 장바구니=카트 아이콘, 저장=플로피·체크. 굳이 새 기호를 발명하면 사용자가 다시 배워야 한다(외부 일관성).
교사 팁
일관성은 교복 비유("같은 학교면 같은 교복")로 디자인 시스템의 역할을 설명한다(design-sense consistency classGuide). 그루핑은 칠판에 동그라미를 두 묶음으로 그리며 "왜 두 그룹으로 보일까?"를 물으면 근접성 원리가 즉시 드러난다(design-sense gestalt-grouping classGuide). 점진적 공개는 게임 튜토리얼("처음에 모든 기술을 다 주면?")로 연결한다(design-sense progressive-disclosure classGuide). design-sense 이론 탭의 세 카드를 묶어 보여주고 퀴즈 탭으로 점검.
좋은 예 vs 나쁜 예
- ✅ 전 화면 버튼 스타일 통일. ❌ 페이지마다 버튼 모양 제각각. (design-sense
consistency)
- ✅ 관련 항목 8px·그룹 간 24px. ❌ 전부 16px 동일 → 어디서 나뉘는지 모름. (design-sense
gestalt-grouping)
- ✅ 핵심 3~5개 + '더보기'. ❌ 모든 옵션을 한 화면에 → 압도당함. (design-sense
progressive-disclosure)
실습·평가
- 실습: '설정 화면'을 설계하되 ①버튼 스타일 통일 ②관련 설정끼리 그룹(간격으로) ③자주 안 쓰는 고급 설정은 '더보기'로 숨기기 — 세 원리를 한 화면에 동시 적용.
- O/X 퀴즈: "기능은 첫 화면에 전부 펼쳐 놓아야 사용자가 헤매지 않는다." → X (핵심만 먼저, 나머지는 점진적 공개)