OpenCode와 Oh My OpenCode 사용법 - React + Django 블로그 만들기

이전에 기본적인 Opencode와 Oh My Opencode 사용법을 살펴보았는데요. 이제 React + Django 블로그를 실제 개발하는데 이 도구들을 사용하는 실사용 예시를 살펴볼께요.

맥 + Node.js 환경을 기준으로, SubAgent들이 팀처럼 움직이는 흐름과 설정 파일 예시까지 한 번에 훓어보겠습니다.

따라서 해보실 분이 해야 할 일은 거의 이것뿐입니다.

OpenCode와 Oh My OpenCode 설치
프로젝트 폴더에서 OpenCode 실행
프롬프트에 명령 입력 – 예: ultrawork: React + Django 블로그 만들어줘
이후 자동 진행 – Sisyphus 메인 에이전트가 Oracle / Librarian / Explore / Frontend Engineer 같은 SubAgent들을 알아서 부려서 설계부터 코드 작성, 리팩토링까지 진행합니다.

참고로 Oh My OpenCode 플러그인은 내부적으로 다음 역할을 합니다.

백그라운드에서 여러 SubAgent를 실행하여 코드베이스를 스캔하고, LSP/AST-Grep 같은 도구도 붙여줍니다.
ultrawork, plan, act 같은 키워드를 보고 “대형 작업 모드”로 인지하여 적합한 플로우로 전환합니다.
Sisyphus(메인 에이전트)가 Oracle / Librarian / Explore / Frontend Engineer 에이전트들에게 일을 나눠주고, 결과를 병렬로 취합하도록 orchestrate합니다.

1. 설치 (Mac + Node.js 환경)

OpenCode와 Oh My OpenCode 플러그인을 Mac + Node.js 환경 기준으로 설치해보겠습니다.

1-1. OpenCode 설치

OpenCode는 다음 설치 스크립트를 실행해서 설치합니다.

curl -fsSL https://opencode.ai/install | bash

설치가 완료되면, 버전을 확인해봅니다 (버전 1.0.150 이상을 권장합니다).

opencode --version

1-2. Oh My OpenCode 플러그인 설치

맥에서 Node.js (또는 Bun)가 이미 준비되어 있다고 가정합니다. 아래 명령들 중 하나로 Oh My OpenCode 플러그인을 설치할 수 있습니다.

# 대화형 설치 (TUI로 설정)
bunx oh-my-opencode install

# bunx가 안되면 npx 사용
npx oh-my-opencode install

# 또는 구독 정보를 이미 알고 있어 TUI 없이 설치:
bunx oh-my-opencode install --no-tui \
  --claude=yes \
  --chatgpt=yes \
  --gemini=yes

설치가 끝나면 ~/.config/opencode/opencode.json 파일의 plugins 배열에 "oh-my-opencode" 항목이 자동으로 추가됩니다.

2. Oh My OpenCode 사용법 기반 블로그 개발 실제 사용 흐름

이제 OpenCode를 활용해 React + Django 블로그 프로젝트를 실제로 만들어보는 과정을 단계별로 살펴보겠습니다.

2-1. 프로젝트 폴더 준비

먼저 새 프로젝트 폴더를 만들고 OpenCode를 실행합니다.

mkdir react-django-blog
cd react-django-blog
opencode

이 명령으로 터미널에서 OpenCode의 TUI가 열리고, 배경에서 Oh My OpenCode 플러그인이 함께 로드됩니다.

2-2. “ultrawork 프롬프트” 한 방에 요구사항 전달

프로젝트를 시작할 때, ultrawork 프롬프트로 우리가 만들고자 하는 것을 한 번에 상세히 전달할 수 있습니다. 예를 들면 다음과 같은 입력을 던집니다.

ultrawork:
React 프론트엔드와 Django 백엔드로 동작하는 최신 트렌드의 블로그 시스템을 만들어줘.

요구사항:
- Django REST API로 Post 모델(제목, 내용, 작성자, created_at, updated_at) CRUD 구현
- JWT 기반 인증(회원가입, 로그인, 토큰 리프레시)
- React로 SPA 구현: 글 목록 / 상세 / 글쓰기 / 수정 / 로그인 페이지
- axios로 API 연동, React Router 사용
- 개발/운영 분리 가능한 설정 구조
- Dockerfile과 docker-compose까지 만들어줘 (db는 Postgres)

먼저 전체 아키텍처, 디렉토리 구조, 주요 컴포넌트/엔드포인트 설계를 문서화한 뒤,  
순서대로 백엔드 → 프론트엔드 → 도커 세팅 순서로 작업을 진행해줘.

