---
title: "🔍 260522_S-달록v3비교검수리포트 (배포본 vs 목업)"
notion_id: "36822962086881e48f54ebd4a3b274d7"
notion_url: "https://app.notion.com/p/36822962086881e48f54ebd4a3b274d7"
category: "workreport"
parent: "Claude Code 작업보고"
updated: "2026-05-22"
priority: "High"
purpose: "배포본 vs v3fix5 목업 Playwright 종합 비교 검수 — 기능 진척·미적 희석·결정적 버그 도출"
read_when: ["UI작업","검수·QA"]
---

- 작성일: **2026-05-22**
- 작성 도구: Playwright MCP (Claude Code) — screenshot + DOM + console + network 종합
- 배포본 URL: [https://dallog.pages.dev](https://dallog.pages.dev)
- 목업: `docs/dallog_mockup_v3fix5_260520/` (dashboard / history / coach / settings.html)
- viewport: Desktop 1440×900 / Mobile 390×844
- 산출물: 본 리포트 + `docs/260522_v3_review_screenshots/` (17건 PNG) + `docs/260522_v3_handoff_to_ui_fix_context.md` (다음 컨텍스트용 핸드오프)
- 코드 수정 여부: **없음** (검수 전용 컨텍스트)
---
## 1. Executive Summary
배포본은 **기능적 진척은 확실히 있지만 v3 목업의 핵심 톤앤매너(compact·집중감·심플 navigation)에서는 멀어졌다**. 즉 "기능은 좋아졌지만 aesthetic이 희석된" 상태.
### 1-1. 긍정 — 기능적 진척 (vs 0520 리포트)
<table header-row="true">
<tr>
<td>항목</td>
<td>0520</td>
<td>0522</td>
</tr>
<tr>
<td>대시보드 BODY/RUNNING/STRENGTH 탭 전환</td>
<td>단일 칼럼</td>
<td>**3 탭 분리 완료 (F-6d)**</td>
</tr>
<tr>
<td>STRENGTH 데이터 표시</td>
<td>미확인</td>
<td>**실제 기록 + AI 브리프 노출 (F-8)**</td>
</tr>
<tr>
<td>테마 토글</td>
<td>부재</td>
<td>**다크/라이트/시스템 3-state, 계정 설정 안 (F-7)**</td>
</tr>
<tr>
<td>모바일 하단 탭바</td>
<td>부재</td>
<td>**고정 NAV 등장 (대시보드/기록/코치)**</td>
</tr>
<tr>
<td>Markdown 렌더링 컴포넌트</td>
<td>부재</td>
<td>`MarkdownBriefRenderer.tsx` 추가 (단, 연결 미완)</td>
</tr>
</table>
### 1-2. 부정 — Aesthetic 희석 (목업 대비)
<table header-row="true">
<tr>
<td>영역</td>
<td>목업 v3fix5</td>
<td>배포본</td>
</tr>
<tr>
<td>Dashboard 기간 셀렉터</td>
<td>**알약 칩 4개** (전체기간/최근 1개월/최근 1주일/사용자 설정)</td>
<td>**native select 드롭다운 1개** — "관리툴" 느낌의 주원인</td>
</tr>
<tr>
<td>Dashboard 탭</td>
<td>compact tabs-inner (운동 도메인 약 100~150px)</td>
<td>풀폭 균등 분배 **각 330px**</td>
</tr>
<tr>
<td>Dashboard 차트 세로</td>
<td>monthly-bars 90px / vol-bars 90px</td>
<td>canvas **140px / 160px** (약 1.6~1.8배)</td>
</tr>
<tr>
<td>Coach 레이아웃</td>
<td>좌 300px (미니 캘린더 + 가이드) + 우 1fr (브리프 탭)</td>
<td>3-column **335 / 419 / 293** — 미니 캘린더 없음</td>
</tr>
<tr>
<td>Coach 브리프 탭</td>
<td>러닝/체성분/근력 3개</td>
<td>**부재** — 카드 누적 리스트만</td>
</tr>
<tr>
<td>Sidebar Settings</td>
<td>아코디언 + sub-menu</td>
<td>**단일 링크** — sub-menu는 본문 좌측 별도 메뉴 컬럼</td>
</tr>
<tr>
<td>좌측 BI(로고)</td>
<td>(관행상 보조 redirect)</td>
<td>**a/button 부모 없음, onclick 없음, cursor auto** — 클릭 불가</td>
</tr>
<tr>
<td>텍스트 brief Markdown</td>
<td>렌더링 (h2/h3/code-block)</td>
<td>**raw text** (## 그대로, json fence 그대로)</td>
</tr>
</table>
### 1-3. 결정적 버그 (긴급)
1. **C-6 / 수정 로그 400** — `body_records?...updated_at...` + `running_logs?...updated_at...` 모두 400, 콘솔 에러 2건. production DB에 `updated_at` 컬럼 미적용. local에 untracked `migrations/2026-05-22_records_updated_at.sql` 존재.
2. **Coach 브리프 raw Markdown + raw JSON 노출** — 사용자 화면에 json 코드펜스, `tomorrow_workout`, `distance_km`, `run_type`, `intensity`, `key_points` 등 **내부 데이터 키 그대로 보임**. `<div style="white-space: pre-wrap;">` 안에 plain text로 출력. **MarkdownBriefRenderer.tsx는 추가됐지만 coach 카드에 연결되지 않은 상태**.
3. **F-2 모바일 근력 캘린더 셀 폭 비대칭** — 일요일 컬럼 **21px**, 토요일 **92px** (4배 차이). 긴 운동명이 컬럼 폭을 결정. **체성분 탭은 48px 균등** — 동일 grid가 데이터 길이에 따라 폭이 변동. `grid-template-columns: repeat(7, minmax(0,1fr))` 누락 추정.
4. **I-0 /profile 빈 라우트** — Profile.tsx가 local에 추가됐지만 배포본 root children 0.
5. **C-7 /login 재진입 가드 부재** — 0520과 동일.
6. **F-6e /strength-log 빈 라우트** — 0520과 동일.
---
## 2. 핵심 검수 5개 항목
### 2-1. Dashboard UI
- 데스크탑 main 1168px (viewport 1440 − sidebar 272), max-width 1600, dark `rgb(10,10,10)`.
- **탭 폭**: BODY/RUNNING/STRENGTH 각 330.66px 균등 → 목업 compact pill 대비 약 2.5~3배.
- **기간 컨트롤**: native `<select>` (옵션 "전체기간" "2026_마지막 다이어트") — 목업의 4-pill 칩과 거리. **"관리툴 느낌"의 핵심 원인**.
- stat-grid 4개 카드(체중 109.7kg/-0.9kg 등) 가로 배치 OK.
- **차트 세로**: canvas#1 140px + canvas#2 160px → 합계 300px. 목업 90px의 1.6~1.8배.
- STRENGTH 탭 AI 브리프 본문: `# 최근 7일간 근력운동 패턴 분석`이 textContent에 raw `#`로 포함. `h1`/`h2` 태그 0개. **Markdown 렌더 미적용**.
- **모바일 차트**도 동일 140 + 160 = 300px → 모바일 최적화 부재.
- 텍스트 "3일 전26년 5월 19일" — `3일 전`과 날짜 사이 공백 없음 (cosmetic).
### 2-2. History 달력형 UI
- 데스크탑: 2컬럼 grid `405.83 / 662.17` (총 1088). 목업 480/1fr와 비례 일치.
- 데스크탑 캘린더 7×91px **균등**.
- 모바일: 단일 컬럼 + "기록 보기 →" 버튼으로 캘린더 진입.
- **체성분 캘린더**: 7×48px **균등** (정상).
- **근력 캘린더**: 21 / 74 / 92 / 74 / 92 / 74 / 92px — **일요일 셀 21px (터치 미스 위험), 토요일 92px**.
- 가로 스크롤은 발생하지 않음 (390 안에 모든 셀이 들어감) — **그러나 컬럼 폭이 콘텐츠에 의해 결정됨**.
- 원인 추정: `grid-template-columns`에 `minmax(0, 1fr)` 누락 + 셀 내부에 long 텍스트 overflow:hidden 미적용.
- "기록하기 버튼 → 입력 진입" UX는 유지 방향 합리적.
### 2-3. Coach 페이지 (CRITICAL)
- main scrollHeight 데스크탑 **2655px** / 모바일 **3737px** — "AI 관리툴화" 그 자체.
- top-level grid 3-column 335/419/293 (목업 2-column 300/1fr과 다름).
- 미니 캘린더 / wm-chart / guide-textarea / send-area / 브리프 탭 모두 **부재**.
- **브리프 본문 컨테이너**: `<div style="font-size:13px; color:var(--text2); line-height:1.7; white-space: pre-wrap;">` 안에 raw text 통째 출력.
- 사용자에게 노출되는 raw 흔적:
	- `## 체중 증감의 의미 해석` (Markdown heading)
	- `**...**` (Markdown bold)
	- 코드펜스 + JSON 키 `tomorrow_workout` / `run_type` / `distance_km` / `intensity` / `key_points`
- `h1`/`h2`/`h3` 태그 0개. `pre`/`code` 태그 0개.
- 즉 **Markdown 파서를 거치지 않고 plain text로 출력됨**. `white-space: pre-wrap`만 적용되어 줄바꿈만 유지.
- **MarkdownBriefRenderer.tsx가 추가됐으나 CoachNotes.tsx 본문에 연결되지 않은 상태**로 판단.
### 2-4. Settings 페이지
- 사이드바: 대시보드 / 기록 / 코치 / **설정** 단순 4개 a 링크. **설정 sub-menu 부재** (목업은 nav-settings-group 아코디언).
- 본문 좌측: "운영" (피트니스 목표/개인 러닝 설정/근력운동/개인 메모) + "계정 · 로그" (계정 설정/수정 로그) 라벨 그룹 — 목업에 없는 추가 분류.
- 메뉴 버튼 230×39 × 6개.
- F-7 테마 토글: 계정 설정 안에 다크/라이트/시스템 3-state 버튼 + FOUC 방지 inline script 정상.
- **C-6 수정 로그 400 확정**:
	```javascript
GET .../body_records?select=recorded_at,weight_kg,updated_at&order=updated_at.desc&limit=30 → 400
GET .../running_logs?select=recorded_at,distance_km,updated_at&order=updated_at.desc&limit=30 → 400
	```
- 콘솔 에러 2건 동시. 다른 정상 쿼리(`select=...recorded_at.desc`)는 200.
- 모바일: `≡ 메뉴 보기` 햄버거 토글.
- giant expand panel 위험 현재 없음 (모든 섹션이 별도 view).
### 2-5. Layout / BI / Navigation
- 사이드바 폭 272px (목업 동일). 로고 영역 `<img>`만 있음 — **클릭 불가** (a/button 부모 없음, onclick 없음, cursor auto).
- 모바일 헤더 73px (브랜드 + 설정 버튼). 목업의 mobile-ai-btn (✦ AI) **부재**.
- 모바일 하단 탭바: NAV fixed bottom 74px — 대시보드 / 기록 / 코치 3개. **프로필 진입점 0개**.
- /profile: root children 0 (Profile.tsx 미배포).
- /strength-log: root children 0 (0520과 동일).
- /login: 로그인 상태로 진입 시 root children 0.
---
## 3. 추가 검수 항목
<table header-row="true">
<tr>
<td>ID</td>
<td>항목</td>
<td>결과</td>
</tr>
<tr>
<td>C-6</td>
<td>수정 로그 400</td>
<td>**확정 발생**</td>
</tr>
<tr>
<td>C-7</td>
<td>login redirect</td>
<td>**미해결**</td>
</tr>
<tr>
<td>F-6d</td>
<td>dashboard 탭</td>
<td>**OK** (role=tab + aria-selected)</td>
</tr>
<tr>
<td>F-6e</td>
<td>/strength-log redirect</td>
<td>**미해결**</td>
</tr>
<tr>
<td>F-7</td>
<td>theme toggle</td>
<td>**OK** (3-state)</td>
</tr>
<tr>
<td>F-8</td>
<td>strength summary fetch</td>
<td>**OK**</td>
</tr>
<tr>
<td>I-0</td>
<td>profile 진입점</td>
<td>**부재** (sidebar 0 + mobile 0, /profile 빈 라우트)</td>
</tr>
<tr>
<td>I-1</td>
<td>로고 클릭 redirect</td>
<td>**부재**</td>
</tr>
<tr>
<td>F-2</td>
<td>모바일 캘린더 셀 폭</td>
<td>**체성분 OK / 근력 NG (21~92px 비대칭)**</td>
</tr>
<tr>
<td>-</td>
<td>Markdown 렌더링</td>
<td>**미해결** (MarkdownBriefRenderer 미연결)</td>
</tr>
<tr>
<td>-</td>
<td>JSON 노출</td>
<td>**미해결** (`tomorrow_workout` 등 raw 표기)</td>
</tr>
</table>
---
## 4. v3 목업 톤앤매너 적용도
<table header-row="true">
<tr>
<td>톤</td>
<td>적용도</td>
<td>진단</td>
</tr>
<tr>
<td>Compact rhythm</td>
<td>★★☆☆☆</td>
<td>dashboard 차트 비대화·탭 풀폭 분배로 응축감 손실</td>
</tr>
<tr>
<td>집중감</td>
<td>★★★☆☆</td>
<td>탭 분리(F-6d) 성공, 차트 비대화로 한 화면 정보량 ↓</td>
</tr>
<tr>
<td>Pill selector</td>
<td>★☆☆☆☆</td>
<td>dashboard 기간이 native select</td>
</tr>
<tr>
<td>Lime 강조색</td>
<td>★★★★☆</td>
<td>기록하기/탭 active/캘린더 today에 일관 적용</td>
</tr>
<tr>
<td>Mobile calendar</td>
<td>★★★☆☆</td>
<td>체성분 OK, 근력 비대칭</td>
</tr>
</table>
---
## 5. 우선순위별 개선 제안
### P0 — 긴급
1. **C-6 수정 로그 400 해결** — `migrations/2026-05-22_records_updated_at.sql` production 적용 또는 `order=recorded_at.desc` fallback
2. **Coach 브리프 Markdown 렌더링 연결** — MarkdownBriefRenderer를 CoachNotes 브리프 본문에 wire-up. JSON 블록은 숨김 또는 별도 viz 카드로 변환
3. **F-2 근력 캘린더 셀 폭 균등화** — `grid-template-columns: repeat(7, minmax(0, 1fr))` + 셀 `overflow:hidden; text-overflow:ellipsis;`
4. **C-7 /login 가드** — 로그인 상태로 진입 시 `<Navigate to="/dashboard" replace />`
5. **F-6e /strength-log 정리** — 라우트 제거 또는 redirect
### P1 — Aesthetic 회복 (mockup 톤앤매너)
1. **Dashboard 기간 selector → pill 칩 4개 교체**
2. **Dashboard 탭 폭 압축** (각 100~140px)
3. **Dashboard 차트 세로 축소** (90~100px)
4. **Coach 레이아웃 재구성** (좌 300 미니캘린더 + 가이드, 우 1fr 브리프 탭)
5. **로고 클릭 → /dashboard redirect (I-1)**
### P2 — 보강
1. **I-0 프로필 진입점** — sidebar 계정 카드 wrap + /profile 페이지 실배포
2. "3일 전26년 5월 19일" 공백 보정
3. Settings sidebar 아코디언 sub-menu 복원
4. 모바일 ✦ AI 단축 버튼
---
## 6. 정량 측정 요약
### 데스크탑 1440×900
<table header-row="true">
<tr>
<td>페이지</td>
<td>main W</td>
<td>scroll H</td>
<td>canvas</td>
<td>콘솔 에러</td>
</tr>
<tr>
<td>/dashboard (BODY)</td>
<td>1168</td>
<td>~900</td>
<td>140+160</td>
<td>0</td>
</tr>
<tr>
<td>/dashboard (RUNNING)</td>
<td>1168</td>
<td>1082</td>
<td>130+160</td>
<td>0</td>
</tr>
<tr>
<td>/dashboard (STRENGTH)</td>
<td>1168</td>
<td>1022</td>
<td>160</td>
<td>0</td>
</tr>
<tr>
<td>/history</td>
<td>1168</td>
<td>1151</td>
<td>SVG</td>
<td>0</td>
</tr>
<tr>
<td>/coach</td>
<td>1168</td>
<td>**2655**</td>
<td>-</td>
<td>0</td>
</tr>
<tr>
<td>/settings (피트니스)</td>
<td>1168</td>
<td>900</td>
<td>-</td>
<td>0</td>
</tr>
<tr>
<td>/settings (수정 로그)</td>
<td>1168</td>
<td>-</td>
<td>-</td>
<td>**2 (400)**</td>
</tr>
<tr>
<td>/settings (계정)</td>
<td>1168</td>
<td>-</td>
<td>-</td>
<td>0</td>
</tr>
<tr>
<td>/profile</td>
<td>-</td>
<td>0</td>
<td>-</td>
<td>0</td>
</tr>
<tr>
<td>/strength-log</td>
<td>-</td>
<td>0</td>
<td>-</td>
<td>0</td>
</tr>
<tr>
<td>/login</td>
<td>-</td>
<td>0</td>
<td>-</td>
<td>0</td>
</tr>
</table>
### 모바일 390×844
<table header-row="true">
<tr>
<td>페이지</td>
<td>main W</td>
<td>scroll H</td>
<td>bottom-nav</td>
<td>h-scroll</td>
</tr>
<tr>
<td>/dashboard</td>
<td>390</td>
<td>viewport</td>
<td>74</td>
<td>no</td>
</tr>
<tr>
<td>/history body (캘린더)</td>
<td>390</td>
<td>-</td>
<td>74</td>
<td>no</td>
</tr>
<tr>
<td>/history strength (캘린더)</td>
<td>390</td>
<td>-</td>
<td>74</td>
<td>no (단, 셀 21~92px)</td>
</tr>
<tr>
<td>/coach</td>
<td>390</td>
<td>**3737**</td>
<td>74</td>
<td>no</td>
</tr>
<tr>
<td>/settings</td>
<td>390</td>
<td>771</td>
<td>74</td>
<td>no</td>
</tr>
</table>
---
## 7. 다음 컨텍스트 작업 권장 순서
1. **Step 1 (30분 이내)**: C-7 가드 → F-6e 정리 → C-6 마이그레이션
2. **Step 2 (1~2시간)**: MarkdownBriefRenderer 연결 + JSON 처리 → F-2 캘린더 grid 수정
3. **Step 3 (2~3시간 aesthetic)**: 기간 pill 교체 → 탭 폭 압축 → 차트 세로 축소
4. **Step 4 (선택)**: Coach 2-column 재구성 → 로고 redirect → 프로필 진입점
---
## 8. 본 컨텍스트의 한계
- 검수·리포트 전용 — 코드/DB/git 일절 수정 없음
- DB 마이그레이션 실행 권한 없음 → production 적용은 다음 컨텍스트
- screenshot 시각 검증 가능했지만 색감의 미세 차이(lime hue, contrast)는 별도 디자인 리뷰 필요
- 모바일 터치 영역 부족 항목(/coach 펼치기 등)은 본 라운드에서 별도 측정 안 함
---
## 9. 최종 결론
배포본은 0520 리포트의 5개 핵심 페이지 안정성을 유지하면서 **대시보드 탭 / 테마 / 하단 탭바** 등 기능 진척을 이뤘다. 그러나 v3 목업의 톤앤매너 — 특히 **compact period pill / 풀폭 미만 탭 / 압축 차트 / coach 2-column 미니 캘린더 / sidebar 아코디언** — 측면에서는 거리가 멀어졌고, **C-6 400 / Coach JSON·Markdown 노출 / 모바일 근력 캘린더 셀 비대칭** 3가지 결정적 결함이 발견됐다.
다음 수정 컨텍스트의 작업 우선순위는 **P0 5개 → P1 5개**이며, 특히 **(A) dashboard period selector pill 교체, (B) coach MarkdownBriefRenderer 연결 + JSON 분리, (C) 근력 캘린더 grid minmax(0,1fr)** 세 가지가 "aesthetic 회복 vs 결함 제거" 양면에서 가장 큰 임팩트.
---
*Playwright MCP screenshot + DOM + console + network 종합 / 코드·DB·git 미수정*
*로컬 산출물: **`docs/260522_v3_browsing_review.md`** (메인) + **`docs/260522_v3_handoff_to_ui_fix_context.md`** (핸드오프) + **`docs/260522_v3_review_screenshots/`** (17 PNG)*