Claudia: Cloud Code에 GUI 제공, 누구나 무료로 이용 가능! (앱 개발 10배 가속)

Mervin Praison 구독자 70,100명

요약

Claudia는 Cloud Code에 편리한 GUI를 제공하는 오픈소스 프레임워크로, 무료로 누구나 사용할 수 있습니다. 이 영상을 통해 설치부터 에이전트 생성, 애플리케이션 자동 생성 및 코드 리뷰 워크플로우까지 단계별로 안내합니다. Custom agent를 활용해 칼로리 트래커 앱을 실시간으로 만들어 보고, Code Review Agent로 코드 품질을 자동 분석하는 과정을 시연합니다. 직관적인 대시보드와 세션 관리, 비용 모니터링 기능으로 개발 생산성을 10배 이상 끌어올리는 방법을 제시합니다.

주요 키워드

Claudia Cloud Code custom agent cloud.md MCP integration sub agent session management Bun

하이라이트

🚀 Cloud Code에 사용자 친화적인 GUI를 더한 Claudia는 오픈소스로 누구나 무료로 사용 가능하다.
🔑 프로젝트·세션 관리, 커스텀 에이전트 생성, 백그라운드 에이전트 실행 같은 다양한 기능을 지원한다.
⚡️ 사전 요구사항(Rust, Bun, Git, NodeJS) 설치 방법을 터미널 명령어와 함께 단계별로 설명한다.
🌟 Custom Agent를 이용해 칼로리 트래커 앱을 자동 생성하고, HTML·JS·CSS를 단일 파일로 구성해 바로 실행해본다.
📌 Code Review Agent 실행 시 아키텍처, 보안, 테스트용 sub agent가 자동으로 생성되어 고품질 분석을 제공한다.
💡 CC 프로젝트 세션 기능으로 모델 선택, 작업 지시, 앱 미리보기까지 한 번에 수행할 수 있다.
💰 Cloud Pro/Max 계정 연동과 MCP 통합으로 비용 절감과 사용 현황 대시보드를 제공한다.
📣 직관적인 UI 덕분에 비개발자도 쉽게 Cloud Code를 다룰 수 있는 환경을 구축한다.

용어 설명

Claudia

Cloud Code를 위한 오픈소스 GUI 애플리케이션으로, 커스텀 에이전트·세션 관리·대시보드를 제공한다.

Cloud Code

Anthropic의 Cloud Code CLI로 클라우드 기반 코드 실행 및 에이전트 관리를 지원한다.

custom agent

사용자가 시스템 프롬프트를 정의해 특정 작업(앱 생성, 코드 리뷰 등)을 자동화하는 에이전트이다.

sub agent

Code Review Agent 실행 시 생성되는 아키텍처·보안·테스트 전담 소형 에이전트다.

cloud.md

프로젝트 설정과 환경 구성을 저장하는 Cloud Code 전용 마크다운 형식 파일이다.

MCP integration

MCP(Multi-Cloud Provider)와 연동해 비용·리소스 사용 현황을 모니터링하는 기능이다.

Cloud Code 단독의 강력함과 생산성 10배 향상 효과를 설명하며 GUI 부재 문제를 제기한다. 이후 오픈소스 GUI인 Claudia의 필요성과 도입 배경을 간략히 안내한다.

[00:00] Claude Code는 애플리케이션 개발 생산성을 10배 향상시키는 강력한 도구지만, 개발자가 아닌 사람들이 사용할 수 있는 그래픽 사용자 인터페이스가 없다는 문제가 있습니다. 이 문제를 해결하기 위해 Claudia라는 오픈소스 프레임워크가 등장했습니다.

[00:18] Claudia는 Claude Code를 위한 강력한 GUI 앱으로, 커스텀 에이전트 생성, 인터랙티브 세션 실행, 안전한 백그라운드 에이전트 등의 기능을 제공합니다. 아름다운 대시보드를 통해 비용 모니터링, cloud.md 변경사항, MCP 통합 등 다양한 기능을 제공합니다.

