"오늘 뭐 쓰지?"를 끝낸 방법 — Claude Code로 만든 네이버 블로그 키워드 자동화 대시보드

소개

네이버 블로그를 운영하면서 매번 "오늘은 무슨 주제로 글을 쓰지"부터 막혔습니다. 검색은 되는데 남들도 다 써놔서 경쟁이 심한 키워드인지, 아니면 검색량 대비 아직 안 써진 "황금 키워드"인지 감으로만 판단하다 보니 글감 찾는 데만 시간을 다 썼어요.

그래서 Claude Code로 블로그 키워드 분석기 대시보드를 직접 만들어보기로 했습니다. 목표는 세 가지였어요.

1. 검색량 대비 경쟁도(발행된 블로그 문서수)를 계산해서 "황금 키워드"를 자동으로 찾아주는 것

2. 매일 아침, PC를 켜지 않아도 새로운 추천 키워드와 글감이 자동으로 채워져 있는 것

3. 그 글감으로 블로그 초안과 인스타그램 카드뉴스까지 한 번에 만들 수 있는 것

챗봇 창에서 그때그때 물어보는 걸 넘어서, 실제로 매일 돌아가는 나만의 도구를 만들어보고 싶었던 게 가장 큰 동기였습니다.

진행 방법

사용한 도구

• Claude Code — 대화로 요구사항을 설명하면 코드를 짜고, 배포하고, 문제가 생기면 원인을 찾아 고치는 전체 개발 과정을 진행

• Next.js 16 (App Router) + TypeScript + Tailwind CSS — 대시보드 웹앱

• GitHub + Vercel — 코드 저장소와 배포, Vercel Cron(예약 실행)·Vercel Blob(데이터 저장)으로 "매일 자동 갱신" 구현

• Anthropic API (@anthropic-ai/sdk, claude-sonnet-5) — 대시보드 안에서 블로그 초안을 즉석에서 생성하는 기능

• next/og (Satori) — 서버에서 바로 PNG 카드뉴스 이미지를 만들어주는 렌더링 엔진

어떻게 활용했나

처음부터 설계도를 그려놓고 시작한 게 아니라, "이렇게 하고 싶다"를 한국어로 설명 → Claude Code가 구현/테스트/배포 → 문제 생기면 같이 원인 찾기를 반복하는 방식으로 진행했어요.

1) 대시보드 뼈대 요청

네이버 블로그 글감을 수집하기 위한 블로그 키워드 분석기 대시보드를 만들려고 해

이 한 문장으로 시작해서, 키워드 검색량/경쟁도를 계산하는 로직부터 만들었습니다. 핵심 공식은 이거예요.

// src/lib/score.ts
export function buildKeywordStat(
  keyword: string,
  pcSearch: number,
  mobileSearch: number,
  blogDocCount: number
) {
  const totalSearch = pcSearch + mobileSearch;
  const competitionRatio = totalSearch > 0 ? blogDocCount / totalSearch : blogDocCount;
  const goldenScore = (totalSearch / (blogDocCount + 1)) * 1000;
  return {
    keyword, pcSearch, mobileSearch, totalSearch, blogDocCount,
    competitionRatio, goldenScore,
    grade: computeGrade(competitionRatio), // 황금 / 양호 / 보통 / 포화
  };
}

[스크린샷 넣을 곳: 대시보드 홈 화면 — 키워드 분석 결과 테이블]

2) 자동화 파이프라인 요청 — 범위를 좁혀가는 대화

경쟁력 있는 키워드로 매일 블로그 포스팅을 자동화하고 싶어. 대시보드에 매일 경쟁력 있는 키워드와 글감을 업데이트 해줘. 그리고 키워드와 글감을 기준으로 블로그 포스팅을 완성하고 싶고 이를 바탕으로 인스타그램 카드이미지 컨텐츠 제작과 릴스 영상도 만드는 자동화 파이프라인을 만들고 싶어

이 요청에 대해 Claude Code가 먼저 "자동화가 안 되는 부분"을 짚어줬어요 — 네이버 블로그는 개인용 공식 포스팅 API가 없고, 인스타 자동 게시도 완전 무인으로는 불가능하다는 점이었습니다. 덕분에 범위를 이렇게 정리했어요.

3) 매일 자동 갱신 — 아키텍처를 한 번 갈아엎은 과정

처음엔 Claude Code의 클라우드 예약 실행 기능으로 시도했는데, GitHub 원격 저장소가 필요하고 로컬 프로젝트 구조와 잘 안 맞았어요. 그래서 GitHub → Vercel 배포 → Vercel Cron(매일 06:00 KST) → Vercel Blob 저장 → 대시보드가 읽어서 표시하는 구조로 다시 짰습니다.

// src/app/api/cron/daily-refresh/route.ts
export async function GET(req: NextRequest) {
  const authHeader = req.headers.get("authorization");
  if (process.env.CRON_SECRET && authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }
  const data = await buildDailyPicks();
  await saveDailyPicks(data); // Vercel Blob에 저장 (로컬은 파일로 폴백)
  return NextResponse.json({ ok: true, date: data.date, count: data.picks.length });
}

[스크린샷 넣을 곳: Vercel 프로젝트의 Cron Jobs 등록 화면 + "오늘의 추천 키워드 & 글감" 섹션]

4) 인스타 카드뉴스 — 한글 폰트 이슈

next/og로 서버에서 바로 PNG를 만들었는데, 기본 폰트에 한글 글리프가 없어서 글자가 다 깨졌어요. Pretendard(OFL 오픈폰트 라이선스) 폰트 파일을 직접 받아 프로젝트에 넣어서 해결했습니다.

// src/app/api/card-image/route.ts (일부)
const fonts = await loadFonts(); // Pretendard-Regular.otf, Pretendard-Bold.otf
return new ImageResponse(element, { width: CARD_WIDTH, height: CARD_HEIGHT, fonts });

[스크린샷 넣을 곳: 실제 생성된 카드뉴스 이미지 (제목 슬라이드 + 내용 슬라이드)]

5) 대시보드에서 블로그 초안 생성 — 비용 발생 기능은 매번 확인받고 진행

이거 블로그 글로 써줘 명령을 클로드코드 앱이 아니라 텔레그램 봇에서 명령하고 받아볼 수 있도록 해줘

이 요청엔 봇이 응답하려면 결국 Claude API를 서버에 붙여야 해서 호출마다 비용이 든다는 걸 먼저 설명받았고, 텔레그램 대신 대시보드 버튼 방식으로 정리했어요. 모델은 비용/품질 균형을 고려해 claude-sonnet-5로 직접 선택했습니다.

// src/lib/blogDraft.ts (일부)
const response = await client.messages.create({
  model: "claude-sonnet-5",
  max_tokens: 4096,
  system: SYSTEM_PROMPT, // 자연스러운 블로그 톤, 확인 안 된 수치는 지어내지 않기 등
  messages: [{ role: "user", content: userPrompt }],
});

[스크린샷 넣을 곳: /draft 페이지에서 초안이 생성된 화면]

6) 실제로 글감 하나 골라 글까지 완성

챗GPT 활용법 총정리 — 이것만 알면 끝 후기 라는 주제로 글 써줘

대시보드 메인화면 캡처

ALT

한국어 이름 목록이 포함된 한국어 앱 스크린샷