---
title: "📓 작업일지 — 랜딩 소개 페이지 개선 9건(실제화면 캐러셀·기능섹션5)"
category: "worklog"
parent: "Claude Code 작업일지"
updated: "2026-07-08"
priority: "Medium"
purpose: "루트(/) 랜딩(소개) 페이지의 아이콘을 이모지에서 실루엣 SVG로 바꾸고, 실제 화면을 슬라이드형 캐러셀로 재구성했으며, 러닝/근력/코치/입력/AI 5개 기능을 부분크롭 확대 이미지+캡션으로 소개하는 섹션을 추가한 기록."
read_when: ["랜딩 페이지", "LandingPage.tsx", "소개 캐러셀", "기능 섹션", "SEO 랜딩"]
document_type: "개발일지"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260708_123523"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록 본레포(ccy-hansbridge/dallog), 커밋 d5b2823(2026-07-08 main 반영, 원 작업 2026-07-07)."
---

# 작업일지 — 랜딩 소개 페이지 개선 9건(실제화면 캐러셀·기능섹션5)

> 2026-07-06에 신설한 루트(/) 소개 랜딩 페이지를, 다음 날 이모지 아이콘 대신 브랜드 실루엣 SVG로 바꾸고 "실제 화면"을 좌우로 넘겨보는 캐러셀로, 5개 기능(러닝·근력·AI 코치저널·편한 입력·AI에게 보내기)을 각각 부분 크롭 확대 이미지+캡션으로 소개하도록 확장했다.

## 1. 무엇을 했나

### 아이콘 — 이모지 → 실루엣 SVG
- "달록이 하는 일" 3카드(세 가지를 한 곳에·AI 코치·기록)의 아이콘을 `📊`/`🤖`/`📅` 이모지에서 `stroke` 기반 선형 SVG로 교체.

### 실제 화면 — 고정 3장 → 캐러셀 8장
- 기존 고정 3장(러닝 피트로그·브리프·코치노트)을 8장(`CAROUSEL` 배열: 브리프 대시보드·기록 달력·기록 썸네일·주별 러닝 셀·근력 기록·러닝 요약·근력 밸런스·코치노트)으로 확장.
- `trackRef` + `scrollBy`로 좌우 화살표 슬라이드(`clientWidth * 0.6`만큼 이동) 구현.
- 각 슬라이드에 캡션(`figcaption`) 추가.

### 기능 섹션 5종 신설
- `FEATURES` 배열로 러닝(`run`)·근력(`str`)·AI 코치저널(`coach`)·편한 입력(`input`)·AI에게 보내기(`ai`) 5개 섹션 정의.
- 섹션마다 태그·타이틀·설명 + 부분 크롭 확대 스크린샷(`lp-crop-*.png`)과 캡션 배열(`shots`).
- 신규 이미지 17개(`public/landing/lp-*.png`) 추가.

### 스타일 — 이미지 최대폭 고정
- `landing.css`에 캐러셀(`lp-carousel*`)·기능섹션(`lp-crop*` 등) 스타일 75줄 추가, 이미지 최대폭을 고정해 화질(과확대로 인한 흐림) 개선.

## 2. 주요 변경 파일

| 파일 | 내용 |
|---|---|
| `src/pages/LandingPage.tsx` | 아이콘 SVG화·캐러셀·기능섹션5 로직(+133줄) |
| `src/pages/landing.css` | 캐러셀·기능섹션 스타일(+75줄) |
| `public/landing/lp-*.png` (17개 신규) | 캐러셀·기능섹션용 스크린샷/크롭 이미지 |

## 3. 관련 커밋

- `d5b2823` feat(landing): 랜딩 소개 개선 9건 — 실루엣SVG·AI워딩·실제화면 캐러셀·기능섹션5(러닝/근력/코치/입력/AI) 부분크롭확대+캡션·이미지 최대폭 고정 화질개선 (원 작업 2026-07-07, main 반영 2026-07-08)

## 4. 남은 이슈

- 커밋 메시지 기준으로 별도 남은 이슈 언급 없음.