Recent Posts
Recent Comments
반응형
«   2025/08   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

오늘도 공부

Claude code 확장팩 : SuperClaude Framework 본문

AI/Claude code

Claude code 확장팩 : SuperClaude Framework

행복한 수지아빠 2025. 7. 19. 09:57
반응형

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. 문제 해결

설치나 사용 중 문제가 발생하면:

  1. Python 버전 확인 (3.7+ 필요)
  2. 이전 버전 파일 제거
  3. --help 플래그로 도움말 확인
  4. 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

💡 실습 과제

  1. 댓글 기능 추가하기
  2. 사용자 프로필 API 만들기
  3. 파일 업로드 기능 구현하기

📚 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

📈 학습 곡선 단축하기

  1. 간단한 것부터 시작: Todo 앱 → API → 풀스택
  2. 하나씩 마스터: 각 명령어를 개별적으로 연습
  3. 조합하여 사용: 워크플로우 만들기
  4. 문서화 습관: 매번 /sc:document 사용

 

 

 

반응형