[patternflow-bot]

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

폰에서 저널 글이 화면 끝에서 48px 안쪽에서 시작했어요. 크림색 바깥 여백 24px 와 흰 판의 안 여백 24px 가 겹쳐서예요. 머지하면 흰 판이 폰 화면 끝까지 닿고 글은 24px 안쪽에서 시작해서, 360px 폰의 한 줄이 15px 글자 17.6자 폭에서 20.8자 폭으로 넓어져요. 721px 위 화면은 그대로예요.

좋아지는 것: 폰에서 저널 글 한 줄이 넓어진다 — 좁은 화면에서도 덜 꺾여 읽힌다

체크리스트

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 창작자 지시 6~10 이 다 끝났는지 보기(10 은 [DONE] 바퀴 106~132 가 고칠 커뮤니티 후보 35줄이 서고, 남의 이름으로 보이는 구멍이 맨 위에 선다 #273)
• 앞 바퀴 PR 댓글 · 리뷰 · 줄 댓글(세 직함만) 읽기 — 일을 시키는 글 없음
• 저널 글 「나와 패턴플로우」와 목록을 360 · 390 · 430 에서 재기 — 본문 좌우 여백 48px
• 시험을 먼저 쓰고 dev 의 CSS 에서 빨간지 보기
• 다섯 검사 · 전후 사진 · 전후 잰 값 · /en 390
• dev merge(dev 0915176 가 이미 들어 있음) · 검사 초록(head a7794f0: Drift checks · Web CI success) · 겹침 기다리기 「안 겹친다」

한 일

• web/src/app/globals.css 폰 덩어리(@media (max-width: 720px))의 .journal-panel, .journal-article 에 margin-left: -24px 와 margin-right: -24px 를 두고 width: 100% 를 auto 로 바꿨어요. 흰 판이 크림색 바깥 여백 위로 늘어 화면 끝까지 가고, 판 안 여백 24px 는 그대로라 글이 24px 안쪽에서 시작해요. 저널 머리(Patternflow · Journal)와 두 바닥 줄은 바깥 여백에 그대로 서 있어서, 폰에서 머리와 글과 바닥 줄이 같은 24px 줄에서 시작해요.
• 같은 덩어리의 바닥 줄 주석을 지금 자리에 맞게 고쳤어요. 값은 그대로예요.
• web/src/components/journal/journalCss.test.ts 에 「journal text on a phone」 시험 다섯을 더했어요. 폰 규칙대로면 글이 화면 끝에서 16~24px 에서 시작하는지, 판이 화면 밖으로 나가지 않는지(margin 이 음수면 width 가 auto), 두 바닥 줄이 글과 같은 자리에서 시작하는지 봐요. 바닥 줄 시험 하나는 이름만 「keeps both in the shell's gutter on a phone」 으로 바꿨어요. 보는 값 [0, 0] 은 그대로예요.

증거

dev 빌드와 이 브랜치 빌드를 Chromium 으로 열어 getComputedStyle 과 글자마다의 Range 로 쟀어요. 글은 「나와 패턴플로우」(/journal/me-and-patternflow, 제목 11 · 문단 49)예요.

고친 값, 전 → 후(px):

폰	360	390	430
본문 왼쪽 끝 · 오른쪽 여백	48 · 48 → 24 · 24	48 · 48 → 24 · 24	48 · 48 → 24 · 24
본문 폭	264 → 312	294 → 342	334 → 382
폭 ÷ 글자 크기(15px)	17.6 → 20.8	19.6 → 22.8	22.3 → 25.5
꽉 찬 줄의 글자 수(가운데값)	22 → 26	24 → 28	27 → 32
본문 줄 수	606 → 514	546 → 472	482 → 423
제목 「나와 패턴플로우」 줄 수	2 → 1	2 → 1	1 → 1
/journal 글 제목 왼쪽 끝 · 폭	48 · 200 → 24 · 248	48 · 230 → 24 · 278	48 · 270 → 24 · 318
저널 머리 · 바닥 줄 왼쪽 끝	24 → 24	24 → 24	24 → 24
scrollWidth	360 → 360	390 → 390	430 → 430

꽉 찬 줄의 글자 수는 띄어쓰기와 숫자까지 센 값이라 폭 ÷ 글자 크기보다 커요. 상자의 한글 대체 글꼴은 WenQuanYi Zen Hei 라 폰 글꼴과 다르지만 한글 한 자가 1em 인 것은 같아서, 잴 기준은 폭 ÷ 글자 크기로 봤어요.

/en 판(같은 규칙) 390 에선 본문 왼쪽 끝이 48 → 24, 폭 ÷ 글자 크기가 19.6 → 22.8, 꽉 찬 줄 글자 수 가운데값이 45 → 52(가장 긴 줄 53 → 61)예요. 영문 35~60자 안이에요. 430 에선 가운데값이 51 → 59 예요.

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

721px 위는 그대로예요. 이 브랜치 빌드의 한 쪽을 연 채 두 빌드의 CSS 를 같은 origin 의 <style> 로 갈아 끼우고, main 안 상자마다 위치와 크기를 견줬어요. 두 빌드 CSS 의 차이는 이 규칙 하나예요(} 로 끊어 diff 하면 한 줄).

