# 비개발자가 AI로 랜딩페이지 만들기: Google AI Studio + Vercel 배포 실전 가이드

> 출처: https://retn.kr/blog/ai-landing-page-guide/ · 수정 2026-03-10 · 리텐션 주식회사

비개발자도 구글 AI Studio와 클로드를 활용해 랜딩페이지를 만들 수 있다! 코딩 없이 반나절이면 프로젝트 완성, 초보자도 따라할 수 있는 실전 가이드 공개

> **비개발자도 코드 한 줄 안 치고 랜딩페이지를 만들 수 있다.** 근데 "쉽게 된다"는 말은 거짓말이고, 삽질은 여전히 필요하다. 이건 그 삽질의 솔직한 기록이다.

## TL;DR (3줄 요약)

- **Google AI Studio**에서 Gemini로 React 코드 생성 → **Claude Code**로 수정 → **Vercel**로 배포
- 비개발자도 반나절이면 랜딩페이지 완성 가능 (삽질 시간 포함)
- 결과물: [consulting.retn.kr](https://consulting.retn.kr/?ref=retn.kr)

## 참고한 레퍼런스

이 프로젝트는 아래 리소스들을 참고해서 진행했다.

### YouTube 튜토리얼

[Google AI Studio로 웹앱 만들기](https://www.youtube.com/watch?v=fawEaLKtD4Y&ref=retn.kr) 영상을 **3배속으로 보면서 어려운 부분만 돌려보며 3분 만에 핵심 파악**했다.

내 학습 방식은 이렇다: - 이미 아는 내용은 빠르게 스킵 - 모르는 부분만 발췌해서 집중 - 전체를 다 보려고 하지 않음

이 영상에서 배운 핵심: - AI Studio의 "Download App" 기능으로 완성된 React 프로젝트를 zip으로 받을 수 있다 - 프롬프트에 섹션별로 구체적인 내용을 넣으면 더 좋은 결과가 나온다

### 디자인 레퍼런스

| 리소스 | 용도 | 링크 |
| --- | --- | --- |
| Mobbin | UI/UX 레퍼런스 | mobbin.com |
| Spline | 3D 인터랙션 | spline.design |
| Dribbble | 디자인 영감 | dribbble.com |

## 사용한 툴 스택

| 단계 | 툴 | 역할 |
| --- | --- | --- |
| 디자인 레퍼런스 | Mobbin | 실제 서비스 UI 참고 |
| 3D 인터랙션 | Spline Design | 마우스 따라다니는 3D 오브젝트 |
| 코드 생성 | Google AI Studio (Gemini) | React + Tailwind 코드 자동 생성 |
| 코드 수정 | Claude Code | 에러 수정, 배포 자동화 |
| 배포 | Vercel | GitHub 연동 자동 배포 |
| 오디오 호스팅 | jsdelivr CDN | MP3 스트리밍 |
| STT | OpenAI Whisper | 음성을 텍스트로 변환 |

## Step 1: 레퍼런스 수집

### Mobbin에서 영감 얻기

[Mobbin](https://mobbin.com/?ref=retn.kr)은 앱/웹 UI 스크린샷 아카이브다. "consulting landing page" 같은 키워드로 검색하면 실제 서비스들의 랜딩페이지를 볼 수 있다.

**내가 원했던 디자인:** - 다크 모드 (프로페셔널한 느낌) - 미니멀하지만 임팩트 있는 Hero 섹션 - 성과 지표를 보여주는 Stats 섹션 - 신뢰감 주는 클라이언트 로고 마키

## Step 2: Spline으로 3D 인터랙션 만들기

[Spline](https://spline.design/?ref=retn.kr)은 **비개발자도 쓸 수 있는 웹용 3D 디자인 툴**이다. 코드 없이 3D 오브젝트 만들고, 마우스 인터랙션 추가하고, iframe으로 바로 임베드할 수 있다.

### 삽질 1: 텍스트가 안 바뀜

기존 프로젝트에서 텍스트를 수정하려고 했는데, 저장해도 반영이 안 됐다. 캐시 문제인가 싶어서 새로고침도 해보고, 다른 브라우저로도 해봤는데 안 됨.

**해결책**: 프로젝트를 **Duplicate**한 다음 수정하고 새 URL을 땄더니 됐다.

### 삽질 2: 워터마크

무료 플랜이라 Spline 워터마크가 붙는다. 유료 결제하면 없앨 수 있는데, 일단 MVP라서 그냥 뒀다.

## Step 3: Google AI Studio에서 코드 생성 (핵심!)

[Google AI Studio](https://aistudio.google.com/?ref=retn.kr)에서 **Gemini한테 랜딩페이지 코드를 짜달라고** 했다. 이게 이 프로젝트의 핵심이다.

### 프롬프트 구조 (실제 사용한 것)

`다음 내용으로 React 랜딩페이지를 만들어줘:

``[Hero]
``- 헤드라인: AI-Augmented Growth, Actually Measurable
``- 서브카피: UA부터 Retention까지...

``[성과 지표]
``- Meta ROAS: 5% → 135%
``- App Install CVR: +160%
``- CRM 재구매 리텐션: +30%

``[서비스]
``1. Acquisition: Paid Media, ASO, MMP
``2. Engagement: Braze, Amplitude, Mixpanel
``3. Product: 실험 플랫폼, 전환 퍼널 최적화
``4. Automation: n8n, Cursor, GCP

``[Testimonial]
``한승윤 (Carry) - 바인드 Marketing Lead
``"처음 부딪쳐보는 일들에 대해서 뚫는 방법론을 많이 배운 것 같아요..."

``[CTA]
``https://tidycal.com/simgyusup/15m
`

### Download App 기능 (게임 체인저)

AI Studio에서 **"Download App" 버튼**을 누르면 zip 파일로 React 프로젝트를 다운받을 수 있다:

- React 컴포넌트들
- Tailwind CSS 설정
- Vite 설정
- package.json

예전에는 코드를 복붙해서 직접 프로젝트 구조를 만들어야 했는데, 이제는 **버튼 하나로 완성된 프로젝트**를 받는다.

## Step 4: 첫 번째 대참사 - AI와 DNS 설정하다가 Ghost 블로그 날림

여기서 큰 삽질이 있었다. `retn.kr` 도메인을 Vercel에 연결하는 과정에서 **기존 운영 중이던 Ghost 블로그가 접속 불가 상태**에 빠졌다.

### AI의 세 가지 패착

**1. "이사" vs "공존"의 오해**

- **나의 의도**: 기존 Ghost 블로그(`retn.kr`)는 그대로 두고, Vercel은 서브 도메인으로 테스트용으로 쓰고 싶었다.
- **AI의 착각**: "아! 이 사용자는 낡은 집(Ghost)을 버리고 Vercel이라는 새집으로 완전히 옮기려나 보다!"
- **결과**: AI는 기존 블로그 IP와 충돌난다며 과감하게 삭제하라고 가이드했다.

**2. Vercel의 Valid 사인에 집착**

Vercel 대시보드에서 도메인 옆에 '초록불(Valid)'이 안 뜨면 AI가 불안해한다. "충돌나니까 기존 A 레코드 삭제해야 해요!"라고 계속 푸시.

**3. "되돌리면 된다"는 안일함**

DNS는 TTL(Time To Live) 때문에 전파 시간이 걸린다. 고쳐도 바로 안 돌아온다.

### 교훈: AI에게 맥락을 확실하게

> **나 기존 사이트는 살려둘 거야! Vercel은 서브 도메인으로만 쓸 거야.**

이 한 마디를 안 박아두면, 성실한 AI가 내 집을 철거하고 리모델링을 시작한다.

## Step 5: Claude Code로 수정 & Vercel 배포

**Google AI Studio가 뱉은 코드는 바로 돌아가지 않는다.** 여기서 Claude Code가 필요하다.

### 삽질 3: 테스티모니얼 오디오 만들기

클라이언트 인터뷰 영상이 있었는데, 영상은 각도가 이상해서 못 쓰고 오디오만 쓰고 싶었다.

`# 영상에서 오디오 추출
``ffmpeg -i video.mp4 -vn -acodec mp3 -ar 16000 `audio.mp3

`# Whisper로 STT (음성 → 텍스트)
``pip install `openai-whisper
`whisper audio.mp3 --language `ko

STT 결과를 정리해서 테스티모니얼 텍스트로 사용했다.

### 삽질 4: MP3 오디오 호스팅

MP3 파일을 웹에서 스트리밍하려면 호스팅이 필요하다.

| 시도 | 결과 |
| --- | --- |
| GitHub Raw URL | 다운로드만 됨, 스트리밍 안 됨 |
| GitHub Pages | public 폴더 직접 서빙 못 함 |
| jsdelivr CDN | 바로 스트리밍 됨 |

**해결책:**

`https://cdn.jsdelivr.net/gh/user/repo@main/public/audio/file.mp3
`

### 삽질 5: Vercel 배포 권한 에러

`vercel `--prod
`# Error: Git author must have access to the team
`

Git author 이메일이 Vercel 계정과 달라서 생긴 문제.

`git config user.email "your-vercel-email@example.com"
``git commit --amend --reset-author `--no-edit
`git push `--force

## Step 6: 두 번째 대참사 - 서브도메인 라우팅 지옥

`consulting.retn.kr` 서브도메인으로 랜딩페이지를 배포하려고 했다.

### 삽질 6: 한 프로젝트에서 서브도메인 라우팅 시도

처음에는 기존 `retn.kr` 프로젝트에서 `vercel.json` rewrites로 서브도메인 처리하려고 했다:

`{
``  "rewrites": [
``    {
``      "source": "/:path*",
``      "has": [{ "type": "host", "value": "consulting.retn.kr" }],
``      "destination": "/consulting/index.html"
``    }
``  ]
``}
`

**문제**: Vercel 빌드할 때 `public/consulting` 폴더가 제대로 포함 안 됨. 로컬에서는 되는데 Vercel 서버에서는 404.

### 삽질 7: 도메인이 다른 프로젝트에 묶여있음

`vercel domains add `consulting.retn.kr
`# Error: Cannot add since it's already assigned to another project
`

`vercel alias ls`로 확인해보니 이미 다른 프로젝트에 연결되어 있었다.

`# alias 제거
``vercel alias rm consulting.retn.kr `--yes

`# 새 프로젝트에 도메인 추가
``vercel domains add `consulting.retn.kr

### 최종 해결책: 별도 프로젝트로 분리

**한 프로젝트에서 서브도메인 라우팅하는 건 복잡하고 문제가 많다.** 그냥 별도 프로젝트로 분리하는 게 깔끔하다.

retn.kr 프로젝트 → retn.kr 도메인
consulting-src 프로젝트 → consulting.retn.kr 도메인

## 최종 결과물

- **URL**: [consulting.retn.kr](https://consulting.retn.kr/?ref=retn.kr)
- **스택**: React + Vite + Tailwind + Recharts
- **호스팅**: Vercel (별도 프로젝트)
- **3D**: Spline (iframe embed)
- **오디오**: jsdelivr CDN
- **소요 시간**: 반나절 (삽질 포함)

## 삽질 타임라인 요약

| # | 삽질 | 문제 | 해결 |
| --- | --- | --- | --- |
| 1 | Spline 텍스트 | 수정해도 반영 안 됨 | Duplicate 후 새 URL |
| 2 | Ghost 블로그 | DNS 설정 중 날아감 | 맥락 명확히 전달 |
| 3 | 오디오 추출 | 영상에서 음성만 필요 | ffmpeg + Whisper |
| 4 | GitHub Raw | 스트리밍 안 됨 | jsdelivr CDN |
| 5 | Vercel 권한 | git author 에러 | 이메일 설정 변경 |
| 6 | 서브도메인 라우팅 | rewrites 동작 안 함 | 별도 프로젝트 분리 |
| 7 | 도메인 이동 | 다른 프로젝트에 묶임 | alias 제거 후 재연결 |

## 비개발자를 위한 핵심 교훈

### AI 코드 생성의 현실

1. **Google AI Studio는 시작점을 줄 뿐이다** - 바로 production-ready 코드가 나오진 않는다
1. **Claude Code가 마무리를 한다** - 에러 수정, 배포, 인프라 작업
1. **삽질 시간은 여전히 필요하다** - 근데 예전보다 훨씬 짧아졌다

### AI에게 인프라 작업 시킬 때 주의점

1. **맥락을 명확하게** - "기존 거 살려둬", "이건 테스트용이야"
1. **DNS는 신중하게** - 되돌려도 전파 시간 필요
1. **한 번에 하나씩** - 여러 변경을 동시에 하면 뭐가 문제인지 모름

### 비개발자 웹개발 팁

1. **레퍼런스 먼저** - Mobbin, Dribbble에서 원하는 스타일 찾기
1. **AI에게 구체적으로** - 섹션별로 내용 정리해서 프롬프트 작성
1. **서브도메인은 별도 프로젝트** - rewrites 지옥에 빠지지 말 것
1. **배포는 Vercel** - GitHub 연동하면 push만 하면 자동 배포

## FAQ

### Q: 진짜 코드를 하나도 안 쳐도 되나요?

A: 거의 안 쳐도 된다. Google AI Studio가 코드를 생성하고, Claude Code가 수정/배포를 해준다. 내가 친 건 `npm run dev` 같은 명령어 정도.

### Q: 비용은 얼마나 드나요?

A: 모두 무료 플랜으로 가능하다. - Google AI Studio: 무료 - Vercel: 무료 (Hobby 플랜) - Spline: 무료 (워터마크 있음) - Claude Code: 구독 필요

### Q: 얼마나 걸리나요?

A: 삽질 포함 반나절. 삽질 없이 순조롭게 가면 2-3시간이면 충분하다.

### Q: 개발 지식이 전혀 없어도 되나요?

A: 기본적인 것들은 알면 좋다: - 터미널에서 명령어 실행하는 법 - Git push/pull 개념 - 도메인과 DNS가 뭔지

## 다음 할 것

- [ ] Spline 워터마크 제거 (유료 전환 or Three.js)
- [ ] 모바일 최적화
- [ ] GA4 + 전환 추적
- [ ] 더 많은 테스티모니얼 추가

## 관련 링크

- [Google AI Studio](https://aistudio.google.com/?ref=retn.kr) - AI 코드 생성
- [Vercel](https://vercel.com/?ref=retn.kr) - 무료 배포 플랫폼
- [Spline](https://spline.design/?ref=retn.kr) - 3D 웹 디자인
- [Mobbin](https://mobbin.com/?ref=retn.kr) - UI/UX 레퍼런스
- [YouTube 튜토리얼](https://www.youtube.com/watch?v=fawEaLKtD4Y&ref=retn.kr) - 참고한 영상

_2025.12.27 | 심규섭_