[patternflow-bot]

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

폰에서 두 줄이 되는 한국어 글 제목이 「성공과 실 / 패: 다음 단계」처럼 낱말 가운데서 꺾였고, 두 줄 글자 사이가 0.8px 라 붙어 보였어요. 머지하면 360 · 390 · 430 폰에서 글 제목이 띄어쓰기에서만 꺾이고 두 줄 사이가 8.4px 로 벌어져요. 721px 위 화면은 그대로예요.

좋아지는 것: 폰에서 두 줄 글 제목이 낱말째로 꺾인다 — 제목이 한 번에 읽힌다

체크리스트

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

한 일

• web/src/app/globals.css 폰 덩어리(@media (max-width: 720px))의 .journal-article-header h1 에 line-height: 1.2 와 word-break: keep-all, overflow-wrap: break-word 를 두었어요. 글 제목이 띄어쓰기에서만 꺾이고, 두 줄이 되면 줄 사이가 벌어져요. 줄보다 긴 낱말이 오면 화면 밖으로 나가지 않고 그 자리에서 꺾여요. 글자 크기 42px 와 자간, 아래 여백 28px 는 그대로예요.
• web/src/components/journal/journalCss.test.ts 에 「journal titles on a phone」 시험 둘을 더했어요. 폰 규칙의 글 제목이 keep-all 이고 긴 낱말을 꺾는 overflow-wrap 이 있는지, 행간이 1.2~1.4 인지 봐요.

증거

dev 빌드와 이 브랜치 빌드를 Chromium 으로 열어 getComputedStyle 과 글자마다의 Range 로 쟀어요. 한국어 글 37편의 제목(.journal-article-header h1)을 세 폭에서 다 열었어요. 줄이 바뀌는 자리 앞뒤가 둘 다 한글이고 그 사이에 띄어쓰기가 없으면 「낱말 가운데」로 셌어요.

고친 값, 전 → 후(한국어 글 37편):

폰	360	390	430
제목 행간	1.02 → 1.2	1.02 → 1.2	1.02 → 1.2
word-break	normal → keep-all	normal → keep-all	normal → keep-all
두 줄이 되는 제목	5 → 5	4 → 4	4 → 4
그 가운데 낱말 가운데서 꺾인 제목	4 → 0	3 → 0	4 → 0
두 줄의 줄 간격(윗줄 위끝에서 아랫줄 위끝)	43 → 50px	43 → 50px	43 → 50px
두 줄 글자 상자 사이	0.8 → 8.4px	0.8 → 8.4px	0.8 → 8.4px
한 줄 제목 높이	42.8 → 50.4px	42.8 → 50.4px	42.8 → 50.4px
화면 밖으로 나간 제목 · scrollWidth	0 · 360 → 0 · 360	0 · 390 → 0 · 390	0 · 430 → 0 · 430

두 줄 제목이 꺾인 자리, 전 → 후(「/」가 줄이 바뀐 자리):

글	360	390	430
「성공과 실패: 다음 단계」	성공과 실 / 패: 다음 단계 → 성공과 실패: / 다음 단계	360 과 같음	360 과 같음
「무너지지 않고 가는 법」	무너지지 않 / 고 가는 법 → 무너지지 / 않고 가는 법	360 과 같음	360 과 같음
「패턴플로우란 무엇인가」	패턴플로우 / 란 무엇인가 → 패턴플로우란 / 무엇인가	360 과 같음	360 과 같음
「백남준, 나, 패턴플로우」	백남준, 나, / 패턴플로우 → 그대로	그대로	백남준, 나, 패 / 턴플로우 → 백남준, 나, / 패턴플로우
「패턴플로우 사용법」	패턴플로 / 우 사용법 → 패턴플로우 / 사용법	전후 한 줄	전후 한 줄

