Claude Code + CMUX: AI 코딩 터미널의 끝판왕

BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00브라우저를 열고 제어할 수 있는 기능을 코딩 에이전트에게 부여하는
00:00:04코딩 에이전트 전용 터미널, Cmux입니다. 다른 패널에 서브 에이전트를 생성하고 사용자 정의 알림을 보내는 등
00:00:09CLI와 소켓 API를 통해 훨씬 더 많은 작업을 수행할 수 있죠.
00:00:13하지만 Warp, Solotam, Dmux 같은 다른 터미널 에이전트들이 많은 상황에서
00:00:19Cmux만의 특별한 점은 무엇일까요?
00:00:20구독 버튼을 누르시고, 바로 시작해 보겠습니다.
00:00:24이름과 달리 Cmux는 tmux와는 관련이 없습니다. libghosty를 기반으로 구축된 네이티브 Mac 앱으로,
00:00:30웹킷 브라우저와 레이아웃을 위한 bon-split을 사용합니다. 그래서 탭과 패널 등을
00:00:36지원하는 것이죠.
00:00:37하지만 진짜 마법은 에이전트가 앱과 통신하는 방식에 있습니다.
00:00:41직접 보여드리겠습니다.
00:00:42Cmux를 설치하고 설정하면 탭을 지원하는 일반적인 형태의 터미널을
00:00:46볼 수 있습니다. 수직 또는 수평으로 화면 분할이 가능하며,
00:00:53원한다면 분할된 화면 안에 탭을 구성할 수도 있습니다.
00:00:55Cmux가 설치되면 Cmux CLI에도 접근할 수 있게 되는데, 이를 통해
00:01:00새 워크스페이스나 분할 패널을 생성하고, 사이드바에 로그나 진행 상황 같은 정보를 표시하며
00:01:06심지어 tmux 호환 명령어를 사용하는 등 다양한 옵션을 제공합니다.
00:01:11이 모든 것은 나중에 설명할 Cmux 유닉스 소켓 덕분입니다.
00:01:15이제 흥미로운 작업을 하나 해보죠.
00:01:16먼저 터미널을 정리하고 'claude code'를 실행하겠습니다. 사이드바 제목이 바뀐 것을 볼 수 있죠.
00:01:20토큰 낭비를 막기 위해 모델은 haiku로
00:01:25변경하겠습니다.
00:01:26그다음 Claude에게 Cmux CLI를 사용해 새 분할 패널에서 브라우저를 열고,
00:01:30google.com으로 이동해 입력창에 'hello world'를 입력하고 검색하라고 요청하겠습니다.
00:01:36엔터를 누르면 Claude가 작업을 시작합니다.
00:01:38여기서 Cmux 사용법을 배우고 있네요.
00:01:40구글 탭을 새로 열었습니다.
00:01:42검색을 수행하는지 지켜보죠.
00:01:44좋아요, 조금 고민하는 듯하더니
00:01:45'hello world' 검색을 마쳤습니다.
00:01:47검색 결과가 완벽하게 나왔네요.
00:01:49심지어 링크를 클릭하라고 시킬 수도 있습니다.
00:01:51예를 들어 여기 있는 IMDb 링크를 클릭하고 싶다면, “IMDb의 hello world 링크를
00:01:55클릭해줘”라고 말하면 됩니다.
00:01:57그러면 Claude가 바로 실행하죠.
00:01:59정말 멋진 점은 이 분할 패널 브라우저 안에서도 개발자 도구를
00:02:04사용할 수 있다는 것입니다. 작업 중인 페이지를 디버깅할 때 큰 도움이 되죠.
00:02:07이 모든 것은 샐즈(cells) 에이전트 브라우저의 API 설계와 유사한
00:02:11브라우저 명령어로 수행됩니다.
00:02:12이렇게 브라우저와 터미널을 나란히 보는 것의 장점은 에이전트가
00:02:16브라우저를 탐색하고 테스트한 결과를 보내면, 개발자가
00:02:20실시간으로 확인할 수 있다는 점입니다.
00:02:21다른 것도 시도해 봅시다.
00:02:22이 탭을 닫고 모든 정보를 정리하겠습니다.
00:02:25Claude에게 분할 패널에 자신의 인스턴스를 두 개 생성하라고 요청하겠습니다. 하나는
00:02:30프로젝트를 이해하고, 다른 하나는 이 프로젝트의 코드를 분석하기 위해서죠.
00:02:33작업이 끝나면 정보를 메인 Claude 인스턴스에 전달하고
00:02:38패널을 닫아야 합니다.
00:02:39엔터를 누르면 두 개의 분할 패널이 생기고, 양쪽에서 Claude가 실행됩니다.
00:02:45이제 지시 사항을 전달하는 모습을 볼 수 있는데, 실시간으로 보니 정말 신기하네요.
00:02:50선택되지 않은 패널은 약간 어두운데, 클릭하면
00:02:53밝게 만들 수 있습니다.
00:02:54시간이 좀 걸리니 이 부분은 영상에서 빠르게 넘기겠습니다.
00:02:57두 분할 패널의 작업이 끝나자 Claude가 자동으로 패널을 닫았습니다. 그리고
00:03:02여기 첫 번째 인스턴스와 아래 두 번째 인스턴스에서 정보를 가져왔네요. 정말 멋집니다.
00:03:07여러 서브 에이전트가 멈추지 않도록 권한을 확인하는 등
00:03:11활용 방법은 무궁무진합니다.
00:03:12하지만 방금 보여드린 데모의 한 가지 문제점은, 에이전트 중 하나가
00:03:16알림을 보내거나 제 도움이 필요할 때 제가 알기 쉽지 않다는 점이었습니다.
00:03:21다행히 Cmux는 이 점을 쉽게 해결해 줍니다.
00:03:23다시 해보죠.
00:03:24새 Claude code 세션에서 Cmux를 이용해 분할 패널에 새 Claude 인스턴스를
00:03:28생성하라는 프롬프트를 입력하겠습니다. 그리고 그 패널에서 이 프로젝트의
00:03:33코드 개선 사항을 분석하고 제안하라고 시키겠습니다.
00:03:36작업이 완료되면 Cmux를 통해 적절한 알림을 작성하고 'trigger-flash'를 실행해 제
00:03:40주의를 끌도록 하겠습니다.
00:03:41이 명령은 지정된 패널의 테두리를 파란색으로 깜빡이게 합니다.
00:03:45분석이 진행되는 동안 새 워크스페이스를 만들고
00:03:48'open-code'를 실행하겠습니다.
00:03:49Cmux의 장점은 CLI 형태이기 때문에 어떤 에이전트 도구와도 함께 실행될 수 있다는 것입니다.
00:03:54'open-code'를 열자마자 Cmux로부터 알림이 온 것을 확인할 수 있습니다.
00:03:58종 모양 아이콘을 클릭하면 병렬 분석이 시작되었다는 것을 알 수 있습니다. 아직 끝난 건 아니죠.
00:04:03하지만 알림을 클릭하면 정보가 들어있는 오른쪽 패널을 보여줍니다.
00:04:07제가 요청한 대로 정확히 수행되지 않아서 다시 실행하라고 지시하겠습니다.
00:04:10분석이 진행되는 동안 원래 하려던 작업인 'open-code'로 돌아가서
00:04:13Cmux CLI를 사용해 프로젝트 브랜치 이름을 추가하고
00:04:19브랜치 이름 옆에 적절한 아이콘을 넣어보겠습니다.
00:04:21엔터를 누르고 결과를 기다리면 다시 Cmux로부터 알림이 옵니다.
00:04:25병렬 분석이 시작되었다는 알림인데, 이번에는
00:04:29제대로 시작된 것 같네요.
00:04:30사이드바 내에서 메시지도 확인할 수 있습니다.
00:04:32이제 완료되었습니다.
00:04:33분할 패널을 닫고 사이드바 텍스트를 지우라고 요청하겠습니다.
00:04:36보시는 것처럼 적절한 아이콘과 함께 브랜치 이름이 추가되었습니다. 아까 제가
00:04:40SF 아이콘이라고 말했는데, 실제로는 SF 심볼을 의미한 거였거든요. 알아서 잘 이해했네요.
00:04:45그리고 분할 패널을 닫고 사이드바에 있던 텍스트도 제거했습니다.
00:04:49이 예시들은 아주 간단한 것들이었지만, 에이전트가 터미널을 제어할 때
00:04:52Cmux가 얼마나 강력한 능력을 발휘하는지 엿볼 수 있었기를 바랍니다.
00:04:57진행 표시줄 사용, 워크스페이스에 사용자 지정 색상 추가,
00:05:00에이전트를 이용한 탭 이름 변경, 명령 팔레트의 모든 옵션 표시 등
00:05:05멋진 기능들을 다 보여드리지도 못했습니다. Cmux가 사용자의 ghosty
00:05:10설정을 읽고 적용할 수 있다는 점도요.
00:05:11저는 어떤 훅이나 스킬 없이 Cmux를 사용했고, Claude code에서 샌드박스를 비활성화했습니다.
00:05:16그렇지 않으면 오류가 났을 테니까요. 하지만 제작자가 만든 Cmux용 core 및 browser
00:05:20스킬을 사용하는 것을 적극 추천합니다. 또한 Claude code 훅과 함께 설정하여 자동으로
00:05:26알림을 보내거나 커스텀 스크립트를 작성해 보세요.
00:05:29이 모든 것들이 Cmux를 훨씬 유용하게 만들지만, 스킬과 알림 설정을
00:05:33수동으로 복사해서 붙여넣는 대신
00:05:38처음부터 더 쉽게 설정할 수 있는 방법이 있었으면 좋겠습니다.
00:05:39어떤 에이전트 도구를 사용하는지 자동으로 감지해 올바른 디렉토리에 스킬을 적용해주는
00:05:43skills.sh처럼, Cmux도 전체 설정을 도와주는
00:05:48기능이 생기길 바랍니다.
00:05:49그래도 Cmux는 이미 훌륭한 도구이며, 설정 스크립트는 나중에 추가될 수 있을 겁니다.
00:05:53메모리와 성능에 유리한 네이티브 Mac 앱이라는 점이 정말 마음에 들고,
00:05:58CLI가 유닉스 소켓을 통해 JSON으로 앱과 통신한다는 점이
00:06:02통신을 빠르고 단순하게 만들어 줍니다.
00:06:04빠르고 단순한 것에 대해 말하자면, SQLite보다 138배 빠른
00:06:10Rust 기반 데이터베이스 StoolLab에 대해 알고 계신가요? Andris의
00:06:17이 영상에서 자세히 배우실 수 있습니다.

