기획문서 작성 프로세스의 자동화를 통해 업무 효율 극대화시켜보기

소개

시도하고자 했던 것과 그 이유를 알려주세요.

프로덕트 디자이너로서 새로운 기능이 확정될 때마다 기능 개요, 사용자 시나리오, 화면 구성, 개발 요구사항을 포함한 기획명세를 수동으로 작성해야 했는데, 이 반복 작업이 상당한 시간을 잡아먹고 있습니다.

특히 불편했던 점은 개발자에게 전달하는 포맷이 매번 동일한데도, 매번 처음부터 문서를 작성해야 한다는 것이었습니다. 피그마로 화면을 구성하고, userflow를 그리고, 이걸 다시 텍스트로 풀어 설명하는 과정이 반복되었습니다.

그래서 세운 목표

"1~2줄의 기능 시나리오만 입력하면, 표준 포맷의 기획 문서가 자동으로 생성되는 시스템을 만들자"

기대 효과

기획문서 작성 시간: 3시간 → 10분 이내로 단축
월 기준 약 16~24시간의 반복 작업 시간 절감
절감된 시간을 전략적 기획 업무에 투자

진행 방법

사용한 도구

Claude Code: 전체 개발 과정의 핵심 도구. Plan Mode를 활용해 페이즈별 개발 계획 수립
Google Gemini API: 기획문서 자동 생성 엔진 (초기 Claude API에서 전환)
Node.js + Express: 백엔드 서버 구축
Supabase: 생성된 기획문서 저장 및 히스토리 관리
Vercel: 배포 및 실사용 환경 구축

1단계: Plan Mode로 개발 계획 수립

먼저 Claude Code의 Plan Mode를 활용해 전체 프로젝트를 페이즈별로 나눴습니다.

사용한 프롬프트

기획.md 파일을 읽고, 사용자가 입력한 1~2줄 시나리오를 받아 
표준 기획 문서를 자동 생성하는 시스템을 만들어줘.

다음 단계로 나눠서 계획을 세워줘:
1. UI 구성(입력 폼)
2. 문서 생성 로직(Claude API 연동)  
3. 결과 저장/조회(Supabase)
4. 배포(Vercel)

각 단계별로 구체적인 체크리스트를 만들어줘.

이 프롬프트를 통해 Phase 0~4까지의 상세 개발 계획을 얻었습니다.

2단계: 프로젝트 구조 설정

생성한 프로젝트 구조

spec-generator/
├── CLAUDE.md                    # 기획 자동화 규칙 및 프로젝트 맥락
├── 기획.md                       # 기획문서 표준 포맷 정의
├── .env                          # API 키 (Git 제외)
├── .gitignore
├── package.json
├── public/
│   └── index.html               # 입력 인터페이스
├── api/
│   └── generate.js              # Gemini API 연동 로직
└── README.md

3단계: 기획문서 표준 포맷 정의 (기획.md)

먼저 평소 작성하던 기획문서의 포맷을 기획.md 파일에 정리했습니다:

# 기획문서 표준 포맷

## 1. 기능 개요
- 기능명
- 기능 설명 (1~2문장)
- 주요 목적 및 기대 효과

## 2. 사용자 시나리오/플로우
- 진입 경로
- 단계별 사용자 행동
- 예외 케이스

## 3. 화면 구성
- 주요 UI 요소
- 인터랙션 설명
- 상태별 화면 변화

## 4. 개발 요구사항
- 프론트엔드 구현 사항
- 백엔드 API 명세
- 데이터베이스 스키마 변경 사항

4단계: 병렬 작업 가능 구간 분석

뭔가 하나만 진행하기엔 개발량이 많다보니깐, 개발 시간을 단축하기 위해 Claude에게 계획서를 분석시켜 병렬로 진행 가능한 작업들을 파악했습니다.

Claude가 분석해준 병렬 가능 구간

4단계: 두 개의 Claude Code로 병렬 개발

분석 결과를 바탕으로, Claude Code 터미널을 2개 열어서 동시에 작업을 진행했습니다.

실제 진행 방식

5단계: API 선택 - Claude에서 Gemini로 전환

처음에는 Claude API를 사용하려고 했습니다. Claude Code로 개발하고 있었기에 같은 Anthropic 생태계인 Claude API가 자연스러운 선택이었죠.

하지만 여기서 문제

Anthropic API는 유료이며, 사용량에 따라 비용이 발생
개인 프로젝트로 진행하다 보니 API 비용이 부담
테스트 단계에서도 계속 비용이 발생하는 구조

그래서 Gemini API로 전환

Google AI Studio에서 무료 API 키 발급 가능
무료 티어에서도 충분한 호출량 제공 (분당 15회, 일일 1,500회)
기획문서 생성 품질도 충분히 만족스러움

결과물

리니어 이슈까지 생성 완료

배운 점

1. Plan Mode 활용의 중요성 Claude Code의 Plan Mode로 먼저 전체 구조를 설계해서 개발 과정에서 길을 잃지 않았습니다.

2. 기획.md 파일의 핵심 역할 기존에 사용하던 기획문서 포맷을 명확하게 정의해두니 LLM이 일관성 있는 결과물을 생성했습니다.

3. 무료 API 활용 꿀팁 Claude API 비용이 부담된다면 Gemini API를 적극 추천합니다. Google AI Studio에서 무료로 API 키를 발급받을 수 있고, 개인 프로젝트나 프로토타입 단계에서는 무료 티어만으로도 충분합니다.

개선점

노션 대체할만한 공유 플랫폼 있을지(개인계정에는 mcp로 접근 불가능)
기획문서 템플릿 구체화하기(개발자 친화적) + UI도 포함시킬 수 있다면?
이슈 생성하는 방식 구체화

20개의 주제를 확인해보세요! AI 스터디 슈퍼 얼리버드 시작🕊️