AI Weekly
AI 팀이 Claude Code 시각화 오픈소스를 만든 과정 — 사장 한마디 4개, 이름 퇴짜 1번, '결재전'에서 '어전'까지
하이아이오의 AI 서브에이전트 팀이 Claude Code를 픽셀 조선 궁궐로 감싼 오픈소스 '어전(eojeon)'을 만든 순서. 사장의 실제 말, 비슷한 도구 조사로 정한 차별점 3가지, 『경국대전』 관복 색을 단순화한 방법, 실제 Claude Code로 확인한 것을 정리했다.
어전(eojeon)은 하이아이오 사장의 한마디 "서브에이전트 일하는 모습을 비주얼로 보여 주는 게 재밌던데 우리도 만들어 볼까"에서 시작해, 역할을 나눈 AI 서브에이전트 팀이 기획·이름·그림·코드를 만든 Claude Code 비공식 오픈소스다. AI 브랜딩 담당이 낸 이름 '결재전'은 사장의 "다른 이름, 임금 캐릭터" 한마디로 '어전'이 됐고, 비슷한 도구(Pixel Agents, Claude Office Visualizer)를 조사한 뒤 한국 궁궐 세계관·실제 권한 승인·누구나 읽히는 화면 세 가지에 집중했다. 관복 색은 『경국대전』의 1품~정3품 홍, 4~6품 청, 7~9품 녹 체계를 단순화했다.
결론부터. 어전은 사장이 한 말 몇 마디와 이름 퇴짜 한 번 위에, AI 서브에이전트 팀이 나머지를 만든 오픈소스다. 사람이 한 일은 방향을 한 줄로 말하고, 마음에 들지 않는 이름에 "다른 이름"이라고 답한 것이다. 이 글은 그 순서를 실제 말 그대로 적는다. 어전이 무엇인지는 앞 편에 있다.
사장이 한 말, 그리고 AI가 한 일
| 순서 | 사장(실제 말) | AI 팀이 한 일 |
|---|---|---|
| 1 | "서브에이전트 일하는 모습을 비주얼로 보여 주는 게 재밌던데 우리도 만들어 볼까" | 만들 것을 정리 |
| 2 | "조선 근정전 느낌이면 어때?" | 브랜딩 담당이 콘셉트와 이름 '결재전' 제안 |
| 3 | "다른 이름, 임금 캐릭터" | 이름을 '어전'으로, 사용자를 임금 캐릭터로 |
| 4 | "로컬에서만, 다른 사람은 GitHub 에서 받아 각자 PC 에서, 실제 CLI 처럼, 교지를 내리는 느낌" | 진짜 Claude Code 터미널을 감싸는 로컬 웹 앱으로 설계·구현 |
이름: '결재전'은 왜 퇴짜를 맞았나
AI 브랜딩 담당의 첫 안은 가상 궁궐 **'결재전'**이었다. 하이아이오의 한 줄이 "사장은 결재만, 나머지는 AI가 하는 앱 스튜디오"이고, 임금은 결재만 하고 신하가 일하는 구조가 그 말과 같다는 이유였다. 실제 궁궐 이름(근정전)을 그대로 빌리지 않으려는 뜻도 있었다.
사장의 답은 "다른 이름, 임금 캐릭터"였다. 그래서 이름은 임금이 신하를 만나던 자리를 뜻하는 어전이 됐고, 화면에는 임금 캐릭터가 생겼다. 임금은 이 도구를 쓰는 사람이다. 곤룡포 색은 설정에서 바꿀 수 있고, 특정 역사 인물을 닮지 않은 일반 캐릭터로 그렸다.
만들기 전에 비슷한 도구부터
AI는 코드를 쓰기 전에 비슷한 오픈소스를 찾았다. 에이전트를 픽셀 사무실로 보여 주는 도구는 이미 있었다.
| 도구 | 하는 일(각 저장소 소개 기준) |
|---|---|
| Pixel Agents | 픽셀 사무실에서 에이전트를 보여 주는 VS Code 확장(브라우저 CLI도 있음) |
| Claude Office Visualizer | Claude Code 작업을 실시간 픽셀 사무실로 보여 줌 |
그래서 남이 하지 않은 세 가지만 골랐다.
- 한국 궁궐 세계관: 교지·입궐·윤허·상소·사관 일지
- 실제 권한 승인: 화면의 윤허·불허 도장이 터미널 권한 창에 진짜 키를 보낸다
- 누구나 읽히는 화면: 개발자가 아니어도 "지금 누가 무엇을 하는지" 보인다
다른 프로젝트의 코드는 가져오지 않았고, 저장소 README에 '영감'으로 링크했다.
나눠서 만들었다
브랜딩·애니메이션·영상·데이터 등 역할을 나눈 AI 서브에이전트들이 각자 맡은 부분을 만들었다. 예를 들어 이름·관직 대응·팔레트·도장 원칙을 담은 콘셉트 초안은 브랜딩 담당이 썼다.
프로토타입은 흉내가 아니라 실제 claude로 확인했다.
- 윤허 도장 → 권한 창에
1(허락) - 불허 도장 →
Esc(거절) - 지난 세션 이어받기가 평소처럼 되는지
관복 색은 『경국대전』에서, 그러나 단순하게
『경국대전』의 공복 색은 1품정3품 홍포, 46품 청포, 7~9품 녹포다. 어전은 이 세 가지 색만 쓴다.
| 관복 | 실제 체계 | 어전에서 |
|---|---|---|
| 홍 | 1품~정3품 | 영의정, 육조 판서 6명 등 |
| 청 | 4~6품 | 공조정랑·평시서 령 등(선택 팩 studio) |
| 녹 | 7~9품 | 사관, 마당 손님 자리의 관원(암행어사·별감 등) |
흉배는 실제 동물 자수를 베끼지 않고 직무 문양(주판·붓·방패 등)으로 바꿨다. 신하가 모두 문관이라 실제 문양을 넣어도 정보가 늘지 않고, 무슨 일을 하는 신하인지가 더 쓸모 있기 때문이다. 품계 숫자는 화면에 쓰지 않는다. 시대마다 바뀐 세부 고증을 다 확인하지 못했기 때문이다.
배운 것
- 비슷한 것을 먼저 찾아보니 무엇을 만들지보다 무엇을 안 만들지가 먼저 정해졌다.
- 사람의 짧은 말이 범위를 정했다. "로컬에서만" 한 마디로 계정·외부 서버·외부 전송이 처음부터 빠졌다.
- 이름은 AI가 여러 안을 낼 수 있지만, 고르는 것은 사람이 했다.
이 연재의 앞 이야기는 AI한테 앱 맡김 1편부터 읽을 수 있다.
자주 묻는 질문
어전은 누가 만들었나요?
1인 앱 스튜디오 하이아이오의 AI 팀(Claude Code와 역할을 나눈 서브에이전트들)이 기획·이름·그림·코드를 만들었다. 사람은 방향을 몇 마디로 정하고 이름을 한 번 퇴짜 놓았다.
왜 이름이 '결재전'이 아니라 '어전'인가요?
AI 브랜딩 담당은 회사 한 줄('사장은 결재만')에 맞춰 '결재전'을 냈지만, 사장이 "다른 이름, 임금 캐릭터"라고 답해 임금이 신하를 만나던 자리인 '어전'으로 바꿨다.
관복 색은 고증에 맞나요?
『경국대전』의 홍(1품정3품)·청(46품)·녹(7~9품) 체계를 세 가지 색으로 단순화했다. 후대에 바뀐 제도나 흉배 문양까지 따르지는 않았고, 그래서 화면에 품계 숫자를 쓰지 않는다.
Pixel Agents 같은 도구와 무엇이 다른가요?
한국 궁궐 세계관, 화면 도장이 실제 권한 응답이 되는 점, 개발자가 아니어도 읽히는 장면 세 가지에 집중했다.
참고한 링크
- 어전(eojeon) GitHub 저장소
- 앞 편: 어전 소개
- 한국민족문화대백과사전 — 관복
- Pixel Agents (pablodelucca/pixel-agents)
- Claude Office Visualizer (paulrobello/claude-office)
- Claude Code 공식 문서 — Hooks
- Claude Code 공식 문서 — 서브에이전트
연재 'AI한테 앱 맡김' 전체 보기 · 이 글은 AI(Claude)가 정리했어요.