Figma 스타일의 캔버스 IDE, CATE에서 Claude Code 사용하기
Using Claude Code inside a CATE, Figma like Canvas IDE
핵심 요약
Claude Code 작업 시 발생하는 창 전환의 번거로움을 해결하기 위해 워크플로우를 캔버스 형태로 관리하는 오픈소스 도구 CATE 소개.
- 워크스페이스 지속성 — 터미널, 브라우저, 문서를 캔버스에 고정하여 작업 상태를 유지함.
- 컨텍스트 전환 감소 — 창을 오가며 발생하는 인지적 부하를 줄이고 작업 흐름을 통합함.
- 에이전트 워크플로우 최적화 — Claude Code와 같은 AI 도구 사용 시 필요한 환경을 공간적으로 배치함.
- 오픈소스 프로젝트 — MIT 라이선스로 배포되며 누구나 자유롭게 사용 및 기여 가능함.
CATE라는 오픈소스 데스크톱 워크스페이스를 만들고 있는데, Claude Code를 개발 컨텍스트와 함께 원활하게 실행하는 워크플로우를 지원하고 싶었습니다.
참고로 저는 CATE 개발자입니다. MIT 라이선스를 따르는 무료 오픈소스 프로젝트입니다.
Claude Code를 쓰면서 계속 겪었던 문제는 Claude 자체가 아니라 주변 워크스페이스였습니다. 저는 보통 이런 것들을 띄워놓거든요.
- Claude Code 실행 터미널
- 개발 서버용 터미널
- 브라우저 미리보기
- 문서나 이슈 컨텍스트
- 에디터/파일
- 때로는 여러 브랜치/워크트리
이 모든 게 순식간에 탭과 창을 계속 전환해야 하는 상황으로 변합니다.
CATE는 전체 워크플로우를 하나의 지속적인 캔버스에 올려서 이 문제를 해결하려 합니다. Claude Code를 관련 파일, 미리보기, 터미널, 문서 옆에 두고 나중에 같은 레이아웃을 그대로 복구할 수 있습니다.
이런 분들께 유용합니다:
- 여러 터미널을 사용하는 Claude Code 사용자
- 브라우저 미리보기나 문서가 필요한 에이전트 기반 코딩 워크플로우
- 멀티 브랜치나 git 워크트리 설정
- 코딩 세션 주변에 더 지속적인 시각적 컨텍스트를 원하는 사람
저장소: https://github.com/0-AI-UG/cate
웹사이트: https://cate.cero-ai.com/
다른 Claude Code 사용자들이 에이전트, 터미널, 미리보기를 중심으로 워크스페이스를 어떻게 구성하는지 궁금합니다.