Key Takeaway

Cmux는 유닉스 소켓 기반의 강력한 CLI 제어 기능을 통해 AI 코딩 에이전트가 터미널과 브라우저를 넘나들며 복잡한 개발 작업을 자동화할 수 있게 돕는 혁신적인 도구입니다.

Highlights

Cmux는 libghosty 기반의 네이티브 Mac 앱으로, 코딩 에이전트 제어에 최적화된 터미널입니다.

CLI와 유닉스 소켓 API를 통해 에이전트가 브라우저 조작, 패널 생성, 알림 발송 등을 수행할 수 있습니다.

Claude Code와 같은 AI 에이전트와 결합하여 병렬 코드 분석 및 실시간 디버깅이 가능합니다.

사용자 정의 알림 및 테두리 깜빡임(trigger-flash) 기능을 통해 에이전트의 작업 상태를 시각적으로 확인합니다.

SQLite보다 138배 빠른 Rust 기반 데이터베이스인 StoolLab과의 연계 가능성을 시사합니다.

Timeline

Cmux 소개 및 주요 특징

Cmux는 브라우저 제어 권한을 코딩 에이전트에게 부여하는 전용 터미널로 소개됩니다. Warp나 Tmux 같은 기존 도구와 차별화되는 점은 libghosty를 기반으로 한 네이티브 Mac 앱이라는 점이며, 웹킷 브라우저와 bon-split 레이아웃을 사용합니다. 에이전트는 CLI와 소켓 API를 통해 서브 에이전트를 생성하거나 사용자 정의 알림을 보내는 등 고도화된 작업을 수행할 수 있습니다. 이 섹션은 Cmux가 단순한 터미널을 넘어 에이전트와의 통신 체계를 어떻게 구축했는지 그 마법 같은 작동 원리의 서두를 장식합니다.

