Claude Code 작업 환경을 네 번 바꾼 이유: tmux에서 직접 만든 앱 Muster까지, 다음은 하네스의 시각화

Alacritty와 tmux에서 시작해 직접 만든 데스크탑 앱 Muster까지, Claude Code로 일하는 작업 환경이 바뀐 순서와 이유를 이야기한 영상이다. 이 글에는 바뀐 순서를 표로 정리하고, 영상 속 손그림에 나온 하네스 용어와 지금 기획 중인 다음 버전을 옮겼다.

핵심 요약

작업 환경은 네 번 바뀌었다. Alacritty와 tmux에서 Ghostty와 tmux로, 다시 Ghostty와 herdr로 옮겼고, 그다음 libghostty와 Swift, SwiftUI로 데스크탑 앱 Muster를 직접 만들었다. 지금은 Muster에 WebKit 웹뷰를 더한 통합 환경을 쓴다.
herdr로 옮긴 건 에이전트를 위해 만든 멀티플렉서라서다. tmux와 하는 일은 비슷하지만, herdr는 에이전트가 1등 시민이다.
WebKit을 넣은 건 HTML 리포트 때문이다. 문서를 거의 다 HTML로 뽑다 보니 Chrome에서 보기가 불편해졌다. 세션이 늘면 리포트도 그만큼 늘어나서, Claude Code 세션마다 맞는 웹 리포트가 옆에 뜨게 했다.
herdr 세션은 날짜별로 나눈다. 날짜로 끊지 않으니 "내일 해야지" 하고 미루게 됐고, Claude Code 세션 40~50개가 떠 있는 게 일상이 됐다. 그래서 날짜가 바뀌면 정리하고 새로 시작한다.
통합 환경은 작업 흐름을 보여 주지 못했다. 유튜브, 앱, 게임, 웹, 서류, 메일을 같은 화면 구성으로 하다 보니 조건 처리가 늘고, 작업마다 다른 워크플로우가 화면에 보이지 않았다.
다음 버전은 하네스의 시각화, 곧 도구별 맞춤 앱이다. 하네스는 쌓을수록 에이전트는 알고 사람 눈에는 안 보이는 Black Box가 되기 쉽다. 그래서 작업 유형마다 작업 순서를 탭으로 보여 주는 새 Muster를 기획하고 있다.

순서	작업 환경	바꾼 이유
1	Alacritty + tmux (에디터는 Neovim)	처음 쓰던 구성
2	Ghostty + tmux	AI를 많이 쓰게 되면서. Alacritty에 문제가 좀 있었던 걸로 기억한다
3	Ghostty + herdr	에이전트를 위해 만든 멀티플렉서
4	Muster (libghostty + Swift + SwiftUI + herdr)	직접 만든 데스크탑 앱
5	Muster 통합 환경 (+ WebKit)	세션마다 맞는 HTML 리포트를 옆에서 본다
다음	Muster 도구별 환경 (기획 중)	작업 유형마다 워크플로우가 화면에 보이게

이게 유튜브 워크플로우의 정답이라고 생각하지는 않는다. 내가 익숙하고 좋아하는 방식을 화면으로 옮기는 일에 가깝다. 유튜브 워크플로우 GUI만 해도 이번이 다섯 번째 시도이고, 앞선 실패에서 쌓인 "다음엔 이렇게 안 해야지"로 방향을 잡았다. 리뉴얼이 실패할지, 시간 낭비로 끝날지, 생각보다 좋을지는 아직 모른다. 목표는 분명하다. 에이전트는 더 잘 돌고, 나는 전체를 한눈에 본다.

정리만 필요하면 정리표로, 어떻게 흘러갔는지 궁금하면 영상 줄거리로.

정리표

영상 속 손그림 모션그래픽에 나온 말을 그대로 옮겼다.

1. 하네스를 만드는 목적

목적	뜻
Guardrails	검증, 훅으로 실수 막기
Automation	반복 작업 자동화
Context Engineering	skills, rules, docs

셋이 모이면 Agent-Ready Environment, 에이전트가 혼자서도 끝까지 해내는 환경이 된다.

2. 문제와 해법

구분	내용
문제	Black Box. 에이전트는 아는데, 사람 눈에는 안 보인다
해법	하네스의 시각화 = 도구별 맞춤 앱

3. 작업 유형

작업 유형	하는 일
유튜브	영상 기획부터 업로드까지
앱 개발	작은 유틸리티 앱
게임 개발	모바일 게임도 앱이지만 따로 나눈다
웹 개발	PG 심사를 통과해 결제까지 되는 서비스를 출시했다
서류	부가가치세 같은 세금 처리, 지원사업 신청
메일	협업 요청 같은 메일 관리

4. 유튜브 작업 순서 (= 탭)

