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

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

TL;DR (3줄 요약)

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

참고한 레퍼런스

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

YouTube 튜토리얼

Google AI Studio로 웹앱 만들기 영상을 3배속으로 보면서 어려운 부분만 돌려보며 3분 만에 핵심 파악했다.

내 학습 방식은 이렇다:

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

이 영상에서 배운 핵심:

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

디자인 레퍼런스

사용한 툴 스택

Step 1: 레퍼런스 수집

Mobbin에서 영감 얻기

Mobbin은 앱/웹 UI 스크린샷 아카이브다. "consulting landing page" 같은 키워드로 검색하면 실제 서비스들의 랜딩페이지를 볼 수 있다.

내가 원했던 디자인:

• 다크 모드 (프로페셔널한 느낌)
• 미니멀하지만 임팩트 있는 Hero 섹션
• 성과 지표를 보여주는 Stats 섹션
• 신뢰감 주는 클라이언트 로고 마키

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

Spline은 비개발자도 쓸 수 있는 웹용 3D 디자인 툴이다. 코드 없이 3D 오브젝트 만들고, 마우스 인터랙션 추가하고, iframe으로 바로 임베드할 수 있다.

삽질 1: 텍스트가 안 바뀜

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

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

삽질 2: 워터마크

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

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

Google AI Studio에서 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 파일을 웹에서 스트리밍하려면 호스팅이 필요하다.

해결책:

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
• 스택: React + Vite + Tailwind + Recharts
• 호스팅: Vercel (별도 프로젝트)
• 3D: Spline (iframe embed)
• 오디오: jsdelivr CDN
• 소요 시간: 반나절 (삽질 포함)

삽질 타임라인 요약

비개발자를 위한 핵심 교훈

AI 코드 생성의 현실

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

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

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

비개발자 웹개발 팁

1. 레퍼런스 먼저 - Mobbin, Dribbble에서 원하는 스타일 찾기
2. AI에게 구체적으로 - 섹션별로 내용 정리해서 프롬프트 작성
3. 서브도메인은 별도 프로젝트 - rewrites 지옥에 빠지지 말 것
4. 배포는 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가 뭔지

관련 링크

• Google AI Studio - AI 코드 생성
• Vercel - 무료 배포 플랫폼
• Spline - 3D 웹 디자인
• Mobbin - UI/UX 레퍼런스
• YouTube 튜토리얼 - 참고한 영상