[patternflow-bot]

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

저널 글에서 그림을 눌러 크게 열면 초점이 뒤 글에 남아서, Tab 한 번에 창 뒤 링크로 가고 글이 다른 자리로 굴러갔어요. 이제 초점이 창의 close 단추로 들어가 Tab 이 창 안에 머물고, 닫으면 연 그림으로 돌아와 읽던 자리가 그대로예요.

좋아지는 것: 그림을 크게 보고 닫아도 읽던 자리가 그대로다 — 키보드와 화면 낭독기로도 창 밖으로 새지 않는다

체크리스트

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 창작자 지시 남은 줄: 없음(지시 1~10 은 [DONE] Pattern Lab 에서 AI 갤러리와 Gemini 키 칸이 없어지고, Copy prompt 옆에서 v-field · rgb 를 고른다 #183 · [DONE] Pattern Lab 에 텍스트 레이어가 생겨 내 기기의 글꼴로 글을 넣고 끌어 옮긴다 #184 · [DONE] Pattern Lab 에서 글자를 글꼴 없이 도는 코드로 복사하고, 기기 헤더가 미리보기와 같은 그림을 낸다 #186 · [DONE] Pattern Lab 텍스트 레이어에 노브로 움직이는 흐르기 · 반짝임 · 색 램프 효과가 생긴다 #187 · [DONE] Pattern Lab 에 처음 온 사람이 막히는 곳 16개를 재서 바퀴 후보 표 맨 위에 넣는다 #188 · [DONE] 텍스트 레이어의 글을 비우면 미리보기도 비고, 판을 돌린 흐르기 글이 다시 열어도 살고, 글꼴을 못 남기면 그렇다고 말한다 #244 · [DONE] 가이드 연습 벽 카드의 노브가 커뮤니티 카드와 같은 셈으로 돌고, Lab 주석이 포크 번호 대신 말로 적는다 #246 · [DONE] 커뮤니티 메뉴와 폰 탭에서 Workshop 이 빠지고, 옛 워크숍 주소는 커뮤니티 첫 화면으로 간다 #268 · [DONE] 커뮤니티 메뉴에서 Atlas 가 빠지고, 아틀라스는 쪽 아래 Archive 링크로 닿는 읽기 전용 보관함이 된다 #271 · [DONE] 바퀴 106~132 가 고칠 커뮤니티 후보 35줄이 서고, 남의 이름으로 보이는 구멍이 맨 위에 선다 #273)
• 앞 바퀴 PR 의 세 직함 댓글: 일을 시키는 글 없음(대화 댓글 넷은 원래 레포로 옮겼다는 알림이고, 리뷰와 줄 댓글은 0)
• 133140바퀴([DONE] 데스크톱 저널 목록에서 날짜가 두 줄로 꺾이지 않는다 #306[DONE] 저널 글을 공유하면 카드에 날짜가 2026-05-14T01:30:00+09:00 대신 MAY 14, 2026 으로 찍힌다 #313)와 겹치지 않음: 그 바퀴들은 JournalLightbox.tsx 를 건드리지 않았고, 139바퀴와 140바퀴가 「다음 바퀴」 첫 줄로 이 일을 적었어요
• dev 빌드에서 재현(그림이 있는 글 쪽 50 × 390 · 1440)
• 고치기, 새 시험 다섯(dev 에서 5 빨강, 고친 뒤 5 초록)
• 전후 사진(폰 390 · 데스크톱 1440)
• npm ci · lint · typecheck · build · check:ci · check:voice
• dev merge(그새 dev 가 움직이지 않았어요)
• CI 초록(Web CI · Drift checks) · 겹치는 [DONE] PR 없음

한 일

web/src/components/journal/JournalLightbox.tsx 하나를 고쳤어요. 그림을 열면 close 단추로 초점을 옮겨요. 창에서 초점을 받는 것은 그 단추 하나라서, Tab 과 Shift+Tab 은 막고 초점을 그 단추에 둬요. 닫으면 연 그림으로 초점을 돌려줘요. <img> 는 tabindex 가 있어야 초점을 받아서 닫을 때 tabindex="-1" 을 달아요. Tab 순서에는 들지 않아요.

첫 판은 마우스로 열고 닫기만 해도 CLOSE 와 사진 둘레에 링이 남았어요. Chromium 은 스크립트가 옮긴 초점에도 링을 그려서예요. 그래서 focus() 에 focusVisible 을 줘요. 마우스로 열고 닫을 땐 링이 없어요. 창에서 Tab 을 누르면 그때부터 close 에 링이 보이고, 닫으면 그 링이 그림으로 따라가요. 이 옵션은 TypeScript 5.9 의 DOM 타입에 없어서 파일 안 작은 함수 moveFocus 하나에 모았어요.

새 시험 web/src/components/journal/JournalLightbox.test.tsx 는 다섯이에요. 열면 초점이 close 로 가는지, Tab 과 Shift+Tab 뒤에도 close 인지, Esc 와 close 단추가 초점을 그림으로 돌려주는지 봐요. 마지막 하나는 focus() 에 넘긴 focusVisible 이 Tab 앞에서는 false, 뒤에서는 true 인지 봐요. jsdom 은 링을 그리지 않아서 그 값을 봐요.

증거

사진은 /journal/a-strange-dream 의 첫 그림을 눌러 열고 Tab 한 번을 누른 화면과, 이어서 Esc 를 누른 화면이에요. dev 는 Tab 이 창 뒤 「34 패턴플로우 사용법」 링크로 가서 닫으면 글 아래 목록이 보여요. 고친 판은 close 에 링이 생기고, 닫으면 같은 그림에 링이 남아요.

빌드한 사이트에서 저널 글 쪽 74개를 다 열고, 그림이 있는 50쪽(글 25편의 한국어판과 영어판)에서 첫 그림을 눌렀어요. 390 과 1440 에서 100번이에요. 연 뒤, Tab 뒤, Shift+Tab 뒤, Esc 뒤의 document.activeElement 와 쪽 스크롤을 적었어요.

잰 것	dev	고친 판
열자마자 초점이 창 안	0/100	100/100
Tab 뒤 초점이 창 안	0/100	100/100
Shift+Tab 뒤 초점이 창 안	0/100	100/100
Esc 로 닫힘	98/100	100/100
닫은 뒤 초점이 연 그림	0/100	100/100
닫은 뒤 글이 다른 자리	72/100(중앙값 894px, 가장 멀리 6,035px)	0/100
닫고 다음 Tab 이 그림 뒤로	98/100	100/100

dev 에서 Esc 가 안 들은 둘은 /journal/i-hope-it-works-out 과 그 영어판의 390 이에요. Tab 이 창 뒤 유튜브 iframe 으로 들어가서 키 입력이 쪽에 오지 않았어요.

「닫고 다음 Tab」 은 유튜브 embed 때문에 흔들려요. 이 컨테이너는 유튜브를 받지 못해서, 그림 다음이 embed 인 쪽은 Tab 이 iframe 으로 가기도 하고 BODY 로 남기도 해요. 링 고침 전 판으로 처음 잰 때는 /journal/me-and-patternflow 390 에서 하나가 BODY 였어요(99/100). 그 쪽만 여섯 번 다시 돌리니 링크 1, iframe 2, BODY 3 이었고, 초점은 여섯 번 모두 그림에 있었어요. 위 표의 고친 판은 링 고침 뒤 다시 잰 값이에요.

링은 Chromium 153 에서 /journal/a-strange-dream 으로 :focus-visible 을 봤어요. 390 과 1440 이 같았어요.

한 일	초점	첫 판 링	고친 판 링
마우스로 그림 열기	close	있음	없음
close 를 마우스로 누르기	그림	있음	없음
바탕을 마우스로 누르기	그림	있음	없음
열고 Tab	close	있음	있음
Tab 뒤 Esc	그림	있음	있음

새 시험을 dev 의 JournalLightbox.tsx 에 돌리면

× JournalLightbox > moves the focus to the close button when a picture opens
× JournalLightbox > keeps Tab and Shift+Tab on the close button
× JournalLightbox > gives the focus back to the picture on Esc, without a Tab stop
× JournalLightbox > gives the focus back to the picture when the close button is pressed
× JournalLightbox > asks for a focus ring only once the reader has pressed Tab
Tests  5 failed (5)

고친 뒤엔 Tests 5 passed (5) 예요.

다섯 검사(web/ 에서):

npm ci                              → exit 0
npm run lint -- --max-warnings=0    → exit 0
npm run typecheck                   → exit 0 (tsc 둘 다)
npm run build                       → exit 0
npm run check:ci                    → exit 0 · Test Files 133 passed (133) · Tests 1612 passed (1612)
                                      drift 14 passed, links-absolute · roadmap skipped
npm run check:voice                 → read: 147 added lines in 2 files · check:voice: nothing found
npm run check:voice -- -            → (PR 본문) check:voice: nothing found

roadmap 은 이 컨테이너의 gh 로 원래 레포를 읽지 못해 건너뛰었어요.

실행법

# web/ 에서
npx vitest run src/components/journal/JournalLightbox.test.tsx
npm run build && npx next start -p 3100

http://localhost:3100/journal/a-strange-dream 에서 그림을 눌러 열고 Tab 과 Shift+Tab 을 눌러 봐요. 초점이 close 에 머물러요. Esc 를 누르면 같은 그림 앞에서 닫혀요. 100번 잰 스크립트는 스크래치 폴더의 playwright-core 1.56.1 과 컨테이너 Chromium 으로 돌렸고 레포에 두지 않았어요.

가정

• 고르는 차례는 창작자 지시 남은 줄(없음), 세 직함 댓글(없음), 저널 순서였어요. 저널에선 139바퀴와 140바퀴가 「다음 바퀴」 첫 줄에 적은 이 일을 골랐어요. 안 쓰는 저널 규칙 줄은 네 바퀴째 「다음 바퀴」에 있지만, 읽는 사람이 겪는 것을 먼저 했어요.
• 공용 lib/hooks/useDialog.ts 는 쓰지 않았어요. 그 훅은 열기 전 document.activeElement 로 초점을 돌려주는데, 그림을 눌러도 초점이 옮겨지지 않아 그 값이 BODY 예요. 링도 가리지 않아요. 여러 화면이 같이 쓰는 것이라 바꾸지 않고 저널 파일 안에서 고쳤어요.
• 닫을 때 그림에 단 tabindex="-1" 은 그대로 둬요. 글(MDX)은 그대로이고 그 그림은 Tab 순서에 들지 않아요.
• focusVisible 을 모르는 브라우저는 이 옵션을 무시하고 제 규칙으로 링을 그려요. 초점이 옮겨지는 것은 같아요. Safari 는 이 컨테이너에서 재지 못했어요.
• 그림은 Tab 순서에 없어서 키보드만으로 여는 길은 없어요. 새 기능이라 이번 바퀴에 넣지 않았어요.
• 화면 글(close, Close image, 창 이름)은 그대로예요.

Changelog

Web

• The journal's picture window keeps the focus. Opening a picture left the focus on the post, so Tab went to the links under the backdrop and scrolled the post away from the picture. The focus now starts on Close and stays in the window, and closing it puts the focus back on the picture.

경험

언제: 저널이나 사이트에서 스크립트로 초점을 옮기는 고침을 할 때
교훈: Chromium 153 은 마우스 클릭 뒤에도 focus() 로 옮긴 초점에 링을 그리니, 마우스 사용자에게 링을 안 보이려면 focus({ focusVisible: false }) 를 주고 이미 초점이 있는 단추에 링을 켤 땐 blur() 뒤 focus({ focusVisible: true }) 를 불러요
근거: #314 첫 판은 마우스로 열고 닫기만 해도 :focus-visible 이 다섯 경우 모두 참이었고, 옵션을 준 판은 마우스 셋이 거짓, Tab 뒤 둘이 참이었어요

바퀴

바퀴 141 · 후보: 저널 — 고친 곳: web/src/components/journal/JournalLightbox.tsx · 까닭: 그림을 크게 연 창에서 초점이 뒤 글에 남아 그림 있는 50쪽 100번 모두 Tab 이 창 뒤 링크로 갔고, 72번은 닫으면 글이 다른 자리였다

다음 바퀴

• 안 쓰는 저널 규칙: .journal-list-number(globals.css:1144, :1321), .journal-figure, .journal-figure-wide, .journal-figure-full 과 그 img, video, figcaption(:1638:1652, :1707, 폰 :1998:1999), .journal-index-thumb span(:1242), .journal-cover-slot span(:1271)을 컴포넌트와 글 74개 어디서도 그리지 않아요(136바퀴가 셌어요). 오늘 dev 에서도 줄 번호가 같아요.
• 그림 창의 close 단추가 작아요: 오늘 이 브랜치 빌드에서 390 과 1440 모두 44.2×18.8px 예요. 높이가 24px 밑이라 폰에서 누를 자리가 좁아요. 바탕을 눌러도 닫히지만 단추는 그 하나예요. globals.css:1694 의 .journal-lightbox-close 예요.
• 폰에서 저널의 작은 링크: 140바퀴가 390 에서 언어 전환 ko · en 이 18×19px, 글 쪽 맨 위 「All writing」 이 114×17px 이라고 쟀어요. 1440 에선 .journal-lockup 이 판 폭 1180×88px 를 다 차지해서 「Patternflow」 오른쪽 빈 곳을 눌러도 첫 화면으로 가요.

https://claude.ai/code/session_01Gdqi6Mr2cnHMsA4rsUWCSK

---

Generated by Claude Code