ChatGPT와 Lovable을 활용한 랜딩페이지 생성 실험기

소개

최근 여행가J님이 공유한 기획서 생성용 맵을 활용해 ChatGPT로 PRD(Product Requirements Document)를 작성하고, 바이브코딩 기반 웹사이트 제작 툴인 Lovable을 사용해 랜딩페이지를 만들어봤어요 😊

"프롬프트 + 자동 제작 툴" 조합해주는 전달주신 브랜드 맵이 어떤 생산적인 흐름을 만들어낼 수 있는지 궁금해서 진행했어요.

진행 방법

사용한 도구

  • 💬 ChatGPT (PRD 자동 생성)

  • 🌐 Lovable (랜딩페이지 제작)

전체 흐름

  1. 여행가J님의 프롬프트 활용

    • 스텝별로 항목이 잘 정리된 브랜드맵 프롬프트를 ChatGPT에 입력

    • 구상한 서비스 아이디어에 맞춰 PRD를 자동 생성

  2. Lovable로 PRD 내용을 시각화

    • ChatGPT가 생성한 내용을 Lovable에 입력하여 랜딩페이지 생성

    • 몇 분 만에 시각적으로 깔끔한 첫 버전 완성 ✨

      자주색 배경을 가진 웹 사이트 디자인

결과와 배운 점

  • 좋은 PRD 프롬프트는 곧 '생산성을 높이는 템플릿'이다 💡

    • 어떤 관점에서 기획서를 만들지 정리되어 있으니 흐름이 매끄러웠어요

  • 랜딩페이지 자동 생성의 한계도 체감

    • 원하는 컨셉에 맞는 정교한 페이지는 바로 나오지 않아서 수정이 필요했어요. 하지만 원래 만들고 싶은 플랫폼이 있었는데 한 번 구성해봐서 좋았습니다.

    • 콘텐츠의 깊이나 구조는 여전히 별도 기획이 필요했습니다

  • 하지만 시제품을 빠르게 확인하고 방향을 논의하기엔 충분한 수준

    • 초기 아이디어 검토용으로는 매우 유용하다고 느꼈어요 🙌

도움 받은 글(내용)

  • 여행가J님의 기획서 작성 프롬프트 (브랜드맵)

👉 이 게시글도 읽어보세요