---
title: "이전버전 — Playwright MCP DOM 기반 보고서 (260520_v1)"
notion_id: "367229620868812ab366c150f00f0e4e"
notion_url: "https://app.notion.com/p/367229620868812ab366c150f00f0e4e"
category: "report-version"
parent: "MCP브라우징 보고서"
updated: "2026-05-21"
priority: "Low"
purpose: "v1 보고서 보관본 — 시각 스크린샷 불가, DOM/CSS 수치 기반 7개 라우트 분석 (v2 교체 전)"
---

이 페이지는 2026-05-20에 작성된 v1 보고서의 보관본이다. v2(2026-05-21 작성, 시각 검증 완료)로 메인 페이지가 교체되면서 이전 버전을 보존하기 위해 이곳으로 옮긴 것이다.
원본 작성 시점: 2026-05-20 (집 환경, Playwright MCP DOM 수치 기반, 시각 검증 미수행)
---
# 달록(PaceLog) Playwright MCP 브라우징 보고서
- 작성일: 2026-05-20
- 브라우징 도구: Playwright MCP (Claude Code) — **Playwright MCP DOM 기반 확인 — 시각적 스크린샷 불가**
- 접속 URL: [https://dallog.pages.dev](https://dallog.pages.dev)
- 로그인 상태: 제공된 테스트 계정으로 로그인 (localStorage `dallog.masterSession` 키 생성 확인)
- 확인한 화면 크기: Desktop 1920×1080 / Tablet 768×1024 / Mobile 390×844
- 코드 수정 여부: 없음
- 로컬 보고서 파일: `D:\dallog\dallog_git\docs\260520_playwright_browsing_report.md`
---
## 1. 종합 평가
- 전체 7개 경로 중 5개(`/dashboard`, `/history`, `/coach`, `/log`, `/settings`)는 3종 viewport 모두에서 정상 렌더링되며 풍부한 DOM 콘텐츠를 노출한다.
- `/login`은 이미 로그인된 세션 상태에서 접근하면 root가 빈 상태로 남는다. 미로그인 상태에서는 정상 로그인 폼이 노출됨을 사전 확인했다.
- `/strength-log`는 3종 viewport 모두에서 root 텍스트가 비어 있고 모바일 헤더조차 렌더링되지 않는다. **라우트 미구현 또는 컴포넌트 누락 가능성**이 가장 의심된다.
- 데스크탑(1920)에서는 사이드바 272px + 메인 1600px(max-width 1600) 와이드 컬럼 구조가 일관 적용된다. 단, `/log`만 max-width 600px의 좁은 단일컬럼이 유지된다(의도된 입력 UX로 보임).
- 768 이하에서는 사이드바가 사라지고 73px 모바일 헤더로 전환되지만, **하단 탭바는 어느 viewport에서도 발견되지 않는다.** 모바일에서는 헤더 안의 `≡ 메뉴 보기` 토글 또는 하단의 `대시보드/기록/코치` 텍스트 링크가 그 역할을 대체한다.
- 모든 viewport에서 가로 스크롤은 발생하지 않으며, 콘솔 오류와 페이지 오류는 수집 범위 내에서 0건이다.
- 시각적 스크린샷이 없어 디자인 완성도와 색감, 라임 강조색(#c8f135) 적용 여부 등은 단정하지 않는다. 본 보고서는 DOM/CSS 수치 기반 해석으로 한정한다.
---
## 2. 브라우징 환경 및 확인 범위
- 사용 가능한 Playwright MCP 도구: `browser_navigate`, `browser_navigate_back`, `browser_resize`, `browser_run_code_unsafe`, `browser_tabs`
- 사용 불가 도구: `browser_snapshot`, `browser_take_screenshot` (목록에 노출되지 않음)
- 그 결과 본 보고서는 **시각 확인 불가 — DOM 수치 기반 판단** 원칙을 따른다.
- 콘솔/페이지 오류는 `page.on('console')`, `page.on('pageerror')`로 페이지 전환 직후만 수집했으며, 도구 제약상 페이지 로딩 초기 단계 일부 메시지는 누락될 수 있다(콘솔 오류 수집 제한 — DOM 확인 중심).
- 실제 저장·삭제·전송·로그아웃은 수행하지 않았다. 해당 동작은 "실제 저장/삭제/전송/로그아웃 미실행으로 최종 확인 제한"이라고 명시한다.
---
## 3. 페이지별 기능 해석 및 정상작동 여부
### 3-1. 로그인 (`/login`)
- 화면 목적: 미로그인 사용자에 대한 ID/비밀번호 입력 또는 Gmail 로그인 진입점.
- DOM 기반 확인 결과:
	- 미로그인 상태에서 처음 접근 시: `input[placeholder="아이디"]`, `input[type="password"]`, 버튼 `로그인`, 버튼 `Gmail로 로그인` 노출. h2 `로그인`, body bg `rgb(10,10,10)` 다크 톤. font-family `"Noto Sans KR"`.
	- 로그인된 세션에서 `/login` 직접 진입 시: 모든 viewport에서 root 텍스트가 0자로 빈 상태. 콘솔 오류 0건.
- 주요 요소 수(미로그인 진입 시 기준): button 2, input 2.
- 주요 기능 해석: 마스터 계정 로그인은 정상 작동하며 `/dashboard`로 리다이렉트된다. `Gmail로 로그인` 버튼은 실제 OAuth 흐름을 트리거하지 않고 확인했다.
- 정상작동 여부: 미로그인 진입 시 확인 범위 내 명확한 오류 없음. 로그인 후 `/login` 재진입 시 빈 화면은 의도된 가드일 수 있으나 사용자 체감으로는 "흰/검은 화면"으로 보일 가능성이 있음.
- 발견된 문제: 로그인된 사용자가 `/login`을 북마크로 직접 열면 빈 화면이 노출되고 자동 리다이렉트가 없음(추정). 사용자 혼란 여지 있음.
- 개선 필요점: 로그인된 사용자가 `/login`에 접근하면 `/dashboard`로 자동 리다이렉트하거나 안내 메시지를 노출하는 것을 검토할 수 있음.
### 3-2. 대시보드 (`/dashboard`)
- 화면 목적: BODY / RUNNING / STRENGTH 3개 도메인 탭으로 분리된 핵심 지표 요약 + 추이 차트.
- DOM 기반 확인 결과(Desktop):
	- main 1600px, max-width 1600px, padding-top 32 / padding-x 40.
	- 사이드바 272px 존재. 본문 상단에 `◀` 뒤로가기 버튼, `BODY` `RUNNING` `STRENGTH` 탭 3개.
	- 본문 텍스트: `1일 전 26년 5월 19일`, 기간 셀렉터, `체중 109.7kg -0.9kg`, `골격근량 41.7kg -0.2kg`, `체지방량 33.0kg -0.6kg`, `체지방률 30.1% -0.3%`, `체중 추이`, `골격근량 / 체지방량 추이` 차트 라벨.
	- canvas 2개 검출 → 추이 차트 2개 렌더링.
- 주요 요소 수: button 4, input 1, tab 3, svg 4, canvas 2.
- 주요 기능 해석: 탭 3개로 도메인 분리, 직전값 대비 증감 표기(+/-), 단일 컬럼 max-width 1600px로 와이드 모니터에서도 카드가 가로로 펼쳐짐(시각 확인 불가 — DOM 수치 기반 판단).
- 정상작동 여부: 확인 범위 내 명확한 오류 없음. 탭 텍스트 / 차트 컨테이너 / 수치 모두 DOM에 존재.
- 발견된 문제: max-width 1600px가 1920 viewport에서도 적용돼 좌우 여백 160px씩 남음. 와이드 모니터에서 시선 분산 가능성(시각 확인 불가).
- 개선 필요점: BODY 탭의 기본값이 다른 탭에서도 일관되게 보존되는지 사용자 테스트 별도 필요(실제 탭 전환 검증은 본 보고서 범위 밖).
### 3-3. 기록·히스토리 (`/history`)
- 화면 목적: 기간/도메인 필터 + 요약 지표 카드 + 일별 리스트.
- 데스크탑: main 1600px, 버튼 22개, canvas 1개. 누적 거리 155.7km, 횟수 27회, 평균 페이스 8'24"/km 등 지표 다수. 캘린더 그리드 안에 일별 거리·페이스·심박 표시.
- 모바일: 386px, 버튼 13개로 감소.
- 발견된 문제: 모바일에서 일부 컨트롤(달력/큰썸네일/한줄 자세히 뷰 모드 토글 등)이 숨겨질 가능성 — 시각 확인 불가.
### 3-4. 코치노트 (`/coach`)
- 데스크탑: main 1600px, 버튼 44개, AI 시각화 브리프 + 텍스트 브리프 리스트.
- 본문에 `## 체중 증감의 의미 해석` Markdown 헤더가 raw 문자열로 노출 — Markdown 파서 누락 가능성.
- 모바일 펼치기/수정/삭제 버튼이 23~26px로 매우 작아 터치 영역 미달.
### 3-5. 기록 입력 (`/log`)
- 데스크탑: main 600px (다른 페이지와 달리 좁은 컬럼 유지) — 입력 페이지로서 의도된 UX로 판단.
- 모바일 저장 버튼 312×40px (높이 40 = 모바일 가이드 44 미달).
### 3-6. 근력운동 기록 (`/strength-log`)
- **3종 viewport 모두 root 텍스트 0자, 모바일 헤더조차 렌더링되지 않음.**
- 라우트 미구현 / 컴포넌트 누락 가능성. **이 경로는 사실상 비기능 상태.**
- 개선: 라우트 제거 또는 `/log?domain=strength` 리다이렉트 권장.
### 3-7. 설정 (`/settings`)
- 데스크탑: 운영/계정·로그 2그룹 메뉴 + 우측 콘텐츠. 메뉴가 button으로 운영되어 URL 변경이 없음 → 직접 URL 공유 불가.
- 모바일: `≡ 메뉴 보기` 햄버거로 메뉴 접힘.
---
## 4. 전체 UI 수치 평가 (DOM 기반)
### 4-1. Desktop (1920×1080)
| 경로 | sidebar W | main W | main max-W | pad-top | pad-x | mobileHeader | bottomNav | hScroll |
|---|---|---|---|---|---|---|---|---|
| /login (로그인됨) | — | — | none | 0 | 0 | no | no | no |
| /dashboard | 272 | 1600 | 1600 | 32 | 40 | no | no | no |
| /history | 272 | 1600 | 1600 | 32 | 40 | no | no | no |
| /coach | 272 | 1600 | 1600 | 32 | 40 | no | no | no |
| /log | 272 | **600** | **600** | 32 | 16 | no | no | no |
| /strength-log | — | — | none | 0 | 0 | no | no | no |
| /settings | 272 | 1600 | 1600 | 32 | 40 | no | no | no |

- 사이드바 272px + main 1600px max-width가 데스크탑 표준. `/log`만 600px 의도적 좁은 폭.
- 1920 viewport에서 좌+메인 합 1872px → 우측 약 48px만 남는 구조.
### 4-2. Tablet (768×1024)
- 768 시점에서 이미 사이드바가 사라지고 73px 모바일 헤더로 전환됨.
- 769~1023 사이 거동 미측정.
- 하단 탭바는 어느 페이지에서도 발견되지 않음.
### 4-3. Mobile (390×844)
- 모든 페이지에서 가로 스크롤 없음.
- 모바일 헤더 73px (viewport 844의 8.6%).
- `/log` 저장 버튼 312×40px, `/history` 도메인 탭 78~101×33~37px.
- `/coach` 펼치기/수정/삭제: 가로 50~85px / **세로 23~26px — 모바일 가이드 44 크게 미달**.
---
## 5. 컴포넌트·요소별 시각 평가 (DOM 수치 기반)
- 사이드바: 좋은 점은 Desktop 272px 폭 고정. 어색한 점은 769~1023 사이 거동 미측정.
- 모바일 헤더: 73px 일관 높이. `/strength-log`에서는 헤더조차 렌더링되지 않음.
- 하단 탭바: DOM상 `tab-bar`, `bottom-nav`, `mobile-nav` 클래스 어디서도 검출되지 않음.
- 탭 UI: `/history`는 `role="tab"` 누락 가능성.
- 버튼 모바일 실측: `/coach` 23~26px, `/log` 39~40px, `/history` 33~37px → 모바일 가이드 44px 미달.
---
## 6. 오류 및 이상 징후
- 콘솔 오류: 수집 범위 내 **0건** (도구 제약 — 콘솔 오류 수집 제한, DOM 확인 중심).
- 렌더링 깨짐 추정:
	- **`/strength-log` 3종 viewport 모두 root 빈 상태** — 라우트 미구현 / 컴포넌트 누락 가능성 (1순위 의심).
	- **`/login` 로그인 후 재진입 시 빈 화면** — 자동 리다이렉트 미적용 가능성.
- 클릭 불가 요소 추정: 모바일 `/coach` 펼치기/수정/삭제 23~26px 매우 작음.
---
## 7. 우선순위별 개선 제안
### 긴급
- **`/strength-log` 빈 라우트 처리**: 라우트 제거 / 컴포넌트 구현 / `/log` 리다이렉트.
### 중요
- **`/login` 재진입 가드**: 로그인된 사용자가 `/login` 진입 시 `/dashboard` 자동 리다이렉트.
- **모바일 터치 영역 확대**: `/coach` 23~26px, `/log` 39~40px, `/history` 33~37px → 최소 44px로.
- **`/coach` Markdown 렌더링 확인**: `##` raw 노출 의도 여부 확인.
### 보통
- **`/history` 도메인 탭 `role="tab"` 부여** (시맨틱).
- **`/settings` 메뉴 URL 라우팅** 분리 (공유·북마크 가능).
- **태블릿 거동 검증** (769~1023 사이).
- **데스크탑 와이드 모니터 대응** (2K/4K).
---
## 8. 최종 결론
- **달록 데모 빌드는 핵심 5개 페이지(`/dashboard`, `/history`, `/coach`, `/log`, `/settings`)에서 안정적인 렌더링과 풍부한 콘텐츠를 제공**하며, 3종 viewport 모두에서 가로 스크롤·콘솔 오류 없이 정상 동작한다.
- **즉시 조치가 필요한 항목은 `/strength-log` 빈 라우트와 `/login` 재진입 가드 두 개**이며, 그 외는 모바일 터치 영역과 Markdown 렌더링 의도 확인 수준의 UX 개선 사항이다.
- 데스크탑 1920에서는 사이드바 272 + 메인 1600 max-width 와이드 컬럼이 일관 적용되며, `/log`만 600px 좁은 단일컬럼으로 의도적 분리됨.
- 768 이하에서는 사이드바 즉시 숨김 + 73px 모바일 헤더 등장의 단일 브레이크포인트 구조.
- **시각적 스크린샷 없이는 색감·강조색(라임 #c8f135) 적용·디자인 완성도·라이트/다크 토글의 실제 톤은 단정할 수 없다.** 추후 `browser_snapshot` 또는 `browser_take_screenshot` 도구가 제공될 때 본 보고서의 DOM 기반 판단을 시각 검증으로 보강할 필요가 있다.
---
*Playwright MCP DOM 기반 확인 — 시각적 스크린샷 불가 / 실제 저장·삭제·전송·로그아웃 미실행으로 최종 확인 제한*
---
**※ 이 페이지는 v1 보관본 압축 요약이며, 원본 전문은 로컬 파일 `mcp_reports/달록_UI_목업비교_적용우선순위_260520.md`을 참조하라. v2(2026-05-21 시각 검증 완료)로 메인 페이지가 교체되었다.**