Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
여러 코딩 에이전트(Codex, Claude 등)가 각기 다른 인터페이스와 방언을 사용해 개발자에게 불편함을 줍니다. AgentWebUI는 이러한 분산된 에이전트들을 하나의 웹 인터페이스로 통합하여, 사용자가 어떤 에이전트를 쓰든 일관되고 효율적인 작업 환경을 제공합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기A Hackers Hostel story: submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady
새벽 1시, 방 구석에 놓인 작은 Linux 박스 위에서 세 개의 코딩 에이전트가 돌아가고 있다. Codex는 하나의 tmux 패널(pane)에서 무언가를 리팩토링하고 있다. Claude는 다른 곳에서 여전히 '생각 중'이며, 그것도 '보통 노력' 수준이다. Gemini CLI는 내가 열어둔 터미널 창에서 파일 쓰기를 승인해 주길 20분째 기다리고 있다.
나는 침대에 누워 노트북을 덮었다. 이 에이전트들이 무슨 작업을 하고 있는지 확인하려면, SSH로 다시 접속해서 패널들을 찾아다녀야만 한다.
이것이 CLI(Command Line Interface) 에이전트에 대해 아무도 말해주지 않는 부분이다: 이들은 정말 뛰어나지만, 터미널 안에 존재한다. 각각은 고유의 슬래시 명령어와 승인 프롬프트, 그리고 자신이 정의하는 'diff'(변경 사항 비교) 방식(보통 읽을 수 없을 정도로 빠르게 스크롤되는 텍스트 벽)을 가지고 있다. 내 세션들은 패널, 탭, 그리고 내가 그런 사람이라서 두 대의 기기와 두 개의 계정에 걸쳐 흩어져 있다. 나의 근육 기억은 이혼 신청을 했고 좋은 키보드를 요구하고 있다.
Hackers Hostel에 있는 우리 중 일부는 그룹 채팅방을 공유하는데, 그 내용은 대략 40%가 밈(meme)과 내용이 가려진 글이고, 나머지 60%가 도구(tooling)에 대한 불만으로 채워져 있다. 한 주 동안의 불만은 항상 같았다: 모든 에이전트가 자신만의 방언을 사용한다는 것이다. 새로운 명령어, 새로운 프롬프트, 코드를 어떻게 변경했는지 보여주는 새로운 방식이 생겨나고, 시작된 터미널에 붙어 있지 않으면 그 어떤 것도 확인할 방법이 없었다.
빌더(개발자) 입장에서 보면 상황은 더 심각하다. 모든 에이전트 팀들이 똑같은 대시보드를 만들게 된다: 채팅 패널, 메시지 목록, 모델 드롭다운 메뉴, 작은 로딩 애니메이션, 그리고 전체 git 히스토리를 다시 작성하기 전에 멈추는 버튼까지. 우리들 사이에서는, 우리가 인정하고 싶지 않은 것보다 더 많이 이 정확한 대시보드를 만들어왔다. 그중 한 명은 세 가지 다른 JavaScript 프레임워크로 그것을 만들었다. 다들 알잖아: “아, 이건 저것보다 약간 더 빠르거든...” 친구야, 분야를 하나 정해라.
그러자 누군가(이름은 밝히지 않았지만, 무엇을 했는지는 알고 있다)가 "왜 모든 에이전트마다 새 얼굴을 갖나요? 그냥 모두 같은 걸로 해주세요."라고 타이핑했다.
채팅방은 약 4초 동안 조용해졌다. 그러자 모두가 한꺼번에 타이핑하기 시작했다.
이것이 단순한 그룹 채팅 주제를 넘어선 이유는 타이밍 때문이었다. 에이전트들이 마침내 공유 프로토콜(ACP, 아래에서 더 자세히 설명)로 말하기 시작했고, 이는 하나의 인터페이스가 각 에이전트마다 맞춤 통합을 필요로 하는 대신 모두와 실제로 대화할 수 있음을 의미했다.
그 메시지는 최초의 AgentWebUI로 발전했다. 즉, Claude Code, Codex, Gemini CLI 및 OpenCode 같은 CLI 코딩 에이전트뿐만 아니라 ACP를 사용하는 모든 것을 위한 단일 웹 인터페이스였다. 사용자가 에이전트를 선택하면, 인터페이스는 변하지 않는다. 당신의 두뇌는 자신만의 단축키를 유지할 수 있다.
그러다 점점 커졌다. 기능을 추가했고, 더 많은 기능들을 흡수했다. 마치 충전기를 계속 던져 넣기만 하고 절대 빼지 않아 배낭이 무거워지는 것처럼 무거워졌다. 불쾌한 표현은 아니지만, 그 사람들은 사이코패스들이다.
그래서 우리는 거대한 버전에 새로운 이름인 AgentWebUI Pro를 붙여주고, 그것이 성장해 온 '통제실' 역할을 유지하도록 했다. 그리고 해커토버페스트 3주차에는 스스로 제약을 걸었다. 이 주에 AgentWebUI를 처음부터 다시 구축하는 것, 가장 작으면서도 기능을 수행할 수 있는 형태로 만드는 것이 목표였다. 단 하나의 의존성. 빌드 단계 없음. 앉은 자리에서 읽을 수 있는 코드베이스여야 했다. 이는 Pro의 아이디어와 교훈을 가져오며, 현재 AgentWebUI라는 이름을 계승하는 버전이다.
전체 디자인 목표는 포스트잇 한 장에 담길 수 있다:
설치한다. 브라우저를 연다. 에이전트와 대화한다. 만약 이 과정이 토스트를 만드는 것보다 더 많은 단계를 필요로 한다면, 우리가 실패한 것이다.
설정 방법 (설치 지침 읽는 것을 싫어하는 사람들을 위해):
git clone https://github.com/HackersHostel/AgentWebUI.git
cd AgentWebUI
cp .env.example .env # 모델과 에이전트를 채워 넣으세요
...
이것이 전체 온보딩 과정입니다. 계정 생성도 없고, 설정 마법사(setup wizard)도 없으며, 12페이지짜리 위키 문서도 없습니다. 또한 '먼저 이 CLI를 설치하려면 우리의 다른 CLI를 먼저 설치하세요' 같은 절차도 필요하지 않습니다. 모든 것이 .env 파일에 담겨 있습니다. 제가 하는 것처럼 홈랩 환경의 컴퓨터나 VPS(가상 사설 서버)에서 실행하는 것도 가능합니다. HTTPS를 위해 Caddy와 함께 systemd 서비스로 설정해 주는 설치 스크립트도 있습니다. 클론하기 전에 한번 테스트해 보고 싶으신가요? 라이브 데모가 여기 있습니다: agentwebui.hackershostel.com
기본적으로는 기대했던 것을 모두 얻게 됩니다:
얻지 못하는 것:
세 가지 자바스크립트 프레임워크에 대해 기억하시나요? 웹 클라이언트는 이들 중 어느 것도 사용하지 않습니다. 빌드 단계(build step)가 없는 Preact를 htm을 통해 사용합니다. 번들러 설정도, 자체적인 날씨 시스템을 가진 node_modules 폴더도 없습니다. 파일을 변경하고 새로고침하면 바로 나타납니다.
서버는 약 3,000줄의 Python으로 작성되었으며 정확히 하나의 종속성(aiohttp)만을 사용합니다. 또한 메모리 사용량은 약 40MB 수준입니다. 일반적인 브라우저 탭 하나만 해도 로딩 스켈레톤을 보여주는 것만으로도 이보다 많은 메모리를 소모하는 경우가 많습니다.
에이전트마다 하나의 인터페이스가 작동하게 만드는 핵심은 [Agent Client Protocol]입니다. 이를 코딩 에이전트를 위한 LSP(Language Server Protocol)라고 생각할 수 있습니다. Zed와 Google이 이 프로토콜을 시작한 이유는 모든 새로운 에이전트-플러스-에디터 조합이 자체적인 커스텀 통합 기능을 필요로 했기 때문이며, 이는 우리가 불평하던 바로 그 골칫거리입니다. 다만 자금 지원만 더 좋아진 경우일 뿐이죠. ACP를 통해 stdio로 통신하는 것은 무엇이든 플러그 앤 플레이(plug straight in) 할 수 있습니다: Claude Code와 Codex (ACP 어댑터를 통해), Gemini CLI, OpenCode, Hermes, Pi 등이 그렇습니다. 사용자는 에이전트를 선택하고, 그 모델과 노력을 결정하며, 작업할 폴더를 지정합니다. 이 과정에서 생각하는 흐름(thinking), 계획(plan), 도구 호출(tool calls), 그리고 변경 사항(diffs)을 스트리밍으로 보여주며, 실제로 무언가를 건드리기 전에 반드시 사용자에게 확인을 요청합니다.
만약 'stdio'라는 단어 근처에서 눈이 초점을 잃었다면, 이 내용을 간결하게 요약해 드리겠습니다. 에이전트들이 여러분의 팀원(squad)이고, ACP가 무전기(radio)이며, AgentWebUI는 그 모든 팀원과 통신하는 하나의 헤드셋입니다. 임무를 수행할 때마다 새로운 무전기를 배울 필요가 없고, 당신이 잠자리에 들었을 때 명령을 기다리며 개방된 채널에 방치되는 사람도 없습니다.
모델 측면에서는 OpenAI 호환 API를 가진 것이라면 무엇이든 작동합니다: OpenAI, OpenRouter, Groq 또는 Ollama, LM Studio, vLLM과 같은 로컬 모델을 통해서도 가능합니다. 따라서 간단한 질문은 자신의 노트북에서 작은 모델에게 보내고 외부로 나갈 필요가 없습니다.
모든 에이전트 공급업체들은 사용자가 자신들의 탭에 머물기를 원합니다. 그들 입장에서는 당연한 일입니다. 하지만 사용자 입장에서 보면, 누군가가 다른 곳에서 더 나은 모델을 출시할 때마다 여러분의 워크플로우가 깨지게 됩니다.
오픈 프로토콜, 오픈 모델, 오픈 코드는 전환이 복잡한 마이그레이션 주말(migration weekend) 작업이 아니라 .env 파일 수정과 재시작만으로 가능하게 만듭니다. 게다가 자체 호스팅(self-hosted)이기 때문에, 여러분의 코드와 채팅 기록은 다른 사람의 클라우드로 '현장 학습'을 떠나는 대신 자신의 기기에 머무릅니다. 원격 데이터 전송 보고 기능도 없고, 미스터리한 서버도 없습니다. Captain Price가 말했듯이: "Bravo Six, 작전 중단(going dark)."
RIP, 대위님. (네, 이건 MW4 스포일러입니다. 캠페인을 끝내지 않았다면 이틀밖에 남지 않았습니다. 저희는 미안해하지 않습니다.)
자신의 서버에서 AI 모델 및 커맨드라인 에이전트와 채팅할 수 있는 작은 웹 페이지입니다. 열고 바로 채팅할 수 있으며, 설정 화면이나 계정이 필요 없습니다. 모든 것은 .env 파일에 구성됩니다. 패키지와 명령어는 여전히 agentwebui-lite로 이름 지어졌습니다.
서버는 약 3,000줄의 Python으로 작성되었으며 하나의 의존성(aiohttp)만을 사용하고 메모리를 약 40MB 정도 사용합니다. 웹 클라이언트는 빌드 단계가 없는 htm을 통한 Preact로 구축되었습니다. Geist 이외의 글꼴을 선택하지 않는 한 인터넷에서 로드되는 것은 없습니다.
…
버전 0.1.0이 10월 20일 GMT 기준 00:23에 PyPI에 올라왔습니다. 버전 0.2.0은 같은 날 10:48 GMT에 올라왔습니다.
릴리스 간격이 10시간 반입니다. 이것은 릴리스 주기라기보다는 도움이 필요한 수면 패턴 같습니다. (현재는 0.3.0 버전입니다. 몇 시인지 묻지 말아 주세요.) 또한, 솔직히 말씀드리자면 여기에 버그가 있다는 의미이기도 합니다. 우리가 알고 있는 것도 있고, 숨어있는 것도 있으며, 아직 설명하지 못한 기능일 수도 있습니다.
이는 제가 이 글을 쓰는 진짜 이유로 이어집니다.
캡틴 프라이스가 말했듯이: "우리가 더러워지면, 세상은 깨끗하게 유지된다." 이것이 오픈 소스(open source)를 한 문장으로 정의한 것입니다. 누군가가 새벽 3시에 스택 트레이스(stack traces)를 파헤치기 때문에 다른 모든 사람들은 작동하는 소프트웨어를 얻게 됩니다. 저희는 바로 그 '파헤치는' 작업을 담당할 분들을 모집하고 있습니다.
올해의 Hacktoberfest는 다릅니다. 오픈 소스 AI로 구축하는 것에 관한 것이며, 이것이 현재 저희의 정체성 그 자체입니다. 더 이상 추격해야 할 PR(Pull Request) 개수는 없지만, 기여는 여전히 영원한 감사와 기여자 목록에 이름을 올릴 수 있게 해줍니다. 미션 브리핑은 다음과 같습니다:
저희가 도움을 받고 싶은 것들:
!important가 성격 특성이라고 생각하는 사람들이 새벽 3시에 작성했습니다. 게다가 중앙 정렬되지 않는 div 같은 수많은 예외 케이스를 무시한 점은 말할 것도 없습니다. 그리고 누가 사파리(Safari)를 사용하나요, 여러분?!Hacktoberfest 분위기라면 hacktoberfest.com을 확인해보세요: 올해는 PR 개수를 세는 대신 로컬 페스트(local Fests)와 오픈 모델(open models)로 구축하는 것이 특징입니다.
작은 부탁이 하나 있습니다: 오타를 다른 오타로 바꾸는 임의의 PR(drive-by PR)은 삼가주세요. 저희가 알고 있어요. 사랑합니다. 대신 테스트 코드를 작성해 주세요.
저희가 만드는 것을 도와주세요. 커피를 가져오세요. 도커 이미지(Docker image)가 당겨지는 동안 MW4 매치를 대기시키세요; 저희는 비밀로 할게요.