컨텐츠로 건너뛰기
쇼케이스 생태계 문서

사용 사례

사용 사례

이 문서는 5가지 실제 시나리오를 통해 실제 프로젝트에서 Oh My OpenCode를 효율적으로 사용하는 방법을 보여줍니다.

시나리오 1: 대규모 프로젝트 리팩토링

시나리오 설명

코드 줄 수가 50만 줄 이상인 5년 된 이커머스 플랫폼은 오래된 아키텍처 패턴을 리팩토링하면서 JavaScript에서 TypeScript로 마이그레이션해야 합니다.

도전 과제

  • 방대한 코드베이스로 인해 한 번에 마이그레이션 불가능
  • 비즈니스 연속성 유지 필요
  • 영향 범위를 평가하기 어려운 다수의 상호 의존적 모듈

해결책

Oh My OpenCode의 다중 에이전트 협업 및 LSP 도구 활용:

# 1단계: 아키텍처 분석
opencode "@oracle 현재 프로젝트 아키텍처를 분석하고, TypeScript 마이그레이션 계획을 수립하고, 마이그레이션 단계를 나누어줘"

# 2단계: 의존성 분석(백그라운드 작업)
opencode "ulw: @explore 모든 모듈 의존성을 분석하고, 의존성 그래프를 생성하고, 중요 경로 모듈을 식별해줘"

# 3단계: 모듈별 마이그레이션
opencode "ulw: @backend-engineer user-service 모듈을 TypeScript로 마이그레이션하고, LSP 도구를 사용하여 타입 안전성을 보장해줘"

# 4단계: 검증 및 테스트
opencode "@explore LSP 도구를 사용하여 타입 오류를 확인하고, 테스트 도구를 실행하고, 마이그레이션 보고서를 생성해줘"

구성

{
  "subscription": "claude-max20",
  "sisyphus": {
    "enabled": true,
    "max_concurrent_tasks": 3
  },
  "agents": {
    "oracle": {
      "enabled": true,
      "prompt_append": "비즈니스 연속성을 고려하여 점진적인 마이그레이션 계획을 제공해주세요"
    },
    "explore": {
      "enabled": true,
      "tools": {
        "lsp": true,
        "ast_grep": true
      }
    },
    "backend-engineer": {
      "enabled": true,
      "prompt_append": "API 하위 호환성을 유지하고 완전한 타입 주석을 추가해주세요"
    }
  },
  "lsp": {
    "enabled": true,
    "languages": ["typescript", "javascript"]
  },
  "background_task": {
    "enabled": true,
    "defaultConcurrency": 3
  }
}

구현 단계

  1. 아키텍처 평가 (1일)

    opencode "@oracle 현재 아키텍처를 평가하고, 기술 부채를 식별하고, 리팩토링 우선순위를 정해줘"

  2. 의존성 분석 (병렬, 2일)

    opencode "ulw: @explore 모듈 의존성을 분석하고, @librarian TypeScript 마이그레이션 베스트 프랙티스를 조사해줘"

  3. 모듈 마이그레이션 (배치 작업, 4주)

    # 각 모듈을 별도로 마이그레이션
opencode "ulw: @backend-engineer auth 모듈을 마이그레이션하고, @explore 타입 커버리지를 확인해줘"

  4. 통합 테스트 (지속적 수행)

    opencode "@explore 전체 테스트 도구를 실행하고 마이그레이션 진행 상황을 보고해줘"

결과

  • ✅ 4주 만에 50만 줄 마이그레이션 완료
  • ✅ 100% TypeScript 타입 커버리지
  • ✅ 비즈니스 중단 없음
  • ✅ 47개의 잠재적 버그 발견 및 수정

시나리오 2: 다중 프레임워크 풀스택 애플리케이션 개발

시나리오 설명

React 프론트엔드와 Node.js + Express 백엔드를 사용하는 SaaS 제품을 개발하며, 3주 안에 MVP를 완성해야 합니다.

도전 과제

  • 프론트엔드와 백엔드의 동기화된 개발 필요
  • API 인터페이스의 빈번한 조정 필요
  • 시간적 제약으로 인한 효율적인 협업 필요

해결책

다중 에이전트 병렬 개발 활용:

# ultrawork 모드 시작
opencode "ulw: 프론트엔드 로그인 인터페이스와 백엔드 API를 포함하여 JWT 및 OAuth2를 지원하는 사용자 인증 시스템을 개발해줘"

# Sisyphus가 자동으로 할당:
# - @oracle: 인증 아키텍처 및 데이터 모델 설계
# - @frontend-ui-ux-engineer: 로그인/회원가입 인터페이스 및 사용자 경험 구현
# - Sisyphus: 백엔드 로직 및 API 엔드포인트 구현 처리
# - @librarian: 보안 베스트 프랙티스 조사

