디자인 감각 제로, AI 도구 3개로 랜딩페이지 3시간 만에 완성한 방법

동화책은 만들었는데, 보여줄 곳이 없었다

아이에게 보여줄 AI 기반 동화책을 만들고 있다.

프로젝트 이름은 "원더 밸류(Wonder Values)".

5-7세 아이들에게 안전, 건강, 사랑 같은 가치를 전달하는 그림책 시리즈다.

미피(Miffy) 스타일의 귀여운 캐릭터들이 등장한다.

방패를 의인화한 '두로', 신호등 '리토', 소화기 '포무'.

기획도 했고, 캐릭터도 만들었고, 스토리도 썼다.

그런데 문제가 하나 있었다.

"이거 어디서 보여주지?"

pdf 파일을 직접 보내줄수도 없고,

잠재 독자를 모으려면 뭔가 있어 보이는 '랜딩페이지'가 필요했다.

디자인 감각 제로의 고민

솔직히 말하면, 나는 디자인을 못한다.

코드는 어떻게든 짜겠는데, 예쁘게 만드는 건 영 자신이 없다.

버튼 하나 배치하는 데도 한참을 고민하다가, 결국 "아 몰라" 하고 포기하기 일쑤였다.

그러던 중 조쉬님의 유튜브를 보게 됐다.

제미나이 3.0 핵심은 '디자인'입니다

AI Studio와 Antigravity를 조합하면 디자인 감각 없이도 랜딩페이지를 만들 수 있다는 내용이었다.

"이거다."

바로 따라해보기로 했다.

Step 1: 레퍼런스 훔쳐보기

디자인을 못하면, 잘 만든 걸 베껴야 한다.

mobbin.com에 들어갔다.

여기는 다양한 앱과 웹 디자인 레퍼런스가 모여 있는 곳이다.

랜딩페이지 카테고리를 훑어보다가 tally.so의 디자인이 눈에 들어왔다.

깔끔하고, 군더더기 없고, 폼이 살아 있었다.

스크린샷을 찍어두었다.

Step 2: AI Studio에서 초안 뽑기

Google AI Studio를 열고, 프롬프트를 넣었다.

<목표>
내가 만든 그림책 랜딩페이지 제작.
시리즈 그림책을 소개하며 잠재적인 독자 확보가 목적임.
</목표>

<context>
PRD문서, 동화책 json 파일
</context>

<디자인참고>
https://tally.so/
- 첨부한 이미지 참고
</디자인참고>

PRD 문서와 동화책 JSON 파일도 함께 첨부했다.

그러자 AI가 HTML/CSS 코드를 쏟아냈다.

하지만 첫 결과물은 영문이었고, 디테일이 부족했다.

두 번째 프롬프트를 날렸다.

1. 한글로 바꿔줘.
2. tally.so를 참고하여 디자인을 디테일하게 개선해줘.
3. 첨부한 이미지도 참고해서 디자인 디테일하게 개선해줘.

훨씬 나아졌다.

그리고 예상치 못한 보너스가 있었다.

AI Studio가 그림책 내용까지 웹에서 볼 수 있게 구현해줬다.

랜딩페이지만 부탁했는데, 덤으로 그림책 뷰어까지 얻은 셈이었다.

Step 3: Antigravity에서 Next.js로 변환

AI Studio에서 만든 코드를 다운로드 받았다.

이제 이걸 실제 프로젝트로 바꿔야 했다.

Antigravity를 열고, Claude Opus 4.5를 선택했다.

이 동화책의 랜딩페이지를 구현할거야.
wonder-values_react 이 폴더의 코드를 참고해서 next.js로 구현해줘.

wonder-values_react는 AI Studio에서 생성된 코드가 들어있는 폴더다.

한 번에 구현됐다.

자잘한 UI 수정만 몇 번 하니 완성.

막히는 부분이 없어서 오히려 당황스러웠다.

Step 4: Cloudflare Pages로 배포

예전에 블로그 배포할 때 썼던 Cloudflare Pages를 다시 꺼냈다.

GitHub 연결하고, 빌드 설정하고, 배포.

5분도 안 걸렸다.

https://wonder-values.pages.dev/

링크를 눌러보니 진짜 내 동화책 랜딩페이지가 떠 있었다.

"세련됐는데?"

아내에게 보여줬다.

"오, 세련되고 멋지다!"

솔직히 아내도 디자인을 잘 아는 사람은 아니다.

하지만 그 한마디가 뿌듯했다.

디자인 감각 제로인 내가 만든 페이지가 "세련됐다"는 평가를 받다니.

AI 도구의 힘이다.

3시간의 기록

정리하면 이렇다.

단계	도구	소요 시간
레퍼런스 수집	mobbin.com	30분
HTML 초안 생성	Google AI Studio	1시간
Next.js 변환	Antigravity + Opus 4.5	1시간
배포	Cloudflare Pages	30분
총합		약 3시간

디자인 감각? 필요 없었다.

코딩 실력? 프롬프트만 잘 쓰면 됐다.

막히는 부분? 없었다.

레퍼런스만 잘 찾으면, AI가 나머지를 해결해준다.

핵심은 '좋은 레퍼런스'

이번에 깨달은 게 있다.

AI에게 "예쁘게 만들어줘"라고 하면 애매한 결과가 나온다.

하지만 "이 사이트처럼 만들어줘"라고 하면 꽤 괜찮은 결과가 나온다.

AI 시대의 디자인 능력은 '직접 그리는 능력'이 아니다.

'좋은 레퍼런스를 찾는 눈'이다.

mobbin.com 같은 사이트에서 마음에 드는 디자인을 찾고, 스크린샷을 찍어서 AI에게 건네면 된다.

그게 전부다.

다음 단계

랜딩페이지는 완성했다.

이제 진짜 중요한 건 콘텐츠다.

원더 밸류의 첫 번째 에피소드 "헬멧을 쓰자!"를 완성해서 사전 등록자들에게 공유할 예정이다.

500명의 사전 등록이 목표.

그 데이터를 들고 출판사 문을 두드릴 생각이다.

랜딩페이지는 시작일 뿐이다.

당신도 해보세요

혹시 지금 만들고 싶은 게 있는데, "디자인을 못해서" 미루고 있다면.

1. mobbin.com에서 마음에 드는 레퍼런스를 찾는다
2. 스크린샷을 찍어서 AI Studio에 던진다
3. 나온 코드를 Antigravity로 다듬는다
4. Cloudflare Pages로 배포한다

3시간이면 된다.

생각보다 빨리, 생각보다 괜찮은 결과물이 나올지도 모른다.

나처럼.

관련 링크

• 완성된 랜딩페이지: wonder-values.pages.dev
• 참고 유튜브: 제미나이 3.0 핵심은 '디자인'입니다 - 조쉬님
• 레퍼런스 사이트: mobbin.com, tally.so
• 사용 도구: Google AI Studio, Antigravity, Cloudflare Pages