AI 일잘러 ④ 내 업무 대시보드 만들기: 흩어진 정보를 한 화면에

앞선 편에서 만든 자동화 결과(기사 모니터링, Slack 알림 등)를 매번 따로 돌리는 대신, 한 화면에 모아 버튼만 누르면 최신 상태로 보는 '나만의 업무 대시보드'를 만듭니다. 예약 실행(cron) 대신, 백엔드(데이터 수집·키 보관) + 프론트엔드(화면) 구조의 작은 로컬 웹앱으로 만들며, 5단계로 진행합니다. ① 왜 프론트+백엔드인가 ② 담을 위젯 설계 ③ 백엔드 만들기 ④ 프론트엔드 만들기 ⑤ 실행·확장입니다. 1편에서 익힌 '키는 .env에, 연결은 프롬프트로' 원칙을 그대로 확장하므로, 코드를 직접 짜지 않아도 됩니다.

1. 왜 '프론트+백엔드' 구조인가요?

대시보드를 정적 HTML 한 장으로 만들면, API 키가 브라우저(프론트엔드)에 그대로 노출됩니다. 그래서 키를 들고 외부 서비스를 호출하는 일은 백엔드가 맡고, 화면은 프론트엔드가 맡도록 역할을 나눕니다. 1편의 "키는 .env에" 원칙을 한 단계 발전시킨 구조입니다.

동작 흐름은 다음과 같습니다.

1. 화면(프론트엔드)에서 새로고침 버튼을 누릅니다.
2. 프론트엔드가 내 컴퓨터의 백엔드에 "데이터 줘"라고 요청합니다.
3. 백엔드가 .env의 키로 네이버 등 외부 API를 호출해 데이터를 받아옵니다.
4. 백엔드가 정리한 결과를 프론트엔드에 돌려주고, 화면이 위젯으로 그립니다.

이렇게 나누면 키는 백엔드(.env)에만 머물고, 화면에는 결과만 표시되므로 안전합니다. 모든 것이 내 컴퓨터 안에서 돌아가 외부로 새지 않습니다.

2. 대시보드에 담을 것 설계하기

코드를 만들기 전에, 무엇을 한 화면에서 보고 싶은지 '위젯' 단위로 먼저 정합니다. 위젯이란 대시보드 안의 작은 정보 카드 하나를 말합니다. 각 위젯마다 '무슨 데이터를, 어디서, 어떻게 가져올지'를 적어 두면 다음 단계가 쉬워집니다.

자주 쓰는 위젯 후보는 다음과 같습니다.

1. 경쟁사 뉴스 — 2편에서 만든 네이버 검색 API 결과를 그대로 카드로 표시
2. 오늘 할 일 — 직접 입력하거나 메모 파일을 읽어 표시
3. 주요 지표 — 방문자·매출 등 매일 확인하는 숫자 한 줄 요약
4. 일정·마감 — 캘린더 API나 마감 목록에서 임박한 항목 표시

처음에는 위젯 1~2개로 작게 시작하고, 익숙해지면 늘리는 것이 좋습니다. 핵심은 "매일 아침 이 화면 하나만 보면 되는" 구성입니다.

3. 백엔드 만들기 (데이터와 키 담당)

먼저 데이터를 모아 주는 백엔드를 만듭니다. 직접 코드를 짜는 대신, Claude Code에 ".env 키로 데이터를 받아 화면에 넘겨줄 작은 로컬 서버"를 만들어 달라고 요청하면 됩니다. 예를 들어 이렇게 적습니다.

내 컴퓨터에서만 도는 작은 백엔드 서버를 만들어줘. (Python FastAPI)
.env의 NAVER_CLIENT_ID·NAVER_CLIENT_SECRET로 네이버 검색 API를 호출해서
'버거킹' 최신 뉴스 5건을 가져오는 /api/news 주소를 만들어줘.
키는 코드에 쓰지 말고 .env에서 읽고, 결과는 제목·링크만 JSON으로 돌려줘.

이렇게 요청하면 AI가 .env에서 키를 읽어 네이버 API를 호출하고, 정리한 결과를 /api/news 주소로 내려주는 서버 코드를 만들어 줍니다. 위젯을 추가할 때마다 "할 일 목록을 주는 /api/todos도 만들어줘"처럼 주소를 하나씩 늘리면 됩니다.

4. 프론트엔드(대시보드 화면) 만들기

백엔드가 데이터를 내려주면, 그 데이터를 보기 좋게 그리는 화면을 만듭니다. 이것도 프롬프트로 맡깁니다. 백엔드가 만든 주소를 불러와 위젯으로 배치해 달라고 요청합니다.

방금 만든 백엔드의 /api/news를 불러와서 보여주는 대시보드 화면을 HTML로 만들어줘.
- 위쪽에 '새로고침' 버튼, 누르면 최신 데이터를 다시 불러오기
- 뉴스는 카드 형태로, 제목을 누르면 원문 링크로 이동
- 카드들을 격자(그리드)로 배치하고, 다크 네이비 톤으로 깔끔하게

이렇게 하면 버튼 한 번에 백엔드를 다시 호출해 화면이 갱신되는 대시보드가 완성됩니다. 위젯을 늘릴 때는 "오른쪽에 할 일(/api/todos) 위젯도 추가해줘"처럼 화면 구성만 말로 지시하면 됩니다.

5. 실행하고 한 걸음 더

마지막으로 백엔드 서버를 켠 다음, 브라우저에서 localhost 주소로 대시보드 화면을 열면 끝입니다. 실행 방법도 Claude Code에게 물어보면 명령어를 알려 주며, 보통 한 줄이면 충분합니다.

이 백엔드를 내 컴퓨터에서 실행하는 방법을 알려줘.
그리고 실행한 뒤 브라우저에서 어떤 주소(localhost)로 들어가면
대시보드가 보이는지 알려줘.

서버를 켠 상태에서 안내받은 localhost 주소로 들어가면 대시보드가 뜨고, 새로고침 버튼으로 언제든 최신 상태를 볼 수 있습니다. 켜 두는 동안 자동으로 일정 시간마다 갱신되게 하고 싶다면 "화면이 5분마다 자동으로 새로고침되게 해줘"라고 한 줄 덧붙이면 됩니다. 위젯을 하나씩 늘려 가면, 매일 아침 이 화면 하나로 업무를 시작하는 '나만의 일잘러 대시보드'가 완성됩니다.

---

참고: FastAPI 공식 문서 · 네이버 검색 API 문서 · Claude Code 공식 문서