# AI 생성 영상 리서치 HTML — 정보구조·편집 디자인·품질 기준

## 0. 문서 목적과 독자

이 문서는 **실무 영상 연출자와 AI 워크플로 설계자**가 “무엇이 가능한가”뿐 아니라 **어떤 근거로, 어떤 도구를, 어떤 제작 단계에서 선택해야 하는가**를 빠르게 판단하도록 만드는 단일 페이지 리서치 HTML의 설계 명세다.

최종 산출물은 외부 JS 프레임워크 없이 동작하는 **self-contained static HTML/CSS/JS**를 전제로 한다. 모든 사례·주장·워크플로에는 실제 원문으로 이동하는 링크를 제공한다.

### 핵심 사용 과업

1. 2분 안에 현재 AI 영상 제작 지형과 중요한 결론을 파악한다.
2. 장르·도구·근거 수준에 따라 사례와 워크플로를 좁힌다.
3. 사례의 결과물과 제작 방법, 한계, 출처를 한 맥락에서 검토한다.
4. 촬영 언어와 프롬프트를 복사해 자신의 파이프라인에 적용한다.
5. Reddit의 실전 팁을 “검증된 사실”과 혼동하지 않고 참고한다.
6. 사용한 출처와 조사 시점을 추적하고 원문을 재검증한다.

---

## 1. 전체 정보구조

### 1.1 페이지 골격

```text
Skip link
Header
 ├─ 문서 제목 / 조사 기준일 / 범위
 ├─ 검색
 └─ 현재 필터 요약 + 필터 초기화
Sticky section navigation (desktop) / horizontal jump nav (mobile)

Main
 01 Executive map
 02 장르별 사례 갤러리
 03 툴 매트릭스
 04 Reddit workflow atlas
 05 Cinematography / prompt cookbook
 06 Production pipeline
 07 Provenance / evidence legend
 08 Source index

Footer
 ├─ 편집 원칙 / 업데이트 기록
 └─ 한계·면책·오류 제보 경로
Live region (검색/필터 결과 수 알림)
```

### 1.2 탐색 원칙

- 페이지는 **결론 → 사례 → 비교 → 방법 → 검증** 순서로 읽힌다.
- 각 섹션 상단에 “이 섹션에서 답하는 질문”을 1문장으로 둔다.
- 모든 주요 엔터티는 안정적인 앵커 ID를 가진다: `#case-*`, `#tool-*`, `#workflow-*`, `#prompt-*`, `#source-*`.
- 내부 참조는 페이지 내 앵커로, 외부 출처는 실제 원문 URL로 연결한다.
- 필터는 내용을 새 페이지로 분리하지 않고 현재 문서에서 점진적으로 좁힌다.
- 필터 적용 후에도 섹션 제목·맥락·빈 상태가 사라지지 않게 한다.

---

## 2. 섹션별 설계

## 2.1 Executive map

**답할 질문:** 지금 AI 영상 제작에서 무엇이 실무적으로 가능하며, 어디서 실패하는가?

### 구성

1. **편집자 요약**: 5~7개의 짧은 결론. 각 결론에 근거 등급과 출처 번호를 인라인 표기한다.
2. **Capability map**: 생성, 제어, 일관성, 편집, 오디오, 배포의 6개 축을 문장 중심으로 요약한다.
3. **Decision routes**: 목적별 추천 경로.
   - 광고/제품 영상
   - 내러티브/단편
   - 뮤직비디오
   - 소셜 숏폼
   - 프리비즈/콘셉트
   - 실험/아트필름
4. **Known constraints**: 캐릭터·제품 일관성, 물리, 타이포그래피, 긴 호흡, 권리·출처 문제.
5. **Research scope**: 조사 기준일, 포함/제외 범위, 가격·모델 버전의 변동 가능성.

### 표현 방식

- KPI 카드, 가짜 점수, 원형 차트 대신 **짧은 논지 + 근거 태그 + 출처 링크**를 사용한다.
- “최고”, “혁신적” 같은 비교급은 평가 기준과 날짜가 없으면 금지한다.
- 첫 화면은 거대한 히어로가 아니라 제목, 2문장 초록, 핵심 결론 3개가 보이게 한다.

## 2.2 장르별 사례 갤러리

**답할 질문:** 내 장르와 비슷한 결과물은 어떤 방식으로 만들어졌는가?

### 장르 분류

