@wooojin/forgen 0.4.8 → 0.4.9

package/assets/dev-guide/fe/sources/a11y-dx/chrome-devtools-memory.md

@@ -0,0 +1,150 @@
+---
+title: Chrome DevTools 메모리 패널 진단 가이드
+source: https://developer.chrome.com/docs/devtools/memory-problems
+fetched: 2026-05-18
+category: devtools-memory
+---
+
+# Chrome DevTools Memory Panel
+
+## 언제 쓰는가
+
+- 페이지를 오래 쓸수록 느려지거나 탭이 크래시될 때
+- Task Manager에서 메모리가 지속 상승할 때
+- SPA에서 라우트 이동 후에도 메모리가 반환되지 않을 때
+
+---
+
+## 1단계: Task Manager로 메모리 누수 확인
+
+1. `Shift+Esc` → Chrome Task Manager 열기
+2. 오른쪽 클릭 → **JavaScript Memory** 컬럼 활성화
+3. 문제 탭의 **JavaScript Memory** 값이 계속 증가하면 누수 의심
+
+---
+
+## 세 가지 진단 도구
+
+### A. Heap Snapshot (정적 스냅샷)
+
+**용도:** 특정 시점에 메모리에 무엇이 있는지 파악, Detached DOM 찾기
+
+**절차:**
+1. Memory 패널 → **Heap snapshot** 선택 → **Take snapshot**
+2. 의심 동작 수행 (라우트 이동, 모달 열고 닫기 등)
+3. 두 번째 스냅샷 → **Comparison** 뷰 선택
+4. `# Delta` 양수인 항목이 증가한 객체
+5. 검색창에 `Detached` 입력 → Detached DOM 트리 찾기
+6. **Objects pane**에서 어떤 변수가 참조 중인지 확인
+
+### B. Allocation Timeline (동적 추적)
+
+**용도:** 어느 시점에 메모리가 급증하는지 타임라인으로 파악
+
+**절차:**
+1. Memory 패널 → **Allocations on timeline** 선택 → **Start**
+2. 문제 동작 반복 → **Stop**
+3. 파란 막대 = 새 할당. 막대를 클릭하면 해당 시점 할당 객체 목록
+4. 사라지지 않는 파란 막대(회색으로 변하지 않는 것)가 누수 후보
+
+### C. Allocation Sampling (함수별 분석)
+
+**용도:** 어떤 함수가 메모리를 가장 많이 할당하는지 성능 부담 없이 분석
+
+**절차:**
+1. Memory 패널 → **Allocation sampling** → **Start**
+2. 동작 수행 → **Stop**
+3. **Heavy (Bottom Up)** 뷰에서 메모리 소비 함수 Top N 확인
+
+---
+
+## 흔한 메모리 누수 패턴
+
+### 1. Detached DOM
+```js
+// Bad: DOM 제거 후에도 JS에서 참조 유지
+let cachedNode;
+function init() {
+  cachedNode = document.getElementById('temp');
+}
+function remove() {
+  document.body.removeChild(cachedNode);
+  // cachedNode 변수가 여전히 노드를 참조 → GC 불가
+}
+
+// Fix: 참조 해제
+function remove() {
+  document.body.removeChild(cachedNode);
+  cachedNode = null; // 참조 해제
+}
+```
+
+### 2. 이벤트 리스너 미제거
+```js
+// Bad: 컴포넌트 unmount 시 리스너 제거 안 함
+useEffect(() => {
+  window.addEventListener('resize', handleResize);
+  // cleanup 없음
+}, []);
+
+// Fix
+useEffect(() => {
+  window.addEventListener('resize', handleResize);
+  return () => window.removeEventListener('resize', handleResize);
+}, []);
+```
+
+### 3. 타이머 미정리
+```js
+// Bad
+useEffect(() => {
+  const id = setInterval(poll, 1000);
+  // clearInterval 없음
+}, []);
+
+// Fix
+useEffect(() => {
+  const id = setInterval(poll, 1000);
+  return () => clearInterval(id);
+}, []);
+```
+
+### 4. 클로저에 의한 의도치 않은 참조 유지
+```js
+// Bad: 큰 배열이 클로저에 캡처됨
+function setup() {
+  const bigData = new Array(1000000).fill(0);
+  return function handler() {
+    // bigData를 실제로 쓰지 않아도 클로저가 유지
+    console.log('clicked');
+  };
+}
+
+// Fix: 필요한 값만 클로저 내부에 두기
+function setup() {
+  const bigData = new Array(1000000).fill(0);
+  const needed = bigData[0]; // 필요한 값만 추출
+  return function handler() {
+    console.log(needed);
+  };
+}
+```
+
+---
+
+## 진단 워크플로우 요약
+
+1. Task Manager로 누수 확인 (JavaScript Memory 열 모니터링)
+2. Performance 패널 + Memory 체크박스로 힙 추이 녹화
+3. Heap Snapshot 2개 → Comparison으로 증가 객체 특정
+4. `Detached` 검색으로 떠도는 DOM 확인
+5. Allocation Timeline으로 누수 발생 시점 핀포인트
+6. 코드에서 참조 해제 / cleanup 추가 → 재검증
+
+---
+
+## React SPA 특유 주의사항
+
+- **useEffect cleanup** 누락이 가장 흔한 원인
+- React 18 StrictMode는 개발 환경에서 useEffect를 2번 실행 → cleanup 누락 즉시 발견 가능
+- 라우트 이동 후 Heap Snapshot 비교: 이전 페이지 컴포넌트 인스턴스가 남아있으면 누수

