---
title: "MCP브라우징 보고서"
notion_id: "36622962086881188ea4d4548a76dc0f"
notion_url: "https://app.notion.com/p/36622962086881188ea4d4548a76dc0f"
category: "report"
parent: "달록 개발 현황"
updated: "2026-05-26"
priority: "Medium"
purpose: "Playwright MCP 시각 검증 기반 UI 목업 비교·적용 우선순위 보고서(v2, 32컷 임베드) + 셀모드 부록"
---

이 페이지는 Claude Code가 Playwright MCP 브라우징을 통해 달록 앱의 실제 화면과 동작을 확인한 뒤 작성한 UI/기능 브라우징 리포트이다. **2026-05-21에 v2(시각 검증 완료)로 본문이 교체되었다.** 이전 v1(DOM 수치 기반) 본문은 하위 페이지로 보관되어 있다.
> 📌 **이미지 32컷 자동 임베드 완료** (2026-05-21 추가): 본 보고서의 시각 증거 32컷은 [catbox.moe](http://catbox.moe)에 자동 업로드되어 본문 부록 A 갤러리에 임베드되었다. 본문 내 인용블록의 `📷 시각 증거 자리:` 표기는 부록 A 갤러리의 해당 파일을 가리킨다. 로컬 원본은 `mcp_reports\_assets\260521_ui_comparison\current\` 에 보관.
---
# 달록 UI 목업 비교 및 적용 우선순위 보고서 (v2 — 시각 검증 완료)
- 작성일: 2026-05-21
- 비교 대상: 배포중인 달록(A/C) vs [Claude.ai](http://Claude.ai) 최신 목업(B, dallog_mockup_v3fix5_260520)
- 작성 환경: 서브 업무환경 (집) — **Playwright MCP 시각 검증 완료 (2026-05-21)**
- 코드 수정 여부: 없음 / git 작업: 없음 / Notion 업로드: 본 v2 발행 단계
- 산출물 파일: `mcp_reports/달록_UI_목업비교_적용우선순위_v2_260521.md`
- v1 대비 변경: 시각 검증 32컷 첨부 + 픽셀 실측 반영 + 일부 판단 수정 (모바일 하단 탭바 "부재" → "부분 구현")
---
## 1. 보고서 목적
본 v2 보고서는 v1(2026-05-20 작성, DOM 수치 기반)을 **Playwright MCP 시각 검증 결과로 보강**한 개정판이다. v1에서 "시각 검증 미수행"으로 유보했던 항목들 — 라임 강조색 실제 적용, 모바일 하단 탭바 실재 여부, /coach Markdown raw 노출, 모바일 터치 영역 실측, /strength-log 빈 화면 실측 — 을 시각 캡처와 픽셀 실측으로 확정한다.
비교 대상·기준·구조는 v1을 유지하되, 각 절에 시각 증거 이미지를 첨부하고, 시각 검증 결과로 v1 판단이 수정된 항목은 본문에 명시한다.
---
## 2. 참고 자료 및 확인 범위
### 참고 자료
- **A. Notion MCP 브라우징 보고서** (2026-05-20, Playwright MCP DOM 기반) — v1과 동일
- **B. dallog_mockup_v3fix5_**[**260520.zip**](http://260520.zip) (2026-05-21 수신, 5개 파일) — v1과 동일
- **C. 실서비스 **[**dallog.pages.dev**](http://dallog.pages.dev) (테스트 계정: mster / qwer1234)
	- **v2 신규: Playwright MCP 시각 검증 32컷 수행 (2026-05-21, 본 환경)**
	- Viewport 2종: Desktop 1440×900 / Mobile 390×844
	- 라우트 7개 × 주요 섹션·탭 모두 캡처
	- 콘솔 오류, 픽셀 측정, 색상 적용 분포 측정 병행
### 확인 범위
- v1: 정적 HTML/CSS + A 보고서 DOM 수치
- **v2 추가: 실서비스 라이브 캡처 32컷 + 본 환경에서 직접 측정한 픽셀/색상 수치**
- 본 환경에서 캡처한 자산: `_assets/260521_ui_comparison/current/` (총 32컷)
- 실제 저장/삭제/전송·git/Notion 업로드 미수행 (v1과 동일) — **분석 전용 리포트**
---
## 3. 현재 배포 UI 요약 (시각 검증 완료)
### 3-1. 정보 구조 (데스크탑 1440 viewport 실측)
- 좌측 고정 사이드바 **272px** + 우측 메인 (max-width 1600px, padding L/R 40px)
- 1440 viewport에서 사이드바를 뺀 메인은 실제 **1164px** 표시 → max-width 1600 한계 미도달
	- max-width 1600 한계는 **1920+ 모니터에서만 트리거됨**
- `/log`만 max-width 600px 좁은 단일 컬럼 — 입력 페이지 의도된 UX (v1 동일)
- 768px 이하에서 사이드바 즉시 숨김 → 모바일 헤더 + 하단 탭바 노출
> 📷 **시각 증거 자리:** `dashboard-desktop-body.png` — 대시보드 BODY 데스크탑
>
> 사이드바 측정값: width 272px, bg `rgb(13,16,24)` ≈ `#0d1018` (목업 `--bg #0c0f18`와 거의 동일)
### 3-2. 모바일 구조 — **v1 판단 부분 수정**
- v1: "하단 탭바 부재"
- **v2 시각 검증 결과: 하단 탭바 부분 구현됨** (3개: 대시보드 / 기록 / 코치)
- 상단 banner에 "달록 PaceLog" 로고 + "설정" link 노출
- 입력(`/log`) 진입점은 하단 탭바에 없음 → 별도 동선 필요
> 📷 **시각 증거 자리:** `dashboard-mobile-body.png` — 대시보드 모바일 (하단 3-탭 navigation 확인)

| 진입점 | 데스크탑 | 모바일 |
|---|---|---|
| 대시보드 | 사이드바 | 하단 탭바 ✓ |
| 기록 | 사이드바 | 하단 탭바 ✓ |
| 코치 | 사이드바 | 하단 탭바 ✓ |
| 설정 | 사이드바 | 상단 banner의 link (탭바 미포함) |
| 입력(/log) | 사이드바 + /history "기록하기" 버튼 | 상단 banner 없음, 별도 진입 |

### 3-3. 페이지별 상태 (시각 검증 결과 추가)
| 라우트 | 상태 | 시각 검증 메모 |
|---|---|---|
| `/dashboard` | 정상 | BODY/RUNNING/STRENGTH 3-탭 + 4개 메트릭 카드 + 차트 2개. 라임 톤 정상 적용 ✓ |
| `/history` | 정상 | SUMMARY 카드 + 도메인 탭(체성분/러닝/근력) + 뷰 토글(달력/큰썸네일/한줄 자세히) 모두 동작 ✓ |
| `/coach` | 정상 | **`## 체중 증감의 의미 해석...` raw `##` Markdown 노출 시각 확인 ✓** |
| `/log` | 정상 | 600px 단일 컬럼 + 도메인 탭(체성분/러닝/근력) + 라임 저장 버튼 ✓ |
| `/settings` | 정상 (이슈 신규) | **"수정 로그" 클릭 시 Supabase 400 에러 2건 발생 — v2 신규 발견** |
| `/strength-log` | **빈 화면** | **무한 splash 화면 — 로고 + "달록" 텍스트만 표시, React 마운트 후에도 라우트 컴포넌트 미렌더링 ✓** |
| `/login` | 정상 (미로그인) | 미로그인 캡처 정상. 재진입 가드 별도 검증 미수행 |

> 📷 **시각 증거 자리:**
> - `coach-desktop.png` — /coach 데스크탑 raw Markdown 노출 (두 번째 카드에 `## 체중 증감의 의미 해석` `## 최근 체성분 흐름` 등 헤더가 평문으로 노출됨)
> - `strength-log-desktop.png` — /strength-log 데스크탑 빈 화면
> - `strength-log-mobile.png` — /strength-log 모바일 빈 화면
### 3-4. 모바일 터치 영역 (실측 — Playwright bounding rect)
v1은 A 보고서 인용. v2는 본 환경에서 직접 측정.
| 위치 | 측정값 (W × H) | WCAG 권장 44px | 판단 |
|---|---|---|---|
| /coach 펼치기 버튼 | 50 × **23** px | ✗ | 높이 21px 부족 |
| /coach 접기 버튼 | 40 × **23** px | ✗ | 높이 21px 부족 |
| /coach 수정 버튼 | 40 × **23** px | ✗ | 높이 21px 부족 |
| /coach 삭제 버튼 | 40 × **23** px | ✗ | 높이 21px 부족 |
| /log 저장 버튼 | 526 × **40** px | ✗ (간소) | 높이 4px 부족 |

> 측정 비고: 모바일 viewport(390px)와 데스크탑 viewport(1440px) 모두 동일 픽셀로 측정 → 동일 컴포넌트가 viewport와 무관하게 23px 높이를 유지. 모바일 사용자에게 특히 불리.
### 3-5. 디자인 완성도 (라임 #c8f135 적용 분포 — 실측)
- v1: "라임 토큰 의도는 확인되나 시각 검증은 별도 필요"
- **v2 실측: 라임 #c8f135이 단일 페이지에서 76건 적용** (color/background/border-* 합산)
	- 사이드바 DALLOG/PACELOG 텍스트, 헤더 텍스트, 탭 active 상태, 저장 버튼 배경, 캘린더 강조 셀, 차트 라인 등
- /log 저장 버튼: 배경 `rgb(200,241,53)` = `#c8f135`, 텍스트 `rgb(10,10,10)` — 라임 톤 의도된 디자인 확인 ✓
> 📷 **시각 증거 자리:** `log-desktop-body.png` — /log 데스크탑 (우측 하단 라임 저장 버튼)
### 3-6. 콘솔 오류 (시각 검증 중 수집)
- /dashboard, /history, /coach, /log, /strength-log, /login: 오류 0건
- /settings → **"수정 로그" 클릭 시 Supabase 400 에러 2건 신규 발견**:
	- `body_records?select=recorded_at,weight_kg,updated_at&order=updated_at.desc&limit=30` → 400
	- `running_logs?select=recorded_at,distance_km,updated_at&order=updated_at.desc&limit=30` → 400
- 원인 추정: `updated_at` 컬럼이 PostgREST에 노출되지 않거나 인덱스/권한 누락
- v1 미발견 항목 → **v2에서 P1으로 신규 추가 (P1-7)**
---
## 4. 목업 UI 요약
(v1 4절 내용 그대로 유지 — 정적 HTML 분석 결과는 시각 검증과 무관하게 동일)
### 4-1. 파일 구성
- HTML 4종(dashboard / history / coach / settings) + 공유 CSS(common.css) + 공통 스크립트(_shared.js)
- 사이드바·모바일 헤더·하단 탭바 마크업이 각 HTML에 복제 — **정적 데모 한계, React 컴포넌트화 필수**
### 4-2. 디자인 토큰 (common.css `:root` 21종)
- 배경 4단계: `--bg #0c0f18` / `--bg2 #121624` / `--bg3 #080b12` / `--bg4 #0f1320`
- 라임 강조 4단계: `--lime #c8f135` / `--lime2 ~0.10` / `--lime3 ~0.06` / `--lime4 ~0.18`
- 보조 컬러 4종: `--orange #e07a50` / `--blue #6b9eff` / `--green #56e8a8` / `--purple #a78bfa`
- 텍스트 4단계: `--text1 #eef2ff` / `--text2 0.65` / `--text3 0.38` / `--text4 0.22`
- 사이드바: `--sb-w 272px` / `--sb-w-col 66px`
- 페이지별 max-width: `--mw-dash 1000` / `--mw-hist 1320` / `--mw-coach 1200` / `--mw-set 1100`
> 시각 검증 결과: 현재 사이드바 bg는 `rgb(13,16,24)` ≈ `#0d1018` — 목업 `--bg #0c0f18`와 거의 동일 → **컬러 톤은 이미 목업 방향**. 토큰화 작업은 hex 산재 정리·라이트 모드 준비 의미.
### 4-3 ~ 4-5
(v1과 동일 — 데스크탑 2-컬럼 레이아웃, 62px 하단 탭바, AI 브리프 Markdown 가정 마크업)
---
## 5. 현재 UI 대비 목업의 주요 개선점 (시각 비교 추가)
### 5-1. 정보 구조 — 페이지별 max-width 분리
- 현재: max-width 1600 일률 (1440 viewport에서는 1164px 실표시, 1920+에서만 1600 도달)
- 목업: dashboard 1000 / history 1320 / coach 1200 / settings 1100
- **v2 보강 판단**: 1440 모니터에서는 시선 분산이 v1 추정만큼 심하지 않음. 1920+ 모니터에서 효과 큼 → P1-2 우선순위 유지하되 "1920+ 환경 대응"으로 명시
> 📷 **시각 증거 자리:** `dashboard-desktop-body.png`
### 5-2. /history 2-컬럼 — SUMMARY와 LIST 동시 인지
- 현재: 단일 컬럼. 상단 SUMMARY 카드 + 하단 LIST(달력/큰썸네일/한줄 자세히 3종 뷰 토글). 스크롤하면 SUMMARY가 사라짐
- 목업: 좌 SUMMARY 480px + 우 LIST 동시 노출
- **v2 보강**: 실제로 /history는 SUMMARY → LIST 수직 배치가 잘 정돈되어 보임. 단점은 스크롤 시 SUMMARY 사라짐 → 2-컬럼 시 sticky 처리 효과 큼
> 📷 **시각 증거 자리:** `history-desktop-body-calendar.png` / `history-desktop-body-thumbnail.png` / `history-desktop-body-list.png`
### 5-3. /coach 2-컬럼 — 컨텍스트 패널 상시 노출
- 현재: 시각화 브리프 1개(상단) + 텍스트 브리프 리스트 (12개) + 우측 "✦ AI 브리프 / AI 브리프 지침" 카드
- 목업: 좌 300px 미니캘린더 + 체중차트 + AI지침 / 우 도메인별 탭 브리프
- **v2 보강**: 현재 /coach 우측에 이미 "✦ AI 브리프" 패널 + "AI 브리프 지침 (등록됨)" 인디케이터가 있음 → 목업의 좌측 컨텍스트 패널 컨셉과 부분 일치. 도메인 분리만 추가하면 됨
> 📷 **시각 증거 자리:** `coach-desktop.png` (우측 ✦ AI 브리프 패널 + AI 브리프 지침 카드 확인)
### 5-4. AI 브리프 Markdown 렌더링 — **v2 시각 검증 확정 ✓**
- 현재: `## 체중 증감의 의미 해석 7일간 109.9kg에서 109.7kg으로 0.2kg 감소했지만...` raw `##` 그대로 평문 노출. 본문 뒷부분에는 ` `json ... ` ` 코드블록도 그대로 텍스트로 노출됨
- 목업: h3/ul/li/strong CSS 렌더링 가정
- **v2 보강**: 시각 확인 완료. raw Markdown 노출이 v1 추정보다 더 심각 — JSON 코드블록까지 노출. Markdown 파서 + 코드블록 처리 필수
> 📷 **시각 증거 자리:** `coach-desktop.png` — 펼친 카드 본문에 `## ...` 5개 헤더 + ` `json ` 블록 그대로 노출
### 5-5. 모바일 하단 탭바 도입 — **v1 판단 수정**
- v1: "현재 하단 탭바 부재"
- **v2 시각 검증: 현재 하단 탭바 3개(대시보드/기록/코치) 이미 존재**
- 목업: 동일하게 3개 (대시보드/기록/코치)
- **v2 새 판단**:
	- 현재와 목업의 하단 탭바 구성이 거의 동일 → P1-1 작업 부담 감소
	- 단, 현재 active 색상이 라임 톤인지 시각 확인 필요 (캡처에서는 단색 톤으로 보임)
	- "설정"이 banner link로만 노출되어 모바일에서 한손 접근 어려움 → 4번째 탭 추가 또는 banner 유지 결정 필요
	- 입력(/log) 진입점이 모바일에서 명확하지 않음 (banner·탭바 모두 없음) → /history의 "기록하기" 버튼 외 동선 부재
> 📷 **시각 증거 자리:** `dashboard-mobile-body.png` (하단 3-탭 nav 확인)
### 5-6. 컬러 토큰 시스템화
- 현재: 라임 #c8f135 76건 활발히 적용 ✓ (사이드바 텍스트, 저장 버튼, 탭 액티브 등 일관 사용 확인)
- 목업: 21종 CSS 변수로 토큰화
- **v2 보강**: 현재도 단일 라임 hex로 일관 사용 중 → 추가 작업은 hex를 CSS 변수로 외부화하는 정도. 작업 비용은 v1 추정보다 낮음
### 5-7. 사이드바 collapsed 모드 (66px)
- 현재: 사이드바 272px + "사이드바 축소 ◀" 버튼 존재 → 이미 일부 구현
- **v2 보강**: 캡처에서 "사이드바 축소" 버튼 확인 → collapsed 모드가 이미 구현되어 있을 가능성. localStorage 키 확인 필요 (시각 검증 미수행)
> 📷 **시각 증거 자리:** (모든 데스크탑 캡처에서 사이드바 하단 ◀ 버튼 보임)
### 5-8. 설정 사이드바 아코디언 + URL hash 라우팅
- 현재: 좌측 운영(피트니스 목표/개인 러닝 설정/근력운동/개인 메모) + 계정·로그(계정 설정/수정 로그) 2-그룹 사이드바
- 캡처상 URL은 클릭해도 `/settings` 유지 → URL hash 라우팅 미구현 확인
- 모바일은 "≡ 메뉴 보기" 햄버거 → 우측 패널 펼침 (3단계)
> 📷 **시각 증거 자리:** `settings-desktop-fitness.png` / `settings-mobile-fitness.png`
### 5-9. 도메인 분류 일관성 — BODY/RUNNING/STRENGTH
- 현재 캡처 검증: /dashboard는 BODY/RUNNING/STRENGTH, /history와 /log는 체성분/러닝/근력 → **명칭 불일치 시각 확인 ✓**
- 목업: 4개 페이지 동일 명칭
- **v2 보강**: 한글/영문 표기 차이만 통일하면 됨. tab semantic 부여는 별도
### 5-10. 러너 SVG 심볼 + 라임 액티브
- 현재 캡처: 사이드바 좌상단 러너 아이콘 + DALLOG (라임) / PACELOG (라임) 텍스트 확인 ✓
- 모든 페이지에서 동일 노출
---
## 6. 현재 UI에서 유지해야 할 장점 (v2 시각 확인)
### 6-1. /log 600px 단일 컬럼 입력 UX ✓
- 시각 확인: 도메인 탭(체성분/러닝/근력) 상단 + 폼 + 라임 저장 버튼 526×40px
- 의도된 좁은 컬럼이 모바일에서도 자연스럽게 풀너비 전환
> 📷 **시각 증거 자리:** `log-desktop-body.png` / `log-mobile-body.png`
### 6-2. /history 멀티 뷰 토글 ✓
- 시각 확인: 달력 / 큰썸네일 / 한줄 자세히 3종 모두 정상 동작 (3컷 캡처 완료)
### 6-3. 다중 시각화 토글 (평균페이스 환산 / 평균심박 / 케이던스) ✓
- /history 러닝 탭에 3종 토글 버튼 + SUMMARY 차트 확인
### 6-4. 캘린더 셀의 일별 데이터 직접 표시 ✓
- 시각 확인: /history 체성분 달력 — 일별 체중 + 골격근 + 체지방 + BMR 표시
- /history 러닝 달력 — 일별 거리 + 런타입 + 페이스 + 심박 표시
- **현재 우위 유지 필수**
### 6-5. 사이드바 사용자 카드 + AI 액션 ✓
- 시각 확인: 사이드바 하단에 "M / master / 사용자" 카드 + "사이드바 축소 ◀" 버튼
### 6-6. 기본 안정성
- v2 시각 검증 중 가로 스크롤 0건, 콘솔 오류는 /settings 수정 로그 진입시 2건 외 0건
- **v2 신규 이슈: /settings 수정 로그 Supabase 400 에러** → P1-7로 추가
---
## 7. 데스크탑 UI 비교 분석 (시각 검증 ★ 표시)
### 7-1. 항목별 비교표
| 항목 | 현재 (A/C) | 목업 (B) | 판단 |
|---|---|---|---|
| 사이드바 폭 ★ | **272px 실측** ✓ | 272px + collapsed 66px | 목업 우위 — collapsed 작동 여부 코드 확인 필요 |
| dashboard max-width ★ | **1600px (1440 viewport에서는 1164px 실표시)** ✓ | 1000px | 목업 우위 — 1920+에서 효과 큼 |
| history 레이아웃 | 1600 단일 컬럼 | 1320 2-컬럼 | 목업 우위 — sticky 효과 큼 |
| coach 레이아웃 | 1600 단일 컬럼 + ✦ AI 우측 패널 일부 ★ | 1200 2-컬럼 | 목업 약간 우위 — 도메인 분리 추가 |
| settings 레이아웃 ★ | **URL 미변경 시각 확인** ✓ | 1100 + hash 라우팅 | 목업 우위 |
| 도메인 탭 일관성 ★ | **BODY/RUNNING/STRENGTH vs 체성분/러닝/근력 명칭 불일치 시각 확인** ✓ | BODY/RUNNING/STRENGTH 통일 | 목업 우위 |
| AI 브리프 Markdown ★ | **raw `##` • \`json 블록 노출 확인** ✓ | h3/ul/li/strong 렌더링 | **목업 우위** |
| 라임 강조색 적용 ★ | **#c8f135 76건 일관 사용 확인** ✓ | 동일 라임 토큰 | **비등** — 이미 목업 방향 |
| 사이드바 bg 톤 ★ | **rgb(13,16,24) ≈ #0d1018** ✓ | #0c0f18 | **거의 동일** |
| 카드 메인값+델타 | `109.7kg -0.9kg` 일관 ✓ | 동일 패턴 | 비등 |
| 1920+ 좌우 여백 | 좌272+메인1600=1872, 여백 48px | 좌272+메인1000=1272 | 목업 우위 |

(★ = v2 시각 검증으로 v1 추정이 확정 또는 수정된 항목)
### 7-2. 데스크탑 핵심 결론 (v2 보강)
와이드 컬럼(1600) 기조의 시선 분산 문제는 **1920+ 모니터에서만 명확히 발생**하고 1440에서는 자연스럽게 1164px로 제한된다. 따라서 페이지별 max-width 토큰 분리(P1-2)는 1920+ 모니터 사용자 비율에 따라 우선순위 가중치를 조정할 수 있다.
라임 톤·사이드바 bg 톤은 이미 목업과 거의 동일한 방향으로 구현되어 있어 **컬러 토큰화(P1-4)는 시각적 변화보다 코드 관리·라이트 모드 준비 의미가 더 크다**. /coach Markdown raw 노출은 시각 확인 결과 `json` 코드블록까지 평문 노출되어 v1 추정보다 더 시급 → P1-3 우선순위 상향.
---
## 8. 모바일 UI 비교 분석 (시각 검증 ★ 표시)
### 8-1. 항목별 비교표
| 항목 | 현재 (A/C) | 목업 (B) | 판단 |
|---|---|---|---|
| 모바일 헤더 | banner (달록 PaceLog + 설정 link) | 52px 헤더 + ✦ AI / 설정 | 비등 — 액션 수만 차이 |
| **하단 탭바 ★** | **3-탭(대시보드/기록/코치) 실재 확인** ✓ | 62px 3-탭 (대시보드/기록/코치) | **거의 동일 — v1 "부재" 판단 수정** |
| /history 1컬럼 재구성 ★ | **SUMMARY → LIST 수직 자동 재배치 확인** ✓ | 동일 | 비등 |
| /coach 1컬럼 재구성 ★ | **본문 정상 노출 확인** ✓ | 좌측 컨텍스트 패널 모바일 숨김 | 비등 |
| /coach 액션 버튼 ★ | **펼치기/접기/수정/삭제 23px 높이 실측 ✗** | 별도 명시 없음 | **둘 다 보강 필요** |
| /log 저장 버튼 ★ | **40px 높이 실측 — 4px 부족** | form-input 풀너비 + 패딩 10px | 둘 다 보강 필요 |
| 설정 진입 동선 ★ | **banner의 "설정" link → 햄버거 메뉴 펼침** | 상단 칩 nav 또는 하단 탭 + 설정 | 목업 약간 우위 — 한손 접근성 |
| 모바일 입력 풀너비 | /log 540 × 40 풀너비 (수정 후) | 동일 | 비등 |
| safe-area-inset 처리 | 미확인 | 미명시 | **둘 다 보강 필요** |
| 가로 스크롤 | 없음 (시각 확인) ✓ | 없음 | 비등 |

### 8-2. 모바일 핵심 결론 (v2 보강 — v1 대비 변경)
**v1 핵심 결론 수정**: v1에서는 "모바일 하단 탭바 부재가 가장 큰 약점"이라고 단정했으나, **v2 시각 검증 결과 하단 탭바는 이미 3개(대시보드/기록/코치)로 구현되어 있다**. 따라서 P1-1의 작업 성격이 "도입"이 아니라 "마감 보강" 또는 "범위 확장(설정/입력 추가)"으로 바뀐다.
새 우선 모바일 약점:
1. /coach 액션 버튼 23px 높이 — 가장 명확한 미달
2. 설정·입력 진입점이 banner link/별도 경로로 분산
3. /settings 수정 로그 진입 시 Supabase 400 에러
4. safe-area-inset 처리 검증 필요
목업의 active 컬러 `#d97757`(주황) 잔존은 적용 시 라임으로 통일 필요 (v1과 동일).
---
## 9. 적용 우선순위 (v2 — 시각 검증으로 일부 조정)
### P1. 즉시 적용 추천
#### P1-1. 모바일 하단 탭바 — **마감 보강** (v1 "도입"에서 수정)
- v1 선정 이유: "하단 탭바 부재 → 도입"
- **v2 수정**: 시각 검증 결과 3-탭 이미 존재. 작업 성격은 "마감 보강"으로 변경:
	- active 색상이 라임(#c8f135)인지 시각/코드 확인 → 아니면 라임으로 통일
	- 설정·입력 진입점을 banner 외 다른 위치(예: 4번째 탭, FAB)로 추가 검토
	- `padding-bottom: calc(62px + env(safe-area-inset-bottom))` 추가 검증
- **현재 구조와의 충돌**: 매우 낮음 (이미 구조 존재)
- **작업 비용**: v1 추정보다 크게 감소
#### P1-2. 대시보드 max-width 1600 → 1000~1200 축소
- v1 선정 이유 유지
- **v2 보강**: 1440 viewport에서는 시선 분산이 v1 추정보다 약함. 1920+ 환경에서 효과 큼 → 1920+ 사용자 비율 확인 후 우선순위 가중치 조정 가능
- 작업 비용: CSS 변수 1개 수정으로 동일
#### P1-3. AI 브리프 Markdown 렌더링 — **시급도 상향** (v2 시각 확인)
- v1 선정 이유 유지
- **v2 보강**: 시각 확인 결과 `##` 헤더뿐 아니라 `json` 코드블록까지 평문 노출 — v1 추정보다 더 심각
- 적용 주의점 추가:
	- 코드블록(`...`) syntax highlighting (gray-matter / shiki 등)
	- `<h2>` 단계도 지원 (목업은 `h3`만 가정했으나 현재 응답은 `##`)
	- DOMPurify/sanitize-html 필수
#### P1-4. 컬러 토큰 시스템 정리
- v1 선정 이유 유지
- **v2 보강**: 라임 76건 일관 적용 확인 → 시각적 변화는 작고 코드 관리·라이트 모드 준비 의미가 큼
- 작업 비용: v1 추정보다 낮음 (이미 hex 일관 사용)
#### P1-5. /strength-log 빈 라우트 처리
- v1 선정 이유 유지
- **v2 보강**: 시각 검증 결과 무한 splash 화면(로고 + "달록" 텍스트만 표시) ✓
- 적용 주의점 동일: `/log?domain=strength` 리다이렉트 권장
#### P1-6. 로그인 후 /login 재진입 가드
- v1 선정 이유 유지
- 시각 검증 미수행 (재진입 가드 검증을 위해서는 로그아웃·세션 조작 필요 — 본 환경 제약)
- 코드 검증 별도 권장
#### P1-7. /settings 수정 로그 Supabase 400 에러 — **v2 신규**
- **선정 이유**: 시각 검증 중 "수정 로그" 클릭 시 Supabase REST API 400 에러 2건 발생:
	- `body_records?select=recorded_at,weight_kg,updated_at&order=updated_at.desc&limit=30`
	- `running_logs?select=recorded_at,distance_km,updated_at&order=updated_at.desc&limit=30`
- 원인 추정: `updated_at` 컬럼이 PostgREST에 노출되지 않거나 권한/인덱스 누락
- **현재 구조와의 충돌**: 매우 낮음
- **적용 주의점**:
	- Supabase 스키마 확인: `body_records`/`running_logs`에 `updated_at` 컬럼 존재 여부
	- 없으면 컬럼 추가 마이그레이션 + 트리거 설정 또는 클라이언트 측 select 절 수정
### P2. 중장기 적용 추천
(P2-1 ~ P2-8 v1 내용 유지)
#### P2-1. /history 2-컬럼 레이아웃 (SUMMARY 480 + LIST)
- v1 동일. **v2 보강**: 시각 확인 결과 단일 컬럼이 깔끔하게 정돈되어 보임 → SUMMARY sticky가 더 큰 효과
#### P2-2. /coach 2-컬럼 레이아웃 + 도메인 분리 브리프
- v1 동일. **v2 보강**: 현재 우측에 "✦ AI 브리프 / AI 브리프 지침(등록됨)" 패널 일부 구현 → 도메인 분리만 추가하면 됨
#### P2-3. 사이드바 collapsed 모드 (66px)
- v1 동일. **v2 보강**: "사이드바 축소 ◀" 버튼이 모든 캡처에서 보임 → 일부 또는 전부 구현 가능성. 코드 확인 권장
#### P2-4. 페이지별 max-width 토큰 분리
- v1 동일
#### P2-5. 설정 사이드바 아코디언 + URL hash 라우팅
- v1 동일. **v2 보강**: 시각 확인 결과 클릭 후 URL이 `/settings` 그대로 유지됨 → hash 라우팅 미구현 확정 ✓
#### P2-6. 모바일 터치 영역 가이드 준수 (최소 44px)
- v1 동일. **v2 보강**: 실측 23px 확정 → 21px 부족이 명확함
#### P2-7. 모바일 헤더 슬림화
- v1 동일
#### P2-8. 도메인 탭 semantic 부여 + 명칭 통일 (한글/영문)
- v1 동일. **v2 보강**: BODY/RUNNING/STRENGTH vs 체성분/러닝/근력 명칭 불일치 시각 확인 → 통일 작업 명시
### P3. 보류 또는 후순위 검토
(P3-1 ~ P3-8 v1 내용 그대로 유지 — 본 v2에서 변경 없음)
---
## 10. 적용 시 주의사항
### 10-1. 목업 자체의 한계 (v1 동일)
- React 컴포넌트화 필수
- 모바일 하단 탭바 active 컬러 `#d97757` 잔존 → 라임 통일
- /log·/strength-log 목업 부재
- safe-area-inset 보강 필요
- /coach 미니캘린더 헤더 `<div class="mc-dh">sat</div>` 영문 잔존
### 10-2. 현재 구조와의 충돌 회피 (v1 동일)
- 토큰 치환 점진 마이그레이션
- max-width 변경 순차 적용
- 하단 탭바 마감 보강 시 기존 banner 즉시 제거 금지
### 10-3. 가시적 회귀 방지 (v2 시각 검증 확인 항목)
- /log 600px 단일 컬럼: 의도된 UX ✓
- /history 3종 뷰 토글: 시각 확인 모두 정상 ✓
- 다중 시각화 토글: 확인 ✓
- 캘린더 셀 일별 데이터: 정보 밀도 우위 확인 ✓ (체성분 — 골격근/체지방/BMR / 러닝 — 거리/런타입/페이스/심박)
- 라임 토큰 일관 사용 ✓
### 10-4. 데이터/API 측 영향 (v2 신규)
- **/settings 수정 로그 400 에러 (P1-7)**: Supabase 스키마 확인 — `body_records`/`running_logs`에 `updated_at` 컬럼 존재 여부
- /coach 도메인 분리 브리프(P2-2)는 AI 응답 포맷 변경 동반
### 10-5. 측정 가능한 KPI 권장 (v1 동일)
### 10-6. v2 보고서의 신뢰도
- v1: "시각 검증 미수행 — 정적 HTML/CSS + A 보고서 DOM 수치 기반 판단"
- **v2: 본 환경(집 PC)에서 Playwright MCP 직접 시각 검증 32컷 + 픽셀 실측 + 색상 적용 분포 측정 수행**
- 시각 검증 한계: 로그인 후 /login 재진입 가드, collapsed 모드 localStorage 동작, AI 응답 흐름 변경 등 일부 항목은 코드 검증·세션 조작 필요 — 본 보고서 범위 외
---
## 11. 최종 판단 (v2)
v2 시각 검증 결과는 v1 핵심 판단을 **대부분 확정**하면서 일부 사실을 **수정**했다.
**확정**:
- /coach raw `##` Markdown 노출 ✓ (실제로 더 심각 — `json` 코드블록까지)
- /strength-log 무한 splash 빈 화면 ✓
- /coach 액션 버튼 23px 높이 부족 ✓
- /login 미로그인 정상 ✓
- 라임 톤 + 사이드바 다크 톤 일관 적용 ✓
- 도메인 탭 명칭 불일치 (BODY/RUNNING/STRENGTH vs 체성분/러닝/근력) ✓
- /settings URL hash 라우팅 미구현 ✓
**수정**:
- v1 "모바일 하단 탭바 부재" → **이미 3-탭 구현됨** (P1-1 작업 성격을 "도입"에서 "마감 보강"으로 변경)
- v1 "와이드 모니터 시선 분산" → 1920+에서만 명확, 1440에서는 1164px로 자연 제한 (P1-2는 1920+ 비율에 따라 가중치)
**신규**:
- **/settings 수정 로그 진입 시 Supabase 400 에러 2건** → P1-7로 신규 추가
따라서 v2 P1 우선순위는 다음과 같이 재정리된다:
| 순위 | 항목 | v1 대비 |
|---|---|---|
| **최우선** | P1-3. AI 브리프 Markdown 렌더링 | 시급도 상향 — 코드블록까지 노출 |
| 1 | P1-7. /settings 수정 로그 Supabase 400 에러 | **v2 신규** |
| 2 | P1-5. /strength-log 빈 라우트 처리 | 유지 |
| 3 | P1-6. /login 재진입 가드 | 유지 |
| 4 | P1-2. 대시보드 max-width 축소 | 1920+ 가중치 |
| 5 | P1-4. 컬러 토큰 정리 | 코드 관리 중심 |
| 6 | P1-1. 모바일 하단 탭바 마감 보강 | **"도입" → "마감 보강"** |

현재 배포 UI에서 유지해야 할 핵심 — **/log 600px 단일 컬럼, /history 멀티 뷰 토글, 다중 시각화 토글, 캘린더 셀 일별 데이터 직접 표시, 5개 핵심 페이지의 안정 렌더링** — 은 v2 시각 검증으로 모두 정상 동작 확인되었다. 목업 반영 과정에서 이 항목들이 후퇴하지 않도록 P1/P2 적용 시 가시적 회귀 테스트 필수.
본 v2 보고서는 v1의 분석 구조·우선순위 프레임을 유지하면서 시각 검증으로 일부 사실을 확정·수정한 개정판이다. **v1의 "시각 검증 미수행" 한계는 v2에서 해소되었으며**, 본 보고서의 신뢰도는 라이브 캡처·픽셀 실측 수준에 도달했다.
---
## 부록 A. 시각 검증 자산 매트릭스 (32컷)
> 📌 아래 32개 행은 모두 **이미지 자리표시자**다. Notion 데스크탑 앱에서 로컬 폴더 `mcp_reports\_assets\260521_ui_comparison\current\` 를 열어, 각 행 아래에 해당 파일을 드래그하여 배치한다.
### 데스크탑 1440×900 (20컷)
| # | 라우트 | 섹션/탭 | 파일 자리표시 |
|---|---|---|---|
| 1 | /login | 미로그인 | 📷 `login-desktop.png` |
| 2 | /dashboard | BODY 탭 | 📷 `dashboard-desktop-body.png` |
| 3 | /dashboard | RUNNING 탭 | 📷 `dashboard-desktop-running.png` |
| 4 | /dashboard | STRENGTH 탭 | 📷 `dashboard-desktop-strength.png` |
| 5 | /history | 체성분 · 달력 | 📷 `history-desktop-body-calendar.png` |
| 6 | /history | 체성분 · 큰썸네일 | 📷 `history-desktop-body-thumbnail.png` |
| 7 | /history | 체성분 · 한줄 자세히 | 📷 `history-desktop-body-list.png` |
| 8 | /history | 러닝 탭 | 📷 `history-desktop-running.png` |
| 9 | /history | 근력 탭 | 📷 `history-desktop-strength.png` |
| 10 | /coach | 펼친 카드 포함 | 📷 `coach-desktop.png` |
| 11 | /log | 체성분 | 📷 `log-desktop-body.png` |
| 12 | /log | 러닝 | 📷 `log-desktop-running.png` |
| 13 | /log | 근력 | 📷 `log-desktop-strength.png` |
| 14 | /settings | 피트니스 목표 | 📷 `settings-desktop-fitness.png` |
| 15 | /settings | 개인 러닝 설정 | 📷 `settings-desktop-running.png` |
| 16 | /settings | 근력운동 | 📷 `settings-desktop-strength.png` |
| 17 | /settings | 개인 메모 | 📷 `settings-desktop-memo.png` |
| 18 | /settings | 계정 설정 | 📷 `settings-desktop-account.png` |
| 19 | /settings | 수정 로그 (콘솔 에러 2건) | 📷 `settings-desktop-log.png` |
| 20 | /strength-log | 빈 splash 화면 | 📷 `strength-log-desktop.png` |

### 모바일 390×844 (12컷)
| # | 라우트 | 섹션/탭 | 파일 자리표시 |
|---|---|---|---|
| 21 | /login | 미로그인 | 📷 `login-mobile.png` |
| 22 | /dashboard | BODY 탭 | 📷 `dashboard-mobile-body.png` |
| 23 | /dashboard | RUNNING 탭 | 📷 `dashboard-mobile-running.png` |
| 24 | /dashboard | STRENGTH 탭 | 📷 `dashboard-mobile-strength.png` |
| 25 | /history | 체성분 | 📷 `history-mobile-body.png` |
| 26 | /history | 러닝 | 📷 `history-mobile-running.png` |
| 27 | /history | 근력 | 📷 `history-mobile-strength.png` |
| 28 | /coach | 본문 | 📷 `coach-mobile.png` |
| 29 | /log | 체성분 | 📷 `log-mobile-body.png` |
| 30 | /settings | 피트니스 목표 | 📷 `settings-mobile-fitness.png` |
| 31 | /settings | 계정 설정 | 📷 `settings-mobile-account.png` |
| 32 | /strength-log | 빈 splash 화면 | 📷 `strength-log-mobile.png` |

## 부록 A-갤러리. 32컷 임베드 이미지
> 호스팅: [catbox.moe](http://catbox.moe) (영구, 익명 무료). 외부 호스팅 사정으로 향후 링크 만료 시 로컬 원본 `mcp_reports\_assets\260521_ui_comparison\current\` 또는 사무실 이전 zip(`260521_dallog_mcp_reports_v2_home2office.zip`) 참조.
### A-G-1. /login (미로그인 — 2컷)
**01. /login 데스크탑 (1440)** — `login-desktop.png`
![/login 데스크탑](https://files.catbox.moe/wded6q.png)
**21. /login 모바일 (390)** — `login-mobile.png`
![/login 모바일](https://files.catbox.moe/4chnyd.png)
### A-G-2. /dashboard (BODY/RUNNING/STRENGTH × 2 viewport — 6컷)
**02. /dashboard BODY 데스크탑** — `dashboard-desktop-body.png`
![/dashboard BODY 데스크탑](https://files.catbox.moe/b8s2ly.png)
**03. /dashboard RUNNING 데스크탑** — `dashboard-desktop-running.png`
![/dashboard RUNNING 데스크탑](https://files.catbox.moe/r2yqhp.png)
**04. /dashboard STRENGTH 데스크탑** — `dashboard-desktop-strength.png`
![/dashboard STRENGTH 데스크탑](https://files.catbox.moe/gpi4b6.png)
**22. /dashboard BODY 모바일** — `dashboard-mobile-body.png` ⭐ (모바일 하단 3-탭 nav 확인)
![/dashboard BODY 모바일](https://files.catbox.moe/myvumj.png)
**23. /dashboard RUNNING 모바일** — `dashboard-mobile-running.png`
![/dashboard RUNNING 모바일](https://files.catbox.moe/8967z4.png)
**24. /dashboard STRENGTH 모바일** — `dashboard-mobile-strength.png`
![/dashboard STRENGTH 모바일](https://files.catbox.moe/dwfrsr.png)
### A-G-3. /history (체성분 3뷰 + 러닝 + 근력 × 2 viewport — 8컷)
**05. /history 체성분 · 달력 뷰 데스크탑** — `history-desktop-body-calendar.png`
![/history 체성분 달력](https://files.catbox.moe/4h7zdv.png)
**06. /history 체성분 · 큰썸네일 데스크탑** — `history-desktop-body-thumbnail.png`
![/history 체성분 큰썸네일](https://files.catbox.moe/9e10o7.png)
**07. /history 체성분 · 한줄 자세히 데스크탑** — `history-desktop-body-list.png`
![/history 체성분 한줄 자세히](https://files.catbox.moe/5af5gt.png)
**08. /history 러닝 데스크탑** — `history-desktop-running.png`
![/history 러닝 데스크탑](https://files.catbox.moe/iwhjsb.png)
**09. /history 근력 데스크탑** — `history-desktop-strength.png`
![/history 근력 데스크탑](https://files.catbox.moe/nzrh5j.png)
**25. /history 체성분 모바일** — `history-mobile-body.png`
![/history 체성분 모바일](https://files.catbox.moe/gu6cpm.png)
**26. /history 러닝 모바일** — `history-mobile-running.png`
![/history 러닝 모바일](https://files.catbox.moe/yj2ei6.png)
**27. /history 근력 모바일** — `history-mobile-strength.png`
![/history 근력 모바일](https://files.catbox.moe/uhcj2y.png)
### A-G-4. /coach (Markdown raw 노출 핵심 증거 — 2컷)
**10. /coach 데스크탑 (펼친 카드 포함)** — `coach-desktop.png` ⭐⭐ (`## 헤더` 5개 + `json` 코드블록 평문 노출 시각 확인)
![/coach 데스크탑](https://files.catbox.moe/kas6ng.png)
**28. /coach 모바일** — `coach-mobile.png`
![/coach 모바일](https://files.catbox.moe/kof9hi.png)
### A-G-5. /log (3-도메인 × 데스크탑 + 모바일 — 4컷)
**11. /log 체성분 데스크탑** — `log-desktop-body.png`
![/log 체성분 데스크탑](https://files.catbox.moe/hk92z1.png)
**12. /log 러닝 데스크탑** — `log-desktop-running.png`
![/log 러닝 데스크탑](https://files.catbox.moe/0kpelx.png)
**13. /log 근력 데스크탑** — `log-desktop-strength.png`
![/log 근력 데스크탑](https://files.catbox.moe/czzcqp.png)
**29. /log 체성분 모바일** — `log-mobile-body.png`
![/log 체성분 모바일](https://files.catbox.moe/ml1u91.png)
### A-G-6. /settings (6 메뉴 데스크탑 + 2 모바일 — 8컷)
**14. /settings 피트니스 목표 데스크탑** — `settings-desktop-fitness.png`
![/settings 피트니스 데스크탑](https://files.catbox.moe/kkog2i.png)
**15. /settings 개인 러닝 설정 데스크탑** — `settings-desktop-running.png`
![/settings 러닝 설정](https://files.catbox.moe/4k5iq1.png)
**16. /settings 근력운동 데스크탑** — `settings-desktop-strength.png`
![/settings 근력운동](https://files.catbox.moe/wfrre7.png)
**17. /settings 개인 메모 데스크탑** — `settings-desktop-memo.png`
![/settings 개인 메모](https://files.catbox.moe/49of4g.png)
**18. /settings 계정 설정 데스크탑** — `settings-desktop-account.png`
![/settings 계정 설정](https://files.catbox.moe/tddaku.png)
**19. /settings 수정 로그 데스크탑 (Supabase 400 에러 확인)** — `settings-desktop-log.png` ⭐ (P1-7 신규 이슈)
![/settings 수정 로그](https://files.catbox.moe/j0dhef.png)
**30. /settings 피트니스 모바일** — `settings-mobile-fitness.png`
![/settings 피트니스 모바일](https://files.catbox.moe/u2yl8j.png)
**31. /settings 계정 설정 모바일** — `settings-mobile-account.png`
![/settings 계정 모바일](https://files.catbox.moe/s3obt3.png)
### A-G-7. /strength-log (빈 splash 화면 — 2컷)
**20. /strength-log 데스크탑 (빈 splash 화면)** — `strength-log-desktop.png` ⭐ (P1-5: 라우트 빈 컴포넌트 확인)
![/strength-log 데스크탑](https://files.catbox.moe/ao214d.png)
**32. /strength-log 모바일 (빈 splash 화면)** — `strength-log-mobile.png`
![/strength-log 모바일](https://files.catbox.moe/k9twxt.png)
---
## 부록 B. 픽셀/색상 실측 결과
### B-1. 픽셀 측정 (Playwright `getBoundingClientRect`)
| 위치 | viewport | W × H | 비고 |
|---|---|---|---|
| 사이드바 (전체) | 1440 | 272 × 900 | bg `rgb(13,16,24)` ≈ `#0d1018` |
| 메인 영역 | 1440 | 1164 × auto | max-width 1600, padding L/R 40 |
| /coach 펼치기 버튼 | 1440 / 390 | 50 × 23 | 동일 |
| /coach 접기 버튼 | 1440 / 390 | 40 × 23 | 동일 |
| /coach 수정 버튼 | 1440 / 390 | 40 × 23 | 동일 |
| /coach 삭제 버튼 | 1440 / 390 | 40 × 23 | 동일 |
| /log 저장 버튼 | 1440 | 526 × 40 | bg `rgb(200,241,53)` = `#c8f135` |

### B-2. 라임 #c8f135 적용 분포 (단일 페이지 /coach 데스크탑)
- 총 적용 건수: 76건 (color/background/border-* 합산)
- 주요 위치: 사이드바 DALLOG/PACELOG 텍스트(color + border), 헤더 텍스트(color), 탭 active(color), 저장 버튼(bg), 캘린더 강조 셀, 차트 라인 등
- **결론: 디자인 토큰으로서 활발히 일관 사용 중**
### B-3. 콘솔 오류
| 라우트 | 오류 | 비고 |
|---|---|---|
| /dashboard, /history, /coach, /log, /strength-log, /login | 없음 | 정상 |
| /settings (수정 로그 진입 시) | **2건** | Supabase 400: `body_records?...updated_at`, `running_logs?...updated_at` |

---
*v2 시각 검증 보고서 — 코드 수정·git 작업 미수행. 이미지 32컷은 로컬 폴더 **`mcp_reports/_assets/260521_ui_comparison/current/`** 에 있으며, 본 Notion 페이지에는 자리표시자로 표시되어 있다. 사용자가 수동으로 이미지를 드래그하여 자리표시자 위치에 배치하면 본 보고서 완성.*
*본 환경(집 PC) Playwright MCP 시각 검증 완료 (2026-05-21).*
---
## 이전버전 (보관)
- 📄 [이전버전 — Playwright MCP DOM 기반 보고서 (260520_v1)](#/doc/archive-report-04) — versions/MCP브라우징-보고서_v_260520_v1.md
- 📄 [[Claude.ai](http://Claude.ai) MCP브라우징보고서_260520_1](#/doc/archive-report-03) — versions/MCP브라우징-보고서_v_260520_1.md
- 📄 [v3 브라우징 보고서 작성 설명서 (다음 컨텍스트용 가이드)](#/doc/archive-report-01) — versions/MCP브라우징-보고서_v3-작성-설명서.md
- 📄 [📊 MCP브라우징 보고서 v3 — 최종 polish 검수 (260522)](#/doc/archive-report-02) — versions/MCP브라우징-보고서_v3-최종polish-260522.md
---
## 갱신 부록 A — 셀 입력 모드 + 4단계 fix 사용자 직접 시각검증 (2026-05-26)
본 부록은 2026-05-26 본 컨텍스트에서 추가·확정된 UI에 대한 시각검증 기록. **본 부록 시점에는 Playwright MCP 정식 보고서(v4) 미수행** — 사용자가 직접 데스크탑(1440) · 모바일(390) 양 viewport에서 시각검증 수행. 정식 v4 보고서 발행은 v0.9 충족기준 작업 2 RLS 해소 + 근력 Phase 5 완료 후로 보류 권장.
### A-1. 검증 대상 UI 영역
2026-05-26 본 세션에서 새로 추가된 UI:
1. `/history` 한줄 자세히 → 셀 입력 모드 (체성분·러닝)
2. 액션바 (수정·모두저장·취소·새행·선택삭제·컬럼 popover 트리거)
3. 페이지네이션 (10/30/50 + 페이지 윈도우)
4. 컬럼 표시·순서 popover (fixed center overlay)
5. 컬럼 필터 popover (MS 엑셀 패턴)
6. 셀 편집(input/select, 시간 셀 3-input 묶음)
7. 자세히 모달 클릭 복원
8. 일괄 삭제 ConfirmDialog + NotifyDialog
9. 대시보드 RUNNING — 신발별 누적 마일리지 가로 막대 차트
10. Settings 신발 목록 — 누적 마일리지 병기
11. Settings 개인 러닝 — 루틴(프로젝트) CRUD UI
### A-2. 4단계 fix 시각검증 이력 (사용자 직접 수행)
| 차수 | 커밋 | 사용자 시각검증 결과 |
|---|---|---|
| Phase 1~4 본구현 | `c6b6090` | 사용자 데스크탑+모바일 검증 후 11건 이슈 리포트 (1~10번 + 11번 RLS) |
| 1차 fix 9건 | `a453a0c` | 사용자 재검증 후 잔여 2건(컬럼 popover 모바일 잘림·삭제 안됨) + 추가 3건 요청 |
| 2차 fix 2건 + 추가 3건 | `78b027b` | 사용자 재검증 후 잔여 1건(popover row 라벨 CJK 세로 wrap) |
| 3차 fix | `737c460` | 사용자 재검증 후 라벨 여전히 안 보임 (스크린샷 첨부) |
| 4차 fix popover grid 전환 | `9a14d3f` | **사용자 검증 완료 — 정상 표시** |
| 컬럼명·단위 조정 | `a772bb5` | **사용자 검증 완료 — 종결** |

### A-3. 시각검증 도구
- **사용자가 **[**dallog.pages.dev**](http://dallog.pages.dev)** 라이브 환경에서 직접 검증** (마스터 계정 mster/qwer1234)
- 본 부록 작성 시점(2026-05-26 22:36)에서 Playwright MCP 정식 캡처 미수행
- 캡처가 필요한 외부 자료는 다음 정식 MCP v4 보고서 작성 후 인용 권장
### A-4. v2 보고서 P1 우선순위에 대한 후속 영향
본 부록은 v2 보고서의 P1 우선순위에 다음 변화를 미친다:
- **P1-3 AI 브리프 Markdown 렌더링** — 2026-05-22 v3 polish 검수에서 해소 (E-6) ✅
- **P1-5 /strength-log 빈 라우트** — 2026-05-23 v0.9 안정화에서 해소 (F-6e Navigate) ✅
- **P1-6 /login 재진입 가드** — 2026-05-23 v0.9 안정화에서 해소 (C-7) ✅
- **P1-7 /settings 수정 로그 400 에러** — fallback 동작 유지 (C-6), 정식 해소는 v0.9 작업 2 RLS에 통합
- **P1-1 모바일 하단 탭바** — I-0 4탭 확장으로 마감 (프로필 추가)
- **신규 — 셀 모드 UI 추가** — 본 부록 §A-1로 등재. 사용자 검증 완료. MCP v4 정식 캡처 시 별도 §"셀 입력 모드 32컷" 부록 권장.
### A-5. 다음 MCP v4 보고서 작성 가이드
v4 보고서 작성 시 추가 검증 권장 항목:
- 셀 입력 모드 보기/수정 양쪽 캡처 (체성분·러닝 × 1440·390 = 4컷+)
- 컬럼 표시·순서 popover 열림 상태 (1440·390 = 2컷)
- 컬럼 필터 popover 열림 상태 (1440·390 = 2컷, 라임 활성 ▼ 트리거 확인)
- 셀 삭제 ConfirmDialog → NotifyDialog 시퀀스 (성공/실패 각 1컷)
- 자세히 모달 클릭 복원 동작 (1440·390 = 2컷)
- 대시보드 RUNNING 신발별 마일리지 차트 (1440·390 = 2컷)
- Settings 신발 목록 마일리지 병기 + 루틴 CRUD (1440·390 = 2컷)
- 총 신규 16~20컷 추가
### A-6. 별도 트랙 (정식 v4 작성 전 해소 필요)
- **이슈 11 (OAuth 런타입 RLS)** + **셀 모드 삭제 차단** — Supabase RLS 미비 의심. v0.9 작업 2에서 통합 해소. v4 보고서는 이 해소 이후 작성 권장 (RLS 검증 결과도 캡처 포함).
### A-7. 관련 노션 페이지
- [기능설명서 §갱신 부록 A](#/doc/spec-doc-02) — 셀 모드 코드/모듈 상세
- [UI시각화 내용 설명서 §갱신 부록 A](#/doc/spec-doc-01) — 셀 모드 UI 토큰/구조 상세
- [달록(PaceLog)설명서 §갱신 부록 A](#/doc/spec-doc-03) — 외부 자료 인용용 요약
- 작업보고 4건 (Phase 1~4 본구현 / 시각검증 1·2·3·4차 fix)