광고/브랜디드, 제품/패션, 내러티브/단편, 뮤직비디오, 다큐/재현, 애니메이션/스타일라이즈드, 소셜 숏폼, 프리비즈/콘셉트, 실험/아트.

### 사례 카드 필수 필드

- 제목, 제작자/스튜디오, 공개일
- 장르, 러닝타임 또는 포맷
- 대표 이미지(실제 이미지가 없으면 꾸며낸 썸네일 대신 텍스트 플레이스홀더)
- 사용 도구와 모델 버전(확인 가능한 경우)
- 핵심 연출 포인트 1~2개
- 워크플로 요약: 입력 → 생성/변환 → 편집/후반
- 잘된 점 / 드러난 한계
- 근거 등급, 확인일, 출처 링크
- 관련 cookbook/pipeline 앵커

### 카드 상호작용

- 기본 카드는 6~8줄 안의 “판단용 요약”만 노출한다.
- `상세 보기`는 `<details>` 또는 JS가 없어도 접근 가능한 본문 확장 방식으로 구현한다.
- 카드 전체를 클릭 영역으로 만들지 않고 제목 링크와 출처 링크를 구분한다.
- 자동재생 영상 금지. 포스터 + 명시적 재생을 사용한다.

## 2.3 툴 매트릭스

**답할 질문:** 특정 제작 요구에서 어떤 도구가 적합하고, 그 판단 근거는 무엇인가?

### 비교 축

- 입력 방식: text/image/video/reference
- 출력: 최대 길이·해상도·비율·프레임레이트(공식 확인값만)
- 제어: 카메라, 모션, 키프레임, 마스크, 립싱크, 캐릭터/제품 참조
- 일관성: 샷 내 / 샷 간
- 편집·후반 연동
- 오디오 지원
- API/배치/자동화
- 가격 구조 및 크레딧 기준일
- 상업 이용·데이터/권리 관련 주의
- 강점, 실패 양상, 추천 단계
- 근거 등급과 공식 출처

### 데스크톱/모바일

- 데스크톱: 첫 열 고정이 가능한 가로 비교 표. 의미 없는 10점 만점 종합점수는 사용하지 않는다.
- 모바일: 각 도구를 정의 목록(`<dl>`) 기반 비교 카드로 변환한다. 가로 스크롤 표만 제공하지 않는다.
- 수치가 직접 비교 불가능하면 `—`, `미공개`, `조건부`, `확인 필요`를 구분한다.
- 표의 헤더에는 정렬 버튼을 둘 수 있으나, 정렬 기준과 방향을 텍스트·`aria-sort`로 표시한다.

## 2.4 Reddit workflow atlas

**답할 질문:** 실무 사용자는 어떤 우회법과 실패 해결법을 공유하는가?

### 조직 방식

- 제작 단계별: ideation, reference prep, generation, continuity, edit, sound, delivery.
- 문제별: flicker, identity drift, motion incoherence, prompt brittleness, upscale artifact, lip-sync, credit burn.
- 각 노드는 “문제 → 커뮤니티 전술 → 왜 통할 수 있는지 → 재현 조건 → 주의점” 구조다.

### Reddit 항목 필수 필드

- 게시물/댓글 제목 또는 요약
- subreddit, 작성자(공개 표시명), 게시일
- 원문 permalink
- 사용 도구·버전·설정
- 주장과 관찰을 구분한 요약
- 재현 정보의 충분성: 충분 / 부분 / 부족
- 교차 검증 출처 여부
- 근거 등급은 원칙적으로 커뮤니티 등급이며, 공식/독립 출처로 교차 검증한 부분만 상향한다.
- 삭제·수정 가능성이 있음을 명시하고 마지막 확인일을 기록한다.

### 안전장치

- upvote 수를 진실성 점수로 사용하지 않는다.
- 한 사용자의 성공담을 보편적 워크플로로 서술하지 않는다.
- 원문 인용은 짧게, 맥락과 링크를 함께 제공한다.

## 2.5 Cinematography / prompt cookbook

**답할 질문:** 원하는 장면을 촬영 언어로 어떻게 구조화해 생성 프롬프트로 옮기는가?

### 분류

- Shot size / framing
- Lens / depth / perspective
- Camera position / movement
- Blocking / subject motion
- Lighting / time / atmosphere
- Art direction / palette / texture
- Temporal rhythm / speed / transitions
- Continuity / constraints / negative instructions
- Tool-specific syntax

