[patternflow-bot]

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

폰에서 /journal 맨 위 첫 글 제목은 늘 가장 새 글이라 글을 올릴 때마다 바뀌는데, 행간이 1.06 이고 한국어를 낱말 가운데서 꺾었어요. 지금 제목 37개를 그 자리에 넣어 보면 360 에서 「성공과 실 / 패: 다음 단계」처럼 셋이 꺾였어요. 머지하면 그 제목이 글 쪽 제목처럼 띄어쓰기에서 꺾이고 줄 사이가 1.2 로 서요. 721px 위 화면은 그대로예요.

좋아지는 것: 폰 저널 첫 글 제목이 낱말째로 꺾인다 — 다음 글 제목이 길어도 덜 붙는다

체크리스트

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 창작자 지시 6~10 이 다 끝났는지 보기(「다 됨」 칸 그대로 · 149바퀴 [DONE] 폰에서 저널 표지 그림 설명이 낱말 가운데서 꺾이지 않는다 #322 가 본 [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] 폰에서 덱 쪽과 패턴 주인 줄의 단추가 패턴 쪽처럼 44px 높이다 #300~[DONE] 폰에서 저널 표지 그림 설명이 낱말 가운데서 꺾이지 않는다 #322 에 리뷰가 없어 맡을 글 없음)
• 143149바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316[DONE] 폰에서 저널 표지 그림 설명이 낱말 가운데서 꺾이지 않는다 #322)가 고친 요소 · 속성 보기(.journal-featured h1 은 처음)
• 74쪽과 목록 둘을 360 · 390 · 430 에서 다 재기
• 시험을 먼저 쓰고 dev 의 CSS 에서 빨간지 보기
• 다섯 검사 · 전후 사진 · 전후 잰 값 · /en 390
• dev merge(dev d2dd398 가 이미 들어 있음)
• 검사 초록(head 5687e7a: Drift checks · Web CI success) · 겹침 기다리기 「안 겹친다」

한 일

• web/src/app/globals.css 폰 덩어리(@media (max-width: 720px))의 .journal-featured h1 에 line-height: 1.2, word-break: keep-all, overflow-wrap: break-word 를 더했어요. 146바퀴가 글 쪽 제목(.journal-article-header h1)에 준 것과 같은 세 값이에요. 위에 까닭 주석 네 줄을 달았어요.
• web/src/components/journal/journalCss.test.ts 에 「journal first post on a phone」 시험 둘을 더했어요. 폰에서 첫 글 제목이 keep-all 이고 줄보다 긴 낱말은 꺾는지, 행간이 1.2~1.4 인지 봐요.

증거

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

첫 글 자리는 posts.find((post) => post.featured) ?? posts[0] 이고, 74개 글 가운데 featured 를 둔 글이 없어서 늘 가장 새 글이에요. 지금 첫 글 「뒤죽박죽」은 세 폭 모두 한 줄이라, 목록의 제목 37개를 재는 브라우저 안에서만 하나씩 그 자리에 넣어 쟀어요. 글 파일은 그대로예요.

고친 값, 전 → 후(.journal-featured h1, 36px · 자간 −0.022em):

폰	360	390	430
line-height	1.06(38.2px) → 1.2(43.2px)	같음	같음
word-break · overflow-wrap	normal · normal → keep-all · break-word	같음	같음
제목 폭 ÷ 글자 크기	8.7em 그대로	9.5em 그대로	10.6em 그대로
한국어 제목 37개 가운데 두 줄	4 그대로	3 그대로	0 그대로
그 가운데 낱말 가운데 꺾임	3 → 0	3 → 0	0 그대로
영어 제목 37개 가운데 두 줄	9 그대로	7 그대로	4 그대로
두 줄 사이 글자 틈(가장 좁은 것)	2.2px → 7.2px	2.2px → 7.2px	2.2px → 7.2px
지금 첫 글 「뒤죽박죽」 높이	38.2px → 43.2px(한 줄 그대로)	같음	같음
scrollWidth	360 그대로	390 그대로	430 그대로

꺾였던 셋은 「패턴플로우 / 란 무엇인가」, 「성공과 실 / 패: 다음 단계」, 「무너지지 않 / 고 가는 법」이고, 고친 뒤엔 「패턴플로우란 / 무엇인가」, 「성공과 실패: / 다음 단계」, 「무너지지 / 않고 가는 법」이에요. 390 에선 「백남준, 나, 패 / 턴플로우」도 꺾였다가 「백남준, 나, / 패턴플로우」가 돼요. 글자 틈은 한 줄의 가장 깊은 내림과 다음 줄의 가장 높은 오름 사이를 캔버스 measureText 로 잰 값이에요. 2.2px 는 「Maybe This / Will Work?」, 「Today Is / My Birthday」, 「How to keep going / without falling apart」였어요.

이 상자의 한글 대체 글꼴은 폰 글꼴과 폭이 달라서 폭 ÷ 글자 크기로도 봤어요. 폰 글꼴의 한글이 1em 폭이면 「성공과 실패: 다음 단계」는 9자 9em 에 쌍점과 띄어쓰기 둘을 더해 10em 쯤이라 360(8.7em) · 390(9.5em)에서 두 줄, 430(10.6em)에서 한 줄이에요. 상자에서 잰 것과 같아요.

74쪽과 목록 둘 전체를 같은 셈으로 전후 견줬어요. 글 묶음 34개(글 제목, 요약, 날짜 줄, 표지 설명, 본문 문단, 목록 항목, 글 안 제목, 그림 설명, 글 아래 목록, /journal 의 첫 글과 목록 같은 것) 가운데 바뀐 것은 첫 글 제목의 line-height · word-break · overflow-wrap 셋이에요. 쪽 높이는 목록 두 쪽만 세 폭에서 5px 늘었고(390 /journal 4898 → 4903px), 글 74쪽은 228번 모두 전후가 같아요. scrollWidth 는 228번 모두 같아요.

/en 판(같은 규칙) 390 에선 첫 글 「All Jumbled Up」이 한 줄, 행간 1.2 로 제목 기준(1.2~1.4) 안이에요. keep-all 은 영어 줄바꿈을 바꾸지 않아서 영어 제목 37개의 두 줄은 전후 줄마다 글이 같고, 줄 사이만 벌어져요.

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

721px 위는 그대로예요. 바뀐 줄은 폰 덩어리 안이고, 1440 에서 잰 첫 글 제목은 전후 모두 44px, 1.06, normal 이에요. 1440 사진은 전후가 바이트까지 같아요(md5 641600bbb030cdf502dd53f2dad1101e 둘 다).

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

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

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

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

사진은 /journal 의 첫 글 자리를 언어 단추부터 날짜 줄까지 잘라 찍었어요. 「성공과 실패: 다음 단계」와 「Maybe This Will Work?」 사진은 재는 브라우저 안에서만 그 제목을 첫 글 자리에 넣은 것이고, 「뒤죽박죽」 사진이 지금 화면이에요.

실행법

cd web
npx vitest run src/components/journal/journalCss.test.ts
npm run build && npx next start -p 3100
# 390px 로 /journal 을 열고 개발자 도구에서 첫 글 제목(.journal-featured h1)을 「성공과 실패: 다음 단계」로 바꿔
# 「성공과 실패: / 다음 단계」 두 줄인지 본다

가정

• 고르는 차례는 창작자 지시 남은 줄(없음), 세 직함 댓글(맡을 글 없음), 저널 타이포 순서였어요.
• 74쪽과 목록 둘을 세 폭에서 다 쟀어요. 기준 밖은 /journal 첫 글 제목(.journal-featured h1, 36px) 행간 1.06(1.2 보다 12% 낮음)과 word-break: normal, 글 안 제목(h2 · h3) 행간 1.15(4% 낮음), 폰 NEW 표 11px(메타 13px 보다 15% 작음)였어요. NEW 표는 featured 를 둔 글이 있을 때만 나와서 지금은 0곳이에요. 가장 먼 첫 글 제목을 골랐어요.
• 149바퀴([DONE] 폰에서 저널 표지 그림 설명이 낱말 가운데서 꺾이지 않는다 #322)는 첫 글 「나와 패턴플로우」가 한 줄이라 화면에 안 나온다며 이 줄을 넘겼어요. 첫 글은 featured 가 없으면 가장 새 글이라, 다음 글 제목이 그 자리에 와요. 그래서 지금 있는 제목 37개를 그 자리에 넣어 걸림을 재현했어요. 그사이 첫 글은 「뒤죽박죽」으로 바뀌었어요.
• 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 을 고쳤어요. .journal-featured h1 은 처음이에요.
• 머리의 「Patternflow」(행간 1.0)와 「Journal」(행간 1.1)은 한 낱말짜리 머리 글이라 세 폭 모두 한 줄이고, 글에 쓰인 제목으로 세지 않았어요.
• 저널 글, 그림, 화면 글, incoming/ 은 그대로예요.

Changelog

Web

• The journal's first post breaks its title between words on a phone. Below 721px the newest post's title at the top of the archive broke Korean inside a word ("성공과 실 / 패: 다음 단계" at 360) and stood its two lines 1.06 apart. It now breaks between words at 1.2, as a post's own title does, and pages from 721px up are unchanged.

경험

언제: 저널 바퀴에서 기준 밖 값이 지금 화면엔 안 나오는 자리(글마다 바뀌는 /journal 첫 글 칸 같은 것)일 때
교훈: 그 자리에 올 수 있는 글(목록의 제목 74개)을 재는 브라우저 안에서만 하나씩 넣어 줄 수, 낱말 가운데 꺾임, 글자 틈을 세면 걸림이 재현돼요. 글 파일은 고치지 않아요
근거: #323 에서 #322 가 한 줄이라 넘긴 첫 글 제목 행간 1.06 을, 제목 37개를 넣어 보니 360 에서 셋이 낱말 가운데서 꺾였어요

바퀴

바퀴 150 · 후보: 저널 타이포 — 고친 곳: web/src/app/globals.css · @media (max-width: 720px) 의 .journal-featured h1 · line-height(1.06 → 1.2), word-break(normal → keep-all), overflow-wrap(normal → break-word) · 까닭: 폰 360 · 390 · 430 에서 /journal 첫 글 제목 행간이 1.06 으로 제목 기준 1.2~1.4 보다 12% 낮았고, 첫 글은 늘 가장 새 글이라 지금 제목 37개를 그 자리에 넣으니 360 에서 두 줄이 되는 넷 가운데 셋이 낱말 가운데서 꺾였다(기준은 낱말 가운데서 안 꺾이는 것)

다음 바퀴

• 글 안 제목(.journal-reading h1, h2, h3) 행간이 1.15 예요(제목 기준 1.2~1.4, 4% 낮음). 영어 h2 53개 가운데 5개가 360 · 390 에서, 3개가 430 에서 두 줄이고, 390 에서 「Making patterns, and hitting the gacha / wall」, 430 에서 「Pulling patterns out of AI, and why it's no / good」처럼 한 낱말이 끝 줄에 혼자 남아요. 한국어 h2 · h3 66개는 세 폭 모두 한 줄이에요.
• 글 안 그림 설명(.journal-md-figure figcaption, 13px · 줄 26.3em)이 390 에서 「성공과 실패: 다음 단계」의 「… cold boot 문제를 해결한 / 모습」처럼 두 글자만 끝 줄에 남아요. 그림 설명 120개 가운데 두 글자 이하 끝 줄은 390 에서 이 하나이고, 360 · 430 은 0 이에요. 상자 글꼴 폭이라 폰 폭 ÷ 글자 크기로 다시 봐야 해요.
• 폰 NEW 표(.journal-new-badge)가 11px 로 메타 기준 13px 보다 15% 작아요. 가장 새 글이 첫 글이 아닐 때만, 곧 featured 를 둔 글이 있을 때만 목록에 나와서 지금은 0곳이에요.

---

Generated by Claude Code