기본 기능 및 인터페이스 조작

설치 후 Cmux의 실제 인터페이스와 CLI 활용법을 시연합니다. 사용자는 수직 또는 수평으로 화면을 분할할 수 있으며, 분할된 패널 내부에서도 탭을 구성할 수 있는 유연한 레이아웃을 제공합니다. Cmux CLI를 통해 새 워크스페이스를 생성하거나 사이드바에 로그 및 진행 상황을 표시하는 등의 명령이 가능합니다. 이러한 모든 유연한 조작은 Cmux 유닉스 소켓 덕분에 가능하며, 이는 기존 tmux 호환 명령어까지 지원하여 사용자 편의성을 높입니다.

Claude Code를 활용한 브라우저 제어 데모

Claude Code 에이전트가 Cmux 내에서 브라우저를 직접 조작하는 놀라운 과정을 보여줍니다. Claude에게 새 패널에서 구글을 열고 특정 키워드를 검색하거나 특정 링크를 클릭하도록 지시하면, 에이전트가 실시간으로 이를 수행합니다. 특히 분할 패널 브라우저 내에서 개발자 도구를 활용해 페이지를 디버깅할 수 있다는 점이 큰 장점으로 부각됩니다. 이는 에이전트가 테스트한 결과를 개발자가 옆에서 즉시 확인하며 협업할 수 있는 환경을 조성해 줍니다.

