'2000명 고객과 소통해보자!' 무무목장의 우당탕탕 자동화파이프라인_2주차

1주차 파이프라인을 만들고 나서 뿌듯했습니다. Claude Code한테 "발행준비 해줘" 하면 알아서 해주는 게 신기하고 좋았어요.
근데 문제가 생겼습니다.

"지금 어디까지 됐지?"

Claude Code가 없으면 모릅니다. 열어서 "현황 보여줘" 하면 그때 보이긴 하는데, 그 사이에 뭔가 막혀 있어도 알 수가 없어요. 크론이 돌았는지 안 돌았는지, 유튜브 쇼츠가 등록됐는지, 팔로워가 늘었는지 줄었는지.
뭔가 자동화는 됐는데, 내가 눈 감고 운전하는 느낌이었습니다.

1차에서 만든 것:

• 유튜브 쇼츠 → Claude 치즈톤 변환 → Notion 콘텐츠DB 자동 등록

• "발행준비 해줘" / "발행해줘" Claude Code 명령어

• 카카오채널 팔로워 수 크론 수집

이게 실제로 돌아가고 있는지, 막혀 있는지를 볼 수 있는 관제탑이 필요하다는 걸 느꼈습니다.
그래서 2주차 목표: 자동화 대시보드를 만들자.

진행 방법

사용 도구

• Claude Code (코드 전체 작성)

• Next.js 15 + Tailwind CSS (프론트엔드)

• Vercel (배포 + Cron Functions)

• Notion API (KPI DB, 챗봇DB, 콘텐츠DB)

• Kakao 공개 API (팔로워 수 실시간 조회)

• YouTube Data API v3 + Claude Haiku

Step 1: 원하는 화면부터 정했다

Claude Code에게 코드 짜달라고 하기 전에, "내가 뭘 보고 싶은가" 부터 정리했습니다.

원하는 것:
- 카카오 팔로워 1,000명 목표 대비 현재 위치 (숫자 + 프로그레스바)
- 파이프라인A 상태: 콘텐츠가 지금 어느 단계에 몇 개?
- 파이프라인B 상태: 치즈 챗봇 정상 운영 중인지?
- 팔로워 30일 추이 차트
- 컨텐츠 검수 버튼 (검수완료 / 수정요청)

이 목록을 Claude Code에게 주고 설계부터 시작했습니다.

Step 2: 첫 배포까지

Claude Code가 Next.js 15 App Router 구조로 전체 코드를 작성했습니다. 처음 배포는 30분도 안 걸렸습니다. Vercel에 npx vercel --prod 한 방으로 끝.

문제는 그 다음부터였습니다.

🚨 시행착오 1: 팔로워가 0으로 표시

배포하고 나서 팔로워 수가 0이었습니다.

원인을 찾아보니, Server Component(page.tsx)에서 팔로워를 가져오는 방식이 문제였습니다. 코드가 내부적으로 http://localhost:3000/api/goals를 호출하고 있었는데, Vercel 프로덕션 서버에는 localhost가 없습니다.

// ❌ 문제 코드: Server Component에서 자기 API 라우트 호출
const res = await fetch("http://localhost:3000/api/goals"); // 프로덕션에서 죽음

// ✅ 해결: API 라우트 대신 함수 직접 호출
import { fetchKakaoFollowerCount } from "@/lib/kakao";
const currentFollowers = await fetchKakaoFollowerCount();

Next.js App Router의 Server Component는 자기 자신의 API 라우트를 내부 호출하면 안 됩니다. 라이브러리 함수를 직접 import해서 써야 해요. 이걸 몰라서 한참 헤맸습니다.

🚨 시행착오 2: Vercel 배포가 자꾸 꼬인다

프레임워크 자동 감지가 Next.js로 잡히지 않고 있었습니다. 빌드 로그에 dist directory not found 에러.

