/docs 폴더 만들고 PRD.md 파일 만들기
1. 프로젝트 폴더에 'docs'라는 이름의 폴더를 만들어 주세요.
- 꼭 폴더 이름이 'docs' 여야만 AI가 알아들을 수 있다거나 하는 정도는 아니에요.
- 하지만 보통 docs라는 이름으로 관리하기 때문에 관행을 따라가는게 조금이나마 AI가 맥락을 이해하는 성능을 높일 수 있습니다.
2. 'docs' 폴더 안에 'PRD.md'라는 이름의 파일을 만들어 주세요.
- PRD는 Product Requirement Document의 약자로, 제품 요구사항 문서라는 뜻이에요. 쉽게 말하면 기획서입니다.
- 이 파일 안에 내가 만들고 싶은 서비스에 대한 설명과 요구사항을 최대한 자세히 적어주세요.
PRD 필수 포함사항
서비스 이름과 개요
- 내가 만들고 싶은 서비스, 도구, 시스템의 이름과 간단한 소개글을 적어주세요.
타겟 유저
- 이 서비스를 '누가' 쓰는 지를 적어 주세요. 그 유저가 이 도구를 '왜' 쓰는지, 어떤 문제를 해결하고 싶어 하는지를 적어 주세요.
주요 기능
- 이 서비스가 어떤 기능을 제공해야 하는지를 "유저는 00을 할 수 있다"의 양식으로 목록화해서 적어주세요.
개발 요구사항
- 서비스 개발에 필요한 기술적 특징을 적는 곳이에요.
- 우리는 비개발자이므로 자세히 적을 필요는 없지만 최소한 모바일/태블릿/데스크탑 중 어느 레이아웃을 지원해야 하는지는 적어주시면 좋아요.
- 모바일로만 접속한다면 "모바일 레이아웃만 지원한다", 스마트폰/PC 모두 지원해야 한다면 "모바일/데스크탑 레이아웃 모두 지원한다"라고 적어 주세요.
디자인 요구사항
- 브랜드 메인 컬러나 특별히 쓰고 싶은 폰트가 있다면 적어 주세요.
- 폰트를 적용하는 법은 별도 가이드(추후 추가 예정)으로 설명해드릴게요.
techstack.md 파일 만들기
- PRD 작성이 완료된 후에 AI 프롬프트 창에 다음과 같이 적어 주세요.
"PRD.md 파일을 참고해서 이 서비스를 개발하는데 필요한 기술 스택을 techstack.md 파일을 docs 폴더 안에 생성해줘."- 그러면 AI가 알아서 techstack.md 파일을 만들어 줄 거예요.
- techstack.md 파일에는 이 서비스를 개발하는데 필요한 기술을 정의하는 문서라서 비개발자가 작성할 수 없는 문서에요. 그래서 AI에게 맡기는 겁니다.
프로젝트 셋팅 시작하기
- techstack.md 파일이 생성된 후에 AI 프롬프트 창에 다음과 같이 적어 주세요.
"PRD.md 파일과 techstack.md 파일을 참고해서 이 서비스를 개발하는데 필요한 프로젝트 셋팅을 진행해줘."- 그러면 AI가 현재 폴더에 웹페이지 개발에 필요한 소스코드를 생성하고 설치하기 시작할 거에요.
- 프로젝트 셋팅이 완료되면 터미널을 열고,
npm run dev라는 명령어를 입력해주세요. - 브라우저를 켜서
http://localhost:3000으로 접속했을 때 화면에 딱히 에러 메시지 없이 Next.js 라는 글자가 보이면 성공입니다!