[아티클 02] 체계적인 개발의 시작, 제품 요구사항 문서 준비하기
성공적인 프로젝트는 코드 한 줄을 작성하기 전에 명확한 목표와 계획을 수립하는 것에서 시작됩니다. 코드 구현에 앞서 개발의 청사진 역할을 하는 제품 요구사항 문서인 PRDProduct Requirements Document를 먼저 정의하고 이를 기반으로 체계적인 ‘할 일 목록’ 앱 개발을 시작하겠습니다.
개발의 설계도, ‘PRD’가 왜 중요한지 이해하기
훌륭한 건축가가 건물을 짓기 전에 반드시 ‘설계도’를 그리듯, 소프트웨어 개발에서도 PRD는 직접 만들 결과물의 밑그림이자 모든 팀원이 공유하는 핵심 지침서 역할을 합니다. 이 설계도가 있으면 길을 잃지 않고 팀원 모두가 같은 목표를 향해 나아갈 수 있죠. 즉, 잘 만든 설계도는 다음과 같은 강력한 힘을 줍니다.
모두가 같은 설계도를 확인 : 팀원 모두가 “아, 우리가 만들 앱은 이런 모습이구나!” 하고 똑같은 그림을 그리게 되어 오해가 줄어듭니다.
명확한 체크리스트가 생성 : ‘이 기능은 필수!’와 ‘이건 나중에 해도 돼’를 구분하여 제한된 시간 안에 가장 중요한 핵심 가치를 만드는 데 집중할 수 있습니다.
설계도를 중심으로 원활한 소통 : 이 계획서를 기준으로 대화하면 모두가 각자의 역할을 명확히 알고 효율적으로 협업할 수 있습니다.
PRD는 어떤 것들로 구성될까요? PRD는 목적, 대상 사용자, 주요 기능, 사용 시나리오 그리고 기본 디자인 아이디어를 정리한 문서입니다. 이 문서는 왜, 누구를 위해, 무엇을, 어떻게 만들지를 명확히 정의합니다. 또한 필요에 따라 기술 스택이나 향후 확장 계획을 함께 포함할 수 있습니다.
[바이브 코딩 27] 챗GPT와 함께 설계도 만들기
전통적으로 설계도는 사람이 직접 많은 시간을 들여 작성했지만 이제 우리에겐 똑똑한 ‘AI 기획자’가 있습니다. 바로 챗GPT입니다. 챗GPT를 활용하여 설계도를 만들어보겠습니다.
01 먼저 웹 브라우저에서 다음의 챗GPT 홈페이지로 이동합니다. 계정이 있다면 로그인을 하고 없다면 회원가입 후 로그인하세요.
챗GPT : chatgpt.com
02 이제 챗GPT의 채팅창에 앞으로 만들 ‘할 일 목록’ 앱의 설계도를 그려달라고 구체적인 프롬프트를 전달하겠습니다. 다음 프롬프트는 앞서 배운 PRD의 핵심 요소인 '목표', '대상 사용자', '핵심 기능' 등을 AI가 이해하기 쉬운 구조로 정리였습니다. 무엇을 원하는지 구체적으로 알려줄수록 AI는 더 똑똑하게 의도를 파악하고 훌륭한 초안을 만들어줄 겁니다. 다음 프롬프트를 그대로 복사해서 챗GPT에 붙여 넣으세요.
어떤 결과가 나왔나요? 순식간에 기획 문서가 이해하기 쉬운 형태로 완성되었죠. AI는 본질적으로 창의적이기 때문에 여러분의 결과물은 책 속 예시나 다른 사람의 결과와 조금씩 다를 수 있습니다. AI가 단숨에 그럴듯한 기획 문서를 만들어주는 놀라운 경험, 그것이 바로 AI와 협업하는 재미의 시작입니다.
[바이브 코딩 28] 공식 설계도 정하고 v0에게 작업 지시하기
챗GPT는 매번 다른 결과를 보여주기 때문에 이제부터는 모두가 동일한 결과물을 만들 수 있도록 ‘공식 설계도’를 정하겠습니다. 지금까지 만든 PRD는 참고용으로 두고, 실습의 일관성을 위해 다음에 제시한 공식 PRD를 기준으로 AI 디자이너 v0에게 요청하겠습니다.
1. 앱의 목표 : 바쁜 일상 속 할 일을 손쉽게 기록하고 관리하는 간단하고 직관적인 생산성 도구 2. 핵심 기능
할 일 추가 : 새로운 할 일을 텍스트로 입력하고 목록에 추가
목록 보기 : 추가된 모든 할 일을 한눈에 보기 쉽게 목록으로 표시
완료/취소 : 체크 박스로 할 일의 완료 상태를 쉽게 변경 (완료 시 시각적 구분)
삭제 : 필요 없어진 할 일을 목록에서 완전히 제거
기억력 : 앱을 껐다 켜도 할 일 목록이 유지되어야 함
3. UI 구성 아이디어
화면 : 상단에 ‘나의 할 일 목록’ 제목, 그 아래로 입력창과 [추가] 버튼, 맨 아래에 할 일 목록
개별 항목 : 카드 디자인 안에 체크 박스, 할 일 내용, 삭제 버튼 포함
디자인 : 중앙 정렬된 깔끔하고 미니멀한 디자인
이제 공식 PRD를 펼쳐놓고 v0에게 UI를 만들어달라고 요청하겠습니다. 물론 위 PRD 전체를 복사해 한 번에 빠르게 v0에게 전달할 수도 있지만 AI가 중요한 디테일을 놓칠 수 있습니다. 따라서 설계도를 한 부분씩 보여주며 v0가 각 단계에 집중하도록 유도하여 더 정교하고 확실한 ‘점진적 프롬프트 빌드업’ 방식을 사용하겠습니다.
01 PRD의 ‘UI 구성 아이디어’ 섹션에 있는 화면 상단 구성부터 시작하겠습니다. v0에서 앱의 제목과 사용자가 새로운 할 일을 입력할 공간을 만들어달라고 요청합니다.
v0가 화면에 ‘나의 할 일 목록’이라는 큰 제목과 그 아래 텍스트를 입력할 수 있는 칸과 [추가] 버튼이 있는 화면을 만들어주었습니다. 이것이 바로 ‘할 일 목록’ 앱의 가장 기본적인 모습입니다.
02 다음으로 PRD에 명시된 ‘맨 아래에 할 일 목록’ 부분을 구현하기 위해 할 일들이 표시될 전체 목록 공간을 확보합니다.
제목과 입력창 아래에 앞으로 개별 할 일 아이템이 채워질 빈 목록 영역이 생성되었네요.
03 이제 설계도에서 가장 세밀한 부분인 ‘개별 항목’의 디자인을 v0에게 지시합니다. 이 디자인 하나가 모든 할 일의 기본 형태가 될 겁니다.
v0가 프롬프트의 상세 지침에 따라 체크 박스, 텍스트, 삭제 버튼이 포함된 카드 형태의 할 일 아이템 견본 하나를 목록 공간 안에 생성해주었습니다.
04 마지막으로 PRD의 ‘핵심 기능’ 중 ‘목록 보기’, ‘완료/취소’ 기능이 어떻게 보일지 그리고 ‘디자인 콘셉트’를 어떻게 적용할지 샘플 데이터를 통해 시각화합니다.
실제 데이터가 포함되고 기능 상태가 완료 또는 미완료인지 표현된 최종 UI 시안을 보여줍니다. 공식 PRD에서 정의한 모든 요구사항이 성공적으로 반영된 것을 확인할 수 있습니다.
05 지금까지 만든 UI는 v0의 기본 페이지 파일에 모두 포함되어 있습니다. 앞으로 프로젝트가 커질 것을 대비해 ‘할 일 목록’ 기능은 todo라는 전용 페이지로 분리해두겠습니다.
이 지시를 내리면 v0는 app 폴더 하위에 todo라는 새 폴더를 만들고, 그 안에 page.tsx 파일을 생성해 모든 UI 코드를 그곳으로 깔끔하게 옮깁니다. 이제 ‘할 일 목록’ 앱에 자신만의 독립된 페이지가 생성되었습니다.
[바이브 코딩 29] v0 함께 디자인 다듬기
AI 디자이너 v0가 다음과 같이 첫 번째 디자인 시안을 제시했습니다. 이제 공식 PRD와 결과물이 일치하는지 항목별로 점검하세요. 핵심 기능, 화면 구성 등을 확인하고 누락·불일치 항목은 구체적 수정 요청으로 정리합니다.
01 v0가 만든 UI 화면과 공식 PRD를 다시 살펴보며 빠진 기능은 없는지, 의도한 느낌이 잘 살아 있는지 확인해보세요. 만약 결과가 만족스럽지 않다면 AI와 함께 디자인을 다듬어보세요. 여기서는 보다 직관적이면서 시각적으로 매력적인 UI로 개선하기 위해 v0 채팅창에 이어서 다음과 같이 구체적인 수정을 요청해보겠습니다.
이처럼 AI와 대화를 주고받으며 결과물을 점차 완성해가는 과정을 ‘반복 개선Iteration’이라고 하며, 이는 AI 도구를 활용하는 핵심적인 장점 중 하나입니다. 이 과정을 거치면 머릿속에 있던 추상적인 아이디어를 눈앞에 보이는 구체적인 UI 시제품으로 빠르게 구현할 수 있습니다.
챕터 21 v0 결과물을 프로젝트에 통합하기
이번 ‘할 일 목록’ 앱은 새로운 프로젝트에서 시작합니다. Next.js 프로젝트 생성과 shadcn/ui 초기화 방법은 [파트 04] AI 챗봇 만들기에서 이미 다루었으니, 그 내용을 참고해주세요. 프로젝트명은 todo-list-app으로 설정하여 앞으로의 실습을 책과 동일한 환경에서 진행할 수 있도록 준비하세요. shadcn/ui 초기화까지 완료했다면 이제 ‘할 일 목록’ 기능 개발을 위한 새로운 작업 공간이 준비 완료되었으니 본격적으로 시작하겠습니다.
[바이브 코딩 30] v0에서 디자인한 UI, 이번엔 ‘직접’ 가져오기
v0에서 멋진 ‘할 일 목록’ 앱의 UI 디자인을 완성했습니다. 이전 챕터에서는 편리한 shadcn 명령어를 사용해 코드를 프로젝트에 자동으로 추가했죠. 이번에는 코드의 구조를 조금 더 깊이 이해해보기 위해 v0가 만들어준 코드를 직접 눈으로 확인하고 손으로 복사하여 붙여넣는 새로운 방식을 시도하겠습니다. 이 방법은 필요한 컴포넌트가 무엇인지 명확히 알 수 있게 하는 아주 좋은 학습 경험이 될 겁니다.
01 먼저 v0가 만들어준 결과물을 가지러 갈 시간입니다. v0 작업 화면에서 ➊ [Code] 아이콘 탭을 클릭하여 생성된 코드를 확인합니다. app/todo/page.tsx와 같이 UI를 구성하는 핵심 파일의 코드를 보여줄 겁니다. 코드 오른쪽 위에 있는 ➋ []을 눌러 전체 코드를 복사하세요.
02 이제 프로젝트 폴더 todo-list-app에 v0의 디자인을 가져올 차례입니다. 커서에 프로젝트 폴더 todo-list-app을 열고 계획했던 src/app/todo/page.tsx 파일을 만들어야 합니다. app 폴더 안에 todo 폴더를 만든 다음 그 안에 page.tsx 파일을 생성하세요.
03 방금 만든 텅 빈 page.tsx 파일을 열고 과정 01에서 복사했던 코드를 그대로 붙여 넣습니다.
04 코드를 붙여 넣으면 import 부분에 빨간색 물결 표시와 함께 오류가 표시될 수 있습니다. 걱정하지 마세요. 이는 새 프로젝트에 아직 v0가 사용한 버튼, 카드 등이 없어서 생기는 자연스러운 현상으로 프로젝트가 알려주는 일종의 신호일 뿐입니다. 이 문제를 해결하는 데에는 두 가지 방법이 있습니다. 여기서는 [Fix in Chat] 기능을 활용하겠습니다.
05 커서의 [Fix in Chat]은 간단하면서 AI와 협업하는 느낌을 가장 잘 살릴 수 있는 방법입니다. 먼저 빨간색 물결 표시에 마우스를 오버합니다. 그런 다음 [Fix in Chat]을 누르거나 [Ctrl+L]를 눌러 AI 채팅창을 열고 다음과 같이 AI에게 문제 해결을 요청합니다.
AI가 스스로 문제를 분석하고 필요한 shadcn 컴포넌트 설치 명령어를 찾아 import 오류를 해결해주었습니다.
05 이제 프로젝트는 v0의 디자인을 완벽하게 소화할 준비가 되었습니다. 터미널에 npm run dev를 입력해 개발 서버를 실행하고 웹 브라우저에서 http://localhost:3000/todo에 접속해보세요. v0에서 보았던 ‘할 일 목록’ 앱 UI가 그대로 나타나는 것을 확인할 수 있습니다.
v0에 전달한 프롬프트에는 단순한 UI 배치뿐 아니라 ‘할 일 추가’, ‘완료 처리’, ‘삭제’ 같은 핵심 기능 의도도 포함되어 있습니다. 이제 실제 사용자처럼 이것저것 눌러보며 의도한 기본 기능이 얼마나 구현되었는지 확인해보세요.
최신 AI 도구들은 UI와 함께 기본적인 클라이언트 사이드 상태 관리 로직까지 자동으로 생성하는 경우가 많습니다. 위 테스트들이 기본적인 수준에서라도 정상적으로 동작한다면 첫 단추는 성공적으로 끼워진 것입니다. 이제 실제 기능을 구현할 훌륭한 출발점을 마련했습니다.