[patternflow-bot]

ops / https://claude.ai/code/session_011sntQbg3DAqGu1RXBiPrwW

모든 쪽이 받는 globals.css 에서 아무 컴포넌트도 그리지 않는 클래스의 규칙 87개와, 그 규칙만 쓰던 애니메이션 둘과 변수 넷을 걷었어요. 화면은 그대로이고, 머지하면 사이트의 모든 쪽이 받는 CSS 덩이가 8,942바이트(gzip 1,693) 가벼워져요.

좋아지는 것: 없음

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR 댓글(세 직함) 읽기. [DONE] Pattern Lab 에서 레이어를 하나 더 얹어도 코드 레이어가 내보낸 JS 에서 미리보기와 같은 픽셀을 찍는다 #200~[DONE] Lab 밖 CSS 모듈 다섯에서 아무 컴포넌트도 읽지 않는 클래스 23개가 빠지고, 시험이 사이트 전체의 CSS 모듈을 본다 #251 에서 꼬리말 없는 세 직함 글은 [DONE] Lab 갤러리 패널·Gemini 걷어 내기(#183)가 원래 레포 dev 위에 겹침 없이 다시 얹힌다 #215 와 [DONE] 매니페스토 · AGENTS.md · /pattern 카드가 걷은 배치 생성 대신 지금 Pattern Lab 을 말한다 #243 의 닫는 알림 둘뿐이고 일을 시키지 않아요
• 후보 고르기. 1~9위와 지시 6 · 7 은 끝났고, 남은 맨 위가 10위예요
• 걷을 규칙이 아직 죽었는지 세 가지로 다시 재기
• 걷기. 2,474줄 66,630바이트에서 2,042줄 54,698바이트로
• 걷기 앞뒤 빌드의 CSS 덩이 크기, 일곱 쪽 두 폭의 getComputedStyle, 스물세 쪽에서 그려지는 클래스
• /contact 와 /build 를 390 · 1440 으로 찍어 앞뒤 픽셀 비교
• 다섯 검사
• PR 의 Actions 초록. 916d933 과 836fe0b 에서 Drift checks, Web CI 둘 다 success
• dev merge 뒤 [DONE]. 그새 [DONE] patternflow.work 가 Cloudflare Workers 로 옮길 준비를 마쳐, workers.dev 에 올려 볼 수 있다 #250 이 dev 에 들어와 6384a41 을 merge 했어요(836fe0b). 잠금 파일이 바뀌어 npm ci 부터 다섯 검사를 다시 돌려 통과했어요. 겹치는 다른 [DONE] PR 은 없었어요

한 일

web/src/app/globals.css 에서 규칙 87개를 지웠어요. 표가 센 70개에, 표가 다시 보라고 한 .spec, .stack, .track, .placeholder 넷의 규칙 7개, 다시 재며 더 나온 10개예요.

표가 센 70개는 이래요. 옛 버전 꼬리표(.version-tag)와 말풍선(.has-tip), 사양 표(.spec-row, .spec-total), 층 그림(.stack-layer), 로드맵 점(.track-dot), 자리 표시 칸(.ph-*), 요점 목록(.key-points), 흐르는 댓글 띠(.pf-marquee, .pf-track, .pf-comment 들), Tweaks 창의 .tw-head, .tw-row 들, 연락 쪽의 .business-contact-link, .business-intro-grid, .business-decks, 그리고 하나씩인 .hero-viewer 둘, .pretext-line 둘, .tab-bar, .swipe-indicator, .pf-head 둘이에요.

더 나온 10개는 Build steps 덩어리 여섯(.steps, .step figure, .step svg, .step figcaption, .step figcaption span, 540px 의 .steps), Tweaks 의 .tw 와 .tw.open, .panel-header .sub 둘(기본과 900px)이에요. steps, tw, sub 는 코드에 낱말로 흔해서 글자 찾기로는 산 것처럼 보였어요.

이 규칙만 읽던 @keyframes slideUpFadeIn 과 pf-slide, 변수 --led-hex, --pf-fs-card, --pf-fs-ghost(:root 와 760px 둘), --pf-marquee-dur 도 지웠어요. 묶인 셀렉터 일곱(.pf-kicker 묶음, .business-* 다섯, 720px 의 .business-hero 묶음)에서는 죽은 이름만 뺐어요. 빼고 나니 같은 셀렉터 규칙이 바로 붙어 선 곳이 넷이라 하나로 합쳤어요. 합친 짝마다 겹치는 선언이 없어서 어느 값도 순서가 바뀌지 않아요.

증거

다시 잰 것

세 가지로 쟀어요. 레포의 postcss 로 이 파일의 클래스 164개를 뽑아 web/src, web/content, web/public, web/scripts, web/test, docs, tools 에서 낱말로 찾으니 33개가 어디에도 없었어요. 저널 셋을 빼면 표의 70개와 같은 규칙이에요. 둘째로 className, class 가 든 줄만 보니 track, tw, sub 같은 낱말이 더 나왔어요. 셋째로 TypeScript AST 로 className 과 class 값 안의 글자, 그 안의 지역 변수가 받는 글자, classList, querySelector, closest, matches 에 주는 글자를 다 모으니 53개가 빠졌어요. 그 가운데 손으로 본 낱말 넷(spec 은 TextPanel.tsx 의 spec.x 같은 변수, placeholder 는 입력 칸 속성)도 클래스로 쓰는 곳이 없었어요. 혼자 서는 셀렉터의 이름 여덟(placeholder, spec, stack, track, steps, step, tw, sub)은 쪽에 DOM 을 그리는 라이브러리(monaco-editor 0.55.1, dockview, react-markdown, esp-web-tools)에서도 클래스로 나오지 않아요.

걷기 앞  클래스 164, 규칙 407, 선언 1,593, @keyframes 4, @media 17
걷기 뒤  클래스 113, 규칙 316, 선언 1,239, @keyframes 2, @media 13
규칙 91개가 준 것 = 지운 87개 + 합친 4개
걷은 뒤 낱말로 어디에도 없는 클래스: journal-figure-full journal-figure-wide journal-list-number (표대로 남김)
걷은 뒤 아무도 var() 로 읽지 않는 변수: 0개

CSS 덩이 크기

