---
title: "📓 작업일지 — 모바일 로그인 히어로 오버레이·gradient fade + 시드이미지 webp 경량화"
category: "worklog"
parent: "Claude Code 작업일지"
updated: "2026-07-03"
priority: "Low"
purpose: "모바일 로그인 화면의 러닝 히어로 이미지를 확대·오버레이 구조로 재구성하고(사장님 지시②), record-detail 시드 이미지 3종을 PNG에서 webp로 전환해 98.2% 용량을 절감한(사장님 지시①) 기록. CSS·에셋만 변경, 로그인 로직·폼 순서는 무접촉."
read_when: ["모바일 로그인 히어로", "running-seed 오버레이", "시드이미지 webp 전환", "auth-scrim 그라디언트"]
document_type: "개발일지"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260703_130019"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록 본레포(ccy-hansbridge/dallog), 커밋 ebd7c2f(2026-07-03)."
---

# 작업일지 — 모바일 로그인 히어로 오버레이·gradient fade + 시드이미지 webp 경량화

> 사장님 지시 2건이 같은 커밋에 함께 반영됐다. ① record-detail 시드 이미지 3종의 파일 용량이 과도하게 커서 webp로 경량화. ② 모바일 로그인 화면의 러닝 히어로 이미지를 더 크게 보여주고, 하단이 뚝 끊기던 것을 자연스러운 그라디언트로 바꾸며, 로그인 타이틀이 신발 이미지 바로 아래 오도록 오버레이 처리.

## 1. 무엇을 했나

- **모바일 로그인 히어로(사장님②)**: `running-seed` 히어로 영역을 `min-height 46vh`로 확대하고, 이미지 내 밑창 위치를 `position 40%`로 하향 조정. 하단의 하드 컷을 `var(--bg)`로 향하는 그라디언트 페이드로 전환. 로그인 패널에 `margin-top: calc(-1 * var(--sp-120))`을 줘 카카오 로그인 버튼이 신발 이미지 바로 아래 오도록 오버레이. 다크/라이트 동일 구조를 유지하되 페이드는 `--auth-scrim` + `--bg` 조합으로 테마별로 다르게 적응. raw px 없이 CSS만 변경, 로그인 로직·버튼·폼 순서는 접촉하지 않음.
- **시드이미지 경량화(사장님①)**: `body-seed`·`running-seed`·`strength-seed` PNG(1024x1536, 합계 5.71MB)를 webp(800x1200, quality 78, 합계 104KB)로 전환 — 98.2% 절감. `index.css` 내 11곳의 `url(...)` 참조를 `.png`→`.webp`로 갱신. 앱이 참조하던 PNG 파일은 삭제(문서용 원본 시드 이미지는 별도 보존). 데스크탑 로그인·스플래시·기록상세 카드에서 시각적으로 동일하게 보이는지 확인.
- 두 변경이 `running-seed` CSS 라인에서 서로 얽혀 있어 한 커밋으로 처리됨.
- Codex 사전·사후 검수 + `npm run build` 통과.

## 2. 주요 변경 파일

| 파일 | 내용 |
|---|---|
| `src/index.css` | 모바일 로그인 히어로 오버레이·그라디언트 페이드 CSS, 시드이미지 참조 11곳 `.png`→`.webp` |
| `public/record-detail/body-seed.webp` / `running-seed.webp` / `strength-seed.webp` | 신규 추가(경량화 결과물) |
| `public/record-detail/body-seed.png` / `running-seed.png` / `strength-seed.png` | 삭제(webp로 대체) |

### 핵심 발췌 (경량화 결과)

| 파일 | 이전(PNG) | 이후(webp) |
|---|---|---|
| body-seed | 2,053,663 bytes | 28,442 bytes |
| running-seed | 1,849,782 bytes | 44,926 bytes |
| strength-seed | 1,804,856 bytes | 32,522 bytes |
| 합계 | 5.71MB | 104KB (약 98.2% 절감) |

## 3. 관련 커밋

- `ebd7c2f` feat(login/assets): 모바일 로그인 히어로 오버레이·gradient fade + 시드이미지 webp 경량화 (2026-07-03)

## 4. 남은 이슈

커밋 기준 별도로 언급된 남은 이슈는 없음.