Claude Code Web-UI: 어디서든 Claude Code를 활용하는 최고의 웹 UI!

AICodeKing 구독자 71,200명

요약

이 영상에서는 Anthropic의 AI 코딩 CLI인 Claude Code를 웹 기반으로 편리하게 사용할 수 있게 해주는 Claude Code UI를 소개한다. 로컬이나 원격 서버(VPS)에 설치해 데스크톱·모바일 환경 모두에서 접속 가능하며, 채팅 인터페이스·파일 트리·라이브 편집·세션 관리·음성 인식 등 다양한 기능을 제공한다. 설치 방법과 주요 기능 설정 과정을 단계별로 안내하며, 실제 Minesweeper 게임 생성 예제를 통해 실전 사용법을 시연한다. 이를 통해 터미널에 갇히지 않은 직관적인 인터페이스로 AI 코딩 경험을 혁신할 수 있음을 보여준다.

주요 키워드

Claude Code UI Anthropic 웹 UI 반응형 인터페이스 세션 관리 음성 인식 syntНавhax highlighting VPS YOLO 모드 Ninja Chat

하이라이트

⚡️ 웹 기반 접근성: Claude Code UI는 데스크톱뿐만 아니라 모바일, 태블릿에서도 반응형 UI를 제공해 언제 어디서나 접속할 수 있다.
🔑 통합 채팅 인터페이스: 내장된 채팅 창을 통해 Claude Code 세션과 직관적으로 대화하며 코드 변경 사항을 실시간으로 반영할 수 있다.
🌟 라이브 파일 편집: 대화 중에 파일 트리에서 직접 파일을 선택해 문법 강조(syntax highlighting)와 함께 편집하고 저장할 수 있다.
🚀 세션 관리: 여러 프로젝트별 세션을 생성·재개하고, ‘@’ 기호를 사용해 특정 파일을 언급하며 후속 프롬프트를 전달할 수 있다.
📌 음성 인식 프롬프트: 음성 입력 기능으로 말한 내용을 자동으로 텍스트로 변환해 즉시 명령어로 활용할 수 있다.
💡 원격 호스팅: VPS에 Claude Code와 UI를 설치해 서버에서 호스팅하면, 외부 기기에서도 동일한 세션에 접근 가능하다.
⚙️ 다양한 설정 옵션: 테마 변경, YOLO 모드 활성화, 사용 도구 제한 등 세부 동작 방식을 취향에 맞게 조정할 수 있다.
🔍 Git 통합: UI 내에서 코드 커밋, 파일 변경 이력(diff) 확인 등을 지원해 터미널 없이도 버전 관리를 수행할 수 있다

용어 설명

Claude Code CLI

Anthropic에서 제공하는 AI 지원 코딩용 커맨드라인 인터페이스 도구

VPS

Virtual Private Server(가상 사설 서버), 원격 서버 환경에 직접 설치해 웹 서비스로 활용 가능

YOLO 모드

‘You Only Live Once’ 모드, 권한이나 도구 사용을 강화해 더 자유로운 코드 실행이 가능하도록 설정

syntax highlighting

코드 문법에 따라 색상을 달리해 가독성과 편집 편의성을 높이는 기능

session management

여러 프로젝트별 Claude Code 대화 세션을 생성·저장·재개하는 기능

diff

버전 관리 시 파일 간 변경 사항을 비교해 보여주는 화면

음성 인식 프롬프트

마이크 입력을 텍스트로 전환해 바로 AI에게 명령을 전달하는 기능

Ninja Chat

여러 AI 모델을 한 곳에서 비교·사용할 수 있는 유료 통합 AI 플랫폼

영상 시작 인사 후 기존 Claudia, Crystal IV 같은 데스크톱 기반 Claude Code 래퍼 한계(웹 미지원, 모바일 접근 불가)를 짚으며 새로운 웹 UI의 필요성을 소개한다.

[00:17] Claude Code UI의 장점을 설명합니다. 데스크톱과 모바일에서 반응형으로 작동하며, 내장 채팅 인터페이스, 대화형 파일 트리, 구문 강조, 라이브 편집 기능을 제공합니다.

