Skip to content

Worked example: design audit report

Generated by skills/ux-audit (or skills/design-system-qa). Demonstrates the canonical audit report format — TL;DR pyramid, severity-aggregated findings, citations.

# UX Audit: 신규 가입 흐름

> 검토일: 2026.05.08
> 검토자: design-ai (skills/ux-audit)
> 사용자 목표: 첫 화면에서 30초 안에 가입 완료
> 플랫폼: 모바일 웹 (iOS Safari + Android Chrome)
> 검토 기준: WCAG 2.1 AA + design-ai PRINCIPLES.md

## TL;DR

신규 가입 흐름에 12개 문제가 있습니다 (Critical 3 / High 4 / Medium 3 / Low 2). 가입 성공률이 32% 떨어지는 주된 원인은 (1) 비밀번호 필드가 IME 영향 받음, (2) 이메일 검증 후에도 form이 reset됨, (3) 마케팅 동의가 default-checked로 들어가 있어 한국 e-commerce 법 위반입니다.

**최우선 권장사항**: 마케팅 동의 default-checked 즉시 해제. 법적 리스크 + 사용자 신뢰 양쪽 회복.

## 핵심 발견

1. **마케팅 동의 default-checked로 체크됨** 🔴 — 정보통신망법 위반 가능
2. **비밀번호 입력 시 IME 활성화** 🔴 — 한글 자모가 비밀번호로 인식되어 검증 실패
3. **이메일 인증 후 form reset** 🔴 — 사용자가 입력한 값을 잃음 (이탈 발생)
4. **휴대폰 번호 검증 regex가 미국 형식** 🟠 — 한국 010-####-#### 거부
5. ~~기타 8건~~ (아래 상세)

## 권장사항

| 권장사항 | 담당 | 마감 |
| --- | --- | --- |
| 마케팅 동의 unchecked로 변경 | 프론트엔드 팀 | **즉시** |
| 비밀번호 필드 IME 비활성화 | 프론트엔드 팀 | 이번 sprint |
| 이메일 인증 후 form state 보존 | 풀스택 | 이번 sprint |
| 휴대폰 regex 한국 형식으로 변경 | 프론트엔드 팀 | 이번 sprint |

---

## 상세

### Critical (3건 — 출시 전 반드시 수정)

#### 1. 마케팅 동의 default-checked
**위치**: `src/screens/Signup.tsx:147`

**문제**: 마케팅 정보 수신 동의 체크박스가 페이지 로드 시 체크 상태로 표시됩니다.

**왜 문제인가**:
- 한국 정보통신망법 제50조의2: 마케팅 동의는 사용자가 명시적으로 opt-in해야 하며, default-checked는 명백한 위반.
- 사용자 신뢰 손상.
- 신고 시 과태료 (최대 3,000만원).

