[patternflow-bot]

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

폰에서 저널 한국어 글이 줄 끝에서 낱말 가운데를 잘랐어요. 390 에서 37편의 줄바꿈 4,458곳 가운데 2,640곳(59%)이 「실 / 제로」, 「생 / 각하시면」처럼 한 낱말을 두 줄로 나눴어요. 머지하면 360 · 390 · 430 폰에서 띄어쓰기에서만 줄이 바뀌고, 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 의 셋뿐이라 맡을 글 없음)
• 143 · 144바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316 · [DONE] 폰에서 저널 목록의 날짜와 읽는 시간이 10.5px 대신 13px 로 읽힌다 #317)가 고친 요소 · 속성 보기(겹치지 않음)
• 「나와 패턴플로우」 · 「글을 적는 이유」 · /journal 을 360 · 390 · 430 에서 재고, 한국어 글 37편을 세 폭에서 다 재기
• 시험을 먼저 쓰고 dev 의 CSS 에서 빨간지 보기
• 다섯 검사 · 전후 사진 · 전후 잰 값 · /en 390
• dev merge(dev c948a8a 가 이미 들어 있음) · 검사 초록(head fd584b6: Drift checks · Web CI success) · 겹침 기다리기 「안 겹친다」

한 일

• web/src/app/globals.css 폰 덩어리(@media (max-width: 720px))의 .journal-reading 에 word-break: keep-all 과 overflow-wrap: break-word 를 두었어요. 한국어도 영어처럼 띄어쓰기에서 줄이 바뀌어요. 줄보다 긴 낱말이나 주소가 오면 화면 밖으로 나가지 않고 그 자리에서 꺾여요. 글자 크기, 행간, 자간은 그대로예요.
• web/src/components/journal/journalCss.test.ts 에 「journal words on a phone」 시험 둘을 더했어요. 폰 규칙의 .journal-reading 이 keep-all 인지, 긴 낱말을 꺾는 overflow-wrap 이 있는지 봐요.

증거

dev 빌드와 이 브랜치 빌드를 Chromium 으로 열어 글자마다 Range 로 줄을 나눠 셌어요. 본문(.journal-reading 의 p · li · h2 · h3)에서 한 줄이 끝나는 자리 앞뒤가 둘 다 한글이고 그 사이에 띄어쓰기가 없으면 「낱말 가운데」로 셌어요.

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

폰	360	390	430
word-break	normal → keep-all	normal → keep-all	normal → keep-all
낱말 가운데 줄바꿈	2,927 / 4,932(59.3%) → 0 / 5,215	2,640 / 4,458(59.2%) → 0 / 4,680	2,364 / 3,966(59.6%) → 0 / 4,133
본문 줄 수	5,519 → 5,802(+5.1%)	5,045 → 5,267(+4.4%)	4,553 → 4,720(+3.7%)
두 글자 이하만 남은 끝 줄(「요.」 같은)	36 → 1	30 → 1	19 → 0
화면 밖으로 나간 요소 · scrollWidth	0 · 360 → 0 · 360	0 · 390 → 0 · 390	0 · 430 → 0 · 430

앞 바퀴가 잰 「나와 패턴플로우」만 보면 360 에서 465곳 가운데 291곳, 390 에서 423곳 가운데 251곳, 430 에서 374곳 가운데 224곳이었고, 고친 뒤엔 세 폭 모두 0이에요.

낱말째로 넘기니 줄 끝 빈자리가 늘어요. 「나와 패턴플로우」 문단의 마지막이 아닌 줄에서 오른쪽 끝까지 남은 폭의 평균이 360 0.51em → 1.84em, 390 0.54em → 1.80em, 430 0.52em → 1.94em 이에요. 한 줄 20.8~25.5자 폭에서 두 글자가 안 되는 빈자리예요. dev 쪽 값은 이 브랜치 쪽에 word-break: normal 을 덮어 쟀고, 줄 수가 dev 빌드에서 잰 465 · 423 · 374 와 같았어요.

/en 판(같은 규칙) 390 에선 37편의 줄바꿈 5,191곳과 줄 5,776개가 전후 그대로예요. keep-all 은 한중일 글자 사이에만 걸려서예요.

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

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

