클로드디자인 브리지 + 랜딩 B모드 재구성
개요
"클로드디자인 샘플 → 실제 서비스 배치"의 다리를 도구화하고, 런칭 티저를 원본으로 tiomta 랜딩을 재구성(병렬).
A. 랜딩 B모드 (런칭 티저 → tiomta.com)
- 티저는 React standalone(gzip+babel 클라 렌더) → 헤드리스 Chrome --dump-dom으로 실제 카피/타이포/색 추출(추측 배제).
- 내러티브 그대로 이식: YOUR TYPE → "나는, 어떤 사람일까?"(세리프 clamp 40~92px) → 적성·강점·성장 → "나를 아는 것에서 멈추지 않아요—오늘 행동으로" → CTA "티옴타 테스트로 시작" → 서비스 그리드 → 클로징 "크라우니의 패밀리가 되세요 / 인생이 바뀔 거예요".
- 팔레트/폰트는 티저=내 표준과 동일 확인(#B58A4A·#3B2A1D·크림·Noto Serif KR). 빠졌던 건 대형 스케일+실제 카피였음→충전.
- 추가로 이전 턴: 이모지→라인SVG 아이콘, 굵기위계(히어로700/본문400), 보더프레임 제거.
B. cdbridge 도구 (/Users/ef/crowny-cdbridge)
| 파일 | 역할 |
|---|
| cdbridge.sh | CLI: extract / place / help |
| cdextract.sh | 헤드리스 렌더 → 토큰/카피/구조 |
| cdp-extract.js | Chrome DevTools 프로토콜(WebSocket, ws모듈 없이 net+RFC6455 마스킹)로 computed 스타일 정밀 추출 |
| cdplace.sh | 추출물 → 배치가이드 + 토큰 리맵 |
| 브리지.한선 | 한선씨 동반(추출규칙/토큰역추출/분류, 컴파일 PASS 199KB) |
| README.md | 워크플로우 문서 |
- 산출 design-spec.json: 토큰40·computed요소36(h1 52.9px/800·h2 28/700·p 17/450)·팔레트16. 기계가독.
- 워크플로우: 클로드디자인 아티팩트 →
cdbridge extract → 배치가이드+토큰 → 클로드가 서비스 통합.
- 함정: CDP는 page 탭만(background_page 연결시 즉시 닫힘), RFC6455 마스킹 필수. 한선씨=전역변수 최상단 선언(아니면 VM 무한루프), 맵생성/맵꺼내 런타임버그→배열카운터 대체.
검증
랜딩: 티저 카피/스케일 라이브 200 공개반영. 도구: cdbridge help/extract 동작, design-spec.json 실측, 브리지.한선 컴파일.
울트라 병렬 후속 (모션 + 일괄정렬, 4에이전트)
- 모션: tiomta 랜딩에 런칭티저 시네마틱 등장 — @keyframes tdsRise(opacity0→1+translateY16px, 640ms --ease) 스태거(eyebrow→title→sub→cta→카드), prefers-reduced-motion 가드. 백업 index.html.bak_cinematic_.
- 일괄정렬(cdbridge place): ABTI/AMTI style.css :root를 티옴타표준 토큰으로 리맵(#B58A4A/#F4EFE2/Noto Serif KR/Pretendard, 변수명 유지). report 잔재(Cormorant) 제거. 백업 style.css.bak_.
- 검증: 디스크 SSOT 정렬 확인(abti 51KB·amti 17KB 표준색/폰트), 간격 둔 단일요청 전부 200. (연속 병렬 curl 폭주+부하 10.79로 인한 000은 측정노이즈, 실다운 아님)