---
name: experience-design
description: "텍스트 처방을 대시보드·캘린더·아이콘·GIF 기반 실행 가능 UX로 전환하고, 초보자용 상세 실행 플랜을 생성하는 스킬. 트리거: 대시보드, 캘린더, 아이콘, GIF, 자세, 초보자, 실행플랜."
---

# Experience Design — 실행 가능성 UX 설계 절차

현재의 긴 텍스트 처방을 "3일 내 첫 세션 시작 가능" 수준으로 치환한다.

## 워크플로우

### Step 1. 현재 UX 인벤토리
- `index.html`의 `#prescription-doc`, `#plan-display` 구조 확인
- `js/app.js`의 처방 렌더 함수(`renderPrescriptionDoc`, `renderPlan` 등) 추적 — 어떤 텍스트가 어디로 가는지 매핑
- 현재 피로도 유발 포인트 체크: (1) 스크롤 깊이, (2) 텍스트 밀도, (3) 다음 행동 모호함

### Step 2. 대시보드 재구성
3카드 레이아웃:

```
┌─────────────────────────────┐
│ 📅 오늘의 운동               │
│ [아이콘] 종목명 | 20분 | 강도●●○ │
│ [GIF 썸네일] [시작하기 →]     │
└─────────────────────────────┘
┌─────────────────────────────┐
│ 📊 내 체질 요약              │
│ 일간: 경금 · 신강 · 역마살   │
│ [근거 펼쳐보기]  ← credibility │
└─────────────────────────────┘
┌─────────────────────────────┐
│ 🗓 이번 주 플랜              │
│ [캘린더 7칸, 요일별 색상]     │
└─────────────────────────────┘
```

현재 `prescription-doc`의 내용은 **카드 내부의 접힘 섹션**으로 보존 (버리지 않음).

### Step 3. 캘린더 컴포넌트
- 주간 뷰: 7일 × 1행, 각 셀에 종목 아이콘 + 소요 시간 + 강도 색 바
- 4주 뷰: 28칸 그리드, 주차별 강도 점진 상승 시각화
- 강도 팔레트: #F1F5F9(쉼) → #BAE6FD(저) → #38BDF8(중) → #0369A1(고)
- 기존 `style.css` 톤과 충돌하지 않게 배경·둥근 모서리 변수 재사용

### Step 4. 아이콘 시스템
종목 → SVG 매핑표(최소 15개):
- 유산소: 걷기, 달리기, 수영, 사이클, 로잉
- 근력: 스쿼트, 데드리프트, 벤치프레스, 풀업, 런지
- 유연/호흡: 요가, 필라테스, 스트레칭, 명상
- 구기·팀: 농구, 테니스, 탁구 등 (그룹 판정용)

SVG는 인라인으로 `js/icons.js` 모듈 신설 권장. 외부 아이콘 세트(Lucide, Tabler Icons 등 MIT)에서 가져오는 것을 우선.

### Step 5. 자세 가이드 리소스
각 운동 10~20개 기본 동작에 대해:
- 3~5초 루프 GIF **또는** 정적 연속 프레임 이미지 3장
- 오픈 라이선스 소스 후보:
  - Wger (AGPL, 자체 호스팅 시 고려)
  - ExRx.net (사용 허가 필요)
  - Pexels/Unsplash 피트니스 비디오 (CC0)
  - 자체 제작(초기 버전에서 비추천 — 부담)
- 각 리소스의 URL·라이선스·주의사항을 표로 기록.
- alt 텍스트: "스쿼트 — 허리 곧게, 무릎이 발끝보다 앞으로 나가지 않게" 수준 상세.

### Step 6. 초보자 실행 플랜 템플릿
"스쿼트 3×10"은 초보에게 미완성 정보. 완성 형식:

```
[동작] 바디웨이트 스쿼트
[세트] 3세트 × 10회
[휴식] 세트 사이 60초
[강도] 최대 노력의 5~6 / 10 (말할 수 있을 정도)
[폼 체크] 무릎-발끝 라인, 허리 곧게, 시선 정면
[대체] 무릎 아프면 → 벽 스쿼트 or 박스 스쿼트
[영상] [GIF 링크]
[주의] 무릎 안쪽 통증 시 즉시 중단
```

이 템플릿을 reconciler 공식으로 나온 상위 3~5개 처방 시나리오에 적용.

### Step 7. 샘플 주간 플랜 3종 생성
세 가지 대표 조합으로 완성된 주간 플랜 시연:
- 예 1: 수(水) 일간 · 신약 · 도화살 — 조용한 솔로 + 스튜디오 요소
- 예 2: 화(火) 일간 · 신강 · 역마살 — 변화 많은 아웃도어 크로스트레이닝
- 예 3: 토(土) 일간 · 식상 다수 — 꾸준한 반복 + 파트너 트레이닝

각 플랜은 "월~일 요일별 / 종목 / 시간 / 강도 / GIF 링크" 형식 표로.

### Step 8. 구현 가이드
- `js/app.js`에서 `renderPrescriptionDoc` 수정 지점
- 신규 파일: `js/dashboard.js`, `js/calendar.js`, `js/icons.js`
- `style.css` 추가 클래스 목록
- HTML 구조 변경(index.html의 `#result` 섹션 내부)

## 도구 사용법

- Read: `index.html`, `cards/index.html`, `style.css`, `js/app.js`
- Grep: 처방 렌더 함수 경로 추적 (`renderPrescription|plan-display|prescription-doc`)
- WebFetch: 오픈 라이선스 아이콘/GIF 소스 확인
- Write: `_workspace/04_experience_design.md`

## 출력 규칙

`_workspace/04_experience_design.md`는 **개발자가 그대로 구현할 수 있는** 수준이어야 한다. 와이어프레임은 ASCII/HTML, CSS 변수는 구체값, JS 함수 시그니처는 명확하게.