[patternflow-bot]

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

폰에서 저널 글 본문이 15px 였어요. 폰 본문의 흔한 범위 16~18px 보다 작았고, 74쪽 모든 줄이 그랬어요. 머지하면 360 · 390 · 430 폰에서 본문이 16px 가 되고, 360 에서도 한 줄이 19.5자 폭이라 줄 길이 범위 안이에요. 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월 세 직함 글은 원래 레포로 옮기고 닫는다는 [DONE] hardware: Besoiobiy's printed case as a remix folder #1 · [DONE] 매니페스토 · AGENTS.md · /pattern 카드가 걷은 배치 생성 대신 지금 Pattern Lab 을 말한다 #243 · [DONE] Lab 갤러리 패널·Gemini 걷어 내기(#183)가 원래 레포 dev 위에 겹침 없이 다시 얹힌다 #215 · [DONE] patternflow.work 를 Cloudflare 로(#250)가 원래 레포 dev 위에 겹침 없이 다시 얹힌다 #253 의 넷뿐이고, [DONE] 커뮤니티 메뉴와 폰 탭에서 Workshop 이 빠지고, 옛 워크숍 주소는 커뮤니티 첫 화면으로 간다 #268~[DONE] 폰에서 두 줄이 된 저널 글 제목이 낱말째로 꺾이고 줄 사이가 벌어진다 #319 에 리뷰가 없어 맡을 글 없음)
• 143~146바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316 · [DONE] 폰에서 저널 목록의 날짜와 읽는 시간이 10.5px 대신 13px 로 읽힌다 #317 · [DONE] 폰에서 저널 한국어 글이 낱말 가운데서 줄이 바뀌지 않는다 #318 · [DONE] 폰에서 두 줄이 된 저널 글 제목이 낱말째로 꺾이고 줄 사이가 벌어진다 #319)가 고친 요소 · 속성 보기(겹치지 않음)
• 74쪽과 목록 둘을 360 · 390 · 430 에서 다 재기(「나와 패턴플로우」, 글 안 목록이 있는 「글을 적는 이유」, /journal)
• 시험을 먼저 쓰고 dev 의 CSS 에서 빨간지 보기
• 다섯 검사 · 전후 사진 · 전후 잰 값 · /en 390
• dev merge(dev 6a5e12a 가 이미 들어 있음)
• 검사 초록(head 608d849: Drift checks · Web CI success) · 겹침 기다리기 「안 겹친다」

한 일

• web/src/app/globals.css 폰 덩어리(@media (max-width: 720px))의 .journal-reading 에서 font-size 를 15px 에서 16px 로 올렸어요. 행간 1.68 과 자간 −0.005em 은 em 이라 그대로 따라가고, 문단 간격 1.1em 도 그래요. 글 안 목록(li)은 이 값을 물려받아 같이 16px 가 돼요. 그림 설명, 코드, 인용은 제 크기를 따로 가져서 그대로예요.
• 같은 규칙 위 주석에 까닭 한 줄을 더했어요.
• web/src/components/journal/journalCss.test.ts 에 「journal text size on a phone」 시험 셋을 더했어요. 폰 규칙의 본문이 1618px 인지, 폰 규칙의 좌우 여백으로 셈한 한 줄이 360 과 430 에서 1828자 폭인지 봐요.

증거

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

고친 값, 전 → 후(「나와 패턴플로우」, /journal/me-and-patternflow):

폰	360	390	430
본문 글자 크기	15 → 16px	15 → 16px	15 → 16px
행간	1.68(25.2px) → 1.68(26.9px)	같음	같음
자간	−0.005em → −0.005em	같음	같음
문단 간격	1.1em(16.5px) → 1.1em(17.6px)	같음	같음
본문 폭 ÷ 글자 크기	20.8 → 19.5	22.8 → 21.4	25.5 → 23.9
꽉 찬 줄의 글자 수(가운데값)	25 → 23	28 → 26	31 → 29
본문 줄 수	546 → 580	495 → 529	441 → 467
좌우 여백	24 · 24px 그대로	24 · 24px 그대로	24 · 24px 그대로
scrollWidth	360 → 360	390 → 390	430 → 430

꽉 찬 줄의 글자 수는 띄어쓰기와 숫자까지 센 값이라 폭 ÷ 글자 크기보다 커요. 상자의 한글 대체 글꼴은 폰 글꼴과 폭이 달라서, 잴 기준은 폭 ÷ 글자 크기로 봤어요. 전 값은 이 브랜치 빌드에 폰 덩어리 .journal-reading{font-size:15px} 를 덮어 쟀고, 줄 수가 dev 빌드에서 잰 546 · 495 · 441 과 같았어요.

74쪽 전체, 전 → 후:

폰	360	390	430
한국어 37편 본문 줄	5,725 → 6,089(+6.4%)	5,192 → 5,584(+7.5%)	4,646 → 4,943(+6.4%)
영어 37편 본문 줄	6,252 → 6,668	5,696 → 6,071	5,099 → 5,438
낱말 가운데 줄바꿈(한국어)	0 → 0	0 → 0	0 → 0
화면 밖으로 나간 요소	0 → 0	0 → 0	0 → 0
두 글자 이하만 남은 끝 줄(한국어)	27 → 30	19 → 31	25 → 19

/en 판(같은 규칙) 390 에선 꽉 찬 줄의 글자 수 가운데값이 53 → 50(가장 긴 줄 62 → 58)이에요. 영문 35~60자 안이에요. 360 은 48 → 45, 430 은 60 → 56 이에요.

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

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

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

