---
title: "🧱 260627 — UI 프레임 재건 3단계: 점진 확산 3-1 ~ 3-6 (화면별 헌법 적용)"
category: "workreport"
parent: "Claude Code 작업보고"
document_type: "작업보고"
source_status: "generated"
knowledge_group: "03_history"
priority: "High"
purpose: "헌법을 화면마다 순차 적용해 전 앱으로 확산한 3단계 기록(3-1 History ~ 3-6 정리패스). 각 화면이 무엇을 정리했는지(inline·breakpoint·variant·strength.css 흡수·app-shell)와 화면별 검수 게이트·독성 주석 근본치료 등 핵심 사건."
read_when: ["3단계 확산","3-1 3-2 3-3 3-4 3-5 3-6","StrengthReport","SocialProfile","Settings","strength.css 흡수","app-shell","독성 CSS 주석"]
updated: "2026-06-29"
work_timestamp: "20260627_110000"
context: "달록본레포CC (D:\\dallog\\dallog_git) — UI 프레임 재건 대작업(0~3단계). 진본 SOT: 본레포 docs/ui_rebuild/. KB는 작업보고 버전."
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
---
> 2026-06-24~27 확산. 상위 SOT = 본레포 `docs/ui_rebuild/_99_DECISIONS_LOG.md`(I~S 항목)·`_15`(점진확산 검수 규약). 본 문서는 3단계 화면별 확산의 KB 작업보고. (마지막 3단계 = 웨어러블 연동은 별도 KB 문서.)

## 0. 결론 요약
- 3단계 = **헌법을 화면마다 적용해 전 앱으로 확산.** 매 화면 = 헌법 게이트(`_15` §5: CC 선검토 → Codex 매트릭스 → 사장님 승인 → 코드) → 작업 → 다중검수(Codex 사후 + GPT·Cai) → 사장님 육안.
- 화면 순서: **3-1 History → 3-2 StrengthReport → 3-3 SocialProfile → 3-4 Settings → 3-5 strength.css 흡수 → 3-6 정리패스.**
- 3단계 동안 **헌법이 v1.0→v1.4로 진화**(반축소·효율논리차단·전면토큰화·CSS분리종결 — 별도 KB 문서).
- 가장 큰 사건 = **3-3 독성 CSS 주석 근본치료**(장기 미해결 데스크탑 헤더 세로추락 버그의 진범 = 주석 조기종료 토큰). 영구 가드 테스트로 재발 차단.

## 1. 화면별 요약

### 3-1. History (closure)
- 파일럿(2단계)에서 적용한 primitive 3종 검수 마무리. before/after 36장 스샷 + 코드 백스톱(diff·Cdx 직접검증·layer2). canvas 차트 캡처 아티팩트(fullPage 시 세로눌림) 발견 → **캡처규약 명문화**(데이터 로딩+1~2초 대기·canvas는 fullPage 금지·큰 뷰포트+viewport 캡처·모바일 폭변화 redraw).

### 3-2. StrengthReport (inline 절충안 D 검증)
- 최악 inline 화면. **빨강(구조+간격) inline 27개 → strength.css 화면국소 클래스 + 초록(데이터값) 보존.** 시각 불변 byte-identical로 검증.
- **증거 무게중심 원칙 명문화**: 안 보이는 리팩터는 diff·소스·기계카운트(빨강 N→0)가 주 증거, 스크린샷은 시각불변 보조.
- half-step 토큰(`--space-1h`·`--space-2h`) 누락 발견 → 헌법 9단계로 정합.

### 3-3. SocialProfile (통일 + ★독성 주석 박멸)
- 모바일(`m-pf-*`)·데스크탑(`pf-*`) 두 DOM 트리 → **공통 DOM 1벌 + 단일 반응형 CSS**(isDesktop JS 분기 제거·769→768).
- **★근본원인 박멸**: 데스크탑 헤더가 세로(block)로 죽던 장기 버그의 범인 = **독성 CSS 주석**(`/* … .pf-*/ … */`의 `*/`가 주석을 조기종료 → 뒤 규칙 선택자 깨짐 → 규칙 통째 폐기). **"목업 그대로 이식"으로는 절대 못 고치는 종류**(범인=주석). 재건이 깨끗한 주석으로 교체하며 치료.
- **영구 가드**: `cssCommentSanity.test.ts` 신설(브라우저처럼 비탐욕 주석제거 후 떠도는 종료토큰 남으면 실패). 원본에서 검출 성공(PROOF).
- 3-3부터 push 시작(`9fd8133` + `_00-A_PREWORK_GATE` 고정명령 채택).

### 3-4. Settings (화면 단위 프레임 감사 + 앱 전역 정리)
- 스코프 확장 B = **설정 1화면 전체 프레임 감사.** 계정 카드 = 디자인 variant 예외(§5-1) 유지하되 로직·데이터·카피 공통화.
- **앱 전역 §3-1 토큰화** = 안전 스크립트로 간격 속성만 exact-match 414개 치환(값 동일=시각 불변). **769→768 ×6 전부 + max-width 768→767.98 ×13** 경계 정리.
- 1024 압축 버그(테마 3버튼 카드 침범) 사장님 육안 지적 → `flex:0 1 92px` 수정.

### 3-5. strength.css silo 흡수 (헌법 v1.4 §4)
- strength.css(226줄) → index.css 흡수 + **TSX inline 간격 전수 클래스화**(16+파일).
- **Codex 정정 교훈**: CC 검증 정규식이 camelCase 방향속성(marginBottom 등) 누락 → "잔존 0" 오보고를 Codex가 적발·27건 전수 이관. **§7-1 협업이 자가검증 사각을 메움**(은폐 0 = 가점).
- offset raw(절대·sticky·dropdown·tooltip 위치좌표)는 §3-1 간격 비대상·raw 정당.

### 3-6. 정리 패스 (잔여 총집판)
- 분할 없이 한 번에: **A(§6 비-간격 inline 91건→클래스 85개) / D(§5 CoachNotes DOM동일 분기제거 + 6파일 정당 JS유지) / E(§3 stray breakpoint 880·900·600·640·1023 9건→768/1024 정렬, 769 잔존 0).**
- 검증 = 빌드✓·테스트119·스샷 64컷. **3단계(점진 확산) 닫음**(웨어러블 연동만 남김).

## 2. 화면별 검수 게이트·증거 (공통)
- 게이트(`_15` §5): CC 선검토(B-1 실측) → Codex primitive 재사용 매트릭스(B-2) → 사장님 명시 승인 → 코드.
- 증거: 컴바인팩(스샷 전수 360·768·1024·1440·1920 × 다크/라이트 × before/after + diff + self_report + layer2) + Codex 사후검수 + GPT·Cai 외부검수.
- `_00-A_PREWORK_GATE` 고정명령: 매 작업 전 정독+준수 서약(스샷 전수·헌법준수·검수결정·자가 예외판단 엄금).

## 3. 다음
- 마지막 3단계 = 웨어러블 연동 UI(별도 KB 문서) → **3단계 CLOSE**.
- main 반영 = 3-5+3-6 프로비저널 패치(99cc317). 웨어러블 main 패치는 사장님 지시 시.