Lexus2016/claude-code-studio

Claude Code CLI를 위한 브라우저 인터페이스. AI와 채팅하고, 작업을 자동 항법(autopilot)으로 실행하며, 프로젝트를 관리하세요 — 이 모든 것을 하나의 탭에서 수행할 수 있습니다.

English | Українська | Русский

지원 환경:

Windows, macOS, Linux — 플랫폼별 별도 설정이 필요 없습니다.

Claude Code CLI는 강력합니다 — 코드를 작성하고, 테스트를 실행하며, 파일을 편집하고, 기능을 배포합니다. 하지만 터미널(terminal)에서 작동하기 때문에 한계가 있습니다: 세션 간에 컨텍스트(context)가 유실되고, 병렬 작업을 하려면 여러 탭을 번갈아 관리해야 하며, 작업을 큐(queue)에 쌓아두고 자리를 비울 방법이 없습니다.

Claude Code Studio는 이를 해결합니다:

작업을 큐에 쌓아두고 자리를 비우세요— 칸반 보드(Kanban board) + 스케줄러(Scheduler). 당신이 잠든 동안 Claude가 작업합니다. 돌아오면 모든 것이 완료되어 있을 것입니다. 어디서나 제어하세요— Telegram 봇 + 원격 접속(Remote Access). 체육관에서 휴대폰으로 결과를 확인하세요. 자율 파이프라인(Autonomous pipelines)— 작업 실행 중 하위 작업(child tasks)을 생성합니다. 하나의 "이슈 확인" 작업이 자동으로 수정 작업을 생성합니다. 컨텍스트가 절대 유실되지 않습니다— 셀프 힐링 리플레이(self-healing replay) 기능이 있는 SQLite 기반 세션. 며칠 뒤에 돌아와도 작업하던 지점에서 바로 재개할 수 있습니다. 진정한 병렬 실행— 동일한 프로젝트 내에서 여러 작업이 동시에 실행됩니다. 수동으로 탭을 전환할 필요가 없습니다.

선행 조건: Node.js 18 이상 + Claude Code CLI 설치 및 로그인 완료 (Claude Pro 또는 Max 구독 필요)

Node.js 22.5 이상 — 네이티브 컴파일(native compilation)이 필요 없습니다. C++ 툴체인 없이 내장된 node:sqlite를 사용합니다. 이전 버전의 Node.js는 better-sqlite3로 폴백(fall back)됩니다 (빌드 도구 필요).

npx github:Lexus2016/claude-code-studio

http://localhost:3000을 열고, 비밀번호를 설정한 뒤 채팅을 시작하세요.

기타 설치 방법

업데이트:

npx github:Lexus2016/claude-code-studio@latest

글로벌 설치:

npm install -g github:Lexus2016/claude-code-studio

저장소 클론(Clone):

git clone https://github.com/Lexus2016/claude-code-studio.git
cd claude-code-studio
npm install && node server.js

Docker:

git clone https://github.com/Lexus2016/claude-code-studio.git
cd claude-code-studio
cp .env.example .env
...

문제 해결: GitHub에서 npm install 실패 시

일부 npm 버전(특히 10.x)에서는 다음과 같은 오류와 함께 git 의존성 (dependencies) 설치에 실패합니다:

npm error --prefer-online cannot be provided when using --prefer-offline

이는 git 의존성 준비 과정에서 충돌하는 플래그 (flags)가 전달될 때 발생하는 알려진 npm 버그입니다.

해결 방법 — 수동 설치:

git clone https://github.com/Lexus2016/claude-code-studio.git
cd claude-code-studio
npm install
...

또는 npm 업데이트:

npm install -g npm@latest

챗봇이 아닙니다. "이 함수를 리팩토링하고 테스트를 추가해줘"라고 하면 → Claude가 파일을 열고, 수정하고, 테스트를 실행하고, 오류를 수정하고, 결과를 보고합니다 — 실시간으로 말이죠. Ctrl+V로 스크린샷을 붙여넣으세요. Claude가 작업 도중 질문을 하면, 답변 후 카드는 컴팩트한 필 (pill) 형태로 접힙니다. Compact & New를 누르면 Haiku를 통해 대화를 요약하고 새로운 세션에서 계속할 수 있습니다 — 모든 문맥 (context)은 보존되며 토큰 낭비는 전혀 없습니다.

