estel.crowny.org 모듈 타이포 토큰 전환
개요
앱.html에 이미 정의된 읽기 편의 토큰(
--fs-mul,
--lh-tight/body/loose,
--ls-body)을
9개 모듈 CSS의 하드코딩 px/line-height 값에 치환해,
<html data-level="kid|quick|expert">
눈높이 모드 하나만 바꾸면 전 화면(9모듈 전부)의 글자 크기·줄간격·자간이 함께 움직이게 했다.
사장님 지시: "초등학생도 전체를 볼 만하도록 글밥 간격을 넓게".
무엇을 했는지
- 규칙 정본 작성
/Users/ef/crowny-estel/도구/타이포토큰.한선 — 치환 판정 로직
(font-size→calc(), line-height 구간 분류(≤1.3 tight / <1.8 body / ≥1.8 loose),
본문 성격 텍스트 판정(제목·mono·칩/뱃지/버튼/cursor:pointer 제외), 고정크기 예외 화이트리스트).
컴파일+자체시험 17/17 PASS(경계값 1.30/1.80 포함).
- 대량 치환 — 규칙을 그대로 미러링한 Node 스크립트(
transform.js, 파일 다중 I/O는
한선씨 VM 파일목록() 불량으로 부득이 JS)로 9개 모듈(
sky/qi/lab/puzzle/vault/learn/partner/hw/ops.js)
일괄 치환. 사전 각 파일
.bak-타이포전 백업.
- CDP 캡처 검증 — 공유 크롬(9333)이 타 세션과 충돌해 전용 프로필로 별도 헤드리스 크롬(포트 9346,
--user-data-dir 격리)을 새로 띄우고, 매 캡처마다 새 탭을 열어(
/json/new PUT) 그 탭의
webSocketDebuggerUrl로 직접 붙는
shot.js(+동반
shot.한선, 자체시험 9/9 PASS)로 SPA 해시 라우팅
미반영 함정을 회피. 9모듈×2뷰포트(1440×900/390×844) + sky 내부 5탭×2뷰포트 + kid/quick 모드
대표 4화면 = 32장 캡처, 전부
document.documentElement.scrollWidth === innerWidth(가로 오버플로 0).
- 수치 검증 —
getComputedStyle로 .sky-scene-body/.qi-sub 등 실측: 기본 fs=13.5px·lh=23.625px
(×1.75) → kid fs=14.715px(×1.09)·lh=29.43px(×2.0)·ls=0.2207px(×0.015em) → quick fs=13.23px(×0.98)·
lh=21.168px(×1.6)·ls=normal(0) — 토큰 공식과 정확히 일치. 고정크기 예외(
.sky-status)는 kid 모드에서도
13.5px로 불변 확인.
치환 결과 (파일별 font-size / line-height / letter-spacing)
| 파일 | font-size 치환 | 고정예외(미치환) | line-height | letter-spacing 추가 |
|---|
| sky.js | 64 | 3 (sky-status, sky-status-word, sky-avatar) | 18 | 16 |
| qi.js | 28 | 3 (qi-stage-num, qi-bar-pct, qi-bar-label) | 8 | 6 |
| lab.js | 26 | 0 | 8 | 7 |
| puzzle.js | 23 | 1 (puzzle-ai-avatar) | 6 | 5 |
| vault.js | 20 | 0 | 5 | 5 |
| learn.js | 29 | 1 (learn-ep-avatar) | 6 | 5 |
| partner.js | 26 | 0 | 8 | 8 |
| hw.js | 21 | 0 | 8 | 8 |
| ops.js | 26 | 1 (ops-avatar) | 3 | 2 |
| 합계 | 263 | 9 | 70 | 62 |
letter-spacing 미부여 8건(제목/mono/버튼형 제외):
sky-scene-headline·
learn-ch-title·
sky-live-title(제목),
ops-audit-stream·
lab-terminal-log·
qi-stage-out·
qi-mcp-code(mono 코드블록),
puzzle-option(cursor:pointer 클릭형).
관련 파일
- 모듈(치환 대상):
/Users/ef/crowny-estel/모듈/{sky,qi,lab,puzzle,vault,learn,partner,hw,ops}.js
- 백업: 각 파일 옆
*.js.bak-타이포전
- 규칙 정본:
/Users/ef/crowny-estel/도구/타이포토큰.한선
- CDP 캡처 동반:
/Users/ef/crowny-estel/도구/shot.한선 (원본 shot.js는 세션 scratchpad — 재사용 필요 시 이관 권장)
- 토큰 정의:
/Users/ef/crowny-estel/앱.html :root(93~99행) + html[data-level=...](104~115행) — 이번 작업에서 미수정(읽기만, 타 세션 동시편집 중이라 무접촉 준수)
- 스크린샷 32장:
/private/tmp/claude-501/-Users-ef/c8c26880-57dd-4de8-949f-2341ee424a3e/scratchpad/타이포/shots/
잔여 이슈
- ops.js 모바일 헤더 "운영 콘솔 — 한별QC"가 좁은 아바타+텍스트 flex 행에서 4줄로 개행됨 — 실측 결과
이번 치환과 무관(기본 모드 fs-mul=1이라 절대 픽셀 불변, 제목이라 letter-spacing 미부여)한
기존
레이아웃 이슈로 확인. 이번 작업 범위 밖이라 미수정, 별도 개선 필요 시 참고.
- scratchpad의
shot.js/transform.js/measure.js/capture.sh는 세션 종료 시 소멸 — 이 검증
파이프라인을 상시 도구로 남기려면
/Users/ef/crowny-estel/도구/로 정식 이관 권장(다음 세션 판단).