× journal text size on a phone > sets a post's text at 16 to 18px
AssertionError: expected 15 to be greater than or equal to 16
Tests  1 failed | 31 passed (32)

고친 뒤엔 Tests 32 passed (32) 예요. 360 에서 한 줄 폭을 보는 시험은 dev 에서도 초록이에요(20.8). 18px 로 올리면 360 에서 17.3 이라 빨개져요.

다섯 검사(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 1633 passed (1633)
                                      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 를 열고 본문이 16px 인지 본다

가정

• 고르는 차례는 창작자 지시 남은 줄(없음), 세 직함 댓글(맡을 글 없음), 저널 타이포 순서였어요.
• 앞 바퀴가 잰 「나와 패턴플로우」와 /journal, 글 안 목록이 있는 「글을 적는 이유」를 다시 쟀고, 줄바꿈은 74쪽을 세 폭에서 다 셌어요. 기준 밖은 첫 글 제목(.journal-featured h1, 36px) 행간 1.06(1.2 보다 12% 낮음), 본문 15px(16px 보다 6% 작음), 글 안 제목(h2) 행간 1.15(4% 낮음), 글 안 목록 항목 사이 0 이었어요. 숫자로는 첫 글 제목이 더 멀지만, 그 제목과 한국어 글 안 제목(h2 · h3) 66개는 세 폭 모두 한 줄이라 행간이 화면에 나오지 않아요. 영어 글 안 제목은 360 · 390 에서 다섯, 430 에서 셋이 두 줄이에요. 글 안 목록은 「글을 적는 이유」 한 편(한국어 · 영어)의 항목 셋이에요. 그래서 화면에 나오는 것 가운데 74쪽 모든 줄에 걸린 본문 크기를 골랐어요.
• 16px 는 기준의 아래 끝이에요. 17px 면 360 에서 한 줄이 18.4자 폭이라 기준 끝에 붙어요.
• 폰의 h3 가 16px 라 본문과 크기가 같아졌어요. h3 는 Inter 500, 본문은 Newsreader 400 이라 굵기와 글꼴로 갈려요. 기준(크기나 굵기로 갈린다) 안이라 그대로 두었어요. h3 는 3편에 13개예요.
• 줄이 6~8% 늘고, 두 글자 이하만 남은 끝 줄(「요.」 같은)이 390 에서 19 → 31 로 늘었어요. 360 은 27 → 30, 430 은 25 → 19 예요. 다음 바퀴 감으로 적었어요.
• 폰 덩어리에만 두었어요. 721px 위 본문은 18px 그대로예요.
• 145바퀴([DONE] 폰에서 저널 한국어 글이 낱말 가운데서 줄이 바뀌지 않는다 #318)는 같은 .journal-reading 의 word-break 와 overflow-wrap 을 고쳤어요. 이번엔 font-size 라 속성이 겹치지 않아요. 146바퀴([DONE] 폰에서 두 줄이 된 저널 글 제목이 낱말째로 꺾이고 줄 사이가 벌어진다 #319)는 .journal-article-header h1, 144바퀴([DONE] 폰에서 저널 목록의 날짜와 읽는 시간이 10.5px 대신 13px 로 읽힌다 #317)는 .journal-list-meta, 143바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316)는 .journal-panel, .journal-article 이에요.
• 저널 글, 그림, 화면 글, incoming/ 은 그대로예요.

Changelog

Web

• A journal post's text is 16px on a phone, not 15px. Below 721px it sat under the 16 to 18px a phone's body text keeps, on every line of the 74 posts. A 360px phone still gets 19.5 characters a line, and pages from 721px up are unchanged.

경험

언제: 저널 바퀴에서 본문 글자 크기나 줄 폭을 바꿀 때
교훈: 줄 수만 세지 말고 두 글자 이하만 남은 끝 줄도 폭마다 세요. 같은 고침이 한 폭에선 늘리고 다른 폭에선 줄여요
근거: #320 에서 본문을 15px 에서 16px 로 올리니 한국어 37편의 그런 끝 줄이 390 에서 19 → 31 로 늘고, 430 에선 25 → 19 로 줄었어요

바퀴

바퀴 147 · 후보: 저널 타이포 — 고친 곳: web/src/app/globals.css · @media (max-width: 720px) 의 .journal-reading · font-size(15px → 16px) · 까닭: 폰 360 · 390 · 430 에서 74쪽 본문이 15px 로 본문 기준 1618px 보다 6% 작았고, 16px 에도 한 줄이 19.523.9자 폭(기준 18~28)이다

다음 바퀴

• 두 글자 이하만 남은 끝 줄이 한국어 37편에서 360 30 · 390 31 · 430 19 개예요(「요.」 같은 것). 폰 덩어리 .journal-reading p 에 text-wrap: pretty 를 두면 끝 줄을 앞 줄과 나눠요. 줄 수가 늘지 않는지 같이 재요.
• /journal 첫 글 제목(.journal-featured h1, 폰 36px)이 행간 1.06(12% 낮음)에 word-break: normal 이에요. 146바퀴가 글 제목에 한 것과 같은 꼴인데, 지금 첫 글 「나와 패턴플로우」는 세 폭 모두 한 줄이라 화면에선 보이지 않아요.
• 「글을 적는 이유」의 글 안 목록(ul 하나, 항목 셋)에 점도 들여쓰기도 없고(Tailwind 의 list-style: none · padding-left: 0), 항목 사이가 0 이에요(문단 간격 1.1em). 이번 바퀴 뒤 390 에서 항목 셋이 11줄로 한 덩어리예요.

https://claude.ai/code/session_01Bc4JkpZYHttxL3RMeJo4Lt

---

Generated by Claude Code