나의 AI 비서 Sancho 만들기 - 2편 대시보드와 일정

개인 에이전트 AI 강좌 · 2 / 10편

© 2026 crazy4eu (cwkim83) · 강좌 자료 CC BY-NC-ND 4.0 · 코드 상업적 배포 금지 — 맨 아래 「저작권 · 라이선스」
💻 완성 소스: github.com/cwkim83/my-agent-Sancho (태그 ep2) — 막히면 이 코드를 열어 비교해 보세요.
단계 번호는 영상 왼쪽 위 장면 이름과 같고, "영상 시각"은 편집본 기준입니다. 회색 상자는 Code 탭 입력창에 그대로 붙여 넣는 요청문입니다.
이전 편: 나의 AI 비서 Sancho 만들기 - 1편 에이전트 AI 만들기 · 다음 편: 나의 AI 비서 Sancho 만들기 - 3편 프로젝트와 WBS 공정표

핵심 요약

한 줄 요약 — 파일 저장소 하나를 깔고(서버가 파일을 지켜봄), 그 위에 대시보드와 달력을 올린 뒤, 비서에게 "어느 파일에 어떤 모양으로 쓰는지" 규칙(스킬)만 주면 말로 일정이 잡힙니다.

2편 · 대시보드와 일정

목적

비서에게 업무 화면을 붙입니다. 사람은 화면에서, 비서는 파일에서 같은 데이터를 고치고, 어느 쪽이 고치든 화면이 바로 따라 바뀌게 합니다. 3편부터 붙일 프로젝트·WBS 도 같은 방식입니다.

준비물

• 1편을 끝낸 my-agent 폴더 — 없으면 GitHub 에서 받은 뒤 ep1 태그로 시작합니다
• Claude 데스크톱 앱 Code 탭, 모델 Sonnet 5.5
• 연습용 계정(1편에서 만든 가상 관리자 demo) — 실제 비밀번호는 요청문에 쓰지 않습니다

만드는 단계

0단계 · 여는 말 (영상 0:05)

• 지난 편에서 비서가 말하고 기억하게 됐습니다. 오늘은 업무 화면 — 대시보드와 일정 — 을 붙입니다.
• 오늘의 하이라이트: 말로 시키면 화면이 바로 바뀌는 것. 위 그림은 채팅으로 "네 시로 미뤄 줘" 한 뒤의 달력입니다.

1단계 · 새 세션 — 앞 편 이어서 (영상 0:24)

1. Code 탭 왼쪽 위 ＋ 새 세션 → 폴더는 1편과 같은 my-agent.
2. 아래 워크트리 체크가 켜져 있으면 끕니다. 워크트리는 작업용 사본을 따로 만드는 기능이라, 같은 폴더에서 이어 만들 때는 끕니다.
3. 모델 Sonnet 5.5, 권한 모드 편집 자동 수락(파일 수정은 알아서, 명령 실행만 물음).
4. 오른쪽 위 지구본 단추로 브라우저 패널을 열고, 경계선을 왼쪽으로 끌어 넓혀 둡니다. 영상에서는 이걸 안 해서 5단계까지 비서가 만든 화면이 안 보였습니다.

CLAUDE.md 와 docs/blueprint.md 를 읽고, 지난 편(ep1)까지 무엇이 있는지 세 줄로 요약해 줘. 그리고 서버를 켜고 브라우저 패널로 보여 줘.

• 새 편 = 새 세션. 대화가 길어지면 AI 가 앞 내용을 흐리게 기억합니다. 짧은 세션을 여러 번 쓰는 게 더 정확하고 사용량도 아낍니다. 대신 첫 요청에서 청사진과 규칙 파일을 읽혀 "지금 어디까지 왔는지"를 다시 잡습니다.
• 결과: 지난 편까지를 세 줄로 정리하고 서버를 켰습니다. 그리고 "로그인은 직접 해 주세요" — 비밀번호를 스스로 입력하지 않는 규칙 때문입니다. 패널에서 직접 로그인하거나, 3단계처럼 요청문에 연습용 계정을 적어 줍니다.

