[patternflow-bot]

studio / https://claude.ai/code/session_019pN7cyTaj71qtAf6TTw2yz

Pattern Lab 에 텍스트 레이어가 생겼어요(창작자 지시 2). 「+ Text」로 글을 넣고 크기 · 자리 · 맞춤 · 글꼴 · 색을 고르고, Preview 를 끌어(폰은 손가락으로) 옮겨요. 글꼴은 사이트에 싣지 않고, 쓰는 사람이 자기 기기의 글꼴 파일을 고르면 브라우저 안에서만 읽어요. 머지하면 그린 글자가 다른 레이어처럼 섞이고 마스크가 되고, Graphic Export 와 두 내보내기에 픽셀 그대로 실려요.

좋아지는 것: Lab 에서 내 글꼴로 글자 레이어를 얹는다 — 브랜드 글을 판에 바로 올린다

체크리스트

• incoming/ROUND.md 「한 바퀴」 읽기: 고르는 차례 0, 지시 1 은 [DONE] Pattern Lab 에서 AI 갤러리와 Gemini 키 칸이 없어지고, Copy prompt 옆에서 v-field · rgb 를 고른다 #183 에서 끝, 남은 맨 위 줄은 지시 2
• 앞 바퀴 PR 의 세 직함 댓글 · 리뷰 · 줄 댓글: [DONE] Pattern Lab 에서 AI 갤러리와 Gemini 키 칸이 없어지고, Copy prompt 옆에서 v-field · rgb 를 고른다 #183 뒤로 일을 시키는 글 없음
• 모델: TextLayer(글 · 크기 · X/Y · 맞춤 · 글꼴 · 색 · 채우기 · 선명한 가장자리 + 램프)와 그려 둔 RGBA
• 그리기: 캔버스로 글자 덮임을 재고(textRaster.ts) 색을 입혀(text.ts) 판 크기 비트맵으로
• 글꼴: 사이트 글꼴 넷 · 기기의 기본 글꼴 셋 · 내 파일(FontFace, 업로드 없음, 「remember in this browser」를 켜면 IndexedDB)
• 엔진 · 마스크 · 섞기 · 저장 · @stack 공유 · Graphic Export · 두 내보내기가 텍스트 레이어를 받기
• Text 패널 · Layers 의 「+ Text」(TX 표시) · Color Ramp 패널이 텍스트 레이어 램프를 고치기 · Preview 끌어 옮기기(터치 포함)
• 시험 31개 더함 · 다섯 검사 · 폰 390 / 1440 사진
• dev merge (그새 dev 가 움직이지 않음) 뒤 [DONE]

한 일

텍스트 레이어는 글이 바뀔 때마다 한 번 그려서, 픽셀 레이어와 같은 RGBA 비트맵을 들고 있어요. 엔진 · 마스크 · Graphic Export · flatten.ts · hExport.ts 는 이 비트맵만 읽어서, 기기로 가는 코드에는 글꼴이 필요 없어요. 저장(serialize.ts)도 글 · 글꼴 · 램프 옆에 비트맵을 같이 넣어서, 그 글꼴이 없는 브라우저에서 열어도 그린 모양 그대로예요. 그 글꼴로 다시 그리려 할 때만 Text 패널이 「… isn't loaded in this browser」라고 알려요.

Text 패널은 Pixel 옆 탭이에요. Align(Left · Center · Right) · Center on frame, 글 칸(줄바꿈 됨, 200자), Font(사이트 · 기기 · 내 파일 묶음), Size(4~128), Add a font file… · remember in this browser · Forget it, X · Y, Fill(One color · Ramp across · Ramp down), Color, sharp edges 를 둬요. 숫자 칸은 범위 안의 수가 될 때만 바로 넣어서, 16 을 치다 1 에서 4 로 잘리지 않아요.

글꼴은 셋에서 와요. 사이트가 이미 싣는 Silkscreen · Inter · JetBrains Mono · Newsreader 는 CSS 변수로 읽고, 기기 쪽은 sans-serif · serif · monospace 예요. 파일은 FontFace 로 이 탭에서만 읽고, remember 를 켜면 patternflow_lab_fonts_v1 IndexedDB 에 넣어 다음에 열 때 다시 올려요. 새 레이어는 Silkscreen 16px, 판 가운데, LED 주황(--pf-led)의 「Hello」예요.

램프로 채우면 글자가 켜진 첫 열부터 끝 열까지(아래로면 첫 줄부터 끝 줄까지) 램프 하나가 걸쳐요. 텍스트 레이어를 고르면 Color Ramp 패널이 그 레이어의 램프를 고치고, 한 색으로 채운 글이면 「Fill it with the ramp: across · down」을 보여요.

Preview 에서는 텍스트 레이어를 고른 동안만 프레임 어디를 끌어도 그 글이 LED 한 칸씩 움직여요. 그동안만 touch-action: none 이라 다른 레이어를 고르면 폰 스크롤은 그대로예요.

증거

web/ 에서, 이 브랜치 머리로:

$ npm ci
added 762 packages, and audited 763 packages in 45s
$ 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
✓ Compiled successfully in 22.6s
✓ Generating static pages using 3 workers (145/145) in 22.8s   (exit 0)
$ npm run check:ci
 Test Files  90 passed (90)
      Tests  946 passed (946)
passed   audio-vectors … passed   virtual-panel
skipped  links-absolute              (이 클론에 v1.0.0~v3.1.0 태그 없음)
skipped  roadmap                     (gh 로그인 없음 · drift.yml 이 다시 돌림)
exit=0
$ npm run check:voice
check:voice: nothing found
$ npm run check:human-lock
check:human-lock: no locked words changed
$ python3 .github/scripts/check_links.py     (저장소 뿌리)
all 907 relative links resolve

GitHub 검사(머리 71f6e4d, dev 는 그새 움직이지 않아 merge 할 것이 없었어요):

Docs point at files that exist | completed | success
Drift checks | completed | success
Web CI | completed | success

새 시험은 src/lib/lab/text.test.ts(20개: 선명한 · 부드러운 가장자리, 램프 가로 · 세로 · 알파, spec 다듬기, 그리기, 스토어의 더하기 · 옮기기 · 램프 고치기 · 복제 · 판 크기 바꾸기, 저장과 다시 열기, 텍스트 마스크가 미리보기와 내보낸 JS 에서 같은 픽셀), src/app/pattern-lab/panels/TextPanel.test.tsx(9개: 글 넣기 · 맞춤 · 크기 칸 · 글꼴 파일 넣기와 바깥 요청 0 · 글꼴이 아닌 파일 · 없는 글꼴 알림 · Preview 끌기 · 텍스트가 아닐 때 끌기 없음), LayersPanel.test.tsx 에 2개(「+ Text」 · Del)예요. 캔버스가 없는 jsdom 이라 글자 덮임은 글자당 2×2 칸으로 대신했어요.

빌드한 사이트(next start)를 Playwright 로 연 결과예요. 폰은 CDP 터치, 데스크톱은 마우스로 끌었어요.

390  spec x 64→89, y 32→40 · font file:BigShoulders-Bold · page errors [] · 글꼴을 고른 뒤 나간 요청 [] · IndexedDB [patternflow_lab_fonts_v1]
     새로 고침 뒤: font file:BigShoulders-Bold, X 89, 알림 「A .ttf, .otf … never uploaded.」(없는 글꼴 알림 아님)
1440 spec x 64→88, y 32→40 · fill rampX · page errors [] · 글꼴을 고른 뒤 나간 요청 [] · IndexedDB [patternflow_lab_fonts_v1]
     새로 고침 뒤: font file:BigShoulders-Bold, X 88

