— “할 일 자동 분류” 웹 서비스 예시로 배우는 실전 PRD 작성법 —
왜 PRD 작성법이 중요할까?
프로젝트를 시작할 때 설계도가 없으면 개발 중에 방향성을 잃기 쉽습니다. 특히 AI와 협업하는 바이브 코딩 환경에서는, AI가 정확히 무엇을 구현해야 할지 모르면 겉핥기 수준의 코드만 나오기 마련이죠. PRD(Product Requirements Document)는 그런 혼란을 막아주는 ‘청사진’입니다. 제대로 만든 PRD 하나면, AI가 원하는 기능·UI·작동 방식을 바로 이해하고 실행 가능한 기획안과 코드를 제안해 줍니다.
프로젝트 목적 & 배경
바쁜 직장인들은 수많은 할 일 중에서 정말 중요한 것을 가려내기가 어렵습니다.
이럴 때 AI를 활용해 1~5단계로 자동 분류해 주는 웹 서비스를 제공하면 어떨까요?
- 문제 해결: 텍스트로 입력된 할 일을 AI가 중요도별로 나눠줘서, 우선순위 관리에 드는 시간을 아끼고 스트레스를 줄여줍니다.
- 누구를 위한 서비스인가?
- 업무량이 많아 할 일 정리에 어려움을 겪는 직장인
- 모바일에서 간편하게 할 일을 확인하고 싶은 모든 사용자
사용자 페르소나 & 시나리오
- 페르소나 예시
- 이름: 김민수 (35세, 마케팅 매니저)
- 특징: 매일 20개 이상의 할 일을 기록, 우선순위 정리에 애먹음
- 사용 시나리오
- 출근길 지하철에서 김민수는 앱을 실행
- “회의 자료 준비하기”를 입력
- AI가 중요도 4(높음)로 분류해 붉은색 카드로 표시
- 김민수는 ‘중요도 높은 할 일’을 가장 먼저 처리
이처럼 페르소나와 시나리오를 구체화하면, AI에게도 ‘누구를 위해 어떤 상황에서’ 앱이 쓰이는지 명확히 전달됩니다.
핵심 기능 & 보조 기능 정리
- 핵심 기능
- 할 일 CRUD(생성·조회·수정·삭제)
- AI 기반 1~5단계 중요도 자동 분류
- 중요도·날짜·상태별 필터링 및 정렬
- 보조 기능
- 리마인더: 지정 시간 푸시 알림
- 마감 기한 설정: 달력에서 날짜 선택
- 진행률 표시: 전체 할 일 대비 완료 비율 시각화
PRD에 이 기능들을 빠짐없이 적어두면, 이후 AI에게 “이 기능을 코드로 구현해줘”라고 요청하기가 훨씬 수월해집니다.
기술 스택 & 데이터 흐름 설계
- 프런트엔드: HTML5 / CSS3 / JavaScript(ES6+)
- 데이터 저장:
- 간단한 MVP는
localStorage - 확장 버전은 RESTful API + MySQL 또는 MongoDB
- 간단한 MVP는
- UI 라이브러리: Bootstrap 5
- 테스트: Jest 유닛 테스트
- 흐름
- 사용자 입력 → JavaScript 함수 호출
- AI 서버(또는 클라우드 함수)에 텍스트 전송 → 중요도 분석
- 분석 결과 리턴 → 카드 UI 렌더링
이 구조를 PRD에 명시하면, AI로 하여금 “이렇게 데이터를 주고받는 구조로 앱을 만들어야 한다”는 점을 분명히 인식시킬 수 있습니다.
UI/UX 가이드라인
- 화면 구성
- 상단 헤더: 로고 + 환경설정
- 메인 영역: 할 일 입력창 + 추가 버튼
- 리스트 영역: 중요도별 카드 그리드
- 하단 내비게이션: 전체·높음·중간·낮음 탭
- 내비게이션 흐름
- 전체 보기 → 중요도별 필터 → 설정 페이지
- 반응형 디자인
- 모바일 우선: 터치 타깃 최소 44×44px
- 데스크톱: 그리드 열 수 확대, 사이드바 추가
이처럼 세밀한 가이드가 있어야만 AI가 실제 사용자 경험을 고려한 레이아웃을 제안할 수 있습니다.
보안 & 성능 최적화
- 보안
- 입력값 검증(XSS, SQL 인젝션 차단)
- HTTPS 적용
- JWT 기반 인증/인가
- 성능
- 코드 스플리팅: 초기 번들 크기 최소화
- 오프라인 캐시: Service Worker + localStorage 활용
- 이미지 최적화: SVG 아이콘 및 지연 로딩
PRD에 보안·성능 항목을 빼놓으면, 나중에 AI가 만든 코드가 실제 서비스에서는 취약하거나 느리게 동작할 수 있습니다.
마무리: AI에게 PRD 요청하기
위의 모든 항목을 깔끔하게 정리한 뒤, AI에게 다음과 같은 형태로 PRD 작성을 요청해 보세요:
“할 일 자동 분류 웹 서비스를 기획 중입니다.
- 프로젝트 목적 및 배경
- 사용자 페르소나 및 시나리오
- 핵심 및 보조 기능
- 기술 스택 및 아키텍처
- UI/UX 가이드라인
- 보안 및 성능 최적화 방안
위 항목을 포함해 완성도 높은 PRD를 작성해 주세요.”
이렇게 요청만 하면, AI가 여러분의 기획 의도를 충실히 반영한 완전한 PRD를 자동으로 생성해 줍니다.
이제 바이브 코딩으로 이어지는 실제 개발 프롬프트 작성이 한층 간편해질 거예요.
PRD 작성법 지금 바로 AI에게 PRD를 부탁해 보세요!
