Ch.16 최종 프로젝트
와이어프레임 리뷰
와이어프레임도 검증이 필요합니다
팀원이 만든 와이어프레임을 검토해달라는 요청을 받았습니다. 전체적으로 괜찮아 보이지만, 버튼 크기가 제각각이고 여백이 들쭉날쭉합니다. '괜찮은 것 같은데…'라고 말하려다 멈춥니다.
'괜찮아 보이는' 와이어프레임에서 체계적으로 문제를 찾아내는 방법은?
8px 그리드, 60:30:10 배색, 타입 스케일 — 세 가지 시스템적 기준으로 와이어프레임을 객관적으로 검증합니다.
핵심 내용
세 가지 기준으로 체계적으로 검증합니다
와이어프레임 리뷰는 '감'이 아닌 시스템적 기준으로 수행해야 합니다. 다음 세 가지 기준은 거의 모든 와이어프레임에 공통으로 적용됩니다.
와이어프레임 검증 3대 기준
혼자 보면 놓치고 함께 보면 발견합니다
피어 리뷰(Peer Review)는 동료가 서로의 결과물을 검토하는 과정입니다. 코드 리뷰와 마찬가지로, 디자인 피어 리뷰도 구조화된 프로세스를 따라야 효과적입니다.
1. 맥락 공유: 리뷰어에게 대상 화면, 타깃 사용자, 핵심 플로우를 설명
2. 독립 검토: 리뷰어가 체크리스트 기반으로 개별 검토 (15~20분)
3. 발견 공유: 각자 발견한 문제를 법칙 + 심각도와 함께 공유
4. 토론 및 합의: 의견이 다른 항목에 대해 근거 기반 토론
5. 액션 아이템 정리: 합의된 수정 사항을 우선순위별로 정리
자주 반복되는 실수에는 패턴이 있습니다
와이어프레임 단계에서 이 7가지를 점검하면, 비주얼 디자인과 개발 단계에서의 수정 비용을 대폭 줄일 수 있습니다.
8px 그리드 시스템에서 올바른 버튼 높이는?
60:30:10 배색 규칙에서 강조색(Accent)은 화면의 약 10%만 차지해야 한다
피어 리뷰에서 '색이 좀 이상해요'는 건설적 피드백의 좋은 예시이다
핵심 용어
여백(Padding/Margin)
8, 16, 24, 32, 40, 48px… 모두 8의 배수인가?
요소 크기
버튼 높이(40, 48px), 아이콘(24, 32px) 등이 8의 배수인가?
정렬
모든 요소가 그리드 라인에 정확히 스냅되어 있는가?
간격 일관성
같은 계층의 요소 간 간격이 동일한가?
60% 주색(Dominant)
배경·여백 등 가장 넓은 면적에 적용 (보통 흰색/밝은 회색)
30% 보조색(Secondary)
카드, 섹션 구분, 텍스트 블록 배경 등 중간 면적
10% 강조색(Accent)
CTA 버튼, 링크, 알림 배지 등 주목이 필요한 요소만
위반 징후
강조색이 화면의 20% 이상 → 시선 분산, CTA 매몰
계층 수
3~5단계 (H1, H2, Body, Caption, Small) — 6단계 이상이면 과잉
비율
1.25배(Major Second) 또는 1.333배(Perfect Fourth) 등 일관된 비율
본문 크기
최소 16px (모바일 기준) — 14px 이하는 가독성 저하
굵기(Weight)
Regular(400) + Bold(700) 두 가지면 충분. 3종 이상은 혼란
1. 여백 불일치
같은 계층인데 16px, 20px, 24px 혼재 → 8px 그리드 미준수
2. CTA 매몰
강조색을 여러 곳에 사용해 핵심 버튼이 묻힘 → 60:30:10 위반
3. 폰트 크기 난립
8가지 이상의 폰트 크기 → 시각적 계층 혼란
4. 터치 타겟 부족
모바일 버튼/링크가 44×44px 미만 → 피츠의 법칙 위반
5. 정보 과부하
한 화면에 15개 이상의 선택지 → 힉의 법칙 위반
6. 그룹핑 부재
관련 요소가 흩어져 있음 → 근접의 법칙 위반
7. 상태 누락
에러, 로딩, 빈 상태(empty state)를 고려하지 않음
비교 정리
| 항목 | 건설적 피드백 | 비건설적 피드백 |
|---|---|---|
| 구체성 | 'CTA 버튼이 32px로 피츠의 법칙 위반 — 최소 44px 권장' | '버튼이 좀 작은 것 같아요' |
| 근거 | '카드 간격이 12px, 20px 혼재 — 8px 그리드 위반' | '여백이 좀 이상해요' |
| 대안 제시 | '강조색이 면적 25% 차지 → 10%로 줄이고 CTA에만 사용 권장' | '색이 너무 많아요' |
건설적 피드백 = 구체적 현상 + 법칙 근거 + 개선 대안
핵심 정리
- 1와이어프레임 검증 3대 기준: 8px 그리드, 60:30:10 배색, 타입 스케일
- 28px 그리드: 모든 간격·크기가 8의 배수 (8, 16, 24, 32, 40, 48…)
- 360:30:10: 주색 60% + 보조색 30% + 강조색 10%
- 4타입 스케일: 3~5단계, 일관된 비율, 본문 최소 16px
- 5피어 리뷰: 맥락 공유 → 독립 검토 → 발견 공유 → 토론 → 액션 아이템
- 6건설적 피드백 = 구체적 현상 + 법칙 근거 + 개선 대안
- 77대 실수: 여백 불일치, CTA 매몰, 폰트 난립, 터치 타겟, 정보 과부하, 그룹핑 부재, 상태 누락
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작