[00:00]
최근 우리는 AI 에이전트를 터미널에 직접 배포하여
[00:03]
개발 워크플로우를 향상시키는 CLI 도구들의 물결을 보았습니다.
[00:05]
구글의 새로운 오픈소스 AI 에이전트인 Gemini CLI부터
[00:07]
현재 가장 주요한 터미널 기반 AI 코딩 도구이자
[00:10]
솔직히 제가 다른 어떤 도구보다 추천하는
[00:12]
Claude Code까지 말이죠.
[00:14]
이전에 이 채널에서 Claude Code를 소개했는데
[00:17]
정말로 여러분의 개발 워크플로우를 혁신시킬 수 있습니다.
[00:19]
특히 SuperCloud라는 프레임워크와 함께 사용할 때 더욱 그렇습니다.
[00:21]
이 프레임워크는 MCP와의 통합, 새로운 도구들,
[00:23]
새로운 슬래시 명령어, 그리고 컨텍스트 엔지니어링과 같은
[00:26]
강력한 기능들을 추가합니다.
[00:28]
이는 Claude Code의 출력과 사용성을 크게 향상시킵니다.
[00:30]
하지만 오늘은 Claude Code와의 경험을
[00:32]
더욱 향상시킬 수 있는 무언가를 보여드리고 싶습니다.
[00:35]
이 새로운 CLI를 위한 완전히 새로운 데스크톱과 모바일 UI입니다.
[00:38]
맞습니다. Claude Code를 위한 새로운 완전한 웹 UI로
[00:40]
로컬 또는 원격으로 실행할 수 있으며
[00:42]
어디서든 적절한 인터페이스로 접근할 수 있습니다.
[00:45]
Claude Code UI를 소개하겠습니다.
[00:46]
Claude Code UI는 Claude Code CLI를 위한
[00:48]
웹과 모바일 친화적인 애플리케이션으로
[00:51]
모든 Claude Code 세션을 한 곳에서 보고 관리할 수 있게 해줍니다.
[00:55]
이동 중이든 책상에서든 관계없이
[00:57]
개발자 경험을 크게 향상시키는
[01:00]
아름답게 디자인된 직관적인 인터페이스입니다.
[01:02]
Claude Code UI를 통해
[01:05]
모든 세션을 쉽게 관리할 수 있습니다.
[01:08]
단일 인터페이스로 모든 다양한 파일을
[01:11]
관리할 수 있는 정말 멋진 UI를 가지고 있습니다.
[01:13]
이는 모든 세션이 이 UI를 통해 쉽게 접근 가능하다는 것을 의미하며
[01:16]
여기서 히스토리를 추적하고, 여러 세션을 관리하고,
[01:19]
심지어 여러 에이전트를 동시에 실행할 수도 있습니다.
[01:22]
이런 멋진 UI와
[01:23]
AI와 채팅할 수 있는 대화형 채팅 인터페이스가 있습니다.
[01:26]
웹 UI 내에서 실제로 볼 수 있는
[01:28]
통합 셸 터미널과 파일 탐색기도 있습니다.
[01:30]
이는 구문 강조와 실시간 편집 기능을 갖춘
[01:33]
대화형 파일 트리입니다.
[01:35]
이를 통해 이 멋진 인터페이스로
[01:37]
Claude Code와 함께 작업할 수 있는 많은 유연성을 제공합니다.
[01:40]
이것이 웹에서의 메인 인터페이스이고
[01:42]
이것이 모바일에서의 모습입니다.
[01:44]
이제 여러분, 설치는 정말 간단합니다.
[01:47]
최신 버전의 Node.js를 확인하고
[01:49]
Claude Code가 설치되어 있는지 확인하면 됩니다.
[01:51]
만약 설치되어 있지 않다면 매우 간단합니다.
[01:54]
터미널에서 실행할 수 있는 간단한 명령어입니다.
[01:56]
이제 저는 Windows를 사용하고 있으므로
[01:58]
WSL 같은 곳에서 열어보겠습니다.
[02:00]
그리고 터미널에 간단히 붙여넣기만 하면 됩니다.
[02:03]
오늘 영상을 시작하기 전에
[02:06]
오늘의 영상 스폰서인 Sentry를 소개하겠습니다.
[02:08]
Sentry는 최근 여러분의 코드베이스를 실제로 아는
[02:10]
완전히 새로운 AI 디버깅 에이전트인
[02:12]
Seir를 출시했습니다.
[02:14]
대부분의 도구들은 버그를 찾는 것을 도와주지만
[02:17]
Seir는 자동으로 수정해줍니다.
[02:18]
에러 설명부터 스택 트레이스,
[02:20]
스팬 트레이스, 그리고 전체 코드베이스까지
[02:22]
Sentry 내부의 모든 것을 가져옵니다.
[02:24]
터미널 내에서 실행할 수 있는
[02:26]
간단한 명령어입니다.
[02:29]
이제 WSL 같은 곳에서
[02:30]
열어보겠습니다.
[02:32]
그리고 터미널에 간단히 붙여넣을 수 있습니다.
[02:35]
오늘 영상을 시작하기 전에
[02:36]
오늘의 영상 스폰서인
[02:38]
Sentry를 소개하겠습니다.
[02:40]
Sentry는 최근 여러분의 코드베이스를 실제로 아는
[02:43]
완전히 새로운 AI 디버깅 에이전트인
[02:45]
Seir를 출시했습니다.
[02:48]
대부분의 도구들은 버그를 찾는 것을 도와주지만
[02:50]
Seir는 자동으로 수정해줍니다.
[02:53]
모든 것을 가져옵니다.
[02:55]
센트리 내부에서 오류 설명부터
[02:58]
스택 추적에서 스팬 추적까지, 그리고
[03:02]
전체 코드베이스까지 모든 것을 분석합니다. 작동 방식은
[03:04]
다음과 같습니다. 먼저 SER가 이슈를 스캔하고
[03:07]
즉시 수정할 수 있는 것들을 플래그로
[03:10]
표시합니다. 그다음 깊은 근본 원인
[03:12]
분석을 수행하고 단위 테스트와 함께
[03:15]
코드 수정을 생성합니다. 심지어 필요한 경우
[03:18]
여러 저장소에 걸쳐서 GitHub 풀
[03:20]
리퀘스트를 자동으로 열어줍니다. Seir는
[03:23]
상당한 시간을 절약해줍니다. 더 이상 스택 추적을
[03:25]
파헤치거나 문제가 어디서 발생했는지
[03:27]
추측할 필요가 없습니다. 거의 모든
[03:30]
언어나 프레임워크와 호환되며, 심지어
[03:32]
분산 시스템도 이해할 수 있습니다. Sir의
[03:35]
자동화는 완전히 커스터마이징 가능합니다.
[03:37]
원하는 제어 수준을 결정할 수 있습니다. 그리고
[03:40]
AI 이슈 요약과 같은 다른 센트리 AI 기능들로
[03:42]
더 빠른 우선순위 설정과
[03:45]
더 스마트한 수정이 가능합니다. Seir를
[03:48]
시도해보고 싶으신가요? 지금 바로 시작할 수 있습니다. 센트리의
[03:51]
Seir로 오류를 더 빠르고
[03:54]
자동으로 수정하세요. 아, 그리고 센트리
[03:57]
MCP도 확인해보세요. 바로 그곳에서 마법이
[04:00]
뒤에서 돌아가고 있습니다. 하지만 그 생각으로
[04:01]
다시 비디오로 돌아가보겠습니다. 그리고
[04:03]
간단히 작동 방식을 보여드리자면
[04:05]
WSL을 열고 이 명령어를 붙여넣으면
[04:07]
클라우드 코드를 설치할 수 있습니다. 그리고
[04:09]
간단히 클라우드 명령어를 입력하여
[04:11]
터미널 내에서 코딩 에이전트를 시작할 수
[04:13]
있습니다. 그러면 로그인을
[04:16]
요청할 것입니다. API 키로 로그인하거나
[04:18]
프로 플랜을 구독했다면
[04:20]
간단히 클라우드 계정으로 로그인하면
[04:23]
됩니다. 아, 죄송합니다. 말씀드리는 걸
[04:25]
깜빡했는데, 저장소를 클론하려면
[04:28]
Git도 필요합니다. Git을
[04:29]
설치한 후에 클라우드 코드의 GitHub
[04:31]
저장소로 다시 가보겠습니다. 이것은
[04:33]
아래 설명에 링크를 남겨둘
[04:35]
예정입니다. 그리고 저장소를 클론하기 위해
[04:37]
이 링크를 복사해야 합니다. 따라서
[04:38]
이 명령어를 복사하여 터미널에
[04:39]
붙여넣으세요. 그러면 이 저장소를
[04:42]
클론하기 시작할 것입니다. 그다음
[04:44]
클라우드 코드 UI 저장소로
[04:46]
이동하려면 간단히 cd 명령어를
[04:48]
붙여넣어 들어가면 됩니다. 이제
[04:49]
환경 변수를 구성해야 합니다. 따라서
[04:52]
여기 있는 이 명령어를 복사하고
[04:55]
터미널을 열어 붙여넣으세요. 그러면
[04:58]
env 파일로 이동하여
[05:00]
변수를 설정함으로써
[05:02]
구성 작업을 할 수 있습니다.
[05:04]
환경을 구성한 후에는
[05:06]
종속성을 설치하면 됩니다. 따라서
[05:09]
npm install 명령어를 실행하면
[05:12]
클라우드 코드 UI가 작동하는 데
[05:14]
필요한 모든 것을 설치하기
[05:16]
시작할 것입니다. 만약 WSL에서
[05:18]
설치하고 있다면 캐시나
[05:21]
심지어 Anthropic의 도움이
[05:22]
필요할 수도 있습니다. 올바른 경로를
[05:25]
구성하여 설치하도록 도와줄 수 있습니다.
[05:27]
실제로 설정하는 데 시간이 좀
[05:29]
걸렸습니다. 실제 Windows 명령 프롬프트를
[05:32]
사용하지 않고 WSL 서브시스템만
[05:35]
사용하도록 경로를 설정해야 했습니다.
[05:37]
작동하도록 만든 후에 이제
[05:39]
로컬 환경을 시작하고 있습니다.
[05:42]
[05:44]
[05:47]
[05:50]
[05:53]
호스트를 시작합니다. 여기서 보시다시피
[05:55]
Claude Code로 로그인하라는 메시지가 표시됩니다.
[05:56]
그리고 바로 이렇게 됩니다. 이제
[05:59]
Claude Code UI가 브라우저에서 완벽하게 작동합니다.
[06:01]
왼쪽 패널에서는
[06:04]
모든 프로젝트 디렉토리를 관리할 수 있습니다.
[06:05]
도구 설정에서는
[06:07]
외관을 변경할 수 있습니다.
[06:08]
권한 설정에서는
[06:10]
권한 프롬프트를 건너뛸 수 있습니다.
[06:12]
하지만 이것은 권장하지 않습니다.
[06:14]
그리고 허용된 도구를 활성화할 수 있습니다.
[06:16]
도구를 비활성화할 수도 있습니다.
[06:18]
이 모든 것을 실제 채팅 인터페이스에서 접근할 수 있습니다.
[06:23]
이제 모든 것을 저장한 후에
[06:25]
우리만의 폴더를 가져올 수 있습니다.
[06:27]
이를 위해 새 프로젝트를 생성하거나
[06:30]
경로를 설정하여 직접 가져올 수 있습니다.
[06:32]
새 디렉토리를 로드한 후에
[06:34]
새 세션을 생성할 수 있습니다.
[06:36]
여기서 Claude Code와 함께 작업할 수 있습니다.
[06:39]
모든 것을 할 수 있습니다.
[06:40]
디렉토리 내의 개별 파일을
[06:42]
참조할 수 있습니다.
[06:44]
터미널에서 파일을 여는 것보다
[06:46]
얼마나 쉬운지 보실 수 있습니다.
[06:49]
이 방법이 에이전트를 배포하여
[06:51]
다양한 참조점에서 작업하기 더 쉽습니다.
[06:53]
무작위 파일을 태그하고
[06:55]
이 파일이 무엇을 포함하는지
[06:57]
설명해 달라고 말할 수 있습니다.
[06:59]
그리고 보내면 Claude Code가
[07:03]
해당 작업을 실행하는 것을 볼 수 있습니다.
[07:07]
처리를 작업하고 그 파일에 대한
[07:09]
대화를 표시합니다.
[07:11]
그리고 이것이 법적 고지를 추적하는
[07:13]
캐시 파일이라고 응답하는 것을 볼 수 있습니다.
[07:16]
오늘의 메시지 등등 말입니다.
[07:18]
실제로 그 파일이 무엇인지 설명했습니다.
[07:21]
이제 할 수 있는 멋진 것은
[07:23]
셸을 열 수 있다는 것입니다.
[07:25]
여기서 이 모든 세션을
[07:27]
셸 내에서 계속할 수 있습니다.
[07:29]
터미널에 접근할 수 없는 것이 아닙니다.
[07:30]
이 셸 탭 내에서
[07:32]
터미널에서 구성하고 작업을 할 수 있습니다.
[07:34]
이 방법으로 모든 파일을 관리할 수 있습니다.
[07:36]
여기서 모든 프로젝트 파일을
[07:38]
파악할 수 있습니다.
[07:40]
이 내장 편집기로 모든 것을 볼 수 있습니다.
[07:42]
실제로 볼 수 있습니다.
[07:44]
실제 뷰를 변경할 수 있습니다.
[07:46]
다운로드도 할 수 있고
[07:49]
특정 편집 내용을 저장할 수 있습니다.
[07:52]
소스 제어도 있습니다.
[07:55]
여기서 Git과 함께 작업하지만
[07:56]
이 경우 현재 실패했습니다.
[07:59]
이 WSL 하위 시스템에서 제대로 설치하거나
[08:02]
초기화하지 않았기 때문입니다.
[08:04]
하지만 여기서 Git 소스 제어를
[08:06]
사용할 수 있습니다.
[08:08]
도구를 추가하고 싶다면 정말 쉽습니다.
[08:11]
작업하고 있는 특정 경로와 함께
[08:14]
사용하려는 모든 도구를 활성화하기만 하면 됩니다.
[08:16]
설정을 저장할 수 있습니다.
[08:18]
이제 할 수 있는 것은
[08:20]
웹 검색 같은 것을 사용할 수 있습니다.
[08:22]
뉴욕시의 현재 날씨를
[08:24]
알려달라고 말할 수 있습니다.
[08:26]
실제로 웹 검색을 사용할 수 있습니다.
[08:28]
뉴욕시의 현재 날씨를 알려달라고 말할 수 있습니다.
[08:31]
실제로 이것을 가지고 있었습니다.
[08:34]
다시 로드해야 했습니다. 그리고 지금 보시면
[08:36]
웹 검색 도구를 사용하고 있습니다.
[08:39]
이 경우에는 제가 요청한
[08:41]
프롬프트가 주어졌고
[08:43]
여기에 결과를 출력할 수 있습니다.
[08:45]
이것이 도구 결과이고
[08:47]
여기서 보시면
[08:49]
뉴욕시의 현재 날씨를 찾았습니다.
[08:51]
이런 도구들은 정말 훌륭하지만
[08:54]
클라우드 코드 UI 팀이
[08:56]
MCP 서버를 직접
[08:59]
이 UI 내에서 추가할 수 있는
[09:01]
기능을 구현해 주면 좋겠습니다.
[09:04]
특정 구성 요소를 구성하고
[09:05]
추가하는 것이 훨씬 쉬워져서
[09:08]
AI 에이전트를 향상시킬 수 있을 것입니다.
[09:10]
하지만 이건 제 개인적인 의견입니다.
[09:12]
설정에서 직접 활성화할 수 있는
[09:14]
이 모든 다양한 도구들이 여전히 놀랍다고 생각합니다.
[09:17]
하지만 여기에 MCP를 추가할 수 있다면
[09:20]
훨씬 더 좋을 것입니다.
[09:21]
이것이 기본적으로 웹 UI로
[09:24]
클라우드 코드를 사용하는 방법입니다.
[09:26]
모바일에서도 사용할 수 있습니다.
[09:28]
이것은 이 UI를 사용하는 데
[09:31]
많은 유연성을 제공하여
[09:33]
많은 경우에 도움이 되고
[09:35]
클라우드 코드를 더 쉽게
[09:36]
접근할 수 있게 해줍니다.
[09:38]
모든 링크를 아래 설명란에 남겨두겠습니다.
[09:40]
이것을 꼭 살펴보시기 바랍니다.
[09:42]
Windows에서 WSL로 설치하신다면
[09:44]
클라이언트를 사용해서 설치하시길
[09:46]
강력히 추천합니다.
[09:48]
클라이언트에게 저장소를 복제하고
[09:51]
WSL을 사용해서 클라우드 코드를
[09:54]
설치해 달라고 프롬프트를 주면
[09:56]
필요한 모든 것을 설치해 줄 것입니다.
[09:57]
API 키만 제공하면 되고
[09:59]
클라이언트로 그것도 구성할 수 있습니다.
[10:00]
기본적으로 이게 전부입니다.
[10:02]
오늘 영상을 즐기시고
[10:04]
어떤 가치를 얻으셨기를 바랍니다.
[10:06]
모든 링크를 아래 설명란에
[10:07]
남겨두겠습니다.
[10:08]
두 번째 채널을 구독하세요.
[10:10]
뉴스레터에 가입하시고
[10:11]
Discord에 참여하시고
[10:13]
Twitter에서 팔로우하세요.
[10:14]
마지막으로 구독하고
[10:16]
알림을 켜고
[10:17]
이 영상에 좋아요를 누르고
[10:19]
이전 영상들도 꼭 보세요.
[10:20]
정말 도움이 되는
[10:21]
많은 콘텐츠가 있습니다.
[10:23]
그런 생각으로
[10:24]
시청해 주셔서 정말 감사합니다.
[10:25]
멋진 하루 보내세요.
[10:26]
긍정적인 에너지를 퍼뜨리고
[10:28]
곧 다시 만나요.