---
title: "🔍 260623 — UI 프레임 재건 0단계: 현재 UI 진단·증거팩"
category: "workreport"
parent: "Claude Code 작업보고"
document_type: "작업보고"
source_status: "generated"
knowledge_group: "03_history"
priority: "High"
purpose: "본앱 UI 프레임이 왜 재건이 필요한 상태였는지의 측정·증거 기록. breakpoint 11종 혼재·inline 구조성 약 60곳·index.css 6240줄 단일파일 등 '병의 실물'을 수치로 진단한 0단계. 헌법(처방)이 막으려는 문제가 무엇이었는지의 근거."
read_when: ["UI 재건 왜 시작","breakpoint 혼재","inline 진단","index.css 6240줄","0단계 진단","스튜디오 동결 이유"]
updated: "2026-06-29"
work_timestamp: "20260623_120000"
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-23 진단. 상위 SOT = 본레포 `docs/ui_rebuild/_02_CURRENT_UI_AUDIT.md`(진단 원본)·`_01_UI_REBUILD_SOT.md`(0~4단계 정의)·`_00_STUDIO_CONTEXT_FREEZE.md`(스튜디오 동결). ※ 2026-06-29 문서정리로 SOT 경로가 `docs/go_work/ui_rebuild/` → `docs/ui_rebuild/`로 이동됨. 본 문서는 0단계 진단의 KB 작업보고.

## 0. 결론 요약
- **재건의 발단** = 마스터 전용 디자인툴(/studio)을 만들려는데, 본앱 UI 프레임이 정규화돼 있지 않아 "도구가 얹힐 탄탄한 주춧대"가 없었다. → **스튜디오 작업 일시 동결**(폐기 아님) 후 **본앱 UI 프레임부터 재건**으로 방향 전환.
- 0단계는 **조사·증거팩만**. 코드·CSS·스튜디오 무수정(측정만). 완료 기준 = 외부 LLM이 검수 가능한 증거팩(빌드·코드수정 아님).
- 진단 결과(측정값) = **breakpoint 11종 혼재 / 반응형 JS·CSS 이중제어 / inline 구조성 약 60곳 / index.css 6240줄 단일파일 / 기록 헤더 깨짐 버그**. 이것이 헌법(1단계)이 막으려는 "병의 실물".
- Codex(Cdx) 독립 검수로 수치 전부 재현·확인 → **조건부 통과**(6항목 보완) → 0단계 증거팩 미해소 0건으로 닫음.

## 1. 재건 순서 정의 (0→4단계)
| 단계 | 내용 |
|---|---|
| 0 | 조사·진단·증거팩 (코드 무수정) |
| 1 | 레이아웃 헌법 + primitive 제정 |
| 2 | 파일럿 1화면 재건 (History) |
| 3 | 점진 확산 (전 화면) |
| 4 | 스튜디오 재개 (도구를 정규화된 프레임 위에서) |

> 핵심 = **"순서를 거꾸로 하면 누더기가 된다"**. 규칙(헌법) 없이 도구(스튜디오)부터 얹은 게 0단계 이전의 실패. `_00`이 그 실패 사례의 영구 사료.

## 2. 진단 측정값 (병의 실물)
- **P1. breakpoint 11종 혼재** (560~1200px). 실질 경계군 ≈8~9개(768/769 등 1px 쌍 포함). → 헌법 §3에서 768/1024 2단으로 통일 예정.
- **P2. 반응형 이중 제어**: JS(`useMediaQuery` ×3)와 CSS(`@media` 42개)가 같은 반응형을 이중으로 제어.
- **P3·P4. 레이아웃 유틸 비일관**: stack/hstack/row/card 유틸이 정의돼 있으나 inline·화면별 변종으로 일관 적용 안 됨. inline에 `display:flex` 등 **구조성 inline**까지 포함.
- **P5. absolute/fixed 36곳** (누더기 신호). ※ `!important` 6곳은 4곳이 접근성 표준이라 누더기 신호 약함(Cdx 정정).
- **P6. 기록 헤더 깨짐**: `hist-pagehead__actions` 공유 클래스 + `@media 560 {flex:1 0 100%}`가 헤더를 깨뜨림. → 헌법 §8 primitive(PageHeader·ActionRow·TruncateText)로 해소 예정.
- **inline 수치 정의(혼동 방지)**: `334` = 전체 inline `style={{` 호출 수 / `≈60` = 본앱(studio 제외) 레이아웃 **구조성** inline 블록. 두 수치는 다른 지표(전체 호출 vs 구조성 블록)이며 모순 아님.

## 3. 측정 방법론 교훈 (Cdx 2차에서 교정)
- **측정 단위 = 페이지 → 컴포넌트 트리로 교정.** "Dashboard·Profile inline 0 = 참고 모델" 가설은 **철회**. 페이지 파일 0은 얇은 wrapper일 뿐, 화면 inline은 **import 트리로 합산**해야 함(Dashboard 화면 = 페이지0 + BodySection5 + RunningSection17 + StrengthSection36 = 58곳, 오히려 최다급).
- 이 교훈으로 파일럿 후보(B5)를 "화면 트리 합산 inline" 기준으로 재선정.

## 4. 다음 (1단계)
- 진단 → 처방. **breakpoint 혼재 → 헌법 §3 768/1024 / inline 구조성 → §6 빨강·초록 2색 / 헤더 깨짐 → §8 primitive 3종.**
- 1단계 = 레이아웃 헌법 초안 작성. (헌법 진화사는 별도 KB 문서 참조: `UI프레임재건-레이아웃헌법-진화사-v1.0~v1.4`.)