1440 /journal/me-and-patternflow: elements 145 · A vs A 0 · A vs B 0
1440 /journal: elements 318 · A vs A 0 · A vs B 0
(721 · 900 · 1440 에서 글 셋과 목록 둘, 15번 모두 A vs B 0)
720 /journal/me-and-patternflow: elements 145 · A vs A 0 · A vs B 139
390 /journal: elements 318 · A vs A 0 · A vs B 315

1440 사진 셋(글 머리, 글 본문, 목록)도 전후가 바이트까지 같아요. dev CSS 를 갈아 끼워 찍은 390 사진이 dev 빌드에서 바로 찍은 사진과 바이트까지 같아서, 「글 끝」과 「목록 위」의 전 사진은 그렇게 찍었어요.

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

× journal text on a phone > starts the text in .journal-panel 16 to 24px from the edge
× journal text on a phone > starts the text in .journal-article 16 to 24px from the edge
  AssertionError: expected 48 to be less than or equal to 24
× journal text on a phone > starts both footers where the text does
  AssertionError: expected 24 to be 48 // Object.is equality
Tests  3 failed | 16 passed (19)

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

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

사진은 같은 글, 같은 자리예요. 글 본문은 두 번째 제목 「2. 글의 동기」를 위에 둔 화면이에요.

실행법

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 을 열고 글 왼쪽 끝이 24px 인지 본다

가정