Vercel 대시보드 → Settings → Framework Preset을 수동으로 Next.js로 변경 후 재배포. 이후 정상 동작했습니다. 자동 감지가 항상 옳지는 않습니다.

🚨 시행착오 3: 챗봇 헬스가 항상 초록불

"파이프라인 B: 치즈 챗봇 — 정상 운영 중 🟢"

이게 하드코딩이었습니다. 오픈클로(외부 챗봇 플랫폼)와 API 연결이 없으니 실제 상태를 알 방법이 없었거든요.

현실적인 해결책을 생각했습니다. 매일 수동으로 통계를 Notion에 입력하는 구조가 이미 있으니, 마지막 입력일 기준으로 판정하면 어떨까?

3일 이내 입력 → 🟢 정상 모니터링 중
4~7일 이내   → 🟡 X일 전 마지막 기록
7일 이상     → 🔴 통계 미입력 — 운영 확인 필요

getLatestChatbotStat() 함수를 Notion에서 가장 최근 STAT 타입 데이터를 가져오도록 만들고, 날짜 차이로 헬스를 동적 판정하게 바꿨습니다. "운영 중인지 모름"에서 "언제 마지막으로 확인했는지 앎"으로 바뀐 것만으로도 의미 있었습니다.

ALT

한국사이트 스크린샷

ALT

한국사이트 스크린샷

ALT

한국사이트 스크린샷

Step 3: 파이프라인 구조 시각화 추가

대시보드를 쓰다 보니, 파이프라인의 각 노드에서 내가 뭘 챙겨야 하는지 한눈에 안 보였습니다. Mermaid 라이브러리를 설치하는 대신, Tailwind CSS로 커스텀 플로우 다이어그램을 직접 만들었습니다. (의존성 추가 없이 가능)

각 노드에 색상을 붙였습니다:

• ⚡ 초록 = 자동 (크론이 알아서)

• 👤 주황 = 수동 (내가 해야 함)

• 🌐 파랑 = 외부 서비스

• 🗄️ 보라 = 저장소 (Notion)

그리고 각 노드에 "챙겨야 할 것" 체크리스트를 달았습니다. YouTube API 할당량, Notion 환경변수, 중복 방지 로직 같은 것들.

Step 4: 콘텐츠 관리 탭 추가

탭을 둘로 나눴습니다:

• 파이프라인 관리: 운영 상태 모니터링

• 콘텐츠 관리: 발행된/발행 대기 콘텐츠 제목·태그·짧은글 인라인 편집

발행완료된 콘텐츠의 품질을 사후에 수정하고 싶다는 필요에서 나왔습니다. Notion에 들어가지 않고 대시보드에서 바로 편집 → 저장하면 Notion에 반영됩니다.

결과와 배운 점

배운 점

1. "보이는 것"과 "돌아가는 것"은 다른 문제다

자동화를 만드는 것과, 자동화가 잘 돌아가고 있음을 확인하는 것은 별개의 작업입니다. 파이프라인을 만들었다면 관제탑도 함께 만들어야 합니다.

2. 완벽한 연동이 아니어도 된다

챗봇 헬스 판정이 좋은 예입니다. 오픈클로와 실제 API 연결이 없어도, "마지막 수동 입력일 기준 판정"이라는 현실적인 대안으로 충분히 의미 있는 정보를 만들 수 있었습니다. 완벽한 자동화보다 현실적인 모니터링이 먼저입니다.

시행착오 요약

앞으로의 계획

• 팔로워 1,000명 목표 달성을 위한 마케팅 탭 추가

• 카카오 채널 발행까지 자동화 (현재 수동 업로드)

• 3주차: 카카오 채널 실제 발행 자동화 시도

• 홈페이지 완성 및 연동
  

글로 옮기고 나니 시행착오가 생각보다 많았네요. 막혔을 때 답답한 감정을 대시보드라는 결과물로 해소한 2주차였습니다. 비슷한 상황에 계신 분들께 조금이라도 도움이 됐으면 좋겠습니다. 🐄