Claude Code 서브에이전트가 일하는 모습을 픽셀 조선 궁궐로 — 오픈소스 '어전(eojeon)' 공개, npx 한 줄·로컬 전용
Claude Code 터미널을 그대로 쓰면서, 서브에이전트는 신하로 입궐하고 권한 요청은 '윤허를 청하옵니다' 도장으로 답하는 무료 오픈소스 어전(eojeon). 설치 방법, 화면 장면, 작동 원리, 개인정보 처리를 정리했다.
어전(eojeon)은 브라우저에 픽셀 아트 조선 궁궐과 내 PC의 진짜 Claude Code 터미널을 함께 띄우는 무료 오픈소스(MIT)다. `npx eojeon-cli` 한 줄로 실행하고, Claude Code hooks로 프롬프트는 교지, 서브에이전트 시작은 신하 입궐, 권한 요청은 '윤허를 청하옵니다'로 보여 주며 윤허·불허 도장은 터미널에 실제 키(1·Esc)를 보낸다. 서버는 127.0.0.1에서만 열리고 외부로 데이터를 보내지 않으며, 하이아이오의 AI 팀이 만든 Claude Code 비공식 도구다.
결론부터. 어전(eojeon)은 Claude Code를 그대로 쓰면서, AI가 하는 일을 픽셀 조선 궁궐 장면으로 보여 주는 무료 오픈소스다. 사용자는 임금, 프롬프트는 교지, 권한 승인은 윤허다. 서브에이전트는 관청 신하로 입궐하고, 권한이 필요하면 "윤허를 청하옵니다"라고 아뢴다. 윤허 도장을 누르면 터미널에 진짜 허락 키가 들어간다. 모든 것은 내 PC 안(127.0.0.1)에서만 돈다.