Custom Agent 생성, Interactive Cloud Code 세션, 백그라운드 에이전트 실행, 비용 모니터링 대시보드, MCP 통합, cloud.md 관리 등 핵심 기능을 데모 화면으로 살펴본다.

[00:52] 완전 초보자라도 따라할 수 있도록 설치부터 설정까지 단계별로 안내하며, 모든 링크와 설치 단계는 설명란에 제공됩니다. 필수 프로그램 설치부터 메인 Claudia 설치, 그리고 Claude Code 에이전트 실행까지 전 과정을 다룹니다.

[01:17] Claudia는 GitHub에서 무료로 제공되며 현재 인기를 끌고 있습니다. 프로젝트와 세션 관리, 커스텀 에이전트 생성, 사용량 분석 대시보드, MCP 서버 관리, 타임라인과 체크포인트 기능을 통해 문제 발생 시 코드를 되돌릴 수 있습니다.

Rust, Bun, Git 등 필수 도구 설치를 위한 터미널 명령어를 복사·붙여넣기 방식으로 단계별 안내한다. Windows·Linux별 설치 옵션도 언급한다.

[01:45] 필수 도구 설치 과정을 시작합니다. 첫 번째로 Rust를 설치하기 위해 문서에서 명령어를 복사하고 터미널에 붙여넣어 실행합니다. 표준 설정으로 진행하여 모든 Rust 패키지를 설치합니다.

[02:07] 다음으로 bun과 git을 순서대로 설치합니다. Windows와 Linux 사용자는 해당 운영체제에 맞는 버전을 다운로드해야 합니다.

[02:29] Claude Code 설치를 위해 공식 사이트에서 NodeJS 18 이상을 먼저 설치한 후, 제공된 명령어를 사용하여 Claude Code를 설치합니다. 설치 후 'claude' 명령어를 실행하면 로그인이 필요하며, Claude 계정 또는 API 옵션을 선택할 수 있습니다.

NodeJS 18 이상 설치 후 Cloud Code CLI 명령어를 실행해 설치한다. 그다음 클라우드(Pro/Max) 계정 또는 API 키를 이용해 CLI 로그인 과정을 시연한다.

[03:01] Claude API 키를 생성하기 위해 console.anthropic.com으로 이동하여 인증 과정을 완료합니다.

[03:25] 운영체제별로 필요한 패키지를 설치하고, git clone을 통해 Claudia를 다운로드합니다.

GitHub에서 Claudia 저장소를 클론하고 bun install로 의존성 설치, bun run build로 애플리케이션을 빌드하는 과정을 상세히 설명한다.

[03:39] Claudia 폴더로 이동하여 bun install과 bun run build 명령어로 모든 패키지를 설치하고 빌드합니다.

빌드된 앱을 실행해 대시보드, 프로젝트·세션 관리 메뉴, 에이전트 관리 인터페이스 등 주요 UI 구성 요소를 둘러본다.

[04:15] Claudia 앱에서 CC 에이전트를 통해 커스텀 에이전트를 생성하고, HTML, JS, CSS를 하나의 파일로 만드는 시스템 프롬프트를 설정합니다.

Custom Agent를 생성하고 시스템 프롬프트에 HTML·JS·CSS 단일 파일 앱 생성 명령을 입력한다. 실행 경로를 지정해 자동 생성 과정을 확인한다.

[05:01] 앱 생성 에이전트를 실행하여 모던한 외관의 칼로리 추적 앱을 생성하고, 생성된 HTML 파일을 통해 완전한 칼로리 트래커 앱을 확인합니다.

자동으로 생성된 calorie-tracker.html 파일을 열어 음식 추가, 칼로리 계산, 삭제 기능을 실제로 체험하며 사용자 인터랙션을 시연한다.

[06:07] 칼로리 추적 앱의 기본 기능인 칼로리 계산과 삭제 기능을 시연하며, 총 900칼로리가 남았다는 상태를 보여줍니다.

