---
title: 작업보고 — 달록 전체 UI 재설계용 "화면 설명서" 작성
category: workreport
document_type: 작업보고
source_status: published
knowledge_group: 03_history
priority: Normal
purpose: Cai 백지 재설계(B안) 입력자료용 화면 설명서 작성·Codex 4라운드 검수 완료
read_when: UI 재설계 경위·화면 설명서 배경 파악 시
updated: 2026-06-13
work_timestamp: 20260613_141242
source_of_truth: dallog-tools
---

# 작업보고 — 달록 전체 UI 재설계용 "화면 설명서" 작성

## 한 줄 요약
Cai(Claude.ai)가 달록 전체 UI를 **백지에서 재설계(B안)**할 수 있도록, CC가 현재 앱의 실제 화면·라우트·데이터·행동·제약을 전수 조사해 "화면 설명서" 1건을 작성·검수했다(코드·DB 무변경, 문서 산출물만).

## 무슨 작업이었나 (쉬운 설명)
달록 UI를 처음부터 다시 디자인하려면, 디자인을 맡을 Cai에게 "지금 화면이 이렇게 생겼다"가 아니라 **"이 화면은 무슨 일을 하고, 어떤 정보·문구를 담고, 사용자가 뭘 하려 하고, 무엇은 꼭 지켜야 하는지"**만 알려줘야 한다. 현재 모습(픽셀·색·배치)을 적으면 Cai가 원본에 끌려가 새 디자인이 안 나오기 때문이다. 그래서 CC가 코드를 전부 뒤져 **알맹이 4종(하는 일 / 데이터·문구 / 사용자 행동 / 제약)**만 화면마다 정리했다.

## 산출물
- **주 산출물(화면 설명서):** `dallog_git/docs/go_work/260613/dallog_ui_screen_spec_260613.md` (약 77KB)
  - 10개 영역(인증·홈/브리프·기록입력·히스토리/엑셀·리포트연결·설정·요금제/코치챗·소셜·마스터/지원·공통UI) + 부록(전체 라우트 맵·목업 릴레이 권장 순서).
- 메인 명세서(지시 원문): `dallog_git/docs/go_work/260613/cc_ui_brief_request_prompt_260612.md`

## 어떻게 했나 (진행)
1. 영구원칙 원문 + 메인 명세서 로드 → 조사 계획 수립.
2. `src/App.tsx` 라우팅 **전수 확인**으로 화면 목록 확정(추정 목록을 실제 라우트 기준 교정).
3. 화면 그룹별 병렬 조사(9개 영역) — 각 화면의 실물 한국어 카피·상태값·행동·제약을 코드에서 직접 인용 추출.
4. `src/index.css` 토큰·치수 확인(사이드바 272px·헤더 52px·탭바 60px = 명세서 요구 제약값과 일치).
5. 화면 설명서 초안 작성 → **Codex 적대 검수 4라운드**(아래) → 정상 종료.

## 핵심 의사결정 (왜 이렇게 적었나)
- **앵커링 방지가 최우선.** 픽셀·색·레이아웃·컴포넌트 배치는 일부러 배제. 단, 명세서가 "제약"으로 직접 요구한 **치수(272/52/60px)·셸 명칭(사이드바/탭바/헤더)**은 유지(회귀 금지 기능과 결합). 순수 방향 부사어(좌/우/하단)·구성 묘사(오버레이·2단 병렬)는 중립화.
- **근력 리포트 계열은 내부 재정의 금지.** `/strength-report`·`/onboarding/profile`은 별도 명세 확정 영역이라 **진입점·연결만** 적고 내부 신호·패턴·계산은 손대지 않음(영역 E).
- **실물 카피 우선.** 버튼·안내문은 예시가 아닌 코드의 한국어 문자열을 따옴표로 그대로 인용.
- **횡단 구조적 문제의식만 별도 정리(0-7).** 픽셀 불만이 아닌 구조·경험 이슈 8건(알림 수단 혼재·빈/에러 미구분·권한거부 UX 부재·공개범위 카피 4종 비일관·기록입력 깊이 편차·설정 진입 깊이·엑셀 진입점 발견성 등).

## 조사로 확정된 전체 화면(라우트) 골격
- **공개(게이트 앞단):** /login · /signup · /find-account · OAuth 콜백 3종 · /privacy · /terms · /health-consent
- **게이트:** OnboardingConsent(동의 미완) · OnboardingProfile(트레이닝 프로필 미생성)
- **인증 후:** /dashboard · /brief · /strength-report · /onboarding/profile · /log(3탭) · /history(3탭×4보기, 캘린더=보기방식) · /history/excel · /coach(대화·브리프 서브탭) · /coach/subscription · /profile·/profile/edit·/u/:handle · /profile/legacy · /social · /post/:id · /notifications · /settings(8섹션) · /studio(마스터) · /admin(마스터) · /support
- 리다이렉트: /strength-log→/log?tab=strength, /summary→/dashboard, /settings/changelog→/settings