### recipe 구조

1. **의도**: 장면이 전달할 감정·정보.
2. **촬영 문법**: 쇼트 크기, 렌즈 감각, 카메라 동선, 조명.
3. **도구 중립 prompt skeleton**.
4. **도구별 변형**: 공식 문법이 확인된 경우만.
5. **피해야 할 충돌**: 예: 정적인 삼각대 쇼트와 급격한 핸드헬드 지시의 동시 사용.
6. **연속성 고정값**: 인물, 의상, 소품, 광원 방향, 화면축.
7. **근거와 예시 출처**.

### 복사 기능

- 코드 블록 옆 버튼 레이블: `프롬프트 복사`.
- 복사 성공 후 버튼 텍스트를 `복사됨`으로 2초간 변경하고 `aria-live="polite"`로 알린다.
- Clipboard API 실패 시 숨김 `<textarea>` 또는 선택 가능한 원문을 제공한다.
- 복사되는 텍스트에 UI 라벨, 인용 번호, 불필요한 들여쓰기를 포함하지 않는다.
- 변수는 `[SUBJECT]`, `[LOCATION]`, `[CAMERA MOVE]`처럼 대괄호로 일관되게 표시한다.

## 2.6 Production pipeline

**답할 질문:** 발견한 기법을 실제 제작 일정과 승인 구조에 어떻게 배치하는가?

### 단계

1. Brief / success criteria
2. Rights & reference clearance
3. Look development
4. Shot design / storyboard / animatic
5. Reference asset preparation
6. Generation tests / model bake-off
7. Hero shot production
8. Continuity pass
9. Edit / compositing / VFX
10. Sound / music / voice
11. QC / legal / provenance
12. Delivery / archive

### 각 단계 필드

- 입력물 / 담당 역할 / 실행 항목 / 산출물
- 승인 게이트와 실패 시 되돌아갈 단계
- 추천 도구 범주
- 비용·시간 리스크
- 기록할 provenance 데이터
- 최소 QC 체크

### 시각화

- 가로 화살표 인포그래픽 하나로 끝내지 않는다.
- 읽기 가능한 번호 목록을 기본으로 하고, 데스크톱에서만 보조 레일을 제공한다.
- 색만으로 진행 단계나 위험도를 구분하지 않는다.

## 2.7 Provenance / evidence legend

**답할 질문:** 이 정보는 얼마나 신뢰할 수 있고, 무엇을 직접 확인해야 하는가?

### 권장 근거 등급

- **A — 1차/공식:** 공식 문서, 모델 카드, 가격·약관, 제작자의 직접 breakdown, 원본 작품.
- **B — 독립 검증:** 방법과 조건을 공개한 제3자 테스트, 복수 출처가 일치하는 재현 사례.
- **C — 커뮤니티 관찰:** Reddit, 포럼, 개인 경험담. 유용하지만 일반화 금지.
- **D — 미검증/불완전:** 출처 단절, 버전·조건 누락, 2차 요약만 존재. 의사결정 근거로 단독 사용 금지.

### 표시 규칙

- 문자(A–D) + 텍스트 라벨을 함께 사용한다. 색만 사용하지 않는다.
- 등급은 출처의 “유명세”가 아니라 **주장과 근거의 관계**에 부여한다.
- 한 카드 안에 서로 다른 등급의 주장이 있으면 문장별 표기를 우선한다.
- 모든 변동 정보는 `확인일: YYYY-MM-DD`를 표시한다.
- sponsor/affiliate/브랜드 제공 관계는 등급과 별도로 공개한다.

## 2.8 Source index

**답할 질문:** 어떤 출처가 어떤 주장에 사용되었고 원문은 어디인가?

### 필수 필드

- 고유 ID (`S001` 형식)
- 제목, 저자/기관, 발행일
- 출처 유형(공식/논문/제작기/작품/커뮤니티/보도)
- 실제 원문 URL
- 접근/확인일
- 연결된 사례·도구·주장 앵커
- 근거 등급
- 보관/아카이브 URL(있을 때만)
- 비고: 로그인, 지역 제한, 삭제 가능성, 업데이트 여부

### 링크 규칙

- 링크 텍스트를 `여기`가 아니라 문서명 또는 `원문 보기`로 쓴다.
- 새 탭 링크는 `target="_blank" rel="noopener noreferrer"`를 사용하고 새 창 열림을 시각적·스크린리더 텍스트로 알린다.
- 링크가 끊겼더라도 항목을 삭제하지 말고 `링크 상태: 확인 필요`로 보존한다.