위 프롬프트에서 핵심은 맨 앞의 ultrawork: 키워드입니다. 이 단어를 보면 Sisyphus 에이전트가 대형 작업 모드로 전환합니다. 즉,

전체 작업 계획을 자동으로 수립하고,
하위 SubAgent들에게 역할을 분배하며,
작업 도중 TODO 리스트를 계속 추적해서 중간에 멈추지 않고 끝까지 수행하도록 합니다.

이 모든 과정이 자동으로 이루어지며, 사용자는 한 번의 프롬프트로 아키텍처 설계 → 백엔드 코드 작성 → 프론트엔드 코드 작성 → Docker 설정까지 일련의 작업이 진행되는 모습을 볼 수 있습니다.

2-3. 내부에서 벌어지는 일 (SubAgent 협업)

위와 같이 ultrawork 프롬프트를 넣으면, 내부적으로는 다음과 같은 SubAgent 팀 협업 흐름으로 작업이 진행됩니다:

Sisyphus (메인 오케스트레이터)
- 사용자의 요구사항 (React + Django 블로그)을 분석하여 전체 계획을 세웁니다. 예를 들어 “아키텍처 설계 → Django API 구현 → React UI 구현 → Docker 설정” 식으로 큰 단위를 결정합니다.
- 동시에 백그라운드로 Explore 에이전트를 보내 현재 폴더 구조를 스캔하고(기존 코드가 있다면), 필요한 파일 목록을 미리 정리해 둡니다.
Oracle (설계/분석 담당)
- Sisyphus는 Oracle 에이전트에게 “Django REST + React SPA + JWT 인증을 갖춘 블로그의 전체 아키텍처를 설계해줘”와 같은 지시를 합니다.
- Oracle 에이전트는 이에 따라 설계 문서를 만들어냅니다. 여기에는 예를 들어 백엔드와 프론트엔드 폴더 구조 (예: backend/, frontend/), 주요 Django 앱 구성 (blog, accounts 등), 주요 API 엔드포인트 목록, React 컴포넌트/페이지 구조 등이 정리됩니다.
Librarian (레퍼런스 담당)
- Librarian 에이전트는 Oracle의 설계 내용 중 사용된 기술 스택에 대해 공식 문서나 예제 코드를 찾아 제공합니다. Django REST Framework, djangorestframework-simplejwt(JWT 인증), React Router, axios 등의 사용법과 모범 사례를 외부 자료에서 찾아와 근거를 첨부해주는 역할입니다. (예: “Django settings.py에서 JWT 설정 예시”, “React에서 토큰 리프레시 패턴” 등의 자료 제시)
Explore (코드 탐색 담당)
- 코드가 어느 정도 생성되고 나면, Explore 에이전트가 코드베이스를 인덱싱합니다. “어느 파일에 어떤 뷰/시리얼라이저/컴포넌트가 있는지” 등 구조를 파악해 저장해두며, 나중에 리팩토링이나 버그 수정 요청이 들어오면 해당 부분을 빠르게 찾아낼 수 있도록 도와줍니다 (AST-Grep, LSP 등의 도구 활용).
Frontend UI/UX Engineer (프론트엔드 구현 담당)
- Oracle의 설계에 따라 프론트엔드 부분을 구현하는 에이전트입니다. 예를 들어 frontend/src/pages/PostListPage.tsx, PostDetailPage.tsx, PostEditorPage.tsx, LoginPage.tsx 등의 React + TypeScript 컴포넌트를 생성하고, React Router 설정과 axios를 통한 API 연동 코드도 작성합니다.
- 이 에이전트는 UI/UX 특화 모델을 사용하도록 설정되어 있어서, 예를 들어 Gemini Pro와 같은 모델로부터 최신 UI/UX 트렌드를 반영한 코드를 받아옵니다.
Todo 연속 실행 관리 & 주석 체크
- 작업 초기에 세운 계획대로 “Post CRUD를 모두 구현하기” 등을 끝까지 달성하도록, Todo Continuation Enforcer가 각 단계를 추적합니다. 만약 중간에 일부 누락되거나 에이전트가 산만해지면 이를 감지해 재집중시킵니다.
- 또한 Comment Checker 훅이 지나치게 장황한 주석을 달거나 불필요한 설명을 길게 하지 않도록 조정하여, 산출물의 코드 퀄리티를 유지합니다.

3. SubAgent를 직접 호출하는 예시

