AX 바이브코딩 | 커서로 구글 테크뉴스 추천 기능 구현하기

25.08.20 / JUN

이번 포스트에서는 바이브코딩 도구인 커서(Cursor AI)를 이용해서 구글 뉴스 컬렉션 중 테크뉴스를 추천하는 기능을 구현하는 방법을 소개합니다.

---

P1. 커서 바이브코딩 실무활용 튜토리얼 영상

---

P2. 바이브코딩 구현 결과물: 워드프레스 플러그인 (v0.6)

저의 테크뉴스 모음: 구글 컬렉션 링크
https://www.google.com/collections/s/list/yFbKlgObHIwHLGkBqmiCJYeXavXSpQ/a8FONifnfsU

현재 버전 v0.6은 뉴스 수집기능은 성공적으로 구현됐지만 너무 작은 폰트 크기 등은 추후 개선이 필요합니다. 다음 바이브코딩에서 개선해야겠네요.

---

P3. 이번 바이브코딩 프로세스 요약

1. 아이디어 메모 단계

• 핵심 메시지: “필요한 기능은 불편함 속에서 나온다”
• 기존 뉴스 소비 과정에서 불편한 점 정리
• 아이디어를 짧게 메모 → 기능 요구사항으로 변환
• 예시: “구글 컬렉션을 자동으로 불러와 블로그에 게시”
• 비주얼 제안:
  • 메모장 아이콘 ✏️
  • 불편함 → 아이디어 → 구현 흐름 다이어그램

2. 커서 프롬프트 작성 및 실행

• 핵심 메시지: “커서와 대화하며 코드로 바꾸기”
• 구상한 아이디어를 자연어 프롬프트로 작성
• Cursor 편집기에 붙여넣고 실행
• 챗GPT 스타일 답변을 통해 요구사항 검증
• 비주얼 제안:
  • 프롬프트 입력창 💬
  • 코드 자동 생성 아이콘 ⚙️

3. 빌드 시작과 진행

• 핵심 메시지: “커서가 확인하고, 자동으로 빌드한다”
• 커서가 요구사항을 재확인 후 빌드 시작
• 이번 빌드 소요시간: 약 15분
• 사용자 개입은 최소, 결과는 자동 생성
• 비주얼 제안:
  • 진행바(Progress bar)
  • 로딩 아이콘 ⏳

4. 배포 및 설치

• 핵심 메시지: “다양한 플랫폼으로 배포 가능”
• 배포 타겟:
  • 모바일 앱 📱
  • 웹앱 🌐
  • 노션 📒
  • 워드프레스 플러그인 🔌 (실습 예시)
• 실습에서는 블로그용 워드프레스 플러그인으로 설치
• 비주얼 제안:
  • 플랫폼 로고 나열
  • 배포 화살표 → 워드프레스

5. 결과 확인과 개선

• 핵심 메시지: “한 번에 성공! 하지만 개선은 계속된다”
• 첫 빌드 성공 🎉
• 지난번 Kiro 사용 때 실패 → 이번엔 Cursor로 성공
• 개선 포인트: 작은 폰트 크기, UI 최적화 필요
• 비주얼 제안:
  • 성공 화면 캡처 🎯
  • 체크리스트 아이콘 ✔️

---

이번 포스트를 읽어주셔서 감사합니다. / 첫 포스팅: 25.08.20 / 포스트 문의: JUN (naebon@naver.com)