2단계 · 파일 저장소와 실시간 알림 (영상 1:13)

업무 화면들이 같이 쓸 저장소를 만들어 줘. 데이터베이스 서버 없이 파일로.
- data/db/<이름>.json 한 파일이 한 묶음(컬렉션). 예: events(일정), projects(프로젝트), tasks(할 일), notices(알림)
- API: GET /api/db/<이름> (목록), PUT /api/db/<이름>/<id> (저장·수정), DELETE /api/db/<이름>/<id>. 로그인한 사람만.
- 쓰기는 임시 파일에 쓰고 이름을 바꾸는 방식으로(도중에 꺼져도 파일이 안 깨지게).
- 서버가 data/db 폴더를 지켜보다가 파일이 바뀌면 /api/events(SSE)로 열려 있는 화면에 "events 가 바뀜"을 알린다. AI 가 파일을 직접 고쳐도 화면이 따라 바뀌게.
- 화면용 도우미 public/m/db.js: list(이름), save(이름, id, 내용), remove(이름, id), watch(이름, 바뀌면 부를 함수).
- selftest 에 저장·수정·삭제·바뀜 알림 검사를 넣어 줘.
다 되면 node selftest.js 로 돌려 줘.

• 산초는 데이터베이스 대신 파일을 씁니다. 일정은 events.json, 프로젝트는 projects.json.
• 핵심은 "파일이 바뀌면 화면에 알린다" 한 줄입니다. 그래서 사람이 화면에서 고치든 비서가 파일을 직접 고치든 화면이 똑같이 따라 바뀝니다 — 6단계 하이라이트의 바탕입니다.
• 요청하지 않은 것도 챙겼습니다: 깨진 파일은 덮어쓰지 않음 · 업무 화면 파일(public/m/)은 로그인해야 받음 · 연결이 끊겼다 이어지면 화면을 새로 고침. 점검 109개 통과.

3단계 · 가상 회사 예시 데이터 (영상 2:04)

연습용 예시 데이터를 넣는 버튼을 설정 화면에 만들어 줘(POST /api/seed). 가상 회사 "가나다전자" 기준으로:
일정 8개(이번 주·다음 주, 회의·출장·검사 입회), 프로젝트 3개(열교환기 제작, 압력용기 개조, 공장 자동화), 할 일 6개(마감일 포함), 알림 2개.
실제 회사·사람 이름은 쓰지 마. 이미 데이터가 있으면 덮어쓰지 말고 물어봐.
다 되면 서버를 다시 켜고, 브라우저 패널에서 연습용 관리자(아이디 demo, 연습용 비밀번호 sancho-demo-2026)로 로그인한 뒤 설정 화면의 버튼을 눌러 예시 데이터를 넣어 줘.

• 화면을 만들려면 데이터가 먼저 있어야 합니다. 교육·시연 자료에는 실제 회사·사람 이름을 절대 쓰지 않습니다 — 가상 회사 "가나다전자".
• 연습용 계정을 요청문에 적어 주면 비서가 로그인까지 합니다. 연습용이라 괜찮은 것이고, 실제 비밀번호는 쓰지 마세요.
• 결과: 설정 화면에 예시 데이터 넣기 버튼 → 일정 8 · 프로젝트 3 · 할 일 6 · 알림 2. 이미 데이터가 있으면 덮어쓰지 않고 먼저 물어봅니다. 점검 122개.

4단계 · 대시보드 (영상 2:37)