• 고르는 차례는 창작자 지시 남은 줄(없음, 6~10 은 [DONE] 텍스트 레이어의 글을 비우면 미리보기도 비고, 판을 돌린 흐르기 글이 다시 열어도 살고, 글꼴을 못 남기면 그렇다고 말한다 #244 · [DONE] 가이드 연습 벽 카드의 노브가 커뮤니티 카드와 같은 셈으로 돌고, Lab 주석이 포크 번호 대신 말로 적는다 #246 · [DONE] 커뮤니티 메뉴와 폰 탭에서 Workshop 이 빠지고, 옛 워크숍 주소는 커뮤니티 첫 화면으로 간다 #268 · [DONE] 커뮤니티 메뉴에서 Atlas 가 빠지고, 아틀라스는 쪽 아래 Archive 링크로 닿는 읽기 전용 보관함이 된다 #271 · [DONE] 바퀴 106~132 가 고칠 커뮤니티 후보 35줄이 서고, 남의 이름으로 보이는 구멍이 맨 위에 선다 #273), 세 직함 댓글(넷 다 원래 레포로 옮기고 닫는다는 글이라 맡을 일이 없음), 저널 타이포 순서였어요.
• 저널 타이포 첫 바퀴라 앞 바퀴가 잰 글이 없어서, 한글 글 가운데 제목(11)과 문단(49)이 가장 많은 「나와 패턴플로우」를 골랐어요. 글 안 목록(ul)은 「글을 적는 이유」에만 있어서 그 글도 같이 쟀어요. 인용(blockquote)이 있는 글은 없어요.
• 기준 밖은 좌우 여백 48px(위 끝 24px 의 두 배), 목록 날짜 10.5px(13px 보다 19% 작음), 글 제목 행간 1.02(1.2 보다 15% 낮음), 본문 15px(16px 보다 6% 작음), 360 의 한 줄 17.6자 폭(18 보다 2% 짧음), 한글 낱말 가운데 끊김이었어요. 좌우 여백이 가장 많이 벗어났어요. 본문을 16px 로 올리는 일도 이 폭이 있어야 360 에서 18자 폭을 넘어요(전 264 ÷ 16 = 16.5, 후 312 ÷ 16 = 19.5).
• 고치는 길은 셋이었어요. 크림색 바깥 여백(.journal-shell)을 0 으로 하면 그 여백에 바로 선 저널 머리와 두 바닥 줄이 화면 끝에 붙어서 규칙 셋을 더 고쳐야 해요. 판 안 여백을 0 으로 하면 글이 흰 판 끝에 붙어요. 그래서 흰 판만 바깥 여백 위로 늘였어요. 규칙 하나예요. 폰에서 흰 판 양옆의 크림색 띠 24px 는 사라지고, 위아래 크림색은 그대로예요.
• 표지 그림의 sizes 는 이미 폰에서 calc(100vw - 48px) 라고 적어요(ArticleLayout.tsx, JournalIndex.tsx). 고친 뒤 판 안 폭과 같아요. 코드는 그대로예요.
• 저널 글, 그림, 화면 글, incoming/ 은 그대로예요.

Changelog

Web

• Journal text on a phone starts 24px from the screen's edge, not 48px. The cream gutter and the white panel's padding added up, so 15px text got 17.6 characters a line at 360px. The panel now reaches the screen's edges, and the masthead, the text and both footers start on one 24px line. Pages from 721px up are unchanged.

경험

언제: 저널 바퀴에서 빌드를 다시 하려고 띄워 둔 next start 를 끌 때
교훈: pkill -f "next start -p 3100" 은 그 글이 든 제 셸까지 죽이니, ps 로 next-server 의 pid 를 찾아 kill 하고 빌드는 따로 띄워요
근거: #316 에서 pkill -f 와 npm run build 를 한 명령으로 띄우니 빌드가 exit 144 로 로그도 없이 끝났고, 옛 서버는 살아 있어 새 빌드 대신 dev CSS 를 내줬어요

바퀴

바퀴 143 · 후보: 저널 타이포 — 고친 곳: web/src/app/globals.css · @media (max-width: 720px) 의 .journal-panel, .journal-article · margin-left · margin-right(−24px), width(auto) · 까닭: 폰 360 · 390 · 430 에서 본문이 화면 끝에서 48px(기준 1624px)에서 시작해 15px 글이 360 에서 17.6자 폭(기준 1828)이었다

다음 바퀴

• 목록 날짜가 폰에서 10.5px 예요(메타 기준 13px 이상). /journal 의 74곳(날짜 37, 읽는 시간 37)이 360 · 390 · 430 모두 그래요. globals.css 폰 덩어리의 .journal-list-meta font-size 예요.
• 한글이 낱말 가운데서 끊겨요. .journal-reading 이 word-break: normal 이라, 고친 뒤 「나와 패턴플로우」 본문 줄바꿈 가운데 낱말 안에서 끊긴 것이 360 에서 465 가운데 438, 390 에서 423 가운데 388, 430 에서 374 가운데 348 이에요(92~94%). keep-all 이에요.
• 본문이 폰에서 15px 예요(기준 1618px). 이번 바퀴 뒤엔 16px 로 올려도 폭 ÷ 글자 크기가 360 19.5 · 390 21.4 · 430 23.9 로 1828 안이에요. 그다음은 글 제목 행간 1.02(기준 1.2~1.4)와 글 안 목록에 점과 들여쓰기가 없는 것(「글을 적는 이유」의 ul 3줄, list-style: none · padding-left: 0)이에요.

https://claude.ai/code/session_01Bc4JkrL3UrGApTf2da2Y3K

---

Generated by Claude Code