눈 뜨면 변해있는 AI 시대에 콘텐츠 마케터로 살아남기위해서는 무엇보다 빠른 소스 수집과 기획, 제작이 필요했어요.
국내의 계정들을 팔로업하는 수준으로는 콘텐츠의 1차 생산자(양질의..) 가 되기는 어렵다고 판단했고, AI 관련한 좋은 소스를 빠르게 수집하기위해 “AI 트렌드 자동 수집 서비스” 만들기에 돌입했습니다.
0. 본인의 기술 스택
프론트엔드 개발 경험(해보고싶은)
백엔드 공부(예정인)
즉, IT쪽에서 근무하며 귀동냥으로 들어본 언어가 전부이며 개발 경험 0회에 빛나는 노베이스 상태였습니다.
그래서 저는 프로젝트를 위해 바이브 코딩을 선택했고 가장 바이블한 조합(클로드 코드+ VS CODE)으로 시작했어요
1. 기획하기
<초기 기획>
- X, 뉴스, 블로그 등에서 소스를 수집하고 AI로 원문을 요약 → 카드뉴스 기획까지
해당 기획을 GPT에게 전달해 기술 스택 및 업무 단계를 정리해달라고 요구하니 비개발자인 저도 이해하기 쉬운 기획을 전달해줬습니다. GPT가 준 기획을 md파일로 변환해 프로젝트 폴더에 넣고 phase 1부터 실행하기로했어요.
Phase 1 - 뉴스 수집 API (뉴스/블로그/X)
Phase 2 - AI 요약 연동 (Gemini API)
Phase 3 - 프론트엔드 UI
Phase 4 - 배포
2. 바이브 코딩 시작하기
2-1. Phase 1 - 뉴스 수집 API (뉴스/블로그/X)
똑똑한 클로드 코드가 알아서 수집해오는 뉴스도 있었지만 제가 팔로우하는 계정들의 포스팅이나 블로그 글을 가져오고싶었습니다. X api만 연동하면되겠다 했더니 ..
#문제 1
너무 비싼 X api .. 하루에도 글이 와다다 쏟아지는 X의 특성상 무료 플랜으로는 한계가 있었습니다 (🥹 )그래서 저는
.
.
.
또 GPT에 물어봤어요^^
결론: X에서는 공식 RSS 제공을 중단했지만 우회 가능함 ㅋ
rss로 변환해주는 앱을 찾아서 제가 원하는 계정/블로그를 RSS로 변환해 클로드 코드에 전달했더니 잘 수집되었어요! rss.app이라는 사이트에서 진행했고, 무료는 아니지만 그래도 달에 8~16달러면 사용 가능해서 저는 계속 사용하려고합니다
제가 계속해서 수집하고싶은 URL을 RSS 피드 소스로 변환해서 NEWS//POSTS/BLOGS 로 분류했습니다!
2-2. Phase 2 - AI 연동
처음에 프로젝트 기획할 때 Gemini API 연동을 추천받았고 연동하기 쉬웠습니다.
언제까지 무료로 쓸 수 있는지 확인해봤는데 처리하는 양이 많지않고 혼자 사용하는 경우에는 쭉 무료로 사용 가능하겠더라구요! 혹시 몰라 내용 포함해둘게요.
(무료)사용 가능 모델: Gemini 1.5 Flash, Gemini 1.5 Pro, Gemini 3.0 미리보기
사용량 제한 (Rate Limits):
1.5 Flash: 분당 15회 요청(RPM), 하루 1,500회 요청(RPD) 등
1.5 Pro: 분당 2회 요청(RPM), 하루 50회 요청(RPD) 등
참고: 제한량은 구글 정책에 따라 변동될 수 있습니다.
주의사항 (중요): 무료 티어에서 입력한 데이터(프롬프트 및 응답)는 구글의 모델 학습 및 개선을 위해 사용될 수 있습니다. 민감한 개인정보나 기업 기밀은 입력하지 않는 것이 좋습니다.
다만 실 제로 콘텐츠를 요약할 때 문제가 발생했는데요.
#문제 2
AI 요약하기 후 카드뉴스 기획은 처리를 못함
AI 요약하기 > 핵심요약/세부요약 도출
콘텐츠 생성하기> 제목/본문1,2,3의 카드뉴스 내용 기획안도출
로 동작해야하는데 AI 요약하기는 제대로 동작하고 콘텐츠 생성하기는 동작하지않아서 작동원리를 파헤치다보니
API 호출을 요약하기에 한번 쓰면 다시 호출을 못하는 이슈여서 해당 부분 수정 요청했습니다.
(이 문제 역시 Claude Code ultra think 로 확인하고 해결했어요 ! )
2-3. Phase 3 - 프론트엔드 UI
처음 기획.md 파일을 기반으로도 기본적인 프론트엔드 작업을 해주기는 하지만
처음 디자인은 노트북 밝기 LOW로 두고 써야하는 디자인이라 .. 요소를 하나씩 바꾸다가
FIGMA MAKE가 떠올랐는데요 (아하!)
1.생각하는 UI 디자인을 최대한 상세하게 한글로 적어보기
2.LLM에 넣고 피그마 메이크 버전으로 영문 프롬프트 만들어달라고 요청하기
3.피그마 메이크에서 UI 확인 및 수정하기
피그마가 나노바나나3를 통해 더 좋아졌다는 이야기를 듣긴했는데 확실히 하나하나 바꾸는 것보다 훨씬 퀄리티가 좋았습니다! 해당 디자인을 코드로 변환한 파일을 클로드 코드에 넣었지만 프론트에 제대로 반영이 안됐는데요.클로드 코드와 대화를 해보니 피그마와 제 작업물의 프론트 코드가 달랐어요 (!!)
# 문제 3
피그마는 React를 사용, 제 기존 작업은 Vanila JS 사용해서 반영 X스택을 설정했는데 왜 이 과정이 필요했을까싶어서 기획.md파일을 확인해보니
프론트에 대한 스택은 정의되지않았 .. 백 언어/프레임워크만 적혀있어서 Vanila JS라는 오오오오래된 언어를 쓴 것 .. 다음부터는 프론트/백 모두 확인해야겠다고 생각하며 React로 모두 변형했습니다.
피그마 메이 크 사용하실 분들은 처음부터 프론트는 React로 작업하시면 좋을 것 같아요!
2-4. Phase 4 - 배포
vercel을 이용해서 배포하는 것은 이슈가 없었지만 배포 전에 해결해야할 문제가 있었는데요.
#문제 4
4-1. 매번 RSS 수집을 호출해 소스 로딩 시간이 오래 걸린다.
4-2. 리프레시를 수동으로 진행해야한다<해결방법>
매번 API 호출 ➡️ supabase DB를 불러오기
수동 새로고침 ➡️ vercel crons 활용해 30분마다 불러오기
3. 완성과 회고
원하는 소스를 빠르게 수집할 수 있는 AI TREND 서비스를 완성할 수 있었습니다.
아직 고칠 부분이 많지만 그래도 트렌드 파악이나 콘텐츠 초안 잡기에는 무리가 없는듯해요
<추가로 개선해보고싶은 부분>
나노바나나 연결해서 카드뉴스 썸네일 제작
프론트에서 소스 출처 추가하고 백에서 자동으로 반영되게 설정
👩🏻💻첫 바이브 코딩 회고
(바이브 코딩 하는 저의 모습을 대변하는 밈 .. )
클로드 코드가 하는 것을 다 믿지말고 하나 하나 들여다보는 것이 도움이 된다
토큰을 아끼기위해 프론트의 텍스트 정도는 직접 작업하는 것이 좋은듯하다
프론트/백의 기본 지식은 아는 것이 삽질 단축에 도움이 된다
앞으로 실제 업무에 도움이되는 서비스를 계속 만들어보고싶다는 생각이 들었던 첫번째 프로젝트였습니다💫