## Codex 협업 검토 결과
- **사전 공유:** 작업 목적(Cai 백지 재설계 입력자료)·원문 의도·검수 관점 9개(라우트 누락·화면 누락·역할 오해·앵커링 유발·근력 내부 재정의·카피 불일치·제약 누락·조사-문구 불일치·입력자료 부적합)를 매 라운드 리마인드.
- **검수 루프 4라운드 (정상 종료):**
  - **1차:** [즉시반영] 6건 — ① Google 콜백 에러상태 오기(실제 에러 UI 없음) ② DemoBlockModal 누락 ③ 레이아웃 배치 부사어 앵커링 ④ F-9↔H-1 프로필 화면 참조 오류 ⑤ 색 hex 과잉 열거 ⑥ 오타("보desc"). [검토후반영] 구현세부 혼재·카피 촘촘(명세서 "카피 우선" 근거로 일부 유지).
  - **2차:** [검토후반영] 1건 — 배치 앵커 표현 잔존. 부분 반영(방향 묘사 중립화).
  - **3차:** 신규 기능성 지적 **0건**(라우트·역할·카피·근력·RLS/요금제 전부 부합 확인).
  - **4차:** 신규 기능성 지적 **0건** — 정상 종료 확정(연속 2차수 0건).
- **반영 결과:** 1차 즉시반영 6건 전건 반영, 2차 앵커링 부분반영.
- **미반영(사유 기록):** ① "사이드바/탭바/헤더" 셸 명칭 유지 = [반려] (명세서 본문이 제약값으로 직접 요구한 승인 어휘 + 회귀금지 기능 결합). ② RPC명·대시보드 카피 상세 유지 = [보류→유지] (명세서가 "실제 카피·제약 우선" 요구). ③ 색/폰트 토큰 상세는 "index.css 직접 참조"로 격리(앵커링 방지).

## 완료 기준 점검
- [영구메모리 Read: O]
- [실제 라우트 전수 확인: O] — src/App.tsx 기준 확정
- [§2 DB 실상태 확인: 해당없음 — 코드·문서 조사로 충분, RLS/요금제 제약은 코드·마이그레이션에서 확인]
- [npm run build: N/A — 코드 무변경(문서 산출물만)]
- [Codex 검수: 4라운드, 정상 종료]
- [회귀: 없음 — 기능 코드 미수정]

## 후속 보강 (사장님 지적 반영 — 같은 날)
- **검증 1차(약관·1회 게이트):** 조건부 UI 63개 전수 스캔 대조 → 약관 동의(필수4+선택 마케팅)·최초 1회 게이트·히든 패널 모두 커버 확인. 빠짐없음 입증용 **부록3(조건부·게이트·히든·1회성 UI 전수 인덱스)** 신설.
- **논리 오류 정정(중요):** "근력 리포트 계열 = 별도 명세 확정·내부 재정의 금지"를 **코드 보호 주석처럼 오해**해 백서에서 근력 상세 리포트(/strength-report)·트레이닝 프로필 온보딩(/onboarding/profile)을 "진입점만"으로 비워뒀던 것을 정정. 이 작업은 **UI 개편용 백서(화면 카탈로그)**이지 코딩·빌드가 아니므로, PR#92로 구현돼 UI 개편에 편입된 두 화면을 **다른 화면과 동일하게 완전 4종으로 기술**(영역 E-1·E-2)했다. "재정의 금지"는 화면 누락 근거가 아니라 "Cai가 신호 체계·설문 문항 등 기능·로직을 새로 발명하지 말 것(시각 디자인은 재설계 대상)"이라는 제약으로 백서 안에 명시.
- **Codex 추가 검수:** ① 명세서 준수 O ② 같은 유형(코드 보호 주석 착각) 다른 누락 없음 [반려] ③ 신규 기능성 지적 0건. [즉시반영] 1건(신호 미산정 게이트 정확화: 관절부하·회복여유만 게이트, 움직임균형 즉시집계) + [검토후반영] 2건(E-2 na 통과 예외·미분류배지 CTA 현재vs목표) 반영.

## 다음 단계
- 화면 설명서를 index.css와 함께 Cai에 전달 → Cai가 영역 단위 목업 릴레이 → 사장님 컨펌 → 컨펌안을 UI 개선 명세서로 발행 → CC 적용.