Code Review Agent를 만들어 실행하면 아키텍처·보안·테스트 분석용 sub agent가 자동으로 생성되어 전체 코드베이스를 분석·보고서를 작성한다.

[06:18] 코드 리뷰 목적의 새로운 에이전트를 생성하기 위해 CC 에이전트에서 커스텀 에이전트를 만들고 '전체 코드베이스 개선사항 검토'라는 시스템 프롬프트를 설정합니다.

[06:35] 검토할 폴더를 선택하고 핵심 기능 검토 작업을 실행하면, 첫 번째 에이전트가 자동으로 초기화되어 아키텍처 분석, 보안 분석, 테스팅 및 품질 에이전트 등 전문화된 서브 에이전트들을 생성합니다.

[07:05] 각 에이전트는 특정 작업에 전문화되어 할 일 목록을 따라 진행하며, 백그라운드에서 실행하거나 나중에 검토할 수 있는 유연성을 제공합니다.

[07:28] 커스텀 에이전트 외에도 CC 프로젝트에서 직접 새로운 클라우드 코드 세션을 생성하여 더 범용적인 에이전트를 사용할 수 있으며, 애플리케이션을 직접 미리 볼 수 있습니다.

CC 프로젝트 메뉴에서 새 Cloud Code 세션을 생성하고 모델과 작업을 지정한다. 작성한 웹 애플리케이션을 URL로 바로 미리보는 과정을 소개한다.

[07:51] 코드 리뷰 에이전트가 모든 할 일 목록을 완료하고 검토해야 할 파일들의 상세한 리뷰 목록을 제공하여, 이제 추천사항을 개선하는 데 집중할 수 있습니다.

비용 절감 효과, 직관적 UI, MCP 통합 등 Claudia의 장점을 정리한다. 추가 관련 영상과 시청자 피드백 요청으로 마무리한다.

[08:06] Claude Pro나 Claude Max 계정을 직접 사용할 수 있어 비용을 절약하고, 아름다운 사용자 인터페이스로 세션 관리, 사용량 및 비용 확인, MCP 통합 등의 기능을 제공합니다.

[00:00] Claude Code 자체만으로도 강력하며

[00:03] 애플리케이션 개발 생산성을 10배 향상시킵니다

[00:05] 하지만 문제는 개발자가 아닌 사람들이

[00:08] 사용할 수 있는 그래픽 사용자 인터페이스가

[00:10] 없다는 것입니다

[00:13] 하지만 좋은 소식이 있습니다

[00:16] Claudia라는 오픈소스 프레임워크가 있습니다

[00:18] Claudia는 Claude Code를 위한 강력한 GUI 앱입니다

[00:21] 커스텀 에이전트를 만들고 관리할 수 있으며

[00:24] 인터랙티브 Claude Code 세션을 실행하고

[00:27] 안전한 백그라운드 에이전트와 더 많은 기능을 제공합니다

[00:30] Claudia는 커스텀 에이전트를 만들고

[00:33] 처음부터 애플리케이션을 생성하며

[00:36] 진행 상황과 코드를 확인할 수 있는 기능이 있습니다

[00:40] 그리고 diff, 즉 코드 변경 내역 목록도 볼 수 있습니다

[00:42] 아름다운 대시보드를 통해

[00:45] 비용 모니터링, cloud.md 변경사항,

[00:48] MCP 통합 등 다양한 기능을 제공합니다

[00:52] 설치부터 설정까지

[00:53] 여러분의 컴퓨터에서 직접 사용하는 방법을

[00:56] 단계별로 안내해드리겠습니다

[00:58] 완전 초보자라도

[00:59] 따라할 수 있을 것입니다

[01:01] 모든 링크와 설치 단계는

[01:03] 아래 설명란에 제공하겠습니다

[01:04] 필수 프로그램 설치부터

[01:07] 메인 Claudia 설치까지 진행하고

[01:10] Claudia 내에서 Claude Code 에이전트를 실행하는

[01:12] 과정을 보여드리겠습니다

