[patternflow-bot]

lsh / https://claude.ai/code/session_01Bc4JkqDnRXfLYUZjkMmSWq

폰에서 저널 그림 설명은 줄을 꽉 채우고 남은 낱말을 끝 줄로 보내서, 가운데 맞춘 설명 아래에 「works.」 하나만 서는 일이 360 에서 영어 설명 41개 가운데 8개였어요. 머지하면 설명이 글 제목처럼 줄을 고르게 나눠 끝 줄에 낱말 하나만 남는 설명이 세 폭 모두 0 이 되고, 줄 수와 721px 위 화면은 그대로예요.

좋아지는 것: 폰에서 저널 그림 설명 끝 줄에 낱말 하나만 안 남는다 — 설명이 한눈에 읽힌다

체크리스트

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 창작자 지시 6~10 이 다 끝났는지 보기([DONE] 텍스트 레이어의 글을 비우면 미리보기도 비고, 판을 돌린 흐르기 글이 다시 열어도 살고, 글꼴을 못 남기면 그렇다고 말한다 #244 · [DONE] 가이드 연습 벽 카드의 노브가 커뮤니티 카드와 같은 셈으로 돌고, Lab 주석이 포크 번호 대신 말로 적는다 #246 · [DONE] 커뮤니티 메뉴와 폰 탭에서 Workshop 이 빠지고, 옛 워크숍 주소는 커뮤니티 첫 화면으로 간다 #268 · [DONE] 커뮤니티 메뉴에서 Atlas 가 빠지고, 아틀라스는 쪽 아래 Archive 링크로 닿는 읽기 전용 보관함이 된다 #271 · [DONE] 바퀴 106~132 가 고칠 커뮤니티 후보 35줄이 서고, 남의 이름으로 보이는 구멍이 맨 위에 선다 #273)
• 세 직함 댓글 · 리뷰 · 줄 댓글 읽기(10월 1일 뒤 세 직함 글은 [DONE] hardware: Besoiobiy's printed case as a remix folder #1 · [DONE] Lab 갤러리 패널·Gemini 걷어 내기(#183)가 원래 레포 dev 위에 겹침 없이 다시 얹힌다 #215 · [DONE] 매니페스토 · AGENTS.md · /pattern 카드가 걷은 배치 생성 대신 지금 Pattern Lab 을 말한다 #243 · [DONE] patternflow.work 를 Cloudflare 로(#250)가 원래 레포 dev 위에 겹침 없이 다시 얹힌다 #253 의 알림 넷뿐이고 일을 시키지 않음, [DONE] 댓글의 각주와 이 사이트 안의 링크가 같은 탭에서 열리고, 댓글마다 제 각주로 간다 #296~[DONE] 폰에서 저널 글 안 두 줄 제목이 1.15 대신 1.25 로 서서 덜 붙는다 #324 리뷰 0 · 맡을 글 없음)
• 143151바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316[DONE] 폰에서 저널 글 안 두 줄 제목이 1.15 대신 1.25 로 서서 덜 붙는다 #324)가 고친 요소 · 속성 보기(그림 설명의 text-wrap 은 처음)
• 74쪽과 목록 둘을 360 · 390 · 430 에서 다 재기
• 고칠 값을 dev 빌드에 넣어 228번 다시 재 본 뒤 고르기
• 시험을 먼저 쓰고 dev 의 CSS 에서 빨간지 보기
• 다섯 검사 · 전후 사진 · 전후 잰 값 · /en 390
• dev merge(dev 7ecd930 가 이미 들어 있음)
• 검사 초록(head 3f7e356: Drift checks · Web CI success) · 겹침 기다리기 「안 겹친다」

한 일

• web/src/app/globals.css 폰 덩어리(@media (max-width: 720px))에 .journal-hero-cover figcaption, .journal-md-figure figcaption { text-wrap: balance; } 를 더했어요. 위에 까닭 주석 네 줄을 달았어요. 721px 위의 규칙은 그대로예요.
• web/src/components/journal/journalCss.test.ts 에 「journal captions on a phone」 시험 둘을 더했어요. 폰에서 두 그림 설명이 text-wrap: balance 인지 봐요.

증거

dev 빌드와 이 브랜치 빌드를 Chromium 으로 열어 getComputedStyle 과 글자마다의 Range 로 쟀어요. 저널 글 74쪽(한국어 37, 영어 37)과 /journal, /journal/en 을 360 · 390 · 430 에서 다 열었어요(228번).

글 묶음 31개(글 제목, 요약, 날짜 줄, 표지 설명, 본문 문단, 목록 항목, 글 안 h2 · h3, 그림 설명, 글 아래 목록, 언어 단추, /journal 의 머리, 첫 글, 목록, 바닥 줄 같은 것)를 기준에 견줬어요. 글에 인용 · 코드 · 표 · 글 안 h1 은 없고, NEW 표(11px)는 featured 를 둔 글이 없어 0곳이에요. 숫자로 기준 밖인 것은 없었어요. 본문 16px · 행간 1.68 · 자간 −0.005em · 문단 간격 1.1em · 한 줄 19.5 / 21.4 / 23.9자 폭 · 좌우 24px, 제목 행간 1.2 · 1.25, 메타 13px 이상, 낱말 가운데 줄바꿈 0, 넘침 0 이에요. 그래서 읽기 걸림을 셌어요. 여러 줄 글의 끝 줄에 낱말 하나만 남는 곳이에요.

영어(사이트가 싣는 글꼴)	360	390	430
그림 설명(가운데 맞춤, 13px)	41개 가운데 8	40개 가운데 6	37개 가운데 7
표지 설명	1개 가운데 0	1개 가운데 0	1개 가운데 1
글 안 h2	5개 가운데 1	5개 가운데 2	3개 가운데 1
본문 문단(왼쪽 맞춤)	511개 가운데 71	511개 가운데 65	510개 가운데 55

가운데 맞춘 그림 설명이 가장 잦았어요(15~20%). 사진 아래 가운데에 낱말 하나가 홀로 서서, 한 글자 줄과 같은 꼴로 걸려요.

고친 값, 전 → 후(.journal-md-figure figcaption 120개 · .journal-hero-cover figcaption 2개, JetBrains Mono 13px):

폰	360	390	430
text-wrap	wrap → balance	같음	같음
끝 줄이 낱말 하나인 영어 그림 설명	8 → 0	6 → 0	7 → 0
끝 줄이 낱말 하나인 영어 표지 설명	0 → 0	0 → 0	1 → 0
끝 줄 ÷ 가장 긴 줄, 글자 수(영어 설명 중 가장 작은 값)	0.12 → 0.80	0.18 → 0.76	0.07 → 0.76
끝 줄 ÷ 가장 긴 줄, 글자 수(가운데 값)	0.82 → 0.97	0.51 → 1.00	0.42 → 0.97
여러 줄 그림 설명 · 줄 수	72 그대로	66 그대로	60 그대로
쪽 높이 · scrollWidth	76쪽 그대로	같음	같음

74쪽과 목록 둘 전체를 같은 셈으로 전후 견줬어요. 바뀐 것은 두 그림 설명의 text-wrap 하나예요. 228번 모두 글 묶음마다의 줄 수, 쪽 높이, scrollWidth 가 같고, 줄마다의 글이 바뀐 것은 그림 설명 163곳과 표지 설명 4곳뿐이에요. 글자 크기, 행간, 자간, 여백, 폭은 다 같아요.

한국어 그림 설명은 상자에서 JetBrains Mono 에 없는 한글을 WenQuanYi Zen Hei 로 그려서, 줄바꿈 수는 폰과 달라요. 그래서 폭 ÷ 글자 크기로 봤어요. 설명 한 줄은 360 · 390 · 430 에서 24.0 · 26.3 · 29.4em 이에요. 「132% 달성. 크라우드 서플라이 도매 물량 덕분이다.」는 한글 폭이 0.92em 인 글꼴이면 25.6em, 1em 이면 27.0em 이라, 390 에서 한 줄일 수도 「… 물량 / 덕분이다.」 두 줄일 수도 있어요. 어느 쪽이든 balance 는 줄을 늘리지 않고, 두 줄이면 「132% 달성. 크라우드 / 서플라이 도매 물량 덕분이다.」처럼 나눠요. 상자에서 센 한국어 끝 줄 낱말 하나는 6 · 6 · 12 → 0 이에요.

/en 판(같은 규칙) 390 에선 영어 그림 설명 40개 가운데 끝 줄이 낱말 하나인 6개가 0 이 됐어요. 글자 크기 13px, 행간 1.68 은 그대로라 기준(메타 · 캡션 13px 이상) 안이에요.

창작자가 짚은 자간과 행간은 고치지 않았어요. 본문 자간 −0.005em(−0.08px), 행간 1.68(26.9px)이 360 · 390 · 430 모두 같고, 기준(자간 −0.030em, 행간 1.61.8, 영문 1.5~1.7) 안이라서예요.

721px 위는 그대로예요. 바뀐 줄은 폰 덩어리 안이고, 1440 사진은 전후가 바이트까지 같아요(md5 ea4bc19bd932fc3c448b5e190be91bf0 둘 다).

새 시험을 dev 의 globals.css 에 돌리면

× journal captions on a phone > balances the lines of .journal-md-figure figcaption
× journal captions on a phone > balances the lines of .journal-hero-cover figcaption
AssertionError: expected undefined to be 'balance' // Object.is equality
Tests  2 failed | 39 passed (41)

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

다섯 검사(web/ 에서):

npm ci                              → exit 0
npm run lint -- --max-warnings=0    → exit 0
npm run typecheck                   → exit 0
npm run build                       → exit 0
npm run check:ci                    → exit 0 · Test Files 133 passed (133) · Tests 1642 passed (1642)
                                      drift 14 passed, links-absolute · roadmap skipped (태그 없음 · gh 로그인 없음)
npm run check:voice                 → check:voice: nothing found (가지가 더한 23줄, 이 본문도)

사진은 /journal/its-a-failure/en 의 「A PDM mic wired onto the ESP32. It works.」(360 · 390 · 1440), /journal/the-messy-desk/en 의 「The messy desk. The one with the computer is worse.」(430, PDM 설명은 430 에서 한 줄이라 바뀌지 않아요), /journal/good-but 의 「132% 달성 …」(390, 상자 글꼴) 자리를 잘라 찍었어요.

실행법

cd web
npx vitest run src/components/journal/journalCss.test.ts
npm run build && npx next start -p 3100
# 390px 로 /journal/its-a-failure/en 을 열고 PDM 마이크 사진의 설명이 「A PDM mic wired onto / the ESP32. It works.」로 나뉘는지 본다

가정

• 고르는 차례는 창작자 지시 남은 줄(없음), 세 직함 댓글(맡을 글 없음), 저널 타이포 순서였어요.
• 74쪽과 목록 둘을 세 폭에서 다 쟀고 숫자로 기준 밖인 것이 없어서, 폰에서 재현한 읽기 걸림 하나를 골랐어요. 끝 줄에 낱말 하나만 남는 곳 가운데 가운데 맞춘 그림 설명이 가장 잦았어요. 151바퀴([DONE] 폰에서 저널 글 안 두 줄 제목이 1.15 대신 1.25 로 서서 덜 붙는다 #324) 「다음 바퀴」 둘째 줄의 「모습」 두 글자 끝 줄도 이 설명 묶음이에요.
• /journal 머리의 「Patternflow」(50px, 행간 1)와 「Journal」(25px, 행간 1.1)은 세 폭 모두 한 줄인 이름이라 글에 쓰인 제목의 행간 기준에 넣지 않았어요.
• 값은 pretty 가 아니라 balance 예요. 설명이 가운데 맞춤이라 줄 길이가 고르면 모양이 서고, 글 제목(.journal-article-header h1)과 첫 글 제목이 이미 balance 예요. balance 는 iOS Safari 17.5 와 Chrome 114 부터 읽고, 못 읽는 브라우저에선 지금처럼 줄을 채워요.
• 그림 설명 둘(글 안 120개, 표지 2개)에 속성 하나를 같이 뒀어요. 둘 다 사진 아래 가운데 맞춘 13px 설명이고, 표지 설명도 430 에서 「… pre-launch / page」로 낱말 하나가 남았어요. 크게 본 그림의 설명(.journal-lightbox figcaption)은 어두운 창 안의 다른 자리라 두었어요.
• 143바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316)는 .journal-panel, .journal-article 의 margin 과 width, 144바퀴([DONE] 폰에서 저널 목록의 날짜와 읽는 시간이 10.5px 대신 13px 로 읽힌다 #317)는 .journal-list-meta 의 font-size, 145바퀴([DONE] 폰에서 저널 한국어 글이 낱말 가운데서 줄이 바뀌지 않는다 #318)는 .journal-reading 의 word-break · overflow-wrap, 146바퀴([DONE] 폰에서 두 줄이 된 저널 글 제목이 낱말째로 꺾이고 줄 사이가 벌어진다 #319)는 .journal-article-header h1 의 line-height · word-break · overflow-wrap, 147바퀴([DONE] 폰에서 저널 글 본문이 15px 대신 16px 로 읽힌다 #320)는 .journal-reading 의 font-size, 148바퀴([DONE] 폰에서 저널 글 안 목록의 항목이 문단처럼 떨어져 읽힌다 #321)는 .journal-reading li 의 margin-bottom, 149바퀴([DONE] 폰에서 저널 표지 그림 설명이 낱말 가운데서 꺾이지 않는다 #322)는 .journal-hero-cover figcaption 의 word-break · overflow-wrap, 150바퀴([DONE] 폰에서 저널 첫 글 제목이 낱말째로 꺾이고 줄 사이가 1.2 로 선다 #323)는 .journal-featured h1 의 line-height · word-break · overflow-wrap, 151바퀴([DONE] 폰에서 저널 글 안 두 줄 제목이 1.15 대신 1.25 로 서서 덜 붙는다 #324)는 .journal-reading h1, h2, h3 의 line-height 를 고쳤어요. 그림 설명의 text-wrap 은 처음이에요.
• 저널 글, 그림, 화면 글, incoming/ 은 그대로예요.

Changelog

Web

• A journal figure's caption shares its words across its lines on a phone. Below 721px a caption filled each line and could leave one word alone under the picture: 8 of the 41 English captions on two lines or more at 360. Captions now balance their lines, as the titles do, with no caption gaining a line and pages from 721px up unchanged.

경험

언제: 저널 바퀴에서 재기에 쓴 next start 를 끄고 다른 빌드를 같은 포트로 띄울 때
교훈: pkill -f next-server 대신 ps -eo pid,cmd 로 next-server 의 PID 를 골라 kill 해요. pkill -f 는 그 명령을 돌리는 셸도 같은 글을 품어서 셸째 죽어요
근거: #325 에서 pkill -f "next start -p 3100"; pkill -f next-server 가 exit 144 로 셸을 끝냈고, 그 뒤 ps 에 next-server(PID 1475)가 남아 옛 빌드로 200 을 돌려줬어요

바퀴

바퀴 152 · 후보: 저널 타이포 — 고친 곳: web/src/app/globals.css · @media (max-width: 720px) 의 .journal-hero-cover figcaption, .journal-md-figure figcaption · text-wrap(wrap → balance) · 까닭: 폰 360 · 390 · 430 에서 숫자로 기준 밖인 값이 없었고, 가운데 맞춘 영어 그림 설명의 끝 줄이 낱말 하나인 곳이 41개 가운데 8 · 40개 가운데 6 · 37개 가운데 7 로 읽기 걸림 가운데 가장 잦았다

남은 것

• 글 안 영어 h2 의 끝 줄에 낱말 하나가 혼자 남아요. 360 에서 「The word "business," and the / cafeteria」, 390 에서 그것과 「Making patterns, and hitting the gacha / wall」, 430 에서 「Pulling patterns out of AI, and why it's no / good」예요. 두 줄 h2 5 · 5 · 3개 가운데 1 · 2 · 1 이에요. 글 제목과 이번 그림 설명은 text-wrap: balance 인데 .journal-reading h2 엔 없어요.
• 목록 제목(.journal-list-body strong, Inter 500 · 18px)의 영어 끝 줄에 낱말 하나가 남아요. /journal/en 에서 360 은 「Nam June Paik, Me, / Patternflow」, 「Wins and losses: the next / step」, 430 은 「How to keep going without falling / apart」예요. 같은 제목이 글 아래 목록(.journal-context-list .pf-row-t)에도 나와서, 영어 글 37쪽의 글 아래 목록 185줄 가운데 360 에서 10줄, 430 에서 4줄이에요.
• 본문 영어 문단의 끝 줄에 낱말 하나가 남는 곳이 511개 가운데 360 71 · 390 65 · 430 55 예요(왼쪽 맞춤, Newsreader 16px). .journal-reading p 에 text-wrap: pretty 를 두면 끝 줄을 앞 줄과 나눠요. 한국어 문단은 상자 글꼴(WenQuanYi Zen Hei)로 그려서 폭 ÷ 글자 크기로 다시 봐야 해요.

https://claude.ai/code/session_01Bc4JkqDnRXfLYUZjkMmSWq

---

Generated by Claude Code