[patternflow-bot]

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

폰에서 저널 글 안 목록의 항목 사이가 0 이라, 「글을 적는 이유」의 항목 셋이 390 에서 11줄 한 덩어리로 붙어 있었어요. 머지하면 360 · 390 · 430 폰에서 항목이 문단처럼 1.1em 떨어져 셋이 따로 읽혀요. 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] Lab 머리줄 규칙 22개가 여럿이 쓰는 CSS 에서 dock 틀 CSS 로 간다 #240~[DONE] 폰에서 저널 글 본문이 15px 대신 16px 로 읽힌다 #320 에 세 직함 리뷰와 줄 댓글이 없어 맡을 글 없음)
• 143~147바퀴([DONE] 폰에서 저널 글이 화면 끝 48px 대신 24px 에서 시작해 한 줄이 넓어진다 #316 · [DONE] 폰에서 저널 목록의 날짜와 읽는 시간이 10.5px 대신 13px 로 읽힌다 #317 · [DONE] 폰에서 저널 한국어 글이 낱말 가운데서 줄이 바뀌지 않는다 #318 · [DONE] 폰에서 두 줄이 된 저널 글 제목이 낱말째로 꺾이고 줄 사이가 벌어진다 #319 · [DONE] 폰에서 저널 글 본문이 15px 대신 16px 로 읽힌다 #320)가 고친 요소 · 속성 보기(겹치지 않음)
• 74쪽과 목록 둘을 360 · 390 · 430 에서 다 재기
• 시험을 먼저 쓰고 dev 의 CSS 에서 빨간지 보기
• 다섯 검사 · 전후 사진 · 전후 잰 값 · /en 390
• dev merge(dev 7fa0185 가 이미 들어 있음)
• 검사 초록(head 55e6ddf: Drift checks · Web CI success) · 겹침 기다리기 「안 겹친다」

한 일

• web/src/app/globals.css 폰 덩어리(@media (max-width: 720px))에 .journal-reading li 규칙을 더하고 margin-bottom: 1.1em 을 줬어요. .journal-reading p 의 문단 간격과 같은 값이에요. 위에 까닭 주석 세 줄을 달았어요.
• web/src/components/journal/journalCss.test.ts 에 「journal lists on a phone」 시험을 더했어요. 폰 규칙이 글 안 목록 항목 아래에 0.8~1.5em 을 두는지 봐요.

증거

dev 빌드와 이 브랜치 빌드를 Chromium 으로 열어 getComputedStyle 과 글자마다의 Range 로 쟀어요. 저널 글 74쪽(한국어 37, 영어 37)과 /journal, /journal/en 을 세 폭에서 다 열었어요. 글 안 목록(ul · ol)은 74쪽 가운데 「글을 적는 이유」(/journal/why-i-write-these)와 그 영어판의 ul 하나씩, 항목 셋씩이 전부예요.

고친 값, 전 → 후(「글을 적는 이유」):

폰	360	390	430
항목 사이	0 → 17.6px(1.1em)	0 → 17.6px(1.1em)	0 → 17.6px(1.1em)
항목마다 줄 수	3 · 4 · 4 그대로	3 · 4 · 4 그대로	3 · 3 · 3 그대로
목록 앞(문단 → 첫 항목)	17.6px 그대로	17.6px 그대로	17.6px 그대로
목록 뒤(끝 항목 → 가로줄)	72px 그대로	72px 그대로	72px 그대로
항목 글자 · 행간 · 자간	16px · 1.68 · −0.005em 그대로	같음	같음
본문 폭 ÷ 글자 크기	19.5 그대로	21.4 그대로	23.9 그대로
쪽 높이	5,418 → 5,454px	5,230 → 5,265px	4,827 → 4,862px
scrollWidth	360 → 360	390 → 390	430 → 430

끝 항목 아래 1.1em 은 뒤 가로줄의 72px 위 여백과 겹쳐서 목록 뒤 간격은 72px 그대로예요. 쪽 높이는 항목 사이 둘(35.2px)만큼 늘었어요.

74쪽과 목록 둘 전체를 같은 셈으로 전후 견줬어요. 쪽에 있는 글 묶음 22개(글 제목, 요약, 날짜 줄, 본문 문단, 목록 항목, 글 안 제목, 그림 설명, 글 아래 목록, /journal 의 첫 글과 목록 같은 것. 인용과 NEW 표는 지금 글에 없어요) 가운데 바뀐 것은 목록 항목의 아래 여백 하나예요. 줄 수, 낱말 가운데 줄바꿈, 두 글자 이하만 남은 끝 줄, 화면 밖으로 나간 요소는 세 폭 모두 전후가 같아요. 목록 항목 아홉 줄 묶음(한국어 · 영어 × 세 폭)에서 두 글자 이하만 남은 끝 줄은 전후 모두 0 이에요.

/en 판(같은 규칙) 390 에선 항목 사이 0 → 17.6px(1.1em), 항목마다 줄 수 4 · 3 · 3 그대로, 쪽 높이 5,436 → 5,471px 예요. 360 은 4 · 4 · 4, 430 은 3 · 3 · 3 그대로예요.

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

721px 위는 그대로예요. 바뀐 줄은 폰 덩어리 안이고, 1440 에서 잰 항목 사이는 전후 모두 0 이에요. 1440 사진은 전후가 바이트까지 같아요(md5 5e2e77374822acdf0c76ac8df7d51c64 둘 다).

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

× journal lists on a phone > keeps a post's list items 0.8 to 1.5em apart
AssertionError: the bottom margin of .journal-reading li: expected '0' to match /^[\d.]+em$/
Tests  1 failed | 32 passed (33)

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

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

사진은 같은 글 「글을 적는 이유」의 목록과 그 앞 문단, 뒤 가로줄까지 잘라 찍었어요.

실행법

cd web
npx vitest run src/components/journal/journalCss.test.ts
npm run build && npx next start -p 3100
# 360 · 390 · 430px 로 /journal/why-i-write-these 를 열고 Build · Pattern · Inside 세 항목이 1.1em 떨어졌는지 본다

가정

• 고르는 차례는 창작자 지시 남은 줄(없음), 세 직함 댓글(맡을 글 없음), 저널 타이포 순서였어요.
• 74쪽과 목록 둘을 세 폭에서 다 쟀어요. 기준 밖은 글 안 목록의 항목 사이 0(문단 간격 기준 0.8~1.5em, 아래 끝보다 0.8em 모자람), 첫 글 제목(.journal-featured h1, 36px) 행간 1.06(1.2 보다 12% 낮음), 글 안 제목(h2 · h3) 행간 1.15(4% 낮음), 표지 그림 설명 하나가 360 에서 낱말 가운데 꺾임이었어요. 항목 사이가 기준에서 가장 멀고, 「글을 적는 이유」 두 판의 세 폭 모두에서 화면에 나와요. 첫 글 제목은 지금 첫 글이 세 폭 모두 한 줄이라 행간이 화면에 나오지 않아요.
• 1.1em 은 새 값이 아니라 같은 글의 문단 간격이에요. 기준 0.8~1.5em 안이에요.
• 점과 들여쓰기는 두지 않았어요. Tailwind 의 바탕 규칙이 목록의 list-style 과 padding-left 를 지워서 모든 폭에서 점이 없어요. 점은 잴 기준에 없고 새로 보이는 꼴이라, 이번엔 항목 사이만 벌렸어요. 항목 셋이 굵은 머리말(「Build 섹션」, 「Pattern 섹션」, 「Inside 섹션」)로 시작해서 벌린 뒤엔 문단 셋처럼 읽혀요.
• 끝 항목에도 1.1em 이 붙어요. 지금 목록 뒤엔 가로줄이 와서 72px 그대로지만, 목록 뒤에 문단이 오는 글이 생기면 그 문단과도 1.1em 떨어져요. 지금 꼴로는 그 문단이 목록에 바로 붙어요(ul 의 바탕 여백 0).
• 폰 덩어리에만 두었어요. 721px 위 목록도 항목 사이가 0 이지만(1440 에서 두 줄짜리 항목 셋), 이 열 바퀴는 폰 글자 읽기가 몫이고 데스크톱 배치는 크게 바꾸지 않기로 해서예요.
• 147바퀴([DONE] 폰에서 저널 글 본문이 15px 대신 16px 로 읽힌다 #320)가 적은 「두 글자 이하만 남은 끝 줄」을 이번 셈(줄 끝 띄어쓰기를 뺀 글자 둘 이하, 한국어 37편 본문 문단)으로 세면 360 0 · 390 0 · 430 1 이에요. 147바퀴의 30 · 31 · 19 와 셈이 달라서 이 줄은 다음 바퀴 감에서 뺐어요.
• 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, 147바퀴([DONE] 폰에서 저널 글 본문이 15px 대신 16px 로 읽힌다 #320)는 .journal-reading 의 font-size 를 고쳤어요. .journal-reading li 는 처음이에요.
• 저널 글, 그림, 화면 글, incoming/ 은 그대로예요.

Changelog

Web

• A list in a journal post keeps its items apart on a phone. Below 721px the items stood 0 apart, with no marker or indent, so the three in "Why I write these" ran on as one block of 11 lines at 390. They now sit 1.1em apart, as the post's paragraphs do, and pages from 721px up are unchanged.

경험

언제: 저널 바퀴에서 CSS 를 고친 뒤 같은 포트로 다시 빌드해 전후를 잴 때
교훈: 옛 next start 를 PID 로 끄고 새로 띄운 뒤 잰 값에 행간이 있는지부터 봐요. pkill -f "next start -p 3100" 은 그 줄을 든 제 셸까지 죽여요
근거: #321 에서 pkill 이 제 셸을 죽여(exit 144) 옛 서버가 남았고, 그 위에서 다시 빌드하니 쪽이 지워진 CSS 를 불러 「고친 뒤」 값이 행간 없음, 점 있음, 들여쓰기 40px 로 나왔어요

바퀴

바퀴 148 · 후보: 저널 타이포 — 고친 곳: web/src/app/globals.css · @media (max-width: 720px) 의 .journal-reading li · margin-bottom(0 → 1.1em) · 까닭: 폰 360 · 390 · 430 에서 글 안 목록 항목 사이가 0 으로 문단 간격 기준 0.8~1.5em 밖이었고, 「글을 적는 이유」의 항목 셋이 390 에서 11줄 한 덩어리로 붙었다

다음 바퀴

• 표지 그림 설명(.journal-hero-cover figcaption, 13px)이 word-break: normal 이에요. 「패턴플로우란 무엇인가」(/journal/what-is-patternflow)의 표지 설명이 360 에서 「… 프리런칭 페이 / 지」로 꺾여 「지」 한 글자가 줄 하나예요. 글 안 그림 설명 60개는 .journal-reading 의 keep-all 을 물려받아 낱말 가운데 꺾임이 0 이고, 표지 설명만 그 밖이에요.
• 글 안 제목(h2 · h3) 행간이 1.15 예요(제목 기준 1.2~1.4, 4% 낮음). 영어 h2 53개 가운데 5개가 360 · 390 에서, 3개가 430 에서 두 줄이에요. 한국어 66개는 세 폭 모두 한 줄이에요.
• /journal 첫 글 제목(.journal-featured h1, 폰 36px)이 행간 1.06(12% 낮음)에 word-break: normal 이에요. 지금 첫 글 「나와 패턴플로우」는 세 폭 모두 한 줄이라 화면에선 보이지 않아요.

https://claude.ai/code/session_01Bc4Jku183DW8kZ49iu138J

---

Generated by Claude Code