---

## 3. 검색·필터 동작 명세

### 3.1 컨트롤

- 전역 검색: 제목, 요약, 제작자, 도구, 태그, prompt 본문을 검색.
- 장르 필터: 다중 선택.
- 도구 필터: 다중 선택, 도구명 검색 가능.
- 근거 등급 필터: A/B/C/D 다중 선택.
- `전체 초기화` 버튼.
- 적용된 필터를 제거 가능한 칩으로 요약하되, 칩만이 유일한 제어가 되지 않게 한다.

### 3.2 상태와 논리

- 서로 다른 필터 그룹 간에는 AND, 같은 그룹 내부는 OR.
- 검색은 대소문자와 앞뒤 공백을 무시한다. 한국어 완성형 문자열의 부분 일치를 지원한다.
- URL query 또는 hash에 상태를 직렬화해 공유·뒤로가기가 가능하면 이상적이다. 불가능하더라도 새로고침 시 오작동하지 않아야 한다.
- 결과 수를 `총 42개 중 8개 표시`처럼 즉시 갱신하고 polite live region으로 알린다.
- 0건일 때 “결과 없음”만 쓰지 않고 현재 조건, 초기화 버튼, 완화 제안을 제공한다.
- 필터로 숨겨진 요소는 키보드 포커스 순서에서도 제외한다 (`hidden` 권장).
- 검색 결과 내 일치어 하이라이트는 색상 외에도 `<mark>` 의미를 사용하며 원문을 변형하지 않는다.

### 3.3 무(無) JS 기준

- JS가 없어도 모든 콘텐츠, 출처 링크, 프롬프트 텍스트를 읽을 수 있어야 한다.
- 검색·필터·복사는 향상 기능으로 취급한다.
- 초기 HTML에 핵심 콘텐츠를 포함하고 JS로 뒤늦게 주입하는 방식은 피한다.

---

## 4. 읽기 중심 editorial 디자인 지침

### 4.1 지향점

**“AI 제품 대시보드”가 아니라 “촬영감독용 리서치 리포트”**처럼 보여야 한다. 근거, 주석, 비교, 제작 맥락이 시각 효과보다 우선한다.

### 4.2 타이포그래피

- 본문 최대 폭: 약 `68–76ch`.
- 본문 기본 크기: 최소 `16px`, 권장 `17–18px`; line-height `1.55–1.75`.
- 제목은 3~4단계만 사용하며 크기·굵기·간격으로 위계를 명확히 한다.
- 한글 본문은 시스템 산세리프 스택을 우선해 외부 폰트 실패에 견딘다.
- 숫자·버전·프롬프트에만 제한적으로 모노스페이스를 사용한다. 본문 전체 모노스페이스 금지.
- all caps, 과도한 자간, 흐린 회색 본문을 금지한다.

### 4.3 색·표면·공간

- 종이/잉크에 가까운 중립 배경과 고대비 텍스트, 단일 절제된 accent를 사용한다.
- 근거 등급과 상태색은 라벨·아이콘·문자와 함께 사용한다.
- 카드마다 무지개색 그라디언트, 유리 효과, 네온 glow를 쓰지 않는다.
- 모든 요소를 카드로 감싸지 않는다. 섹션 구분은 여백, rule, 타이포그래피를 우선한다.
- 그림자는 떠 있어야 할 메뉴·팝오버에만 사용한다.
- 최소 8px spacing grid를 유지하되, 섹션 사이에는 충분한 호흡을 준다.

### 4.4 이미지·미디어

- 이미지에는 작품명/제작자/출처를 적은 caption을 둔다.
- 이미지 crop으로 핵심 피사체나 자막을 손상하지 않는다.
- 로딩 성능을 위해 비핵심 이미지는 lazy-load하고 width/height 또는 aspect-ratio를 예약한다.
- 장식용 가짜 AI 이미지, 근거 없는 생성 썸네일, 반복되는 우주/로봇/보라색 구체 이미지를 금지한다.
- 동영상은 사용자 행동 전 재생하지 않으며 음소거 여부와 재생 시간을 표시한다.

### 4.5 흔한 AI 대시보드 슬롭 금지 목록