기본적으로는 Sisyphus가 알아서 필요한 SubAgent들을 호출하지만, 사용자가 직접 특정 에이전트를 호출해서 세부 작업을 지시할 수도 있습니다. OpenCode의 README에는 "Ask @oracle to review this design…" 같은 명령어 패턴이 소개되어 있는데요. React + Django 블로그 시나리오에서 사용해볼 만한 직접 호출 예시들을 알아보겠습니다.

3-1. 아키텍처 리뷰: `@oracle`

Oracle 에이전트에게 설계 리뷰를 요청하고 싶다면 다음과 같이 입력할 수 있습니다.

@oracle
지금까지 생성된 Django + React 블로그 코드 구조를 리뷰해줘.

목표:
- 백엔드: API 레이어, 서비스 레이어, 모델 레이어가 적절히 나뉘어 있는지
- 프론트엔드: 페이지/컴포넌트/서비스(API 호출) 레이어 분리가 적절한지
- 폴더 구조 개선안과 리팩토링 계획 제안

필요하다면, 구체적인 디렉토리 이동/리네임 계획도 제시해줘.

그러면 Oracle 에이전트는 현재까지의 폴더 구조와 코드 레이어링을 살펴본 뒤, “서비스 레이어를 분리하자”, “api/ 디렉토리에서 공통 axios 인스턴스를 사용하자” 등의 설계/리팩토링 제안을 내놓을 것입니다. 폴더 구조 개선 방안이나 파일명 재조정 같은 구체적인 리팩토링 계획도 함께 제시해 줄 수 있죠.

3-2. 공식 문서/예제 참고: `@librarian`

특정 기능 구현에 대한 최신 공식 예제나 문서 레퍼런스가 필요하면 Librarian 에이전트를 호출합니다.

@librarian
Django REST Framework에서 JWT 인증을 djangorestframework-simplejwt로 구현할 때 가장 최신 예제 코드를 가져와 줘.

- settings.py 설정 예시
- urls.py에 토큰 발급/리프레시 엔드포인트 추가 예
- React에서 access/refresh 토큰을 로컬스토리지에 저장하고 재발급하는 패턴도 함께 설명해줘.

Librarian 에이전트는 이러한 요청에 대해 Context7, grep.app 등의 검색 MCP(Multi-Context Provider) 도구를 활용하여 실제 문서나 예제 코드를 찾아, 근거와 함께 답변을 제공합니다.

예를 들어 Django 공식 문서의 설정 예시나, djangorestframework-simplejwt 깃허브 README의 코드 조각, React 관련 블로그의 구현 패턴 등을 인용하여 알려주므로, 최신 베스트 프랙티스를 쉽게 참고할 수 있습니다.

3-3. 코드베이스 탐색: `@explore`

현재 코드베이스에서 특정 키워드나 구조를 찾고 싶을 때는 Explore 에이전트를 사용합니다. 예를 들어, “Post”와 관련된 모든 곳을 찾고 싶다면

@explore
현재 코드베이스에서 "Post" 관련된 모든 파일과 클래스/함수 목록을 요약해줘.

- Django 모델, 시리얼라이저, 뷰, URL
- React 컴포넌트, 훅, API 래퍼

각 파일 경로와 주요 역할을 테이블 형태로 정리해줘.

Explore 에이전트는 OpenCode의 LSP/AST-Grep 기반 코드 탐색 도구들을 활용하여, 코드베이스에서 “Post”와 연관된 모델, 시리얼라이저, 뷰, URL, React 컴포넌트 등을 모두 찾아냅니다.

그리고 그 결과를 파일 경로별로 정리해서, 예를 들어 표 형태로 “파일명 – 클래스/함수 – 역할” 요약표를 만들어줄 것입니다. 이 기능을 통해 방대한 코드에서도 특정 기능과 관련된 부분을 빠르게 찾아볼 수 있습니다.

3-4. UI 개선: `@frontend-ui-ux-engineer`

프론트엔드 UI를 최신 트렌드에 맞게 개선/리팩토링하고 싶다면 Frontend UI/UX Engineer 에이전트를 호출합니다.

@frontend-ui-ux-engineer
PostListPage.tsx를 좀 더 최근 트렌드에 맞는 UI로 개선해줘.

요구사항:
- TailwindCSS 사용
- 반응형 레이아웃 (모바일 / 데스크톱)
- Skeleton 로딩 상태 추가
- 빈 목록일 때 “첫 글을 작성해보세요” 메시지 카드 추가