설치와 실행
| 하고 싶은 것 | 명령 |
|---|---|
| 바로 실행(브라우저가 http://localhost:4747 로 열림) | npx eojeon-cli |
| Claude 없이 장면만 보기(사용량 0) | npx eojeon-cli demo |
| 기본 신하 '육조' 서브에이전트를 내 프로젝트에 추가 | npx eojeon-cli init |
| Claude Code 플러그인으로 | /plugin marketplace add hiio420pr/eojeon → /plugin install eojeon@eojeon → /eojeon |
필요한 것은 Node.js와 설치·로그인된 Claude Code다. macOS에서 시험했고, Windows(PowerShell)·Linux도 같은 명령으로 실행하도록 만들었지만 아직 직접 시험하지 못했다. Windows 설치 순서는 README의 Windows 절에 있다.
화면에서 일어나는 일
| Claude Code에서 일어난 일(hook) | 궁궐 장면 |
|---|---|
| 프롬프트 입력 | 교지가 펼쳐지고 사관이 적는다 |
| 서브에이전트 시작 | 그 관직의 신하가 문으로 입궐해 자기 책상으로 |
| 도구 사용 | 담당 신하가 붓질하며 말풍선(Bash: npm test 등) |
| 권한 요청 | "윤허를 청하옵니다" 패널과 도장 3개 |
| 도구 실패 | 먹물 얼룩 말풍선(숨기지 않음) |
| 일을 마침 | 영의정이 "상소 완료" |
도장은 세 가지다. 윤허하노라는 터미널 권한 창에 1(허락)을, 불허한다는 Esc(거절)를 보내고, 보류는 아무 키도 보내지 않고 터미널로 포커스만 옮긴다. 오른쪽 사관 일지에는 모든 이벤트가 시각과 한 줄로 쌓인다.
기본 신하 육조
| 관청 | 맡은 일 |
|---|---|
| 이조 | 설계: 일을 쪼개고 순서와 담당을 정한다 |
| 호조 | 성능: 성능·비용·숫자를 먼저 잰다 |
| 예조 | 문서: 문서·주석·커밋 메시지를 쓴다 |
| 병조 | 보안: 취약점과 비밀 노출을 막는다 |
| 형조 | 리뷰: 코드를 심리하고 버그를 수사한다 |
| 공조 | 구현: 코드를 짓고 테스트를 통과시킨다 |
하이아이오가 실제로 쓰는 AI 직원 구성을 옮긴 선택 팩 studio도 있다. 관직 이름·관복 색·임금 곤룡포 색·말투·도장 글자는 모두 court.config.json에서 바꾼다.
진짜 Claude Code인가?
그렇다. 화면 아래 터미널은 내 PC의 claude를 node-pty로 띄워 xterm.js로 보여 주는 것이다. 슬래시 명령, 채팅, 모델 전환, 지난 세션 이어받기(--continue, --resume)가 평소 그대로 된다. 장면은 실행할 때만 넣는 임시 설정의 hooks가 만든다. 내 ~/.claude/settings.json은 건드리지 않는다.
데이터는 어디로 가나?
어디로도 가지 않는다.
- 서버는
127.0.0.1에만 열리고 외부 요청이 없다. 글꼴과 xterm도 로컬에서 서빙한다. - 화면으로 가는 이벤트에는 파일 내용·도구 출력이 없다. 명령은 첫 줄 56자까지만 쓰고, 키·토큰 모양의 문자열은
***로 가린다. (0.4.0부터 '답변' 탭을 위해 내가 쓴 교지와 Claude의 최종 답변 글도 화면에 간다. 이 컴퓨터, 또는 접속 키를 가진 기기에만.) - 다른 웹사이트가 내 터미널에 입력하지 못하도록 Host·Origin을 검사한다.
왜 만들었나
하이아이오는 "사장은 결재만, 나머지는 AI가 하는 앱 스튜디오"다. 사장이 "서브에이전트 일하는 모습을 비주얼로 보여 주는 게 재밌던데 우리도 만들어 볼까"라고 했고, AI 팀이 기획·이름·그림·코드를 나눠 만들었다. 이름이 한 번 퇴짜 맞은 이야기와 비슷한 도구와의 차이는 다음 편에 적었다. 앞선 연재는 AI한테 앱 맡김 1편부터 읽을 수 있다.
자주 묻는 질문
어전은 Claude Code 공식 도구인가요?
아니다. Anthropic과 관계없는 비공식 도구이고 MIT 라이선스 오픈소스다. Claude Code가 설치·로그인돼 있어야 동작한다.
Claude 없이 써 볼 수 있나요?
npx eojeon-cli demo를 실행하면 claude 없이 녹화된 장면을 반복 재생한다. 사용량이 들지 않는다.
내 코드나 프롬프트가 외부로 나가나요?
나가지 않는다. 서버는 127.0.0.1에서만 열리고 외부 요청이 없으며, 화면용 이벤트는 도구 이름·명령 첫 줄·상대 경로 정도로 줄이고 비밀 값 모양은 가린다.
화면의 윤허 버튼을 누르면 실제로 허락되나요?
그렇다. 윤허는 터미널 권한 창에 1, 불허는 Esc를 보낸다. 다른 선택지는 터미널에서 직접 고르면 된다.
Pixel Agents 같은 도구와 무엇이 다른가요?
비슷한 생각을 한 도구(Pixel Agents, Claude Office Visualizer)가 있다. 어전은 한국 궁궐 세계관, 화면 도장이 실제 권한 응답이 되는 점, 개발자가 아니어도 읽히는 장면에 집중했다. 다른 프로젝트의 코드는 가져오지 않았다.
참고한 링크
- 어전(eojeon) GitHub 저장소
- eojeon-cli — npm
- Claude Code 공식 문서 — Hooks
- Pixel Agents (pablodelucca/pixel-agents)
- Claude Office Visualizer (paulrobello/claude-office)
- Galmuri 픽셀 글꼴(SIL OFL 1.1)
- 이전 편: 1.45만 명이 봤는데 다운로드 3개
연재 'AI한테 앱 맡김' 전체 보기 · 이 글은 AI(Claude)가 정리했어요.