[patternflow-bot]

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

폰에서 저널 글의 표지 그림 설명만 낱말 가운데서 줄이 바뀌어, 360 에서 「패턴플로우란 무엇인가」의 표지 설명이 「… 프리런칭 페이 / 지」로 꺾이고 「지」 한 글자가 줄 하나였어요. 머지하면 그 설명이 「… 프리런칭 / 페이지」처럼 띄어쓰기에서 꺾이고, 글 안 그림 설명과 같아져요. 721px 위 화면과 다른 글자는 그대로예요.

좋아지는 것: 폰에서 저널 표지 설명이 낱말째로 꺾인다 — 한 글자만 남은 줄이 없다

체크리스트

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 창작자 지시 6~10 이 다 끝났는지 보기(앞 바퀴가 본 [DONE] 텍스트 레이어의 글을 비우면 미리보기도 비고, 판을 돌린 흐르기 글이 다시 열어도 살고, 글꼴을 못 남기면 그렇다고 말한다 #244 · [DONE] 가이드 연습 벽 카드의 노브가 커뮤니티 카드와 같은 셈으로 돌고, Lab 주석이 포크 번호 대신 말로 적는다 #246 · [DONE] 커뮤니티 메뉴와 폰 탭에서 Workshop 이 빠지고, 옛 워크숍 주소는 커뮤니티 첫 화면으로 간다 #268 · [DONE] 커뮤니티 메뉴에서 Atlas 가 빠지고, 아틀라스는 쪽 아래 Archive 링크로 닿는 읽기 전용 보관함이 된다 #271 · [DONE] 바퀴 106~132 가 고칠 커뮤니티 후보 35줄이 서고, 남의 이름으로 보이는 구멍이 맨 위에 선다 #273 그대로)
• 세 직함 댓글 · 리뷰 · 줄 댓글 읽기(10월 20일부터 세 직함 글은 [DONE] 매니페스토 · AGENTS.md · /pattern 카드가 걷은 배치 생성 대신 지금 Pattern Lab 을 말한다 #243 · [DONE] Lab 갤러리 패널·Gemini 걷어 내기(#183)가 원래 레포 dev 위에 겹침 없이 다시 얹힌다 #215 · [DONE] patternflow.work 를 Cloudflare 로(#250)가 원래 레포 dev 위에 겹침 없이 다시 얹힌다 #253 을 닫는다는 셋뿐이고, [DONE] 바퀴 106~132 가 고칠 커뮤니티 후보 35줄이 서고, 남의 이름으로 보이는 구멍이 맨 위에 선다 #273~[DONE] 폰에서 저널 글 안 목록의 항목이 문단처럼 떨어져 읽힌다 #321 에 세 직함 리뷰가 없어 맡을 글 없음)
• 143148바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316[DONE] 폰에서 저널 글 안 목록의 항목이 문단처럼 떨어져 읽힌다 #321)가 고친 요소 · 속성 보기(겹치지 않음)
• 74쪽과 목록 둘을 360 · 390 · 430 에서 다 재기
• 시험을 먼저 쓰고 dev 의 CSS 에서 빨간지 보기
• 다섯 검사 · 전후 사진 · 전후 잰 값 · /en 390
• dev merge(dev 9e2e5bb 가 이미 들어 있음)
• 검사 초록(head 79c8398: Drift checks · Web CI success) · 겹침 기다리기 「안 겹친다」

한 일

• web/src/app/globals.css 폰 덩어리(@media (max-width: 720px))에 .journal-hero-cover figcaption 규칙을 더하고 word-break: keep-all, overflow-wrap: break-word 를 줬어요. 145바퀴가 .journal-reading 에, 146바퀴가 글 제목에 준 것과 같은 두 값이에요. 위에 까닭 주석 세 줄을 달았어요.
• web/src/components/journal/journalCss.test.ts 에 「journal cover captions on a phone」 시험 둘을 더했어요. 폰에서 표지 설명이 keep-all 인지, 줄보다 긴 낱말은 그래도 꺾는지 봐요.

증거

dev 빌드와 이 브랜치 빌드를 Chromium 으로 열어 getComputedStyle 과 글자마다의 Range 로 쟀어요. 저널 글 74쪽(한국어 37, 영어 37)과 /journal, /journal/en 을 세 폭에서 다 열었어요. 폰에서 표지가 보이는 글은 다섯이고, 표지 설명이 있는 글은 「패턴플로우란 무엇인가」 두 판뿐이에요.

고친 값, 전 → 후(「패턴플로우란 무엇인가」 표지 설명, 13px · 자간 0.06em):

폰	360	390	430
word-break · overflow-wrap	normal · normal → keep-all · break-word	같음	같음
설명 폭 ÷ 글자 크기	24.0em 그대로	26.3em 그대로	29.4em 그대로
설명 글 폭	24.5em 그대로	24.5em 그대로	24.5em 그대로
줄	「… 프리런칭 페이」 「지」 → 「… 프리런칭」 「페이지」	한 줄 그대로	한 줄 그대로
낱말 가운데 꺾임	1 → 0	0 그대로	0 그대로
한 글자 줄	1 → 0	0 그대로	0 그대로
설명 높이	37.7px 그대로	18.8px 그대로	18.8px 그대로
scrollWidth	360 그대로	390 그대로	430 그대로

이 상자의 한글 대체 글꼴로는 설명 글이 24.5em 이라 360 에서만 꺾여요. 폰 글꼴의 한글이 1em 폭이면 26.0em 이 들어(22자 × 1.06em, 띄어쓰기 4 × 0.66em) 375 · 384 에서도 꺾여요. 고친 뒤엔 어느 쪽이든 띄어쓰기에서 꺾여요.

74쪽과 목록 둘 전체를 같은 셈으로 전후 견줬어요. 쪽에 있는 글 묶음 25개(글 제목, 요약, 날짜 줄, 표지 설명, 본문 문단, 목록 항목, 글 안 제목, 그림 설명, 글 아래 목록, /journal 의 첫 글과 목록 같은 것. 인용, 표, 코드, NEW 표는 지금 글에 없어요) 가운데 바뀐 것은 표지 설명의 word-break · overflow-wrap 둘이에요. 줄 수, 다른 묶음의 낱말 가운데 줄바꿈, 두 글자 이하만 남은 끝 줄, 넘친 요소는 세 폭 모두 전후가 같아요. 쪽 높이와 scrollWidth 는 228번(76쪽 × 세 폭) 모두 전후가 같아요.

/en 판(같은 규칙) 390 에선 표지 설명이 「The recently opened Crowd Supply pre-」 「launch page」 두 줄 그대로예요. keep-all 은 영어 줄바꿈을 바꾸지 않고, 「pre-launch」 는 줄보다 짧아 overflow-wrap 도 걸리지 않아요. 360 · 430 도 전후가 같아요.

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

721px 위는 그대로예요. 바뀐 줄은 폰 덩어리 안이고, 1440 에서 잰 표지 설명은 전후 모두 normal 에 한 줄이에요. 1440 사진은 전후가 바이트까지 같아요(md5 50a1813f5d207f91a893e678fa395f25 둘 다). 390 · 430 · /en 390 사진도 전후가 바이트까지 같아요.

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

× journal cover captions on a phone > breaks a Korean caption only between words
AssertionError: expected undefined to be 'keep-all' // Object.is equality
× journal cover captions on a phone > still breaks a word too long for the line
Tests  2 failed | 33 passed (35)

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

다섯 검사(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 1636 passed (1636)
                                      drift 14 passed, links-absolute · roadmap skipped (태그 없음 · gh 로그인 없음)
npm run check:voice                 → check:voice: nothing found (가지가 더한 28줄 · 이 본문)

사진은 같은 글 「패턴플로우란 무엇인가」의 표지 아래쪽과 설명, 그 아래 첫 문단까지 잘라 찍었어요.

실행법

cd web
npx vitest run src/components/journal/journalCss.test.ts
npm run build && npx next start -p 3100
# 360px 로 /journal/what-is-patternflow 를 열고 표지 아래 설명이 「… 프리런칭」 「페이지」 두 줄인지 본다

가정

• 고르는 차례는 창작자 지시 남은 줄(없음), 세 직함 댓글(맡을 글 없음), 저널 타이포 순서였어요.
• 74쪽과 목록 둘을 세 폭에서 다 쟀어요. 기준 밖은 /journal 첫 글 제목(.journal-featured h1, 36px) 행간 1.06(1.2 보다 12% 낮음)과 word-break: normal, 글 안 제목(h2 · h3) 행간 1.15(4% 낮음), 표지 설명의 word-break: normal 이었어요. 값으로는 첫 글 제목 행간이 가장 멀지만, 지금 첫 글 「나와 패턴플로우」가 세 폭 모두 한 줄이라 행간이 화면에 나오지 않아요. 표지 설명은 기준(낱말 가운데서 안 끊긴다)을 벗어난 채로 360 에서 한 글자 줄이 화면에 나와서 이것을 골랐어요.
• 표지 설명 하나에만 두었어요. 요약(.journal-article-header > p), 글 아래 목록 제목, /journal 의 글 제목과 요약도 word-break: normal 이지만, 한국어 37편에서 세 폭 모두 한 줄이라 지금 꺾이는 곳이 없어요.
• 145바퀴([DONE] 폰에서 저널 한국어 글이 낱말 가운데서 줄이 바뀌지 않는다 #318)가 .journal-reading 에, 146바퀴([DONE] 폰에서 두 줄이 된 저널 글 제목이 낱말째로 꺾이고 줄 사이가 벌어진다 #319)가 .journal-article-header h1 에 같은 두 속성을 줬어요. .journal-hero-cover figcaption 은 처음이에요. 143바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316)는 .journal-panel, .journal-article 의 margin 과 width, 144바퀴([DONE] 폰에서 저널 목록의 날짜와 읽는 시간이 10.5px 대신 13px 로 읽힌다 #317)는 .journal-list-meta 의 font-size, 147바퀴([DONE] 폰에서 저널 글 본문이 15px 대신 16px 로 읽힌다 #320)는 .journal-reading 의 font-size, 148바퀴([DONE] 폰에서 저널 글 안 목록의 항목이 문단처럼 떨어져 읽힌다 #321)는 .journal-reading li 의 margin-bottom 을 고쳤어요.
• 저널 글, 그림, 화면 글, incoming/ 은 그대로예요.

Changelog

Web

• A journal cover caption breaks between words on a phone. Below 721px the Korean caption under "What Is Patternflow" broke inside its last word at 360 and left one syllable alone on a second line. It now keeps whole words, as the captions inside a post already do, and pages from 721px up are unchanged.

경험

언제: 저널 바퀴에서 CSS 를 고친 뒤 같은 포트로 서버를 다시 띄울 때
교훈: 옛 서버가 꺼졌는지는 ss 말고 ps -eo pid,cmd | grep next-server 로 봐요. npx next start 의 PID 를 끄면 그 아래 next-server 가 남아요
근거: #322 에서 npx PID 를 끄고 ss 로 보니 이 상자엔 ss 가 없어 「비었다」로 넘어갔고, 새 서버는 EADDRINUSE 로 죽었는데 옛 next-server(부모 1)가 고치기 전 빌드로 200 을 돌려줬어요

바퀴

바퀴 149 · 후보: 저널 타이포 — 고친 곳: web/src/app/globals.css · @media (max-width: 720px) 의 .journal-hero-cover figcaption · word-break(normal → keep-all), overflow-wrap(normal → break-word) · 까닭: 폰 360 에서 「패턴플로우란 무엇인가」의 표지 설명이 24.0em 줄에 24.5em 글이라 「… 페이 / 지」로 낱말 가운데서 꺾여 한 글자 줄이 생겼고, 기준은 낱말 가운데서 안 끊기는 것이다

다음 바퀴

• /journal 첫 글 제목(.journal-featured h1, 폰 36px)이 행간 1.06(제목 기준 1.2~1.4, 12% 낮음)에 word-break: normal 이에요. 146바퀴가 글 제목에 한 것과 같은 꼴이에요. 지금 첫 글 「나와 패턴플로우」는 360 · 390 · 430 모두 한 줄(폭 ÷ 글자 크기 8.7 · 9.5 · 10.6)이라 화면에선 보이지 않고, 그 폭보다 긴 한국어 제목이 첫 글이 되면 두 줄이 붙고 낱말 가운데서 꺾여요.
• 글 안 제목(h2 · h3) 행간이 1.15 예요(제목 기준 1.2~1.4, 4% 낮음). 영어 h2 53개 가운데 5개가 360 · 390 에서, 3개가 430 에서 두 줄이에요. 한국어 66개는 세 폭 모두 한 줄이에요.
• 글 아래 목록 제목(.journal-context-list .pf-row-t, 18px)과 글 요약(.journal-article-header > p, 18px)이 word-break: normal 이에요. 한국어 37편에선 세 폭 모두 한 줄이라 지금 꺾이는 곳은 0 이고, 영어 목록 제목 185개 가운데 14개가 360 에서, 4개가 390 · 430 에서 두 줄이에요.

https://claude.ai/code/session_01Bc4JksQas1X9FGXcojTnV3

---

Generated by Claude Code