추가 메뉴

기타
ClaudeGUI — Claude Code CLI를 4분할 웹 IDE로 기반 제공 오픈소스 프로젝트
E

Lv.1 EastOriginal1622 (180.♡.169.157)

2026년 4월 11일 PM 03:14

조회 632 공감 0



안녕하세요. Anthropic Claude Code CLI를 매일 쓰면서 "파일 트리, 에디터,

터미널, 그리고 Claude가 만드는 결과물을 한 화면에서 같이 보고 싶다"는

갈증이 쌓여서, 웹 IDE 형태로 래핑한 오픈소스 프로젝트를 공개합니다.

> ⚠️ Anthropic / Claude Code와는 무관한 비공식 커뮤니티 프로젝트입니다.

> Claude Pro/Max 구독이 이미 있는 분들이 대상입니다.

## 무엇인가요

ClaudeGUI@anthropic-ai/claude-agent-sdk 위에 얹은 4분할 웹 IDE.

- 📁 파일 탐색기 — react-arborist 가상화 트리, Git 상태, 드래그앤드롭

- 📝 Monaco 에디터 — VS Code 엔진, 100+ 언어, AI diff를 hunk 단위로 수락/거절

- 💻 xterm.js 터미널 — WebGL GPU 가속, 다중 세션, node-pty

- 👁 멀티포맷 프리뷰 — HTML / PDF / Markdown(GFM+LaTeX) / 이미지 /

reveal.js 프레젠테이션

## 자랑하고 싶은 포인트

1. HTML 스트리밍 라이브 프리뷰

Claude가 응답 중에 ```html <code>블록이나 </code>.html 파일을 만들기 시작하면,

완성을 기다리지 않고 타이핑되는 순간부터 Preview 패널이 부분 렌더링을

시작합니다. Claude가 웹사이트를 "그려나가는" 걸 실시간으로 볼 수 있어요.

2. 대화형 슬라이드 편집

Claude에게 "3페이지를 더 어둡게 해줘"라고 말하면 reveal.js가 iframe

리로드 없이 Reveal.sync()로 즉시 반영됩니다. 완성되면 PPTX/PDF로 내보내기.

3. 권한 요청 GUI

터미널에서 y/N으로 승인하던 도구 사용 요청이 GUI 모달로 뜹니다.

위험 명령 경고, .claude/settings.json 화이트리스트와 자동 연동.

4. 런타임 프로젝트 핫스왑

헤더에서 프로젝트를 바꾸면 파일 탐색기/터미널 cwd/Claude 세션이

한꺼번에 따라갑니다.

5. Green Phosphor CRT 레트로 테마 🟢

재미로 넣었는데 생각보다 빠져나오기 어렵습니다.

## 기술 스택

Next.js 14 App Router + 커스텀 server.js, TypeScript strict, Zustand v5,

Tailwind + shadcn/ui, ws(socket.io 아님), chokidar, Tauri v2 기반

.dmg.msi 네이티브 인스톨러.

## 설치

원라인 설치 (macOS/Linux):

```bash

curl -fsSL https://github.com/neuralfoundry-coder/CLAUDE-GUI/tree/main/scripts/install/install.sh | bash

Windows는 PowerShell iwr | iex 버전 제공. 100% 로컬 실행이고 기본

127.0.0.1 바인딩이라 외부 노출 없습니다. 내장 터미널에서 claude login

한 번 하면 ~/.claude/.credentials.json을 그대로 읽어서 재로그인 불필요.

현재 상태

v0.3 — 타입체크·린트·단위 테스트(102/102)·Playwright E2E(14/14) 모두 통과.

여전히 거친 부분 많고 라이선스는 TBD입니다. 이슈·PR·피드백 모두 환영합니다.

Repo: https://github.com/neuralfoundry-coder/CLAUDE-GUI.git

한국어 SRS / 아키텍처 문서도 docs/srs/, docs/architecture/에 함께

제공합니다.

댓글 (1)

  • 하압

    하압 Lv.1

    05.30 · 119.♡.223.96

    대단하십니다. 한번 써보겠습니다

댓글을 작성하려면 이 필요합니다.