# fc-feedback 뷰어 디자인 계약 v2 이 문서는 `render.ts`가 만드는 정적 HTML(세션 뷰어, 아카이브 첫 페이지, 참고자료 페이지)의 설계 의도 계약서다. 참조 목업이 없으므로 `visual-qa` 스킬이 이 문서를 판정 기준으로 렌더 결과를 반복 검수한다(승인까지 무한 루프). 모든 색상·간격·반경·타입 크기는 아래 토큰에서 나오며, 토큰에 없는 값을 코드에 쓰면 먼저 이 문서에 토큰을 추가한다. **v2는 패치가 아니라 재설계다.** 계기는 두 가지다. 첫째, 사용자가 v1의 문제/누구/대신 3칸 구조(dl)가 복잡한 축구 장면을 담지 못하고 결과 0건 필터 버튼이 많다고 "너무 구리다"고 판정했다. 둘째, 1차 시각 QA가 v1의 grid 레이아웃(`.side`의 `grid-row: 1 / -1` 행-걸침 + `overflow: auto` 컬럼 안 `flex-shrink: 0` 누락)에서 구조적 결함 두 가지를 확정했다 — (A) sticky 플레이어가 목차 길이에 따라 높이 0으로 무너짐, (B) 헤더-본문 사이 뷰포트 높이만큼의 빈 공백. v2는 이 grid 구조 자체를 버리고 §4의 flex 레이아웃으로 교체해, 같은 결함 클래스가 재발할 수 없게 한다. ## 0. 리서치 로그 v1의 임베디드 참조(notion/linear.app 구조 문법)와 라이트 테마·단일 액센트·시스템 폰트 결정은 그대로 유지한다. v2 재설계 근거: 전술 분석 아티클(Coaches' Voice, 이미지=직전 문단의 시각 증거로 본문 컬럼 전체 폭 삽입, 볼드는 선수 이름 첫 등장에만, §5 근거) · 영상 리뷰 도구 (Hudl/Loom/Veo, 클립 1개=노트 1개, 타임스탬프 클릭 시크, §5) · 필터 UX(Baymard, 개수 표시, 0건 숨김, 활성 필터 칩+전체 해제, §6·§7) · 한글 타이포(KRDS, 본문 17px/행간 1.6–1.8/ `keep-all`, §1) · 카드 밀도(태그 6개+"+N", 칩 대비 4.5:1 이상). 커밋한 방향: 노트는 **문단과 사진이 섞인 짧은 기사**, 팀원은 **자기 이름을 눌러 자기 피드백만** 보는 것이 가장 눈에 띄는 동작이 된다. ## 1. 원칙 (우선순위 순서) 아래 순서는 화면을 만들 때 충돌이 생기면 위 항목이 아래 항목을 이긴다는 뜻이다. 1. **팀원별 명확성이 최우선이다.** "내 피드백" 동선(§6) — 자기 이름을 선택해 자기 피드백만 골라보는 것 — 은 일반 필터(§7)와 시각적으로 분리된, 화면에서 가장 눈에 띄는 컨트롤이다. 이름 옆 개수로 누르기 전에도 건수를 알 수 있고, 1회 탭으로 그 즉시 자기 개선점만 보인다. 2. **본문 가독성이 두 번째다.** 노트는 요약이 아니라 잘 정리된 문단이다 — 영상을 보지 않아도 문단과 사진만으로 장면의 윤곽을 알 수 있어야 한다. 강조는 `**볼드**`만 쓴다(§5). 3. **이미지는 증거다.** 대표 시작 이미지와 본문 중 프레임은 장식이 아니라 "이 장면이 실제로 이랬다"는 증거이므로, 읽기 컬럼 전체 폭으로 크게 보이고 캡션(시간 칩 포함)을 반드시 단다. 4. **내비게이션은 그다음이다.** 목차(§8)·필터(§7)·영상 전환(§9)은 위 세 원칙을 방해하지 않는 범위에서 빠르게 원하는 장면을 찾도록 돕는다. 결과가 0건인 선택지는 애초에 누를 수 없게 보여주지 않는다 — 있는지 없는지 눌러보고 확인하게 만들지 않는다. ## 2. 토큰 라이트 테마만 지원한다(`prefers-color-scheme: dark` 미디어 쿼리를 만들지 않는다). 액센트는 "피치 그린" 하나뿐이며 인터랙티브 요소(링크, 포커스, 활성 탭/버튼/칩/pill)에만 쓰고 장식에는 쓰지 않는다. v1에서 이미 대비 검증을 통과한 값은 그대로 이어받는다. ### 색상 | 역할 | 토큰 | 값 | 용도 | |---|---|---|---| | 배경 | `--bg` | `#FFFFFF` | 페이지 배경, **카드 배경**(카드는 패널이 아니라 본문과 같은 표면이다), 액센트·잉크(어두운) 배경 위의 흰 텍스트(플레이어 placeholder·mini-bar 텍스트, 눌림 상태 pill/chip/배지 글자) — raw `#fff`를 이 토큰으로 대체한다(§15-2) | | 표면 | `--surface` | `#F6F8F7` | 필터 바·패널·시트(`
` 필터[모든 폭], §7)·빈 상태 패널(§10) 배경 전용. **카드 배경에는 쓰지 않는다** | | 표면(눌림) | `--surface-sunken` | `#EFF2F0` | details 열림, 주제 칩 배경, "+N" 칩 배경 | | 본문 텍스트 | `--ink` | `#14181C` | 제목, 본문(업계 기준 #333 계열보다 진하며 대비는 더 높다) | | 보조 텍스트 | `--muted` | `#57606A` | 메타, 캡션, 타임스탬프 (흰 배경 대비 ≥4.5:1) | | 보더 | `--line` | `#E3E6E8` | 카드/이미지/figure 등 **비인터랙티브** 요소의 장식·구획용 구분선 전용. 흰 배경 대비 1.25:1로 3:1 요구에 못 미치므로 인터랙티브 요소 경계에는 쓰지 않는다 | | 보더(강조) | `--line-strong` | `#838B93` | 칩·pill·버튼·part 전환 버튼·details summary 등 **인터랙티브 컨트롤**의 경계 전용. 흰 배경 대비 3.45:1(≥3:1 충족) | | 액센트 | `--accent` | `#1E7A46` | 링크, 활성 탭/버튼/칩/pill, 포커스 (흰 배경 대비 5.3:1) | | 액센트 hover | `--accent-hover` | `#145C34` | 액센트 요소 hover/active | | 액센트 틴트 | `--mine-tint` | `#E3F3E9` | "내 피드백" 선택 시 본문 이름 강조(§5)만. 액센트를 옅게 희석한 값이며 독립된 두 번째 색이 아니다 | | 포커스 링 | `--focus` | `#1E7A46` | `outline` 색 (§13 접근성) | | 플레이어 컨트롤 배경 | `--player-control-bg` | `rgba(255,255,255,0.9)` | 1024px 미만에서 영상 아래 `.player-toolbar`(§4, 영상 위 오버레이가 아니다) 위에 놓이는 "플레이어 접기" 버튼의 반투명 배경 전용(어두운 툴바 배경 위에서도 텍스트 대비를 확보하려고 반투명 흰색을 쓴다) | | 포지션 GK | `--pos-gk-bg` / `--pos-gk-fg` | `#FDF1D8` / `#8A5A00` | GK 칩 배경/글자 | | 포지션 DF | `--pos-df-bg` / `--pos-df-fg` | `#E4EEFC` / `#1451B0` | DF 칩 배경/글자 | | 포지션 MF | `--pos-mf-bg` / `--pos-mf-fg` | `#E7F0EE` / `#0F6B5C` | MF 칩 배경/글자 | | 포지션 FW | `--pos-fw-bg` / `--pos-fw-fg` | `#FBE7E4` / `#B23A2E` | FW 칩 배경/글자 | 규칙: 포지션 4색은 GK/DF/MF/FW 칩 전용이며 다른 용도(상태 표시 등)에 재사용하지 않는다. `--mine-tint`는 §5의 이름 강조 한 곳에만 쓴다 — 두 번째 액센트가 아니라 첫 번째 액센트의 옅은 변형이다. 이 표에 없는 raw hex는 코드에 쓰지 않는다. ### 간격 (base 4px) · 반경 | 토큰 | 값 | 용도 | |---|---|---| | `--space-1` | 4px | 칩 내부 아이콘-라벨 간격 | | `--space-2` | 8px | 칩 사이 간격, 인라인 그룹 | | `--space-3` | 12px | 폼/버튼 내부 패딩, **카드 제목→본문 첫 문단 간격**(§5) | | `--space-4` | 16px | 카드 내부 패딩, 섹션 사이 기본 간격, **본문 문단 사이 간격**(§5) | | `--space-6` | 24px | 카드 사이 간격, 레이아웃 컬럼 gap, **본문 문단→프레임 간격**(§5) | | `--space-8` | 32px | 섹션(헤더/내 피드백/필터/카드 목록/푸터) 사이 큰 간격 | | `--radius-sm` | 8px | 카드, 입력, 이미지, figure | | `--radius-md` | 12px | 패널, details | | `--radius-full` | 9999px | 칩, pill, 필터 리셋 버튼 | 간격은 위 토큰만 쓴다(`clamp()`/`auto`/`%`/`minmax()` 같은 브라우저 메커닉스는 그대로 raw로 쓴다). 반경은 이 3단계만 쓴다 — 카드/이미지/figure는 항상 `--radius-sm`, 칩·pill은 항상 `--radius-full`. `.chip`의 칩-칩 간 외부 margin도 `--space-1`을 재사용한다(flex `gap` 없이 인라인 흐름으로 줄바꿈되는 주제/이름이 나온 선수 칩 목록의 최소 간격). 보더 두께는 간격 토큰과 별도다 — 장식용 구분선은 1px, `:focus-visible`과 `.card--highlighted`(§8 TOC 하이라이트)만 2px 고정값(4px 배수 스케일을 끌어오면 두꺼워진다)이라 토큰화하지 않는다. ### 타입 스케일 | 레벨 | 크기 | 굵기 | 행간 | 용도 | |---|---|---|---|---| | H1 | 28px / 1.75rem | 700 | 1.3 | 세션 제목, 아카이브 제목 | | H2 | 22px / 1.375rem | 700 | 1.35 | 경기 제목, 주제 그룹 헤더(목차) | | H3 | 20px / 1.25rem | 700 | 1.4 | 카드 제목 | | Body | 17px / 1.0625rem | 400 | 1.7 | 노트 본문 문단, 참고자료 한국어 요약 | | Label | 13px / 0.8125rem | 600 | 1.4 | 칩, pill, 브레드크럼, 시간 칩, 탭 라벨 | | Caption | 14px / 0.875rem | 500 | 1.5 | 이미지 캡션, 카운트, 언어 배지 | 규칙: 읽기 단락(Body)은 16px 미만으로 내려가지 않는다. 칩·pill·배지·타임스탬프 같은 비단락 UI 라벨만 13–14px까지 허용한다. 행간은 Body 1.7을 최소로 유지하며 1.6 미만으로 내려가지 않는다(§13 판정 기준의 차단 항목). 자간은 모든 레벨에서 `normal`을 쓴다. ### 측정폭(measure) | 토큰 | 값 | 용도 | |---|---|---| | `--measure` | 660px | 읽기 컬럼(`.main`) 전체 폭 상한. 문단과 figure 모두 이 폭 안에서 렌더되므로 "본문 가독성"과 "이미지는 읽기 컬럼 전체 폭"이 서로 충돌하지 않는다 | | `--archive-measure` | 960px | 아카이브 첫 페이지·참고자료 페이지(`.archive-main`, `.ref-main`)의 폭 상한. 세션 뷰어의 2컬럼 레이아웃이 없는 목록형 페이지라 `--measure`보다 넓게 잡는다 | | `--content-max` | `calc(420px + var(--space-6) + var(--measure))` | `.header`/`.footer`/`.layout`의 공통 폭 상한(§4). `.side-col` 최대 폭(420px)+컬럼 gap+`--measure`를 그대로 더해, 헤더·본문·푸터가 항상 같은 좌우 폭·왼쪽 끝을 공유하게 한다 | `--measure`는 660–680px 권장 범위의 하한을 택한 값이며 720px을 넘기면 차단 결함이다(§13). ## 3. 브레이크포인트 | 이름 | 폭 | 의미 | |---|---|---| | mobile | 390px | 최소 지원 폭, `<1024px` 레이아웃의 대표 캡처 폭 | | layout-switch | 1024px | 좌우 2컬럼 ↔ 단일 컬럼 전환 지점(`@media (min-width: 1024px)`) | | desktop | 1440px | 데스크톱 대표 캡처 폭 | 1024px 경계값 자체도 모든 회차의 기본 캡처 세트에 포함한다(§14). ## 4. 레이아웃 v1의 결함(§0)은 grid의 `grid-row: 1 / -1` 행-걸침과 `overflow: auto` flex 컬럼 안 아이템의 암묵적 최소 크기 0 축소가 만든 것이었다. v2는 **grid의 행-걸침을 아예 쓰지 않는 flex 2컬럼 구조**로 바꿔 이 결함 클래스 자체를 구조적으로 배제한다. ### 마크업 골격(모든 폭 공통) ```
...세션 제목, "영상 업로드 YYYY-MM-DD"...
...플레이어(.player-media)...
...접힘 상태 표시...
...내 피드백(§6), 필터 바(§7), 활성 필터 요약, 결과 수, 카드 목록(§5), 빈 상태(§10)...
``` **링크 전용 세션**(`data.videos` 전부 `embeddable: false`, §9): `.player-wrapper` 대신 작은 비-sticky `.watch-bar`(파트마다 "유튜브에서 시청 ↗" 링크 하나, 다중 파트면 "Part N " 접두, 링크 min-height 44px)를 같은 자리에 렌더하고 `.part-switch`는 렌더하지 않는다(전환할 플레이어가 없고, 막대가 파트별 링크를 이미 제공). 막대 안 링크 옆에 안내 한 줄 `시간을 누르면 유튜브에서 그 장면부터 열립니다`(Label 크기 0.8125rem — §2 타입 스케일의 가장 작은 단계, 스케일 밖 0.75rem 금지·`--muted`, 파트 수와 무관하게 한 번, 새 줄 전체 폭)을 둔다 — 카드의 시간 칩이 진짜 링크라는 사실을 알린다. 임베드가 되는 세션에는 렌더하지 않는다. ``가 붙는다. 1024px 미만에서는 `order: 1`(플레이어와 같은 자리)이며 sticky가 아니다 — 임베드가 안 되는 플레이스홀더가 폰 화면 29%를 차지하며 숨은 링크만 바꾸던 결함을 없앤다. `.side-col`은 `.player-wrapper`와 `.side`(part-switch+목차)를 묶는 그룹핑 wrapper일 뿐이다 — 1024px 이상에서만 실제 박스가 되고, 미만에서는 `display: contents`로 지워진다(아래 참고). 목차는 `
`가 아니라 `.toc-toggle`(`aria-expanded` 버튼) + `.toc-panel`(`hidden` 속성) 조합으로 감싼다 — 닫힌 `
`는 크로미움이 내부적으로 `content-visibility: hidden`을 걸어, 자식에 `display: block`을 강제해도 클릭이 안 되는 유령 레이아웃만 남기기 때문이다 (`[hidden]`은 평범한 `display: none`이라 안전하게 덮어쓸 수 있다). 1024px 미만은 `hidden` 기본 포함으로 닫힘(§1 원칙 1), 1024px 이상은 `.toc-toggle`을 숨기고 `.toc-panel[hidden]`을 `display: block`으로 강제해 항상 펼쳐 보여준다. `.toc-toggle`의 닫힌 모양은 §7 필터 바 `summary`와 같은 전체 폭 한 줄(라벨 왼쪽, `▾`/`▴` 오른쪽, `min-height: 44px`)이다. `header`와 `footer`는 `.layout` 바깥의 독립된 형제 요소다 — v1처럼 소스 순서를 강제하려고 `order`/`display: contents`를 쓸 필요가 없다. 헤더가 항상 최상단에, 푸터가 항상 최하단에 오는 것은 이 마크업 순서 자체가 보장한다. ### 1024px 이상 (좌: 플레이어+목차, 우: 읽기 컬럼) ``` .header, .footer, .layout { max-width: var(--content-max); margin: 0 auto; } .layout { display: flex; align-items: flex-start; gap: var(--space-6); } .side-col { flex: 0 0 min(420px, 40%); position: sticky; top: var(--space-6); max-height: calc(100dvh - var(--space-6) * 2); display: flex; flex-direction: column; gap: var(--space-4); } .player-wrapper { flex-shrink: 0; width: 100%; aspect-ratio: 16 / 9; } .side { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); } .part-switch { flex-shrink: 0; } .toc-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .main { flex: 1 1 auto; min-width: 0; max-width: var(--measure); display: flex; flex-direction: column; gap: var(--space-8); } ``` 이 구조가 v1 결함을 재발 불가능하게 만드는 이유: - `.layout`은 grid가 아니라 flex다. `.side-col`은 flex 아이템 하나일 뿐 어떤 행도 걸치지 않으므로, v1처럼 암묵 행 트랙이 헤더 행을 부풀려 우측 컬럼이 한 화면 높이만큼 밀리는 일이 일어날 수 없다(v1 결함 B). - `.side-col` 안에서 `overflow-y: auto`는 `.toc-scroll` 하나뿐이고 `.player-wrapper`/`.part-switch`는 `flex-shrink: 0`으로 고정해, 공간이 모자랄 때 줄어드는 것은 항상 목차이지 플레이어가 아니다(v1 결함 A). - 우측의 헤더/필터/카드/빈 상태는 `.main`이라는 **단일 wrapper** 안에 있어, v1처럼 grid의 독립된 자식으로 흩어져 서로 다른 행에 잘못 배치될 수 없다. 플레이어를 좌측 독립 컬럼에 고정한 이유: 영상과 읽기 컬럼이 같은 스크롤 맥락을 공유하지 않게 해, "카드를 스크롤했더니 플레이어가 밀려 사라진다/찌그러진다"는 v1식 결함을 구조적으로 막는다(손 닿는 곳에 항상 플레이어가 있어야 한다는 §0 근거). **단일 정렬 축**(§2 `--content-max`): `.header`/`.footer`/`.layout` 셋 다 같은 `--content-max` 상한+`margin: 0 auto`를 써서 항상 같은 왼쪽·오른쪽 끝을 공유한다. 이전엔 헤더/푸터가 별도 상한(1440px)을 써 `.layout`과 다른 왼쪽 끝이 생겼다 — `--content-max`가 `.side-col`+gap+`--measure`를 정확히 더한 값이라 1440px에서도 남는 공간이 생기지 않는다. ### 1024px 미만 (단일 컬럼, sticky 플레이어) ``` @media (max-width: 1023.98px) { .layout { flex-direction: column; align-items: stretch; } .header, .footer { padding-left: var(--space-4); padding-right: var(--space-4); } .side-col, .side, .main { display: contents; } .player-wrapper { order: 1; position: sticky; top: 0; z-index: 10; aspect-ratio: auto; height: auto; display: flex; flex-direction: column; } .player-media { height: min(56.25vw, 200px); } /* 펼침: 영상 ≤200px + 툴바 44px = 전체 ≤244px */ .player-wrapper.is-collapsed .player-media { height: 0; } /* 접힘: 툴바 44px만 남는다 */ /* order 2~10: part-switch, my-feedback, filter-bar, active-filters, toc-scroll(필터 바 바로 다음, 접힘), active-filters, result-count, recurring(§6a), card-list, empty-state, matches-without-feedback(§5b) */ .toc-scroll { overflow-y: visible; } /* .toc-panel이 hidden으로 접히므로 자체 스크롤 불필요 */ } ``` `align-items: stretch`(기본값 `flex-start` 대체): 필터 바·목차 토글의 닫힌 줄, 활성 필터 줄, 빈 상태 패널이 모두 `.layout`의 flex 아이템이므로, `stretch`가 없으면 내용 폭만큼만 좁게 그려져 필터/목차 토글이 작은 알약 모양이 된다(390px 결함). `--content-max`가 없는 1024px 미만에서는 `.header`/`.footer`의 좌우 패딩을 `--space-4`로 직접 줘 본문 폭과 맞춘다(위 §4 마크업 골격 참고). **왜 세 wrapper를 모두 `display: contents`로 지우는가**: v1은 플레이어를 짧은 `.side`에 가둬 sticky containing block이 카드 구간에서 끊겼다. v2는 `.side-col`·`.side`·`.main`을 전부 지워 모든 섹션을 `.layout`(전체 스크롤 길이) 하나의 flex 아이템으로 만들어 containing block을 넓히는 동시에, 마크업 순서와 무관하게 위 `order`만으로 재배치할 수 있게 한다 — 2차 시각 QA가 지적한 "목차가 '내 피드백'보다 먼저 나와 약 1950px 아래로 밀린다" 결함이 이걸로 없어진다. 목차 토글(order 5)은 카드 목록 맨 뒤가 아니라 필터 바 바로 다음에 둔다 — 36장짜리 페이지에서 맨 뒤는 약 32,000px 아래라 모바일 독자가 목차를 쓸 수 없었다(리뷰 결함). 토글은 닫힌 한 줄(44px)이라 "내 피드백"(§1 원칙 1)을 밀어내지 않는다. 데스크톱의 좌측 목차는 그대로다. 펼친 상태의 sticky 플레이어 전체 높이(영상 `.player-media` ≤200px + 항상 보이는 `.player-toolbar` 44px, 아래 §4 "플레이어 접기" 참고)는 244px을 넘지 않아 세로로 긴 화면에서 뷰포트 절반을 차지하는 사고를 막는다 — iframe 위 오버레이를 금지하는 원칙(§4 "플레이어 접기")이 접기 버튼을 영상과 별도인 툴바 행으로 밀어냈으므로, 200px 계약은 영상 자체에만 적용되고 툴바 44px은 그 위에 더해진다. 필터 바(§7)는 모든 폭에서 기본 닫힘, 목차(§8)는 1024px 미만에서만 `.toc-panel[hidden]`으로 기본 닫힘이다. header/footer는 `.layout` 밖 실제 형제라 v1식 순서 강제가 필요 없다. ### 플레이어 접기(1024px 미만 전용) **플레이어 iframe 위에는 어떤 컨트롤도 겹쳐 두지 않는다(유튜브 자체 UI와 충돌)** — 라운드7 시각 QA가 우측 하단 오버레이 버튼과 유튜브 워터마크/진행 바의 충돌을 지적한 뒤의 원칙이다. `.player-wrapper`는 `.player-media`(영상)와 `.player-toolbar`(버튼 줄) 두 flex 자식을 세로로 쌓는다 — 버튼은 영상 위 오버레이가 아니라 영상 바로 아래 전체 폭 줄(오른쪽 정렬)에 항상 있다. "플레이어 접기" 버튼(`aria-expanded`)을 누르면 플레이어가 44px로 접힌다: - 접힌 상태: `.player-wrapper.is-collapsed`, 라벨은 "펼치기", `aria-expanded="false"`. `.player-media`가 높이 0으로 접혀 `.player-toolbar` 한 줄(44px)만 `.player-wrapper` 전체가 된다 — 버튼만 있던 같은 줄 왼쪽에 "▶ 현재 파트 + 현재 재생 시각"(`.player-mini-bar-text`, 예 "▶ Part 2 · 3:12")이 나타난다. - **임베드 불가 파트가 현재 파트일 때도** 접힌 바가 44px를 넘지 않는다: `.player-wrapper.is-collapsed .player-media`는 `overflow: hidden`, `.player-wrapper.is-collapsed .player-placeholder`는 `display: none`이다 — 44px보다 큰 플레이스홀더가 "펼치기" 버튼을 덮던 결함(혼합 세션)을 막는다. - iframe은 접힌 상태에서도 DOM에서 유지한 채 `.player-media`만 높이 0으로 줄인다(재생 유지) — 뗐다 붙이면 `iframe` 재로드로 재생 위치를 잃는다. - **접힘 상태는 in-page 상태다**(영속 저장소 없음) — 새로고침·재진입 시 항상 펼쳐진 기본 상태로 시작한다. - 버튼·툴바 탭 영역은 44×44px 이상(§13)이며, 마크업(§4 골격)엔 항상 존재하되 1024px 이상에서는 `.player-toolbar`/`.player-collapse` 둘 다 `display: none;`로 CSS만 숨긴다 — 데스크톱은 이 기능으로 바뀌지 않는다. ### 카드의 `scroll-margin-top` (1024px 미만 전용) 목차 클릭으로 카드에 스크롤할 때 sticky 플레이어에 카드 상단이 가려지면 안 된다. ``` .card { scroll-margin-top: calc(var(--sticky-player-h) + var(--space-4)); } ``` `--sticky-player-h`는 플레이어 래퍼의 실측 높이(뷰포트 폭에 따라 `min(56.25vw, 200px)`이 달라지고, 접힌 상태에서는 `44px`)를 `ResizeObserver`로 측정해 루트 요소에 세팅하는 CSS 커스텀 프로퍼티다. 1024px 이상에서는 플레이어가 `.side-col` 자체 스크롤 안에 있어 `.main`의 카드와 겹치지 않으므로 이 계산 자체가 필요 없다(미디어 쿼리 안에서만 값을 세팅·사용한다). ### 깊이/표면 전략은 v1과 동일하다: **보더 우선, 그림자는 sticky 플레이어 1곳에만**. 비인터랙티브 요소 (카드/이미지/figure)는 `1px solid var(--line)`(1.25:1, 장식용)로, 인터랙티브 컨트롤(입력·칩· pill·버튼·part 전환 버튼·details summary)은 `1px solid var(--line-strong)`(3.45:1, §2·§13)로 구분한다. 그림자는 `.player-wrapper`만 `box-shadow: 0 2px 8px rgba(20,24,28,0.08)`를 쓴다. ## 5. 카드 해부 (노트 v2) 카드 루트는 `
`. `data-member-ids`는 `member_ids`(피드백이 행동 변화를 요구한 사람 = 지적·지시를 받은 선수)를, `data-named-ids`는 `named_member_ids`(소스 줄에 이름·별칭·게이머태그가 나온 선수, 스크립트가 계산, 칭찬·장면의 계기·수신자 포함)를, `data-mention-ids`는 둘의 합집합(중복 없음, "이름이 나온 선수" 패싯의 매칭·개수 기준)을, `data-related-ids`는 `relatedMembers(unit)`(`member_ids` ∪ 포지션 관련, `data-member-ids`의 상위집합)을, `data-position-target-ids`는 "내 포지션 대상" 팀원 id — data.json 유닛의 `position_target_ids`(fc.ts가 플랜의 `group_positions`와 그 경기 `lineup`으로 계산: core.ts `positionTargetMembers`, 그 경기에서 `group_positions`와 `related()`로 겹치는 포지션을 뛴 팀원 중 `member_ids`에 없는 사람. 이름 없이 "수비 라인"처럼 포지션 단위를 행위자로 부른 유닛의 대상)를 `|`로 구분한 id 목록으로 담는다. `position_target_ids`가 없는 옛 data.json은 이름 있는 변환 함수 `positionTargetIdsFromLegacyData`(`member_ids`가 비면 `related_member_ids`, 아니면 빈 값)가 읽는다. 카드는 `data-group-member-ids`(data.json 유닛의 `group_member_ids`: 그 경기 `lineup`에서 유닛의 `group_positions` 포지션을 뛴 팀원 전부, **고칠 사람 포함** — core.ts `groupMembers`, `position_target_ids`는 여기서 `member_ids`를 뺀 것이고 그 뜻은 바뀌지 않는다)도 싣는다. 이 필드가 없는 옛 data.json은 `groupMemberIdsFromLegacyData`가 `position_target_ids`(그것도 없으면 위 변환)로 읽는다 — 옛 데이터는 고칠 사람이 그룹에 뛰었는지 기록하지 않았다. 반복 지적의 팀 단위 칩(§6a)이 이 목록을 쓴다 — `data-pos`/`data-topics`도 같은 구분자다. `data-addressed-to-all`은 `unit.addressed_to_all`을 `"true"`/`"false"` 문자열로 그대로 담는다(`data-embeddable`과 같은 관례, 항상 명시). `data-addressed-member-ids`는 그 `addressed_to_all` 유닛이 닿는 팀원 id 목록이다(`addressedMemberIds`): 그 유닛이 속한 경기에 뛴 팀원 — 그 경기 `data.matches[].lineup`(팀원 id → 포지션)에 키가 있거나, 포지션을 몰라 lineup에 없더라도 그 경기 어느 유닛의 `named_member_ids`에 있는(원문에 이름이 불린) 팀원 — 만이고, `lineup`이 `null`이거나 없는 경기(옛 `data.json`, 이름 있는 변환 함수 `lineupFromLegacyData`)는 명단 전원이다. `addressed_to_all`이 아닌 유닛은 빈 값이다. "내 피드백"의 집계·선택·묶음은 `data-addressed-to-all`이 아니라 이 목록으로 판단한다(§6) — 그 경기에 뛰지 않은 팀원에게는 전원 대상이 닿지 않는다. 주제 태그는 공백을 포함할 수 있어(`core.ts`의 `isValidTag`) 공백 구분자는 단독 선택 시 매칭이 깨지므로, 태그에 쓸 수 없는 `|`를 쓴다. 멘션 배지(아래 3번)는 이 목록에서 id 존재만 확인하면 된다. 링크 전용 세션(§4, §9)에서는 카드 영역 클릭이 seek를 시도하지 않는다(VIEWER_JS가 `data-link-only`를 보고 즉시 반환). 클릭해도 아무 일이 없으므로 `body[data-link-only] .card`(와 본문 프레임)는 `cursor: pointer`를 쓰지 않고 `cursor: auto`다(링크·버튼 자체의 포인터는 그대로). `a`/`button`/`summary`/`figure` 태그가 아닌 카드 영역 클릭은 그 카드의 시작 시각으로 `seek`한다(카드 전체가 클릭 타깃, §13 탭 타깃 44px 규칙). 링크 전용 세션에서는 헤더 줄·본문 프레임의 시간 칩이 ``(보이는 라벨 "m:ss ↗", `aria-label` "m:ss부터 유튜브에서 보기")인 진짜 링크다 — 프레임 칩은 그 프레임의 `t`를 가리킨다. 같은 세션에서는 본문 프레임 ``도 그 칩과 같은 `youtu.be ... ?t=` 링크 ``로 감싼다(`alt` 유지) — 임베드 플레이어가 없으니 그림을 눌러도 유튜브 그 시각으로 간다. 임베드 가능한 세션의 프레임 이미지는 감싸지 않는다(figure 클릭이 seek). 그 외에는 헤더 줄(1번)의 시간 칩이 ` ... ``` `role="listitem"`은 버튼 자신이 아니라 감싸는 `
`가 갖는다(§13) — 버튼은 list semantics를 겸하지 않고 오직 pill 인터랙션만 표현한다. - 표시 대상은 **이 세션에서 관련 결과가 1건 이상인 팀원만**이다(§7의 0건-숨김 규칙과 동일 원칙). 순서는 명단(roster) 등록 순서를 그대로 쓴다. - 개수는 세 숫자다. 각 유닛은 팀원별로 **먼저 맞는 한 그룹에만** 센다(`countMineBreakdown`): `member_ids`에 있으면 고칠 점, 아니면 `position_target_ids`에 있으면 내 포지션 대상, 아니면 `addressed_to_all`이고 그 팀원이 그 유닛 경기에 뛰었으면(그 경기 `lineup`에 있거나 그 경기 유닛 원문에 이름이 나옴, `lineup`을 모르는 경기는 전원, `addressedMemberIds`) 전원 대상, 아니면 이름이 나왔거나(`mentionIds`: `member_ids` ∪ `named_member_ids`)·`related_member_ids`에 있으면 참고. 그룹 분류와 `lineup` 범위는 그대로이고 **보이는 방식만** 셋으로 나뉜다: **큰 숫자**(`.count`)는 **고칠 점**(개인 지적)만이고, **팀 표기**(`.count-team`, "· 팀 N")는 **내 포지션 대상 + 전원 대상** 유닛 수(`position_target_ids` — 이름 없이 "수비 라인이 맞지 않음"처럼 내 포지션 전체에 한 말, `position_tags`로 다시 유도하지 않는다; `addressed_to_all` — 모든 팀원에게 적용되는 원칙이라 그 경기에 뛴 팀원(`lineup` ∪ 그 경기 원문에 이름이 나온 팀원)마다 든다. 그 경기에 뛰지 않은 팀원에게는 닿지 않는다)이며, **보조 표기**(`.count-ref`, "· 참고 N")는 나머지 — 위 셋이 아니면서 이름이 나왔거나 (`named_member_ids`), 다른 사람의 개별 지적에 포지션만 겹친(`related_member_ids`) 유닛 수다. 예 "동그리 10 · 팀 10 · 참고 4"는 개인 지적 10장, 포지션·전원 대상 10장, 참고 4장이다. 이전에는 큰 숫자가 고칠 점 + 팀을 합쳐 "동그리 20"이 개인에게 온 카드 20장처럼 읽혔다(고칠 점 10 + 내 포지션 대상 7 + 전원 대상 3). 팀·참고가 0이면 그 표기를 생략한다. pill 버튼에는 `title` 툴팁("숫자: 내가 고칠 점 / 팀: 내 포지션 대상 + 전원 대상 / 참고: 이름이 나온 장면 + 같은 포지션 참고")이 있고, 폰은 hover가 없으므로 같은 뜻의 **보이는 범례 한 줄**(`