한 줄 제목도 줄 상자가 7.6px 높아져서, 74쪽 모두 제목 아래 요약 글이 7.5px 내려가요(181.7 → 189.2px). 요약 글, 날짜 줄, 본문, 글 아래 목록, /journal 의 잰 값은 세 폭 모두 전후가 같아요(jq 로 두 측정 JSON 을 견줘 이 셋 말고 차이 없음). 본문 줄바꿈 4,680곳(390)도 그대로 낱말 가운데 0 이에요.

/en 판(같은 규칙) 390 에선 두 줄 이상인 영어 제목 13편이 꺾인 자리까지 전후 같고, 줄 간격만 43 → 50px 예요. keep-all 은 한중일 글자 사이에만 걸려서예요. 360 에선 15편, 430 에선 7편이 두 줄 이상이고 넘친 제목은 없어요.

창작자가 짚은 자간과 행간은 고치지 않았어요. 「나와 패턴플로우」 본문 자간 −0.005em(−0.075px), 행간 1.68(25.2px)이 360 · 390 · 430 모두 같고, 기준(자간 −0.030em, 행간 1.61.8) 안이라서예요.

721px 위는 그대로예요. 두 빌드의 CSS 를 } 로 끊어 diff 하면 폰 덩어리의 이 규칙 한 줄만 달라요.