**해결**:
```diff
- <Checkbox defaultChecked label="마케팅 정보 수신 동의" />
+ <Checkbox label="마케팅 정보 수신 동의" />

또한 약관 동의(필수)와 분리해 별도 checkbox로 두어야 함.

참고: - knowledge/i18n/korean-product-conventions.md — 마케팅 동의 분리 규칙 - knowledge/i18n/korean-publishing.md — 약관/동의 패턴 - 정보통신망법 제50조의2

2. 비밀번호 필드 IME 활성화

위치: src/screens/Signup.tsx:198

문제: 비밀번호 입력 필드에 IME(한글 입력)이 활성화되어, 사용자가 영문 비밀번호 입력 시 한글 자모가 섞여 검증 실패.

재현: 1. 사용자가 비밀번호 Hello123 입력 의도 2. 한글 키보드 켜진 상태에서 H를 누르면 ㅗ 또는 ㅎ 입력됨 3. 사용자는 Hello123을 보고 있다고 생각하지만 서버는 ㅗㅔㅣㅣㅗ123 받음 4. 검증 실패 → 사용자 이탈

왜 문제인가: - 사용자에게 보이지 않는 silent failure - "분명 맞게 입력했는데 왜 안 되지?" → 이탈

해결: 

- <input type="password" />
+ <input type="password" inputMode="text" lang="en" autoCapitalize="off" />

iOS Safari에서는 lang="en" 속성이 IME를 영문 모드로 전환합니다.

참고: - knowledge/i18n/korean-typography.md — IME composition handling - examples/component-input.md — Input spec

3. 이메일 인증 후 form state reset

위치: src/screens/Signup.tsx:312 (state management)

문제: 이메일 인증 코드 입력 단계에서 페이지 navigate 되면, 이전 form 입력값(이름, 휴대폰, 비밀번호)이 모두 초기화됩니다.

재현: 1. 사용자가 1페이지에 모든 정보 입력 완료 2. 이메일 코드 받기 위해 2페이지 navigate 3. 코드 입력 후 1페이지로 돌아오면 모두 빈 칸

왜 문제인가: - 입력 다시 처음부터 — 정확한 이탈 트리거 - A/B 테스트 결과 (신규 가입 다단계의 default 이탈률) ~28% (n=4,521)

해결: - React Router 사용 시 form state를 URL search params 또는 localStorage에 보관. - 이메일 인증을 별도 화면 navigate 하지 말고 modal로 처리.

// Option A: URL state
useSearchParams().set("email-verify", "true")

// Option B: in-place modal
<Modal open={verifyOpen}>...</Modal>  // Form state preserved

참고: - knowledge/patterns/form-design.md — multi-step form 패턴 - examples/component-form.md — Form spec - examples/component-modal.md — modal 사용

High (4건 — 이번 sprint 수정)

4. 휴대폰 번호 검증 regex가 미국 형식

위치: src/lib/validators.ts:23

문제: 한국 010-####-#### 형식이 거부됩니다.

해결: 

- /^\d{3}-\d{3}-\d{4}$/  // (123) 456-7890 ← US 형식
+ /^01[0-9]-?\d{3,4}-?\d{4}$/  // KR 010-####-####

참고: knowledge/i18n/korean-product-conventions.md

5. Submit button이 disabled로 시작

위치: src/screens/Signup.tsx:405

문제: 사용자가 모든 필드 채우기 전엔 submit button이 disabled 상태. 사용자가 button 클릭하면 무엇이 잘못됐는지 알려주지 않음.

해결: button을 항상 enabled로 두고, 클릭 시 invalid field로 focus 이동 + 에러 메시지 표시.

cite knowledge/patterns/form-design.md.

6. (이하 4건 생략)

...

Medium (3건)

...

Low (2건)

...

잘 작동하는 부분

  • 헤더의 "회원가입" 타이틀이 명확하고 위치가 좋음 (h1 with proper hierarchy)
  • 약관 링크가 새 탭으로 열려 form state 유지됨
  • 입력 필드의 focus ring이 명확함 (3:1 contrast clear)
  • 한글 입력 — 비밀번호 외 — 모두 정상

Methodology

  • 검토 기준:
  • WCAG 2.1 AA
  • design-ai/PRINCIPLES.md 30 rules
  • 한국 정보통신망법 + e-commerce 법
  • 테스트 환경:
  • iOS 17.4 Safari (iPhone 14)
  • Android 14 Chrome (Galaxy S24)
  • 데스크톱 Chrome 124
  • Responsive scope: mobile 360px / 390px, tablet 768px, and desktop 1440px viewports. Findings must state whether the issue is mobile-only, desktop-only, or cross-breakpoint.
  • Assistive technology scope: screen reader pass covers field labels, error announcements, aria-describedby, and route-change focus restoration.
  • Tools: axe-core, manual review, A/B 테스트 데이터 (Mixpanel)
  • Sample: production 데이터 2026-04-01 ~ 2026-05-01, n=4,521 신규 가입 시도

Appendix

  • A. 12 발견 사항 전체 목록 (severity / location / cite)
  • B. 각 발견에 대한 스크린샷 / 재현 동영상
  • C. axe-core 자동 스캔 raw 결과
  • D. A/B 테스트 데이터 raw

(Appendix omitted in this example — would be 5+ pages of detail.) ```

Why this is a good audit report example

  • TL;DR가 답을 먼저 제시 — 12 문제, 우선 마케팅 동의부터.
  • Severity로 정렬 (Critical → High → Medium → Low), file-by-file 아닌 severity-by-severity.
  • 각 발견은 위치 / 문제 / 왜 / 해결 / 참고 5가지 항목 일관.
  • 법적 issue를 별도 강조 (정보통신망법 위반).
  • Code diff 제공 — 즉시 적용 가능.
  • Knowledge file 인용 — 이유 + 참고로.
  • "잘 작동하는 부분" — 균형 잡힌 보고서.
  • Methodology가 마지막 — 신뢰도 검증 가능하지만 본질은 위에 있음.
  • Don't bury the decision — avoid putting methodology before TL;DR in audit reports.

Cite knowledge/patterns/report-design.md for the canonical structure.

Cross-reference