---
title: "UI시각화 설명서 — 프로필 공개 대시보드/기록 (프로필 기록)"
category: "guide"
document_type: "UI시각화설명서"
source_status: "generated"
knowledge_group: "02_specs"
priority: "Medium"
purpose: "프로필 공개 대시보드/기록 기능의 화면 구성·UI 요소·사용자 흐름·디자인 의도·반응형(데스크탑 2단/모바일 전환) 차이를 MCP 스크린샷 기반으로 설명하는 UI시각화 설명서."
read_when: ["UI작업","기능파악"]
updated: "2026-06-04"
work_timestamp: "20260604_201930"
context: "달록본레포CC (D:\\dallog\\dallog_git)"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
---

# UI시각화 설명서 — 프로필 공개 대시보드/기록 ("프로필 기록")

> 모든 화면은 라이브(dallog.pages.dev) MCP 브라우징 실캡처. 이미지: `assets-20260604-profile-ui/`.

## 1. 데스크탑 — 프로필 2단 구조

![데스크탑 2단](pacelog-archive/pages/05-status/assets-20260604-profile-ui/01_desktop_u-hans_2col.png)

### 화면 구성
- **히어로(상단 중앙)**: 아바타 · 이름/@핸들 · 자기소개 · 통계(게시물·팔로워·팔로잉·**공개한 기록**) · (타인) 팔로우 버튼.
- **본문 2단**:
  - **좌 — 프로필 기록**: 공개한 대시보드/기록 카드 목록(여기선 4건). 컬럼 비율을 피드보다 넓게(flex 1.35) 두어 콘텐츠 가독성 확보.
  - **우 — 피드**: 최근 게시물(기존 소셜 피드 재사용).
- 각 컬럼은 **독립 스크롤**(`.profile-col__scroll`, `max-height: calc(100vh - 260px)`) — 한쪽을 내려도 다른 쪽은 고정.

### 디자인 의도
- 본인(`/profile`)·타인(`/u/:handle`) **동일 폭**. 폭은 `Layout`의 wide main(`is-wide`)에 의존하며, 동적 경로 `/u/:handle`도 wide로 처리해 좁은 main에 2단이 찌그러지지 않도록 함.
- 공개 카드는 디자인 토큰(`--bg2`·`--border`·`--radius-md`) 기반. 배지(섹션·종류·범위·보기형식)로 카드 성격을 한눈에 구분.

### 공개 카드 UI 요소
- 제목 · 배지(예: `러닝` `대시보드` `전체` / `러닝` `기록` `전체` `달력`) · 공개일 · **바로가기/접기** 토글.
- (본인 한정, 타인 화면엔 비노출) 하단 관리 버튼: 비공개로 · 업데이트 · 범위 수정 · 삭제.

## 2. 데스크탑 — 공개 대시보드 카드 펼침

![대시보드 카드 펼침](pacelog-archive/pages/05-status/assets-20260604-profile-ui/02_desktop_dashboard-card-expanded.png)

- **바로가기** 클릭 시 카드 안에서 해당 섹션이 펼쳐짐. 위 예시는 **STRENGTH**(읽기전용): 최근 운동 요약 · 세션/총볼륨/세트당 평균볼륨 카드 · 추이 차트.
- 기존 대시보드 섹션 컴포넌트를 `readOnly`로 재사용 → **실제 대시보드와 동일한 카드·그래프 비주얼**을 저장 시점 스냅샷으로 재현.

## 3. 데스크탑 — 공개 기록 카드 펼침(달력)

![기록 카드 달력](pacelog-archive/pages/05-status/assets-20260604-profile-ui/03_desktop_records-card-calendar.png)

- 보기형식 **달력**으로 공개한 러닝 기록. 일자 셀에 거리(8.4 / 5.1)·런타입(조깅)·페이스(7'57"/8'10")·심박(155/149bpm) 표기.
- History의 `hist-*` 마크업/클래스를 읽기전용으로 재사용(선택·편집·상세 모달 제거). 보기형식은 **달력 · 큰썸네일 · 주간보기(러닝) · 한줄 자세히** 지원.

## 4. 데스크탑 — 공개 모달(PublishModal)

![공개 모달](pacelog-archive/pages/05-status/assets-20260604-profile-ui/04_desktop_publish-modal.png)

### UI 요소 / 사용자 흐름
1. 대시보드/기록 우상단 **"프로필에 공개"** → 모달 오픈(현재 탭 섹션 기준).
2. **스냅샷 안내**: "저장 시점 데이터로 동결, 수정해도 자동 변경 안 됨".
3. **공개 범위** 칩: 전체 · 최근 1주일 · 최근 1개월 · (러닝/근력)키워드 · 직접 지정 기간 · 현재 필터·검색. (체성분은 키워드 제외, 근력은 프로젝트 제외 — 섹션별 분기.)
4. **기록 보기 형식**(기록 공개 시): 달력/큰썸네일/주간보기/한줄.
5. **카드 제목**(선택) → "공개될 기록 N건" 미리보기 → **공개하기**(0건이면 비활성).

### 디자인 의도
- 공통 모달 클래스(`modal-overlay`·`modal-dialog`) + `.toggle-group` 칩으로 기존 디자인 시스템과 일관.

## 5. 모바일 — 전환형 구조 (병렬 금지)

| 프로필 기록(기본) | 피드 |
|---|---|
| ![모바일 기록](pacelog-archive/pages/05-status/assets-20260604-profile-ui/05_mobile_u-hans_records.png) | ![모바일 피드](pacelog-archive/pages/05-status/assets-20260604-profile-ui/06_mobile_u-hans_feed.png) |

### 데스크탑과의 차이 (반응형)
- 데스크탑은 **2단 병렬**, 모바일은 가로폭 제약상 **단일 보기 전환**(병렬 금지).
- **헤더(F-1)**: 1행(아바타·이름·@핸들·자기소개 | 설정·편집 또는 팔로우) · 2행(통계 | **프로필 기록 / 피드** 토글).
- 기본 활성 = **프로필 기록**. 토글로 피드 전환.
- 하단 탭바(대시보드·기록·코치·SNS·프로필)와 **겹침·잘림 없음**.

## 6. 상태/예외 시 화면
- 공개 기록 0건: "아직 공개한 기록이 없어요"(본인은 대시보드/기록으로 유도, 타인은 안내만).
- 비공개 카드(본인 화면): 점선 테두리 + `비공개` 배지로 흐리게 구분.
- 프로필 비공개/팔로워만: 타인 접근 시 "프로필을 찾을 수 없어요".