- 거대한 그라디언트 제목과 “미래를 재정의” 같은 공허한 카피.
- 내용보다 많은 pill, badge, 카드, 아이콘.
- 실제 데이터가 없는 KPI 숫자, 레이더 차트, 임의의 종합 점수.
- 모든 모서리를 과도하게 둥글게 만들기.
- 거의 읽히지 않는 저대비 회색 텍스트.
- 스크롤을 방해하는 parallax, cursor follower, 과한 reveal animation.
- 장르와 근거를 구분하지 못하는 색상 범람.
- hover에서만 드러나는 핵심 정보.
- 출처 링크를 카드 하단의 작은 아이콘에 숨기기.
- 동일 문장을 카드 여러 개에서 반복하는 자동 생성식 요약.

---

## 5. 반응형 모바일 요구사항

### 브레이크포인트보다 중요한 재배치 규칙

- 320 CSS px부터 가로 스크롤 없이 핵심 본문을 읽을 수 있어야 한다(의도적 코드/미디어 영역 제외).
- 1열 읽기 흐름을 기본으로 한다.
- 섹션 점프 내비게이션은 가로 스크롤 가능하되 현재 위치가 식별되어야 한다.
- 필터는 `필터 (선택 3)` 버튼으로 여는 인라인 패널 또는 비모달 drawer로 구성하고, 적용·초기화가 하단에 명확해야 한다.
- 툴 표는 카드/정의 목록으로 변환한다. 중요한 비교 필드를 임의로 숨기지 않는다.
- 탭 타깃은 최소 44×44 CSS px.
- sticky 요소가 화면의 20% 이상을 지속 점유하지 않게 한다.
- 제목, 긴 URL, 도구명, 코드가 overflow를 만들지 않도록 `overflow-wrap:anywhere` 등으로 처리한다.
- 가로/세로 방향 전환과 200% 확대에서도 기능이 유지되어야 한다.

---

## 6. 접근성 요구사항

WCAG 2.2 AA를 목표로 한다.

### 구조·키보드

- `html lang="ko"`, 의미 있는 `header/nav/main/section/footer` 사용.
- `본문으로 건너뛰기` 링크 제공.
- 제목 레벨을 건너뛰지 않는다.
- 모든 기능은 키보드만으로 사용 가능해야 하며 논리적 focus order를 유지한다.
- `:focus-visible`은 배경 대비 3:1 이상의 명확한 윤곽을 제공한다.
- native 요소(`button`, `input`, `select`, `details`)를 우선한다.
- 모달을 쓸 경우 focus trap, Escape 닫기, focus 복귀를 구현한다. 가능하면 모달 대신 문서 내 확장을 선택한다.

### 시각·미디어

- 일반 텍스트 대비 4.5:1 이상, 큰 텍스트 3:1 이상.
- UI 구성요소·focus indicator는 인접색 대비 3:1 이상.
- 색만으로 필터 선택, 근거 등급, 성공/오류를 표시하지 않는다.
- 정보 이미지에는 목적에 맞는 alt, 장식 이미지는 `alt=""`.
- 영상에는 자막, 핵심 오디오 정보에는 대체 텍스트/트랜스크립트.
- 5초 이상 움직이는 콘텐츠는 일시정지 가능해야 한다.
- `prefers-reduced-motion: reduce`에서 비필수 전환을 제거한다.

### 폼·동적 알림

- 모든 입력에 visible label을 제공한다. placeholder를 label로 대신하지 않는다.
- 필터 그룹은 `fieldset/legend`로 묶는다.
- 결과 수와 복사 성공은 `aria-live="polite"`로 알리되 반복 공지를 최소화한다.
- 오류는 발생 위치와 해결 방법을 텍스트로 제공한다.
- 아이콘 단독 버튼에는 접근 가능한 이름을 둔다.

---

## 7. 권장 콘텐츠 데이터 모델

정적 HTML 안에 직접 마크업하되, 필터용 `data-*` 속성 또는 인라인 JSON을 사용할 수 있다. 핵심 콘텐츠의 유일한 사본을 JS JSON에만 두지 않는다.

```js
{
  id: "case-001",
  type: "case", // case | tool | workflow | recipe | source
  title: "…",
  summary: "…",
  genres: ["advertising"],
  tools: ["tool-slug"],
  evidence: "A", // A | B | C | D
  published: "YYYY-MM-DD",
  verified: "YYYY-MM-DD",
  sourceIds: ["S001"],
  tags: ["camera-control", "continuity"],
  anchors: ["prompt-012", "stage-04"]
}
```