구성

{
  "subscription": "claude-max20",
  "sisyphus": {
    "enabled": true,
    "delegation_strategy": "parallel",
    "max_concurrent_tasks": 3
  },
  "agents": {
    "oracle": {
      "enabled": true,
      "temperature": 0.7
    },
    "frontend-engineer": {
      "enabled": true,
      "prompt_append": "React 18 + TypeScript + Tailwind CSS + React Query를 사용해주세요"
    },
    "backend-engineer": {
      "enabled": true,
      "prompt_append": "Node.js + Express + PostgreSQL + Prisma ORM을 사용해주세요"
    },
    "librarian": {
      "enabled": true
    }
  },
  "context_injection": {
    "enabled": true,
    "files": ["AGENTS.md", ".opencode/TECH_STACK.md"]
  }
}

프로젝트 구조 및 컨텍스트

<!-- project/AGENTS.md -->
# 프로젝트 표준

## 기술 스택
- 프론트엔드: React 18 + TypeScript + Vite + Tailwind
- 백엔드: Node.js 18 + Express + PostgreSQL + Prisma
- 인증: JWT + OAuth2 (Google, GitHub)

## API 표준
- RESTful API 설계
- 통일된 오류 처리
- 요청/응답 로그 기록

## 코드 표준
- ESLint + Prettier
- Husky + lint-staged
- 커밋 전 CI 확인 통과 필수

워크플로우

# 1일차: 아키텍처 설계
opencode "@oracle 데이터 모델, API 엔드포인트, 프론트엔드 라우트를 포함한 사용자 인증 시스템 아키텍처를 설계해줘"

# 2-3일차: 병렬 개발
opencode "ulw: @frontend-ui-ux-engineer는 로그인/회원가입 인터페이스를 구현하고, Sisyphus는 인증 API를 구현해줘"

# 4일차: 통합 및 디버깅
opencode "@explore 프론트엔드/백엔드 통합 이슈 분석하고 API 인터페이스 조정해줘"

# 5일차: 테스트 및 최적화
opencode "ulw: @frontend-ui-ux-engineer는 E2E 테스트 추가하고 백엔드 유닛 테스트 추가해줘"

결과

  • ✅ 5일 만에 인증 시스템 완료
  • ✅ 프론트엔드와 백엔드의 완전한 분리
  • ✅ 테스트 커버리지 85% 달성
  • ✅ 다중 OAuth2 제공자 지원

시나리오 3: 오픈 소스 프로젝트 문서화

시나리오 설명

기능은 풍부하지만 문서가 부족한 인기 오픈 소스 라이브러리에 완전한 문서 사이트가 필요합니다.

도전 과제

  • 심층적인 이해가 필요한 복잡한 코드베이스
  • 정확하고 포괄적인 문서 필요
  • 실행 가능한 예제 코드 제공 필요

해결책

조사에는 @librarian을, 문서 작성에는 @document-writer를 활용:

# 1단계: 프로젝트 분석
opencode "@explore 프로젝트 구조 분석하고 모든 공개 API와 핵심 기능을 목록으로 만들어줘"

# 2단계: 문서 조사
opencode "@librarian 프로젝트 코드 조사해서 각 API의 목적과 매개변수를 파악하고 기존 주석들을 읽어줘"

# 3단계: 문서 작성
opencode "ulw: @document-writer는 다음을 포함하여 프로젝트의 완전한 문서를 작성해줘:
- README.md (개요, 빠른 시작, 설치)
- API.md (전체 API 참조)
- GUIDE.md (사용 가이드 및 베스트 프랙티스)
- EXAMPLES.md (공통 시나리오 예제)
LSP 도구를 사용하여 API 정보의 정확성을 확인해줘"

# 4단계: 예제 코드
opencode "@backend-engineer 각 API에 대해 실행 가능한 예제 코드를 작성하고 상세한 주석을 추가해줘"

구성

{
  "subscription": "chatgpt-plus",
  "agents": {
    "librarian": {
      "enabled": true,
      "model": "gpt-4-turbo",
      "temperature": 0.5,
      "prompt_append": "코드와 주석을 주의 깊게 읽고 문서의 정확성을 보장하며 명확한 설명과 예제를 제공해주세요"
    },
    "explore": {
      "enabled": true,
      "tools": {
        "lsp": true,
        "ast_grep": true
      }
    },
    "backend-engineer": {
      "enabled": true,
      "prompt_append": "예제 코드는 실행 가능해야 하며, 올바른 오류 처리를 포함하고 상세한 주석을 추가해야 합니다"
    }
  },
  "lsp": {
    "enabled": true,
    "languages": ["typescript", "javascript"]
  }
}

