Home 테크/AI

테크/AI

[aboutPM] 기획을 돕는 AI 도구들, #2.Gstack 사용해보기

글쓰는몽글c

5월 21, 2026

#1. Gstack?

지난 번 bkit 플러그인에 이어서 이번엔 Gstack 프레임워크를 사용해보고자 한다.

Gstack은 Github에 올라온 후 2주만에 4.8만의 Star를 받은, AI를 통한 가상 기획/디자인/개발팀/QA/보안담당자까지도 만들어주는 클로드코드 플러그인이다.

>> https://github.com/garrytan/gstack

Gstack은 도구모음이 아니라 프로세스라고 할 수 있다. Gstack은 아래 프로세스를 따른다.

Think → Plan → Build → Review → Test → Ship → Reflect

각 기술은 다음 단계로 자연스럽게 진행이 된다.

/office-hours설계 문서를 작성하면 해당 문서를
/plan-ceo-review읽고,
/plan-eng-review테스트 계획을 작성하면 해당
/qa문서를 읽고,
/review버그를 찾아내고
/ship수정되었는지 확인하는 과정을 거친다.

모든 단계가 이전 단계를 알고 있고 따라서 누락되는 지점 없이 완결성 있게 진행된다고 한다.

살펴보다 보니, 앞단의 계획을 만들어가는 측면이 bkit 플러그인과 유사한 면들이 있어보여서, 설치된 bkit을 먼저 비활성하고 시작해보겠다. (이후 다시 사용할 수도 있으니 일단 settings.json 파일 내에서 주석처리해두어도 되겠다)

똑똑한 claudecode에게 이렇게 이야기하면 끝.

bkit 플러그인을 비활성화 시켜줘

#2. Gstack 설치

이제 bkit이 비활성화가 되었다면, Gstack을 설치해보자.

Quick Start를 살펴보니 아래와 같은 순서로 진행할 수 있다고 한다.

Install gstack (30 seconds)
Run /office-hours — describe what you’re building
Run /plan-ceo-review on any feature idea
Run /review on any branch with changes
Run /qa on your staging URL
Stop there. You’ll know if this is for you.

아래 명령어로 우선 Gstack부터 설치해보자.

Install gstack: run
git clone –single-branch –depth 1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack && cd ~/.claude/skills/gstack && ./setup then add a “gstack” section to CLAUDE.md that says to use the /browse skill from gstack for all web browsing, never use mcp__claude-in-chrome__* tools, and lists the available skills: /office-hours, /plan-ceo-review, /plan-eng-review, /plan-design-review, /design-consultation, /design-shotgun, /design-html, /review, /ship, /land-and-deploy, /canary, /benchmark, /browse, /connect-chrome, /qa, /qa-only, /design-review, /setup-browser-cookies, /setup-deploy, /setup-gbrain, /retro, /investigate, /document-release, /codex, /cso, /autoplan, /plan-devex-review, /devex-review, /careful, /freeze, /guard, /unfreeze, /gstack-upgrade, /learn. Then ask the user if they also want to add gstack to the current project so teammates get it.

#3. Gstack의 시작점인, /office-hours

설치가 완료되면 /office-hours 부터 시작.

(터미널 내 /office-hours가 suggest되지 않는다면 exit명령어로 현재 폴더에서 빠져나왔다가 다시 진입해보면 보이는 것을 확인할 수 있다)

Github에 설명된 내용을 보면 아래와 같이 이야기를 이어나갈 수 있다고 한다.

위에서도 이야기했지만, 다시 정리해보면.

초기 앱을 만들 때 기획을 탄탄하게 하기 위한 /office-hours,
기획안에 대해서 CEO리뷰를 받아보기 위한 /plan-ceo-review
엔지니어들의 기술 검토를 받아보기 위한 /plan-eng-review
그리고 Approve plan을 통해 코딩을 시작하고,
QA를 하기 위한 /qa, 최종 배포를 위한 /ship 스킬을 사용하는 것을 볼 수 있다.

나: 내 달력을 위한 일일 브리핑 앱을 만들고 싶어
나: /office-hours클로드: [불편함에 대한 질문들 – 가설이 아닌 구체적인 예]
나: 여러 개의 Google 캘린더, 오래된 정보가 포함된 이벤트, 등 불편해요
클로드: 프레임 작업을 다시 진행하겠습니다. “매일 브리핑 앱”이라고 말씀하셨죠? 하지만 실제로 설명하신 것은 개인비서 AI에 가까워요.

