소개
지난 번에 Claude MCP를 이용하여 Airbnb 사이트 클론코딩을 경험해 보았는데 큰 어려움이 없었으므로, 이번에는 Claude Code를 이용하여 애초부터 의도했던 랜딩페이지 만들기를 바이브 코딩으로 시도해보았다.
랜딩페이지의 서비스 컨셉은 이렇다.
서비스명: ExcelPro - 엑셀 업무 자동화 플랫폼
핵심 기능: DB + VBA CRUD 코드 자동 생성
타겟: 엑셀 사용 기업 직장인
진행과정
지난 번에 서비스 기획이 중요함을 깨달았기 때문에, 이번에는 우선 PRD에 해당하는 구축전략에 공을 들였다. 프롬프트를 몇 번 수정해가며, 제법 많은 시간을 들여 구축전략을 md파일로 작성했다. 다음과 같은 내용으로 정말 "잘" 만들어졌다.
Proj 개요(서비스 컨셉, 핵심가치 제안)
타겟 고객 분석 (주요 페르소나, 고객 여정 맵핑)
랜딩페이지 구조 설계 (페이지 플로우, 핵심 메시징 전략)
UI/UX 디자인 전략 (디자인 원칙, 컬러 팔레트, 타이포그래피)
콘텐츠 전략 (SEO 키워드, 콘텐츠 마케팅 계획)
회원가입 퍼널 설계 (단계별 전환, 가입 폼 최적화)
기술적 구현방안 (프론트엔드 기술스택, 백엔드 기술스택, 서비스 아키텍처, 배포 및 인프라)
마케팅 및 SEO 전략(검색엔진 최적화, 퍼포먼스 마케팅)
성과측정지표 (마케팅 KPI, 재시보드 구성)
론칭 계획 (소프트 론칭 - 공식 론칭 - 성장 가속화)
위험 요소 및 대응 방안
실행 체크리스트 (주차별)
예산 계획 (개발비용, 마케팅 비용, 월간운영비용)
성공 요인 분석 (CFS, 경쟁우위요소)
스터디장이 제공한 정적 웹사이트 & 퍼널 랜딩페이지 전문가 팀 AI Assistant도 md 파일로 저장하고서, 프로젝트 구성을 요청했다.
프론트엔드 web(Next.js + TS + Tailwind)와 랜딩 페이지 골격 등이 구성되었는데 곧 이어서 백엔드 의존성 설치 오류를 만났다. 백엔드 모듈은 나중에 하기로 하고, 웹 실행을 해서 확인하려고 했는데 index.html이 없어서 실행해볼 수가 없었다.
살펴보니 기술스택에서 React.js 기반으로 되어있음을 뒤늦게 발견했다. 어떻게 수정해야 하는지 AI에게 물어보니 전면적으로 바꿔야 한단다.
만 들어진 index.js 파일을 직접 브라우저에서 열어볼 수는 없습니다. 이 파일을 실행하여 랜딩페이지를 확인하려면 빌드(Build) 과정을 거쳐야 합니다. 빌드란 index.js 파일을 비롯한 여러 자원(CSS, 이미지 등)을 실제 웹 서버에 배포할 수 있는 형태로 변환하는 작업입니다아, 이러면 안되는 거였구나... 또 하나 배웠다.
일단 작업이력을 로그파일에 남기라고 하고 작업을 중단했다. 흔히 PRD 라고 말하는 제품기획을 너무 거창하게 한 것을 간과한 것이다.
기획서에서 다음 부분을 축소 또는 제거하고서, 프로젝트를 처음부터 다시 구축했다.
프론트엔드 기술스택 수정 : Vanila JS 등으로 변경
UI/UX 디자인 전략 : 수정(스터디장이 제공한 하프노마드 바이오그래피 (링크참조)
백엔드 기술스택, 배포 및 인프라, 퍼포먼스 마케팅 등 : 추후 설정
그러고 나니 이번에는 다음과 같은 페이지가 튀어나왔다.
코딩 사례도 영상으로 실감 나게 보여주고, 무료체험 신청도 할 수 있고, 마케팅 문구 텍스트 애니메이션 효과도 그럴 듯한 페이지가 만들어진 것이다. 만족스러웠다.
결과와 배운 점
바이브코딩이라고 하더라도, PRD.md 또는 Plan.md 을 만들때 AI의 도움을 받아서라도 내가 최대한 내용을 이해하고 확인한 상태에서 프로젝트를 구성해야 한다는 점을 배울 수 있었다. (한 번 실패를 겪고나서 다시보니, 판교용어들도 이젠 조금은 눈에 들어오는 것 같다)
다음엔 영상도 만들어 넣고, 컨텐츠도 연결하고, 배포하는 과정까지 가서 MVP를 완성해 볼 생각이다.