문서 구조

# 문서 개요 생성
opencode "@librarian 프로젝트 분석해서 다루어야 할 모든 주제를 포함한 문서 개요를 생성해줘"

# 문서 개요 예시:
# docs/
# ├── README.md              # 프로젝트 개요
# ├── getting-started.md     # 빠른 시작
# ├── installation.md        # 설치 가이드
# ├── api/
# │   ├── configuration.md   # 구성 API
# │   ├── core.md           # 핵심 API
# │   └── utilities.md      # 유틸리티 함수
# ├── guides/
# │   ├── basic-usage.md    # 기본 사용법
# │   ├── advanced.md       # 고급 기술
# │   └── best-practices.md # 베스트 프랙티스
# └── examples/
#     ├── quickstart.md     # 빠른 예제
#     └── real-world.md     # 실제 사례

결과

  • ✅ 2일 만에 전체 문서 사이트 완료
  • ✅ 모든 공개 API 문서화 완료
  • ✅ 30개 이상의 실행 가능한 예제 제공
  • ✅ GitHub 스타 수 300% 증가

시나리오 4: 복잡한 버그 디버깅

시나리오 설명

운영 환경에서 간헐적인 성능 이슈가 발생하며 오류 로그도 불분명하고 재현이 어렵습니다.

도전 과제

  • 재현하기 어려운 버그
  • 방대한 코드베이스로 인한 이슈 위치 파악 난이도
  • 운영 환경에 영향을 미치므로 빠른 해결 필요

해결책

Deep 분석을 위해 Oracle + Explore 활용:

# 1단계: 정보 수집
opencode "@explore 오류 로그 및 모니터링 데이터를 분석하고 비정상 패턴을 식별해줘"

# 2단계: 코드 분석
opencode "ulw: @explore LSP 도구를 사용하여 의심되는 모듈의 호출 체인을 분석하고, @oracle은 가능한 근본 원인을 평가해줘"

# 3단계: 가설 검증
opencode "@oracle 분석 결과를 바탕으로 3가지 가설을 제시하고, @explore는 각 가설에 대한 증거를 찾아줘"

# 4단계: 수정 및 확인
opencode "@backend-engineer 수정 방안 구현하고 모니터링 및 로그 추가해줘. @explore는 수정 효과 확인해줘"

구성

{
  "subscription": "claude-max20",
  "sisyphus": {
    "enabled": true,
    "max_concurrent_tasks": 2
  },
  "agents": {
    "oracle": {
      "enabled": true,
      "temperature": 0.7,
      "prompt_append": "문제를 체계적으로 분석하고 동시성, 캐시, 네트워크 등의 요인을 고려해주세요"
    },
    "explore": {
      "enabled": true,
      "temperature": 0.3,
      "tools": {
        "lsp": true,
        "ast_grep": true
      },
      "prompt_append": "코드 실행 경로를 주의 깊게 추적하고 엣지 케이스 및 예외 상황에 집중해주세요"
    },
    "backend-engineer": {
      "enabled": true,
      "prompt_append": "수정 사항은 하위 호환이 되어야 하며 방어적 프로그래밍 조치를 추가하십시오"
    }
  }
}

디버그 프로세스

# 1. 로그 분석
opencode "@explore 지난 7일간의 오류 로그를 분석하고 가장 빈번한 오류와 시간 패턴을 찾아줘"

# 2. 성능 분석
opencode "@explore LSP 도구를 사용하여 성능 병목 모듈을 분석하고 모든 데이터베이스 쿼리와 API 호출을 찾아줘"

# 3. 코드 검토
opencode "@oracle 의심되는 코드 검토해서 잠재적인 동시성 이슈, 메모리 누수 또는 리소스 경합 식별해줘"

# 4. 수정 구현
opencode "@backend-engineer 다음 수정을 구현해줘:
- 데이터베이스 커넥션 풀 관리 추가
- 쿼리 최적화 및 인덱스 추가
- 타임아웃 및 재시도 메커니즘 추가
- 오류 처리 및 로그 기록 개선"

# 5. 확인
opencode "@explore 테스트 환경에서 이슈 재현하고 수정 효과 확인 위해 스트레스 테스트 실행해줘"

결과

  • ✅ 4시간 만에 근본 원인 파악
  • ✅ 수정 후 성능 60% 향상
  • ✅ 오류 발생률 95% 감소
  • ✅ 포괄적인 모니터링 및 경고 시스템 추가

시나리오 5: UI/UX 빠른 프로토타이핑

시나리오 설명