package/assets/dev-guide/fe/sources/a11y-dx/chrome-devtools-performance.md

@@ -0,0 +1,99 @@
+---
+title: Chrome DevTools 성능 패널 진단 가이드
+source: https://developer.chrome.com/docs/devtools/performance
+fetched: 2026-05-18
+category: devtools-perf
+---
+
+# Chrome DevTools Performance Panel
+
+## 언제 쓰는가
+
+- 페이지가 느리게 느껴질 때 (스크롤 jank, 애니메이션 끊김, 클릭 반응 지연)
+- LCP/TBT/CLS 점수를 개선하기 전 병목 위치 특정
+- "어떤 JS 함수가 메인 스레드를 막는가" 파악
+
+---
+
+## 기본 녹화 절차
+
+1. DevTools 열기 (Mac: `Cmd+Option+I` / Win: `Ctrl+Shift+I`)
+2. **Performance** 탭 선택
+3. **Screenshots** 체크박스 활성화
+4. CPU 스로틀링 설정: 일반 사용자 환경 시뮬레이션 → **4x slowdown** 권장
+5. **Record** 버튼 클릭 → 문제 동작 재현 → **Stop**
+
+---
+
+## 핵심 지표
+
+| 지표 | 설명 | 목표 |
+|------|------|------|
+| **FPS** | 초당 프레임 수. 빨간 바 = jank | 60fps 유지 |
+| **FCP** | First Contentful Paint | ≤ 1.8s |
+| **LCP** | Largest Contentful Paint | ≤ 2.5s |
+| **TBT** | Total Blocking Time (메인 스레드 블로킹 합계) | ≤ 200ms |
+| **CLS** | Cumulative Layout Shift | ≤ 0.1 |
+
+---
+
+## Flame Chart 읽는 법
+
+- **X축**: 시간 경과
+- **Y축**: 콜스택 (위 = 부모, 아래 = 자식)
+- **바 너비**: 실행 시간 (넓을수록 오래 걸림)
+- **빨간 삼각형**: 잠재적 문제 (Long Task, Forced Layout 등)
+- **노란색 바**: JS 실행
+- **보라색 바**: Rendering (Style/Layout)
+- **초록색 바**: Painting
+
+---
+
+## Long Task 식별
+
+- 50ms 이상 메인 스레드를 점유하는 작업 = Long Task
+- Flame chart에서 빨간 삼각형 → 클릭하면 소스 위치로 이동
+- **Summary 탭**에서 시간 분포 확인 (Scripting / Rendering / Painting 비율)
+
+---
+
+## Forced Layout (Layout Thrashing) 진단
+
+**원인:** JS에서 레이아웃 속성(offsetTop, clientWidth 등)을 읽고 쓰기를 반복하면 브라우저가 강제로 layout을 재계산
+
+**증상:** Flame chart에서 Layout 블록이 JS 실행 사이사이에 자주 등장
+
+**해결:**
+```js
+// Bad: 읽기/쓰기 혼재
+elements.forEach(el => {
+  const h = el.offsetHeight; // 읽기 → layout 강제
+  el.style.height = h + 10 + 'px'; // 쓰기
+});
+
+// Good: 읽기 먼저, 쓰기 나중에
+const heights = elements.map(el => el.offsetHeight);
+elements.forEach((el, i) => {
+  el.style.height = heights[i] + 10 + 'px';
+});
+```
+
+---
+
+## 진단 워크플로우
+
+1. 증상 재현 → Performance 녹화
+2. FPS 차트에서 빨간 구간(drop) 찾기
+3. 해당 구간 Flame chart 줌인
+4. 가장 넓은 바(오래 걸리는 함수) 클릭 → Source 확인
+5. Summary 탭에서 Scripting/Rendering 비율 확인
+6. Long Task 원인: 무거운 JS 계산이면 코드 분할·Web Worker 검토
+7. Rendering 비율 높으면 CSS 속성 변경 최소화, `will-change`, `transform` 활용
+
+---
+
+## 성능 비교 (Before/After)
+
+- 최적화 전 녹화 저장 → 최적화 후 재녹화
+- **CPU throttling 동일하게 맞추기** (결과 재현성)
+- 3회 이상 녹화하여 평균값으로 비교 (노이즈 제거)