대시보드를 만들어 줘. 채팅은 그대로 두고, 그 위에 한 줄로:
- 숫자 카드 4장: 오늘 일정 수 · 진행 중 프로젝트 · 7일 안 마감 할 일 · 안 읽은 알림. 카드를 누르면 해당 메뉴로.
- 오른쪽 칸: 오늘 일정 목록(시간순), 마감 임박 할 일, 최근 대화 3개.
- 채팅 입력창 위에 빠른 지시 버튼 4개: "오늘 브리핑", "이번 주 일정 정리", "마감 임박 알려줘", "새 프로젝트 등록". 누르면 입력창에 글이 채워진다.
- 아침·오후·저녁에 따라 인사말이 바뀐다("좋은 아침입니다, ○○님").
- 데이터는 db.js 의 watch 로 받아서, 파일이 바뀌면 숫자가 바로 바뀌게.
다 되면 서버를 다시 켜고, 브라우저 패널에서 대시보드를 보여 준 뒤 빠른 지시 "오늘 브리핑"을 눌러 보내 줘.

• 대시보드 = 출근해서 제일 먼저 보는 화면. 숫자 네 개로 오늘을 요약하고, 바로 아래에서 비서와 대화합니다.
• 비서는 알림 파일을 직접 고쳐 보며 숫자가 새로고침 없이 바뀌는지(2 → 1)까지 시험했습니다. 2단계의 파일 감시가 여기서 쓰입니다.
• 빠른 지시 버튼 = 매일 하는 말을 버튼 하나로. "오늘 브리핑"을 누르자 비서가 데이터 파일을 스스로 찾아 읽고 오늘 일정·마감 지난 일을 표로 정리했습니다. 점검 130개.
• 다만 비서는 아직 파일 모양을 정확히 모릅니다 → 6단계에서 규칙을 줍니다.

5단계 · 일정 화면 (영상 3:18)

일정 메뉴를 만들어 줘(public/m/calendar.html, 메인 화면 안에 띄운다).
- 월 보기 / 주 보기 전환, 오늘 표시, 이전·다음 달.
- 칸을 누르면 일정 추가 창(제목·날짜·시작·끝 시각·장소·메모·종류: 회의/출장/검사/개인), 일정을 누르면 수정·삭제.
- 할 일의 마감일도 달력에 작은 점으로 같이 보여 준다.
- 오른쪽 위에 "✳ 비서에게 시키기" 버튼: 누르면 채팅 입력창에 "이번 주 일정 중 겹치는 게 있는지 봐 줘" 가 채워진다.
- db.js watch 로 실시간 반영.
다 되면 서버를 다시 켜고, 브라우저 패널에서 일정 메뉴를 열어 달력을 보여 주고, 칸을 눌러 이번 주 금요일 오전 열 시 "열교환기 도면 검토" 일정을 추가했다가 열한 시로 수정해 줘.

• 월 보기·주 보기, 칸을 눌러 직접 입력, 할 일 마감일은 작은 점(지난 것 빨강 · 완료 회색 · 나머지 주황).
• 비서는 금요일 10시에 "열교환기 도면 검토"를 넣었다가 11시로 고쳐 봤습니다. 시작만 바꾸면 끝 시각과 같아져서 끝도 한 시간 같이 옮겼다고 스스로 알려 줍니다. 점검 146개.
• ✳ 비서에게 시키기 = 화면에서 하던 일을 그대로 비서에게 넘기는 단추. 앞으로 만드는 모든 화면에 붙습니다.
• (선택) 패널이 닫혀 있었다면, 패널을 열고 지금까지 만든 화면을 다시 보여 달라고 합니다. 패널이 좁으면 휴대폰 배치, 넓히면 왼쪽 메뉴가 펼쳐진 넓은 배치가 됩니다.

브라우저 패널로 지금까지 만든 화면을 차례로 보여 줘. 설정 화면의 예시 데이터 버튼 → 대시보드(숫자 카드·오늘 일정·마감 임박·빠른 지시 버튼) → 일정 메뉴의 월 보기와 주 보기 순서로, 화면마다 몇 초씩 머물러 줘. 아무것도 고치지 말고 보여 주기만 해.

패널을 넓혔어. 넓은 화면으로 대시보드 → 일정 월 보기 순서로 다시 보여 줘. 화면마다 몇 초씩 머물러 주고, 아무것도 고치지 마.

