1. 처음부터 끝까지 만들어 보기

이제 지금까지 배운 모든 것을 모아 실전 프로젝트를 진행합니다. 첫 번째는 가장 흔하면서도 중요한 결과물, 제품 랜딩 페이지입니다. 가상의 서비스를 하나 정해두고, 빈 캔버스에서 완성된 랜딩 페이지까지 가보겠습니다.

예제 서비스: "하루심기" — 매일 식물에게 물 주듯 작은 습관을 기르는 앱

랜딩 페이지의 목표는 단 하나, 방문자를 행동(가입·다운로드)하게 만드는 것입니다. 이 목표를 늘 염두에 두고 만듭니다.

2. 1단계 — 구조 잡기

랜딩 페이지에는 검증된 기본 골격이 있습니다. 먼저 전체 구조부터 요청합니다.

"하루심기" 앱의 랜딩 페이지를 만들어줘.
습관 형성 앱이고, 매일 작은 습관을 식물 키우듯 기르는 컨셉이야.
구조는:
1. 히어로 (한 줄 슬로건 + 앱 다운로드 버튼 + 앱 미리보기 이미지 자리)
2. 핵심 기능 3가지 (아이콘 + 제목 + 설명)
3. 작동 방식 3단계
4. 사용자 후기 3개
5. 요금제 (무료 / 프로)
6. 마지막 가입 유도 + 푸터
분위기: 따뜻하고 차분한, 식물을 연상시키는 초록·어스톤 계열.
폰트는 부드럽고 친근하게.

3. 2단계 — 히어로 섹션 다듬기

히어로는 방문자가 3초 안에 보는 곳입니다. 가장 공들여야 합니다.

히어로 섹션을 더 강하게 만들어줘.
- 슬로건을 더 크고 굵게, 한눈에 들어오게
- "무엇을 주는 서비스인지"가 부제목 한 줄로 분명하게
- 다운로드 버튼을 눈에 띄게 (App Store / Google Play 두 개)
- 오른쪽에 앱 화면 목업을 살짝 기울여 배치

4. 3단계 — 신뢰 요소 강화하기

방문자를 행동하게 하려면 믿음을 줘야 합니다. 후기와 숫자가 그 역할을 합니다.

후기 섹션을 더 신뢰감 있게 만들어줘.
- 각 후기에 이름·간단한 프로필(가상)·별점 추가
- 상단에 "이미 12,000명이 함께하고 있어요" 같은 지표 한 줄
작동 방식 섹션은 1-2-3 번호를 크게 강조해줘.

5. 4단계 — 반응형 확인하기

랜딩 페이지는 휴대폰에서 보는 사람이 더 많습니다. 모바일 화면도 반드시 챙겨야 합니다.

모바일 화면(좁은 너비)에서는 어떻게 보이는지 보여줘.
- 가로로 나열된 기능 카드는 세로로 쌓이게
- 다운로드 버튼은 손가락으로 누르기 좋게 충분히 크게
- 글자가 너무 작아지지 않게

6. 5단계 — 브랜드로 통일하고 점검하기

5장에서 배운 대로 디자인 시스템을 적용해 통일감을 줍니다.

전체적으로 색과 폰트를 통일해줘.
포인트 색은 풀잎 초록(#4CAF7D)으로, 배경은 따뜻한 아이보리로.
모든 버튼 모서리와 카드 그림자를 일관되게.

마지막으로 점검 목록을 훑습니다.

• 히어로가 3초 테스트를 통과하는가?
• CTA(행동 버튼)가 충분히 눈에 띄는가?
• 모바일에서 깨지지 않는가?
• 색·폰트·간격이 일관되는가?
• 더미 텍스트가 남아있지 않은가?

7. 6단계 — 내보내기

완성했다면 7장에서 배운 대로 내보냅니다.

• 웹에 바로 올린다면 → HTML
• 팀 검토용으로 → 공유 URL
• 실제 서비스로 개발한다면 → Claude Code 핸드오프

8. 직접 해보기

위 과정을 본인만의 서비스로 처음부터 끝까지 따라 해보세요.

1. 만들 가상 서비스를 하나 정합니다(이름·한 줄 설명·타깃).
2. 6개 섹션 구조로 랜딩 페이지를 만듭니다.
3. 히어로를 3초 테스트에 통과할 때까지 다듬습니다.
4. 모바일 화면을 점검합니다.
5. 점검 목록을 모두 체크한 뒤, HTML 또는 공유 URL로 내보냅니다.

9. 정리하며

• 랜딩 페이지의 목표는 방문자를 행동하게 하는 것 하나다.
• 구조 → 히어로 → 신뢰 요소 → 반응형 → 브랜드 통일 → 내보내기 순으로 쌓는다.
• 히어로는 3초 테스트, 전체는 점검 목록으로 확인한다.

다음 프로젝트에서는 여러 화면이 이어지는 앱 온보딩 플로우를 만듭니다.