위와 같이 명령하면, Frontend UI/UX Engineer 에이전트가 해당 컴포넌트의 코드를 열고 TailwindCSS를 활용한 스타일링, 반응형 디자인 적용, 스켈레톤 로딩 UI 추가, 빈 상태일 때의 안내 UI 추가 등을 반영하여 코드를 개선해줄 것입니다.

이 에이전트는 UI/UX에 특화된 모델로 동작하므로, 비교적 화면 구성이나 디자인 관점의 수정을 잘 수행합니다. React 코드의 UI 부분을 집중적으로 다듬어 주는 용도로 유용합니다.

4. 실제 설정 파일 예시 (`oh-my-opencode.json`)

OpenCode 환경 설정은 전역 설정과 프로젝트별 설정으로 나눠집니다. 전역 설정 파일 경로는 ~/.config/opencode/oh-my-opencode.json이고, 특정 프로젝트만의 설정을 두고 싶다면 프로젝트 폴더 아래 ./.opencode/oh-my-opencode.json 파일을 만들면 됩니다 (프로젝트별 설정이 우선 적용됩니다).

React + Django 블로그 프로젝트에 맞춰 튜닝한 프로젝트별 설정 파일 예시를 살펴보겠습니다.

{
  "$schema": "https://raw.githubusercontent.com/code-yeongyu/oh-my-opencode/master/assets/oh-my-opencode.schema.json",

  // Ralph Loop 기본 설정: 장시간 작업 모드 사용
  "ralph_loop": {
    "enabled": true,
    "default_max_iterations": 120
  },

  /* 에이전트별 모델 커스터마이징
     - oracle: 설계/리뷰 → OpenAI 계열 모델 사용
     - frontend-ui-ux-engineer: React/Tailwind → Google Gemini 모델 사용
     - librarian: 문서/레퍼런스 → Anthropic Claude 모델 사용
     - explore: 코드 탐색 → OpenCode 제공 Grok-Code 사용
  */
  "agents": {
    "oracle": {
      "model": "openai/gpt-5.2"
    },
    "frontend-ui-ux-engineer": {
      "model": "google/gemini-3-pro-high"
    },
    "librarian": {
      "model": "anthropic/claude-3.5-sonnet"
    },
    "explore": {
      "model": "opencode/grok-code"
    }
  },

  // 필요 없으면 끌 수 있는 기능들 예시
  // "disabled_agents": ["document-writer"],
  // "disabled_hooks": ["comment-checker", "agent-usage-reminder"],
  // "disabled_mcps": ["context7", "grep_app"]
}

위와 같은 JSON 설정을 프로젝트의 .opencode/oh-my-opencode.json에 넣어두면, OpenCode 실행 시 해당 설정이 적용됩니다. 위 설정 예시는 공식 README의 에이전트/훅/MCP 설정 예시 등으로만든 형태로, 각 SubAgent에 사용할 모델 종류를 지정하고 불필요한 에이전트나 훅은 비활성화한 모습입니다. 필요에 따라 이 파일에서 특정 에이전트를 끄거나(Comment Checker 등이 거슬릴 경우), 사용하지 않을 MCP(Search provider) 등을 꺼서 성능을 튜닝할 수도 있습니다.

5. Ralph Loop로 “밤새 블로그 만들기” 모드 켜기

긴 시간 동안 알아서 작업을 진행하게 하고 싶을 때는 Ralph Loop 기능을 사용합니다. Ralph Loop는 OpenCode가 대형 작업을 여러 스텝에 걸쳐 끈기 있게 수행하도록 도와주는 루프 제어 장치인데요. 예를 들어, “밤새도록 블로그를 완성해 줘” 같은 시나리오에 활용할 수 있습니다.

사용 방법은 간단합니다. /ralph-loop "작업 설명" 명령으로 루프를 시작하고, 목표를 주어진 형식으로 제시하면 됩니다.

/ralph-loop "React + Django 블로그 시스템 전체 구현 및 기본 테스트 작성"

/*
  목표:
  1) Django에서 Post/Comment/User 모델 및 JWT 인증 구현
  2) React SPA로 기본 UI 구현
  3) Dockerfile, docker-compose 생성
  4) README.md에 사용법 정리

  완료 시 <promise>DONE</promise> 출력
*/
ultrawork:
위 목표를 달성할 수 있도록 계획을 세우고, 필요한 코드와 파일들을 생성/수정하면서 작업을 끝까지 수행해줘.