데스크톱·모바일 반응형 인터페이스, 채팅 통합, 파일 트리 라이브 편집·문법 강조, 세션 재개·관리, 설정 옵션(테마·YOLO 모드·도구 허용) 등 핵심 기능을 상세히 설명한다.

[00:55] Claude Code UI의 핵심 기능을 상세히 설명합니다. Anthropic의 공식 CLI 기반으로 작동하며, 활성 프로젝트와 세션 관리, 대화 재개, 다중 세션 관리가 가능합니다.

VPS에 Claude Code와 UI 설치 후 외부 접속 방법, 로컬에서 호스팅해 내부 네트워크나 모바일로 공유하는 방법을 안내하며 활용 시나리오를 제시한다.

[02:06] VPS 서버 활용법과 로컬 사용 방법을 설명합니다. Claude Max/Pro 구독과 호환되며, 백엔드에서 Claude Code CLI를 사용하므로 먼저 CLI 구성이 필요합니다.

월 11달러로 GPT-4o, Claude 3.7, Gemini 2.0 등 주요 AI 모델을 제공하는 Ninja Chat 플랫폼을 소개하고, 쿠폰 코드와 기능(모델 비교, 마인드맵 생성)을 안내한다.

[03:02] 스폰서 Ninja Chat을 소개합니다. 월 11달러로 GPT40, Claude 3.7 Sonnet, Gemini 2.0 Flash 등 최고의 AI 모델들에 접근할 수 있는 올인원 플랫폼으로, AI 플레이그라운드에서 모델 간 응답 비교가 가능합니다.

[03:27] 마인드맵 생성기와 AI 플레이그라운드 기능 소개. 기본 플랜의 혜택과 할인 코드 안내.

[03:52] Claude Code Web UI 설치 방법: 로컬 복제, 의존성 설치, 환경 설정 파일 복사, npm으로 실행.

Git으로 로컬 클론→의존성 설치→환경 변수 파일 복사→npm rundev 실행 과정을 순차적으로 보여주며, 기본 포트(3009) 접속법을 설명한다.

[04:18] 웹 인터페이스 주요 기능: 좌측 세션 목록, 채팅 히스토리, 파일 언급 기능, 음성 입력 지원.

좌측 세션 목록·채팅 창·프롬프트 입력 상자·파일 멘션 기능·음성 입력 버튼 등 UI 요소와 동작 방식을 시연한다.

[05:13] 새 프로젝트 생성, 웹 터미널 기능, 파일 편집 및 저장, 소스 관리 및 커밋 기능 소개.

파일 에디터에서 코드 수정·저장, 소스 탭에서 커밋·diff 확인, 설정 탭에서 테마·권한·도구 활성화 등을 데모를 통해 보여준다.

[05:49] 설정 옵션: 테마 설정, yolo 모드, 도구 활성화/비활성화, 모바일 반응형 지원.

새 프로젝트 세션을 추가하고 Minesweeper(지뢰 찾기) 게임 생성을 요청한 뒤 Claude Code가 즉시 코드를 만들어내는 과정을 시연해 사용 편의성을 강조한다.

[06:33] 실제 사용 데모: 지뢰찾기 게임 생성 예시로 Claude Code 래퍼 기능 시연.

[07:09] 타 솔루션 대비 장점: Codecs, Jewels 대안으로 호스팅 가능, 다중 접근성, Claude Pro 호환.

웹 UI의 실용성을 다시 한번 요약하며 시청 소감 공유 요청, 구독·슈퍼땡스·채널 가입 유도 후 다음 영상 예고와 인사를 전한다.

타임라인 정보가 없습니다.

[00:00] [음악]

[00:03] [박수]

[00:04] 안녕하세요, 또 다른 영상에 오신 것을 환영합니다.

[00:08] 새로운 Claude Code 래퍼가 나왔는데,

[00:10] 제가 누구에게나 추천하는 최종 래퍼입니다.

[00:12] 이것은 단순히 Claude Code UI라고 불립니다.

[00:15] 저는 Claudia와 Crystal IV와 같은 것들을 다뤄본 적이 있는데,

[00:19] 이들은 Claude Code의 데스크톱 앱 래퍼를 목표로 하지만

[00:21] 데스크톱 기반이고 웹 기반이 아닙니다.

