designpaca/research/qa-gate-plan.md
Yun Chan 72337b7ee0
Some checks failed
ci / build (push) Failing after 5s
feat(skill): 자율 검증 폐쇄 루프 내재화 — 0.6.0
- 핵심 규칙 6: 완료의 정의는 게이트 통과. 사용자를 QA로 쓰지 않는다
- 5단계 기계 검사 4번째: design-gate 실행 의무화
- references/audit-gate.md: 사고-검사 매핑, SEO/meta 체크리스트, OS/브라우저 특성, 하니스 규칙
- tools/design-gate.mjs: 범용 게이트(메타/SEO·대비·수축·리듬·트랙·스케일×폭 + 옵션 L0/L3/L4, checks 깊은 병합)
- 리듬·트랙 불변식: 숫자 라벨 등폭·빈 셀 트랙 균일·등간격 — 시간표 자동배치 결함 재현 픽스처 검출, 앱 15뷰 통과(오탐 0)

feat(site): 관리 앱 2종 프로덕션 콘솔(v6→v18)

- 가온 학적부 9뷰·두레 수강신청 6뷰: shadcn 문법, Pretendard/Noto Serif/IBM Plex 폰트 전략, 볼드 금지(400/500/600), WCAG AA 대비 전면 교정, 한글 keep-all 조판
- LMS 필수 요소(알림 센터·공지·진도·평가 유형·출결 사유·학점 경고), 12명 기준 데이터 정합, SEO 구조(h1 유일·OG/twitter·og.png)
- 시간표 자동배치 결함 수리(명시적 격자 좌표)
- QA 게이트: L0 stylelint/html-validate · L1 단위 30 · L2 감사 61+불변식 · L3 시각회귀 30화면 · L4 WebKit · L5 키보드 탐색 — npm run verify 실패 시 배포 금지 체인
2026-08-22 21:22:05 +09:00

35 lines
3.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# QA 게이트 계획서 — v1 (2026-08-22)
근거: 업계 방법론 조사(시각 회귀·품질 게이트·테스트 피라미드·크로스 브라우저·접근성 이중화·QA 체크리스트).
목표: "고쳤다"의 정의를 **게이트 전 계층 통과**로 바꾼다. 사용자가 QA 역할을 대신하는 구조를 끝낸다.
## 계층 (v2 — 조사 대조 후 보강)
| 계층 | 이름 | 도구/위치 | 잡는 결함 (실제 사고) |
|---|---|---|---|
| L0 | 정적 검사 | stylelint(문법·중괄호) + html-validate → `tools/verify.mjs` sec-0 | CSS 닫는 중괄호 누락(v11 사고) |
| L1 | 진짜 단위 테스트 | **계산 로직을 calc.js 로 추출**해 Node 에서 직접 실행(브라우저 무관)·경계값(0명/만석/18초과/빈배열) — 앱은 `<script src>` 로 공유 | 일별 합계 0/3(배열/값 혼동) |
| L2 | E2E 불변식 | 기능 감사 + 줄수·수축·대비·스케일×폭 행렬 + **axe-core 자동 접근성 스캔** + **콘텐츠 정합(대시보드 요약=상세 표 재계산 비교)** | 브랜드 세로 쌓임, h1 개행, 대비 4.4:1, 26↔12명 모순 |
| L3 | 시각 회귀 | 기준 화면(pixelmatch diff) — **안티앨리어싱 잡음 임계치(픽셀 diff ≥0.1% 실패, 미만은 무시)**, 의도된 변경은 `--update-baseline 갱신 후 커밋 | 눈에 보이는 모든 회귀 |
| L4 | 크로스 브라우저 | Playwright WebKit — **L2 불변식을 WebKit 에서 재실행**(스모크 아님) + 사용자 실기기 확인 체크리스트(URL+확인 항목) | Safari 전용 렌더 차이 |
| L5 | 수동 | 탐색 세션(차터: "학생이 첫 신청을 마친다" 등 시나리오별 통과) + 키보드 완전 통과(Tab/Esc/Enter 전 요소) | 스크립트 밖의 미지 |
## 규칙
1. `node tools/verify.mjs` 하나가 L0L4를 실행. **게이트는 기계적으로 강제한다** — package.json 에 `"verify"` 스크립트를 두고 배포는 반드시 `npm run verify && build && deploy` 체인으로만 수행(수동 규율이 아닌 절차 강제).
2. 검증 리포트 `tools/verify-report.md` 자동 생성 — "무엇을 어떤 수치로 확인했는가".
3. 기준 화면 갱신은 검증된 배포 후에만 (`--update-baseline`).
4. 결함 발견 → 수정 → 게이트 재실행 → design.md에 "왜 못 잡았나/무엇이 잡았나" 기록.
5. 감사 도구는 Temp 가 아닌 **저장소 안**(apps/site/tools)에 둔다 — 도구도 제품이다.
## 완료 기준
- [x] 문서화(본 파일) + 할일 등록
- [x] L0: stylelint·html-validate 도입, 현재 코드 통과 — 중복 셀렉터 2건·aria-label 오용 26건 수정
- [x] L1: calc.js 추출·경계 테스트 30개 통과
- [x] L2: 불변식 통합 + axe 위반(dl 구문·role-img 라벨·tt role) 수정, 전 조합 통과
- [x] L3: 기준 30화면·diff 0.000% 통과
- [x] L4: Playwright WebKit — 브랜드·h1·오버플로·정합 8항목 통과
- [x] L5: 키보드 완전 통과 + 여정 3개(채점·첫신청·취소) 완주 — 두레 #q 포커스 링 결함 수정
- [x] 게이트 통합(npm run verify) + 리포트 자동 생성 — 실패 시 배포 금지 체인 가동
- [x] 발견 결함 전부 수정 + v16 배포(게이트 통과 후)