이 순서를 늘 지켜야 하는 건 아니다. 다만 순서가 어느 정도 정해져 있어야 Claude Code나 Codex 같은 AI에게 맡길 수 있다. 순서가 없으면 빠지는 단계가 생기고, 나중에 자꾸 고치게 된다. 새 Muster에서는 이 순서가 그대로 탭이 된다.

1. 기획
2. PoC
3. 촬영
4. 대본
5. 영상 조립
6. 썸네일과 제목
7. 업로드

영상 줄거리, 짧게

tmux에서 herdr까지

처음에는 Alacritty 터미널에 tmux, 에디터는 Neovim을 썼다. AI를 쓰는 일이 많아지면서 Ghostty로 갈아탔다. Ghostty와 AI가 무슨 상관이냐 싶을 텐데, 솔직히 정확히 기억나지 않는다. Alacritty에서 문제가 좀 있어서 넘어간 걸로 기억한다.

tmux는 한동안 계속 썼고, 그러다 herdr로 바꿨다. 둘은 비슷하지만 herdr는 처음부터 에이전트를 위해 만든 멀티플렉서다. 에이전트가 1등 시민이다.

직접 만든 앱, Muster

Muster 구성. Ghostty가 라이브러리로 제공하는 libghostty로 터미널을 넣고, 그 안에서 herdr가 돈다. 바깥은 Swift와 SwiftUI로 만든 데스크탑 앱이다

그다음에 지금 쓰는 데스크탑 앱을 혼자 만들었다. 이름은 Muster다. 이름을 짓다 보니 이렇게 됐고 특별한 이유는 없다.

터미널은 libghostty로 넣었다. Ghostty가 라이브러리 형태로 제공하는 것으로, 자기 데스크탑 앱 안에 Ghostty 터미널을 넣어 쓸 수 있게 해 준다. 앱은 Swift와 SwiftUI로 만들었고, libghostty 터미널 안에서는 herdr를 쓴다.

통합 환경: 세션마다 맞는 웹 리포트

조금 더 고치면서 통합 환경이라는 이름을 붙이고 WebKit을 넣었다. 문서를 거의 다 HTML 파일로 뽑고 있는데, 이걸 Chrome에서 보는 게 불편해지기 시작했다. 게다가 Claude Code 세션마다 맞는 웹페이지가 다르다. 세션마다 결과를 리포트로 만들면 세션이 늘어나는 만큼 웹페이지도 늘어난다. 세션과 웹페이지를 짝짓는 데는 Claude Mods를 썼다.

화면은 세 부분으로 나뉜다. 가운데가 libghostty 터미널이고 그 안에서 herdr가 돈다. 오른쪽은 WebKit 웹뷰다. 글자 크기를 바꿀 수 있고, Chrome처럼 웹페이지마다 탭으로 열고 핀으로 고정할 수 있다. 위쪽에는 부가 기능을 버튼으로 달았고, 왼쪽에는 날짜별 herdr 세션이 있다.

herdr 세션 하나에 날짜 하나

날짜마다 herdr 세션을 하나씩 만든다. 10-18, 10-19, 10-20 세션 가운데 오늘은 10-20이다

왼쪽 목록의 10-20은 10월 20일의 herdr 세션이라는 뜻이다. 날짜로 나누지 않으니 작업이 정리되지 않았다. "내일 해야지" 하고 계속 미루다 보니 Claude Code 세션이 40, 50개씩 떠 있는 게 너무 흔한 일이 됐다. 그래서 날짜가 지나면 다 종료하고 새로 시작하기로 했다.

터미널에 그냥 herdr라고 치면 뜨는 기본 세션은 따로 남겨 뒀다. 날짜와 상관없이 이야기해야 할 때도 있어서다.

통합 환경의 한계

유튜브, 앱 개발, 게임 개발, 웹 개발, 서류, 메일이 모두 통합 환경 하나로 들어간다. 안에서는 if 유튜브, else if 게임 같은 조건 처리가 늘고, 사람에게는 워크플로우가 안 보인다

이 구성으로 쓰면서 사용성도 괜찮았다. 그러다 해외 유튜버의 작업 환경을 우연히 보고 또 생각이 하나 떠올랐다. 도구별 환경이다.

통합 환경은 무슨 작업을 하든 구성이 같다. 오른쪽에 WebKit, 가운데에 터미널, 왼쪽에 세션과 에이전트 목록이 있다. 하지만 내가 하는 작업은 크게 유튜브, 앱 개발, 게임 개발, 웹 개발, 서류, 메일로 나뉜다. 작업 유형마다 조금씩 다른데 같은 환경으로 하다 보니 자꾸 조건 처리를 해야 했고, 그 작업의 워크플로우가 화면에서 보이지 않았다.