사이드바 퀵 필터 (Sidebar quick-filter) — 모든 사이드바 섹션 (Projects, Chats, MCP servers, Skills, Commands)에는 🔽 필터 버튼이 있습니다. 버튼을 클릭하고 몇 글자를 입력하면 — 목록이 즉시 좁혀집니다. Esc를 누르면 해제됩니다.

Claude CLI 세션 가져오기 (Claude CLI session import) — Claude Code CLI (~/.claude/projects/)의 기존 세션을 Studio로 직접 가져옵니다. 헤더의 ↓ 버튼을 클릭하고, 프로젝트 경로를 선택한 뒤, 세션을 골라 가져오기를 클릭하세요. 이미 가져온 세션은 중복되지 않도록 표시됩니다. Windows (C:\...), macOS, Linux에서 작동하며 ~ 경로 확장을 지원합니다.

확장된 사고 (Extended thinking) — Claude가 확장된 사고 (extended thinking)를 사용할 때, 각 사고 블록은 예상 단어 수를 보여주는 "Chain of thought" 배지로 나타납니다. 클릭하면 복사 버튼이 있는 모달 (modal) 창에서 전체 추론 과정을 볼 수 있습니다. CLI 가져오기 모달과 사고 모달은 완전히 현지화되어 있습니다 (EN/UA/RU) — 모든 레이블, 상태 메시지, 날짜가 선택된 인터페이스 언어에 맞춰 조정됩니다.

Thinking blocks(사고 블록)는 이제 **완전히 지속적(fully persistent)**입니다. 생성 도중에 탭을 전환하더라도 사고의 흐름(chain of thought)을 더 이상 잃어버리지 않으며, 완료 시 SQLite에 저장됩니다. Claude가 추론함에 따라 실시간으로 **thinking badges(사고 배지)**가 나타나므로, 사고 과정이 전개되는 것을 지켜볼 수 있습니다. 가져온 CLI 세션 또한 사고 블록을 보존하므로, 과거의 모든 추론 흔적(reasoning trace)을 검토할 수 있습니다. 세션 복구(Session recovery) 또한 정확합니다. 재개 시 Claude로 다시 전송되는 컨텍스트에서 사고 블록은 제외되므로, Claude는 자신의 내부 추론을 이전 메시지로 인식하지 않습니다. 키보드에서 ESC를 누르면 사고 모달(thinking modal)을 닫을 수 있습니다.

사고 모달 내부의 **Translate(번역)**를 누르면 Claude haiku를 통해 사고의 흐름을 인터페이스 언어로 렌더링합니다. 응답은 캐싱되어 재번역 시 즉시 처리됩니다. Copy(복사) 버튼은 현재 표시되고 있는 내용(원본 또는 번역본)을 항상 복사합니다.

작업 중 중단(Mid-task interrupt) — Claude가 활발히 작업하는 동안 현재 작업을 중단하지 않고 명확한 설명이나 새로운 지침을 보냅니다. Claude가 생성하는 동안 입력창에 소형 ⚡ Clarify 필(pill)이 나타납니다. 이를 클릭하여 Clarify(명확화)(실행 중인 스트림에 주입)와 Queue(대기열)(현재 작업이 끝난 후 예약) 사이를 전환할 수 있습니다. 전달은 PreToolUse를 통해 보장됩니다.