package/assets/dev-guide/fe/sources/a11y-dx/lighthouse-audits.md

@@ -0,0 +1,146 @@
+---
+title: Lighthouse 접근성·성능·Best Practices 항목 레퍼런스
+source: https://developer.chrome.com/docs/lighthouse/accessibility/ https://developer.chrome.com/docs/lighthouse/performance/
+fetched: 2026-05-18
+category: lighthouse
+---
+
+# Lighthouse 감사 항목
+
+## 점수 체계
+
+- **90–100**: 초록 (Good)
+- **50–89**: 주황 (Needs Improvement)
+- **0–49**: 빨강 (Poor)
+- 접근성 점수: 각 감사 항목의 가중 평균 (axe 영향도 기준), **이진 평가** (부분 통과 없음)
+
+---
+
+## 성능(Performance) 핵심 지표
+
+| 지표 | 가중치 | 설명 | 목표 |
+|------|--------|------|------|
+| **LCP** (Largest Contentful Paint) | 25% | 가장 큰 콘텐츠 표시 시점 | ≤ 2.5s |
+| **TBT** (Total Blocking Time) | 30% | 메인 스레드 블로킹 합계 | ≤ 200ms |
+| **CLS** (Cumulative Layout Shift) | 25% | 예기치 않은 레이아웃 이동 | ≤ 0.1 |
+| **FCP** (First Contentful Paint) | 10% | 초기 콘텐츠 표시 시점 | ≤ 1.8s |
+| **Speed Index** | 10% | 시각적 완성 속도 | ≤ 3.4s |
+
+**주의:** 점수 변동 요인 — A/B 테스트, 네트워크 라우팅, 브라우저 확장, 안티바이러스. 3회 이상 측정 평균값 사용 권장.
+
+---
+
+## 접근성(Accessibility) 감사 항목
+
+### ARIA 관련
+
+| 항목 | 가중치 | 핵심 |
+|------|--------|------|
+| `[aria-*]` 속성이 역할과 일치 | 10 | 잘못된 aria 조합 방지 |
+| `[aria-*]` 값이 유효 | 10 | 오타·잘못된 값 방지 |
+| `[role]` 값이 유효 | 10 | 표준 role만 사용 |
+| role에 필요한 `[aria-*]` 모두 제공 | 10 | 불완전한 ARIA 패턴 방지 |
+| 자식 role 요건 충족 | 10 | `listbox > option` 등 구조 준수 |
+| 부모 role 요건 충족 | 10 | `li` → `ul/ol` 내부 등 |
+
+### 이름(Accessible Name) 관련
+
+| 항목 | 가중치 | 핵심 |
+|------|--------|------|
+| 버튼에 접근 가능한 이름 | 10 | `aria-label` or 텍스트 콘텐츠 필수 |
+| 링크에 식별 가능한 이름 | 7 | "여기 클릭" 같은 모호한 링크 금지 |
+| 폼 요소에 레이블 연결 | 10 | `<label for>` or `aria-label` |
+| 이미지에 `alt` 속성 | 10 | 장식 이미지는 `alt=""` |
+| `<video>`에 자막 트랙 | 10 | `<track kind="captions">` |
+| 다이얼로그에 접근 가능한 이름 | 7 | `aria-labelledby` or `aria-label` |
+
+### 포커스·내비게이션
+
+| 항목 | 가중치 | 핵심 |
+|------|--------|------|
+| `tabindex` > 0 없음 | 7 | 자연스러운 탭 순서 방해 금지 |
+| 스킵 링크가 포커스 가능 | 3 | `<a href="#main">` 등 |
+| 페이지에 제목/랜드마크/스킵링크 존재 | 7 | 스크린리더 내비게이션 진입점 |
+
+### 구조·시맨틱
+
+| 항목 | 가중치 | 핵심 |
+|------|--------|------|
+| `<html lang>` 유효한 언어 코드 | 7 | `lang="ko"` |
+| `<title>` 요소 존재 | 7 | 탭/스크린리더 페이지 식별 |
+| 제목 계층 순차적 (h1→h2→h3) | 3 | 건너뛰기 금지 |
+| 리스트 구조 올바름 | 7 | `<ul>` > `<li>` only |
+
+### 시각·색상
+
+| 항목 | 가중치 | 핵심 |
+|------|--------|------|
+| 배경/전경 색상 대비 충분 | 7 | 일반 텍스트 4.5:1, 큰 텍스트 3:1 |
+| 링크가 색상 외 수단으로 구별 | 7 | 밑줄, 아이콘 등 |
+| 사용자 확대 허용 (`user-scalable`) | 10 | `maximum-scale` ≥ 5 |
+
+### 숨김·포커스 관리
+
+| 항목 | 가중치 | 핵심 |
+|------|--------|------|
+| `aria-hidden="true"` 요소에 포커스 가능 자식 없음 | 7 | 숨겨진 요소에 탭 진입 방지 |
+| `<body>`에 `aria-hidden="true"` 없음 | 10 | 전체 페이지 숨김 금지 |
+
+### 고유 식별자
+
+| 항목 | 가중치 | 핵심 |
+|------|--------|------|
+| ARIA ID 중복 없음 | 10 | `aria-labelledby` 오작동 방지 |
+| 포커스 가능 요소의 `id` 중복 없음 | 7 | |
+
+---
+
+## 자주 실패하는 항목 & 빠른 수정
+
+```html
+<!-- 1. 버튼 이름 없음 (가중치 10) -->
+<!-- Bad -->
+<button><img src="close.svg"></button>
+<!-- Fix -->
+<button aria-label="닫기"><img src="close.svg" alt=""></button>
+
+<!-- 2. 입력 필드 레이블 없음 (가중치 10) -->
+<!-- Bad -->
+<input type="text" placeholder="이름">
+<!-- Fix -->
+<label for="name">이름</label>
+<input id="name" type="text">
+
+<!-- 3. 이미지 alt 없음 (가중치 10) -->
+<!-- Bad -->
+<img src="hero.jpg">
+<!-- Fix -->
+<img src="hero.jpg" alt="서비스 히어로 이미지">
+
+<!-- 4. 사용자 확대 차단 (가중치 10) -->
+<!-- Bad -->
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<!-- Fix -->
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<!-- 5. 색상 대비 부족 (가중치 7) -->
+<!-- Bad: #999 on white = 2.85:1 -->
+<p style="color: #999;">안내 텍스트</p>
+<!-- Fix: #767676 on white = 4.54:1 -->
+<p style="color: #767676;">안내 텍스트</p>
+```
+
+---
+
+## Lighthouse 실행 방법
+
+```bash
+# CLI
+npm install -g lighthouse
+lighthouse https://example.com --output html --output-path report.html
+
+# 특정 카테고리만
+lighthouse https://example.com --only-categories=accessibility,performance
+```
+
+DevTools → Lighthouse 탭 → 카테고리 선택 → Analyze page load