6단계 · 말로 일정 잡기 — 스킬 (영상 4:08)

비서가 업무 데이터를 직접 고칠 수 있게 규칙을 가르쳐 줘.
- data/.claude/skills/platform/SKILL.md 를 만들어, 컬렉션마다 파일 위치와 필드 형식을 적는다:
  events: id, title, date(YYYY-MM-DD), start, end(HH:MM), place, memo, kind / tasks: id, title, due, project, done / projects: id, name, client, start, end, status
- 시스템 프롬프트에 "업무 데이터는 이 스킬의 형식대로 data/db/*.json 을 직접 고친다. id 는 새로 만들 때 짧은 무작위 문자열. 고친 뒤 무엇을 바꿨는지 한 줄로 알려 준다."를 넣는다.
- 날짜 말(내일, 다음 주 화요일)은 오늘 날짜 기준으로 정확히 계산하라고 적는다.
다 되면 서버를 다시 켜고, 브라우저 패널의 채팅에서 "내일 오후 세 시에 가나다전자 열교환기 수압시험 입회 일정 잡아줘, 장소는 2공장" 을 보내고 일정 메뉴로 가서 달력에 바로 생겼는지 보여 줘. 이어서 채팅에서 "그 일정 네 시로 미뤄줘" 를 보내고 달력에서 바뀐 걸 보여 줘.

• 오늘의 하이라이트. 비서에게 "일정은 이 파일에, 이런 모양으로 쓴다"는 규칙을 하나 줍니다. 이걸 스킬이라고 합니다.
• 비서는 요청문의 필드 이름 대신 화면이 실제로 읽는 이름으로 규칙을 적고, 다르게 쓴 곳은 이유를 표로 알려 주었습니다(예: 할 일의 project·done → projectId·status). 그대로 적었으면 비서가 쓴 값을 화면이 못 읽었을 겁니다.
• 결과: "내일 오후 세 시 … 수압시험 입회" → 비서가 파일을 고치자 달력에 바로 나타났습니다(위 그림, 10/7 15:00). "그 일정 네 시로 미뤄줘" → 새로 생기지 않고 같은 일정이 16:00 으로(아래 그림). 점검 150개.

• 도구를 따로 만들지 않았습니다. 비서가 원래 가진 파일 쓰기 능력에, 어디에 어떻게 쓰라는 규칙만 더했을 뿐입니다. 1편의 기억(memory.md)과 같은 원리입니다.

7단계 · Opus 로 검증하고 커밋 (영상 4:57)

전송 버튼 옆 모델을 Opus 5.5 로 바꾼 뒤 보냅니다.

2편에서 만든 것을 검증해 줘. 고치기 전에 문제 목록부터.
- 로그인 없이 /api/db 에 접근되는지, 이름에 ../ 를 넣어 data/db 밖을 건드릴 수 있는지
- 동시에 두 번 저장하면 파일이 깨지거나 하나가 사라지는지
- 비서가 형식에 안 맞는 일정을 쓰면 화면이 멈추는지
- selftest 가 이걸 잡는지
고친 뒤 selftest 를 돌리고, 끝나면 커밋하고 ep2 태그를 붙여 줘.

• 모델을 바꾸면 경고가 뜹니다 — 지금까지의 대화를 새 모델이 다시 읽어서 사용량을 더 쓴다는 뜻입니다.
• 파일 이름에 ../ 를 넣어 저장소 밖을 건드리는 경로 공격은 꼭 확인시킵니다. 경로를 받는 기능은 언제나 이걸 조심해야 합니다.
• Opus 는 문제를 실제로 재현해 보며 점검합니다(틀린 일정을 섞어 넣고, 저장을 동시에 여러 번 보내 보기).
• 결과: 로그인(7곳 모두 401)·경로 공격(8가지 모두 404)은 잘 막혀 있었습니다. 찾아 고친 것 ① 동시에 두 번 저장하면 하나가 사라짐 → 이제 30개를 한꺼번에 저장해도 다 남음 ② 형식이 틀린 일정이 경고 없이 사라짐 → "⚠ 형식이 맞지 않는 항목 n개"로 알림 ③ 윈도우 장치 이름(nul·con)도 거절. 점검 150 → 160개, 커밋하고 ep2 태그.
• 검증이 끝나면 다시 Sonnet 5.5 로 돌려 둡니다.