`, `.my-feedback-row` 바로 아래, Label 크기·`--muted`: "숫자: 내가 고칠 점 / 팀: 내 포지션 대상 · 전원 대상 / 참고: 이름이 나온 장면 · 같은 포지션 지적")이 pill 줄 아래에 있어, 처음 보는 독자도 "팀"과 "참고"가 무엇을 세는지 알 수 있다 — 카드의 "언급:"·"같은 포지션" 표기와 용어가 달라서다. 큰 숫자가 팀 몫이나 이름이 나온 장면까지 세면, 지적이 2건인 팀원 pill에 "5"가 찍혀 지적이 5건이라고 읽힌다. 큰 숫자 0·팀 또는 참고 N인 팀원도 pill이 있다(큰 숫자 "0"). pill 노출 조건은 고칠 점 + 팀 + 참고 ≥ 1이며(= 선택하면 카드가 1장 이상 남는 팀원), 셋의 합은 **다른 필터가 걸리지 않은 상태에서** 그 팀원을 고른 결과 수와 같다(pill 숫자 자체는 §7의 패싯 칩과 달리 라이브 재계산 대상이 아니라 빌드 시점 카운트 그대로다, §7 참고). 필터 바(§7)에는 별도의 "팀원 관련" 그룹을 두지 않는다(중복 제거). - pill 한 줄은 **1024px 미만에서 가로 스크롤**(`overflow-x: auto; white-space: nowrap;`)이며 줄바꿈하지 않는다 — 이름이 많아져도 세로로 불어나지 않고, 오른쪽이 살짝 잘려 보이는 것 자체가 "더 있다"는 신호다(§0 Baymard 근거). 잘림만으로는 390px에서 스크롤 힌트가 약하므로 줄 오른쪽 끝에 알파 마스크 페이드(`mask-image: linear-gradient(to right, #000 calc(100% - var(--space-6)), transparent)`, 색이 아니라 투명도라 라이트·다크 모두 동작)를 걸고, 마지막 pill이 페이드에 가리지 않도록 `padding-right: var(--space-6)`을 둔다. **1024px 이상**은 폭이 넓어 옆으로 밀 이유가 없으므로 `flex-wrap: wrap`으로 줄바꿈한다. - 활성 상태는 다른 칩과 같은 언어를 쓴다: `aria-pressed="true"`일 때 `background: var(--accent); color: #fff; border-color: var(--accent);`. 단일 선택이며, 이미 선택된 pill을 다시 누르면 선택이 풀린다(토글). - 선택 시: 카드 목록이 그 팀원의 `relatedMembers(unit)` ∪ `named_member_ids`에 해당하는 카드 **더하여 그 팀원에게 닿는 `addressed_to_all` 카드**(`data-addressed-member-ids`에 그 팀원이 있는 카드)를 남기고, 결과 수가 "피드백 n/m"으로 갱신되며, §5의 이름 강조와 멘션 배지("고칠 점"/"내 포지션 대상"/"전원 대상"/"이름이 나온 장면"/"같은 포지션 참고", 우선순위는 이 순서, 내 포지션 대상·전원 대상에는 이름이 불렸으면 " · 이름 나옴" 병기, §5-3)가 카드마다 적용돼 고칠 점·내 포지션 대상·전원 대상·이름이 나온 장면·참고용을 구분해 보여준다. 이것이 필터 그룹들과 **AND**로 결합되는 다섯 번째 조건이다(§7). **30초 기준**(§15 판정 기준 2): 고칠 점 카드가 이름이 나온 장면·포지션 관련 카드보다 먼저 보여야 팀원이 근거를 빨리 찾는다 — VIEWER_JS는 보이는 카드를 **실제 DOM에서** 재배치해 `.card-list` 안에 제목(`

`)과 함께 "고칠 점 N" → "이름이 나온 장면 N" → "내 포지션 대상 N" → "전원 대상 N" → "같은 포지션 참고 N" 순으로 둔다(N = 그 그룹에서 지금 보이는 카드 수, 비는 그룹은 제목째 생략; 이름이 불린 장면은 고칠 점 바로 다음에 둔다 — 자기 이름이 나온 장면을 먼저 확인한다. 고칠 점·내 포지션 대상·전원 대상이 주 숫자에 드는 "내가 할 것", 이름이 나온 장면과 같은 포지션 참고가 참고다. 그룹 순서는 `MINE_GROUPS`가 정한다). 분류는 `data-member-ids`에 있으면 고칠 점, 아니면 `data-position-target-ids`에 있으면 내 포지션 대상, 아니면 `data-addressed-member-ids`에 있으면 전원 대상, 아니면 `data-named-ids`에 있으면 이름이 나온 장면(분류 우선순위는 이 순서 그대로이고 표시 순서만 위와 다르다), 그 외(포지션 관련)는 같은 포지션 참고다. CSS `order`로 시각 순서만 바꾸면 키보드·스크린리더 순서가 달라지므로 쓰지 않는다. 각 그룹 내부는 원래 시간순을 유지하고, 필터가 가린 카드는 목록 끝에 숨은 채로 남는다. 선택 해제(또는 "전체 해제"·칩 ×) 시 제목을 지우고 모든 카드를 원래 시간순 DOM 위치로 되돌린다. 고칠 점 카드의 `.is-direct` 마커는 그대로 토글한다(배지·스타일 훅). - pill을 고르면(해제는 제외) VIEWER_JS가 그 pill에 `scrollIntoView({ block: "nearest", inline: "nearest" })`를 불러(미지원이면 건너뜀) 1024px 미만 가로 스크롤 줄에서 가려진 pill(예 4번째)이 보이는 위치로 온다. - pill의 최소 히트 영역은 44×44px(§13 접근성)다. 이 컨트롤이 필터 바 안이 아니라 별도 섹션인 이유(§1 원칙 1): "내 피드백을 보고 싶다"는 의도는 일반 필터링 의도보다 훨씬 빈번해 항상 먼저 눈에 띄어야 한다 — 필터 바의 기본 닫힘 (§7) 안에 숨기지 않고 언제나 펼쳐 둔다. pill 선택은 §7 활성 필터 요약 줄에도 칩으로 나타난다 (라운드8 시각 QA — 결과 0건이 이 선택과의 조합으로만 나오므로, 원인을 그 줄에서 함께 보여준다). ## 6a. 반복 지적 여러 유닛에 걸쳐 되풀이된 문제를 독자가 한눈에 보도록, `.main`의 `.result-count` 다음·`.card-list` 앞(모든 폭, 1024px 미만 `order: 7`)에 `
`을 렌더한다. **데이터**: plan.json 최상위 필수 배열 `recurring: [{ label, lines[] }]`(`core.ts` `checkPlan`이 검증, 반복이 없으면 `[]`)가 `plan.validated.json`의 `recurring: [{ label, unit_ids, member_ids }]`(시간 순서)가 되고 세션 `data.json`의 `recurring: [{ label, unit_ids, member_ids, refs_unfound }]`로 이어진다. `member_ids`는 라벨이 지목한 **반복 행동의 주인**인 로스터 id다(예 "동그리가 더 올라가지 않음" → `["toongri"]`). `[]`는 라벨이 특정 사람이 아니라 팀 단위·포지션을 가리킨다는 뜻이다(예 "수비 라인이 맞지 않음"). `recurring`이 없는 옛 `data.json`은 이름 있는 변환 함수 `recurringFromLegacyData`가 빈 목록으로 바꾸고, `member_ids`가 없는 옛 항목은 `member_ids: []`로 읽는다(주인 없는 항목이므로 아래 k는 "내 포지션 대상"만 센다)(옛 plan.validated.json은 `fc.ts`의 `recurringFromLegacyValidated`). 목록이 비면 블록 자체를 렌더하지 않는다. - 제목 "반복 지적"(`

`, Label 크기). 항목은 반복 유닛 수 내림차순(동수는 plan 순서 유지, 안정 정렬)이며 각 항목은 `label` · `×N` · [추천 자료 없음] · 유닛 시간 칩들이며, 행(`
  • `)은 두 목록을 "|"로 이어 싣는다. `data-label-owner-ids`는 항목의 `member_ids`(라벨 주인, 빈 값이면 팀 단위 라벨)이고, `data-owner-ids`는 **칩 단위 소유자**다 — 행의 칩 고칠 사람(`data-fixer-ids`) ∪ 팀 단위 칩(`team_owned` 또는 항목 `member_ids`가 빈 칩)의 유닛 `group_member_ids`(수비 라인·포지션 지적을 받는 사람). 예전에는 `data-owner-ids`가 라벨 주인만 뜻해, 라벨 주인이 비어 있는 "상대 마크를 놓침"이 뎁스차저·우사의 "내 반복"에서 빠졌다. 의미가 바뀌었으므로 옛 의미는 새 이름 `data-label-owner-ids`로 옮겼다(`data-*` id 목록은 전부 "|" 구분 — VIEWER_JS `hasToken`이 "|"로 쪼갠다. 칩의 `data-fixer-ids`가 공백으로 이어져 칩이 둘인 행이 매칭되지 않던 결함 수정). 행에는 주인 이름 목록을 두지 않는다 — 라벨 전체의 주인 목록("상대 마크를 놓침 ×2 · 뎁스차저")을 보면 주인 없는 유닛(제목 "수비진: 상대 역습 때 마크 놓침")까지 그 사람 탓으로 읽혔다. 대신 **시간 칩마다 그 유닛의 주인**을 시간 뒤에 붙인다("9:30 수비진", "12:50 뎁스차저"; `9:30 수비진`). **칩 주인**(`recurringChipOwner`): 유닛의 고칠 사람(data.json 유닛 `member_ids`)과 항목 `member_ids`의 교집합이 비어 있지 않으면 그 팀원 이름("뎁스차저", 둘이면 "뎁스차저·우사"); 비어 있으면 유닛 제목의 " / " 조각마다 ": " 앞 행위자 중 **로스터 팀원(이름·게이머태그)이 아닌 것**("수비진", "수비 라인", "전원"; "A·B"는 ·로 나눠 따로 본다, 중복 제거 후 ·로 잇는다) — 예 항목 `member_ids: []`, 제목 "수비 라인: 맞지 않음 / 뎁스차저: 첫판부터 정신 놓음"은 "수비 라인"이다(뎁스차저가 아니다). **항목 `member_ids`가 비어 있고(라벨이 팀 단위) 제목에 비-팀원 행위자도 없으면**(예 u009 "뎁스차저: AI 격수 마크를 놓침", 고칠 사람 `[depscharger]`, 라벨 "상대 마크를 놓침" `member_ids: []`) 칩은 **그 유닛의 고칠 사람(`member_ids`) 이름**을 쓴다("12:34 뎁스차저") — 이때 `data-fixer-ids`는 빈 값이라 "내가 고칠 것"에는 세지 않는다(라벨 주인이 아니므로). 항목 `member_ids`가 있는데 교집합이 비면 이 대체는 쓰지 않는다(`check plan`이 그 조합을 주인 누락으로 거부한다). 셋 다 없으면 시간만 보인다. 칩은 `data-fixer-ids`(첫 경우의 팀원 id 목록, "|" 구분, 아니면 빈 값)를 싣고, `aria-label`은 "9:30 수비진 — <유닛 제목>"(주인이 없으면 "9:30 <유닛 제목>")이라 보이는 글자로 시작한다. 시간과 주인 이름 사이는 **`.recurring-unit`의 `gap: var(--space-1)`**이 만든다 — `.chip`이 `display: inline-flex`라 시간 텍스트와 주인 `` 사이의 공백 텍스트 노드가 flex 레이아웃에서 버려져 "1:02:23 4백"이 "1:02:234백"으로 붙어 읽히던 결함(CSS 규칙 자체를 `render.test.ts`가 검사한다 — textContent에는 공백이 남아 있어 그것만으로는 못 잡는다). 칩은 44px 탭 영역을 지키고(`min-height: 44px`) 390px에서 긴 이름이 폭을 넘지 않도록 `white-space: normal; max-width: 100%`와 이름 `overflow-wrap: anywhere`로 줄바꿈한다. **추천 자료 없음**: 항목의 `refs_unfound: true`(그 label이 refs-draft의 `recurring_unfound`에 있다 — 참고자료를 찾으려 했으나 못 찾음)이면 `추천 자료 없음`(Label 크기·`--muted`·`--line` 아웃라인 알약)을 단다. 이전 문구 "참고자료 못 찾음"은 독자에게 검색 실패로 읽혀 바꿨다. data.json `recurring[].refs_unfound`는 `fc.ts`가 refs-draft의 `recurring_unfound[].label`과 plan label을 비교해 채우는 boolean이고, 필드가 없는 옛 `data.json`은 이름 있는 변환 함수 `refsUnfoundFromLegacyData`가 `false`로 읽는다. **행 구조(모든 폭)**: 라벨(`.recurring-label`)은 `display: block`으로 자기 줄을 갖고, 그 아래 한 줄(`.recurring-meta`, flex wrap)에 `×N`·"추천 자료 없음"이 놓이며, 시간 칩(`.recurring-units`, flex wrap)은 그 아래 자기 감기는 줄에 놓인다 — 라벨 뒤에 칩이 같은 흐름으로 이어져 들쭉날쭉하게 감기던 문제를 없앤다. `×N` 문구(`.recurring-count`)는 VIEWER_JS가 `.recurring-count-part` 조각(`white-space: nowrap`)으로 다시 쓰며 조각은 앞 공백 없이 "· …"·"(그중 …)" 꼴이고 조각 사이는 일반 공백 텍스트 노드 하나다 — `.recurring-count`가 flex `gap`을 가지므로 공백 글자까지 더하면 간격이 두 배가 된다(flex 컨테이너는 공백 텍스트 노드를 렌더하지 않아 `parts.join(" ")`와 보이는 간격이 flex gap 하나뿐이다). **팀 단위 칩과 "내 포지션 대상"**: 칩 주인이 팀 단위 행위자("수비 라인", "수비진" — `recurringChipOwner`의 `team_owned`: 고칠 사람 교집합이 없고 제목에 비-팀원 행위자가 있음)이면 칩에 `data-team-owner="true"`를 단다. 이 칩(과 주인 없는 항목의 칩)은 선택한 팀원이 그 유닛의 `data-group-member-ids`에 있으면 — **그 팀원이 유닛의 고칠 사람이어도** — "내 포지션 대상"으로 세고 `.is-mine`을 붙인다(`data-position-target-ids`는 고칠 사람을 빼므로 CB 뎁스차저가 "수비 라인이 맞지 않음" 칩 5개 중 2개만 받던 결함을 막는다). 칩 주인이 그 팀원인 칩(`data-fixer-ids`)은 계속 "내가 고칠 것"이 우선이다. **내 지적 먼저 + 요약 줄**: "내 피드백"에서 팀원을 고르면 `내가 고칠 것`이 있는 행(그 팀원이 `data-fixer-ids`에 든 칩이 하나라도 있는 행 — 필터와 무관)을 앞으로 올리고 각 묶음 안에서는 원래의 많이 반복된 순서를 지킨다(DOM을 다시 배열하므로 키보드·스크린리더 순서가 보이는 순서와 같다). "더 보기"로 접히는 부분은 선택한 팀원과 무관한 나머지 행 중 보이는 행 순서상 4번째부터다 — 선택한 팀원의 칩(고칠 칩이나 포지션·팀 단위 칩)이 있는 행(`data-owner-ids`에 든 행)은 몇 번째이든 접지 않는다(`수비 라인이 안 맞음 ×4`가 7번째라 접히던 문제). 순서는 고칠 칩 행 → 포지션 칩만 있는 행이고 각 묶음은 반복 많은 순서다. 목록 바로 위 한 줄 `
    `가 갖는다(§6) — 버튼이 list semantics까지 겸하면 스크린리더가 같은 요소를 버튼과 목록 항목 두 가지로 동시에 안내해야 한다. - **텍스트 선택과 seek**: `window.getSelection().toString()`이 비어 있지 않은 동안의 카드 클릭은 seek를 실행하지 않는다(§5, 드래그 선택 방해 방지). ## 14. 캡처 세트 (visual-QA) 기본 캡처 세트는 1024×768 기본 상태를 포함한 **37장 고정**이다. 첫 회차와 승인(APPROVE) 회차에는 37장 전체를 새로 촬영한다. 중간 회차에는 수정 영향을 받은 것만 재촬영할 수 있지만, 전체 판정 대상의 열거는 항상 아래 37개다. 뷰어 상태 캡처는 파트가 2개인 현재 세션 fixture를 쓴다(`disabled-mode`/`embed-blocked`는 각자 필요한 별도 fixture, 아래 참고). `disabled-mode`(§11)·`embed-blocked`(§9)는 v2 신규로 34·35번에 추가했다. | # | id | page | state | viewport | |---|---|---|---|---| | 1 | `default-390` | session | 필터 없음, 기본 진입 화면 | 390×844 | | 2 | `default-1440` | session | 필터 없음, 기본 진입 화면 | 1440×900 | | 3 | `toc-topic-390` | session | 목차 "주제별" 탭 활성 | 390×844 | | 4 | `toc-topic-1440` | session | 목차 "주제별" 탭 활성 | 1440×900 | | 5 | `filter-position-390` | session | 포지션 필터 `FB` 선택 | 390×844 | | 6 | `filter-position-1440` | session | 포지션 필터 `FB` 선택 | 1440×900 | | 7 | `filter-topic-multi-390` | session | 주제 필터 "수비전환"+"역습" 다중 선택(OR) | 390×844 | | 8 | `filter-topic-multi-1440` | session | 주제 필터 "수비전환"+"역습" 다중 선택(OR) | 1440×900 | | 9 | `filter-mention-390` | session | 이름이 나온 선수 필터 선택 | 390×844 | | 10 | `filter-mention-1440` | session | 이름이 나온 선수 필터 선택 | 1440×900 | | 11 | `my-feedback-390` | session | "내 피드백"에서 팀원 1명 선택(§6) | 390×844 | | 12 | `my-feedback-1440` | session | "내 피드백"에서 팀원 1명 선택(§6) | 1440×900 | | 13 | `filter-empty-and-390` | session | 필터 옵션 + "내 피드백" 조합 결과 0건(§7: 패싯끼리는 0건에 도달 불가) | 390×844 | | 14 | `filter-empty-and-1440` | session | 필터 옵션 + "내 피드백" 조합 결과 0건(§7: 패싯끼리는 0건에 도달 불가) | 1440×900 | | 15 | `seek-part1-390` | session | Part 1 카드 클릭 직후(seek 반영) | 390×844 | | 16 | `seek-part1-1440` | session | Part 1 카드 클릭 직후(seek 반영) | 1440×900 | | 17 | `switch-part2-390` | session | Part 2 카드 클릭 직후(영상 전환+seek 반영) | 390×844 | | 18 | `switch-part2-1440` | session | Part 2 카드 클릭 직후(영상 전환+seek 반영) | 1440×900 | | 19 | `scroll-mid-390` | session | 카드 목록을 마지막 카드 부근까지 스크롤(모바일에서 sticky 플레이어가 카드 전 구간에서 고정을 유지하는지 확인, §4) | 390×844 | | 20 | `scroll-mid-1440` | session | 카드 목록 중간까지 스크롤(sticky 플레이어 위치 확인) | 1440×900 | | 21 | `body-frames-closeup-390` | session | 본문 프레임 ≥2개인 카드까지 스크롤한 클로즈업 | 390×844 | | 22 | `body-frames-closeup-1440` | session | 본문 프레임 ≥2개인 카드까지 스크롤한 클로즈업 | 1440×900 | | 23 | `full-page-390` | session | 전체 페이지(풀 스크린샷, 스크롤 길이 전체) | 390×844 | | 24 | `full-page-1440` | session | 전체 페이지(풀 스크린샷, 스크롤 길이 전체) | 1440×900 | | 25 | `past-session-390` | session | 과거 단일 세션(파트 1개) 기본 화면 | 390×844 | | 26 | `past-session-1440` | session | 과거 단일 세션(파트 1개) 기본 화면 | 1440×900 | | 27 | `archive-with-sessions-390` | archive | 아카이브 첫 페이지, 세션 있음 | 390×844 | | 28 | `archive-with-sessions-1440` | archive | 아카이브 첫 페이지, 세션 있음 | 1440×900 | | 29 | `archive-empty-390` | archive | 아카이브 첫 페이지, 빈 상태 | 390×844 | | 30 | `archive-empty-1440` | archive | 아카이브 첫 페이지, 빈 상태 | 1440×900 | | 31 | `ref-en-390` | ref | 참고자료 페이지(영문 원문) | 390×844 | | 32 | `ref-en-1440` | ref | 참고자료 페이지(영문 원문) | 1440×900 | | 33 | `default-1024x768` | session | 레이아웃 전환 경계값 기본 상태 | 1024×768 | | 34 | `disabled-mode-390` | session | 팀원 명단 없이 렌더(§11 disabled 모드): "내 피드백"·이름이 나온 선수 필터·카드의 "고칠 사람"/"언급"/"같은 포지션" 줄·@멘션 칩이 모두 미노출 | 390×844 | | 35 | `embed-blocked-390` | session | `embeddable: false`인 파트의 임베드 불가 플레이스홀더(썸네일 또는 텍스트 카드 + "유튜브에서 시청 ↗", §9) | 390×844 | | 36 | `my-feedback-related-390` | session | 내 피드백 윤도훈 선택 후 첫 '같은 포지션 참고' 카드까지 스크롤 — 참고 배지 대비 확인 | 390×844 | | 37 | `my-feedback-related-1440` | session | 내 피드백 윤도훈 선택 후 첫 '같은 포지션 참고' 카드까지 스크롤 — 참고 배지 대비 확인 | 1440×900 | ### 기능 검사 (`functional.json`) 각 항목은 `{"name", "kind": "dom" | "player_api", "pass": bool, "skipped_reason": string | null}` 형태로 기록한다. `kind: "dom"` 항목은 `skipped_reason`을 허용하지 않는다 — 전부 `pass: true`여야 한다. `kind: "player_api"` 항목은 헤드리스 재생 제약으로 스킵을 허용하되 (`skipped_reason`에 사유), 승인 회차의 headed 재시도(`capture.sh --headed`)에서는 스킵을 허용하지 않는다. `dom` 항목(v1에서 이어받는 것 + v2 신규): - 카드 클릭 후 `document.body.dataset.video`가 해당 카드의 videoId와 일치, 다른 파트 카드 클릭 후 해당 파트 버튼만 `aria-pressed="true"`. - 목차 클릭 후 대상 카드로 스크롤·강조(`.card--highlighted`+TOC `.is-current`)되며 seek는 발생하지 않음. 필터로 숨겨져 보이는 항목이 0개인 TOC 그룹은 그룹 헤더도 함께 숨음. - 필터 리셋 후 결과 수가 전체 m으로 복귀, 탭 `aria-selected` 전환. **결과 0건인 옵션은 DOM에 렌더되지 않는다**(예: GK 태그가 없으면 포지션 트리에 GK 노드 자체가 없음). **필터 옵션 고정**: AND 조합이 0건이 되어도 선택된 옵션이 사라지지 않는다. - **본문 프레임 클릭은 `data-frame-t` 값으로 seek한다**(카드의 시작 시각이 아니라 그 프레임의 시각). 헤더 줄·프레임의 `.seek-btn` 클릭도 같은 seek를 실행한다. - **"내 피드백"에서 팀원 1명 선택 시** 그 팀원의 `relatedMembers` 카드만 남고 결과 수가 정확히 갱신되며, `.card-list.mine-active`에서 `.is-direct`(고칠 점) 카드가 먼저 온다. **멘션 배지**는 `data-member-ids`면 "고칠 점", `data-position-target-ids`면 "내 포지션 대상", `data-addressed-to-all="true"`면 "전원 대상"(둘 다 `data-named-ids`에도 있으면 " · 이름 나옴" 병기), `data-named-ids`면 "이름이 나온 장면", `data-related-ids`만이면 "같은 포지션 참고"를 보인다. - **텍스트 선택 중 seek 무시**: 드래그 선택 중인 카드를 클릭해도 재생 상태가 바뀌지 않는다. - **내 피드백 그룹 재배치**: 팀원 선택 시 `.card-list`의 DOM 순서가 "고칠 점 N → 이름이 나온 장면 N → 내 포지션 대상 N → 전원 대상 N → 같은 포지션 참고 N" 제목(비는 그룹 생략) 아래 카드 순이고, 해제하면 제목이 사라지고 원래 시간순으로 돌아온다. "내 포지션 대상"은 data.json `position_target_ids`로 정한다(`position_tags`에서 유도하지 않는다). pill의 주 숫자(고칠 점 + 내 포지션 대상 + 전원 대상) + 참고 숫자(이름이 나온 장면 + 같은 포지션 참고) = 선택 직후 결과 수. - **링크 전용 세션**(모든 파트 `embeddable: false`): `.player-wrapper`가 없고 `.watch-bar`에 파트별 링크가 있으며, 카드 헤더·프레임 시간 칩이 `href`가 맞는 ``이고 카드 클릭이 `body[data-video]`를 바꾸지 않는다. - **시작 이미지 생략**: 본문 프레임이 하나라도 있는 카드(`t`가 `unit.start`와 같든 다르든)에는 `.card-image`가 없고 `.chip-row`는 남는다. 본문 프레임이 없는 카드만 시작 이미지를 가진다. - **모바일 sticky 유지**: 390px에서 카드 목록 끝까지 스크롤해도 `.player-wrapper` 고정이 유지된다(펼침 시 상단, 접힘 시 44px). `player_api` 항목: `window.fcPlayer.getCurrentTime()`이 클릭한 카드/프레임의 시작 시각과 ±2초 이내로 일치, `window.fcPlayer.getVideoData().video_id`가 전환 후 목표 파트의 videoId와 일치. ## 15. 판정 기준 `visual-qa`의 오라클 각각이 `VERDICT: PASS`이고 `BLOCKING`이 비어 있어야 승인(APPROVE)이다. v2는 기존 Pass A/B(계약 준수)에 더해 **매 회차마다 아래 네 관점을 전부 병렬로 실행**하고 넷 다 PASS여야 승인한다: 1. Pass A/B(계약·접근성·CJK·캡처 세트 — 기존 오라클, 아래 항목으로 판정). 2. **팀원 독자 리뷰**: "내 피드백"에서 실제 팀원 이름 하나를 골라, **30초 안에 선택한 팀원 기준으로 "다음 경기에서 시도할 행동 1개"와 그 근거 장면(카드) 1개를 말로 지목할 수 있으면 통과**로 판정한다. 30초 안에 행동 1개+근거 카드 1개를 둘 다 지목하지 못하면 REVISE. 3. **미감 리뷰**: 아래 아름다움/가독성 항목을 계약 위반 여부와 별개로 판정한다. `similarityScore`나 전반적 인상이 좋아도 "구리다"는 인상이 남으면 REVISE. 아래는 차단(blocking) 결함 목록이다 — 하나라도 있으면 REVISE/FAIL이다: 1. **CJK 줄바꿈 위반**(§10): 조사/어미 고아 줄, 제목류(H1/H2/H3·카드 제목·TOC 라벨·아카이브 카드 제목)의 주어-술어 분리, 묶인 문법 구성(부정 -지 못/않, 금지 -지 말고, 의존명사 수/것/게/거/걸/건/겁, -기 전/시작/위해/때문, -다 보니/보면, 숫자+단위 등)의 중간 분리, 짧은 인용/출처 영문 문자열(따옴표 인용, 제목) 줄바꿈, 제목 한 글자/음절 고아 줄, 글리프 깨짐(tofu) — 페이지 전수 검사. 독립된 두 단어 사이의 통상적인 어절 줄바꿈(예 "수비 전환")과 본문 문단·캡션 안의 어절 단위 주어-술어 줄바꿈(예 "상대 수비가 / 좁혀지는")은 결함이 아니다 — 일반적인 한글 어절 줄바꿈이라 구조적으로 막을 수 없다. §12 번역 표 원문 전체 문장의 줄바꿈도 결함이 아니다(<1024px 스택 레이아웃에서 전체 폭으로 줄바꿈된다). 2. **토큰 이탈**: §2에 없는 raw hex, 임의 px 간격/반경, §2 타입 스케일에 없는 폰트 크기. 3. **레이아웃 계약 위반**(§4): 1024px 이상에서 `.player-wrapper`/`.part-switch`에 `flex-shrink: 0`이 빠져 플레이어가 보이지 않거나 찌그러짐, `.main`이 단일 wrapper가 아니라 개별 요소로 흩어짐, 1024px 미만에서 펼친 sticky 플레이어 전체 높이(영상+툴바)가 244px을 넘어 본문을 밀어냄, 카드가 sticky 플레이어에 가려짐(`scroll-margin-top` 누락/오계산), 카드 스크롤 중 sticky 고정이 풀림(`.side-col`의 `display: contents` 누락 등), "플레이어 접기" 버튼의 `aria-expanded` 불일치. 4. **카드 필드 누락/순서 오류**(§5): 태그 행→고칠 사람/언급→본문→같은 포지션 순서가 아님, 시간 칩이 m:ss/h:mm:ss 분기를 따르지 않음, ko 참고자료에 "요약" 링크가 잘못 노출(또는 비-ko에 없음), 대표 이미지에 width/height가 없어 레이아웃 시프트, 본문 프레임에 캡션·"확대" 링크가 없거나 새 탭/`rel="noopener"` 없이 열림, 멘션 배지가 미선택 상태에 나타나거나 종류가 `data-member-ids`/`data-position-target-ids`/`data-named-ids`/`data-related-ids` 판정과 다름(고칠 점 ↔ 내 포지션 대상 ↔ 같은 포지션 참고 뒤바뀜). 5. **필터/목차 계약 위반**(§7,§8): 그룹 간 AND가 OR처럼 동작, 주제 그룹 내부가 OR가 아님, 목차 클릭이 seek를 발생시킴, 세션 전체 0건 옵션이 렌더됨(빌드 시점 가지치기 누락), AND 조합이 아닌데 빈 상태가 나옴, 선택된 옵션이 다른 그룹 선택으로 DOM에서 사라지거나 비활성화됨, 선택 조합이 0건인데 옵션이 비활성화되지 않고 계속 클릭됨(§7 라이브 카운트). 6. **영상 전환 계약 위반**(§9): 같은 파트에서 `loadVideoById` 호출, 다른 파트에서 `seekTo`만 호출, `onReady` 이전 클릭 무시, `YT`를 bare identifier로 읽어 콜드 로드 `ReferenceError`, API 스크립트가 `VIEWER_JS`보다 먼저 로드됨, 텍스트 선택 중 seek가 실행됨, "확대" 링크 클릭이 seek와 함께 발생함(§5). 7. **기능 검사 실패**(§14): 필수 검사 항목 누락, `kind: "dom"` 항목 중 `pass`가 true가 아니거나 `skipped_reason`이 null이 아닌 항목이 있음. 일반 헤드리스 회차의 `player_api` 실패는 `skipped_reason`이 있을 때만 스킵 허용. headed 실행/승인 회차는 스킵 없이 전부 `pass: true`. 8. **캡처 세트 불완전/신선도 위반**(§14): `capture-manifest.json` 길이가 37이 아니거나, §14에 열거한 조합이 누락·중복되거나, PNG가 아닌 파일이 섞이거나, 검증 대상 소스보다 오래된 캡처를 씀. 9. **접근성 회귀**: 포커스 링이 안 보임, 탭 타깃이 44px 미만, `role="tablist"`/ `aria-selected`/`aria-pressed`/`aria-expanded` 중 하나라도 빠짐, 인터랙티브 요소 경계에 `--line-strong`이 아니라 `--line`(1.25:1, 3:1 미달)을 씀. 10. **미감·가독성 위반**(신규): 본문 문단이 16px 미만, `--measure`가 720px을 넘음, 본문 행간이 1.6 미만, 이미지/figure가 읽기 컬럼 전체 폭이 아님, 인터랙티브 요소에 액센트가 아닌 두 번째 색이 경쟁적으로 쓰임(포지션 칩 제외), 모바일에서 태그 행이 2줄을 넘게 줄바꿈됨, 플레이어가 안 보이거나 찌그러짐(링크 전용 세션은 플레이어 대신 `.watch-bar`가 정상이다), 접힌 플레이어의 플레이스홀더가 "펼치기" 버튼을 덮음, 초광각(비 > 2) 프레임이 ≤640px에서 페이지를 가로로 스크롤시키거나 이동 상자 없이 높이 ~100px로 납작하게 보임, 콘텐츠로 설명 안 되는 160px 넘는 빈 공백이 있음, 팀원이 자기 피드백을 찾는 데 "내 피드백" pill 1회 탭을 넘는 조작이 필요함, 헤더에 제목+날짜 외의 요소(칩·버튼·아이콘 등)가 섞여 산만함. 차단이 아닌 항목: 서브픽셀 렌더링 차이, 폰트 힌팅에 따른 안티앨리어싱 차이, 브라우저별 스크롤바 폭 차이로 인한 1–2px 디프. ## 16. 검사·검색 규칙 (스크립트가 정하는 것) 원칙(§1)대로 스크립트는 **데이터에서 결정되는 것만** 자동화하고 글쓴이의 판단을 제한하지 않는다. 아래 규칙은 모두 "확인했다는 흔적이 글에 있는가"를 보며, 무엇을 써야 하는지는 정하지 않는다. 계약 문구와 에러 메시지는 `references/contracts.md`가 정본이다. - **마커 색은 찾아본다**(`check notes`, `checkMarkerColorsLooked`): 유닛이 팀원 M을 `unidentified_member_ids`에 넣었고 `marker_colors`에 그 유닛 경기·M의 색 C가 있으면, 그 유닛 frame 캡션 하나는 C와 "삼각형"을 함께 담아 색으로 M을 짚거나, 유닛의 `marker_unresolved_ko[M]`(1–80자 한 줄, 카드에 렌더하지 않는 작업 기록)에 짚지 못한 이유를 적는다. 색을 적어 두고 그 유닛 프레임에서는 찾지 않은 채 "못 찾음"으로 넘기는 것을 막는다. 이유를 캡션에 쓰면 독자가 작업 메모를 읽게 되므로 캡션의 작업 메모 꼴(`/색으로\s*(사람을\s*)?가리키지\s*않/`, `/삼각형이\s*(함께|같이)\s*(있어|보여)/`)은 에러다(`requireNoMarkerWorkNote`). `marker_unresolved_ko`의 키는 그 유닛의 `unidentified_member_ids` 안의 팀원이어야 한다. - **명단에 없는 이름표는 기록한다**(`check notes`, `checkUnmatchedNameTags`): frame 캡션의 " 이름표"가 명단 팀원에 속하지 않으면(TAG가 이름·별칭·게이머태그를 담거나, TAG가 든 괄호 바로 앞이 팀원 이름이면 속한다 — 명단 대조는 기존 `mentionsMember`/`memberLabels`) 그 유닛 경기의 `unmatched_name_tags`에 있어야 한다. 이름표가 누구인지 추정하지 않고 "명단에 없음"으로 카드 범례에 남긴다("SAMBA"가 아마 우사라도 사용자만 확정한다). 같은 쉼표 절에서 앞의 "상대"가 가리키는 상대 선수 이름표는 대상이 아니다. 거꾸로 `unmatched_name_tags`의 `tag`가 명단에 속하면 에러다. - **색 삼각형은 범례에 있는 색이다**(`check notes`, `checkColourMentionsInLegend`): 캡션·`fault_scene`·`look_at`·`direction_check_ko`의 "<색> 삼각형"은 그 경기 `marker_colors`/`unmatched_name_tags`의 색이어야 한다(상대 선수 이야기는 같은 쉼표 절에서 색 앞의 "상대"로 면제). 범례에 없는 색은 독자가 찾을 사람이 없는 포인터이므로 기록하거나 위치로만 쓴다. 에러는 유닛·색마다 한 번이다. "상대"가 색 뒤에 오는 절("자홍 삼각형 수비수(SAMBA 이름표)와 … 상대 하나와 붙어")은 면제하지 않는다. - **패스 카드는 공을 말한다**(`check notes`, `checkPassCardNamesBall`): 제목 조각에 "패스" 또는 "<팀원>에게"가 있으면 frame 캡션 하나 이상에 낱말 "공"(조사 꼴 포함, 공격·공간·공중 제외)이 있다. 패스는 공의 위치 없이 읽히지 않는다. - **방향 확인 카드는 장면 줄이 없다**(`check notes`, `checkFaultScene`): `direction_check_ko`가 있으면 `fault_scene`은 에러이고 -ㅁ 제목의 `fault_scene` 필수는 면제다. 원문 방향과 프레임이 어긋난 카드는 원문이 말한 장면을 프레임으로 보여 줄 수 없다. - **추정 행위자가 반복 지적에 묶이면 알린다**(`check plan`, `recurringInferredActorWarnings`): `recurring[].member_ids`에 든 팀원이 연결 유닛의 `inferred_member_ids`에도 있으면 "반복 지적