< .journal-article-header h1{font-size:42px
> .journal-article-header h1{word-break:keep-all;overflow-wrap:break-word;font-size:42px;line-height:1.2

1440 사진은 전후가 바이트까지 같아요(md5 425e7536b900963f34a37d3c6546da6d 둘 다).

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

× journal titles on a phone > breaks a Korean title only between words
× journal titles on a phone > keeps a title's lines 1.2 to 1.4 apart
AssertionError: expected undefined to be 'keep-all' // Object.is equality
AssertionError: expected 1.02 to be greater than or equal to 1.2
Tests  2 failed | 27 passed (29)

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

다섯 검사(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 1630 passed (1630)
                                      drift 14 passed, links-absolute · roadmap skipped (태그 없음 · gh 로그인 없음)
npm run check:voice                 → check:voice: nothing found(브랜치와 이 본문 둘 다)

사진은 같은 글 「성공과 실패: 다음 단계」의 맨 위예요.

실행법

cd web
npx vitest run src/components/journal/journalCss.test.ts
npm run build && npx next start -p 3100
# 360 · 390 · 430px 로 /journal/wins-and-losses-next-step 을 열고 제목이 「성공과 실패: / 다음 단계」로 꺾이는지 본다

가정

• 고르는 차례는 창작자 지시 남은 줄(없음), 세 직함 댓글(맡을 글 없음), 저널 타이포 순서였어요.
• 앞 바퀴가 잰 「나와 패턴플로우」와 /journal, 글 안 목록이 있는 「글을 적는 이유」를 다시 쟀어요. 기준 밖은 글 제목(42px)의 행간 1.02(1.2 보다 15% 낮음)와 낱말 가운데 꺾임(두 줄 제목의 75~100%, 기준은 0), 첫 글 제목(36px) 행간 1.06(12% 낮음), 본문 15px(16px 보다 6% 작음), 글 안 제목 행간 1.15(4% 낮음)였어요. 두 줄 제목의 꺾임과 행간이 가장 멀었고, 둘 다 같은 요소에서 두 줄이 된 제목에만 보여요. 그래서 한 요소의 이 두 가지를 같이 고쳤어요. 하나만 고치면 「성공과 실패: / 다음 단계」가 여전히 붙어 있거나, 벌어진 두 줄이 여전히 「실 / 패」로 갈려요.
• 행간은 제목 기준의 아래 끝 1.2 예요. 데스크톱의 58px 제목은 1.02 그대로 두었고, 폰 제목도 촘촘한 큰 제목 꼴을 지키는 가장 작은 값을 골랐어요.
• 폰 덩어리에만 두었어요. 721px 위 제목도 word-break: normal 이지만, 이 열 바퀴는 폰 글자 읽기가 몫이고 데스크톱 배치는 크게 바꾸지 않기로 해서예요.
• 한 줄 제목도 7.6px 높아져 그 아래가 7.5px 내려가요. 74쪽 모두 같은 만큼이라 쪽 사이 어긋남은 없어요.
• 145바퀴([DONE] 폰에서 저널 한국어 글이 낱말 가운데서 줄이 바뀌지 않는다 #318)는 .journal-reading 의 word-break 와 overflow-wrap, 144바퀴([DONE] 폰에서 저널 목록의 날짜와 읽는 시간이 10.5px 대신 13px 로 읽힌다 #317)는 .journal-list-meta 의 font-size, 143바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316)는 .journal-panel, .journal-article 의 margin 과 width 를 고쳤어요. 이번 요소는 겹치지 않아요.
• 저널 글, 그림, 화면 글, incoming/ 은 그대로예요.

Changelog

Web

• A journal post's title breaks between words on a phone, and its two lines stand apart. Below 721px, three of the four Korean titles on two lines at 390 broke inside a word ("성공과 실 / 패"), and at a line-height of 1.02 the glyphs of the two lines sat 0.8px apart, in those and in 13 English titles. Titles now break at spaces with lines 1.2 apart, and pages from 721px up are unchanged.

경험

언제: 저널 바퀴에서 줄바꿈이나 낱말 끊김을 잴 때
교훈: 145바퀴의 keep-all 은 .journal-reading 에만 걸리니, 본문만 재지 말고 그 밖의 글(글 제목, 요약, 목록 제목)도 74쪽을 다 열어 따로 재요
근거: #319 에서 본문 낱말 끊김은 0 이었는데, 글 제목 37편을 다 여니 390 에서 두 줄 제목 넷 가운데 셋이 「성공과 실 / 패」처럼 낱말 가운데서 꺾였어요

바퀴

바퀴 146 · 후보: 저널 타이포 — 고친 곳: web/src/app/globals.css · @media (max-width: 720px) 의 .journal-article-header h1 · line-height(1.02 → 1.2), word-break(normal → keep-all), overflow-wrap(normal → break-word) · 까닭: 폰 360 · 390 · 430 에서 글 제목 행간이 1.02 로 제목 기준 1.21.4 보다 15% 낮았고, 두 줄이 되는 한국어 제목 45편 가운데 3~4편이 낱말 가운데서 꺾였다(기준은 낱말 가운데서 안 꺾이는 것)

다음 바퀴

• 본문이 폰에서 15px 예요(기준 1618px, 6% 작음). 16px 로 올려도 폭 ÷ 글자 크기가 360 19.5 · 390 21.4 · 430 23.9 로 1828 안이에요. 145바퀴 뒤 줄 끝 빈자리가 평균 1.8em 이라, 올리면 줄 수가 한 번 더 늘어요. globals.css 폰 덩어리의 .journal-reading font-size 예요.
• /journal 첫 글 제목(.journal-featured h1, 폰 36px)이 행간 1.06(12% 낮음)에 word-break: normal 이에요. 이번 글 제목과 같은 꼴인데, 지금 첫 글 「나와 패턴플로우」는 세 폭 모두 한 줄이라 화면에선 보이지 않아요. 두 줄이 되는 제목이 첫 글이 되면 「실 / 패」처럼 꺾여요.
• 「글을 적는 이유」의 글 안 목록(ul 하나, 항목 셋)에 점도 들여쓰기도 없고(Tailwind 의 list-style: none · padding-left: 0), 항목 사이가 0 이에요(문단 간격 기준 0.8~1.5em). 390 에서 세 줄짜리 항목 셋이 한 덩어리로 붙어요. 글 안 제목(h2 · h3) 행간 1.15(기준 1.2, 4% 낮음)는 66개 모두 세 폭에서 한 줄이라 보이지 않아요.

https://claude.ai/code/session_01Bc4JksWmgqVCBt1h2MDgk6

---

Generated by Claude Code