Claude Code Workflow Studio로 만드는 시각적 AI 워크플로우
핵심 요약
Claude Code Workflow Studio는 Claude Code용 AI 워크플로우를 드래그 앤 드롭으로 설계하고 .claude 포맷으로 바로 내보낼 수 있는 VS Code 확장입니다. 프롬프트, 서브 에이전트, 스킬, MCP 도구, 조건 분기, 사용자 질문 등을 조합해 복잡한 자동화를 코드 없이 만들고, AI를 이용해 자연어로 점진적으로 수정·개선할 수 있습니다.
Claude Code Workflow Studio란 무엇인가
이 도구는 VS Code 안에서 작동하는 "시각적 Claude Code 워크플로우 설계기"입니다.
마우스로 노드를 배치하고 연결해 흐름도를 그리듯 AI 에이전트 파이프라인을 만들 수 있고, 완성된 흐름은 Claude Code가 바로 실행할 수 있는 에이전트/커맨드 파일로 자동 변환됩니다.
설계, 테스트, 실행, 공유까지 한 곳에서 처리하도록 설계되어 있어, 프롬프트 엔지니어, 개발자, 비개발자 모두가 협업하기에 적합합니다.
코드 없이 만드는 워크플로우 설계
이 확장의 핵심은 "노코드" 설계 방식입니다.
각 단계는 하나의 노드로 표현되고, 노드끼리는 선으로 연결해 데이터와 제어 흐름을 표현합니다.
프롬프트 템플릿, 서브 에이전트, 스킬 호출, MCP 도구 실행, 조건 분기, 사용자 선택 등 복잡한 로직을 모두 시각적으로 구성할 수 있어, JSON이나 YAML을 직접 편집할 필요가 없습니다.
이 방식의 장점은 구조를 한눈에 파악하기 쉽다는 점으로, 길고 복잡한 프롬프트 묶음도 "단계별 블록"으로 쪼개 관리할 수 있습니다.
AI로 워크플로우를 점진적으로 수정하기
"Edit with AI" 기능을 사용하면 워크플로우를 자연어로 수정 요청할 수 있습니다.
예를 들어 "입력 검증용 Sub-Agent를 추가해줘", "에러가 나면 로깅 에이전트로 연결해줘"처럼 말하면, AI가 현재 흐름을 이해한 뒤 필요한 노드를 추가·수정하고 연결까지 해줍니다.
요청은 최대 2000자, 한 번에 50개 노드까지라는 제약이 있으며, 변경 결과는 스키마 검증을 거쳐서만 반영되므로 구조가 깨지지 않습니다.
작은 변경을 여러 번 반복하는 방식이 가장 잘 동작하며, 마음에 들지 않으면 변경 전 상태로 되돌릴 수 있습니다.
이 기능을 쓰려면 로컬에 Claude Code CLI가 설치되어 있어야 합니다.
주요 노드 종류 이해하기
워크플로우는 다양한 유형의 노드를 조합해 구성합니다.
프롬프트 노드는 {{variable}} 형식 변수를 포함한 템플릿을 정의해, 이후 단계에서 실제 값으로 치환해 사용합니다.
Sub-Agent 노드는 독립된 AI 에이전트를 정의하는 블록으로, 시스템 프롬프트·허용 도구·모델(Sonnet, Opus, Haiku 등)을 선택해 역할을 세밀하게 분리할 수 있습니다.
Skill 노드는 사전에 정의된 Claude Code Skill을 호출하는 역할을 하며, 복잡한 작업을 "재사용 가능한 능력 모듈"로 끌어다 쓰는 느낌입니다.
MCP Tool 노드는 외부 시스템(데이터베이스, 브라우저, API 등)을 사용하는 확장 포인트로, Claude의 능력을 로컬/원격 도구까지 확장해 줍니다.
AskUserQuestion, IfElse, Switch 같은 제어 노드는 사용자의 선택이나 조건에 따라 다음 단계를 바꿀 수 있게 해 주어, 단순 직선형이 아닌 "분기형 자동화"를 만들 수 있게 합니다.
Skill 기반 확장과 재사용
Skill은 Claude Code에서 정의하는 "전문화된 능력"으로, SKILL.md에 YAML+프롬프트로 저장됩니다.
Workflow Studio에서는 Skill 노드를 통해 이미 만들어 둔 Skill을 찾아 연결하거나, 새 Skill을 시각적으로 생성할 수 있습니다.
Skill은 두 가지 범위가 있습니다. 개인 스킬은 ~/.claude/skills/에 저장되어 한 사람만 사용하고, 프로젝트 스킬은 프로젝트 폴더의 .claude/skills/에 저장되어 팀원들과 버전 관리로 공유됩니다.
시각적 편집기에서 새 Skill을 만들면 이름, 설명, 상세 지침, 허용 도구, 범위를 입력하는 폼을 통해 자동으로 파일이 생성되고, 워크플로우와 연결 관계까지 관리해 줍니다.
이 구조 덕분에 "PDF 분석기", "코드 스타일 체크"처럼 자주 쓰는 기능을 Skill로 정의해 여러 워크플로우에서 재활용할 수 있습니다.
MCP 도구로 외부 시스템 연동하기
MCP(Model Context Protocol)는 Claude Code의 플러그인 시스템에 해당하며, MCP Tool 노드가 이를 워크플로우에 연결하는 관문입니다.
MCP 노드에서 Claude Code에 등록된 MCP 서버 목록을 보고, 특정 서버의 도구를 검색·선택하면, 도구 스키마를 기반으로 한 동적 폼이 생성되어 파라미터를 설정할 수 있습니다.
필수/선택 매개변수, 타입(문자열, 숫자, 배열 등)은 실시간으로 검증되며, 잘못되면 노드에서 경고를 표시해 줍니다.
예를 들어 Playwright MCP 서버를 연결하면 "페이지 열기", "스크린샷 찍기" 같은 도구를 워크플로우 내에서 호출할 수 있고, 그 결과를 바로 다음 Sub-Agent에서 분석하도록 연결할 수 있습니다.
MCP 자체는 Claude Code 설정에서 따로 구성해야 하며, 로컬 MCP 서버는 오프라인으로 사용 가능하지만, 원격 API를 사용하는 MCP 서버는 네트워크가 필요하다는 점을 기억해야 합니다.
조건 분기와 사용자 의사결정 설계하기
조건 분기는 IfElse와 Switch 노드로 구현합니다.
IfElse는 진리값 기반의 2-way 분기(성공/실패, 예/아니오 등)에 특화된 노드로, 가장 흔한 이분 분기를 단순하게 표현할 때 유용합니다.
Switch는 여러 경우를 나눌 수 있는 노드로, "우선순위: High/Medium/Low"처럼 3개 이상의 선택지를 둘 때 좋습니다.
AskUserQuestion 노드는 흐름 중간에서 사용자의 선택을 직접 물어보고, 선택 결과에 따라 다른 노드로 이어주는 "대화형 분기점" 역할을 합니다.
예를 들어 코드 리뷰 파이프라인에서 "Critical만 볼지, 모든 이슈를 볼지"를 사용자에게 물어본 뒤, 필터링 전략을 달리하는 Sub-Agent로 분기시키는 식으로 설계할 수 있습니다.
설계한 흐름을 실행·배포하는 방식
Workflow Studio에서 만든 흐름은 내부적으로 JSON으로 .vscode/workflows/에 저장됩니다.
사용자는 이름을 지정하고 저장한 뒤, "Export"를 누르면 Claude Code가 이해하는 형식의 파일이 자동으로 생성되는데, 에이전트 정의는 .claude/agents/*.md, 명령 정의는 .claude/commands/*.md에 생성됩니다.
이 파일들은 단순 마크다운+frontmatter 형식이라 필요하면 텍스트 에디터로 직접 수정할 수도 있습니다.
VS Code 안에서 직접 워크플로우를 실행해 동작을 확인할 수 있고, Slack 연동(베타)을 통해 채널로 내보내거나, Slack에서 공유된 워크플로우를 다시 가져오는 기능도 지원해 팀 단위 사용을 돕습니다.
설치, 시작, 제한 사항 한눈에 보기
설치는 두 가지 방식이 있습니다. VS Code 마켓플레이스에서 설치하거나, GitHub에서 소스를 클론해 npm install, npm run build, npx vsce package로 패키지를 만든 뒤 VSIX를 수동 설치할 수 있습니다.
설치 후에는 명령 팔레트에서 "Claude Code Workflow Studio: Open Editor"를 실행해 편집기를 띄우고, 자동으로 시작되는 온보딩 투어를 통해 기본 사용법을 익힐 수 있습니다.
워크플로우마다 최대 50개 노드라는 제한이 있고, AI 편집 요청은 2000자 이내, 기본 처리 시간 제한은 90초(설정으로 30초~5분 사이 조정 가능)입니다.
모든 데이터는 VS Code 로컬 환경에서 관리되며, MCP 도구를 통해 외부 서버를 쓰는 경우를 제외하면 별도 네트워크 통신 없이 동작합니다.
UI와 내보낸 문서는 VS Code 언어 설정에 맞춰 영어, 일본어, 한국어, 간체/번체 중국어로 자동 전환되어 다국어 팀에서도 동일한 도구를 부담 없이 사용할 수 있습니다.
활용 예시로 보는 설계 패턴
데이터 분석 파이프라인에서는 "데이터 수집 → 사용자에게 분석 유형 선택 요청 → 유형별 분석 Sub-Agent → 보고서 생성" 순서로 노드를 배치해, 하나의 흐름에서 통계 분석과 시각화 분석을 함께 다룰 수 있습니다.
코드 리뷰 워크플로우에서는 "코드 스캐너 → 우선순위 질문 → 필터링 → 수정 제안 생성" 구조로, 결과의 양과 깊이를 사용자 선택에 따라 조절하는 방식으로 설계할 수 있습니다.
문서 처리의 경우 파일 경로를 받는 프롬프트, PDF 텍스트를 추출하는 Skill, 처리 방식(요약/번역/분석)을 고르는 질문, 팀 공용 문서 처리 Skill, 마지막 결과 포맷팅 Sub-Agent를 조합해 "업로드부터 결과물 포맷까지" 한 번에 자동화할 수 있습니다.
웹 자동화는 URL 입력 → Playwright MCP로 페이지 열기 → 사용자에게 액션 선택(스크린샷, 텍스트 추출 등) → 선택된 액션 실행 MCP → 결과 분석 Sub-Agent 흐름으로 구현해, 브라우저 자동화와 AI 분석을 섞은 파이프라인을 만들 수 있습니다.
인사이트
Claude Code Workflow Studio는 "프롬프트와 스크립트로만 만들던 자동화"를 "눈으로 보이는 설계도"로 바꿔 줍니다.
복잡한 작업일수록 한 번에 완벽한 워크플로우를 만들기보다는, 3~5개 노드의 작은 흐름으로 시작해 AI 편집 기능을 이용해 단계적으로 확장하는 것이 좋습니다.
설계할 때는 "반복해서 사용할 수 있는 능력(Skill)", "외부 시스템 연동(MCP)", "사용자에게 직접 물어볼 포인트(AskUserQuestion)"를 미리 구분해 두면 구조가 훨씬 깔끔해집니다.
팀으로 사용할 계획이라면, 공통 로직은 프로젝트 스킬로 분리하고, 워크플로우는 되도록 50 노드 제한의 절반 이하로 유지해 "여러 개의 작은 파이프라인"으로 나누는 전략을 추천합니다.