💡 설명

• 컬렉션: 같은 종류 데이터 한 묶음. 산초에서는 파일 하나(data/db/events.json = 일정 전부).
• 임시 파일에 쓰고 이름 바꾸기: 쓰는 도중에 컴퓨터가 꺼져도 원래 파일이 깨지지 않게 하는 방법.
• 파일 감시 · SSE: 서버가 폴더를 지켜보다가 바뀌면 열려 있는 화면에 "바뀜"을 흘려보내는 방식. 그래서 새로고침 없이 바뀝니다.
• 워크트리: 같은 저장소의 작업용 사본을 따로 만드는 기능. 한 폴더에서 편을 이어 만들 때는 끕니다.
• 스킬(SKILL.md): 비서에게 "이 일은 이렇게 한다"를 적어 준 규칙 파일. 도구를 새로 만들지 않고 능력을 늘리는 가장 쉬운 방법.
• 경로 공격(../): 파일 이름에 "위 폴더로"를 섞어 정해진 폴더 밖을 읽고 쓰려는 공격.
• 새 세션: 편마다 새 대화로 시작. 맥락이 짧을수록 정확하고 사용량도 적게 듭니다.

자주 막히는 곳

• 비서가 만든 화면이 안 보인다 → 브라우저 패널이 닫혀 있는 경우입니다. 오른쪽 위 지구본 단추로 열고, 경계선을 끌어 넓힙니다.
• 화면이 휴대폰처럼 좁게 보인다 → 패널 폭이 좁아서 휴대폰 배치가 된 것입니다. 경계선을 왼쪽으로 끌어 넓히면 왼쪽 메뉴가 펼쳐집니다.
• "로그인은 직접 해 주세요" → 정상입니다(비밀번호를 스스로 입력하지 않는 규칙). 패널에서 직접 로그인하거나 요청문에 연습용 계정을 적습니다.
• 새 세션이 엉뚱한 폴더에서 열렸다 / 워크트리 표시가 뜬다 → 새 세션 화면에서 폴더를 my-agent 로 고르고 워크트리 체크를 끕니다.
• 말로 시킨 일정이 달력에 안 나타난다 → "스킬에 적은 필드 이름이 달력이 읽는 이름과 같은지 확인하고 고쳐 줘".
• 날짜가 하루 어긋난다 → "날짜 말은 오늘 날짜 기준으로 계산하라는 규칙이 스킬에 있는지 확인해 줘".

됐는지 확인하는 방법

• 설정 화면의 예시 데이터 넣기 → 대시보드 숫자 카드에 숫자가 뜬다
• data/db/notices.json 을 메모장으로 고쳐 저장하면 대시보드 숫자가 새로고침 없이 바뀐다
• 일정 메뉴에서 월·주 보기가 바뀌고, 칸을 눌러 일정을 넣고 고칠 수 있다
• 채팅에 "내일 오후 세 시에 … 일정 잡아줘" → 달력에 바로 생긴다, "네 시로 미뤄줘" → 같은 일정이 옮겨진다
• node selftest.js → 모두 통과(영상 기준 160개)
• git tag 에 ep2 가 있다

스스로 점검

• 새 편을 새 세션으로 시작하는 이유를 설명할 수 있다
• 파일을 고쳐도 화면이 바뀌는 이유(파일 감시)를 안다
• 스킬이 "도구를 만드는 것"과 어떻게 다른지 안다
• 교육·시연 데이터에 실제 회사·사람 이름을 쓰지 않았다
• Opus 로 검증하면서 ../ 경로 공격을 확인시켰다
• ep2 태그로 커밋했다