< .journal-reading{font-size:15px;line-height:1.68
> .journal-reading{word-break:keep-all;overflow-wrap:break-word;font-size:15px;line-height:1.68

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

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

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

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

다섯 검사(web/ 에서):

npm ci                              → exit 0 (added 1024 packages)
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 1628 passed (1628)
                                      drift 14 passed, links-absolute · roadmap skipped (태그 없음 · gh 로그인 없음)
npm run check:voice                 → check:voice: nothing found(브랜치와 이 본문 둘 다)

사진은 같은 글 「나와 패턴플로우」, 첫 제목 「1. 인사」를 위에 둔 화면이에요.

실행법

cd web
npx vitest run src/components/journal/journalCss.test.ts
npm run build && npx next start -p 3100
# 360 · 390 · 430px 로 /journal/me-and-patternflow 를 열고 줄 끝에서 낱말이 잘리지 않는지 본다

가정

• 고르는 차례는 창작자 지시 남은 줄(없음), 세 직함 댓글(맡을 글 없음), 저널 타이포 순서였어요.
• 앞 바퀴가 잰 「나와 패턴플로우」와 /journal, 글 안 목록이 있는 「글을 적는 이유」를 다시 쟀어요. 기준 밖은 한글 낱말 가운데 끊김(줄바꿈의 59%, 기준은 0), 글 제목 행간 1.02(1.2 보다 15% 낮음), 첫 글 제목 행간 1.06(12% 낮음), 본문 15px(16px 보다 6% 작음), 글 안 제목 행간 1.15(4% 낮음)였어요. 144바퀴는 끊김을 「잣대가 달라 숫자로 견주지 못해서」 미뤘어요. 이번엔 끊김을 골랐어요. 기준이 0 인 자리에서 59% 라 가장 멀고, 한국어 글 37편 본문 모든 문단에 걸려요. 제목 행간은 두 줄로 꺾인 제목에만 보이는데, 390 에서 한국어 제목 넷이에요. 「나와 패턴플로우」 제목은 세 폭 모두 한 줄이라 거기선 1.02 가 보이지 않아요.
• 폰 덩어리에만 두었어요. 721px 위 본문도 word-break: normal 이라 낱말 가운데서 끊기지만, 이 열 바퀴는 폰 글자 읽기가 몫이고 데스크톱 배치는 크게 바꾸지 않기로 해서예요.
• overflow-wrap 은 anywhere 대신 break-word 예요. 둘 다 넘칠 때만 꺾는데, anywhere 는 표 칸의 최소 폭까지 줄여요. 지금 글에 표는 없지만 .journal-reading table 규칙이 있어서 표 칸을 건드리지 않는 쪽을 골랐어요.
• 143바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316)는 .journal-panel, .journal-article 의 margin 과 width, 144바퀴([DONE] 폰에서 저널 목록의 날짜와 읽는 시간이 10.5px 대신 13px 로 읽힌다 #317)는 .journal-list-meta 의 font-size 를 고쳤어요. 이번 요소와 속성은 겹치지 않아요.
• 저널 글, 그림, 화면 글, incoming/ 은 그대로예요.

Changelog

Web

• Korean journal posts break lines between words on a phone. Below 721px, 59% of the line breaks in the 37 Korean posts fell inside a word. They now break at spaces, a word longer than the line still wraps instead of overflowing, and English posts and pages from 721px up are unchanged.

경험

언제: 저널 바퀴에서 줄바꿈을 세려고 글자마다 Range 로 줄을 나눌 때
교훈: 줄 끝 띄어쓰기는 폭 0 사각형이라 건너뛰면 띄어쓰기에서 꺾인 줄까지 「낱말 가운데」로 세니, 앞뒤 글자 사이에 공백 글자가 있었는지 따로 들고 다녀요
근거: #318 에서 처음 셈은 390 「나와 패턴플로우」 423곳 가운데 388곳(92%)을 낱말 가운데로 셌고, 공백을 들고 다니니 251곳(59%)으로 144바퀴(#317)의 255곳과 맞았어요

바퀴

바퀴 145 · 후보: 저널 타이포 — 고친 곳: web/src/app/globals.css · @media (max-width: 720px) 의 .journal-reading · word-break(normal → keep-all), overflow-wrap(normal → break-word) · 까닭: 폰 360 · 390 · 430 에서 한국어 글 37편의 줄바꿈 59%(390 에서 4,458곳 가운데 2,640곳)가 낱말 가운데였고, 기준은 낱말 가운데서 안 끊기는 것이다

다음 바퀴

• 글 제목 행간이 1.02 예요(제목 기준 1.2~1.4, 15% 낮음). 폰에서 42px 글자에 줄 상자가 42.84px 라, 390 에서 두 줄이 되는 한국어 제목 넷과 영어 제목 열셋의 두 줄이 붙어요. globals.css 폰 덩어리의 .journal-article-header h1 line-height 예요.
• /journal 첫 글 제목(.journal-featured h1, 폰 36px)의 행간이 1.06 이에요(12% 낮음). 위 줄과 같은 꼴이라 따로 한 바퀴예요.
• 본문이 폰에서 15px 예요(기준 1618px, 6% 작음). 16px 로 올려도 폭 ÷ 글자 크기가 360 19.5 · 390 21.4 · 430 23.9 로 1828 안이에요. 이번 바퀴로 줄 끝 빈자리가 평균 1.8em 이 되어서, 16px 로 올리면 줄 수가 이번처럼 한 번 더 늘어요.

https://claude.ai/code/session_01Bc4JkrAPonyv2Vh4wTrAP7

---

Generated by Claude Code