키워드 리포트 대시보드는 키워드 CSV 한 장을 넣으면 어떤 콘텐츠를 먼저 만들지 보여주는 작은 로컬 도구입니다. 완성되면 브라우저에서 CSV를 올리고, 검색량·난이도·의도 점수를 섞어 우선순위 표와 간단한 차트를 봅니다.
지난 편에서는 포스터 한 장으로 행사 신청 페이지를 만들었죠. 이번에는 이미지가 아니라 숫자를 AI에게 맡깁니다. 회사에서 콘텐츠 회의할 때 감으로 고르는 순간이 많거든요. 매달 구독료 내는 입장에선 이런 작은 도구 하나가 꽤 현실적인 절약입니다.
오늘의 AI 감독 스킬
목표는 키워드 리포트 대시보드 하나로 좁힙니다.
제약은 외부 API 없이 로컬 HTML 파일로 둡니다.
완료조건은 샘플 CSV, 점수 계산식, 오류 메시지, 검수표까지 적습니다.
수정은 전체 갈아엎기가 아니라 계산식 한 곳만 바꾸게 시킵니다.
도구는 둘만 씁니다
작업용은 Codex CLI입니다. Codex CLI는 터미널에서 로컬 폴더의 코드를 읽고, 파일을 바꾸고, 명령을 실행할 수 있는 코딩 에이전트입니다. 설치는 npm i -g @openai/codex, 실행은 프로젝트 폴더에서 codex면 충분합니다. 요즘 문서에서 제가 크게 본 건 로컬 코드 리뷰와 이미지 입력, 그리고 cloud task가 같은 흐름 안에 들어왔다는 점인데요. 오늘은 로컬 수정과 리뷰만 씁니다.
검수용은 Claude Code입니다. Claude Code는 터미널, IDE, 웹에서 코드베이스를 읽고 여러 파일을 다룰 수 있고, @파일명으로 파일을 바로 물릴 수 있습니다. Claude 쓰는 분은 Claude Code에서 같은 프롬프트를 넣고, Codex 쓰는 분은 Codex CLI에서 작업한 뒤 Claude Code로 읽기 전용 검수를 맡기면 됩니다.
작은 CSV를 앱으로 바꾸기
1
먼저 완성 조건을 박아 넣기
AI에게 보낸 프롬프트
새 폴더 keyword-dashboard를 만들고, 외부 API 없이 브라우저에서 바로 여는 키워드 리포트 대시보드를 만들어줘. 파일은 index.html과 README.md만 사용해. CSV 컬럼은 keyword, volume, difficulty, intent, lastUpdated야. CSV 업로드 후 상위 10개 키워드를 표로 보여주고, opportunity score는 volume 곱하기 100에서 difficulty를 뺀 값 나누기 100으로 계산해. intent가 buy이면 점수 옆에 구매 의도 배지를 붙여줘. 샘플 CSV 5줄도 README에 넣어줘. 완료조건은 더블클릭 실행, 잘못된 CSV 오류 표시, 모바일에서 표가 깨지지 않기야.
왜 이렇게 시켰나: 목표, 파일 수, 데이터 모양, 계산식, 완료조건을 한 번에 줘야 AI가 멋대로 서버나 라이브러리를 붙이지 않습니다.
이렇게 나오면 정상입니다. index.html 하나를 열었을 때 파일 업로드 버튼, 샘플 컬럼 안내, 빈 상태 문구가 보여야 합니다.
여기서 처음부터 React, DB, 로그인까지 넣어달라고 하면 안 됩니다. 키워드 리포트 대시보드의 첫 버전은 작아야 고치기도 쉽습니다.
2
부족한 결과를 보강하기
AI에게 보낸 프롬프트
좋아. 지금 결과에서 사용자가 실수하기 쉬운 지점을 보강해줘. CSV에 필수 컬럼이 빠졌을 때 어떤 컬럼이 없는지 알려주고, volume과 difficulty가 숫자가 아니면 그 행을 건너뛰지 말고 오류 목록에 보여줘. 예제 CSV 다운로드 버튼도 추가해줘. 기존 디자인 톤은 유지하고 파일 수는 늘리지 마.
왜 이렇게 시켰나: 부족하다고 다시 만들라고 하지 않고, 사용자가 실제로 막히는 입력 오류만 콕 집었습니다.
이렇게 나오면 정상입니다. 일부 행이 틀린 CSV를 넣었을 때 화면에 어떤 행이 문제인지 보입니다.
여기서 그냥 더 예쁘게 해줘라고 하면 안 됩니다. 예쁘다는 말은 AI에게 너무 넓습니다.
3
계산식만 정밀 수정하기
AI에게 보낸 프롬프트
수정 범위를 제한할게. opportunity score 계산 함수와 화면의 계산식 설명 문구만 바꿔줘. 새 계산식은 volume을 CSV 안의 최대 volume으로 나눠 0부터 1 사이로 정규화하고, 100에서 difficulty를 뺀 값을 100으로 나눈 뒤 곱해. intent가 buy이면 마지막 점수에 20퍼센트 보너스를 줘. 다른 UI와 CSV 파싱 코드는 건드리지 마.
왜 이렇게 시켰나: AI에게 바꿀 곳과 건드리지 않을 곳을 같이 줬습니다. 데이터 도구에서는 계산식이 바뀌면 결과 해석도 같이 흔들리니까요.
이렇게 나오면 정상입니다. 같은 CSV에서 buy 의도 키워드가 약간 올라가고, README의 설명도 새 계산식으로 바뀝니다.
여기서 전체 파일을 리팩터링하라고 하면 안 됩니다. 작은 수정은 작은 범위로 막아야 합니다.
4
다른 AI에게 읽기 전용 검수 맡기기
AI에게 보낸 프롬프트
@index.html @README.md를 수정하지 말고 검수만 해줘. 이 키워드 리포트 대시보드가 목표대로 동작하는지 확인해. 점수 계산식, CSV 오류 처리, 모바일 표, 예제 CSV 설명을 pass 또는 fail로 나눠줘. fail이면 사용자가 바로 고칠 수 있는 문장으로 최대 3개만 적어줘.
왜 이렇게 시켰나: 검수 AI에게 수정 권한을 주지 않았습니다. 작업자와 검사자를 나누면 이상한 대규모 수정이 줄어듭니다.
이렇게 나오면 정상입니다. Claude Code가 pass/fail 표를 만들고, 고칠 항목을 세 개 안쪽으로 줄여줍니다.
여기서 검수하면서 알아서 고쳐줘라고 하면 안 됩니다. 검수와 수정을 섞으면 원인 추적이 어려워집니다.
자주 터지는 세 가지
컬럼 이름이 다릅니다. CSV에 Keyword처럼 대문자가 섞이면 인식이 안 될 수 있습니다. 해결은 README에 정확한 컬럼명을 크게 쓰고, 앱에서는 빠진 컬럼을 화면에 보여주는 겁니다. 여기서 사용자가 알아서 맞추겠지 하고 넘기면 안 됩니다.
점수 기준을 아무도 모릅니다. 표에 숫자만 있으면 회의에서 바로 질문이 나옵니다. 계산식 설명을 화면과 README 양쪽에 넣어야 합니다. 여기서 수식 설명을 코드 안에만 숨기면 안 됩니다.
수정 요청이 너무 큽니다. 계산식만 바꾸면 될 일을 디자인까지 같이 바꾸게 시키면 버그가 늘어납니다. 해결은 바꿀 파일, 바꿀 함수, 건드리지 않을 범위를 적는 겁니다.
다음으로 붙이면 꽤 쓸 만해집니다
한 걸음 더
확장 과제는 두 개만 해보세요. 하나는 키워드 리포트 대시보드에 즐겨찾기 컬럼을 추가하는 일입니다. 다른 하나는 상위 5개 키워드를 이번 주 콘텐츠 캘린더 문장으로 바꾸는 버튼입니다.
다음 편에서는 이 결과를 텔레그램 알림으로 보내는 쪽을 붙여볼 생각입니다. 로컬에서 끝난 도구가 하루 한 번 말을 걸기 시작하면 느낌이 또 달라지거든요.