멀티 에이전트 병렬 작업 및 자동화

하나의 메인 에이전트가 두 개의 서브 에이전트 인스턴스를 생성하여 프로젝트 이해와 코드 분석을 동시에 수행하는 병렬 처리 기능을 시연합니다. 작업이 완료되면 각 서브 패널에서 수집된 정보가 메인 Claude 인스턴스로 전달되고 패널이 자동으로 닫히는 고도의 자동화 과정을 확인할 수 있습니다. 시각적으로는 활성화된 패널과 비활성화된 패널이 명암으로 구분되어 사용자가 진행 상황을 파악하기 쉽게 설계되었습니다. 이 기능은 복잡한 프로젝트의 다각도 분석 시 토큰 효율과 작업 속도를 비약적으로 높여줍니다.

알림 시스템과 실시간 프로젝트 개선

에이전트가 작업 완료나 도움 요청 시 사용자의 주의를 끌 수 있는 'trigger-flash' 알림 기능을 상세히 다룹니다. 사용자가 다른 워크스페이스에서 코딩 작업('open-code')을 하는 동안에도, 배경에서 분석을 마친 에이전트가 테두리를 파란색으로 깜빡이며 신호를 보냅니다. 또한 에이전트가 프로젝트 브랜치 이름을 자동으로 추가하고 적절한 SF 심볼 아이콘을 삽입하는 등 실제 개발 워크플로우를 개선하는 모습을 보여줍니다. 사용자의 모호한 지시(SF 아이콘)를 SF 심볼로 정확히 이해하고 수행하는 에이전트의 지능적 대응이 인상적입니다.

최적화 팁 및 결론

Cmux의 성능적 장점과 더 효과적인 사용을 위한 샌드박스 설정 및 스킬 적용 팁을 공유합니다. 제작자가 제공하는 전용 core 및 browser 스킬을 사용할 것과, 자동 설정을 돕는 스크립트의 필요성을 언급하며 향후 발전 방향을 제시합니다. Cmux는 유닉스 소켓을 통해 JSON으로 통신하므로 매우 빠르고 단순하며, 네이티브 앱으로서 메모리 효율이 뛰어나다는 점을 강조합니다. 마지막으로 Rust 기반의 초고속 데이터베이스 StoolLab에 대한 언급과 함께 영상을 마무리하며 고성능 도구들에 대한 관심을 독려합니다.

Community Posts

View all posts