[시즌 4] 나만의 에이전트 오피스 마을 바이브 코딩으로 만들기

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

나만의 에이전트 오피스 마을은 바이브 코딩으로 로컬 세션의 상태를 감지하고, 이를 캐릭터와 대화창으로 보여주는 웹 애플리케이션으로 만들 수 있다.

📌 핵심 요점

1. 가상 오피스의 기본 단위는 실행 중인 Claude Code·Codex 세션이다. 영상에서는 각 세션을 캐릭터 하나에 대응시켜 상태를 보여준다.
2. 처음부터 마을을 만들기보다 대기·작업·사용자 입력 대기를 구분하는 로컬 웹 모니터를 먼저 만든다. 이후 같은 정보에 게임 화면을 입힌다.
3. 시각적 요구사항은 구체적으로 전달한다. 작은 픽셀 마을, 64×64픽셀 캐릭터 기준, 상태별 애니메이션, 최근 메시지와 컨텍스트 사용량처럼 확인할 항목을 명시한다.
4. 마을 안에서 채팅을 보내고 다른 세션으로 요청을 전달하는 과정까지 시연한다. 다만 Codex는 첫 메시지 이후에야 감지되는 모습이 나오며, 작업 중인데 확인이 필요하다고 표시하는 오류도 발견된다.
5. 실제 운영을 결정하는 것은 폴더 안의 규칙과 매뉴얼이다. 발표자는 AGENTS.md를 회사 규칙, 스킬을 상세 매뉴얼에 비유하며, 오피스 화면 자체가 회사를 만들어 주지는 않는다고 강조한다.

🧩 배경과 문제 정의

여러 터미널에서 Claude Code와 Codex를 실행하면 각 세션의 상태를 따로 살펴보게 된다. 영상은 이 세션들을 로컬 웹 애플리케이션에서 감지하고, 캐릭터가 돌아다니는 작은 마을로 표현하는 과정을 다룬다.

발표자는 먼저 상태를 보여주는 기본 모니터를 만든 뒤 게임 형태의 화면과 대화 기능을 추가한다. 핵심 문제는 실행 중인 세션이 무엇을 하는지 읽고 표현하는 것이며, 마을의 외형은 그 위에 얹는 콘셉트다. 실제 운영 규칙과 매뉴얼을 구성하는 일도 화면 만들기와 함께 중요하다고 설명한다.

🕒 시간순 섹션별 상세정리

1. 작업 폴더와 도구 준비

• Claude Code를 업데이트하고 기존 작업 위치를 확인한 뒤, 새 가상 오피스 작업을 위해 실행 중인 도구를 종료한다. [00:38]
• 바탕화면에 마이 오피스 폴더를 만들고 두 터미널 모두 해당 위치로 이동한다. [01:08]
• 같은 폴더에서 Claude Code와 Codex를 각각 실행해 시연을 준비한다. [01:18]

2. 세션과 가상 오피스의 원리

• 실행한 도구를 컴퓨터에서 돌아가는 엔진에 비유하고, 창을 추가해 실행한 각각을 세션이라고 보여준다. [01:56]
• 세션의 대기·실행 상태를 읽고 각 세션에 캐릭터를 부여해 브라우저의 맵에서 보는 것이 가상 오피스라는 설명이다. [02:40]
• Claude Code만 구독하는 시청자도 따라올 수 있도록 제작은 하나의 도구로 시작하기로 한다. [02:59]

3. 최소 요구사항으로 첫 모니터 만들기

• 로컬에서 실행 중인 Claude Code·Codex 세션을 잡고 대기·작업·사용자 입력 대기를 확인하는 웹 애플리케이션을 요청한다. [04:00]
• 발표자는 가상 오피스의 기능을 세션 상태를 감지해 보여주는 것으로 설명하며, 외형을 꾸민다고 실제 회사가 생기지는 않는다고 드러낸다. [05:31]
• 생성된 서버를 열어 대기 상태와 최근 입력을 확인한다. 새 Codex는 처음에는 보이지 않다가 메시지를 입력하자 작업 상태로 나타난다. [06:50]

