---
title: 작업보고 — 달록 UI 전면개편(목업 verbatim 이식 · 2에이전트 병렬모드)
category: workreport
document_type: 작업보고
source_status: published
knowledge_group: 03_history
priority: Normal
purpose: 달록 전체 UI를 B안 목업 기준으로 전면 이식 — 2에이전트 병렬모드로 진행
read_when: UI 재설계 이식 이력·verbatim 이식 원칙 확인 시
updated: 2026-06-16
work_timestamp: 20260616_120000
source_of_truth: dallog-tools
---

# 작업보고 — 달록 UI 전면개편 (목업 verbatim 이식 · 2에이전트 병렬)

## 한 줄 요약
달록 전체 화면을 백지 재설계(B안) 목업 기준으로 전면 이식했다. **목업 HTML 코드 원문을 그대로 옮기는(verbatim) 이식**이 원칙이며, 메인 에이전트 + 서브 에이전트(CC) **2에이전트 병렬모드**로 영역을 나눠 진행했다.

## 배경 (재설계 파이프라인)
- 6/13 CC가 작성한 "화면 설명서"(앵커링 방지·실물 카피 중립화) → Cai(Claude.ai)가 백지 재설계 목업 릴레이 → 사장님 컨펌 → UI 개선 명세(백서·01공통·S1지정서) 발행 → CC가 코드 이식.
- 원칙(사장님 확정): "분위기 정리" 금지. 구조·class·CSS 수치·타이포·색을 임의 변경하지 않고, **목업 원문 그대로 + 기능만 바인딩**. Codex는 "원문 대비 일치" 검수.

## 진행 (영역별 이식 — 2에이전트 병렬)
- **브리프 총괄 리포트**: 목업 03 원문 8섹션 단일 페이지(.dash-page 정본 재사용) — 체성분 스냅샷·목표 진행률·체중추이·러닝요약·근력신호 3종·인사이트·액션·푸터. 도메인탭·날짜네비 폐기 → 세그먼트+pills. BriefBody(view-model 공용 순수렌더)로 추출 → 라이브=공개스냅샷 일치 토대.
- **피트로그 STRENGTH**: 목업 03 — 부위자극균형·움직임경향·신체감지 신호 3종·AI 한 줄·상세리포트. computeStrength 신호 재사용·실데이터.
- **SUMMARY 타일**: 목업 05 — 체성분·러닝(sum-grid2/sum-tile, 좋아짐 의미색·자동배지), 근력(str-sum-grid 7카드: 세션·부위농도 heat-row·1RM Epley·움직임경향·유형판별·AI브리프·커스텀). computeBrief/집계 무변경.
- **E-1 근력리포트**: 목업06 원문 이식 — str-* 폐기, 목업 클래스(sig-card/bar-row/pat-chip/par-row/cmp-grid/evi) 그대로 채택+CSS 이식, 신호 산출 로직 무변경(Codex 3회 검수·이식 일치).
- **E-2 트레이닝 프로필**: 목업06 원문 이식(q-block/chip/free-box/ai-card/pol-chip/ver-row).
- **공통 다이얼로그 4종**: 목업 .dlg 정본 구조로 이식.
- **접근성(Area6 J)**: 전역+코치 input focus-visible 링.
- **설정(P3-F 운영그룹)**: 목업 07 부분컨펌 — card-sub 부제·coach-hint AI안내·F-5 신명칭(코치 저널/주간 코치멘션).
- **코치/구독 UI(에이전트2 G계열)**: G-1 코치 대화 상단바 4버튼+사용안내/대화록 팝업+모바일 시트, G-3 구독 단발자동/자동충전 토글버튼화(체크박스 금지), G-4 PlanShopPanel 준비중→활성([이 플랜 선택]), G-2 주간 코치멘션 하이라이트 감지 → 저널 '남길까요?' 제안 카드.
- dead code 일괄 정리(구 body 그리드·근력 차트 클러스터 등 Codex 제거안전 확인분).

## 핵심 의사결정
- **목업 verbatim**: 충실도(폰트·SVG·토큰·clamp) 강제. 임의 "개선" 금지.
- **2에이전트 병렬**: 메인 에이전트가 영역 분배·총괄, 서브 에이전트(CC)가 영역 이식. /loop 무제한으로 영역 큐 소화.
- **demo 선적용→검증→main 패치**: 데모(dallog-demo)에서 충실도 확인 후 본버전.
- 명세서 승인 어휘(셸 명칭 등)·실물 카피는 회귀금지 결합으로 유지.

## 스크린샷
- 개편 후 현재 화면(after): 본 문서와 함께 `images/`에 dallog.kr 주요 화면(브리프·피트로그·기록·코치·설정) 캡처 첨부.
- 개편 스펙/목표(before·target): 본레포 `docs/go_work/spec06_screenshots/` 및 목업 검수용 HTML 참조(KB 미반영, 본레포 보관).
- 비고: demo·main 모두 개편 UI가 이미 적용돼 개편 '직전' 라이브 캡처는 불가 → 스펙 캡처·목업을 before/target 자료로 대조.

## 미해결 / 다음 (당시)
- 잔여 영역 이식 + 사후 Codex 더블체크. 이후 history/dashboard 추가 재개편·strength Q시리즈·M축 재설계로 이어짐(별도 작업보고).