소개
지난번 스터디에서 만들어두었던 PRD를 바탕으로, 이번 주에는 실제로 구동되는 프로토타입을 만드는 것을 목표로 삼았어요. 주요 도구는 Cursor였고, 이를 중심으로 전체 개발 과정을 진행했습니다. 결과적으로 ‘작동하는 서비스’를 만들어내는 데 성공했는데, 그 과정에서 꽤 흥미롭고 중요한 깨달음들이 있었어요. 기획, 개발 지식이 전혀 없어도 이 과정이 가능하다는 점을 이 글을 통해 그 경험을 공유해보려 합니다.
진행 방법
1. 빠른 목업부터 시작
Replit을 이용해서 기본적인 화면 구성과 흐름을 짜봤어요.
이전 작업했던 PRD를 그대로 프롬프트로 입력.
이 단계에서는 ‘어떻게 보일까?’를 눈으로 확인하는 데 집중했습니다.
2. 서비스 소개 웹사이트 제작
Lovable을 통해 간단한 웹사이트를 만들었어요.
오히려 서비스에 대해 소개하는 웹사이트를 제작하고나니 서비스의 방향성이 더 명확해지는 느낌이었습니다.
3. 본격 구현: Cursor 활용
PRD를 바탕으로 Cursor에서 바이브 코딩을 시작했어요.
하지만, 그냥 대화하듯 코딩한다고 해서 원하는 결과가 자동으로 나오는 건 아니더라고요. 그래서 다음과 같은 전략을 세웠습니다:
🛠 문서화 전략
PRD로 cursor에게 작업할 프로젝트를 설명하고.
Todo 리스트로 할 일을 단계별로 정리
기술 명세서와 버전 히스토리를 작성해서 맥락을 놓치지 않도록 관리
todo리스트
이런 형태로 지금까지 진행한 작업과 앞으로 진행할 작업을 구조적으로 명시
한 대화세션이 끝날 때 기술상세서를 작성해달라고 cursor에게 요청하니 다음과 같은 문서 포맷이 출력되었습니다.
그리고 프로젝트 버전 관리를 해달라는 간단한 프롬프트 만으로도 cursor가 version history 문서를 따로 작성하면서 개발에 대한 약력을 쭉 작성해줬습니다.
💬 Cursor 사용 팁
하나의 대화창에서 작업이 길어지면 맥락이 무너질 수 있어요.
그래서 새 대화창을 열고,
@기능을 이용해 todo 리스트와 문서를 다시 넣고 간단한 프롬프트만 주는 방식으로 흐름을 유지했어요.
@todo
@version-history
@project_structure
다음 작업 진행이렇게만 해도 마지막까지 흐름이 깨지지 않고 개발을 이어갈 수 있었습니다.
결과와 배운 점
결과물은... 다음과 같이 나왔고 애초의 기획과는 많이 달라져버렸습니다ㅋㅋ
처음 생각한 모습과는 차이가 있었고, 그 원인은 결국 ‘PRD의 상세함’이었어요.
더 구체적인 PRD를 작성했더라면 훨씬 빠르고 정확한 결과가 나왔을 텐데 말이죠. 하지만 그럼에도 불구하고 기획과 개발을 전혀 몰랐던 제가 혼자서 처음부터 끝까지 작동하는 서비스를 만들었다는 건 큰 성취였습니다.
이 과정을 통해 느낀 가장 중요한 교훈은:
문서화가 곧 방향성이다.
도구는 뛰어나지만, 방향은 사람이 제시해야 한다는 것
아무런 지식없이 하나의 서비스를 끝까지 구축하면서 오히려 기획과 개발에 대해서 더 잘 알게되었다는 점
마지막으로
꼭 자기만의 서비스를 구축해보세요.
어느 누구든 자신만의 서비스를 구축할 수 있습니다.