Notice
Recent Posts
Recent Comments
반응형
오늘도 공부
Claude code 확장팩 : SuperClaude Framework 본문
반응형
SuperClaude Framework v3 상세 사용법
1. 개요
SuperClaude는 Claude Code에 다음 기능을 추가합니다:
- 🛠️ 16개의 특화된 개발 명령어
- 🎭 다양한 도메인 전문가 페르소나
- 🔧 MCP 서버 통합 (문서, UI 컴포넌트, 브라우저 자동화)
- 📋 작업 관리 기능
- ⚡ 토큰 최적화
2. 설치 방법
사전 요구사항
- Python 3.7+ 설치 필요
- Claude Code 설치되어 있어야 함
설치 과정
1단계: Python 패키지 설치
# 옵션 A: PyPI에서 설치 (권장)
pip install SuperClaude
# 옵션 B: 소스코드에서 설치
git clone https://github.com/SuperClaude-Org/SuperClaude_Framework.git
cd SuperClaude_Framework
pip install .
2단계: SuperClaude 설정
# 빠른 설정 (대부분의 사용자에게 권장)
python3 -m SuperClaude install
# 대화형 설치 (구성 요소 선택)
python3 -m SuperClaude install --interactive
# 최소 설치 (코어 프레임워크만)
python3 -m SuperClaude install --minimal
# 개발자 설정 (모든 기능 포함)
python3 -m SuperClaude install --profile developer
# 또는 단축 명령어 사용
SuperClaude install
3. 주요 명령어 사용법
개발 명령어
- /sc:implement - 기능 구현
- /sc:build - 컴파일/패키징
- /sc:design - 아키텍처 설계
분석 명령어
- /sc:analyze - 코드 분석
- /sc:troubleshoot - 문제 해결
- /sc:explain - 코드 설명
품질 관리 명령어
- /sc:improve - 코드 개선
- /sc:test - 테스트 작성/실행
- /sc:cleanup - 코드 정리
기타 유용한 명령어
- /sc:document - 문서 작성
- /sc:git - Git 작업
- /sc:estimate - 작업 시간 예측
- /sc:task - 작업 관리
- /sc:index - 프로젝트 인덱싱
- /sc:load - 컨텍스트 로드
- /sc:spawn - 새 작업 생성
4. 페르소나 시스템
다양한 전문가 페르소나가 자동으로 활성화됩니다:
- 🏗️ architect - 시스템 설계 및 아키텍처
- 🎨 frontend - UI/UX 및 접근성
- ⚙️ backend - API 및 인프라
- 🔍 analyzer - 디버깅 및 분석
- 🛡️ security - 보안 취약점 검토
- ✍️ scribe - 문서 작성
5. MCP 서버 통합
외부 도구와의 연동:
- Context7 - 공식 라이브러리 문서 및 패턴
- Sequential - 복잡한 다단계 사고
- Magic - 현대적인 UI 컴포넌트 생성
- Playwright - 브라우저 자동화 및 테스트
6. 실제 사용 예시
# React 컴포넌트 구현
/sc:implement --react --feature "user authentication"
# API 설계
/sc:design --api --ddd
# 코드 분석
/sc:analyze --performance --architecture
# 테스트 작성
/sc:test --unit --coverage
# 문서 생성
/sc:document --api --readme
7. 커스터마이징
설치 후 다음 파일들을 편집하여 커스터마이징 가능:
- ~/.claude/settings.json - 메인 설정
- ~/.claude/*.md - 프레임워크 동작 파일
8. 주의사항
- 현재 초기 릴리즈 버전으로 일부 버그가 있을 수 있음
- v2에서 v3로 마이그레이션 시 이전 파일 정리 필요
- /build 명령어가 v3에서는 컴파일만 담당 (기능 구현은 /sc:implement 사용)
9. 문제 해결
설치나 사용 중 문제가 발생하면:
- Python 버전 확인 (3.7+ 필요)
- 이전 버전 파일 제거
- --help 플래그로 도움말 확인
- GitHub 이슈 트래커에 문제 보고
실제 프로젝트 개발 시나리오별 SuperClaude 활용 예제
1. 🚀 새로운 웹 애플리케이션 프로젝트 시작
프로젝트 초기 설계
# 프로젝트 구조 설계
/sc:design --architecture --modern --scalable
# API 설계 (DDD 방식)
/sc:design --api --ddd --bounded-context
# 데이터베이스 스키마 설계
/sc:design --database --postgresql --relations
프로젝트 초기화 및 설정
# 프로젝트 컨텍스트 로드
/sc:load
# 프로젝트 구조 인덱싱
/sc:index --full --exclude node_modules
# 작업 시간 예측
/sc:estimate --detailed --worst-case
2. 🎨 프론트엔드 개발 (React)
컴포넌트 개발
# 사용자 인증 폼 컴포넌트 구현
/sc:implement --react --component "LoginForm with validation"
# UI 컴포넌트 라이브러리 구축
/sc:build --react --magic --component-library
# 반응형 대시보드 구현
/sc:implement --react --responsive "Admin Dashboard with charts"
상태 관리 및 최적화
# Redux 스토어 설계
/sc:design --state-management --redux
# 성능 분석 및 최적화
/sc:analyze --performance --react --bundle-size
# React 컴포넌트 리팩토링
/sc:improve --performance --react-memo --lazy-loading
3. ⚙️ 백엔드 개발 (Node.js/Python)
RESTful API 개발
# Express.js API 구현
/sc:implement --api --express --crud "User management"
# 인증 미들웨어 구현
/sc:implement --middleware --jwt --auth
# API 문서 생성
/sc:document --api --swagger --automated
마이크로서비스 아키텍처
# 서비스 설계
/sc:design --microservices --docker --kubernetes
# 메시지 큐 구현
/sc:implement --rabbitmq --event-driven
# 서비스 간 통신 구현
/sc:implement --grpc --service-mesh
4. 🧪 테스팅 및 품질 보증
종합적인 테스트 전략
# 단위 테스트 작성
/sc:test --unit --coverage --jest
# 통합 테스트 구현
/sc:test --integration --api --supertest
# E2E 테스트 시나리오
/sc:test --e2e --playwright --user-flows
코드 품질 개선
# 코드 품질 분석
/sc:analyze --code-quality --sonarqube
# 보안 취약점 검사
/sc:analyze --security --owasp --dependencies
# 코드 정리 및 리팩토링
/sc:cleanup --dead-code --formatting --best-practices
5. 🐛 디버깅 및 문제 해결
프로덕션 이슈 해결
# 메모리 누수 진단
/sc:troubleshoot --memory-leak --heap-analysis
# 성능 병목 현상 분석
/sc:analyze --performance --bottleneck --profiling
# 로그 분석 및 에러 추적
/sc:troubleshoot --logs --error-tracking --root-cause
6. 📦 배포 및 DevOps
CI/CD 파이프라인 구축
# GitHub Actions 워크플로우 생성
/sc:implement --ci --github-actions --automated-tests
# Docker 컨테이너화
/sc:build --docker --multi-stage --optimized
# Kubernetes 배포 설정
/sc:implement --k8s --helm-chart --production
7. 📱 모바일 앱 개발 (React Native)
# 크로스 플랫폼 앱 구조 설계
/sc:design --mobile --react-native --navigation
# 네이티브 모듈 통합
/sc:implement --react-native --native-module "Camera integration"
# 앱 성능 최적화
/sc:improve --mobile --performance --bundle-optimization
8. 💼 실제 비즈니스 시나리오
이커머스 플랫폼 개발
# 1. 초기 설계
/sc:design --ecommerce --scalable --microservices
# 2. 제품 카탈로그 구현
/sc:implement --api --rest "Product catalog with search"
# 3. 장바구니 기능
/sc:implement --feature "Shopping cart with persistence"
# 4. 결제 시스템 통합
/sc:implement --payment --stripe --secure
# 5. 주문 처리 워크플로우
/sc:design --workflow --order-processing --state-machine
SaaS 대시보드 개발
# 1. 멀티 테넌시 설계
/sc:design --saas --multi-tenant --postgres
# 2. 실시간 분석 대시보드
/sc:implement --dashboard --real-time --websocket
# 3. 구독 관리 시스템
/sc:implement --subscription --billing --recurring
# 4. 사용자 권한 관리
/sc:implement --rbac --permissions --hierarchical
9. 🔄 프로젝트 유지보수
레거시 코드 현대화
# 코드베이스 분석
/sc:analyze --legacy --dependencies --technical-debt
# 점진적 마이그레이션 계획
/sc:design --migration --strategy --incremental
# 레거시 코드 리팩토링
/sc:improve --legacy --modernize --es6+
10. 📊 데이터 처리 및 분석
# ETL 파이프라인 구축
/sc:implement --etl --pipeline --scheduled
# 데이터 시각화 대시보드
/sc:build --visualization --d3js --interactive
# 머신러닝 모델 통합
/sc:implement --ml --tensorflow --prediction-api
💡 프로 팁: 작업 플로우 최적화
일일 개발 루틴
# 아침: 작업 컨텍스트 로드
/sc:load
/sc:task --list --today
# 기능 구현 시
/sc:implement --feature "User profile update" --tdd
# 커밋 전 체크
/sc:test --affected --pre-commit
/sc:git --commit --conventional
# 일일 마무리
/sc:document --changelog --today
/sc:task --update --completed
코드 리뷰 준비
# PR 생성 전
/sc:analyze --changes --last-commit
/sc:test --coverage --delta
/sc:document --pr-description --auto
🎯 SuperClaude Framework 실전 튜토리얼
초보자부터 숙련자까지 단계별로 따라할 수 있는 실습 중심 튜토리얼을 준비했습니다.
📚 Tutorial 1: 첫 번째 SuperClaude 프로젝트 - Todo 앱 만들기
🎬 시작하기 전에
# SuperClaude가 설치되어 있는지 확인
python3 -m SuperClaude --version
# 새 프로젝트 폴더 생성
mkdir my-todo-app
cd my-todo-app
Step 1: 프로젝트 설계하기
# Claude Code에서 실행
/sc:design --webapp --simple "Todo application with categories"
예상 결과:
- 프로젝트 구조 제안
- 필요한 컴포넌트 목록
- 데이터 모델 설계
Step 2: 프론트엔드 구현
# React 프로젝트 초기화
/sc:implement --react --create-app "todo-app"
# 메인 컴포넌트 생성
/sc:implement --react --component "TodoList with add, edit, delete"
# 카테고리 기능 추가
/sc:implement --react --feature "Category filter sidebar"
Step 3: 스타일링 추가
# UI 개선
/sc:improve --ui --modern --tailwind
# 반응형 디자인 적용
/sc:implement --responsive --mobile-first
Step 4: 테스트 작성
# 컴포넌트 테스트
/sc:test --react --component "TodoList"
# 통합 테스트
/sc:test --integration --user-flow "Create and complete todo"
🎉 첫 프로젝트 완성!
📚 Tutorial 2: REST API 서버 구축하기
🎯 목표: Express.js로 블로그 API 만들기
Step 1: API 설계
# RESTful API 설계
/sc:design --api --rest "Blog with posts, comments, users"
디자인 결과 예시:
GET /api/posts # 모든 포스트
GET /api/posts/:id # 특정 포스트
POST /api/posts # 새 포스트 생성
PUT /api/posts/:id # 포스트 수정
DELETE /api/posts/:id # 포스트 삭제
Step 2: 서버 구현
# Express 서버 초기화
/sc:implement --express --boilerplate --typescript
# 데이터베이스 모델 생성
/sc:implement --mongoose --models "Post, Comment, User"
# API 엔드포인트 구현
/sc:implement --api --crud "posts with pagination"
Step 3: 인증 추가
# JWT 인증 구현
/sc:implement --auth --jwt --middleware
# 사용자 등록/로그인
/sc:implement --api --auth "register and login endpoints"
Step 4: API 문서화
# Swagger 문서 생성
/sc:document --api --swagger --auto-generate
# README 작성
/sc:document --readme --api-usage
💡 실습 과제
- 댓글 기능 추가하기
- 사용자 프로필 API 만들기
- 파일 업로드 기능 구현하기
📚 Tutorial 3: 풀스택 애플리케이션 - 실시간 채팅앱
🎯 목표: React + Node.js + Socket.io 채팅 애플리케이션
Part 1: 전체 아키텍처 설계
# 시스템 설계
/sc:design --fullstack --realtime "Chat app with rooms"
# 기술 스택 결정
/sc:analyze --tech-stack --recommendations
Part 2: 백엔드 구축
# Socket.io 서버 구현
/sc:implement --websocket --socket.io "Chat server with rooms"
# 메시지 저장 기능
/sc:implement --database --mongodb "Message history"
# 사용자 관리
/sc:implement --feature "Online users tracking"
Part 3: 프론트엔드 개발
# React 채팅 UI
/sc:implement --react --chat-ui "Message list and input"
# 실시간 연결
/sc:implement --react --socket.io-client "Real-time messaging"
# 채팅방 기능
/sc:implement --feature "Room selection and creation"
Part 4: 고급 기능 추가
# 파일 공유
/sc:implement --feature "File sharing in chat"
# 이모지 반응
/sc:implement --feature "Emoji reactions to messages"
# 알림 시스템
/sc:implement --notifications --web-push
🚀 배포 준비
# 프로덕션 최적화
/sc:improve --production --optimization
# Docker 컨테이너화
/sc:build --docker --compose
# 배포 가이드 작성
/sc:document --deployment --step-by-step
📚 Tutorial 4: 문제 해결 시나리오
🐛 시나리오 1: 성능 문제 해결하기
상황: React 앱이 느려졌어요!
# Step 1: 성능 분석
/sc:analyze --performance --react --profiler
# Step 2: 병목 지점 찾기
/sc:troubleshoot --performance --identify-bottlenecks
# Step 3: 최적화 적용
/sc:improve --react --memo --lazy-loading
# Step 4: 결과 확인
/sc:test --performance --before-after
🔒 시나리오 2: 보안 취약점 수정
상황: 보안 감사에서 문제가 발견되었어요!
# Step 1: 보안 스캔
/sc:analyze --security --full-scan
# Step 2: 취약점 분석
/sc:troubleshoot --security --vulnerability-details
# Step 3: 보안 패치 적용
/sc:implement --security-fix --owasp-top10
# Step 4: 재검증
/sc:test --security --penetration
📚 Tutorial 5: 팀 협업 워크플로우
👥 새로운 기능 개발 프로세스
Day 1: 기획 및 설계
# 아침 스탠드업
/sc:task --create "User profile feature"
/sc:estimate --feature --team-discussion
# 설계 회의
/sc:design --feature --collaborative "User profiles"
/sc:document --specs --user-stories
Day 2-3: 구현
# 브랜치 생성
/sc:git --branch "feature/user-profiles"
# TDD로 개발
/sc:implement --tdd --feature "Profile CRUD operations"
# 진행 상황 업데이트
/sc:task --update --progress 60%
Day 4: 코드 리뷰 준비
# 코드 품질 체크
/sc:analyze --code-quality --pre-review
# PR 설명 작성
/sc:document --pr --detailed
# 테스트 커버리지 확인
/sc:test --coverage --report
🎓 고급 튜토리얼: 마이크로서비스 아키텍처
🏗️ 대규모 이커머스 플랫폼 구축
Phase 1: 아키텍처 설계
# 도메인 주도 설계
/sc:design --ddd --bounded-contexts "E-commerce platform"
# 서비스 분리
/sc:design --microservices --service-map
Phase 2: 서비스별 구현
📦 제품 서비스
/sc:implement --microservice "Product catalog service"
/sc:implement --grpc --api "Product service interface"
/sc:test --contract --consumer-driven
🛒 주문 서비스
/sc:implement --microservice "Order processing service"
/sc:implement --saga --distributed-transactions
/sc:implement --event-sourcing --order-events
💳 결제 서비스
/sc:implement --microservice "Payment service"
/sc:implement --integration "Stripe, PayPal"
/sc:test --integration --payment-sandbox
Phase 3: 인프라 구축
# API 게이트웨이
/sc:implement --api-gateway --kong
# 서비스 메시
/sc:implement --service-mesh --istio
# 모니터링
/sc:implement --monitoring --prometheus-grafana
💡 실습 팁과 베스트 프랙티스
🎯 효과적인 명령어 조합
# 빠른 프로토타이핑
/sc:implement --quick --prototype "Feature idea"
/sc:test --minimal --happy-path
# 철저한 구현
/sc:implement --tdd --comprehensive "Critical feature"
/sc:test --extensive --edge-cases
/sc:document --detailed --api-contracts
📈 학습 곡선 단축하기
- 간단한 것부터 시작: Todo 앱 → API → 풀스택
- 하나씩 마스터: 각 명령어를 개별적으로 연습
- 조합하여 사용: 워크플로우 만들기
- 문서화 습관: 매번 /sc:document 사용
반응형
'AI > Claude code' 카테고리의 다른 글
TaskMaster CLI: 효율적인 프로젝트 작업 관리를 위한 필수 명령어 가이드 (4) | 2025.07.21 |
---|---|
Claude Code 프로젝트 기획 및 계획 완전 가이드 (4) | 2025.07.04 |
Claude Code 컨텍스트 관리 완전 가이드: Cursor처럼 파일과 폴더 추가하기 (1) | 2025.07.04 |
Claude Code 토큰 최적화 완전 가이드 (3) | 2025.07.04 |
Claude Code 완전 가이드: 터미널에서 AI와 함께 개발하기 (0) | 2025.07.04 |