4. 게임형 마을의 화면과 정보 설계

• 바람의 나라를 분위기 참고 대상으로 삼아, 세션들이 마을을 돌아다니고 플레이어가 말을 걸어 상태를 확인하는 구상을 제시한다. [07:59]
• 64×64픽셀 기준의 캐릭터 표현과 이동·대기·작업·질문 대기를 구분할 애니메이션을 요청한다. [09:09]
• 작은 한적한 마을, 최근 사용자 메시지와 마지막 답변, 세션별 컨텍스트 사용량 또는 남은 양을 표시하도록 요구사항을 구체화한다. [09:47]

5. 운영 규칙과 매뉴얼의 역할

• 도구는 참고 게임의 분위기를 활용하되 에셋을 따라 하지 않고 픽셀 마을을 직접 그리겠다고 답하며, 마지막 답변과 컨텍스트 정보를 읽을 위치를 확인한다. [10:33]
• 세션 간 메시징을 감지할 수 있다면 캐릭터들이 서로 다가가 대화하는 것처럼 연출할 수도 있다고 보여준다. [11:29]
• 같은 작업 폴더의 AGENTS.md를 회사 규칙, 스킬을 매뉴얼에 비유한다. 오피스 외형보다 내부 세션을 움직이는 규칙과 원칙을 설정하는 일이 중요하다고 강조한다. [12:35]

6. 마을 완성과 상태 변화 확인

• 제작 완료 후 브라우저를 새로고침하자 마을 화면이 나타나고, 플레이어 이동과 세션 캐릭터의 활동을 확인한다. [13:04]
• 캐릭터에게 말을 걸어 최근 입력과 답변을 확인한다. 컨텍스트 정보도 살펴보지만 원래 도구의 수치와 정확하게 대조하지는 못한다. [13:29]
• 터미널에서 요청을 보내면 캐릭터가 작업하러 이동하는 모습을 본 뒤, 마을 화면에서도 직접 채팅을 보낼 수 있게 해 달라고 요청한다. [14:11]

7. 작업 표시와 컨텍스트 정보 살펴보기

• Codex에 그림을 요청하자 캐릭터가 작업 위치로 이동한다. 이 과정에서 확인이 필요하다는 표시가 나타나지만 발표자는 그 이유를 분명히 확인하지 못한다. [14:58]
• 생성된 그림을 살펴보고, 결과물을 웹 화면에서 바로 볼 수 있게 하는 확장 아이디어를 제시한다. [15:11]
• Claude의 컨텍스트 사용 비율 등을 확인하고, 부족한 정보는 추가하면 된다고 보여준다. 마을에서 채팅하는 기능은 계속 제작 중이다. [15:49]

8. 새 세션 감지와 마을 채팅 연결

• Claude 세션을 추가로 실행하자 새 캐릭터가 마을에 들어오는 것을 확인한다. [15:59]
• Codex를 하나 더 실행했을 때는 곧바로 나타나지 않는다. 인사 메시지를 한 번 보내자 새 캐릭터가 등장한다. [16:15]
• 대화창에서 채팅할 수 있게 됐다는 안내를 받고, 화면을 새로고침해 마을 안에서 요청을 보내는 시연을 시작한다. [16:23]

9. 메시지 전달과 이미지 생성 재지시

• 한 세션에 다른 Codex로 가서 그림을 요청하라고 지시한다. 요청을 받은 캐릭터가 이동하고 대상 세션이 작업하는 흐름을 보여준다. [16:51]
• 첫 그림 결과를 확인한 뒤 원하는 방식과 다르다고 판단하고, 이미지 생성 스킬을 사용하도록 다시 전달한다. [17:11]
• 재지시를 받은 세션이 다른 캐릭터에게 요청을 전달하고, 대상 캐릭터가 다시 작업하러 가는 모습을 확인한다. [17:17]

10. 상태 판정 버그와 결과물 표시 개선