[01:14] 시작해보겠습니다

[01:17] 좋은 소식은 Claude Code를 위한

[01:19] 사용자 인터페이스가 있고 무료로

[01:21] 사용할 수 있다는 것입니다

[01:24] GitHub에서 이용 가능하며 현재 인기를 끌고 있습니다

[01:27] 프로젝트와 세션 관리 기능이 있고

[01:29] 커스텀 에이전트 생성, 사용량 분석

[01:32] 대시보드, MCP 서버 관리

[01:35] 타임라인과 체크포인트 기능이 있어

[01:37] 문제가 생기면 코드를 되돌릴 수 있습니다

[01:39] 그리고 cloud.md 관리 기능도 있어

[01:41] 모든 설정을 저장할 수 있습니다

[01:43] 첫 번째 단계는 모든 필수 도구를 설치하는 것입니다

[01:45] 문서를 보면 필요한 도구들의 목록이 있습니다

[01:48] 첫 번째는 Rust입니다

[01:49] 여기서 명령어를 복사하면 됩니다

[01:51] 컴퓨터에서 터미널을 열고

[01:54] 명령어를 붙여넣고 엔터를 누르세요

[01:56] 지금 설치가 진행 중입니다

[01:59] 모든 Rust 패키지를 다시 설치하겠습니다

[02:01] 표준 설정으로 진행하려면 1번을 클릭하세요

[02:03] 설치가 완료되었습니다

[02:07] 다음으로 bun을 설치해야 합니다

[02:08] 명령어를 복사하고 터미널로 돌아가서

[02:11] 붙여넣고 엔터를 누르세요

[02:13] bun이 설치되었습니다

[02:14] 다음으로 git을 설치해야 합니다

[02:17] 명령어를 복사하고 터미널로 가서

[02:19] 설치하면 됩니다

[02:22] 설치가 완료되었습니다

[02:24] Windows의 경우 다른 옵션이 있어

[02:26] 해당 버전을 다운로드해야 합니다

[02:27] Linux도 마찬가지입니다

[02:29] 다음으로 Claude Code를 설치해야 합니다

[02:31] 공식 사이트가 여기 있습니다

[02:33] 여기서 NodeJS 18 이상을 설치해야 합니다

[02:35] 이 링크를 클릭하고 설치하세요

[02:39] 그 다음 이 명령어를 복사해서

[02:41] Claude Code를 설치하세요

[02:43] 터미널로 가서 엔터를 누르면

[02:45] 설치가 완료됩니다

[02:47] 여기서 claude를 입력하고 엔터를 누르면

[02:49] 로그인이 필요합니다

[02:52] 두 가지 옵션이 있습니다

[02:53] 하나는 Claude 계정을 사용하는 것으로

[02:55] 이미 프로 플랜이나 맥스 플랜이 있다면

[02:58] 직접 로그인할 수 있습니다. API 옵션도 있습니다

[03:01] 선택하고 이동하면 됩니다

[03:02] console.anthropic.com으로

[03:04] API 키를 생성하고 여기에 붙여넣으세요

[03:06] 제 경우에는 이것을 선택하겠습니다

[03:08] 엔터를 누르면 브라우저에서 인증하고

[03:11] 모든 준비가 완료됩니다

[03:14] 터미널에서 이렇게 보입니다

[03:16] 슬래시를 입력하고 exit를 눌러서

[03:19] 종료하겠습니다. 엔터를 누르면

[03:21] 종료되고 마지막 필수 패키지가 여기 있습니다

[03:25] Linux라면 이것을 실행하고

[03:27] Mac OS라면 이것을 복사하세요

[03:29] 저는 Mac OS를 사용하므로

[03:31] 이것을 복사해서 여기에 붙여넣겠습니다

[03:33] 마찬가지로 다음 설치 명령어도

[03:35] 여기에 붙여넣습니다

[03:37] 이제 모든 설치가 완료되었고

[03:39] 2단계로 메인 패키지를 설치합니다

