PRD 문서 작성하는 법 (*첨부파일 참고)
1) 시작하기에 앞서
PRD(Product Requirement Document, 기능정의서)란 바이브 코딩을 시작하게 전에 필수적으로 작성해야 하는 문서입니다.
일반적으로 바이브코딩에 사용되는 Gemini 3 Pro, Claude Opus등의 최신예 LLM 모델들은 특정한 요구 사항에 맞추어 코드를 작성하는 능력 자체는 뛰어나지만, 정확히 어떤 주제와 방향성으로 개발을 해야하는지 명시해주지 않으면 약간 소극적으로 개발을 진행하는 경향이 있습니다.
이는 단순히 해당 모델에 결함이 있거나 해서가 아니고, 우리가 처음에 서비를 기획하는 과정에서 정확히 어떤걸 만들고자 하는지 제대로 전달해주지 않았기 때문에 "아 아직 뭔가 제대로 정해진게 없네? 그러면 최대한 러프하게 만들고 계속 피드백 받아야겠다" 라고 모델이 생각하게 되고, 결국에는 일종의 미완성처럼 보이는 프로젝트가 만들어지게 되는 거죠.
기획은 분명 사람이 해야 하는 영역이며, 그 기획에 들어가있는 기술적 스택 또는 아키텍처를 어떻게 사용해야 할지 정확히 명시할수록 AI는 더욱 강력하게 작동하게 됩니다. 따라서 이러한 PRD 문서를 제대로 작성하는 것이 퀄리티 높은 서비를 구현하는데 있어 첫번째 단추가 된다고 말할 수 있겠습니다.
2) PRD 문서 작성하는 법
PRD 문서는 총 5가지 파트로 나누어집니다.
1. 기획
2. 기능
3. 기술 스택
4. 요구 사양
5. 기타
해당 순서에 맞춰서 최대한 내가 만들고자하는 서비스를 디테일하게 설명하면 할수록 바이브코딩을 통해 기대했던것과 싱크로율이 최대한 높은 프로젝트를 구현할 수 있습니다.
일단 하나씩 살펴보도록 하겠습니다
1. 기획
지금 만들고자 하는 서비스가 어떤 기능을 수행해야 하는지, 어떤 종류의 고객들이 해당 서비스를 이용하게 될지, 내가 이 서비스로 인하여 사회에 어떤 가치를 부여하고자 하는지, 그리고 이 서비스가 실제로 동작하면서 어떤 문제를 해야만 하는지 적어주는 파트 입니다.
기획이라고 해서 딱딱하게 생각할거 없이, 그냥 내가 해당 프로젝트에 대해서 생각했던 바를 자유롭게 풀어서 쓰면 됩니다. 단, 이 파트에서 기능적인 부분을 명시하거나 디자인적인 프레임워크를 제시하는것은 별로 권장되지 않습니다 (나중에 뒤에서 명시할거임)
2. 기능
서비스에서 실제로 제공하게 되는 기능을 명시하는 파트 입니다. 생성 버튼을 눌렀을때 웹페이지 크롤링이 시작됨, 다운로드시 자동으로 윈도우 익스플로어 창이 열림, 크롤링이 끝나면 모달이 나오면서 완료되었음을 알려줌. 이런식으로 상세하게 내가 서비스에서 원하는 기능들이 정확히 어떤 과정을 통해서 작동해야 하는지 알려줘야 합니다.
이렇게 상세하게 내가 생각한 바를 풀어서 쓰다보면 기존에 생각하지 못했던 기발한 아이디어가 떠오르기도 하고, 미처 생각하지 못했던 취약점을 찾아서 예외처리를 해줄 수 있습니다.
3. 기술 스택
해당 프로젝트에서 AI에게 어떤 어떤 기술을 사용해야 한다고 명시하는 파트입니다. 이때 기술은 단순히 React, Typescript와 같은 프레임워크/라이브러리에서 끝나지 않고 그 이상의 아키텍처 적인 부분이나 폴더 구조등도 미리 선언해두면 이에 맞추어서 모델이 개발을 진행하게 됩니다. (예시로 업로드한 PRD 문서의 경우 SEO까지도 명시해뒀습니다)
4. 요구 사양
해당 프로젝트가 어떤 환경에서 작동해야 하고, 어떤 디바이스를 커버해야 하는지 명시하는 파트입니다. 크롬/파이어폭스/엣지 브라우저에서도 스타일링이 깨지지 않고 나와야 하고, 모바일과 태블릿 그리고 랩탑, 대형 랩탑(모니터)까지도 반응형으로 구현되어야 한다고 명시하면 적당합니다.
5. 기타
위에서 나온 파트들에 속하지 않거나 뭔가 애매한 요구사항이라서 넣지 않은 부분을 모두 이곳에 써 줍니다. 저의 경우 프로젝트 명과 참고해야 할 레퍼런스 디자인을 이 부분에 넣었습니다
그리고 제 경우 디자인 레퍼런스 적용은 프로젝트가 한번 생성되고 난 후에 코드를 전부 다 뒤집어 엎으면서 한번에 적용합니다. 이유로는 이런 초기 프로젝트 세팅은 Cluade Opus가 잘 하는데, 이 친구는 이미지 인식 기능이 약하기 때문에 처음에는 Opus를 사용해주고, 그 이후에 생성된 프로젝트 코드를 기반으로 이미지 인식 기능이 뛰어난 Gemini 모델을 사용하여 전체적으로 내가 원하는 디자인을 레퍼런스와 함께 잡아주는 방식입니다.
3) PRD 문서 적용하는 법
일반적으로 바이브코딩 작업을 하는데 있어서는 Antigravity(안티그래비티)와 Cursor(커서), 이 두가지 툴을 주로 사용합니다.
안티그래비티: 프롬프트 창에 PRD 문서의 경로를 명시하고 구현해달라고 말한다
커서: 프롬프트 창에 PRD 문서를 복사하거나 경로를 명시하고 구현해달라고 말한다 (경로 명시 권장)
둘 다 단순하게 프롬프트 창에서 PRD 파일이 있는 경로를 말해주면서 "이 파일 읽어서 내용을 분석하고 이에 맞추어서 프로젝트 생성하고 코드 작성해줘" 라고 말해주기만 하면 됩니다.
딸깍리뷰를 만드는 과정에서 사용된 PRD 문서의 모습
저는 딸깍 리뷰를 만들면서 PRD 문서 뿐만 아니라 웹 페이지의 전체적인 구조를 잡은 PDF 문서를 같이 업로드하여 AI모델이 좀 더 레이아웃을 제가 원하는대로 만들도록 유도했으며, PRD 문서(document.md)의 경우 최대한 자세하게 작성하였습니다.
실제로 딸깍 리뷰를 개발하는데 사용한 PRD 문서 (document.md)
Figma를 통해 제작한 웹사이트 구조도
해당 문서는 하단에 첨부파일로 저장해두었으니, 직접 수정해서 사용하셔도 되고, 본인이 개발중인 프로젝트에 먹여서 적용하셔도 됩니다!
PRD 문서:
PRD 문서 및 자료 압축본: