Claude Code + Superpowers로 캘린더 만들기: brainstorm→plan→execute

"아이디어는 있는데, 어디서부터 시작해야 할지 모르겠다."

개발자라면 누구나 겪는 상황입니다. Claude Code의 Superpowers 스킬 시스템은 이 문제를 체계적으로 해결합니다. 이 글에서는 공유 캘린더를 만들면서 경험한 brainstorm→plan→execute 워크플로우를 공유합니다.

Superpowers란?

Superpowers는 Claude Code의 스킬 시스템을 활용한 오픈소스 라이브러리로, 20개 이상의 '스킬'을 제공합니다. 각 스킬은 SKILL.md 파일로 구성되어 컨텍스트에 따라 자동 활성화되며, 테스트, 디버깅, 협업 영역을 커버합니다. 이는 AI가 무작정 코드를 작성하는 대신 검증된 방법론을 강제 적용하도록 설계되었습니다. /superpowers:brainstorm, /superpowers:write-plan, /superpowers:execute-plan 같은 명령어로 복잡한 작업을 단계별로 진행할 수 있습니다.

설치 및 사용법

Claude Code에서 간단히 설치합니다: /plugin marketplace add obra/superpowers-marketplace 후 /plugin install superpowers@superpowers-marketplace. 세션을 재시작하면 /superpowers:brainstorm 등의 명령어가 활성화됩니다.

브레인스토밍 → 설계 문서 → 구현 플랜 → 자동 실행

이 워크플로우의 핵심은 AI가 질문을 던지고, 사용자가 선택하면, AI가 실행한다는 점입니다.

Phase 1: Brainstorm - 요구사항 수집

시작하기

/superpowers:brainstorm 가족끼리 일정을 공유할 달력 프로그램을 만들것이다.
디자인은 https://calendar-shadcn.vercel.app/ 를 참조하고 shadcn을 사용할 것이다.
로그인은 firebase를 이용할 것이고 '/Users/.../backend-api/' 에 백엔드 api를 쓸수 있다.

이 한 줄로 브레인스토밍이 시작됩니다. Claude는 먼저 현재 프로젝트 상태를 파악합니다.

질문-응답 방식의 요구사항 수집

Claude는 기능별로 선택지를 제시하며 질문합니다:

1. 가족 규모

가족 구성원은 몇 명 정도를 예상하시나요?

1. 소규모 (2-4명) - 부부와 자녀 1-2명
2. 중규모 (5-8명) - 조부모, 부모, 자녀 포함 확대가족
3. 유동적 - 사용자가 직접 가족을 초대/관리

답변: 2

2. 권한 체계

일정 수정 권한은 어떻게 설정하고 싶으신가요?

1. 모두 동등 - 가족 누구나 모든 일정을 생성/수정/삭제 가능
2. 본인 일정만 - 각자 본인이 만든 일정만 수정 가능
3. 관리자 체계 - 부모만 관리자 권한, 자녀는 본인 일정만 수정

답변: 1

3. 색상 구분

일정을 어떻게 구분해서 보고 싶으신가요?

1. 구성원별 색상 - 각 가족 구성원마다 고유 색상
2. 카테고리별 색상 - 일정 유형별 색상 (병원, 학교, 가족행사)
3. 둘 다 - 구성원 + 카테고리 조합

답변: 3

이런 식으로 캘린더 뷰, 알림 기능, 반복 일정, 인증 방식 등을 하나씩 결정합니다.

자동 생성된 설계 문서

모든 질문이 끝나면 Claude가 설계 문서를 자동 생성합니다:

# 가족 공유 캘린더 설계 문서
 
## 1. 개요
**목적**: 확대가족(5-8명)이 일정을 공유하는 웹 캘린더
 
**핵심 특징**:
- 구성원별 색상 + 카테고리별 색상 조합
- 월간/주간/일간 뷰 전환
- 상세 반복 일정 (매주 월·수·금, 매월 셋째 토요일 등)
- Firebase Auth 공유 (kid-chat과 동일 계정)
 
## 2. 아키텍처
┌─────────────────┐     ┌─────────────────┐     ┌──────────────┐
│  Next.js App    │────▶│  FastAPI        │────▶│  PostgreSQL  │
│  (calendar)     │     │  (backend-api)  │     │              │
└────────┬────────┘     └─────────────────┘     └──────────────┘
         │
         ▼
┌─────────────────┐
│  Firebase Auth  │ ◀── kid-chat과 공유
└─────────────────┘

여기서 중요한 점: 사용자는 선택만 했을 뿐인데, 완성된 설계 문서가 나왔습니다.

Phase 2: Plan - 구현 플랜 작성

플랜 생성 명령

/superpowers:write-plan '/path/to/2026-01-01-family-calendar-design.md'
브레인스토밍으로 나온 결과이다

Claude는 설계 문서를 읽고 18개 Task로 구성된 상세 구현 플랜을 생성합니다.

플랜 구조

# Family Calendar Implementation Plan
 
## Phase 1: Frontend Foundation (Tasks 1-5)
├── Task 1: Initialize Next.js Project
├── Task 2: Install and Configure shadcn/ui
├── Task 3: Configure Firebase
├── Task 4: Create Auth Hook
└── Task 5: Create Login Page
 
## Phase 2: Backend API (Tasks 6-12)
├── Task 6: Create Database Models
├── Task 7: Create Alembic Migration
├── Task 8: Create Pydantic Schemas
├── Task 9: Create Members Router with Tests (TDD)
├── Task 10: Create Categories Router with Tests (TDD)
├── Task 11: Create Events Router with Tests (TDD)
└── Task 12: Add Auth Verify Endpoint
 