• 실제로 일하고 있는데 확인을 요구하는 표시가 반복되자 발표자는 이를 버그로 판단한다. [17:26]
• Codex 상태를 잘못 판별하는 것 같다고 제작 도구에 알리고 수정을 요청한다. [17:37]
• PNG 결과를 대화창에서 바로 보여주는 기능과 세션을 내보내는 기능을 개선 아이디어로 제시한다. 이 기능들이 모두 완성됐다고 확인하지는 않는다. [18:06]

11. 마지막으로 정리하는 원리와 활용 범위

• 자신만의 에이전트 마을을 만들고 상호작용하는 과정을 돌아보며, 발표자는 이 시연의 이득을 귀여움과 재미로 표현한다. [18:28]
• 핵심은 캐릭터가 세션을 나타내며, 프로그램으로 그 세션들의 상태를 감지할 수 있다는 점이라고 다시 정리한다. [18:47]
• 반복해서 보는 터미널 화면을 재미있는 마을 화면으로 바꿔 즐겨 보라는 권유와 함께 영상을 마친다. [19:01]

🧾 결론

• 구현의 중심은 세션 감지, 상태 판별, 화면 표시다. 마을과 캐릭터는 이 정보를 표현하는 방식이다.
• 기본 모니터를 만든 뒤 디자인과 상호작용을 추가하고, 직접 사용하면서 오류와 부족한 기능을 수정하는 흐름을 보여준다.
• 완성된 화면에는 캐릭터 이동, 최근 대화, 컨텍스트 정보, 채팅 기능이 등장하지만 상태 판정과 일부 수치의 정확성은 추가 검증이 필요하다.
• 발표자가 마지막까지 강조하는 효용은 재미와 시각적 만족이다. 업무 운영의 실질은 규칙·스킬·작업 방식에 달려 있다.

📈 투자·시사 포인트

• 에이전트 도구를 살펴볼 때 화면의 완성도와 상태 감지의 정확성을 각각 확인필요가 있다. 영상에서도 귀여운 캐릭터 표현과 상태 오표시가 함께 나타난다.
• 여러 세션의 상태와 최근 대화를 한 화면에 모으는 인터페이스를 구현할 수 있음을 보여준다. 다만 시간 절감이나 생산성 향상은 영상에서 측정하지 않았다.
• 운영 체계를 구성하려면 시각적 꾸미기와 함께 AGENTS.md와 스킬의 내용을 설계해야 한다는 시사점이 있다.
• 이 시연만으로 관련 기업의 수익성이나 투자 가치를 판단할 근거는 제시되지 않는다.

⚠️ 불확실하거나 확인이 필요한 부분

• 세션 상태를 어떤 데이터와 판정 로직으로 읽는지 구체적인 코드는 제시되지 않는다. 프로세스와 세션에 대한 설명도 입문자를 위한 비유 중심이다.
• 컨텍스트 사용량은 화면에 표시되지만, 발표자는 중간 시연에서 원래 도구의 수치와 정확하게 대조하지 못했다고 말한다. 이후 표시되는 비율도 정확성이 검증된 수치로 단정하기 어렵다.
• Codex는 실행 직후에는 나타나지 않고 첫 메시지를 보낸 뒤 마을에 등장한다. 이것이 해당 구현의 감지 방식 때문인지 다른 원인인지는 확인되지 않는다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 별도 작업 폴더를 만들고, 모니터링할 Claude Code·Codex 세션의 작업 위치를 확인한다.
• 로컬 웹 화면에서 대기·작업·사용자 입력 대기를 구분하는 최소 모니터부터 만든다.
• 두 도구에서 실제 상태 변화를 일으켜 화면 표시와 대조하고, 새 세션이 언제 감지되는지 확인한다.
• 마을 크기, 캐릭터 픽셀 기준, 상태별 애니메이션, 최근 대화와 컨텍스트 표시 항목을 구체적으로 요청한다.

❓ 열린 질문

• 대기·작업·사용자 입력 대기를 안정적으로 구분하려면 각 도구에서 어떤 신호를 읽어야 하는가?
• Codex가 첫 메시지 이후에야 감지되는 현상과 확인 요청 오표시는 어떻게 수정할 수 있는가?
• 컨텍스트 사용량과 최근 메시지를 원래 세션의 정보와 얼마나 정확하게 일치시킬 수 있는가?