퍼널용 홈페이지 생성 서비스 만들기 — 수익화 MVP 스터디 3주차 후기

1. 들어가며 / 문제 상황

이번 스터디에서 만들고자 했던 것은, 개인별 비지니스에 최적화된 퍼널용 홈페이지 3종 세트(리드마그넷 신청 페이지 → SLO 판매 감사페이지 → 구매 감사페이지)을 제작하는 서비스입니다.

각 페이지에 논리구조가 정해져 있다보니, "수강생이 질문 몇 개에만 답하면, 퍼널 홈페이지가 자동으로 만들어지면 좋겠다"라는 생각을 했었는데요.

마침 지피터스 수익화 웹 MVP 런칭 스터디에 참여하게 되어, 이 아이디어를 직접 구현해 보기로 했습니다.

문제는… 바이브 코딩이 처음이라는 것이었습니다. 😅

2. 사용 툴

• Claude: 퍼널 설계도 생성, HTML 페이지 생성, 전체 로직 설계, 바이브코딩

• Supabase: 데이터베이스 (리드 정보 저장, 구매 여부 관리)

• 토스페이먼츠: SLO 상품 결제 연동

• GSD 방식 + 하네스 엔지니어링: 스터디장님이 제공한 결제 연동 최적화 방법

3. 해결 과정

Step 1: "큰 그림" 대신 "조각 조각"부터 — 1단계 완성

처음에는 전체 서비스를 한 번에 기획하고 개발해야 하나 싶어서 막막했습니다. 하지만 스터디장님의 첫날 오프라인 조언을 듣고 방향을 바꿨습니다.

핵심 전략: 전체를 한 번에 만들지 말고, 가장 핵심인 "결과물"부터 조각 조각 만들어라.

그래서 1단계 목표를 이렇게 잡았습니다:

1. 퍼널 홈페이지 3종 페이지의 논리 구조 설계

2. 내 사례를 기반으로 샘플 페이지 HTML 생성

3. 두 번째 페이지(SLO 판매)에 토스페이먼츠 결제 연동

[스크린샷 삽입: 완성된 3종 페이지 샘플]

Step 2: 토스페이먼츠 결제 연동 — 3주차 오프라인 모임

바이브 코딩에서 가장 난이도가 높다는 결제 연동. 이걸 하기 위해 3주차 오프라인 모임에서 팁스타운으로 향했습니다.

오후 1시부터 5시까지, 스터디장님의 리딩으로 진행했는데요. 결론적으로 스터디장님이 미리 준비해 주신 toss.g 파일 덕분에 생각보다 순탄하게 결제가 붙었습니다.

GSD 방식이란?

• 스터디장님이 제공해 주신 toss.g 파일 안에는 토스페이먼츠 개발 문서와 함께, agent 폴더, rules 폴더, schema 폴더, scripts 폴더 등이 포함되어 있었습니다.

• 이 파일을 프로젝트에 복사해 놓고 바이브 코딩을 하니, 결제 연동이 별다른 에러 없이 구현되었습니다.

• 일종의 "치트키" 같은 느낌인데, 요즘 화제인 하네스 엔지니어링(초보자도 통제 가능하게 원하는 결과를 뽑아내는 방법)의 일환인 것 같습니다.

💡 초보자 팁: 결제처럼 복잡한 기능은 혼자 삽질하기보다, 이미 검증된 설정 파일이나 가이드를 활용하는 게 훨씬 효율적입니다.

[스크린샷 삽입: 토스페이먼츠 결제 테스트 성공 화면]

Step 3: 2단계 설계 — "질문 → 설계도 → HTML" 자동 생성 파이프라인

1단계(샘플 페이지 + 결제)를 마치고 나니, 다음이 보이기 시작했습니다. 이 서비스의 본질은 이겁니다:

수강생이 10~14개 질문에 답변 → AI가 퍼널 설계도 자동 생성 → 검수/수정 → HTML 3종 페이지 자동 생성 → 다운로드

