[patternflow-bot]

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

저널 글 쪽엔 <main> 이 없어서, 화면 낭독기로 본문으로 건너뛰면 닿을 곳이 없었어요. 74쪽 모두요. 머지하면 글 쪽도 목록 쪽처럼 <main> 하나로 감싸여 본문으로 바로 건너뛰고, 눈에 보이는 화면은 1px 도 바뀌지 않아요.

좋아지는 것: 화면 낭독기가 저널 글 본문으로 바로 건너뛴다 — 목록 쪽과 같은 길로 글에 닿는다

체크리스트

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 창작자 지시 610 이 다 끝났는지 보기(6 [DONE] 텍스트 레이어의 글을 비우면 미리보기도 비고, 판을 돌린 흐르기 글이 다시 열어도 살고, 글꼴을 못 남기면 그렇다고 말한다 #244, 7 [DONE] 가이드 연습 벽 카드의 노브가 커뮤니티 카드와 같은 셈으로 돌고, Lab 주석이 포크 번호 대신 말로 적는다 #246, 8 [DONE] 커뮤니티 메뉴와 폰 탭에서 Workshop 이 빠지고, 옛 워크숍 주소는 커뮤니티 첫 화면으로 간다 #268, 9 [DONE] 커뮤니티 메뉴에서 Atlas 가 빠지고, 아틀라스는 쪽 아래 Archive 링크로 닿는 읽기 전용 보관함이 된다 #271, 10 [DONE] 바퀴 106~132 가 고칠 커뮤니티 후보 35줄이 서고, 남의 이름으로 보이는 구멍이 맨 위에 선다 #273 — [DONE] 커뮤니티의 펌웨어 안내 띠가 첫 그림부터 쪽에 있어서, 하이드레이션 뒤에 쪽 전체를 아래로 밀지 않는다 #289 와 133138바퀴가 적은 그대로)
• 앞 바퀴 PR([DONE] 데스크톱에서 키보드로도 내 덱의 패턴 하나를 옮기거나 뺄 수 있다 #303~[DONE] 저널 글 아래 목록이 721px 위에서 본문과 같은 자리에서 시작하고 끝난다 #311) 댓글 · 리뷰 · 줄 댓글 읽기 — 글 없음
• 133138바퀴 PR([DONE] 데스크톱 저널 목록에서 날짜가 두 줄로 꺾이지 않는다 #306[DONE] 저널 글 아래 목록이 721px 위에서 본문과 같은 자리에서 시작하고 끝난다 #311) 읽고 같은 주제 피하기
• dev 빌드의 글 74쪽을 390 과 1440 에서 axe 로 재기
• 시험을 먼저 쓰고 dev 의 ArticleLayout.tsx 에서 빨간지 보기
• 고친 빌드에서 같은 148번을 다시 재고, 요소 상자 11,984개와 쪽 높이를 견주기
• 다섯 검사 · 전후 사진
• dev merge(dev 5bb2d0f 가 이미 들어 있음) · 검사 초록 · 겹침 기다리기

한 일

• web/src/components/journal/ArticleLayout.tsx 가 돌려주던 빈 묶음(<>)을 <main> 으로 바꿨어요. 그 안에 <article className="journal-article"> 와 글 아래 목록 <footer className="journal-article-footer"> 가 그대로 들어가요. 목록 쪽(JournalIndex.tsx)이 <main className="journal-index"> 안에 머리, 판, 바닥 줄을 다 넣는 것과 같은 꼴이에요.
• globals.css 엔 맨 main 을 고르는 규칙이 없어서 클래스를 달지 않았어요. 바꾼 줄은 두 줄이에요.
• 새 web/src/components/journal/ArticleLayout.test.tsx 가 글 쪽을 그려서 main 이 하나인지, 그린 것의 맨 위가 main 하나뿐인지, 그 안에 글과 제목, 본문, 아래 목록의 링크가 있는지 봐요.

증거

dev 빌드와 이 브랜치 빌드를 차례로 next start 로 띄우고, /journal, /journal/en 이 잇는 글 74쪽(37편의 두 언어)을 390×844 와 1440×900 에서 열어 axe-core 4.10.3 을 돌렸어요.

	dev	이 브랜치
쪽마다 <main>	0	1 (글과 아래 목록을 다 안음)
landmark-one-main	148번 모두, 148곳	0
region(어느 길잡이 구역에도 없는 덩이)	148번 모두, 900곳	0
color-contrast	148번, 592곳	148번, 592곳
heading-order	8번, 8곳	8번, 8곳

남은 둘은 이 PR 과 상관없이 그대로예요. color-contrast 는 쪽마다 아래 목록의 큰 회색 번호(.pf-ghost, 1.55:1) 넷이고, heading-order 는 make-it-easy-to-build 와 today-is-my-birthday 두 언어 판의 글 안 h3 이에요.

화면이 그대로인지는 두 길로 봤어요.

• 두 빌드의 첫 화면 PNG: 148번 가운데 142번이 바이트까지 같았어요. dev 를 두 번 찍어 견줘도 142번이었고, 다른 여섯이 매번 다른 쪽이라 그림이 실리는 때의 차이예요. 글 상자와 아래 목록 상자의 x, y, 폭, 높이는 148번 모두 같았어요.
• 이 브랜치 빌드의 같은 한 번 연 쪽에서 <main> 을 걷어 dev 꼴로 되돌리고 앞뒤를 견줬어요. 148번 모두 main 밖 요소 11,984개의 상자와 쪽 높이가 같았어요. 첫 화면 PNG 는 146번이 같았고, 둘(nam-june-paik-me-patternflow, v1-30-days/en 의 390)은 표지 그림 상자 안 38px 가 달랐어요. 2초 기다려 다시 찍으니 같았어요. 그림을 DOM 에서 옮기면 다시 그려서예요. 아무것도 걷지 않은 대조는 148번 모두 같았어요.

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

× ArticleLayout > puts the whole post inside one main landmark
× ArticleLayout > keeps the article and the list of nearby posts in it
TestingLibraryElementError: Unable to find an accessible element with the role "main"
Tests  2 failed (2)

고친 뒤엔 저널 시험 셋이 Tests 17 passed (17) 예요.

다섯 검사(web/ 에서):

npm ci                              → exit 0
npm run lint -- --max-warnings=0    → exit 0
npm run typecheck                   → exit 0 (tsc 둘 다)
npm run build                       → exit 0 (dev 판도, 이 브랜치 판도 처음 한 번에)
npm run check:ci                    → exit 0 · Test Files 131 passed (131) · Tests 1605 passed (1605)
                                      drift 14 passed, links-absolute · roadmap skipped
npm run check:voice -- -            → (PR 본문) check:voice: nothing found

roadmap 은 이 컨테이너의 gh 로 원래 레포를 읽지 못해 건너뛰었어요. 바꾼 글은 PR 본문과 시험 주석뿐이에요.

PR 의 검사(head 9639bed): Drift checks | completed | success, Web CI | completed | success. 겹침 기다리기는 「안 겹친다」 였어요.

전후 사진은 「머리아파」 글 쪽 첫 화면이에요. 두 폭 모두 dev 와 이 브랜치의 PNG 가 바이트까지 같아요.

실행법

cd web
npx vitest run src/components/journal/ArticleLayout.test.tsx
npm run build && npx next start -p 3100
# /journal/headache 를 열고 개발자 도구의 접근성 트리를 보면 main 아래에 article 과 아래 목록이 있다

가정

• 133 · 135 · 136 · 137 · 138바퀴가 「다음 바퀴」 에 두고 하지 않은 글 쪽 <main> 을 골랐어요. 앞 바퀴들은 눈에 보이는 깨짐을 먼저 했어요. 그 줄이 다 끝났고, 이 감은 쪽마다 재현돼요.
• 작업 글은 디테일 다듬기에서 새 요소를 넣지 말라고 해요. <main> 은 보이는 것이 없는 길잡이이고, 목록 쪽이 이미 쓰는 태그라서 새 요소로 보지 않았어요. 빈 묶음을 태그로 바꾼 것이라 보이는 화면도 위처럼 그대로예요.
• 아래 목록 <footer> 도 <main> 안에 넣었어요. 밖에 두면 쪽의 바닥 구역(contentinfo)으로 남는데, 목록 쪽은 바닥 줄을 <main> 안에 둬서 그 꼴을 따랐어요. 두 꼴 모두 axe 는 0 이에요.
• JournalLightbox 는 <article> 안에 그대로 있어요. 열린 창은 position: fixed 라 감싼 상자가 바뀌어도 자리가 같아요.
• 남은 color-contrast 592곳은 여러 화면이 같이 쓰는 꾸밈 번호 .pf-ghost 라서, heading-order 8곳은 글 안의 제목이라서 건드리지 않았어요.
• 표 밖: 없음.

Changelog

Web

• A journal post is one <main>, as the journal index is. A screen reader's jump to the main content found nothing on a post, and axe flagged landmark-one-main on all 74 posts.

경험

언제: 저널 마크업을 바꾼 뒤 화면이 그대로인지 두 빌드의 PNG 로 견줄 때
교훈: 두 빌드의 첫 화면 PNG 는 그림이 실리는 때 때문에 같은 판끼리도 몇 쪽이 달라요. 고친 판을 한 번 연 쪽에서 DOM 을 dev 꼴로 되돌리고 모든 요소 상자를 견주고, 아무것도 안 바꾼 대조를 같이 돌려요
근거: #312 에서 dev 를 두 번 찍으니 148번 가운데 6번이 달랐고 매번 다른 쪽이었어요. 같은 쪽 되돌리기로는 요소 상자 11,984개가 148번 모두 같았고, 대조는 PNG 까지 148번 모두 같았어요

바퀴

바퀴 139 · 후보: 저널 — 고친 곳: web/src/components/journal/ArticleLayout.tsx · 까닭: 저널 글 74쪽 모두에 <main> 이 없어 axe 가 390 과 1440 에서 landmark-one-main 148곳, region 900곳을 잡았다

다음 바퀴

• 그림을 크게 열어도 초점이 뒤에 남는다: /journal/a-strange-dream 1440 에서 그림을 누르면 .journal-lightbox(role="dialog", aria-modal="true")가 열리는데 초점은 BODY 그대로이고, Tab 한 번에 창 밖 아래 목록의 「34 패턴플로우 사용법」 링크로 가요. components/journal/JournalLightbox.tsx:70~:93. 열리면 닫기 단추로 초점을 옮기고 Tab 을 창 안에 두면 돼요.
• 글 쪽 OG 그림의 날짜: app/journal/[slug]/opengraph-image.tsx:54 가 post?.date 를 그대로 찍어서 공유 카드에 2026-05-14T01:30:00+09:00 이 나와요. 134바퀴가 서울로 맞춘 formatJournalDate 를 읽으면 돼요.
• 안 쓰는 저널 규칙: .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바퀴가 셌어요).

https://claude.ai/code/session_01Gdqi6RUTT6FdSAKyKZ39G9

---

Generated by Claude Code