---
title: "📓 작업일지 — 랜딩 페이지 앱 설치 CTA·섹션 개편 + 이미지 최적화"
category: "worklog"
parent: "Claude Code 작업일지"
updated: "2026-07-14"
priority: "Medium"
purpose: "루트(/) 랜딩 페이지에 다크 고정을 해제해 시스템/앱 테마를 따르게 하고, 신규 '앱으로 가기' CTA와 앱 설치 섹션을 추가, 스크린샷 이미지를 재압축한 기록(demo 검증분 main 반영)."
read_when: ["랜딩 페이지", "LandingPage.tsx", "app-install", "플레이스토어 CTA", "이미지 CLS", "랜딩 다크고정 해제"]
document_type: "개발일지"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260714_164627"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록 본레포(ccy-hansbridge/dallog), 커밋 e3545fd(2026-07-14, demo 검증분 main 반영 — deploy 배치 커밋의 일부)."
---

# 작업일지 — 랜딩 페이지 앱 설치 CTA·섹션 개편 + 이미지 최적화

> 루트(/) 랜딩 페이지는 원래 방문 시 항상 다크 테마로 고정되도록 만들어져 있었다. 이번 작업으로 이 고정을 풀어 사용자의 시스템/앱 테마 설정을 그대로 따르게 하고, 아직 게시 전인 플레이스토어 출시에 대비한 "앱으로 가기" 유도 섹션을 새로 추가했다.

## 1. 무엇을 했나

### 다크 테마 고정 해제
- 기존에는 `LandingPage` 마운트 시 `useEffect`로 `document.documentElement`에 `data-theme="dark"`를 강제로 설정하고 언마운트 시 원복하는 방식이었음. 이 로직을 제거하고, 전역에서 처리되는 `index.html` 선행 스크립트 + `App.tsx`의 `applyTheme`을 그대로 따르도록 변경(랜딩도 시스템/토글 테마 반영).
- `landing.css`의 `.lp` 배경색도 미정의 `--text1` 변수의 고정 폴백값(`#ededed`)에 의존하던 것을 전역 `--text` 토큰으로 교정.

### 앱 설치 CTA·섹션 추가
- 히어로 영역에 "앱으로 가기" 버튼(`PhoneIcon`) 추가 — 클릭 시 `#app-install` 섹션으로 부드럽게 스크롤.
- 기존 "지금 달록과 시작하세요" 다운로드 섹션을 앱 설치 전용 섹션(`id="app-install"`)으로 확장 — 앱 소개 문구, 체크리스트(홈 화면 아이콘 실행·웹과 동일 기능·안드로이드 우선 출시), Google Play 설치 버튼.
- `PLAY_STORE_URL`이 아직 빈 문자열(게시 전 placeholder)이면 "플레이스토어 출시 예정" 비활성 버튼을 표시하고, URL이 채워지면 자동으로 실제 설치 링크 버튼으로 전환되는 구조.
- CTA 문구도 "무료로 시작하기" → "로그인 없이 체험"으로 변경(게스트 진입이라는 의미를 더 명확히).

### 이미지 레이아웃 밀림(CLS) 방지
- 캐러셀·기능 스크린샷 `<img>`에 원본 픽셀 치수를 `IMG_DIM` 맵으로 미리 지정해 `width`/`height` 속성으로 공간을 예약 — 지연 로딩 이미지가 늦게 로드되며 레이아웃이 밀리는 문제(앵커 스크롤이 엉뚱한 위치에 멈추는 현상) 해소.
- "앱으로 가기" 스크롤에도 안전망으로 450ms 후 재정렬(`scrollIntoView` 재호출)을 추가.

### 이미지 재압축
- 랜딩 스크린샷 6종(`lp-crop-runtype.png`, `lp-crop-shoes.png`, `lp-crop-strinput.png`, `lp-crop-summary.png`, `lp-run-metrics.png`, `lp-str-gauge.png`, `lp-thumb.png`)의 바이너리가 대폭 축소된 상태로 교체됨(예: `lp-str-gauge.png` 239,907 → 99,649 bytes).

## 2. 주요 변경 파일

| 파일 | 내용 |
|---|---|
| `src/pages/LandingPage.tsx` | 다크고정 해제, 앱 설치 CTA·섹션, 이미지 치수 예약(+116줄) |
| `src/pages/landing.css` | 색상 토큰 교정, 앱 섹션 스타일(+55줄) |
| `public/landing/lp-*.png` | 스크린샷 7종 재압축(용량 감소) |

### 핵심 발췌 — 다크 고정 해제
```diff
-  useEffect(() => {
-    const html = document.documentElement
-    const prev = html.getAttribute('data-theme')
-    html.setAttribute('data-theme', 'dark')
-    return () => { if (prev) html.setAttribute('data-theme', prev); else html.removeAttribute('data-theme') }
-  }, [])
+  // 테마는 index.html 선행 스크립트 + App.tsx(applyTheme)가 전역 처리 — 랜딩도 시스템/토글 테마를 그대로 따른다
```

## 3. 관련 커밋

- `e3545fd` deploy(main): demo 검증분 일괄 반영 — 랜딩 앱CTA/섹션 포함 (2026-07-14)

## 4. 남은 이슈

- `PLAY_STORE_URL`이 코드상 빈 문자열(placeholder) — 플레이스토어 게시 후 실제 URL로 교체가 필요함이 코드 주석에 명시되어 있음(`TODO: 플레이스토어 게시 후 실제 스토어 URL로 교체`).