### 데이터 무결성 규칙

- 모든 `sourceIds`는 Source index의 실제 ID와 일치한다.
- 모든 외부 URL은 `https://` 원문 링크를 우선한다.
- 날짜는 ISO 형식으로 저장하고 화면에서는 한국어 표기로 변환 가능하다.
- 확인되지 않은 값은 빈 문자열 대신 명시적 상태값을 쓴다.
- 도구명과 장르명은 canonical slug를 사용해 필터 누락을 방지한다.

---

## 8. Acceptance criteria

아래 항목은 **필수(P0)**, **권장(P1)**로 구분한다.

### 8.1 정보구조·콘텐츠

- [ ] **P0** 지정된 8개 섹션이 모두 존재하고 점프 내비게이션에서 접근 가능하다.
- [ ] **P0** Executive map의 모든 사실 주장에 근거 등급 또는 인라인 출처가 있다.
- [ ] **P0** 사례마다 장르, 도구, 제작 방식, 장점/한계, 실제 출처 URL이 있다.
- [ ] **P0** 툴 매트릭스의 가격·사양·정책에는 기준일과 공식 출처가 있다.
- [ ] **P0** Reddit 항목은 permalink, 게시일, subreddit, 재현 조건, 커뮤니티 근거임을 표시한다.
- [ ] **P0** cookbook의 모든 프롬프트가 의도·촬영 문법·변수·주의점과 함께 제공된다.
- [ ] **P0** production pipeline 각 단계에 입력, 산출물, 승인 게이트, QC가 있다.
- [ ] **P0** 근거 A–D 정의와 사용 규칙이 페이지 안에 설명되어 있다.
- [ ] **P0** Source index의 모든 항목이 원문으로 연결되고 연결된 주장/항목을 추적할 수 있다.
- [ ] **P1** 모든 변동성 정보에 마지막 확인일이 있다.
- [ ] **P1** 이해상충·제휴·스폰서 관계가 별도 표기된다.

### 8.2 검색·필터·복사

- [ ] **P0** 검색이 제목·요약·태그·도구·프롬프트 텍스트에서 동작한다.
- [ ] **P0** 장르, 도구, 근거 등급 필터가 독립적으로 그리고 조합해서 동작한다.
- [ ] **P0** 같은 그룹은 OR, 그룹 사이는 AND 규칙이 일관된다.
- [ ] **P0** 결과 수, 적용 필터, 전체 초기화, 0건 빈 상태가 제공된다.
- [ ] **P0** 숨겨진 결과는 스크린리더와 키보드 focus 순서에서도 제외된다.
- [ ] **P0** 각 prompt 복사 버튼이 정확히 해당 prompt만 복사하며 성공/실패 피드백을 준다.
- [ ] **P0** JS가 비활성화되어도 본문·프롬프트·출처 링크를 읽을 수 있다.
- [ ] **P1** 필터 상태를 URL로 공유하고 뒤로가기에서 복원할 수 있다.

### 8.3 링크·근거 품질

- [ ] **P0** placeholder, `#`, 검색 결과 페이지가 아닌 실제 원문 URL을 사용한다.
- [ ] **P0** 모든 외부 링크를 자동 또는 수동으로 확인하여 2xx/정상 리다이렉트 여부를 기록한다.
- [ ] **P0** 출처 제목·저자/기관·발행일·확인일이 가능한 범위에서 정확하다.
- [ ] **P0** 커뮤니티 주장과 공식 사양이 시각적·언어적으로 구분된다.
- [ ] **P0** 출처가 없는 수치, 순위, “최고” 주장이 없다.
- [ ] **P1** 삭제 가능성이 높은 커뮤니티 링크에 보관 URL 또는 상태 메모가 있다.

### 8.4 반응형·접근성