hook: Studio는 모든 **도구 호출 (tool call)**을 가로채어 Claude의 다음 동작이 수행되기 전에 사용자의 메시지를 전달합니다. 배지는 실시간 전달 상태를 표시합니다. Claude가 메시지를 읽으면 "Delivered (전달됨)", 전달 전에 작업이 완료되면 "Task ended (작업 종료)"}$라고 표시됩니다. 전달 상태는 이제 SQLite에 영구 저장됩니다 — 페이지를 새로고침하거나 며칠 뒤에 세션에 다시 접속하더라도, 히스토리의 각 중단(interrupt) 지점에서 메시지가 Claude에게 도달했는지 아니면 만료되었는지를 정확하게 보여줍니다. 배지 상태는 작업 완료에 대한 서버의 권위 있는 카운트(authoritative count)를 기반으로 조정(reconcile)되므로, 멀티 탭 사용이나 실시간 이벤트 누락을 포함한 모든 시나리오에서 정확합니다. UI 언어를 전환하면 알림(pill) 텍스트가 즉시 업데이트되며 페이지 새로고침이 필요하지 않습니다. 이 알림은 **SSH를 인식(SSH-aware)**합니다. 해당 기능이 적용되지 않는 원격 SSH 세션에서는 숨겨진 상태를 유지하며, 로컬 프로젝트에서 SSH 프로젝트로 전환할 때 즉시 사라져 입력창에 오래된 컨트롤이 남지 않습니다.

중단 첨부 파일 (Interrupt attachments) — 작업 중간의 명확화(clarification) 단계에서 파일, 스크린샷 또는 SSH 설정을 첨부할 수 있습니다. Claude는 이미지를 시각적 콘텐츠(전체 멀티모달 MCP (multimodal MCP) 블록)로 수신하고, 파일은 읽기 가능한 경로로, SSH 설정은 자격 증명이 미리 채워진 상태로 수신합니다. 컨텍스트를 공유하기 위해 작업을 중단할 필요가 없습니다. 모든 것이 동일한 체크포인트 전달(checkpoint delivery) 과정에서 함께 도착합니다. 웹 UI와 Telegram 모두에서 작동합니다.

속도 제한 자동 대기 (Rate limit auto-wait) — Claude의 API가 속도 제한(rate limit) 또는 과부하(overload) (429) 응답을 보내면, Studio는 자동으로 리셋 창(reset window)을 기다린 후 재시도합니다. 수동 새로고침이나 세션 손실이 필요 없습니다. 채팅창에 실시간 카운트다운이 나타납니다: "Rate limited — retrying in 4m 30s (속도 제한됨 — 4분 30초 후 재시도)". 최대 3회의 자동 재시도와 최대 30분의 대기 시간이 적용되며, 안전한 최소 하한선(minimum floor)을 통해 오래된 리셋 타임스탬프를 정확하게 처리합니다.

세션 포크 (Session fork) — 채팅 옆의 ↗ 버튼을 누르면 동일한 Claude CLI 세션 히스토리를 공유하는 전체 복사본을 생성할 수 있습니다. 대화의 어느 지점에서든 분기(branch)를 만들어 원본 스레드를 잃지 않고 대안적인 접근 방식을 탐색할 수 있습니다. SSH 호스트에서도 작동합니다.

세션 내보내기 / 가져오기 (Session export / import) — 채팅 기록을 어디든 가져가세요. 클릭 한 번으로 모든 메시지 기록, 도구 호출 (tool calls), 타임스탬프(timestamps), 첨부 파일을 포함한 휴대 가능한 JSON 파일로 모든 세션을 내보낼 수 있습니다. 이를 다시 어떤 Studio 인스턴스로든 가져와서 중단했던 지점부터 재개할 수 있습니다. 가져오기 (Import) 버튼은 환영 화면 (welcome screen)에 위치하므로, 세션을 먼저 생성할 필요 없이 바로 복구할 수 있습니다.

백업 이외의 활용 사례:

기기 간 전송 — 데스크톱에서 내보내고 노트북이나 서버에서 가져오세요. 동일한 대화를 다른 컴퓨터에서 이어갈 수 있습니다.
모든 AI 에이전트에 입력 — 내보낸 JSON을 ChatGPT, Gemini 또는 다른 AI에 넣고 "우리가 논의한 내용을 검토하고 계속 진행하자"라고 말해보세요. 형식은 사람이 읽을 수 있으며 자체적으로 완결성을 갖추고 있습니다.
모든 AI로부터 가져오기 — 다른 도구에서 생산적인 세션을 가졌나요? 대화 내용을 { "session": { "title": "..." }, "messages": [{ "role": "user"|"assistant", "type": "text", "content": "..." }] } 형식으로 저장하도록 요청한 뒤, 그 결과를 Studio로 가져오세요. 당신의 대화는 하나의 플랫폼에 종속되지 않습니다.