(아래는 claude의 질문항목들)

[extracts 5가지 기능]
[challeng 4가지 전제 – 동의, 동의하지 않음 또는 조정]
[노력 추정치를 사용한 generates 3 구현 접근법]
전체 비전은 3개월짜리 프로젝트로, 실제로 작동하는 일일 브리핑부터 시작합니다.
[디자인 문서 작성 → 다운스트림 기술에 자동으로 피드]
나: /plan-ceo-review
[디자인 문서 reads, 범위 도전, 10개 섹션으로 구성된 리뷰 실행]
나: /plan-eng-review
[데이터 흐름, 상태 기계, 오류 경로에 대한 ASCII 다이어그램]
[테스트 매트릭스, 장애 모드, 보안 문제]
나: 계획 승인. 계획 모드 종료. (Approve plan. Exit plan mode.)
[11개의 파일에 걸쳐 2,400줄을 씁니다. ~8분.]
나: /plan-eng-review
[자동 수정] 두 가지 문제. [질문] 레이스 상태 → 수정을 승인합니다.
나: /qa https://staging.myapp.com
[실제 브라우저에서 흐름을 클릭하고 버그를 찾아 수정]
나: /ship
테스트: 42 → 51 (+9 신제품). PR: github.com/you/app/pull/42

이러한 순서로 진행될 수 있다.

차근차근 내 프로젝트(아이디어를 wireframe으로 만들어주는 서비스)를 하나 진행해보고자 한다.

프로젝트 명은 ‘Define Studio’
sub title은 ‘From Idea to PRD & Wireframe’

개인적으로 주니어 기획자와 디자이너들 기준으로 무엇을 어디부터 어떻게 시작해야할지 모르는 경우들이 많은 것 같고, 기존의 선배들의 문서들을 참조해가며 어렵게 물어물어 나의 지식으로 자산화해나가던 과거를 생각하면 꼭 필요한 서비스가 아닐까 싶었다.

따라서 아래와 같이 아이디어만 한 줄 적으면 ai와 티키타카 해가면서 필요한 사용자에 대한 정의, PRD, 와이어프레임 등을 만들어주는 서비스를 만들어보고자 한다.

이런저런 이야기들을 나누다 보니, v1을 먼저 구현하여 이어 v2로 업데이트 해 나가는 방향이 좋아보인다.

대화를 통해 아래와 같은 순서로 가기로 했다.

v1 (초기 버전-현재 구현 버전)

– 12개 질문 고정 (한 화면에 전부 표시, 사용자가 채움)
– GPT-4o 1회 호출로 PRD + 와이어프레임 타입 결정
– 와이어프레임 템플릿 3종 고정 (모바일 앱 / 웹 대시보드 / 랜딩페이지)
– 로그인 없음 — UUID 링크로 공유 (Redis TTL 7일)
– 플로우: 선형 강제 (입력 → 생성 → 링크)
– 아웃풋: HTML 정적 와이어프레임 + PRD Markdown 다운로드

v2 (North Star, 나중에)

– 제품 타입 자동 감지 → 질문 플로우 분기 (Double Diamond / GDD / Lean UX / Conversational UX / Voice Interface)
– 질문 커리큘럼 동적 (제품 타입별 다른 질문)
– 와이어프레임 출력 선택 가능: Figma API / HTML / React 컴포넌트/ PDF
– 진입점 모듈화: 이미 PRD 있으면 와이어프레임만, 스케치만 있으면 PRD만 등
그런데 생각해보니, v1에서 선형으로 움직이더라도 진입점을 선택할 수 있으면 좋을 듯 하여 아래와 같이 조금은 수정해보았다.

[랜딩]

│
├─ 아이디어만 있어 → 12개 질문 → PRD JSON → 와이어프레임
│
├─ PRD 초안이 있어 → 초안 붙여넣기 → AI가 JSON으로 정제 → 와이어프레임
│
└─ 화면 구상이 있어 → 화면 설명 입력 → 와이어프레임 (PRD 스킵)

