업무 에이전트 화면: 채팅, 회의록 데스크, 자동 검수를 한 화면에
휴대폰에서도 쓸 수 있는 개인 업무 에이전트 화면을 만들었습니다. 작업자와 검수자, 판정자를 나누고, 회의 녹취를 올리면 회의록 초안과 검수 결과를 받는 구조입니다.
- 분야업무 자동화
- 기간2026년 8월 30일 ~ 9월 5일, 이후 보완
- 도구Claude, Codex, Node.js, HTML Canvas
- 상태로컬에서 사용 중, 권한 정책은 구현 전
명령줄에서만 쓰던 AI 에이전트를 휴대폰에서도 부를 수 있도록 웹 화면을 만들었습니다. 채팅방 하나에 에이전트 여럿이 들어와 있고, 한 에이전트가 답하면 다른 에이전트가 자동으로 검수합니다. 회의 녹취를 올리면 회의록을 만들어 주는 창구도 같은 화면에 있습니다.
프로젝트의 설계 문서, 화면 설계 메모, 소스 코드, 테스트 설명서입니다. 자동 테스트는 이 글을 쓰면서 다시 실행했습니다. 화면에 쓴 캐릭터 그림은 외부 자료를 가져온 것이라, 아래 화면에서는 가렸습니다.
구성
| 역할 | 모델 | 하는 일 |
|---|---|---|
| 주작업자 | Claude | 대화, 요청 처리 |
| 회의록 담당 | Codex | 녹취와 양식으로 회의록 초안 작성 |
| 검수자 | Codex | 결과 검토, 문제점 지적 |
| 판정자 | Claude | 검수 의견을 보고 수정이 필요한지 판단 |
설계에서 검수자의 권한은 항상 읽기 전용입니다. 검수자는 결과를 직접 고치지 못하고 문제점만 지적합니다.
메시지에 이름을 붙여 부르면 그 에이전트가 답하고, 붙이지 않으면 주작업자가 답합니다. 역할마다 이름과 말투를 설정 파일에서 바꿀 수 있습니다.
회의록 데스크
회의록은 채팅과 다른 창구로 분리했습니다. 세 가지 파일을 받습니다.
| 입력 | 형식 | 필수 여부 | 크기 제한 |
|---|---|---|---|
| 회의 녹취 | 텍스트 파일 | 필수 | 8MB |
| 회의록 양식 | 파일 | 선택 | 12MB |
| 작성 지침 | 파일 | 선택 | 2MB |
양식과 지침은 사용자가 줍니다. 회사마다 회의록의 모양이 다르기 때문에, 에이전트가 형식을 정하지 않고 받은 양식을 따르게 했습니다. 흐름은 작성, 검수, 판정 순서입니다. 회의록 담당이 초안을 만들고, 검수자가 검토하고, 판정자가 고쳐야 하는지 판단합니다. 결과물은 화면에서 내려받습니다.
올리는 파일의 이름은 안전한 문자만 남기고 정리하며, 입력은 날짜와 고유 번호가 붙은 폴더에 역할별로 나눠 저장합니다.
누가 일하는지 보이는 화면
채팅만 있으면 지금 누가 무엇을 하는지 알기 어렵습니다. 그래서 화면 왼쪽에 작은 사무실을 그렸습니다. 에이전트마다 방과 책상이 있고, 부르면 걸어오고, 일을 받으면 책상으로 가서 작업하고, 끝나면 결과를 들고 돌아옵니다. 오른쪽은 실제 업무의 입력과 결과입니다.
이 화면을 만들 때 지킨 규칙이 있습니다.
- 보이는 상태는 실제 이벤트에서만 바뀝니다. 에이전트가 책상으로 가는 것은 실제로 실행이 시작됐을 때이고, 돌아오는 것은 실제로 끝났을 때입니다.
- 진척률을 꾸며내지 않습니다. 알 수 없는 진행 정도나 실제로 하지 않은 도구 동작을 그리지 않습니다.
- 연결이 끊기면 끊겼다고 표시합니다. 끊긴 상태를 성공처럼 보이게 하지 않습니다.
- 부르는 것과 실행은 다릅니다. 캐릭터를 눌러 부르는 것만으로는 에이전트가 실행되지 않고, 업무를 보내야 실행됩니다.
- 새로고침해도 이어집니다. 작업 중에 화면을 다시 열면 실행 중인 위치와 상태를 복구합니다.
외부 그래픽 라이브러리 없이 브라우저의 기본 그리기 기능으로 만들었고, 움직임을 줄이도록 설정한 기기에서는 걷는 동작 없이 바로 이동합니다.
검증
자동 테스트 28개가 모두 통과합니다. 2026년 10월 9일에 다시 실행한 결과입니다. 외부 패키지 없이 돌고, 임시 폴더에 가상의 설정과 대화, 업로드를 만들어 실제 요청을 보내 검증합니다. 모델 실행은 모의 구현으로 바꿔서, 테스트가 실제 모델을 부르지 않습니다.
테스트가 다루는 범위는 아래와 같습니다.
- 작업 중지: 그때까지의 출력을 보존하고, 자동 검수를 취소하고, 실행 자리를 비움
- 동시에 여러 작업이 실행되지 않게 막는 실행 자리
- 작업 중에는 대화 초기화를 막고, 끝난 뒤에 초기화
- 연결이 끊겼다 다시 붙었을 때 놓친 완료 알림 복구
- 산출물 폴더 밖의 파일을 내려받지 못하게 차단
- 한글이 조각나 도착해도 깨지지 않는 처리
- 역할별 업로드 경로
화면은 폭 390픽셀의 휴대폰 크기에서 가로로 넘치지 않는 것을 확인했습니다.
검수 결과를 사람이 고르는 화면
검수에서 나온 문제를 곧바로 고치게 하지 않고, 사람이 고르는 단계를 넣었습니다. 한 번은 코드 검토에서 문제 일곱 개가 나왔습니다. 이 일곱 개를 한 화면에 나열하고, 항목마다 "수정"과 "보류" 가운데 하나를 고르게 했습니다. 고르고 나면 그 선택이 작업 요청문으로 만들어지고, 그 요청문을 전달해야 수정이 시작됩니다.
이 단계를 둔 이유와 권한을 세 등급으로 나눈 방식은 업무 에이전트를 둘로 나눈 이유에 자세히 적었습니다.
아직 안 된 것
- 권한 정책과 승인 화면은 설계만 했습니다. 메일 발송 같은 행동을 승인 뒤에만 실행하는 구조는 문서로 정해 두었고, 코드로는 아직 만들지 않았습니다.
- 메일과 파일 도구가 채팅에 붙어 있지 않습니다. 메일 분류는 이 화면이 아니라 별도의 단일 작업자 방식으로 돌리고 있습니다.
- 같은 네트워크 안에서만 접속합니다. 집 밖에서 접속하는 기능과 접근 인증은 다음 단계입니다.
- 테스트는 화면 배치나 실제 모델 연동을 검증하지 않습니다. 모의 구현으로 서버와 화면의 동작만 확인합니다.
이 작업에서 가져갈 것
에이전트를 여럿 두는 것보다 어려운 일은 그 상태를 정직하게 보여 주는 일이었습니다. 실제로 일어나지 않은 진행을 그려 넣으면 보기에는 좋지만, 사용자는 화면을 믿을 수 없게 됩니다. 이 기준은 저희 업무 에이전트 전체에 적용합니다. 화면에 보이는 것은 실제로 일어난 일이어야 합니다.