[#004] v0 최신 질문 모드와 Claude Code로 유튜브 댓글 CSV를 협찬 문의·악플·아이디어 관제판으로 만들기 [Vibe Coding, v0, Claude Code, CSV 웹앱]

이번에 만들 것

유튜브 댓글 CSV를 올리면 협찬 문의, 바로 관리해야 할 댓글, 다음 콘텐츠 아이디어를 자동으로 갈라주는 댓글 관제판을 만듭니다. 댓글이 쌓일수록 중요한 신호를 놓치기 쉬운데, 이 도구는 먼저 볼 줄을 바로 뽑아줍니다.

지난 편에서 FAQ 마이크로사이트를 만들었다면, 이번에는 읽는 페이지에서 끝내지 않고 실제 데이터가 들어오는 운영 도구로 넘어갑니다.

준비물

v0 changelog에서 최근 추가된 clarifying questions와 work details를 확인했고, Claude Code docs, OpenAI GPT-5.4 guide, Cursor Background Agents, GitHub Copilot cloud agent, Replit Agents도 최신 변경사항을 확인했습니다. 이번 과제는 UI를 빨리 고정하고 CSV를 바로 붙이는 흐름이어서 v0와 Claude Code 두 개만 씁니다.

v0 계정, Claude Code가 열린 로컬 프로젝트, 그리고 댓글 20줄 정도 들어 있는 CSV 하나를 준비하세요. 컬럼명은 딱 맞지 않아도 됩니다. 오히려 들쭉날쭉한 CSV일수록 이번 수업이 더 잘 먹힙니다.

따라하기

Step 1: v0가 먼저 질문하게 만드세요

v0 새 채팅을 열고 아래 그대로 넣으세요. 최근 v0는 생성 전에 clarifying questions를 먼저 던질 수 있어서, 처음부터 엇나가는 비율이 확 줄었습니다.

Ask me up to 3 clarifying questions first. Then build a single-page web app called Comment Triage Desk. It should accept a YouTube comments CSV and sort rows into Sponsorship Leads, Moderation Needed, and Content Ideas. Use client-side parsing, a sample CSV download, counters, search, and a detail drawer. Keep the first version local-first with no auth and no database.

질문이 2~3개 먼저 나오면 정상입니다. 여기서 기능 목록을 10개 넘게 한 번에 추가하면 화면은 그럴듯한데 실제 업로드 흐름이 흔들리기 쉽습니다.

Step 2: 답변을 짧게 주고 1차 화면을 고정하세요

v0가 물어보면 아래처럼 짧게 답하세요. 이 단계에서는 분류 기준보다도 업로드, 카운터, 리스트, 상세 패널이 먼저 살아나는지가 더 중요합니다.

1) Common columns: comment, author, video_title, likes, published_at.
2) I need Korean and English keywords.
3) Add a reason badge for each label and a CSV export after labeling.

업로드 영역, 세 개의 분류 컬럼, 검색창, 상세 패널이 보이면 정상입니다. 생성이 끝나면 v0의 work details에서 수정 파일 수와 크레딧 사용량도 같이 확인하세요. 여기서 로그인, DB, 결제까지 한 번에 붙이려고 하면 오히려 CSV 처리 디버깅이 늦어집니다.

Step 3: Claude Code로 컬럼 흔들림과 분류 이유를 잡으세요

v0 프로젝트를 GitHub로 내보낸 뒤 로컬에서 Claude Code로 여세요. 이제부터는 예쁜 화면보다 실제 CSV가 덜 깨지게 만드는 단계입니다.

Make the CSV importer tolerant to messy headers. Map common aliases such as comment/text/message/body, author/name/channel, likes/like_count, and video/title. Show why each row was classified. Keep everything local-first and do not add auth, a database, or external APIs.

여러 CSV를 넣어도 컬럼을 알아서 매핑하고, 각 행에 왜 그런 라벨이 붙었는지 짧은 설명 배지가 붙으면 정상입니다. 여기서 특정 컬럼명 하나만 하드코딩하면 본인 CSV에서는 되는데 다음 파일에서 바로 무너집니다.

Step 4: 내 기준을 바꿀 수 있게 만들고 바로 공유하세요

실제로 쓰려면 분류 규칙을 손으로 바꿀 수 있어야 합니다. 마지막 프롬프트로 설정 패널과 재실행 흐름까지 붙이세요.

Add a Settings panel so I can edit keyword lists for Sponsorship Leads, Moderation Needed, and Content Ideas, save them to localStorage, re-run classification without re-uploading, and export a labeled CSV. Add a privacy note that all processing happens in the browser and keep the app deployable as a static site.

설정값을 바꾸고 새로고침해도 유지되면 정상입니다. 프리뷰가 안정적이면 공유 링크나 정적 배포로 바로 열어보세요. 개인정보가 들어간 원본 댓글을 다루는데 브라우저 내 처리 문구가 없다면 다른 사람에게 열어주기 전에 먼저 보완해야 합니다.

직접 해보기

본인 채널 댓글 CSV 대신 뉴스레터 답장 CSV를 넣고 분류 축을 '구매 신호 / 기능 요청 / 후기 인용 가능'으로 바꿔보세요. 프롬프트는 그대로 두고 라벨 이름과 키워드만 바꾸면, 같은 구조로 전혀 다른 운영 도구가 나옵니다.

결과물 체크

1) 컬럼명이 조금 달라도 CSV가 업로드됩니다.
2) 각 댓글이 세 가지 분류 중 하나로 들어가고, 이유 배지가 보입니다.
3) 설정에서 키워드를 바꾸면 다시 분류되고, 라벨링된 CSV를 내보낼 수 있습니다.

다음 편 예고

다음 편에서는 이 관제판을 매일 아침 자동으로 돌려 요약 리포트를 만드는 반복 작업 자동화로 이어갈 겁니다.