#4. 한번 더 검증을 위한 /plan-ceo-review

/office-hours가 1차 마무리되면, 이제 /plan-ceo-review를 진행해보도록 하자.

앞선 논의 내용이 명확하다면, /plan-eng-review로 넘어가도 괜찮다.

전체 리뷰를 거친 후 정리된 내용은 아래와 같다.

CEO Plan: AI-Guided Product Maker — Idea to PRD + Wireframe
Generated by /plan-ceo-review on 2026-05-09
Branch: unknown | Mode: SELECTIVE EXPANSION
Repo: gstack_wireframe

#가장 중요한 12가지 문항

│ 1 │ 이 서비스로 해결하려는 문제를 한 문장으로 필수
│ 2 │ 지금 사람들이 이 문제를 어떻게 해결하고 있어?
│ 3 │ 이 서비스가 가장 필요한 사람은 누구야? 필수
│ 4 │ 그 사람이 이 서비스를 쓰는 핵심 목적(Goal)은?
│ 5 │ 이 서비스를 쓰면 그 사람의 하루/업무에 어떤 변화가 생겨?
│ 6 │ 경쟁 서비스나 대체재가 있어? 우리가 다른 점은?
│ 7 │ 이 서비스로 어떻게 돈을 벌 계획이야?
│ 8 │ v1에서 반드시 있어야 하는 핵심 기능 3가지는? 필수
│ 9 │ 반드시 없어야 하는 것 (scope out)은?
│10│ 이 서비스가 성공했다는 걸 어떻게 알 수 있어?
│11│ 어떤 플랫폼/환경에서 쓸 거야? 필수
│12 │ 개발 팀 규모와 대략적인 타임라인은?

##Vision

### 10x Check

현재 설계(v1): 아이디어 → 12문항 → PRD + HTML 와이어프레임 → UUID 링크. 개인 솔로 플로우.

10x 버전: 팀이 함께 아이디어를 입력하고, AI가 질문을 던지면 팀원들이 실시간으로 답변을 채우고, 생성된 PRD에 댓글을 달고, 와이어프레임을 Figma로 바로 내보내고, Jira/Linear에 티켓을 자동 생성하는 **Product Genesis Platform**. 이 제품이 있으면 “PRD 미팅”이라는 개념이 사라진다.

### Dream State (12개월 후)

– Product Maker가 아이디어를 입력하는 순간부터 팀에게 공유하는 순간까지, 모든 단계를 한 플랫폼에서 완결.
– 제품 타입(모바일/웹/음성/대시보드)을 자동 감지해서 맞는 질문 커리큘럼 적용.
– 로그인 후 히스토리 보관, PRD 이터레이션, 버전 관리.
– API 제공: 다른 도구에서 Product Maker 플로우를 embed 가능.

## Accepted Scope (v1에 포함)

– 3개 진입점: 아이디어만 / PRD 초안 / 화면 구상
– 경로별 validation (필수 항목 명시, 최소 글자 수 명시)
– 에러 핸들링: EmptyResponse, Refusal, Redis 실패, Schema 불일치 대응
– Rate limit: Upstash Ratelimit sliding window (분당 3, 일일 20)
– GPT-4o 스트리밍 (SSE, Next.js App Router)
– 이탈 보호: isSubmitting 상태 + beforeunload
– localStorage 자동저장: 500ms debounce, 마운트 시 복원

## Architecture Summary (확정)

[랜딩: 진입점 선택]

│
├─ 경로1: 12문항 폼 (필수 4개) → localStorage 저장
├─ 경로2: PRD 초안 텍스트 (최소 100자)
└─ 경로3: 화면 설명 (최소 50자)
│
[클라이언트 validation] → 제출 버튼 비활성화
│
POST /api/generate (rate limit 체크)
│
[prompt-builder: 경로별 프롬프트 3종]
│
[GPT-4o streaming (SSE)]
│
[PRD JSON 실시간 표시] → [JSON 완성 → Schema 검증]
│
[template-engine → HTML 와이어프레임]
│
[UUID 생성 → Redis SET TTL 7일]
(실패 시: 인-메모리 폴백, 다운로드만 제공)
│
[결과 페이지: PRD + iframe 와이어프레임 + 링크 경고 + 다운로드]