새 레이어의 기본 Silkscreen 16px 를 저장된 비트맵에서 읽은 것이에요(# 가 켜진 LED, x 3495 · y 2736). 획이 반 칸에 걸리지 않고 2배 픽셀로 섰어요.

.....##....##....######....##........##..........####.........
.....##....##....######....##........##..........####.........
.....##....##....##........##........##........##....##.......
.....##....##....##........##........##........##....##.......
.....########....######....##........##........##....##.......
.....########....######....##........##........##....##.......
.....##....##....##........##........##........##....##.......
.....##....##....##........##........##........##....##.......
.....##....##....######....######....######......####.........
.....##....##....######....######....######......####.........

실행법

cd web && npm ci && npm run build && npx next start -p 3100
# http://localhost:3100/pattern-lab — Layers 의 「+ Text」 → Text 탭에서 글 · 글꼴 파일 · 크기, Preview 를 끌어 옮기기
npx vitest run src/lib/lab/text.test.ts src/app/pattern-lab/panels/TextPanel.test.tsx src/app/pattern-lab/panels/LayersPanel.test.tsx

가정

• 작업 글의 「가정」은 앞 바퀴 댓글 → 「후보」 표 차례를 말하지만, ROUND.md 고르는 차례 0 이 「창작자 지시」를 먼저 둬서 지시 2 를 맡았어요(지시 1 은 [DONE] Pattern Lab 에서 AI 갤러리와 Gemini 키 칸이 없어지고, Copy prompt 옆에서 v-field · rgb 를 고른다 #183). 「창작자 지시」 절이 ROUND.md 의 ```md 코드 블록 안에 들어가 있지만 고르는 차례 0 이 그 절을 가리켜서 지시 표로 읽었어요.
• 내보내기는 지시 3 의 몫이지만, 텍스트 레이어를 뺀 채로 두면 To hardware 와 공유에서 글자가 말없이 사라져요. 그래서 flatten.ts · hExport.ts 가 텍스트 레이어를 픽셀 아트와 같은 길(RLE 비트맵)로 싣게만 했어요. 지시 3 에 남은 것: 미리보기 · 내보낸 JS · C++ 헤더가 같은 픽셀이라는 시험(이번엔 텍스트 마스크 한 판만 JS 로 봤어요), 기기에서 .pfm 확인, 다음 효과(지시 4)를 얹을 자리.
• 「색 램프가 돼요」는 텍스트 레이어마다 램프를 두고 글자 너비(또는 높이)에 걸치게 칠하는 것으로 읽었어요. 램프는 기존 Color Ramp 패널이 고쳐요. 시간에 따라 바뀌는 것은 지시 4 의 「색 램프 따라 바뀌기」예요.
• 「기기 시스템 글꼴」은 브라우저가 깔린 글꼴 목록을 권한 없이 주지 않아서(Local Font Access 는 크로미움에서만, 허락을 물어요) sans-serif · serif · monospace 셋으로 했어요. 기기에 깔린 다른 글꼴은 그 파일을 고르면 돼요.
• 사이트 글꼴은 next/font 가 latin 만 싣어서 한글은 기기 기본 글꼴로 그려져요. 한글 브랜드 글꼴은 파일로 넣어요. 이 컨테이너엔 한글 글꼴 파일이 없어 사진은 라틴 글꼴(BigShoulders-Bold.ttf)로 찍었어요.
• 사이트 글꼴은 CSS 변수의 첫 family 만 document.fonts.load 에 넘겨요. 뒤의 「… Fallback」 얼굴이 local("Arial") 이라 Arial 이 없는 기기에서 목록 전체가 NetworkError 로 실패해, 처음엔 Silkscreen 대신 대체 글꼴로 그려졌어요.
• Y 는 글 덩어리의 가운데, X 는 맞춤에 따라 줄의 왼쪽 끝 · 가운데 · 오른쪽 끝이에요. 줄의 왼쪽 끝과 덩어리 위쪽은 정수 픽셀로 맞춰 그려요. 캔버스에 가운데 맞춤을 맡기면 폭이 홀수인 줄에서 픽셀 글꼴의 획이 반 칸에 걸려 선명한 가장자리가 한 열씩 빠지거나 겹쳐요.
• Preview 끌기는 글자 위를 짚지 않아도 고른 텍스트 레이어를 옮겨요(폰에서 작은 글자를 정확히 짚기 어려워서).
• 텍스트 spec 의 실행 취소는 두지 않았어요. 글 칸은 브라우저의 실행 취소가 되고, 자리 · 크기는 숫자 칸으로 되돌려요.
• test/setup.ts 의 캔버스 대역에 fillText · measureText 를 더했어요. 없으면 텍스트 레이어를 더하는 모든 패널 시험이 던져요.
• web/ARCHITECTURE.md 의 Lab 문단은 패널 아홉 · 무거운 편집기 넷 · Text 줄로 고쳤고, [DONE] Pattern Lab 에서 AI 갤러리와 Gemini 키 칸이 없어지고, Copy prompt 옆에서 v-field · rgb 를 고른다 #183 이 걷은 gallery 가 슬라이스 목록에 남아 있어 text 로 바꿨어요.
• 표 밖에서 본 것: useFocusCodeLayer 는 Color Ramp 패널만 써서 useFocusRampLayer 로 바꿨어요(다른 쓰는 곳 없음).

Changelog

Web

• Pattern Lab has text layers. + Text adds a layer you type into, set in the site's pixel font, a generic system family, or a .ttf, .otf, .woff or .woff2 file from your own device. The file is read in the browser and never uploaded, and the browser keeps it only when you tick remember. Size, X and Y, alignment, one color or the layer's Color Ramp across or down, sharp or soft edges; a drag on Preview moves the text, by touch too. The text is drawn into a bitmap, so it blends, masks, renders in Graphic Export and travels in both exports as pixel art.

경험

언제: 바퀴에서 사이트 글꼴(next/font)을 캔버스나 document.fonts 로 불러 쓸 때
교훈: CSS 변수의 글꼴 목록 전체가 아니라 첫 family 만 document.fonts.load · check 에 넘긴다 — 뒤의 「… Fallback」 얼굴이 local("Arial") 이라 Arial 없는 기기(바퀴 컨테이너)에서 목록 전체가 NetworkError 로 실패한다
근거: #184 에서 새 텍스트 레이어가 Silkscreen 대신 대체 글꼴로 그려졌고, Playwright 로 document.fonts.load('16px "Silkscreen", "Silkscreen Fallback"') 가 NetworkError 를 던지는 것을 봤어요. 첫 family 만 넘기자 2배 픽셀로 그려졌어요

바퀴

바퀴 62 · 지시 2 「텍스트 레이어」

다음 바퀴

• 지시 3 「텍스트를 코드로」: 내보내기는 이번에 비트맵으로 실었어요. 미리보기 · JS · 헤더가 같은 픽셀이라는 시험, 기기 .pfm 확인, 효과를 얹을 자리가 남았어요.
• 지시 4 「텍스트 효과 첫 셋」: 마퀴 · 반짝임 · 색 램프 따라 바뀌기를 Text 패널의 선택으로, 내보낸 코드에도 같게.
• 지시 5 「Pattern Lab UI · UX 다듬기」: 지시 4 뒤에 「후보」 표를 Lab 위주로 다시 채워요.

https://claude.ai/code/session_019pN7cyTaj71qtAf6TTw2yz

---

Generated by Claude Code