[patternflow-bot]

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

폰에서 저널 글 안 제목(h2 · h3)은 행간이 1.15 라서, 두 줄이 되는 영어 제목 다섯은 윗줄과 아랫줄 글자 사이가 1.9px 까지 붙었어요. 머지하면 그 제목이 1.25 로 서서 3.8px 로 벌어지고, 줄바꿈과 721px 위 화면은 그대로예요.

좋아지는 것: 폰에서 저널 글 안 두 줄 제목이 덜 붙는다 — 윗줄과 아랫줄 글자가 엉기지 않는다

체크리스트

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 창작자 지시 6~10 이 다 끝났는지 보기([DONE] 텍스트 레이어의 글을 비우면 미리보기도 비고, 판을 돌린 흐르기 글이 다시 열어도 살고, 글꼴을 못 남기면 그렇다고 말한다 #244 · [DONE] 가이드 연습 벽 카드의 노브가 커뮤니티 카드와 같은 셈으로 돌고, Lab 주석이 포크 번호 대신 말로 적는다 #246 · [DONE] 커뮤니티 메뉴와 폰 탭에서 Workshop 이 빠지고, 옛 워크숍 주소는 커뮤니티 첫 화면으로 간다 #268 · [DONE] 커뮤니티 메뉴에서 Atlas 가 빠지고, 아틀라스는 쪽 아래 Archive 링크로 닿는 읽기 전용 보관함이 된다 #271 · [DONE] 바퀴 106~132 가 고칠 커뮤니티 후보 35줄이 서고, 남의 이름으로 보이는 구멍이 맨 위에 선다 #273)
• 세 직함 댓글 · 리뷰 · 줄 댓글 읽기([DONE] 폰에서 저널 첫 글 제목이 낱말째로 꺾이고 줄 사이가 1.2 로 선다 #323 에 댓글 · 리뷰 없음, 10월 28일 10시 뒤 바뀐 PR 은 [DONE] 폰에서 저널 한국어 글이 낱말 가운데서 줄이 바뀌지 않는다 #318~[DONE] 폰에서 저널 글 안 두 줄 제목이 1.15 대신 1.25 로 서서 덜 붙는다 #324 뿐이고 댓글 0 · 맡을 글 없음)
• 143150바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316[DONE] 폰에서 저널 첫 글 제목이 낱말째로 꺾이고 줄 사이가 1.2 로 선다 #323)가 고친 요소 · 속성 보기(.journal-reading h1, h2, h3 의 line-height 는 처음)
• 74쪽과 목록 둘을 360 · 390 · 430 에서 다 재기
• 시험을 먼저 쓰고 dev 의 CSS 에서 빨간지 보기
• 다섯 검사 · 전후 사진 · 전후 잰 값 · /en 390
• dev merge(dev 4aee53a 가 이미 들어 있음)
• 검사 초록(head 7427991: Drift checks · Web CI success) · 겹침 기다리기 「안 겹친다」

한 일

• web/src/app/globals.css 폰 덩어리(@media (max-width: 720px))에 .journal-reading h1, .journal-reading h2, .journal-reading h3 { line-height: 1.25; } 를 더했어요. 위에 까닭 주석 세 줄을 달았어요. 721px 위의 규칙(24px · 17px, 1.15)은 그대로예요.
• web/src/components/journal/journalCss.test.ts 에 「journal headings in a post on a phone」 시험 둘을 더했어요. 폰에서 h2 와 h3 의 행간이 1.2~1.4 인지 봐요.

증거

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

글 묶음 25개(글 제목, 요약, 날짜 줄, 표지 설명, 본문 문단, 목록 항목, 글 안 h2 · h3, 그림 설명, 글 아래 목록, 언어 단추, /journal 의 머리, 첫 글, 목록 같은 것)를 기준에 견줬어요. 글에 인용 · 코드 · 표 · 글 안 h1 은 없어요. 기준 밖은 글 안 h2 · h3 의 행간 1.15 하나였어요(제목 기준 1.2~1.4 보다 4% 낮음). NEW 표(11px)는 featured 를 둔 글이 없어 지금 0곳이에요.

고친 값, 전 → 후(.journal-reading h2 19px · h3 16px, Inter 500 · 자간 −0.015em):

폰	360	390	430
h2 line-height	1.15(21.9px) → 1.25(23.8px)	같음	같음
h3 line-height	1.15(18.4px) → 1.25(20px)	같음	같음
두 줄 h2(106개 가운데)	5 그대로	5 그대로	3 그대로
두 줄 h3(26개 가운데)	0	0	0
두 줄 사이 글자 틈(가장 좁은 것)	1.9px → 3.8px	1.9px → 3.8px	1.9px → 3.8px
두 줄 사이 글자 틈(가장 넓은 것)	2.9px → 4.8px	2.9px → 4.8px	2.9px → 4.8px
위 간격 · 아래 간격(h2)	56px · 18px 그대로	같음	같음
scrollWidth	360 그대로	390 그대로	430 그대로

글자 틈은 윗줄의 가장 깊은 내림과 아랫줄의 가장 높은 오름 사이를 캔버스 measureText 로 잰 값이에요. 세 폭 모두 1.9px 였던 것은 「The question — stop everything (and) / throw myself in?」과 「Back to AI pattern generation — / actually, this matters」예요. 3.8px 는 19px 의 0.2em 이고, 146바퀴(#319)와 150바퀴(#323)가 고친 두 제목의 틈도 고친 뒤 0.2em 이에요. 1.25 는 폰 목록 제목(.journal-list-body strong, Inter 500 · 18px)이 이미 쓰는 값이에요.

두 줄 h2 다섯은 다 영어판(/journal/headache/en 넷, /journal/why-i-write-these/en 하나)이에요. 한국어 h2 · h3 66개는 세 폭 모두 한 줄이에요. 제목 글꼴은 Inter(next/font)와 Pretendard(/fonts/) 둘 다 사이트가 싣는 글꼴이라, 상자에서 잰 폭이 폰과 같아요.

74쪽과 목록 둘 전체를 같은 셈으로 전후 견줬어요. 바뀐 것은 h2 · h3 의 line-height 하나예요. 줄 수, 줄마다의 글, 넘침, keep-all 은 228번 모두 같아요. 쪽 높이는 h2 · h3 가 있는 22쪽만 세 폭에서 늘었고(가장 큰 것은 390 /journal/headache/en 8264 → 8285px), 목록 두 쪽과 나머지 글 52쪽은 그대로예요.

/en 판(같은 규칙) 390 에선 두 줄 h2 다섯이 다 여기 있고, 행간 1.25 로 제목 기준(1.2~1.4) 안이에요.

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

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

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

× journal headings in a post on a phone > keeps the lines of .journal-reading h2 1.2 to 1.4 apart
× journal headings in a post on a phone > keeps the lines of .journal-reading h3 1.2 to 1.4 apart
AssertionError: expected 1.15 to be greater than or equal to 1.2
Tests  2 failed | 37 passed (39)

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

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

check:ci 첫 판은 next start 를 띄운 채 돌려서 HardwareModal.test.tsx 의 「Esc over the Publish modal closes Publish alone and keeps the header」 하나가 초점을 못 받아 빨갰어요(1639 / 1640). 그 파일만 세 번 돌리니 32 / 32 가 세 번이었고, 서버를 끄고 check:ci 를 다시 돌린 판이 위 줄이에요. 저널 CSS 와 닿지 않는 Lab 시험이에요.

사진은 /journal/headache/en 의 「The question — stop everything and throw myself in?」 자리와 /journal/headache 의 첫 h2 자리를 잘라 찍었어요.

실행법

cd web
npx vitest run src/components/journal/journalCss.test.ts
npm run build && npx next start -p 3100
# 390px 로 /journal/headache/en 을 열고 「The question — stop everything and / throw myself in?」 두 줄 사이를 본다

가정

• 고르는 차례는 창작자 지시 남은 줄(없음), 세 직함 댓글(맡을 글 없음), 저널 타이포 순서였어요.
• 74쪽과 목록 둘을 세 폭에서 다 쟀어요. 기준 밖은 글 안 h2 · h3 행간 1.15 하나였어요. 150바퀴([DONE] 폰에서 저널 첫 글 제목이 낱말째로 꺾이고 줄 사이가 1.2 로 선다 #323)가 「다음 바퀴」 첫 줄로 남긴 것과 같아요.
• 값은 기준의 아래 끝 1.2 가 아니라 1.25 로 했어요. 1.2 면 19px 제목의 가장 좁은 틈이 2.9px 로, [DONE] 폰에서 저널 첫 글 제목이 낱말째로 꺾이고 줄 사이가 1.2 로 선다 #323 이 붙었다고 본 2.2px 와 거의 같아서예요. 1.25 면 0.2em(3.8px)으로 앞 두 제목 고침과 같고, 같은 Inter 500 인 폰 목록 제목의 값이에요.
• h3 는 두 줄이 0곳이지만 데스크톱에서 h2 와 한 규칙(.journal-reading h1, h2, h3)이라 폰에서도 같이 뒀어요. 글 안 h1 은 지금 0곳이에요.
• 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, 150바퀴([DONE] 폰에서 저널 첫 글 제목이 낱말째로 꺾이고 줄 사이가 1.2 로 선다 #323)는 .journal-featured h1 의 line-height · word-break · overflow-wrap 을 고쳤어요. .journal-reading h1, h2, h3 의 line-height 는 처음이에요.
• 저널 글, 그림, 화면 글, incoming/ 은 그대로예요.

Changelog

Web

• A journal post's two-line headings stand apart on a phone. Below 721px a heading in a post set its lines 1.15 apart, and the letters of the five two-line headings came within 1.9px of the line under them. They now stand 1.25 apart, as the archive's titles do, and pages from 721px up are unchanged.

경험

언제: 저널 바퀴에서 next start 로 잰 뒤 같은 상자에서 npm run check:ci 를 돌릴 때
교훈: 재기에 쓴 서버를 먼저 끄고 check:ci 를 돌려요. 띄운 채로 돌리면 저널과 닿지 않는 Lab 초점 시험이 빨개져서 헛돌아요
근거: #324 에서 서버를 띄운 채 돌린 check:ci 가 HardwareModal.test.tsx 하나로 1639 / 1640 이었고, 그 파일만은 세 번 다 초록, 서버를 끄고 다시 돌리니 1640 / 1640 이었어요

바퀴

바퀴 151 · 후보: 저널 타이포 — 고친 곳: web/src/app/globals.css · @media (max-width: 720px) 의 .journal-reading h1, .journal-reading h2, .journal-reading h3 · line-height(1.15 → 1.25) · 까닭: 폰 360 · 390 · 430 에서 글 안 h2 · h3 행간이 1.15 로 제목 기준 1.21.4 보다 4% 낮았고, 두 줄이 되는 h2 다섯(360 · 390, 430 은 셋)의 윗줄과 아랫줄 글자 틈이 1.92.9px 였다

다음 바퀴

• 글 안 영어 h2 의 끝 줄에 낱말 하나가 혼자 남아요. 360 에서 「The word "business," and the / cafeteria」, 390 에서 그것과 「Making patterns, and hitting the gacha / wall」, 430 에서 「Pulling patterns out of AI, and why it's no / good」예요. 두 줄 h2 다섯 가운데 360 하나, 390 둘, 430 하나예요. 글 제목(.journal-article-header h1)은 text-wrap: balance 인데 글 안 제목엔 없어요.
• 글 안 그림 설명(.journal-md-figure figcaption, 13px · 줄 26.3em)이 390 에서 「성공과 실패: 다음 단계」의 「IO0에 풀업저항을 달아 cold boot 문제를 해결한 / 모습」처럼 두 글자만 끝 줄에 남아요. 그림 설명 120개 가운데 390 에서 이 하나이고, 360 · 430 은 0 이에요. JetBrains Mono 엔 한글이 없어 대체 글꼴로 그려서, 폰 폭 ÷ 글자 크기로 다시 봐야 해요.
• 폰 목록 요약(.journal-list-body .pf-row-d, 14px)의 행간이 1.4 예요(본문 기준 1.6~1.8 이면 12% 낮음). 74개 가운데 360 에서 「Gathering my scattered attention / back」 하나만 두 줄이고, 그 끝 줄도 낱말 하나예요. 390 · 430 은 0 이에요.

---

Generated by Claude Code