제품 관리자가 새로운 기능 아이디어를 제안했으며, 사용자 테스트를 위해 상호 작용이 가능한 프로토타입을 빠르게 구현해야 합니다.

도전 과제

  • 시간적 제약 (2일)
  • 실제에 가까운 상호 작용 필요
  • 추후 조정 가능성 높음

해결책

빠른 반복을 위해 프론트엔드 전문 에이전트 활용:

# 빠른 프로토타입 개발
opencode "@frontend-engineer는 다음을 포함한 사용자 대시보드 프로토타입 구현해줘:
- 데이터 시각화 차트(Recharts 사용)
- 반응형 레이아웃(Tailwind CSS)
- 모크 데이터 및 상호 작용
- 부드러운 애니메이션
React + TypeScript + Vite 사용해서 부탁해"

구성

{
  "subscription": "chatgpt-plus",
  "agents": {
    "frontend-engineer": {
      "enabled": true,
      "model": "gpt-4",
      "temperature": 0.6,
      "prompt_append": "빠른 프로토타입 요구 사항:\n- 핵심 상호 작용 흐름 우선순위 지정\n- 기성 UI 컴포넌트 라이브러리(shadcn/ui, Headless UI) 사용\n- 모크 데이터 및 API 호출 사용\n- 시각적 효과 및 사용자 경험 집중\n- 코드는 간결하고 수정하기 쉬워야 함"
    }
  }
}

프로토타입 개발 프로세스

# 1단계: 레이아웃 및 내비게이션
opencode "@frontend-engineer 대시보드 레이아웃 구현: 사이드바 내비게이션, 상단바, 메인 콘텐츠 영역"

# 2단계: 핵심 컴포넌트
opencode "ulw: @frontend-engineer 핵심 컴포넌트 구현:
- 데이터 카드 (KPI 지표)
- 차트 컴포넌트 (선 그래프, 원형 그래프)
- 데이터 테이블 (정렬 및 필터링 가능)
- 동작 버튼 및 양식"

# 3단계: 상호 작용 및 애니메이션
opencode "@frontend-engineer 상호 작용 효과 추가:
- 페이지 전환 애니메이션
- 데이터 로딩 상태
- 호버 및 클릭 피드백
- 반응형 대응"

# 4단계: 모크 데이터
opencode "@frontend-engineer 모크 데이터와 API 생성. MSW (Mock Service Worker) 사용해줘"

프로젝트 구성

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true
  }
})
// package.json (종속성)
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "recharts": "^2.10.0",
    "tailwindcss": "^3.4.0",
    "@headlessui/react": "^1.7.0",
    "framer-motion": "^10.16.0"
  }
}

결과

  • ✅ 1.5일 만에 상호 작용 가능한 프로토타입 완료
  • ✅ 15개 이상의 유려한 컴포넌트 포함
  • ✅ 전체 모크 데이터 및 API 구성 완료
  • ✅ 사용자 테스트 결과 매우 우수

요약

시나리오 비교

시나리오주요 에이전트시간핵심 기능
대규모 리팩토링Oracle + Explore4주LSP + 병렬 작업
풀스택 개발Frontend + Backend5일다중 에이전트 협업
문서화Librarian + Explore2일LSP + 코드 분석
버그 디버깅Oracle + Explore4시간LSP + Deep 분석
UI 프로토타입Frontend Engineer1.5일빠른 반복 개발

주요 학습 사항

  1. 적합한 에이전트 선택: 작업 유형에 맞는 전문 에이전트 선택
  2. ultrawork 활용: 복잡한 작업에는 모든 기능 활성화
  3. 병렬 실행: 독립적인 작업을 병렬로 처리하여 효율성 제고
  4. LSP 도구: 코드 분석 및 리팩토링을 위한 강력한 무기
  5. 컨텍스트 관리: AGENTS.md를 통해 프로젝트별 규칙 제공

일반적인 구성 권장 사항

{
  "sisyphus": {
    "enabled": true,
    "max_concurrent_tasks": 3  // 구독 플랜에 따라 조정 (예: Claude Max20)
  },
  "lsp": {
    "enabled": true,
    "languages": ["typescript", "python", "go"]  // 프로젝트 언어
  },
  "background_task": {
    "defaultConcurrency": 5,
    "providerConcurrency": {
      "anthropic": 3,
      "openai": 5
    }
  },
  "context_injection": {
    "enabled": true,
    "files": ["AGENTS.md", ".opencode/CONTEXT.md"]
  }
}

이러한 패턴들을 프로젝트에 적용할 준비가 되셨나요? 빠른 시작으로 시작하거나, 베스트 프랙티스에서 더 많은 팁을 확인하세요!