하네스를 쌓을수록 안 보인다

하네스를 만드는 목적. Guardrails(검증, 훅으로 실수 막기), Automation(반복 작업 자동화), Context Engineering(skills, rules, docs)이 모여 Agent-Ready Environment, 에이전트가 혼자서도 끝까지 해내는 환경이 된다

하네스를 만드는 목적은 결국 셋이다. 실수를 줄이고, 작업을 더 빨리 처리하고, 작업에 대한 지식을 심어 둔다. 그렇게 내 개발 환경을 에이전트가 잘 돌릴 수 있는 환경으로 만든다.

Black Box. 에이전트는 하네스를 알고 쓰지만, 사람 눈에는 안 보인다

문제는 그게 눈에 안 보인다는 점이다. SKILL.md로 된 스킬을 아무리 많이 설치해 둬도, 이것저것 하다 보면 어느 순간 까먹는다. 눈에 보여야 익숙해지고 쉬워진다. 가려진 채로 두면 시스템이 고도화될수록 관리하기 어려워진다.

하네스의 시각화 = 도구별 맞춤 앱

하네스의 시각화는 도구별 맞춤 앱이다. 유튜브, 게임, 웹마다 따로 화면을 둔다

그래서 하네스를 시각화하는 방법이 도구별 맞춤 앱을 만드는 것이라고 생각했다. 하네스의 시각화는 임시로 붙인 이름이다.

새 Muster는 아직 기획 단계다. 기획이 다 끝난 것도 아니고, UI를 어떻게 맞출지 계속 이야기하는 중이다. 2D 게임, 3D 게임, 유튜브, 웹 개발, 앱, 서류, 도구, 공통처럼 작업 유형별로 탭이 나뉜다. 3D 게임에 들어가면 3D 게임의 작업 단계가 다시 탭으로 보인다. 화면마다 터미널이 따로 붙어 있다.

작업 순서가 곧 탭

유튜브 작업 순서. 기획, PoC, 촬영, 대본, 영상 조립, 썸네일과 제목, 업로드가 그대로 탭이 된다

유튜브라면 기획부터 PoC, 실제 촬영, 대본 수정, 영상 조립, 썸네일과 제목 선택, 업로드까지 순서가 있다. 이 순서가 있어야 AI에게 일을 맡길 수 있고, 없으면 빠지는 단계가 생긴다.

그래서 작업 순서대로 탭을 만든다. 결국 내 하네스를 시각화하는 과정이다. 기획하면서도 엉뚱한 데 시간을 쓰는 건 아닌가 고민했지만, 만들고 싶은 마음을 도저히 참기 어려웠다.

다섯 번째 GUI

유튜브 워크플로우 GUI. 1번째부터 4번째까지는 실패했고, 실패마다 쌓인 이건 안 하기 목록이 지금의 5번째 방향을 잡았다

대단한 걸 발표하려는 건 아니다. 마케팅이나 게임 개발을 하는 다른 유튜브 채널을 보면, 자기만의 워크플로우를 자기가 쓰는 도구에 녹여 둔 경우가 많았다. 처음 만들 때는 시간이 많이 들고 실패도 많이 한다.

유튜브 워크플로우 GUI를 만드는 것도 이번이 다섯 번째쯤이다. 앞에서 엄청나게 실패했다. 실패하면서 "다음에는 이렇게 하지 말아야지"가 많이 쌓였고, 그 덕에 방향이 어느 정도 잡혔다. 유튜브 워크플로우의 정답이라기보다, 내가 익숙하고 좋아하는 방식이 이 화면으로 구현된다고 보면 된다.

시각	내용
0:00	Intro
0:17	작업 환경 히스토리
1:16	Muster 앱을 만들다
1:54	통합 환경과 WebKit
2:36	Muster 화면 구성
3:16	날짜별 herdr 세션
4:16	도구별 환경 아이디어
6:22	하네스의 시각화
7:23	새 Muster 기획 화면
8:00	작업 순서와 AI
9:15	다섯 번째 GUI
10:16	리뉴얼의 목표
11:13	Muster 부가 기능

글은 영상 자막에서 옮겼고, 그림은 영상에 들어간 손그림 모션그래픽에서 뽑았다. 모션그래픽은 Claude Code로 Remotion 코드를 짜서 만들었다.

영상에 나온 도구: Ghostty (libghostty), herdr, tmux, Alacritty, Claude Code

같이 보면 좋은 글: 요즘 Claude Code, Codex 사용 근황 (Muster를 처음 소개한 글), herdr 기본 키맵 치트시트, 하네스 with 클로드 코드

하네스 엔지니어링을 다룬 책: 요즘 바이브 코딩 하네스 with 클로드 코드 (골든래빗), 예스24, 교보문고