[00:24] 이는 Claude Code가 웹에서 접근할 수 없다는 의미입니다.

[00:27] 웹에서 접근할 수 없다는 의미죠.

[00:30] 따라서 데스크톱에 엄격하게 제한됩니다.

[00:33] 데스크톱에 엄격하게 제한됩니다.

[00:34] 서버에 호스트해서 어디서든 접근할 수 없고,

[00:36] 서버에 호스트해서 어디서든 접근할 수 없고,

[00:38] 어디서든 접근할 수 없습니다.

[00:41] 휴대폰에서 코드에 접근하는 데도 사용할 수 없어서

[00:43] 실망스러울 수 있습니다.

[00:47] 하지만 오늘의 래퍼는 마침내 제가 본 것 중 최고이며,

[00:49] 실제로 유용합니다.

[00:52] 저는 아마 이것을 많이 사용할 것 같습니다.

[00:55] 이 Claude Code UI가 하는 일은 꽤 간단합니다.

[00:59] Claude Code를 위한 데스크톱과 모바일 UI를 제공합니다.

[01:02] Claude Code는 Anthropic의 공식 CLI로

[01:05] AI 보조 코딩을 위한 것입니다.

[01:07] 로컬 또는 원격으로 사용할 수 있어

[01:10] Claude Code의 활성 프로젝트와 세션을 볼 수 있고

[01:12] Claude Code CLI에서 하는 것과 같은 방식으로

[01:15] 변경할 수 있습니다.

[01:17] 이것은 어디서든 작동하는 적절한 인터페이스를 제공합니다.

[01:20] 반응형이므로

[01:23] 데스크톱, 태블릿, 모바일에서 원활하게 작동합니다.

[01:26] 데스크톱, 태블릿, 모바일에서 원활하게 작동합니다.

[01:28] 또한 클라우드 코드와의 원활한 통신을 위한

[01:32] 내장 채팅 인터페이스가 있습니다.

[01:34] 클라우드 코드에 직접 접근할 수도 있습니다.

[01:37] 클라우드 코드에 직접 접근할 수도 있습니다.

[01:40] 그것과 함께,

[01:42] 구문 강조와 라이브 편집 기능이 있는

[01:44] 대화형 파일 트리가 있습니다.

[01:47] 대화형 파일 트리가 있습니다.

[01:49] 대화를 재개할 수도 있고,

[01:51] 여러 세션을 관리할 수도 있습니다.

[01:54] 여기에는 많은 설정이 있고

[01:57] 그에 따라 작동하도록 많은 옵션을 구성할 수 있습니다.

[01:59] 그에 따라 작동하도록 많은 옵션을 구성할 수 있습니다.

[02:01] 예를 들어, YOLO 모드와

[02:04] 그와 같은 다른 기능들도 있습니다.

[02:06] 여기서 언급되지 않은 또 다른 일은

[02:08] VPS를 가져와서 Claude Code를 설치하고

[02:11] 이 UI를 설치할 수 있다는 것입니다.

[02:14] 그러면 UI와 함께 Cloud Code를 쉽게 사용할 수 있고

[02:17] 이동 중일 때 같은 세션에

[02:20] 휴대폰이나 다른 컴퓨터에서 접근할 수 있습니다.

[02:22] 휴대폰이나 다른 컴퓨터에서 접근할 수 있습니다.

[02:24] 또는 로컬 사용의 경우, 쉽게 호스트해서

[02:28] 로컬로 공유할 수 있어

[02:30] 휴대폰에서 접근할 수 있게 해주는데,

[02:33] 이것도 훌륭할 것입니다.

[02:36] 필요하다면 Claude Max와 Pro 구독과도 작동하며

[02:39] 필요하다면 Claude Max와 Pro 구독과도 작동하며

[02:41] 그와 관련된 문제도 없습니다.

[02:43] 다만 먼저 Claude Code CLI를

[02:46] 구성해야 합니다.

[02:48] 백엔드에서 그것을 사용하기 때문입니다.

[02:51] 따라서 구성된 방식에 따라 그것을 사용할 것입니다.

[02:55] 이제 어떻게 사용할 수 있는지 보여드리고

[02:58] 멋진 것들도 해보겠습니다.

[03:00] 하지만 그 전에 Ninja Chat에 대해 말씀드리겠습니다.

[03:02] Ninja는 올인원 AI 플랫폼으로

[03:05] 월 11달러로 GPT40,

[03:08] Claude 3.7 Sonnet, Gemini 2.0 Flash 같은

[03:10] 최고의 AI 모델들에 접근할 수 있습니다.

[03:13] 한 곳에서 모든 것을 이용할 수 있습니다.

[03:17] 저는 빠른 연구를 위해 Gemini를 사용해왔는데,

[03:19] 정말 멋진 것은 AI 플레이그라운드인데

[03:21] 여기서 다른 모델들의 응답을

[03:23] 나란히 비교할 수 있습니다.

[03:25] 그들의 마인드맵

[03:27] 생성기는 복잡한 아이디어를 정리하는 데 정말 획기적인 도구입니다.

[03:30] 기본 플랜은 월 1,000개의 메시지, 30개의 이미지,

[03:32] 그리고 5개의 동영상을 제공하며, 더 필요하시면

[03:35] 더 높은 티어도 이용할 수 있습니다.

[03:37] 제 코드 king25를 사용하면 모든 플랜에서 25% 할인을 받을 수 있고,

[03:40] king40yearly를 사용하면 연간 구독에서 40% 할인을 받을 수 있습니다.

[03:44] 설명란의 링크를 확인해서 직접 사용해보세요.

[03:47] 이제 다시 영상으로 돌아가겠습니다.

[03:49] 우선 로컬에서 쉽게 복제할 수 있습니다.

[03:53] 그 다음 폴더로 이동해서 의존성을 설치하고,

[03:56] ENV 예시 파일을 env로 복사하세요.

[03:58] 실행할 포트에 대한 정보만 있고 다른 건 없습니다.

[04:01] 어쨌든 npm rundev로 실행하면 시작됩니다.

[04:04] 사용하려면 포트 3009로 이동해야 하고,

[04:06] 이런 인터페이스를 보게 됩니다.

[04:09] npm rundev로 실행하면 시작됩니다.

[04:12] 사용하려면 포트 3009로 이동해야 하고,

[04:16] 이런 인터페이스를 보게 됩니다.

[04:18] 이게 어떻게 생겼는지 보시죠.

[04:21] 왼쪽에는 최근 Claude Code 세션들이 모두 표시되는 것을 볼 수 있습니다.

[04:24] 어떤 것이든 클릭하면 여기에 채팅이 열립니다.

[04:26] 어떤 변경사항을 만들었는지 또는 Claude Code가 무엇을 했는지 볼 수 있고,

[04:29] 후속 프롬프트를 보내는 것도 가능합니다.

[04:31] 모든 것이 Claude Code의 래퍼이기 때문에

[04:34] Claude Code와 비슷하게 작동합니다.

[04:37] 그래서 정말 잘 작동합니다.

[04:39] Claude Code와 비슷하게 작동합니다.

[04:42] 그래서 정말 잘 작동합니다.

[04:44] 하단에 프롬프트 박스도 볼 수 있어서

[04:46] 원하는 것을 쉽게 입력할 수 있습니다.

[04:48] @ 기호를 누르면 파일을 언급할 수도 있어서

[04:51] 꽤 멋진 기능입니다.

[04:54] 또 다른 옵션으로 음성 입력도 가능합니다.

[04:57] 자동으로 음성을 텍스트로 변환해서

[05:00] 프롬프트로 사용할 수 있어서 정말 멋지네요.

[05:02] 확실히 멋진 기능입니다.

[05:04] 또한 새로운 프로젝트에서 새로운 세션을 시작할 수 있습니다.

[05:06] 추가 옵션을 클릭하고 프로젝트 경로를 입력하면 됩니다.

[05:09] 여기 또 다른 옵션이 있는데,

[05:11] 이것은 웹에서 Claude Code 터미널을 열어서

[05:13] 간단한 Claude Code 인터페이스를 사용할 수 있게 해줍니다.

[05:15] 이 기능도 정말 멋지고,

[05:19] 반응형이고 모든 게 잘 작동합니다.