이것을 2단계 목표로 잡고, 다음과 같이 프로세스를 정리했습니다:

< 5단계 퍼널형 홈페이지 생성 프로세스 >

아직 남은 과제: 3단계의 벽 🧱

2단계에서 만들어진 HTML은 아직 "돌아가는" 페이지가 아닙니다. 실제로 작동하려면:

• Supabase에 테이블 자동 생성 (이름, 연락처, 이메일 저장)

• 리드마그넷 신청 → SLO 구매 여부 구분

• 구매자/미구매자별 문자 시퀀스 자동 발송

• 회원가입 시스템 구축 (계정별 결과물 분리)

• 관리자 모드에서 전체 데이터 확인

이것이 3단계인데, 솔직히 지금은 2단계에서 만들어진 html 결과물을 어떻게 1단계 샘플처럼 돌아가게 만들지, 이때부터는 회원개념이 필요하고, 회원별 supabase 테이블과 결제가 붙어야 하는데. ㅠㅠ 갑자기 막막한 상태입니다. 마지막 주차 스터디 전에 어느 정도 만들어 가야 할 것 같은데 말이죠.

4. 현재까지의 결과물

✅ 완성된 것:

• 퍼널 홈페이지 3종 논리 구조 설계

• 내 사례 기반 샘플 HTML 3종 페이지

• 토스페이먼츠 결제 연동 (SLO 판매 페이지)

• 2단계 프로세스 설계 (질문 → 설계도 → HTML)

🔄 진행 중:

• 인풋 질문 기반 설계도 자동 생성 구현

• 설계도 → HTML 변환 자동화

⬜ 남은 것:

• 생성된 HTML을 실제 "돌아가는" 서비스로 연결

• 회원가입/계정 시스템

• DB 자동 연동 + 문자 시퀀스 발송

5. 느낀 점 및 한계

좋았던 점

• "조각부터 만들기" 전략이 정말 유효했습니다. 큰 그림에 압도당하지 않고, 눈에 보이는 결과물을 하나씩 쌓아가니 동기부여가 됩니다.

• 오프라인 모임의 힘. 특히 결제 연동처럼 혼자 하면 며칠은 걸릴 작업을, 스터디장님의 가이드와 toss.g 파일 덕분에 반나절 만에 해결했습니다.

• GSD 방식 / 하네스 엔지니어링이라는 개념을 알게 된 것. 아직 정확히 이해한 건 아니지만, 초보자가 바이브 코딩에서 원하는 결과를 얻는 데 굉장히 효과적인 접근법이라는 걸 체감했습니다.

아쉬운 점 / 한계

• 2단계에서 생성된 HTML이 정적 파일에 그치는 것이 현재 가장 큰 한계입니다. 실제 서비스로 만들려면 DB 연동, 회원 시스템 등 갈 길이 멉니다.

• 3단계를 어떻게 회원단위로 이어 붙이지 아직 감이 안 잡힙니다. 바이브 코딩 초보에게는 "쪼개는 것뿐 아니라 이어 붙이는 방법"을 아는 것 자체가 실력인 것 같습니다.

다음 계획

• 마지막 주차 스터디 모임에서 3단계 최종 완성 방법에 대해 아이디어 얻기

• 회원가입 → 계정별 결과물 분리 → DB 연동 → 문자 시퀀스까지, 작은 단위로 쪼개서 만은거 이어 붙이는 방법 찾을 예정

• 포기하지 않고 끝까지 완성해 보겠습니다 💪

생전 처음 바이브 코딩을 하면서 "이렇게 어려운 걸 선택했나…" 싶은 순간이 수없이 있었지만, 돌아보면 매주 조금씩 전진하고 있다는 게 느껴집니다. 비슷한 도전을 하고 계신 분들께 조금이나마 용기가 되었으면 좋겠습니다.

긴 글 읽어주셔서 감사합니다! 🙏