[03:42] 같은 터미널로 돌아가서

[03:44] git clone과 claudia를 입력합니다

[03:47] 다음으로 Claudia 폴더로 이동합니다

[03:50] 여기서 bun install을 입력하고

[03:51] 엔터를 누르면 필요한 모든 패키지가 설치됩니다

[03:55] 다음으로 bun run을 실행하고

[03:57] 엔터를 누르면 이것이 Claudia 설치의

[04:00] 마지막 단계로 모든 파일을 조합하고

[04:04] 앱을 이렇게 열어줍니다

[04:06] 더블 클릭으로 열 수 있고

[04:08] 이 경로에도 애플리케이션이 있습니다

[04:11] 이것을 열어보면 Claudia가 나타납니다

[04:13] 마지막 단계로

[04:15] Claudia 안에서 클라우드 코드 에이전트를 실행합니다

[04:18] 커스텀 에이전트를 생성하겠습니다

[04:20] CC 에이전트로 가서 이 아이콘을 클릭해

[04:23] 커스텀 에이전트를 생성합니다

[04:26] 이미 준비된 에이전트가 있다면 가져올 수도 있지만

[04:30] 이번에는 처음부터

[04:31] 만들어보겠습니다. 이름을

[04:34] 앱 생성 에이전트로 지정하고

[04:36] 모델은 Claude Sonnet을 선택합니다

[04:39] Claude Haiku도 선택할 수 있습니다

[04:42] 시스템 프롬프트에는

[04:44] HTML, JS, CSS로 모든 것을 하나의 파일에

[04:47] 담은 애플리케이션을 만들라고 입력합니다

[04:49] 이것이 유일한 시스템 프롬프트입니다

[04:51] JavaScript를 사용한다면 여기에

[04:54] 명시하고 Python을 사용하거나

[04:56] 특정한 방식으로 구축하고 싶다면

[04:58] 여기 시스템 프롬프트에 명시할 수 있습니다

[05:01] 그 후 저장 아이콘을 클릭하면 에이전트가 생성됩니다

[05:04] 이제 실행 아이콘을 클릭해서

[05:06] 에이전트를 실행할 수 있습니다

[05:08] 이제 이 에이전트를 실행하거나

[05:10] 애플리케이션을 생성할 경로를

[05:12] 선택할 수 있습니다

[05:14] 이 폴더를 선택하고

[05:16] 작업을 지정하겠습니다

[05:19] 모던한 외관의 칼로리 추적 앱을

[05:21] 만들어달라고 하고 시작을 클릭합니다

[05:25] 그러면 자동으로 이 파일이 생성됩니다

[05:27] 칼로리 트래커 HTML입니다. 시스템 프롬프트를 따라

[05:31] HTML, JS, CSS로 전체 애플리케이션을

[05:33] 하나의 파일에 생성했습니다

[05:35] 여기서 언급된 모든 기능들을 볼 수 있습니다

[05:38] 이 파일을 열어보겠습니다

[05:40] 칼로리 트래커 앱이 열렸습니다

[05:43] 여기가 칼로리 트래커 앱입니다. 정말 훌륭하네요

[05:46] 총 2,000 칼로리 소비량과

[05:48] 남은 칼로리, 추가된 음식들이 표시됩니다

[05:52] 음식을 추가할 수 있습니다. 사과를

[05:55] 100 칼로리 1개 추가해보겠습니다

[05:58] 음식 추가를 클릭하면

[06:01] 칼로리와 함께 음식이 여기에 추가됩니다

[06:04] 다음으로 피자를 1,000 칼로리로 추가하고

[06:07] 총 900칼로리가 남았습니다. 이것이 바로

[06:10] 칼로리 추적 앱입니다. 그리고

[06:13] 필요하면 삭제할 수도 있습니다.

[06:15] 정말 훌륭하네요.

[06:18] 이제 코드 리뷰 목적으로

[06:20] 또 다른 에이전트를 만들어 보겠습니다.