[05:22] 파일 옵션도 있어서

[05:25] 여기서 코드를 편집하고 필요하면 저장할 수도 있습니다.

[05:27] 또 다른 기능으로는 소스 옵션이 있는데,

[05:30] 이 UI를 통해서도 변경사항을 커밋할 수 있습니다.

[05:33] 파일과 변경된 diff도 볼 수 있어서

[05:35] 정말 놀라운 기능입니다.

[05:38] 또 다른 기능으로는 설정 옵션이 있습니다.

[05:40] 설정에서는 테마 옵션과

[05:43] yolo 모드를 활성화하는 권한 설정도 있어서

[05:45] 이것도 멋진 기능입니다.

[05:49] Claude Code에서 사용하고 싶은 도구들을 활성화할 수 있고,

[05:52] 필요하면 도구를 비활성화할 수도 있습니다.

[05:54] 반응형이라서 모바일 기기에서도 잘 작동합니다.

[05:57] 이제 실제로 어떻게 작동하는지 보여드리겠습니다.

[06:00] 이것을 클릭해서 여기에 새 폴더를 추가해보겠습니다.

[06:03] 이제 간단한 지뢰찾기 게임을 만들어달라고 요청해보겠습니다.

[06:06] 보시다시피 Claude Code가 항상 하는 것처럼

[06:09] 지뢰찾기 게임을 만들어줄 것입니다.

[06:11] 정말 놀랍도록 좋고 매우 인상적입니다.

[06:13] 터미널이나 그런 것들을 복잡하게 사용하지 않고도

[06:16] Claude Code에 쉽게 접근할 수 있는 훌륭한 옵션입니다.

[06:18] 반응형이라서 모바일 기기에서도 사용할 수 있습니다.

[06:21] 실제로 이것은 Codecs나 Jewels 같은 것들의 대안으로,

[06:24] 호스팅해서 적절히 사용할 수 있습니다.

[06:27] 잘 작동하고 이것도 사용할 수 있습니다.

[06:30] Claudia나 Crystal 같은 것들과 비교했을 때

[06:33] 가장 실용적인 옵션입니다.

[06:36] 여러 곳에서 Claude Code에 접근할 수 있게 해주거든요.

[06:40] Claude Pro나 Mac 구독과도 함께 사용할 수 있어서

[06:43] 이것도 멋진 기능입니다.

[06:46] 전반적으로 정말 멋지네요.

[06:48] 아무튼 아래에 생각을 공유해주시고

[06:50] 채널을 구독해주세요.

[06:53] Superthanks 옵션을 통해 기부하거나

[06:56] 채널에 가입해서 혜택을 받을 수도 있습니다.

[06:58] 다음 영상에서 뵙겠습니다. 안녕히 계세요.

[07:01] [음악]

[07:04] 반응형이라서 모바일 기기에서도 사용할 수 있습니다.

[07:06] 실제로 이것은 Codecs나 Jewels 같은 것들의 대안으로,

[07:09] 호스팅해서 적절히 사용할 수 있습니다.

[07:11] 잘 작동하고 이것도 사용할 수 있습니다.

[07:14] Claudia나 Crystal 같은 것들과 비교했을 때

[07:18] 가장 실용적인 옵션입니다.

[07:21] 여러 곳에서 Claude Code에 접근할 수 있게 해주거든요.

[07:23] Claude Pro나 Mac 구독과도 함께 사용할 수 있어서

[07:25] 이것도 멋진 기능입니다.

[07:27] 전반적으로 정말 멋지네요.

[07:30] 아무튼 아래에 생각을 공유해주시고

[07:32] 채널을 구독해주세요.

[07:36] Superthanks 옵션을 통해 기부하거나

[07:38] 채널에 가입해서 혜택을 받을 수도 있습니다.

[07:41] 전반적으로 정말 멋지네요.

[07:45] 아무튼 아래에 생각을 공유해주시고

[07:47] 채널을 구독해주세요.

[07:49] Superthanks 옵션을 통해 기부하거나

[07:51] 채널에 가입해서 혜택을 받을 수도 있습니다.

[07:53] 다음 영상에서 뵙겠습니다. 안녕히 계세요.

[07:57] [음악]