머릿속 아이디어가 실제 코드가 되기까지, 매 단계마다 한 번 더 확인합니다. 문서와 코드가 따로 놀지 않도록, AI 가 멋대로 진행하지 않도록.
upstream superpowers 5.0.7 (MIT, Jesse Vincent) 의 프로덕션 안전성 확장
|
뭘 만들었는지, 왜 이렇게 했는지 따라가기 어려울 때. js-super 는 단계마다 문서를 자동으로 정리해요:
사람은 |
위험한 부분이 어딘지, 어디서 깨질지 막막할 때. js-super 는 위험한 코드 줄마다 |
되묻지 않고 코드를 갈아엎거나, 중요한 결정을 몰래 내릴 때. js-super 는 단계마다 확인 게이트를 둡니다. (v2.3.5+) 자잘한 결정은 알아서, 위험한 결정만 사람에게 물어봅니다. |
flowchart LR
classDef cmd fill:#7c3aed,stroke:#a78bfa,color:#fff,stroke-width:2px
classDef doc fill:#1e293b,stroke:#06b6d4,color:#e2e8f0,stroke-width:2px
classDef gate fill:#dc2626,stroke:#fca5a5,color:#fff,stroke-width:2px
classDef out fill:#15803d,stroke:#86efac,color:#fff,stroke-width:2px
A["/brainstorm"]:::cmd --> B[요구사항.md]:::doc
B --> G1{확인 게이트}:::gate
G1 --> C["/tech-design"]:::cmd
C --> D[기술설계.md]:::doc
D --> G2{확인 게이트}:::gate
G2 --> E["/write-plan"]:::cmd
E --> F[구현계획.md]:::doc
F --> G3{확인 게이트}:::gate
G3 --> H["/execute-plan"]:::cmd
H --> I[코드 + 변경이력 + 위험 주석]:::out
각 단계 사이 확인 게이트 에서 AI 가 한 번 멈춥니다. 다음 단계로 자동으로 넘어가지 않아요.
1. 설치 — Claude Code 안에서:
/plugin marketplace add LonerStayle/js-super
/plugin install js-super@js-super
세션 한 번 재시작하면 끝.
2. 첫 피처 만들기 — 슬래시 4 줄로:
/brainstorm 사용자 잔액 출금 기능
/tech-design
/write-plan
/execute-plan
각 단계가 끝날 때마다 AI 가 한 번씩 물어봐요. 답변에 따라 다음 단계로.
산출물은 docs/features/2026-05-23-사용자-잔액-출금/ 폴더에 3 개 .md + 보기 좋은 .html 사본까지 알아서 만들어 둡니다.
"피처가 커서 task 가 7-8 개인데, 하나씩 하면 시간 너무 걸려요" "근데 AI 가 코드 새로 짓는 건 더 무서워요. 계획 그대로만 했으면 좋겠어요"
서브에이전트 모드는 두 가지 강력한 약속을 합니다.
① 일꾼 AI 는 계획서를 그대로 복붙해요
구현계획.md 의 task 마다 **원본** → **수정본** 변경이 적혀 있어요. 일꾼 AI 는 그 변경을 한 글자도 안 틀리게 복사 해서 실제 코드에 적용합니다. 자기 머리로 새 코드를 짓지 않아요. 의심스러우면 즉시 멈춥니다.
→ AI 가 계획에 없던 코드를 만들어서 깨지는 사고 0.
② 의존그래프를 자동 분석해 wave 로 묶어 동시 처리
7 개 task 를 무작정 7 개 동시에 돌리지 않아요. 먼저 task 사이 의존관계를 분석한 뒤 wave 단위 로 묶어 단계적으로 dispatch 합니다.
flowchart LR
classDef wave fill:#1e293b,stroke:#06b6d4,color:#e2e8f0,stroke-width:2px
subgraph W1["Wave 1 — 의존 없음, 동시"]
direction TB
T1["T1: User.balance 컬럼"]:::wave
T2["T2: 마이그레이션"]:::wave
end
subgraph W2["Wave 2 — Wave 1 끝나야"]
direction TB
T3["T3: withdraw API"]:::wave
end
subgraph W3["Wave 3 — Wave 2 끝나야"]
direction TB
T4["T4: 라우트 등록"]:::wave
T5["T5: 단위 테스트"]:::wave
end
W1 --> W2 --> W3
Wave 1 (T1+T2 동시) → Wave 2 (T3) → Wave 3 (T4+T5 동시). 순서가 꼬여서 깨질 일 없이, 안전한 범위에서 최대 병렬.
③ 일꾼이 막히면 조정자가 먼저 복구 시도해요
flowchart LR
classDef main fill:#7c3aed,stroke:#a78bfa,color:#fff
classDef sub fill:#1e293b,stroke:#06b6d4,color:#e2e8f0
classDef block fill:#dc2626,stroke:#fca5a5,color:#fff
P[구현계획.md]:::sub --> I["일꾼 (haiku)<br/>복붙 + 의존 분석"]:::sub
I -->|성공| M[메인 AI]:::main
I -.-> B(("막힘")):::block
B -.->|자동 호출| R["조정자 (sonnet)<br/>복구 시도"]:::sub
R -.->|복구| I
R -.->|실패| M
|
이렇게 동작해요
|
그래서 뭐가 좋아요?
|
"기획에서 갑자기 FR 하나 추가됐어요. 기술설계랑 구현계획도 다 다시 봐야 해요. 코드는 어디까지 영향 있는지도 모르겠어요"
스펙은 살아있는 동안 계속 바뀝니다. 그때마다 3 개 문서를 손으로 정합 맞추는 건 사람의 일이 아니에요. js-super 는 그걸 자동으로:
flowchart LR
classDef in fill:#7c3aed,stroke:#a78bfa,color:#fff
classDef sub fill:#1e293b,stroke:#06b6d4,color:#e2e8f0
classDef out fill:#15803d,stroke:#86efac,color:#fff
A["요구사항.md<br/>FR-3 신규 추가"]:::in --> B[자동 영향 분석]:::sub
B --> C{"기술설계<br/>영향?"}:::sub
B --> D{"구현계획<br/>영향?"}:::sub
B --> E{"이미 작성된<br/>코드 영향?"}:::sub
C -->|YES| F["§4 갱신 제안"]:::sub
D -->|YES| G["T7~T9 갱신 제안"]:::sub
E -->|YES| H["해당 코드 위치 표시"]:::sub
F --> I[사용자 확인]:::sub
G --> I
H --> I
I --> J["3 개 md 동기화 + .html 재생성"]:::out
|
자동으로 일어나는 일
|
그래서 뭐가 좋아요?
|
"4 단계마다 매번 게이트 답하기 무거워요. clarifying Q 만 답하면 끝까지 갔으면 좋겠어요"
친숙한 영역 / 작은 ~ 중간 피처 / 빠른 prototype 일 때. PRD → 기술설계 → 구현계획 → 실행까지 4 단계 chain 을 자동으로 돌리되, 변경이력 / 위험 주석 / 3 개 MD 산출물은 그대로 챙겨갑니다.
|
이렇게 쓰세요 → AI 가 Socratic clarifying Q 1~5 개를 물어봐요. → 사용자는 답변만. 그 뒤로 모든 단계 자동 진행. |
그래서 뭐가 좋아요?
|
"PRD 부터 만들기엔 너무 작은 일인데, 그냥 시키기엔 변경이력은 남기고 싶어요"
이슈 트래커에 쌓인 자잘한 fix 들. 의존성 업데이트. 같은 파일 안 작은 refactor 묶음. 4 단계 풀 워크플로는 무겁고, 그냥 chat 으로 던지자니 흔적이 안 남는 그 사이를 채웁니다.
|
이렇게 쓰세요 |
그래서 뭐가 좋아요?
|
"PR 리뷰하면서, 진행 중인 티켓도 보고, 가끔 긴급 hotfix 도 끼어들어요"
한 코드베이스에서 여러 작업을 동시에 들고 있을 때. raw git worktree add 는 매번 .env 복사 / 빌드 / Claude 메모리 처리를 손으로 해야 합니다.
/worktree 는 그걸 한 줄로, 그리고 Claude 메모리까지 자동으로 연결해 줍니다.
|
이렇게 쓰세요 # 단수
/worktree GNG-432-캔버스첨부오류
# 복수
/worktree feature-a feature-b feature-c
# 자연어
/worktree
워크트리 3 개 만들어줘.
브랜치는 결제 / 정산 / 환불. |
그래서 뭐가 좋아요?
|
"feature 작업 1 주 했더니 main 이 멀리 갔어요. 머지하려니 충돌 무서워요"
feature 브랜치가 오래 살면 main 이 앞으로 갑니다. 보통은 main 워크트리에서 git merge feature 하다가 거기서 충돌 나서 main 이 더러워지죠.
/worktree-merge-back 은 거꾸로, feature 워크트리 안에서 main 을 당겨와 충돌을 거기서 해결합니다.
|
이렇게 쓰세요 # feature 워크트리로 들어가서
cd .worktrees/GNG-432-캔버스첨부오류
/worktree-merge-back이걸 하면 main 의 최신 변경을 이 워크트리로 당겨 옵니다. 충돌은 여기서만 일어나요. |
그래서 뭐가 안전해요?
|
"배포 전에 보안 / 비용 한 번 점검하고 싶은데 시간이 없어요"
5 명의 AI 가 동시에 코드를 다른 각도로 훑고, 한 명이 그걸 모아 보기 좋은 HTML 보고서를 만들어 줍니다. 코드는 건드리지 않아요.
flowchart TD
classDef main fill:#7c3aed,stroke:#a78bfa,color:#fff
classDef sub fill:#1e293b,stroke:#06b6d4,color:#e2e8f0
classDef out fill:#15803d,stroke:#86efac,color:#fff
M[메인 AI]:::main
A["API 비용 추정"]:::sub
B["개인정보 노출"]:::sub
C["민감 로직 검토"]:::sub
D["AI 자동화 위험"]:::sub
E["거버넌스 점검"]:::sub
F["보고서 생성"]:::sub
R["docs/audit/...html"]:::out
M --> A & B & C & D & E
A & B & C & D & E --> F
F --> R
- Snyk, Bandit 같은 외부 보안 도구를 대체하는 게 아니라 보완합니다 (다른 각도로 catch)
- 보고서는
.html한 장 — gitignored, 사람만 보면 됩니다
"자주 반복하는 작업을 슬래시 명령 하나로 만들어 두고 싶어요"
자유 텍스트 한 줄이면 /new-skill 이 SKILL.md 한 장을 자동으로 만들어 줍니다. 만들 위치는 이 프로젝트만 쓸지 전체(글로벌) 로 쓸지 매번 물어봐요.
|
이렇게 쓰세요 → |
그래서 뭐가 좋아요?
|
| 명령 | 결과물 | 한 줄 설명 |
|---|---|---|
/brainstorm <주제> |
요구사항.md |
PRD 또는 자유 모드 선택 → 요구사항 정리 |
/tech-design |
기술설계.md |
요구사항 기반 기술 설계 |
/write-plan |
구현계획.md |
task 단위로 잘게 쪼개기 |
/execute-plan |
코드 + 흔적 | 인라인 / 서브에이전트 모드 선택 |
/auto-* 4 개 |
같은 결과물 | 게이트 최소화 자동 진행 |
/og-* 3 개 |
upstream 흐름 | js-super 확장이 무겁다 싶을 때 |
/fast-tasks |
task list | PRD 없이 잡일 묶어 처리 |
| 명령 | 한 줄 설명 |
|---|---|
/audit-risk |
5+1 AI 가 보안·거버넌스 동시 점검 → HTML 보고서 |
/worktree <브랜치> |
격리 작업 공간 + .env* + Claude 메모리 자동 |
/worktree-merge-back |
feature 워크트리 안에서 안전한 main 머지 |
/worktree-remove |
현재 워크트리 + 브랜치 안전 정리 |
/new-skill <설명> |
자유 텍스트 한 줄 → skill 자동 생성 (프로젝트 / 전체 선택) |
/list-skills |
js-super 가 만든 skill 만 조회 (프로젝트 + 전체) |
/remove-skill <이름> |
js-super 가 만든 skill 안전 정리 |
/pretty-md |
.md 본문 다듬기 (의미는 안 바꿈) |
/sync-html |
.html 보기 좋은 사본 다시 생성 |
|
요구사항 / 기술설계 / 구현계획 각자 1 개씩. 문서 하단에 누가 / 언제 / 왜 바꿨는지 자동으로 쌓여요. AI 는 항상 이 |
같은 내용을 다크 모드로 보기 좋게. 차트 / 다이어그램 / 카드를 알아서 골라 넣어요. 구현계획에서 코드 변경은 초록(+) / 빨강(−) 으로 한눈에. |
# RISK(side-effect):
# 외부 결제 호출
# by: /write-plan T53 가지 카테고리로 자동 부착. PR 리뷰 시 |
3 개의 .md 분리는 왜?
한 피처가 한 폴더 안에 세 개의 .md 로 나뉘어 있어요.
docs/features/2026-05-23-잔액-출금/
├── 잔액-출금-requirements.md ← /brainstorm
├── 잔액-출금-tech-design.md ← /tech-design
└── 잔액-출금-implementation-plan.md ← /write-plan
- 날짜는 생성일 — 작업이 길어져도 폴더명은 안 바뀝니다
- 세 문서가 같은 폴더라 PR 리뷰 한 곳에서 끝
- 각 문서 끝에는 변경이력 footer 가 자동 누적
변경이력은 어떻게 생겼나요?
## 변경이력
### CH-001 [요구사항-추가] 2026-05-23 14:30
- **이유**: 사용자가 출금 한도 추가 요청
- **무엇이**: FR-3 (1 일 출금 한도 100 만원) 신설
- **영향범위**: tech-design §4 / impl-plan T7~T9
- **연관 CH-id**: -- 종류:
[요구사항-추가/수정/삭제]/[코드-수정]/[검증]/[릴리즈] - 코드 변경은 commit SHA 만 참조 (문서가 무거워지지 않게)
- 한 작업이 여러 task 로 나뉘어도 마지막에 한 번에 footer 정리 (v1.1.7+)
위험 주석 3 종
# RISK(side-effect): 외부 결제 호출, 멱등성 미보장 — by /write-plan T5
def charge(user_id, amount):
return payment_gateway.charge(user_id, amount)
# RISK(breaking): API v1 응답 구조 변경, v1 클라이언트 깨짐 — by /tech-design §3
def get_balance_v2(user_id) -> dict:
...
# RISK(race): 동시 출금 시 잔액 차감 충돌 가능 — by /tech-design §5
def withdraw(user_id, amount):
balance = db.get_balance(user_id)
...| 종류 | 무슨 뜻 |
|---|---|
side-effect |
외부 호출 / DB 쓰기 / 파일 / 로그 |
breaking |
API 시그니처 / 응답 / DB 스키마 변경 |
race |
동시성 / 트랜잭션 / 멱등성 |
.html 사본은 어떻게 만들어지나요?
.md 가 사용자 리뷰 시점에 들어가면, 백그라운드에서 자동으로 .html 이 만들어집니다. 메인 작업은 멈추지 않아요.
- 다크 모드 기본 (v2.3.4+) — 깊은 어두운 배경 + 보라/시안 악센트
- 상황에 맞게: 차트 / 인터랙티브 / 다이어그램 / 카드 (필요하면 사용)
- 구현계획의 코드 변경: 초록(+) / 빨강(−) 한눈에 비교
- 중요 내용은 펼친 채로 (v2.3.3+) — FR / AC 본문은 접지 않음
.gitignore처리되어 있어요. AI 는 항상.md만 읽습니다/sync-html한 줄로 수동 재생성도 가능
확인 게이트 — 어디서 멈추나요?
8 곳에서 멈춥니다. 모두 한국어로 묻고, OS 알람까지 울려서 자리에 없어도 catch 가능 (v1.1.10+).
| 시점 | 게이트 |
|---|---|
| brainstorm 진입 | PRD / 소크라테스식 |
| 요구사항 확인 | 예 / 아니오 |
| → 기술설계로 | (자동) |
| 기술설계 확인 | 예 / 아니오 |
| → 구현계획으로 | 예 / 아니오 |
| 구현계획 확인 | 예 / 아니오 |
| 실행 방식 | 인라인 / 서브에이전트 |
| 마무리 | 머지 / PR / 그대로 / 폐기 |
v2.3.5+ — 실행 중에는 사소한 결정 (병렬로 할까? task 묶을까?) 은 자율 진행, 위험한 결정만 사람에게:
- 실행 모드 변경
- 계획 밖 파일 손대기
- 파괴적 작업 (rm / reset / push --force)
- task 끼리 충돌
- 외부 서비스 호출 (push, PR 생성)
- 약속 안 한 새 의존성
문서 하나 바꾸면 아래도 같이 검토
요구사항의 FR-3 가 수정되면, 자동으로 아래로 영향을 확인합니다.
flowchart LR
A[요구사항 FR-3 수정] --> B[연쇄 영향 분석]
B --> C{기술설계 영향?}
B --> D{구현계획 영향?}
B --> E{코드 영향?}
C -->|YES| F[§4 갱신 제안]
D -->|YES| G[T7~T9 갱신 제안]
E -->|YES| H[해당 코드 위치 표시]
F --> I[사용자 확인]
G --> I
H --> I
I --> J["/sync-html 안내"]
.html 사본은 자동으로 stale 표시 → /sync-html 한 줄로 재생성.
서브에이전트 모드 — task 가 많을 때
구현계획의 task 가 5 개 넘고 서로 독립적이면, AI 여러 개가 병렬로 task 를 처리할 수 있어요.
flowchart LR
classDef main fill:#7c3aed,stroke:#a78bfa,color:#fff
classDef sub fill:#1e293b,stroke:#06b6d4,color:#e2e8f0
classDef block fill:#dc2626,stroke:#fca5a5,color:#fff
M[메인 AI]:::main
P[구현계획.md]:::sub
I["일꾼 (haiku)<br/>계획 그대로 실행"]:::sub
R["조정자 (sonnet)<br/>막히면 복구 시도"]:::sub
B((막힘)):::block
M --> P --> I
I -->|성공| M
I -.-> B
B -.->|자동 호출| R
R -.->|복구| I
R -.->|실패| M
- 일꾼 (haiku, 빠르고 저렴) — 계획 그대로 실행. 의심스러우면 즉시 멈춥니다.
- 조정자 (sonnet, 똑똑) — 일꾼이 막히면 자동으로 복구 시도. 그래도 안 되면 사람에게.
- 일반
/execute-plan(인라인) 은 영향 0 — 평소처럼 LLM 자율로 진행됩니다.
전체 Skill 29 개
워크플로 코어 (4) — brainstorming / tech-design / writing-plans / executing-plans
자동 흐름 (4) (v1.1.17+) — auto-brainstorming / auto-tech-design / auto-writing-plans / auto-executing-plans
upstream 원본 (커맨드 전용, v2.8.1+) — /og-brainstorm / /og-write-plan / /og-execute-plan (스킬 → 커맨드 본문 인라인, 컨텍스트 미상주)
문서·시각화 (3) — generating-html / code-pretty / change-history
검증·거버넌스 (4) — verifying-spec / verification-before-completion / change-propagation / risk-annotation
서브에이전트 (3) — js-super-sub-driven / subagent-driven-development / dispatching-parallel-agents
워크트리 (3) — setting-up-worktrees / using-git-worktrees / worktree-merge-back
테스트·디버깅 (2) — test-driven-development / systematic-debugging
리뷰·마무리 (3) — requesting-code-review / receiving-code-review / finishing-a-development-branch
메타 (2) — using-superpowers / writing-skills
| 용도 | 필요한 것 |
|---|---|
| Hook 처리 | jq 또는 python3 (둘 중 하나) |
| Claude Code | 최신 버전 권장 |
js-super 자체는 외부 의존성 0.
이 저장소는 superpowers v5.0.7 풀 카피 위에 프로덕션 안전성 확장 을 얹은 형태입니다. 단계별 확인 게이트 / 변경이력 자동 footer / 위험 주석 / 서브에이전트 wave-parallel 실행 / .html 다크 모드 사본 / 보안·거버넌스 감사 — 실무에서 발생하는 검토 부담 / AI 자동승인 폭주 / 문서·코드 정합 문제를 풀기 위한 확장입니다. 게이트 UI 는 한국어로 노출됩니다. upstream 업데이트는 수동 머지로 따라갑니다.
/og-* — upstream 원본 흐름이 필요할 때:
| 명령 | 산출물 위치 |
|---|---|
/og-brainstorm |
docs/superpowers/specs/... |
/og-write-plan |
docs/superpowers/plans/... |
/og-execute-plan |
(코드만) |
og-* 흐름은 변경이력 / 위험 주석 / .html 사본 / 검증 게이트가 안 따라옵니다. upstream 그대로의 가벼운 흐름.
중요 —
/og-*와 정식/brainstorm... 흐름을 한 피처 안에서 섞지 마세요. 산출물 경로가 다르게 분리됩니다.
최근 (v2.x)
| 버전 | 무엇이 바뀌었나요 |
|---|---|
| v2.7 | skill 빌더 3종 고도화 — 생성 스코프(프로젝트 / 전체) + 출처 표식 + /list-skills 조회 |
| v2.6 | /new-skill · /remove-skill — skill 만들고 정리하기 |
| v2.5 | --no-ask 모드 + /worktree-remove 워크트리 정리 |
| v2.4 | 한국어 친화 안내 톤 + .html 백그라운드 생성 신뢰성 |
| v2.3.5 | 실행 중 자잘한 재질문 줄임, 질문할 땐 알람 보장 |
| v2.3.4 | .html 다크 모드 기본 + 코드 diff 초록/빨강 표시 |
| v2.3.3 | .html 의 핵심 내용 (FR / AC) 펼친 채로 |
| v2.3.0 | /audit-risk 보안·거버넌스 1 회 감사 |
| v2.2.x | .html 사본을 백그라운드에서 자동 생성 |
| v2.1.0 | /fast-tasks 잡일 묶어 처리 |
| v2.0.4 | /worktree-merge-back 안전한 머지 |
| v2.0.0 | 서브에이전트 병렬 모드 |
이전 (v1.x)
| 버전 | 무엇이 바뀌었나요 |
|---|---|
| v1.1.17 | /auto-* 4 개 자동 흐름 |
| v1.1.10 | 게이트 한국어화 |
| v1.1.7 | 변경이력 마지막에 한 번에 정리 |
| v1.1.5 | 워크트리 ↔ 메인 메모리 자동 연결 |
| v1.1.0 | PRD / 자유 모드 선택 |
| v1.0.0 | 3-MD 분리 + 변경이력 + 위험 주석 |