[06:23] CC 에이전트를 클릭하고, 커스텀 에이전트를 생성하여

[06:26] 코드 리뷰 에이전트라고 이름을 지정합니다.

[06:28] 시스템 프롬프트에는 '전체 코드베이스를

[06:30] 개선사항을 위해 검토'라고 입력합니다.

[06:33] 저장 아이콘을 클릭합니다.

[06:35] 이제 실행을 클릭하고, 검토하고 싶은

[06:37] 폴더를 선택하여 열겠습니다.

[06:40] 작업은 핵심 기능을 검토하고 서브 에이전트를 실행하여

[06:43] 프로세스를 고수준으로 가속화하는 것입니다.

[06:46] 실행을 클릭합니다. 이렇게 하면

[06:48] 첫 번째 에이전트가 자동으로 초기화되고

[06:50] 파일들을 검토하며 전문화된 에이전트를 생성합니다.

[06:53] 아키텍처 분석 에이전트,

[06:55] 보안 분석 에이전트, 테스팅 및 품질 에이전트 등

[06:59] 여러 에이전트를 자동으로 생성하여

[07:01] 협업을 통해 작업을 완료할 수 있습니다.

[07:03] 이 기능이 정말 마음에 듭니다.

[07:05] 각 에이전트는 특정 작업에 전문화되어

[07:08] 작업을 수행합니다. 여기서 볼 수 있듯이

[07:11] 할 일 목록이 있고, 이 목록을 따라

[07:14] 진행하며 완료되면 완료 표시를 합니다.

[07:16] 백그라운드에서 실행하도록 유지할 수도 있습니다.

[07:18] 여기서 보시는 것처럼요.

[07:20] 나가서 나중에 검토할 수 있고

[07:22] 클릭하면 에이전트 프로세스 내부로 들어갈 수 있습니다.

[07:25] 특정 커스텀 에이전트를 사용하고 싶지 않다면

[07:28] CC 프로젝트로 직접 가서

[07:30] 새로운 클라우드 코드 세션을 생성할 수 있습니다.

[07:32] 사용하고 싶은 폴더를 선택하고

[07:34] 모델을 선택하여 작업을 제공합니다.

[07:37] 이렇게 하면 이 에이전트가 더 범용적이 되고

[07:39] 애플리케이션을 직접 미리 볼 수 있습니다.

[07:42] 이 애플리케이션에서도 말이죠.

[07:44] 정말 멋지네요.

[07:46] 미리 보기를 위해 URL을 입력하세요.

[07:47] 코드 리뷰 에이전트로 돌아가서

[07:48] 여기서 진행 상황을 확인할 수 있습니다.

[07:51] 모든 할 일 목록이 완료되었고

[07:53] 검토해야 할 파일들의 리뷰 목록을

[07:56] 상세하게 제공해 주고 있습니다.

[07:58] 이제 이 추천사항을 개선하는 데

[08:01] 집중할 수 있습니다. 한번 시도해보시고

[08:03] 아래 댓글로 어떻게 생각하시는지 알려주세요.

[08:06] 제가 이 기능에서 가장 좋아하는 점은

[08:07] Claude Pro나 Claude Max 계정을

[08:09] 이를 통해 직접 사용할 수 있다는 것입니다.

[08:11] 이렇게 하면 비용을 절약할 수 있습니다.

[08:15] 다양한 세션을 이해하는 데 사용할 수 있는

[08:17] 아름다운 사용자 인터페이스가 있고

[08:19] 총 사용량과 비용도 확인할 수 있습니다.

[08:20] MCP 통합 기능과 더 많은 기능들이 있습니다.

[08:24] 정말 흥미진진합니다.

[08:26] 클라우드 코드를 이미 좋아하신다면

[08:29] 클라우드 코드와 관련된

[08:30] 또 다른 기능에 대한 비디오도 만들었는데

[08:32] 꼭 시청해보시길 강력히 추천합니다.

[08:34] 정말 도움이 될 것입니다.

[08:36] 시청해보세요.