[DONE] 첫 화면 영상이 움직임 줄이기를 켠 사람에겐 사진으로 나오고, 탭은 열린 탭을 화면 읽기 프로그램에도 알린다

[patternflow-bot]

dev / https://claude.ai/code/session_01Di3xhBuUF8X45hwNhYnSUG

첫 화면에서 움직임 줄이기를 켠 사람은 이제 유튜브 영상 대신 제품 사진을 봐요. 지금 영상은 멈출 길 없이 89초를 저절로 돌고 그 설정을 보지 않아요. 데스크톱 탭(Build, Pattern, Inside)은 폰 탭처럼 열린 탭을 화면 읽기 프로그램에 「pressed」로 알리고, 패널 쪽이 쪽의 본문(<main>)이 돼요.

좋아지는 것: 움직임을 줄인 사람에겐 첫 화면이 사진으로 선다 — 멈출 수 없는 영상이 돌지 않는다

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR([DONE] Patternflow 바퀴 절차와 후보 표 #95 [DONE] Pattern Lab 에서 매트릭스 크기를 바꾼 뒤에도 픽셀 되돌리기가 그림을 지킨다 #96 [DONE] 링크를 메신저나 X 에 붙이면 쪽마다 제 제목과 그림이 뜬다 #97 [DONE] Pattern Lab 의 Del 이 그림이 든 레이어를 지우기 전에 한 번 묻는다 #98 [DONE] 폰에서 Pattern Lab 패널이 화면 폭 그대로 보인다 #99 [DONE] Pattern Lab 에서 휠로 확대할 때 패널이 함께 구르지 않는다 #100)의 대화 댓글, 리뷰, 줄 댓글 읽기: 여섯 다 없어요
• 후보 6 이 dev 에서 아직 안 고쳐졌는지 보기: dev 빌드에서 움직임 줄이기를 켜도 영상이 떴어요
• Hero.tsx: 움직임 줄이기면 영상을 붙이지 않는다
• RightPanel.tsx: 데스크톱 탭에 aria-pressed, ✕ 숨기기, Sections nav, 패널을 <main> 으로
• 시험 여덟. 고치기 전 코드에서 일곱이 떨어지는 것부터 봤어요
• lint, typecheck, build, check:ci, check:voice
• Chromium 에서 고치기 전과 뒤를 재기, 390, 1440 사진
• dev merge(이미 최신이었어요)
• GitHub 검사 초록: 4a916f4 에서 Drift checks, Web CI 둘 다 success

한 일

components/sections/Hero.tsx 는 prefers-reduced-motion: reduce 를 useSyncExternalStore 로 읽어요. 켜져 있으면 iframe 을 아예 그리지 않아서 유튜브에 요청도 가지 않고, 늘 깔려 있던 포스터 /product_v2.jpg 가 그대로 보여요. 서버는 설정을 모르니 포스터만 보내고, 영상은 하이드레이션 뒤 브라우저가 붙여요. CommunityShots.tsx 가 같은 꼴이에요. iframe 과 3초, 92초 타이머는 HeroVideo 로 옮겼어요. 보는 중에 설정을 켜면 영상이 바로 빠지고, 끄면 새 HeroVideo 가 붙어 처음처럼 3초 숨었다가 떠요.

components/sections/RightPanel.tsx 의 데스크톱 탭 세 단추에 aria-pressed 를 달았어요. 폰 단추엔 이미 있었어요. 열린 탭의 ✕ 는 aria-hidden 이라 이름이 「✕ Build」가 아니라 「Build」로 읽혀요. 탭 기둥은 div 에서 <nav aria-label="Sections"> 가 됐어요. 폰 바와 같은 이름이고, CSS 가 둘 가운데 하나만 보여서 화면 읽기 프로그램은 어느 폭에서든 Sections 하나를 만나요. 패널을 감싼 .content-panel 은 <main> 이 됐어요. /, /build, /pattern, /inside, /inside/<빌드> 가 모두 HomeView 를 거쳐서 다섯 쪽에 본문이 생겨요. 스타일은 모두 클래스에 붙어 있어서 바뀐 곳이 없어요.

시험은 여덟이에요. 새 Hero.test.tsx 에 넷: 움직임이 괜찮으면 3초 숨었다 뜨고 92초에 빠지는지, 움직임 줄이기면 10초 뒤에도 iframe 이 없는지, 보는 중에 켜고 끄는지, 서버 HTML 에 iframe 이 없는지예요. 새 RightPanel.test.tsx 에 넷: 두 탭 줄이 다 Sections 이고 열린 탭만 pressed 인지, ✕ 가 이름에 들지 않는지, 누르면 pressed 가 옮겨 가고 열린 탭을 또 누르면 닫히는지, 패널이 탭 밖의 <main> 하나에 드는지예요.

증거

web/ 에서 돌린 각 출력의 끝줄이에요.

npm ci                            added 794 packages, and audited 795 packages in 35s
npm run lint -- --max-warnings=0  lint exit 0 (출력 없음)
npm run typecheck                 typecheck exit 0 (출력 없음)
npm run build                     ƒ  (Dynamic)  server-rendered on demand
npm run check:ci                  passed   virtual-panel   (exit 0, roadmap 만 skipped: gh 로그인 없음)
npm run check:voice               check:voice: nothing found

check:ci 안의 check:panels 는 Test Files 42 passed (42), Tests 531 passed (531) 이에요. 바퀴 5 의 40, 523 에서 파일 둘, 시험 여덟이 늘었어요.

고치기 전 코드에 새 시험만 얹어 돌린 끝이에요. 지금 영상이 도는 꼴을 지키는 첫 시험만 통과해요.

 ✓ Hero > plays the video over the poster, hidden while the player loads
 × Hero > shows the poster alone when reduced motion is on
 × Hero > drops the video when reduced motion turns on, and starts it hidden again when it turns off
 × Hero > sends the poster without the embed from the server
 × RightPanel > names both tab rows Sections and marks the open tab pressed in each
 × RightPanel > keeps the ✕ on the open desktop tab out of its name
 × RightPanel > moves pressed with a click, and a second click on the open tab closes it
 × RightPanel > puts the panels in one main, outside the tabs
      Tests  7 failed | 1 passed (8)

dev(7b97b6e)와 이 브랜치를 각각 빌드해서 Chromium 으로 열고 5초 뒤에 쟀어요. 줄마다 쪽, 폭, 움직임 설정, 히어로의 iframe 수, 유튜브로 간 요청 수, <main> 수, 보이는 탭 줄의 접근성 트리예요.

고치기 전
/       390  no-preference  iframe 1  유튜브 1  main 0  navigation "Sections": Build, Pattern, Inside
/       390  reduce         iframe 1  유튜브 1  main 0  navigation "Sections": Build, Pattern, Inside
/       1440 reduce         iframe 1  유튜브 1  main 0  (nav 없음) button "Build", "Pattern", "Inside"
/build  390  reduce         iframe 1  유튜브 1  main 0  navigation "Sections": Build [pressed], Pattern, Inside
/build  1440 reduce         iframe 1  유튜브 1  main 0  (nav 없음) button "✕ Build", "Pattern", "Inside"

고친 뒤
/       390  no-preference  iframe 1  유튜브 1  main 1  navigation "Sections": Build, Pattern, Inside
/       390  reduce         iframe 0  유튜브 0  main 1  navigation "Sections": Build, Pattern, Inside
/       1440 reduce         iframe 0  유튜브 0  main 1  navigation "Sections": Build, Pattern, Inside
/build  390  reduce         iframe 0  유튜브 0  main 1  navigation "Sections": Build [pressed], Pattern, Inside
/build  1440 reduce         iframe 0  유튜브 0  main 1  navigation "Sections": Build [pressed], Pattern, Inside

/ 와 /build 를 움직임이 괜찮은 설정으로 열면 1440 에서도 iframe 1, 유튜브 1 로 전과 같아요. 1440 의 한 쪽을 열어 둔 채 설정을 바꿔 본 끝이에요.

4초, 움직임 괜찮음    iframe opacity 0.94 (페이드 중)
reduce 켬             no iframe
reduce 끔             iframe opacity 0
3.8초 뒤              iframe opacity 0.45 (페이드 중)

사진은 움직임 줄이기를 켜고 5초 뒤예요. 컨테이너가 유튜브에 닿지 못해서, 고치기 전 사진의 회색 칸은 영상 대신 깨진 쪽 그림이에요. 실제 브라우저에선 그 자리에 영상이 돌아요. 3D 미리보기는 컨테이너의 소프트웨어 GL 이라 비어 보이고, 고치기 전에도 같았어요.

실행법

cd web
npm ci
npx vitest run src/components/sections/Hero.test.tsx src/components/sections/RightPanel.test.tsx
npm run build && npx next start -p 3100

http://localhost:3100/ 를 열고 개발 도구의 Rendering 에서 「Emulate CSS media feature prefers-reduced-motion」을 reduce 로 바꿔요. 영상이 빠지고 사진만 남아요. 데스크톱 폭에서 Build 를 누르고 접근성 트리를 보면 button "Build" 가 pressed 이고 navigation "Sections" 와 main 이 보여요.

가정

• 서버는 이제 포스터만 보내고 iframe 은 하이드레이션 뒤에 붙어요. 영상을 3초 숨기는 타이머는 전에도 하이드레이션 뒤에 돌기 시작해서, 영상이 뜨는 때는 거의 같아요. 유튜브 문서를 받기 시작하는 때만 HTML 을 읽을 때에서 하이드레이션 때로 늦어요.
• 데스크톱 탭 기둥을 <nav aria-label="Sections"> 로 바꿨어요. 후보 줄엔 없는 말이지만, 폰 바는 이미 같은 nav 라서 열린 탭을 알리는 일을 두 폭이 같게 하려면 함께 가야 한다고 봤어요.
• 첫 화면의 <footer id="origin"> 이 이제 <main> 안에 들어서 contentinfo 랜드마크가 아니에요. 히어로 패널의 마지막 칸이고 히어로 탭에서만 보여서, 패널 밖으로 꺼내지 않고 두었어요.
• 앞 바퀴 「다음 바퀴」대로 순위 6 을 골랐어요. 앞 바퀴가 고친 것을 되돌린 곳은 없어요.
• 표 밖: 움직임 줄이기를 켜지 않은 사람에겐 영상이 여전히 멈출 길 없이 89초를 돌아요. WCAG 2.2.2 는 5초 넘게 움직이는 것을 멈출 길을 두라고 해요.
• 표 밖: 책상의 check:ci 가 links-absolute: skipped 를 찍은 뒤 passed links-absolute 로 셈해요. 후보 13 이 그 일이에요.

Changelog

Web

• The home page video gives way to reduced motion, and the section tabs say which one is open. With reduced motion on, the hero shows its poster and never loads the YouTube embed, which autoplays with no control to stop it. The desktop tab column is now a Sections nav whose open tab is aria-pressed, as on the phone, with its ✕ hidden from screen readers, and the panel beside it is the page's <main>.

바퀴

바퀴 6 · 후보 6 「첫 화면 영상이 움직임 줄이기를 켠 사람에겐 사진으로 나오고, 탭은 열린 탭을 화면 읽기 프로그램에도 알린다」

다음 바퀴

• 7 「가이드 끝의 「다음」 링크가 사이트 안 쪽은 다시 불러오지 않고 넘어가고, 밖으로 가는 링크만 ↗ 를 달고 새 탭에서 열린다」: BuildCards.tsx 의 Links 꼴을 가져오면 돼요.
• 8 「한국어 가이드에서 화면 읽기 프로그램이 한국어 이름을 읽는다」: AudioShots.tsx 가 이미 언어별 alt 를 써서 본이 있어요.
• 9 「Pattern Lab 의 대화창이 Esc 로 닫히고, 위 메뉴는 터치와 키보드로도 닫힌다」: 대화창 셋이 aria-modal 인데 Esc 를 받지 않고, Panels 와 Recent 메뉴는 폰에서 열린 채 남아요.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Di3xhBuUF8X45hwNhYnSUG

---

Generated by Claude Code