Vooster + Replit으로 만든 체질 진단 랜딩페이지
소개
'당신의 체질을 온라인으로 진단하고, 그에 맞는 단백질 제품을 추천해주는 서비스'라는 아이디어를 떠올렸습니다. 이걸 진짜 제품처럼 보여줄 수 있을까? 그런 마음으로 시작한 저의 첫 랜딩페이지 제작기입니다.
기획만 하다 끝나는 습관에서 벗어나고 싶었고, 일단 뭔가를 만들어보고 싶다는 갈증이 컸어요. 그래서 Vooster와 Replit이라는 두 가지 도구를 들고 직접 부딪혀 보기로 했습니다.
진행 방법
💡 PRD 작성은 Vooster에게 복붙부터 시작
예창패를 준비하며 써두었던 사업기획서를 Vooster에 복붙했습니다.
Vooster와의 대화로 자연스럽게 "PRD(프로젝트 기획)"와 "TRD(기술 설계)"의 개념을 익히고, 구체적인 화면/기능 단위로 정리해나갔습니다.
질문에 답하면서 기획의 구멍을 메우는 느낌이 었고,
특히 처음 기획하는 사람도 '어디까지 정리해야 하는지'를 알려줘서 정말 유용했습니다.
다만 TRD(기술문서) 같은 경우 모르는 용어들이 너무 많아 실제 랜딩페이지 구현에 사용하진 못했습니다..
한국어 웹 사이트의 홈페이지
💻 개발은 Replit으로!
원래는 Claude Code를 써보고 싶었지만 가격이 너무 비싸서 고민 중이었습니다.
마침 스터디원 지성님이 "Replit에서 로그인, 회원가입 잘 되더라"는 이야기를 하셔서 혹해서 써봤습니다.
결과적으로 기능도 잘 나오고, 프롬프트도 거의 안 써도 될 정도로 직관적이었습니다.
한 번 써보니 꽤 괜찮아서 쭉 사용하게 되었어요.
https://hat-store-landing-panportodos.replit.app/
😅 시행착오 & 현실적인 어려움
생각보다 원하는 디자인, 문구, 버튼 하나까지 수정하는 게 어려웠지만 지금까지 써온 서비스들보다 훨씬 빠르고 수월하게 만들어줘서 놀랐습니다.
어떤 부분을 바꾸고 싶은지는 알겠는데, 그걸 어떻게 말로 지시해야 할지 몰라서 시간을 오래 썼어요.
하지만 반복하면서 점점 나아지고 있다는 느낌도 있었습니다.
결과와 배운 점
처음으로 기획 → 설계 → 구현까지 전체 사이클을 경험해봤습니다.
기획은 Vooster, 개발은 Replit으로 충분히 해낼 수 있었습니다.
완벽하진 않지만, 직접 만든 결과물이 생기니까 뿌듯했습니다.
디자인/표현 면에서 여전히 아쉬운 점은 많지만, 이제 다음 스텝으로 넘어갈 수 있다는 확신을 얻었어요.
그리고 무엇보다 중요한 건...
"일단 뭐든 글을 끄적이면, 뭐라도 만들어진다"는 것! 😆
앞으로 할 일
2주차 : 설문을 랜딩페이지에 연동시켜 체질 설문이 끝나면 바로 제품을 살 수 있게 만들기
3주차 : 로그인, 회원가입 기능 만들기
4주차 : Supabase를 활용한 DB구축 및 디자인 다듬기
질문 사항
1. 깃허브를 연동해서 이쪽 에서 저쪽으로 코드를 이동시키는 법을 잘 모르겠습니다ㅠㅠ
2. Codex 사용법을 알고싶습니다!