- [ ] **P0** 320, 375, 768, 1024, 1440px에서 핵심 콘텐츠가 잘리지 않는다.
- [ ] **P0** 320px에서 페이지 전체의 비의도적 가로 스크롤이 없다.
- [ ] **P0** 200% 확대와 모바일 가로 방향에서도 모든 기능을 사용할 수 있다.
- [ ] **P0** 모든 상호작용이 키보드만으로 가능하고 focus가 보인다.
- [ ] **P0** heading outline, landmark, label, accessible name이 유효하다.
- [ ] **P0** 텍스트 대비 4.5:1, UI/focus 대비 3:1을 충족한다.
- [ ] **P0** 결과 수·복사 상태가 과도하지 않은 live region으로 전달된다.
- [ ] **P0** 동영상은 자동재생하지 않으며 자막/대체 설명이 있다.
- [ ] **P0** `prefers-reduced-motion`을 존중한다.
- [ ] **P1** axe/Lighthouse 자동 검사에서 critical/serious 접근성 오류 0건이다.
- [ ] **P1** NVDA+Chrome 또는 VoiceOver+Safari 중 하나로 핵심 과업을 수동 검증한다.

### 8.5 성능·기술

- [ ] **P0** 외부 JS 프레임워크와 빌드 단계 없이 정적 호스팅에서 동작한다.
- [ ] **P0** 브라우저 콘솔에 uncaught error가 없다.
- [ ] **P0** JS 오류가 나도 콘텐츠와 링크는 유지된다.
- [ ] **P0** 이미지에 크기 예약이 있어 큰 layout shift가 없다.
- [ ] **P0** 외부 iframe/video는 초기 로드하지 않거나 사용자 요청 후 로드한다.
- [ ] **P1** 모바일 기준 Lighthouse Performance 85 이상, Accessibility 95 이상을 목표로 한다.
- [ ] **P1** 검색/필터 응답은 일반적 데이터 규모에서 체감상 즉시(권장 100ms 이하)다.
- [ ] **P1** CSP를 적용할 경우 inline JS/CSS 정책과 self-contained 요구가 충돌하지 않도록 nonce/hash 또는 파일 구조를 명시한다.

### 8.6 편집 디자인

- [ ] **P0** 첫 화면에서 제목, 조사 범위/기준일, 핵심 결론을 읽을 수 있다.
- [ ] **P0** 본문 measure가 76ch를 크게 넘지 않고 행간이 충분하다.
- [ ] **P0** 핵심 정보가 hover, 색, 아이콘에만 의존하지 않는다.
- [ ] **P0** 출처 링크가 작은 아이콘 안에 숨지 않는다.
- [ ] **P0** 임의 점수·가짜 KPI·장식 차트가 없다.
- [ ] **P0** 과도한 gradient/glow/glass/parallax/reveal 효과가 없다.
- [ ] **P0** 모든 항목을 같은 카드 모양으로 만들지 않고 콘텐츠 유형에 맞는 표, 목록, 정의 목록, 인용 형식을 사용한다.
- [ ] **P1** 인쇄/PDF 저장 시 내비게이션·필터가 정리되고 본문·URL·출처 번호가 보존된다.

---

## 9. 최종 QA 시나리오

1. **광고 감독:** 장르=광고, 도구=특정 생성기, 근거=A/B로 필터 → 사례 검토 → prompt 복사 → 관련 pipeline 단계로 이동.
2. **워크플로 설계자:** 툴 매트릭스에서 API·reference control 비교 → 공식 출처 열기 → 기준일 확인.
3. **문제 해결:** Reddit atlas에서 identity drift 탐색 → 재현 조건과 커뮤니티 등급 확인 → 교차 검증 링크 확인.
4. **출처 감사:** Executive map의 결론에서 출처 번호 선택 → Source index → 실제 원문 왕복.
5. **키보드 사용자:** skip link → 검색 → 필터 조합 → 결과 카드 → prompt 복사 → 초기화까지 마우스 없이 수행.
6. **모바일 사용자:** 320px에서 필터 열기/닫기, 툴 비교, 긴 prompt 읽기/복사, 원문 링크 열기.
7. **무 JS:** JS를 차단한 뒤 8개 섹션, 모든 핵심 콘텐츠, 프롬프트, 출처 링크가 그대로 읽히는지 확인.

---

## 10. 출시 판정 기준

- **출시 불가:** P0 한 항목이라도 실패, 실제 출처가 아닌 placeholder 링크 존재, 출처 없는 핵심 주장 존재, 키보드로 접근 불가능한 기능 존재.
- **조건부 출시:** P0 모두 통과했으나 P1 성능·스크린리더·URL 상태 공유 일부 미완료. 미완료 항목과 예정일을 공개한다.
- **출시 가능:** P0 전부 통과, P1 80% 이상 통과, 핵심 7개 QA 시나리오 완료, 조사 기준일과 변경 기록 표시.