카드를 생성하고, 원하는 내용을 설명한 뒤, "할 일 (To Do)"로 이동하세요 — Claude가 자동으로 이를 처리합니다.

10개의 작업을 큐(queue)에 넣고 자리를 비웠다 돌아오면 모든 작업이 완료되어 있을 것입니다. 카드는 병렬로 (in parallel) (독립적인 작업) 또는 순차적으로 (sequentially) (체인 세션 — Claude가 이전 작업이 구축한 내용을 기억함) 실행됩니다. **교차 탭 동기화 (Cross-tab sync)**는 열려 있는 모든 브라우저 탭을 즉시 업데이트합니다. 진정한 병렬 실행 — 독립적인 작업을 위한 인위적인 디렉토리 잠금 (directory locks)이 없습니다.

작업을 생성하고 시간을 설정하세요 — Claude가 정확히 필요한 시점에 실행합니다. 크론 (cron), 스크립트, 혹은 일일이 지켜볼 필요가 없습니다.

일회성: "오전 6시에 스테이징(staging)에 배포해줘" — 정각 6시에 완료됩니다.
반복: 시간별, 일별, 주별, 월별 — 종료 날짜 선택 가능
최대 5개의 병렬 워커 (parallel workers) — 재시작 후 놓친 시간은 유연하게 건너뜁니다.

반복 작업은 제자리에서 재무장 (re-armed in place) 됩니다. 즉, 새로운 데이터베이스 행을 생성하는 대신 동일한 작업 레코드가 실행 후 다음 예정된 시간으로 재설정됩니다. 작업 ID (Task IDs)는 반복 실행 간에도 안정적으로 유지되며, 데이터베이스가 무한정 커지는 것을 방지하고, 충돌 복구 시 중단된 반복 작업을 완료로 표시하는 대신 올바르게 재무장합니다.

**60초 와치독 (60-second watchdog)**이 활성 워커 (live worker) 없이 in_progress 상태로 멈춰 있는 작업을 스캔합니다. 만약 워커가 정리 작업 없이 충돌했다면, 와치독이 작업을 자동으로 복구합니다 (반복 작업은 재무장하고, 일회성 작업은 todo로 재설정합니다).

작업 생성 양식은 날짜/시간이 현재 시간으로 미리 채워져 있어, 스케줄링 전에 빈 선택기를 채워야 하는 번거로움이 없습니다.

색상으로 구분된 아젠다: 지연됨 (빨간색), 오늘 (주황색), 예정됨 (파란색), 반복됨 (보라색). 즉각적인 테스트를 위한 Run Now 버튼.

작업 실행 중에 Claude는 자율적인 작업 관리를 위한 내장 MCP 서버에 접근할 수 있으며, 이를 통해 단일 작업을 스스로 지시하는 파이프라인으로 전환할 수 있습니다.

도구	기능
create_task	후속 작업 생성. 5개의 버그를 발견했나요? 자동으로 5개의 수정 작업을 생성합니다
create_chain	한 번의 호출로 순차적 파이프라인 (빌드 → 테스트 → 배포) 생성
list_tasks	기존 작업 확인 — 중복 방지 및 진행 상황 모니터링
get_current_task	부모 작업으로부터 미션과 컨텍스트 (context) 읽기
report_result	후속 작업을 위해 구조화된 결과 저장
get_task_result	완료된 의존성 작업의 출력값 읽기
cancel_task	불필요한 작업 취소 (이미 수정된 버그

,/chats

,/tasks

,/chat

,/new

결과 확인: /last

,/full

— 작업이 완료되거나 실패할 때 푸시 알림(Push notifications) 제공

관리: /files

,/cat

,/diff

,/log

,/stop

,/tunnel

,/url

작업 중 대기열(Queue) 및 중단(Interrupt): Claude가 작업 중일 때 메시지를 보내면, 단순한