통합 요약노트

Ch.16 최종 프로젝트

이론 기반 디자인 리디자인 — 진단, 개선, 발표

이 챕터의 내용

1디자인 진단서 작성2와이어프레임 리뷰3최종 발표 가이드
1

디자인 진단서 작성

15주간 배운 디자인 법칙들을 체크리스트로 정리하고, 심각도 평가와 개선 권고안이 포함된 진단서 템플릿을 완성합니다.

감상이 아닌 진단 느낌이 아닌 법칙

디자인 진단서(Design Diagnosis Report)란 특정 화면이나 서비스의 UI/UX를 디자인 법칙 기반으로 분석하고, 문제점과 개선 방향을 체계적으로 기술한 문서입니다. 주관적 의견('이상하다', '별로다')이 아닌 법칙 위반 근거와 심각도 평가가 핵심입니다.

디자인 진단서 = 화면 관찰 + 위반 법칙 명시 + 심각도 분류 + 개선 권고안

  • 디자인 진단서: 감상이 아닌 법칙 기반의 객관적 UI/UX 분석 문서
  • 진단 프로세스: 화면 → 관찰 → 위반 법칙 → 심각도 → 권고안
  • 법칙 체크리스트: 피츠, 힉, 제이콥, 밀러, 근접, 대비, 일관성, 피드백, 오류 예방, 심미성-사용성, 폰 레스토프, 게슈탈트 연속성 (12개+)
  • 심각도 4단계: Critical(사용 불가) > Major(심각한 혼란) > Minor(경미한 불편) > Cosmetic(미세 결함)
  • 진단서 최소 5개 항목, 각 항목에 법칙 근거와 심각도 필수
상세 노트 보기arrow_forward
2

와이어프레임 리뷰

8px 그리드, 60:30:10 배색, 타입 스케일 — 세 가지 시스템적 기준으로 와이어프레임을 객관적으로 검증합니다.

세 가지 기준으로 체계적으로 검증합니다

와이어프레임 리뷰는 '감'이 아닌 시스템적 기준으로 수행해야 합니다. 다음 세 가지 기준은 거의 모든 와이어프레임에 공통으로 적용됩니다.

와이어프레임 검증 3대 기준

  • 와이어프레임 검증 3대 기준: 8px 그리드, 60:30:10 배색, 타입 스케일
  • 8px 그리드: 모든 간격·크기가 8의 배수 (8, 16, 24, 32, 40, 48…)
  • 60:30:10: 주색 60% + 보조색 30% + 강조색 10%
  • 타입 스케일: 3~5단계, 일관된 비율, 본문 최소 16px
  • 피어 리뷰: 맥락 공유 → 독립 검토 → 발견 공유 → 토론 → 액션 아이템
  • 건설적 피드백 = 구체적 현상 + 법칙 근거 + 개선 대안
  • 7대 실수: 여백 불일치, CTA 매몰, 폰트 난립, 터치 타겟, 정보 과부하, 그룹핑 부재, 상태 누락
상세 노트 보기arrow_forward
3

최종 발표 가이드

진단서 → 법칙 적용 → 솔루션 → 와이어프레임 → 임팩트 5단계 발표 구조와, 평가 기준을 미리 파악하여 최고의 발표를 준비합니다.

진단에서 임팩트까지 5단계로 설득합니다

최종 발표는 단순한 결과물 보여주기가 아닙니다. 문제 발견 → 이론적 근거 → 해결 과정 → 결과물 → 기대 효과의 논리적 흐름으로 청중을 설득하는 것이 핵심입니다.

발표 시간 배분 권장: 진단 20% → 법칙 20% → 솔루션 25% → 와이어프레임 25% → 임팩트 10%

  • 발표 5단계: 진단 → 법칙 → 솔루션 → 와이어프레임 → 임팩트
  • 평가: 이론 정확도 30% + 문제 발견 20% + 토큰/시스템 20% + 솔루션 20% + 커뮤니케이션 10%
  • 16주 체계: 인지 법칙(Ch1~4) → 시각 원리(Ch5~8) → 행동 설계(Ch9~12) → 시스템(Ch13~15) → 통합(Ch16)
  • 고득점 핵심: 모든 주장에 법칙 근거 + Before/After 시각적 증명
  • Design is not art — it's applied cognitive science.
상세 노트 보기arrow_forward
key

핵심 용어 모음

1. 피츠의 법칙

중요한 버튼이 충분히 크고 접근하기 쉬운 위치에 있는가?

2. 힉의 법칙

한 화면에서 선택지가 과도하게 많지 않은가?

3. 제이콥의 법칙

사용자가 익숙한 패턴(관례)을 따르고 있는가?

4. 밀러의 법칙

한 번에 기억해야 할 항목이 7±2개 이내인가?

5. 근접의 법칙

관련 요소가 시각적으로 가까이 그룹핑되어 있는가?

6. 대비 원칙

텍스트와 배경의 명암비가 4.5:1 이상인가?

7. 일관성 원칙

동일 기능에 동일한 색상·아이콘·레이블을 사용하는가?

8. 피드백 원칙

사용자의 액션에 즉각적인 시각/촉각 피드백이 있는가?

9. 오류 예방

실수를 유발하는 UI 구조가 있지 않은가? (확인 다이얼로그 등)

10. 심미성-사용성 효과

시각적 완성도가 높아 사용성을 보조하고 있는가?

11. 폰 레스토프 효과

핵심 CTA가 시각적으로 뚜렷하게 구별되는가?

12. 게슈탈트 연속성

시선 흐름이 자연스럽게 이어지는가?

compare_arrows

비교 정리

항목건설적 피드백비건설적 피드백
구체성'CTA 버튼이 32px로 피츠의 법칙 위반 — 최소 44px 권장''버튼이 좀 작은 것 같아요'
근거'카드 간격이 12px, 20px 혼재 — 8px 그리드 위반''여백이 좀 이상해요'
대안 제시'강조색이 면적 25% 차지 → 10%로 줄이고 CTA에만 사용 권장''색이 너무 많아요'
항목고득점 발표감점 요인
이론피츠의 법칙(1954) — 거리와 크기의 관계를 정확히 설명피츠의 법칙 — '버튼을 크게 만들라는 것' (단순 오해)
문제 발견Critical 2개, Major 3개 등 심각도 분류 포함'이 화면이 불편합니다' (근거 없음)
솔루션Before/After 스크린샷 + 법칙 근거 + 기대 효과와이어프레임만 보여주고 근거 생략

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 코스 시작하기