## Phase 3: Calendar UI (Tasks 13-18)
├── Task 13: Create API Client
├── Task 14: Create Calendar Header Component
├── Task 15: Create Month View Component
├── Task 16: Create Week and Day View Components
├── Task 17: Create Event Dialog Component
└── Task 18: Integrate Calendar Components

Task 상세 예시

각 Task에는 구체적인 코드와 검증 방법이 포함됩니다:

### Task 1: Initialize Next.js Project
 
**Command:**
npx create-next-app@latest . --typescript --tailwind --eslint \
  --app --src-dir --import-alias "@/*" --use-npm
 
**Verification:**
- npm run dev 실행 → localhost:3000 접속 확인
- src/app/page.tsx 존재 확인

### Task 9: Create Members Router with Tests (TDD)
 
**Test First:**
def test_get_members_returns_list(client_with_fake_auth):
    response = client_with_fake_auth.get("/calendar/members")
    assert response.status_code == 200
    assert isinstance(response.json(), list)
 
**Implementation:**
@router.get("/members", response_model=list[FamilyMemberResponse])
async def get_members(
    service: MemberServiceProtocol = Depends(get_member_service),
):
    return service.get_all()

Phase 3: Execute - 자동 실행

실행 명령

/superpowers:execute-plan '/path/to/implementation.md'

Claude는 플랜을 읽고 Task를 순서대로 실행합니다.

실행 과정

Task 1 실행 로그:

⏺ Task 1: Initialize Next.js Project

⏺ Bash(npx create-next-app@latest . --typescript --tailwind ...)
  ⎿  Creating a new Next.js app in /Users/.../calendar.
     Using npm.
     Initializing project with template: app-tw
     Installing dependencies...

⏺ Bash(npm run dev)
  ⎿  ▲ Next.js 16.1.1
     - Local: http://localhost:3000
     ✓ Starting...
     ✓ Ready in 1532ms

✅ Task 1 완료

Task 2 실행 로그:

⏺ Task 2: Install and Configure shadcn/ui

⏺ Bash(npx shadcn@latest init -y -d)
  ⎿  ✔ Writing components.json
     ✔ Checking registry.
     ✔ Updating tailwind.config.ts

⏺ Bash(npx shadcn@latest add button input label card dialog ...)
  ⎿  ✔ Installing dependencies.
     ✔ Created 8 components.

✅ Task 2 완료

자동 커밋

각 Task가 완료될 때마다 Claude가 자동으로 커밋합니다:

2b0aae4 feat: initialize Next.js 16.1.1 project with TypeScript and Tailwind
14277af feat: add shadcn/ui with essential components
ca3ab5f feat: add Firebase configuration (shared with kid-chat)
fbc207d feat: add Firebase auth hook and utilities

결과물

지원하는 기능

기술 스택

워크플로우 요약

┌─────────────────────────────────────────────────────────────┐
│  /superpowers:brainstorm                                    │
│  "가족 캘린더를 만들고 싶다"                                  │
│                     ↓                                        │
│  Claude가 질문 → 사용자가 선택 → 설계 문서 자동 생성         │
└─────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────┐
│  /superpowers:write-plan                                    │
│  설계 문서 → 18개 Task로 분해된 구현 플랜                    │
└─────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────┐
│  /superpowers:execute-plan                                  │
│  Task 1 실행 → 커밋 → Task 2 실행 → 커밋 → ... → 완성       │
└─────────────────────────────────────────────────────────────┘

배운 점

1. AI와의 협업은 "질문"이 핵심이다

Superpowers의 brainstorm은 단순히 요구사항을 받아적는 게 아닙니다. 적절한 질문을 던져서 사용자의 암묵적 지식을 끌어냅니다. "가족 규모는?" "권한 체계는?" 같은 질문 덕분에 처음부터 명확한 설계가 가능했습니다.

2. 플랜이 있으면 실행이 쉽다

18개 Task로 분해된 플랜 덕분에 Claude는 한 번에 하나의 작업에만 집중할 수 있었습니다. 각 Task가 독립적이고 검증 가능해서 문제가 생겨도 빠르게 수정할 수 있었습니다.

3. TDD가 자연스럽게 적용된다

플랜에 "Test First" 섹션이 포함되어 있어서 테스트 작성 → 구현 → 검증 순서가 강제됩니다. 개발자가 TDD를 의식적으로 적용하지 않아도 자연스럽게 테스트가 먼저 작성됩니다.

4. 컨텍스트 유지가 중요하다

긴 세션에서는 Claude가 이전 맥락을 잊을 수 있습니다. Superpowers는 설계 문서와 플랜을 파일로 저장하기 때문에 세션이 끊겨도 다시 이어서 작업할 수 있습니다.

마치며

Claude Code + Superpowers 조합은 "아이디어 → 구현"까지의 거리를 크게 줄여줍니다.

• Brainstorm: 질문-응답으로 요구사항 명확화
• Plan: 체계적인 Task 분해
• Execute: 자동 실행 + 커밋

복잡한 프로젝트도 이 워크플로우로 시작하면 훨씬 수월합니다. 다음 프로젝트에서 한번 시도해보세요.

다음 글: 기술 구현 상세

이 글에서는 Claude Code + Superpowers 워크플로우를 다뤘습니다. 실제 구현된 코드의 상세 구조가 궁금하다면 다음 글을 참고하세요:

👉 가족 캘린더 풀스택 개발기: FastAPI + Next.js로 반복 일정까지 구현하기

• Protocol 패턴으로 테스트 용이성 확보
• RRULE 표준으로 반복 일정 구현
• 백엔드 테스트 피라미드

Live Demo: https://calendar.funq.kr

궁금한 점은 댓글로 남겨주세요!