AI 에이전트가 일하는 걸 지켜보는 화면을 설계해봤어요

 ・ 4분

photo by Mickey O'neil(https://unsplash.com/@mickeyoneil?utm_source=templater_proxy&utm_medium=referral) on Unsplash

지난 글에서 마크다운 노트를 작업 요청서로 쓰는 자동화를 만들어봤다고 했죠. 그때 백엔드 흐름만큼 오래 고민했던 게 하나 더 있었어요. 에이전트가 내 대신 일하는 동안 나는 어떤 화면을 보고 있어야 할까라는 문제였어요.

결국 그 프로젝트는 접었고, 이 화면은 설계 메모로만 남았어요. 메모를 지우기 전에 핵심만 글로 정리해두려고 해요. 사람이 에이전트에게 일을 맡길 때 알고 싶은 건 결국 세 가지 질문으로 좁혀지더라고요.

문서 한 장이 카드 한 장이에요#

대시보드의 기본 단위는 티켓이 아니라 문서예요. 옵시디언에서 쓴 마크다운 문서가 그대로 칸반 보드의 카드로 올라와요. 기획서, QA 리포트, 배포 문서를 따로 티켓으로 옮겨 적을 필요가 없죠.

카드의 속성은 문서의 frontmatter에서 가져와요. type이 카드의 종류를, status가 보드에서의 위치를 정해요.

type 다루는 일 배정되는 에이전트 그룹
Task 기능 개발 개발 에이전트
QA 테스트와 버그 리포트 테스터 에이전트
Deploy 배포 파이프라인과 문서 데브옵스 에이전트

타입에 따라 카드의 색상과 아이콘이 달라지고, 어떤 에이전트 그룹이 붙을지도 정해져요. 상태는 Backlog, Ready, In Progress, Review, Done 다섯 열로 흘러가요. 사람이 문서의 status를 바꾸면 카드가 열을 옮기고, 에이전트가 작업을 마치면 다시 카드가 움직이는 식이에요.

지난 글에서 이야기한 frontmatter 실행 조건이 여기서는 그대로 카드의 상태가 돼요. 백엔드와 화면이 같은 메타데이터를 보는 셈이죠.

카드를 열면 세 가지 질문에 답해요#

카드를 클릭하면 우측 패널이나 모달이 열리고, 탭 세 개가 보여요. 이 탭 구성이 설계 메모의 핵심이었어요. 탭 하나가 질문 하나에 대응하거든요.

내가 뭘 맡겼지? — Document 탭#

첫 번째 탭은 사용자가 쓴 원본 마크다운이에요. 기획서든 요구사항이든 옵시디언에서 작성한 그대로 보여요.

여기에 승인(Approve) 버튼이 있어요. 문서를 다시 읽고 이 내용으로 진행해도 되겠다 싶을 때 누르면, 그 순간 에이전트가 투입돼요. 맡기기 전에 한 번 더 확인하는 자리인 셈이에요.

지금 뭘 하고 있지? — Agent Terminal 탭#

두 번째 탭은 이 카드를 물고 있는 에이전트의 터미널 스트리밍 로그예요. Codex나 Claude Code 같은 에이전트가 어떤 파일을 고치고 있는지, 무슨 커맨드를 치고 있는지 실시간으로 중계돼요.

이 부분은 Vibe Kanban의 작업 화면을 참고했어요. 에이전트에게 일을 맡기면 결과가 나올 때까지 아무것도 안 보이는 경우가 많잖아요. 과정이 보이면 중간에 방향이 틀어졌을 때 바로 알아챌 수 있어요.

결과를 믿어도 될까? — Diff & Preview 탭#

세 번째 탭은 검토 자리예요. 에이전트가 코드를 다 쓰면 Git Diff가 여기에 올라와요.

Diff만으로는 부족한 경우가 있어서, 작업된 브랜치의 프리뷰 화면도 같이 띄워요. 역시 Vibe Kanban의 내장 브라우저에서 가져온 아이디어예요. PM이 화면을 직접 눌러보고, 마음에 안 드는 부분에는 인라인으로 피드백을 남길 수 있어요. 괜찮다 싶으면 여기서 바로 머지를 승인해요.

카드 한 장의 일생#

세 탭이 실제로 어떻게 이어지는지 시나리오로 보면 이래요.

  1. 작성 — 옵시디언에서 [Feature] 로그인 화면 개편.md를 쓰고 type: Task, status: Ready로 저장해요
  2. 등장 — 칸반 보드의 Ready 열에 카드가 나타나요
  3. 실행 — 카드를 열어 Document 탭에서 내용을 확인하고 실행(Dispatch) 버튼을 눌러요. 카드가 In Progress로 이동해요
  4. 배정 — 시스템이 격리된 작업 환경에 코딩 에이전트를 할당해요
  5. 관찰 — Agent Terminal 탭에서 에이전트가 코드를 짜는 과정을 지켜봐요
  6. 검토 — 작업이 끝나면 Diff & Preview 탭에 알림이 와요. 코드와 프리뷰를 확인하고 머지를 승인하면 끝이에요

문서를 쓰는 1번을 빼면, 대시보드 안에서 사람이 손대는 지점은 3번과 6번뿐이에요. 지난 글에서 "사람은 처음과 끝에만 개입한다"고 했던 원칙이 화면에서도 그대로 지켜지는 거죠.

메모를 글로 남기는 이유#

이 설계는 Vibe Kanban이 잘하는 것, 그러니까 작업 격리, 프리뷰, 세밀한 피드백을 받아들이면서도, "문서가 곧 시스템의 중심"이라는 생각을 화면으로 옮기려는 시도였어요. 대시보드를 완성하지는 못했지만, 세 가지 질문으로 화면을 나누는 틀은 지금도 유효하다고 생각해요.

에이전트 도구를 고를 때 한 번 대입해보세요. 내가 맡긴 게 뭔지, 지금 뭘 하는지, 결과를 믿어도 되는지. 이 세 가지가 한 화면 안에서 보이는지만 확인해도 꽤 많은 게 걸러져요.


Kind words do not cost much. Yet they accomplish much.

— Blaise Pascal


다른 글
마크다운으로 AI 에이전트 작업 자동화할 때 챙길 것 커버 이미지
 ・ 5분

마크다운으로 AI 에이전트 작업 자동화할 때 챙길 것

테스트 문서 하나로 자동화 끝점 검증하기 커버 이미지
 ・ 4분

테스트 문서 하나로 자동화 끝점 검증하기

Obsidian 노트를 AI 에이전트 작업 지시서로 쓰기 커버 이미지
 ・ 3분

Obsidian 노트를 AI 에이전트 작업 지시서로 쓰기