CC Workflow Studio: AI 에이전트 워크플로우를 비주얼 에디터로 설계하는 방법
CC Workflow Studio: AI 에이전트 워크플로우를 비주얼 에디터로 설계하는 방법
AI 에이전트 워크플로우를 설계할 때마다 JSON 파일과 마크다운을 손으로 편집하고 계신가요? 노드 간 연결 구조가 머릿속에서만 그려지고, 실제 파일로 옮기는 데 시간이 걸린다면 CC Workflow Studio가 그 문제를 해결해 드립니다.
CC Workflow Studio는 VSCode 안에서 AI 에이전트 워크플로우를 드래그앤드롭으로 설계하고 원클릭으로 실행·내보낼 수 있는 오픈소스 확장입니다. Claude Code, GitHub Copilot, Gemini CLI 등 8개 AI 에이전트를 지원하며, 완전 오프라인으로 동작합니다.
CC Workflow Studio란 무엇인가요?
CC Workflow Studio는 AI 에이전트 워크플로우를 비주얼 에디터로 설계할 수 있는 VSCode 확장입니다. 코드 없이 드래그앤드롭으로 노드를 연결하고, 완성된 워크플로우를 Claude Code 에이전트 파일로 즉시 내보낼 수 있습니다.
원래 이름은 ClaudeCode Workflow Studio였으나 Claude Code 외 다양한 AI 에이전트를 지원하면서 CC Workflow Studio로 리브랜딩했습니다. 일본의 1인 개발자 breaking-brake가 AGPL-3.0 라이선스로 공개했으며, 2026년 3월 기준 GitHub 스타 4,600개, 871개 커밋, 142개 릴리즈를 기록 중입니다. 최신 버전은 v3.30.2입니다.
왜 비주얼 에디터가 필요한가요?
비유하자면, 집의 배선도를 텍스트로 설명하는 것과 도면으로 그리는 것 중 어느 쪽이 빠르고 정확할까요? AI 에이전트 워크플로우도 마찬가지입니다.
텍스트 기반 에이전트 정의 파일은 구조가 커질수록 관리가 어렵습니다. 어느 노드가 어디로 분기되는지, 서브에이전트가 어떤 순서로 호출되는지를 머릿속으로만 추적해야 합니다. CC Workflow Studio는 이 과정을 시각화하여 워크플로우의 전체 구조를 한눈에 파악하고 수정할 수 있게 합니다.
핵심 기능 살펴보기
1. 비주얼 워크플로우 에디터
React Flow 기반의 캔버스에서 노드를 드래그하고 엣지로 연결합니다. 8가지 노드 타입을 제공합니다.
| 노드 타입 | 역할 |
|---|---|
| Sub-Agent | 하위 에이전트 호출 |
| AskUserQuestion | 사용자 입력 요청 |
| Branch | 조건 분기 |
| Prompt | 프롬프트 정의 |
| MCP Tool | MCP 서버 도구 호출 |
| Skill | 재사용 스킬 참조 |
| Group | 노드 묶음 |
| End | 워크플로우 종료 |
각 노드는 클릭 한 번으로 속성을 편집할 수 있으며, 연결선을 드래그해 노드 간 흐름을 즉시 변경할 수 있습니다.
2. Edit with AI — 자연어 워크플로우 개선
CC Workflow Studio에는 MCP 서버가 내장되어 있습니다. 워크플로우 캔버스를 열어둔 채로 자연어로 개선을 요청하면 AI가 직접 노드를 추가하거나 연결을 수정합니다.
예를 들어 "리서치 완료 후 품질 검토 단계를 추가해줘"라고 입력하면, AI가 해당 위치에 적절한 노드를 삽입하고 기존 흐름에 연결합니다. 코드를 직접 수정하지 않아도 됩니다.
3. 8개 AI 에이전트 지원
CC Workflow Studio는 특정 AI 도구에 종속되지 않습니다. 아래 에이전트를 모두 지원합니다.
- Claude Code — Anthropic
- GitHub Copilot Chat / CLI — Microsoft
- OpenAI Codex CLI — OpenAI
- Roo Code — 멀티 에이전트 프레임워크
- Gemini CLI — Google
- Antigravity — 커뮤니티 에이전트
- Cursor — AI 코드 에디터
팀에서 여러 AI 도구를 병행 사용하더라도 동일한 비주얼 인터페이스로 워크플로우를 관리할 수 있습니다.
4. 원클릭 익스포트와 실행
설계 완료된 워크플로우는 한 번의 클릭으로 내보냅니다.
.claude/agents/— Claude Code 에이전트 파일.claude/commands/— 커스텀 슬래시 커맨드
내보낸 파일은 JSON 또는 마크다운 형식으로 저장되며, 즉시 Claude Code에서 호출 가능합니다. 익스포트 후 별도 설정 없이 바로 실행(Run)할 수 있습니다.
5. 완전 오프라인 동작
데이터가 외부 서버로 전송되지 않습니다. 워크플로우 설계부터 저장, 실행까지 모두 로컬 환경에서 처리됩니다. 인터넷 연결이 없는 환경이나 보안이 중요한 프로젝트에서도 사용할 수 있습니다.
설치 방법
VSCode 마켓플레이스에서 설치 (권장)
- VSCode를 실행합니다.
- 좌측 사이드바에서 Extensions 아이콘을 클릭합니다 (Ctrl+Shift+X).
- 검색창에 **"CC Workflow Studio"**를 입력합니다.
- Install 버튼을 클릭합니다.
- 설치 완료 후 VSCode를 재시작합니다.
소스 빌드 (고급)
최신 개발 버전을 직접 빌드하려면 아래 절차를 따릅니다.
git clone https://github.com/breaking-brake/cc-wf-studio.git
cd cc-wf-studio
npm install
npm run build
빌드 완료 후 VSCode에서 Extensions → ... → Install from VSIX로 빌드된 .vsix 파일을 설치합니다.
첫 번째 워크플로우 만들기
설치 후 VSCode 커맨드 팔레트(Ctrl+Shift+P)에서 "CC Workflow Studio: Open Editor"를 실행하면 비주얼 에디터가 열립니다.
기본 워크플로우 구성 순서
- 캔버스에 Start 노드 확인 — 에디터를 열면 기본 Start 노드가 배치되어 있습니다.
- 노드 추가 — 좌측 패널에서 원하는 노드 타입을 드래그해 캔버스에 놓습니다.
- 노드 연결 — 노드 우측 핸들을 드래그해 다음 노드의 좌측 핸들에 연결합니다.
- 노드 속성 설정 — 노드를 클릭하면 우측 패널에 속성 편집기가 나타납니다.
- 익스포트 — 상단 Export 버튼을 클릭해 에이전트 파일로 저장합니다.
실용 예시: 리서치 → 검토 → 발행 워크플로우
[Start]
↓
[Sub-Agent: researcher] ← 웹 리서치 수행
↓
[AskUserQuestion] ← "리서치 결과를 확인하셨나요?"
↓
[Branch] ← 승인 여부 분기
├── 승인 → [Sub-Agent: blog-writer] → [End]
└── 반려 → [Sub-Agent: researcher] (루프)
이 구조를 텍스트로 작성하려면 에이전트 마크다운 파일을 여러 개 수동으로 편집해야 합니다. CC Workflow Studio에서는 노드를 배치하고 선으로 연결하는 것으로 동일한 결과를 얻을 수 있습니다.
Dify, n8n과의 비교
AI 에이전트 워크플로우 도구는 CC Workflow Studio 외에도 여럿 있습니다. 어떤 도구가 적합한지 판단하는 기준을 살펴보겠습니다.
| 항목 | CC Workflow Studio | Dify | n8n |
|---|---|---|---|
| 유형 | VSCode 확장 | 웹 SaaS | 자동화 플랫폼 |
| 시각 편집 | O | O | O |
| 오프라인 동작 | O (완전) | X | 셀프호스팅만 |
| 설치 위치 | 로컬 VSCode | 클라우드 / 셀프호스팅 | 셀프호스팅 / 클라우드 |
| 대상 사용자 | 개발자 (코드 에디터 중심) | 비개발자 포함 | 자동화 엔지니어 |
| 가격 | 무료 (오픈소스) | 무료 플랜 + 유료 | 무료 + 유료 |
| AI 에이전트 연동 | Claude Code 등 8개 | 다양한 LLM API | API 연동 |
| 라이선스 | AGPL-3.0 | Apache 2.0 | 상업 라이선스 |
CC Workflow Studio가 유리한 상황
- 이미 VSCode를 주 개발 환경으로 사용하는 경우
- 데이터를 외부 서버에 보내지 않아야 하는 경우
- Claude Code 에이전트 파일을 직접 관리하는 경우
- 완전 무료로 시작하고 싶은 경우
다른 도구가 유리한 상황
- 비개발자와 팀으로 협업하는 경우 → Dify
- 다양한 SaaS 서비스(Slack, Gmail 등)와 연동이 필요한 경우 → n8n
- 클라우드 기반 관리가 필요한 경우 → Dify 또는 n8n Cloud
아키텍처 이해하기
CC Workflow Studio는 세 계층으로 구성됩니다.
Editor UI (Webview)
↕
Extension Host (VSCode)
↕
Workflow Definition (JSON → MD)
- Editor UI: React Flow 기반 캔버스. 노드 배치와 연결을 처리합니다.
- Extension Host: VSCode Extension API로 파일 시스템 접근, 터미널 실행을 담당합니다.
- Workflow Definition: 설계된 워크플로우를 JSON으로 저장하고 실행 시 마크다운 에이전트 파일로 변환합니다.
기술 스택은 TypeScript(98.1%)와 React Flow 중심입니다. VSCode Extension API를 통해 에디터와 깊게 통합되어 있어 별도 앱 없이 기존 개발 환경에서 바로 사용할 수 있습니다.
한계와 주의사항
CC Workflow Studio를 도입하기 전에 아래 제약 사항을 확인하세요.
50노드 제한
하나의 워크플로우에 최대 50개의 노드를 배치할 수 있습니다. 대규모 복잡한 워크플로우는 여러 워크플로우로 분리하거나 Group 노드로 묶어 관리해야 합니다.
VSCode 전용
VSCode 또는 VSCode 기반 에디터(Cursor 등)에서만 실행됩니다. JetBrains IDE, Vim, Emacs 등 다른 환경에서는 사용할 수 없습니다.
1인 개발 리스크
현재 breaking-brake 1인이 개발·유지보수하고 있습니다. 기업 환경에서 장기 의존 전략을 세우기 전에 포크 또는 자체 유지보수 계획을 고려하는 것이 좋습니다.
AGPL-3.0 라이선스
AGPL(GNU Affero General Public License)은 네트워크로 서비스를 제공하는 경우 소스코드 공개 의무가 발생합니다. 내부 개발 도구로만 사용한다면 문제없지만, SaaS로 제공하거나 상업적으로 수정·배포하려면 법무 검토가 필요합니다.
마무리
CC Workflow Studio는 코드 에디터 안에서 AI 에이전트 워크플로우를 시각적으로 설계하고 싶은 개발자에게 실용적인 선택입니다. 완전 오프라인, 무료, VSCode 네이티브라는 세 가지 특성이 기존 Claude Code 개발 환경과 자연스럽게 맞아떨어집니다.
특히 리서치 에이전트, 콘텐츠 생성 팀, 멀티스텝 자동화 파이프라인처럼 여러 에이전트가 협력하는 워크플로우를 설계할 때 그 강점이 두드러집니다. 텍스트 파일을 직접 편집하던 시간을 줄이고, 워크플로우 구조를 팀원과 시각적으로 공유할 수 있다는 점도 실질적인 이점입니다.
50노드 제한과 1인 개발 리스크는 존재하지만, 개인 프로젝트나 소규모 팀 환경에서 Claude Code 에이전트를 적극적으로 활용하고 있다면 지금 바로 설치해볼 가치가 있습니다.
VSCode Extensions에서 "CC Workflow Studio"를 검색해 설치해보세요.
자주 묻는 질문 (FAQ)
Q: Claude Code 없이도 CC Workflow Studio를 사용할 수 있나요?
네, 사용할 수 있습니다. CC Workflow Studio는 Claude Code 외에도 GitHub Copilot, Gemini CLI, OpenAI Codex CLI 등 7개 에이전트를 추가로 지원합니다. 다만 익스포트 경로는 각 에이전트의 설정 디렉토리 기준으로 달라집니다.
Q: 유료 플랜이 있나요?
현재 CC Workflow Studio는 완전 무료입니다. AGPL-3.0 오픈소스 라이선스로 공개되어 있으며, 소스코드를 직접 수정하거나 포크해 사용할 수 있습니다.
Q: 기존에 작성한 에이전트 마크다운 파일을 가져올 수 있나요?
공식 문서에 따르면 기존 .claude/agents/ 파일을 임포트하는 기능을 지원합니다. 에디터 상단의 Import 버튼을 통해 기존 에이전트 정의를 비주얼 워크플로우로 변환할 수 있습니다.
Q: 한국어 인터페이스를 지원하나요?
네, CC Workflow Studio는 다국어를 지원하며 한국어 인터페이스를 포함합니다. VSCode 언어 설정이 한국어로 되어 있으면 자동으로 한국어 UI가 표시됩니다.
Q: 워크플로우를 팀원과 공유하려면 어떻게 하나요?
익스포트된 JSON 또는 마크다운 파일을 Git으로 커밋해 공유하면 됩니다. CC Workflow Studio는 파일 기반으로 동작하므로 GitHub, GitLab 등 버전 관리 시스템과 자연스럽게 통합됩니다.