같은 트리에서 이 PR 의 고침 하나만 빼고 넣어 npm run build 를 두 번 했어요. .next/static/chunks/*.css 15개 가운데 바뀐 것은 모든 쪽이 받는 덩이 하나예요.

앞  31tthjllw7pos.css  64,806 바이트  gzip -9 12,249
뒤  3mox6utybraho.css  55,864 바이트  gzip -9 10,556
나머지 14개           크기 그대로

그려지는 클래스

앞 빌드에서 23쪽(/, /build, /pattern, /inside, /contact, /business, /editions, /features, /roadmap, /terms, /update, /journal, /journal/v1-30-days, /journal/en, /guide 와 그 아래 넷, /pattern-lab, /build/breadboard, /compliance, /inside/seunghun-korea)을 390 과 1440 으로 열어 DOM 의 클래스를 다 모았어요. 서로 다른 클래스 828개 가운데 이 파일에서 빠진 이름 51개는 하나도 없었어요.

계산된 스타일

/, /build, /pattern, /inside, /contact, /journal, /journal/v1-30-days 를 390×844(2×)와 1440×900 으로 열어 load 뒤 3초를 기다리고, body 아래 모든 요소와 ::before, ::after 의 getComputedStyle 을 받아 맞댔어요(reducedMotion 은 reduce).

그대로 맞대면 차이 59,964개, 모두 지운 변수 넷이에요
  --led-hex 14,991 · --pf-fs-card 14,991 · --pf-fs-ghost 14,991 · --pf-marquee-dur 14,991
  (요소와 ::before, ::after 마다 :root 에서 물려받던 값, 앞은 #e8552e 96px 15.5px 80s, 뒤는 없음)
그 넷을 빼고 맞대면
build-1440 449 elements 0 · build-390 449 0 · contact-1440 21 0 · contact-390 21 0
home-1440 573 0 · home-390 442 0 · inside-1440 579 0 · inside-390 579 0
journal-1440 327 0 · journal-390 327 0 · journal_v1-30-days-1440 169 0 · journal_v1-30-days-390 169 0
pattern-1440 446 0 · pattern-390 446 0
total differences: 0

사진

맨 위 셋이 걷은 뒤예요. 앞 사진과 픽셀로 맞대니 /contact 두 폭과 /build 390 은 0 차이였어요. /build 1440 은 오른쪽 아래 Case 고르기의 사진 칸(940,859~1388,900) 안에서만 달랐고, 채널 차이가 가장 커도 2/255 예요. 뒤 빌드를 두 번 찍은 것끼리는 0 차이라 빌드마다 사진을 다시 줄이는 데서 온 것으로 봤어요. 계산된 스타일은 그 쪽도 0 차이예요.

contact-390   diff bbox None   pixels 0
contact-1440  diff bbox None   pixels 0
build-390     diff bbox None   pixels 0
build-1440    diff bbox (940, 859, 1388, 900)   max channel diff 2

검사

web/ 에서 돌렸어요.

$ npm ci                                   (exit 0)
$ npm run lint -- --max-warnings=0
> eslint --max-warnings=0                  (exit 0, 출력 없음)
$ npm run typecheck
> tsc --noEmit && tsc --noEmit -p ../tools/virtual-panel   (exit 0)
$ npm run build
✓ Generating static pages using 3 workers (145/145) in 22.3s   (exit 0)
$ npm run check:ci                         (exit 0)
 ✓ src/app/fonts.test.ts (11 tests)
 ✓ src/app/hoverUnderline.test.ts (3 tests)
 ✓ src/components/sections/panelNotes.test.ts (10 tests)
 Test Files  104 passed (104)
      Tests  1291 passed (1291)
passed   audio-vectors … passed   virtual-panel   (drift 14개 통과, links-absolute 와 roadmap 은 책상이라 skipped)

dev merge 뒤(836fe0b) 다시 돌렸어요.

$ npm ci                                   (exit 0)
$ npm run lint -- --max-warnings=0         (exit 0)
$ npm run typecheck                        (exit 0)
$ npm run build
✓ Generating static pages using 3 workers (182/182) in 24.2s   (exit 0, 모든 쪽이 받는 덩이는 그대로 55,864 바이트)
$ npm run check:ci                         (exit 0)
 Test Files  104 passed (104)
      Tests  1291 passed (1291)

PR 의 Actions(head 836fe0b): Drift checks, Web CI 둘 다 success.

실행법

# web/ 에서
npm ci && npm run build && npx next start -p 3100
# 스크래치에서: playwright-core 1.56.1, 컨테이너의 Chromium
npm i playwright-core@1.56.1

클래스를 재는 스크립트는 셋이에요. postcss 로 규칙마다 셀렉터의 클래스를 뽑아 낱말로 찾는 것, className 줄만 보는 것, TypeScript 컴파일러 API 로 className 값의 글자를 모으는 것이에요. 스타일을 받는 스크립트는 일곱 쪽을 두 폭으로 열어 요소마다 DOM 경로를 열쇠로 계산된 속성을 JSON 에 적고, 비교 스크립트가 앞뒤 JSON 을 열쇠와 속성마다 맞대요.

가정

• 표 10위는 규칙 70개를 적고 .spec, .stack, .track, .placeholder 넷은 이 바퀴가 다시 보라고 했어요. 다시 보니 넷도 클래스로 쓰는 곳이 없어 같이 걷었어요. AST 로 더 나온 10개도 「남은 안 쓰는 규칙」 이라 이 줄에 넣었어요. 그래서 제목의 수가 70 이 아니라 87 이에요.
• 저널 쪽 죽은 규칙(journal-list-number, journal-figure-wide, journal-figure-full)은 표대로 두었어요.
• 앞 빌드의 계산된 스타일을 두 번 받아 흔들림을 재려던 둘째 받기는 쪽마다 1분 넘게 걸려 중간에 멈췄어요. 앞뒤를 맞댄 것이 지운 변수 넷 말고 0 차이라 흔들림이 숨을 곳은 없어요.
• 표 밖: web/src/app/globals.css:780~:783 에 「Sponsor」 머리 주석과 그 아래 「60px horizontal」 주석이 Milestones 덩어리 위에 있고, .sponsor 규칙은 :823 부터 머리 없이 시작해요. 바퀴 100 이 적은 그대로예요.

Changelog

Web

• The global stylesheet drops 87 rules for classes no page renders. The old version tag, tooltip, spec and stack tables, roadmap track, placeholders, marquee comments, build steps and tweaks panel had no component left, and slideUpFadeIn, pf-slide and four variables went with them. The CSS chunk every page loads is 8,942 bytes smaller (1,693 gzipped), and computed styles on seven pages at 390 and 1440 px are unchanged.

경험

언제: 바퀴 컨테이너에서 띄운 next start 나 Playwright 스크립트를 Bash 로 내릴 때
교훈: pkill -f "<명령 글>" 은 같은 글이 든 제 Bash 까지 죽이니 ps -eo pid,args 로 next-server 의 PID 를 찾아 kill 해요
근거: #252 에서 pkill -f 를 앞에 둔 Bash 두 번이 제 명령 글에 걸려 스스로 죽었고(exit 144), 뒤에 이은 클래스 훑기와 뒤 빌드가 돌지 않아 다시 띄웠어요

바퀴

바퀴 102 · 후보 10 「globals.css 에 남은 안 쓰는 규칙 70개와 그것만 쓰던 애니메이션 둘, 변수 넷이 빠진다」

남은 것

• 11위 「Lab 밖에서 아무도 읽지 않는 이름 다섯이 빠지고, 가이드 화면 그리기가 글자 폭과 줄 높이를 이름으로 읽는다」. 표에 남은 줄 가운데 순위가 가장 높아요.
• 12위 「타입 검사가 타입만 쓰는 import 에 import type 을 바라고, 닿지 않는 코드를 잡는다」. 고칠 곳이 열한 곳이에요. 13~15위도 남았어요.
• globals.css 에 남은 저널의 죽은 규칙 넷과 묶인 셀렉터 하나(journal-list-number, journal-figure-wide, journal-figure-full). 저널 MDX 가 앞으로 쓸 수도 있어 표가 뺐어요. 창작자가 안 쓴다고 하면 같은 셈으로 걷어요.

https://claude.ai/code/session_011sntQbg3DAqGu1RXBiPrwW

---

Generated by Claude Code