LLM이 컨트롤하는
동적 대시보드

말로 조종하는 대시보드

목표는 데이터 차트가 있는 대시보드에 챗봇을 붙이는 것이다. "3개월만 보여줘", "이동평균선 추가해줘" 같은 자연어 지시를 LLM이 해석하면, 화면의 차트와 데이터 뷰가 실제로 바뀐다.

지금까지와 결정적으로 다른 점이 하나 있다. 프로젝트 1(서비스 앱)과 프로젝트 2(위키)는 정적 파일만으로 완결됐지만, 이번엔 서버(Cloudflare Worker)가 필요하다. LLM API 호출을 브라우저에서 직접 하면 API 키가 사용자에게 그대로 노출되기 때문이다. Worker가 챗봇의 백엔드가 되어 브라우저 대신 LLM을 호출한다.

아키텍처

[브라우저]                         [Cloudflare Worker]
차트 + 데이터 뷰                    fetch 핸들러
챗봇 입력창  ── 질문 POST ──▶       env.AI.run(무료 LLM 모델)
     ◀── JSON 명령 응답 ──          {"action":"...", "params":{...}}
화면 갱신 (JS가 명령 실행)

핵심 아이디어는 이렇다. LLM에게 "자연어 → 정해진 JSON 명령"으로 번역하는 역할을 준다. 시스템 프롬프트에 명령 목록을 정의해 두면, LLM은 사용자의 말을 그 목록 중 하나로 번역해 JSON만 반환한다. 프런트 JS는 그 명령만 실행한다. 즉 LLM이 화면을 직접 그리는 게 아니라 컨트롤 신호를 만드는 것이다.

Worker 하나에 페이지와 API를 함께 담는다

준비물은 하나다. 메인 실습 흐름(00_flow)의 Cloudflare 연결이 끝나 있어야 한다. 커스텀 토큰을 쓰는 경우라면 Workers Scripts Edit 권한이 토큰에 들어 있어야 한다.

AI에게 뼈대 프로젝트 생성을 맡긴다.

Cloudflare Worker로 배포할 대시보드 프로젝트를 만들어줘.
- 폴더: dashboard_agent
- wrangler 설정 파일에 Workers AI 바인딩을 추가해줘 (binding 이름: AI)
- Worker 하나가 두 역할을 하게 해줘:
  1) GET / : 대시보드 HTML 페이지를 반환
  2) POST /chat : {message, state}를 받아 Workers AI로 처리하고 JSON 명령을 반환
- 아직 화면과 명령은 비워두고, 뼈대만 만들어서 로컬에서 실행되는 것까지 확인해줘

• dashboard_agent 폴더가 만들어지고 wrangler 설정에 AI 바인딩이 보인다
• 로컬 실행 시 GET / 에서 (빈) 페이지가 뜬다
• POST /chat 경로가 응답을 돌려준다

모든 조작을 함수로 분리해 둔다

화면은 왼쪽에 차트, 오른쪽에 챗봇 패널이다. 이 단계의 요점은 기간 선택·지표 토글 같은 조작을 전부 함수로 분리해 두는 것 — 다음 단계에서 챗봇 명령이 바로 그 함수들을 호출한다.

대시보드 화면을 구현해줘.
- 주제: [예: 최근 1년 달러 환율] — 데이터는 data.json으로 프로젝트에 포함
- 왼쪽: 시계열 라인 차트 (외부 라이브러리 없이 SVG로 직접 그려줘)
- 차트 위: 기간 선택(1개월/3개월/1년), 지표 토글(이동평균선) 버튼
- 오른쪽: 챗봇 패널 (대화 목록 + 입력창)
- 화면의 모든 조작(기간, 지표)은 함수로 분리해줘 — 나중에 챗봇 명령이 같은 함수를 호출할 거야

• 차트가 data.json의 데이터로 그려진다
• 기간 버튼(1개월/3개월/1년)을 누르면 차트가 바뀐다
• 이동평균선 토글이 동작한다
• 챗봇 패널(대화 목록 + 입력창)이 자리를 잡았다 — 아직 응답은 없어도 된다

번역기로서의 LLM: 명령 프로토콜을 정의한다

이제 POST /chat에 Workers AI를 연결한다. 시스템 프롬프트에서 LLM의 역할을 "대시보드 컨트롤러"로 못박고, 반환할 수 있는 JSON 명령의 목록을 정의한다. 사용자의 어떤 말도 이 목록 중 하나로 번역되어 돌아온다.

POST /chat에서 Workers AI를 호출해 챗봇이 대시보드를 컨트롤하게 해줘.
시스템 프롬프트에 이렇게 정의해:
- 너는 대시보드 컨트롤러다. 사용자의 요청을 아래 JSON 명령 중 하나로 번역해서 JSON만 반환한다.
- 명령 목록:
  {"action":"set_range","months":1|3|12}
  {"action":"toggle_ma","on":true|false}
  {"action":"answer","text":"..."}  ← 데이터에 대한 질문이면 현재 화면 상태(state)를 참고해 답변
- 명령으로 번역할 수 없는 요청이면 {"action":"answer","text":"할 수 있는 것 안내"}를 반환한다.
프런트에서는 응답 JSON의 action에 따라 이미 만들어둔 함수를 호출하고,
answer면 챗봇 말풍선으로 표시해줘.
LLM 응답이 JSON 형식이 아닐 때를 대비해 파싱 실패 처리도 넣어줘.

테스트 시나리오

• "3개월만 보여줘" → 차트 기간이 3개월로 바뀐다 (set_range)
• "이동평균선 켜줘" → 지표가 토글된다 (toggle_ma)
• "최근에 제일 많이 오른 날이 언제야?" → answer로 데이터에 근거한 답변이 온다
• "피자 주문해줘" → 할 수 있는 것을 안내하는 답변이 온다

배포 주소 하나로 페이지와 AI 백엔드가 함께 열린다

Worker 배포는 명령 하나다. 커넥터를 연결해 뒀다면 대화로 배포를 지시해도 된다. 배포가 끝나면 .workers.dev 주소가 생긴다.

npx wrangler deploy

1. 배포 후 확인 — 다른 기기(스마트폰)에서 배포 주소에 접속해, 챗봇에게 지시했을 때 화면이 실제로 바뀌는지 확인한다.
2. progress.html 최종 갱신 — 전 단계를 완료 상태로 갱신하고, 결과물과 함께 배포한다. 개발 과정 자체가 포트폴리오가 된다.
3. 갤러리 제출 — cf-board.juhonov.workers.dev에서 [과제 제출] → 분반·회차 선택 → 제목·작성자 → 결과물 링크(.workers.dev 주소) → 설명 → 비밀번호 입력.

• 배포 주소가 열리고 챗봇이 응답한다
• 스마트폰에서 챗봇 지시 → 화면 변화 확인
• progress.html이 전 단계 완료 상태로 함께 배포됐다
• 갤러리에 제출 카드가 보인다

LLM은 화면을 그리지 않는다, 명령을 만든다