package/assets/dev-guide/fe/sources/a11y-dx/react-devtools-profiler.md

@@ -0,0 +1,128 @@
+---
+title: React DevTools Profiler 렌더 진단 가이드
+source: https://react.dev/learn/react-developer-tools
+fetched: 2026-05-18
+category: react-profiler
+---
+
+# React DevTools Profiler
+
+## 설치
+
+### 브라우저 확장 (권장)
+- Chrome: [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
+- Firefox: [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
+- Edge: [Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
+
+### Safari / 기타
+```bash
+npm install -g react-devtools
+react-devtools
+```
+`<head>`에 추가:
+```html
+<script src="http://localhost:8097"></script>
+```
+
+DevTools 열면 **Components** 탭과 **Profiler** 탭이 생긴다.
+
+---
+
+## Profiler 탭 기본 사용
+
+### 녹화
+1. Profiler 탭 → **Record** 버튼(원형) 클릭
+2. 문제 동작 수행 (버튼 클릭, 입력, 페이지 이동 등)
+3. **Stop** 클릭
+
+### React의 두 단계 이해
+- **Render phase**: `render()` 호출, 이전 결과와 diff 계산
+- **Commit phase**: 실제 DOM에 변경 반영, lifecycle 호출
+
+---
+
+## Flame Chart 읽는 법
+
+- **가로 길이**: 렌더에 걸린 시간 (길수록 느림)
+- **색상**
+  - 노란색(황색): 상대적으로 느린 렌더
+  - 파란색: 상대적으로 빠른 렌더
+  - 회색: 이 commit에서 렌더되지 않음 (재사용됨)
+- 컴포넌트 클릭 → 우측 패널에서 해당 commit의 props/state 확인
+- **commit bar** (상단 막대): 각 commit의 상대적 소요 시간. 높을수록 느린 commit
+
+---
+
+## Ranked Chart
+
+- 단일 commit에서 렌더 시간 기준으로 컴포넌트를 내림차순 정렬
+- 맨 위 = 가장 느린 컴포넌트 (자식 포함 합산)
+- 병목 컴포넌트를 빠르게 특정할 때 유용
+
+---
+
+## "Why did this render?" 기능
+
+Profiler 설정(⚙️) → **"Record why each component rendered while profiling"** 활성화
+
+녹화 후 컴포넌트 클릭 → **"Why did this render?"** 섹션에 원인 표시:
+- `Props changed` + 변경된 prop 이름
+- `State changed` + 변경된 state 이름
+- `Context changed`
+- `Hooks changed`
+- `Parent component rendered`
+
+**흔한 불필요 렌더 원인:**
+```js
+// Bad: 매 렌더마다 새 객체 생성
+<MyComp style={{ color: 'red' }} />
+
+// Fix: 객체를 외부로 분리 or useMemo
+const style = { color: 'red' };
+<MyComp style={style} />
+```
+
+---
+
+## Highlight Updates 기능
+
+Components 탭 → 설정(⚙️) → **"Highlight updates when components render"** 활성화
+
+페이지 위에서 컴포넌트가 렌더될 때 파란→노란→빨간 테두리로 강조:
+- 파란색: 렌더 횟수 적음
+- 빨간색: 렌더 횟수 많음 (최적화 필요)
+
+스크롤하거나 마우스를 움직이기만 해도 렌더되는 컴포넌트를 시각적으로 파악 가능
+
+---
+
+## 불필요 렌더 최적화 체크리스트
+
+| 원인 | 해결 |
+|------|------|
+| 부모 렌더 시 자식 전체 재렌더 | `React.memo()` 로 자식 메모이제이션 |
+| 매 렌더마다 새 함수/객체 props | `useCallback`, `useMemo` 사용 |
+| Context 값 변경 시 모든 소비자 재렌더 | Context 분리 또는 `useMemo`로 값 안정화 |
+| State 위치가 너무 높음 | State를 사용하는 컴포넌트 가까이 내리기 |
+| List에 key 없거나 index 사용 | 고유 ID를 key로 사용 |
+
+---
+
+## 프로덕션 환경 프로파일링
+
+기본적으로 프로파일러는 개발 빌드에서만 동작.
+프로덕션에서 사용하려면:
+```bash
+# webpack alias 설정
+react-dom/profiling  대신 react-dom 사용 (package.json alias)
+```
+또는 번들러에서 `react-dom/profiling`으로 alias 처리.
+
+---
+
+## Component 탭 활용 팁
+
+- 컴포넌트 선택 → props/state 실시간 편집 (빠른 검증)
+- `$r` : 선택된 컴포넌트 인스턴스를 콘솔에서 참조 가능
+- 검색창에서 컴포넌트 이름으로 필터링
+- Suspense boundary 시각적으로 확인 가능

package/assets/dev-guide/fe/sources/a11y-dx/wcag22-new-criteria.md

@@ -0,0 +1,174 @@
+---
+title: WCAG 2.2 신규 성공 기준 9개
+source: https://www.w3.org/WAI/WCAG22/quickref/
+fetched: 2026-05-18
+category: wcag22
+---
+
+# WCAG 2.2 신규 성공 기준 (2023년 10월 W3C 권고)
+
+WCAG 2.2는 WCAG 2.1에 9개의 신규 Success Criteria(SC)를 추가했다. 아래는 각 SC의 레벨, 핵심 요건, 영향받는 컴포넌트 패턴을 정리한다.
+
+---
+
+## 2.4.11 Focus Not Obscured (Minimum)
+**레벨: AA**
+
+**요약:** 키보드 포커스를 받은 컴포넌트가 다른 콘텐츠에 완전히 가려지면 안 된다.
+
+**영향받는 패턴:**
+- Sticky header / sticky footer 내부에 포함된 인터랙티브 요소
+- Fixed position modal backdrop 뒤로 숨겨지는 요소
+- z-index 문제로 포커스 링이 가려지는 custom dropdown, tooltip
+
+**실전 체크:**
+- `position: sticky` 헤더 높이만큼 `scroll-margin-top` 설정
+- 모달 열릴 때 focus trap 적용하여 모달 외부 요소가 포커스 안 받도록 처리
+
+---
+
+## 2.4.12 Focus Not Obscured (Enhanced)
+**레벨: AAA**
+
+**요약:** 포커스 인디케이터가 최소한의 겹침도 없이 완전히 보여야 한다. (2.4.11의 강화 버전)
+
+**영향받는 패턴:**
+- 2.4.11과 동일하나 더 엄격: 부분적 가려짐도 불허
+- 팝오버, 드롭다운, 툴팁이 포커스 요소 위를 부분적으로라도 덮는 경우
+
+---
+
+## 2.4.13 Focus Appearance
+**레벨: AA**
+
+**요약:** 포커스 인디케이터는 최소 크기, 색상 대비, 시각적 구분 기준을 만족해야 한다.
+
+**요건:**
+- 포커스 인디케이터 둘레: 컴포넌트 경계의 최소 CSS 둘레 길이만큼의 영역
+- 색상 대비: 포커스 전후 색상 차이 3:1 이상
+
+**영향받는 패턴:**
+- `outline: none` 으로 포커스 링 제거한 모든 컴포넌트
+- 커스텀 버튼, 링크, 입력 필드의 `:focus-visible` 스타일
+- 브라우저 기본 outline을 덮어쓰는 컴포넌트 라이브러리
+
+**실전 체크:**
+```css
+/* 최소 요건 충족 예시 */
+:focus-visible {
+  outline: 2px solid #005FCC;
+  outline-offset: 2px;
+}
+```
+
+---
+
+## 2.5.7 Dragging Movements
+**레벨: AA**
+
+**요약:** 드래그 제스처가 필요한 모든 기능은 단일 포인터(클릭/탭)로 대체 가능해야 한다.
+
+**영향받는 패턴:**
+- Drag-and-drop 파일 업로드 → 클릭으로 파일 선택 버튼 필요
+- 정렬 가능한 리스트(sortable list) → 키보드/버튼 기반 순서 변경 제공
+- 슬라이더(range input) → 키보드 방향키로 값 조정 가능해야 함
+- Carousel / 이미지 스와이프 → 이전/다음 버튼 필수
+
+---
+
+## 2.5.8 Target Size (Minimum)
+**레벨: AA**
+
+**요약:** 포인터 입력 대상(터치/클릭 영역)은 최소 24×24 CSS px 이상이어야 한다.
+
+**예외:** 대상 간격이 24px 이상이거나, 인라인 텍스트 링크, 브라우저 기본 컨트롤은 예외
+
+**영향받는 패턴:**
+- 아이콘 버튼 (닫기, 좋아요, 공유) — padding으로 터치 영역 확보 필요
+- 체크박스, 라디오 버튼의 실제 클릭 영역
+- 테이블 내 액션 버튼, 태그 삭제 버튼
+
+**실전 체크:**
+```css
+/* 아이콘 버튼 터치 영역 확보 */
+.icon-btn {
+  min-width: 24px;
+  min-height: 24px;
+  padding: 8px; /* 시각적 크기와 터치 영역 분리 */
+}
+```
+
+---
+
+## 3.2.6 Consistent Help
+**레벨: A**
+
+**요약:** 도움말 메커니즘(고객센터 링크, 챗봇, FAQ 등)은 같은 유형의 페이지 내에서 일관된 위치에 제공해야 한다.
+
+**영향받는 패턴:**
+- 글로벌 네비게이션 내 고객센터/도움말 링크
+- 페이지마다 위치가 달라지는 채팅 위젯
+- 온보딩 툴팁 버튼의 비일관적 배치
+
+**실전 체크:** 도움말 관련 UI 요소의 위치를 공통 레이아웃 컴포넌트로 고정
+
+---
+
+## 3.3.7 Redundant Entry
+**레벨: A**
+
+**요약:** 같은 세션 내 이전에 입력한 정보를 다시 입력하도록 요구하면 안 된다.
+
+**영향받는 패턴:**
+- 멀티 스텝 폼 (배송지 → 청구지 주소 동일 여부)
+- 회원가입 후 바로 로그인 정보 재입력 요구
+- 이메일 확인을 위한 이메일 재입력 필드
+
+**실전 체크:**
+- 이전 단계 값 자동 채우기 or "이전과 동일" 체크박스 제공
+- 확인용 재입력이 꼭 필요하면 허용되나 최소화
+
+---
+
+## 3.3.8 Accessible Authentication (Minimum)
+**레벨: AA**
+
+**요약:** 인증 과정에서 인지 기능 테스트(퍼즐, 기억, 계산)에만 의존하면 안 된다.
+
+**허용 예외:** 사용자 제공 오브젝트 인식, 비비음문자(non-text) CAPTCHA에 대체 수단 제공
+
+**영향받는 패턴:**
+- 텍스트 기반 CAPTCHA → 오디오 CAPTCHA 또는 이미지 CAPTCHA 대안 필요
+- 복잡한 보안 질문만으로 구성된 로그인
+- OTP/매직링크 대안 없이 복잡한 패스워드 규칙만 강제
+
+**실전 체크:**
+- 패스워드 매니저 지원 (`autocomplete` 속성 적절히 설정)
+- 생체인증, 매직링크, 소셜 로그인 등 대안 제공
+
+---
+
+## 3.3.9 Accessible Authentication (Enhanced)
+**레벨: AAA**
+
+**요약:** 3.3.8보다 강화된 요건 — 인지 기능 테스트를 완전히 배제해야 한다. 오브젝트 인식 예외도 불허.
+
+**영향받는 패턴:**
+- 3.3.8과 동일하나 이미지 선택 CAPTCHA도 불허
+- 완전히 패스워드리스(passwordless) 인증 또는 완전 대체 수단 필요
+
+---
+
+## 체크리스트 요약
+
+| SC | 레벨 | 핵심 포인트 |
+|----|------|------------|
+| 2.4.11 | AA | 포커스 완전 가려짐 금지 |
+| 2.4.12 | AAA | 포커스 부분 가려짐도 금지 |
+| 2.4.13 | AA | 포커스 인디케이터 크기·대비 기준 |
+| 2.5.7 | AA | 드래그 → 단일 포인터 대안 필수 |
+| 2.5.8 | AA | 터치 타겟 최소 24×24px |
+| 3.2.6 | A | 도움말 위치 일관성 |
+| 3.3.7 | A | 이전 입력 재입력 금지 |
+| 3.3.8 | AA | 인증 인지 테스트 대안 필수 |
+| 3.3.9 | AAA | 인증 인지 테스트 완전 배제 |