위처럼 /ralph-loop 명령을 사용하면, Sisyphus는 주어진 목표를 달성할 때까지 여러 번의 iteration을 돌면서 작업을 이어갑니다. 특히 Ralph Loop는 에이전트가 무한 루프에 빠지거나 게을러지거나 중도에 포기하려는 조짐이 보이면 상태를 리셋하거나 다른 접근 방법을 시도하게 만들어 끝까지 작업을 완수하도록 도와줍니다. (설정 파일의 default_max_iterations 값으로 반복 횟수 한계를 조절할 수 있습니다.)

6. 최소 요약 – 딱 이것만 기억해도 됨

마지막으로, OpenCode + Oh My OpenCode로 React + Django 블로그를 자동으로 만들어내는 흐름을 한눈에 요약해보겠습니다.

설치 curl -fsSL https://opencode.ai/install | bash # OpenCode 설치 bunx oh-my-opencode install # Oh My OpenCode 플러그인 설치 (또는 npx)
프로젝트에서 실행 mkdir react-django-blog && cd react-django-blog opencode
첫 프롬프트 입력 ultrawork: React + Django 블로그 만들어줘. (구체적인 요구사항 나열...)
중간에 세부 조정이 필요할 때 (에이전트 직접 호출)
- 설계 검토: @oracle ...
- 문서 예시: @librarian ...
- 코드 검색: @explore ...
- UI 개선: @frontend-ui-ux-engineer ...
세부 설정 튜닝 – 프로젝트 폴더의 ./opencode/oh-my-opencode.json 파일에서 에이전트 모델, 반복 횟수 등을 조절 가능.

이 정도 핵심만 기억하면, OpenCode와 SubAgent들의 힘으로 React + Django 블로그 개발을 멋지게 자동화할 수 있습니다. 이제 AI와 함께 효율적인 코딩을 즐겨보세요!

OpenCode와 Oh My OpenCode 사용법 – React + Django 블로그 만들기

1. 설치 (Mac + Node.js 환경)

1-1. OpenCode 설치

1-2. Oh My OpenCode 플러그인 설치

2. Oh My OpenCode 사용법 기반 블로그 개발 실제 사용 흐름

2-1. 프로젝트 폴더 준비

2-2. “ultrawork 프롬프트” 한 방에 요구사항 전달

2-3. 내부에서 벌어지는 일 (SubAgent 협업)

3. SubAgent를 직접 호출하는 예시

3-1. 아키텍처 리뷰: `@oracle`

3-2. 공식 문서/예제 참고: `@librarian`

3-3. 코드베이스 탐색: `@explore`

3-4. UI 개선: `@frontend-ui-ux-engineer`

4. 실제 설정 파일 예시 (`oh-my-opencode.json`)

5. Ralph Loop로 “밤새 블로그 만들기” 모드 켜기

6. 최소 요약 – 딱 이것만 기억해도 됨

AI 에이전트 뤼튼 사용법: 메인페이지 메뉴 3가지

시각화 툴 Napkin AI 활용 사례: 은퇴 후 현금흐름 전략을 위한 필수 대비 방법 6가지

OpenCode 설치 가이드: 초급 개발자를 위한 첫 세팅

OpenCode와 Next.js로 프론트엔드 UI 빠르게 만들기

R로 신경망 그리기: 라인별 설명으로 이해하는 신경망 구조 그리기(feat. neuralnet)

“2025년, Free Agentic AI 코딩하는 방법: Kiro + Gemini CLI + GitHub Copilot 완전 정리”

1. 설치 (Mac + Node.js 환경)

1-1. OpenCode 설치

1-2. Oh My OpenCode 플러그인 설치

2. Oh My OpenCode 사용법 기반 블로그 개발 실제 사용 흐름

2-1. 프로젝트 폴더 준비

2-2. “ultrawork 프롬프트” 한 방에 요구사항 전달

2-3. 내부에서 벌어지는 일 (SubAgent 협업)

3. SubAgent를 직접 호출하는 예시

3-1. 아키텍처 리뷰: @oracle

3-2. 공식 문서/예제 참고: @librarian

3-3. 코드베이스 탐색: @explore

3-4. UI 개선: @frontend-ui-ux-engineer

4. 실제 설정 파일 예시 (oh-my-opencode.json)

5. Ralph Loop로 “밤새 블로그 만들기” 모드 켜기

6. 최소 요약 – 딱 이것만 기억해도 됨

유사한 게시물

3-1. 아키텍처 리뷰: `@oracle`

3-2. 공식 문서/예제 참고: `@librarian`

3-3. 코드베이스 탐색: `@explore`

3-4. UI 개선: `@frontend-ui-ux-engineer`

4. 실제 설정 파일 예시 (`oh-my-opencode.json`)