커뮤니티 기능 개발 전 네이버 블로그 RSS & API로 연동하기

[Next.js]

초기 서비스를 운영하다 보면 가장 곤란한 순간이 바로 '텅 빈 리뷰 섹션'을 마주할 때입니다. 자체 리뷰 시스템을 구축하고 데이터를 쌓기까지는 시간이 걸리죠. 오늘은 네이버 블로그의 데이터를 활용해 우리 서비스의 신뢰도를 즉시 높여줄 수 있는 임시 리뷰 시스템 구축기를 공유합니다.

Vercel과 Supabase 환경에서 네이버 RSS와 검색 API를 통합하여 데이터 형식을 깔끔하게 맞추는 실전 가이드를 확인해 보세요.

---

1. 사전 작업: 네이버 API 권한 획득

데이터를 가져오기 전, 네이버 디벨로퍼스에 접속하여 애플리케이션을 등록하고 아래 키를 발급받아야 합니다. 이 키가 있어야 JSON 방식의 블로그 검색 결과를 호출할 수 있습니다.

• NAVER_CLIENT_ID
• NAVER_CLIENT_SECRET

---

2. 개발 요구사항 정의 (Me)

구현에 앞서 제가 세운 전략은 명확했습니다. 공식 블로그가 있다면 해당 피드를 우선하고, 없다면 키워드 검색으로 보완하는 '하이브리드' 방식입니다.

🙋‍♂️ Me: 요구사항 정의
"아직 리뷰 작성 기능이 없으니 당분간 블로그 글을 이용하려고 해. 홈페이지 주소가 blog.naver.com으로 네이버 블로그 주소면 블로그 RSS 주소에서 최근 글 목록을 불러오고, 아니라면 기관명으로 네이버 블로그 검색 API(JSON)를 참조해서 최근 글 목록을 보여주게 해줘. 인프라는 Vercel과 Supabase를 이용할 거야."

위 내용을 전달하며 시안 이미지를 요청했습니다.

요구사항을 더 세분화 하기 위해 제미나이에게 프롬프트 작성을 요청합니다.

---

3. 해결사의 제안: 개발 프롬프트 설계 (Gemini)

제 요청을 받은 Gemini는 Next.js 환경에서 RSS와 JSON API라는 서로 다른 규격을 하나로 합칠 수 있는 최적의 프롬프트를 제안했습니다.

🤖 Gemini: Vercel용 통합 리뷰 API 개발 프롬프트
[구현 목표]
사용자가 전달한 url과 name을 기반으로 리뷰 목록을 반환하는 API(app/api/reviews/route.ts) 작성.
[핵심 로직]

1. URL 판별: url 파라미터에 blog.naver.com 포함 여부 확인.
2. Case A (RSS): 블로그 ID 추출 후 rss-parser 라이브러리로 데이터 파싱.
3. Case B (JSON API): ${name} 후기 키워드로 최신순(sort=date) 5개 요청.

[데이터 통일화]
출처에 상관없이 응답은 아래 인터페이스의 배열(JSON)이어야 함.

interface Review {
  title: string;       // HTML 태그 제거됨
  link: string;        // 블로그 포스트 원문 링크
  description: string; // 요약 내용 (HTML 제거)
  date: string;        // YYYY-MM-DD 형식
  isOfficial: boolean; // RSS 출처면 true
}

제미나이가 작성해준 프롬프트를 안티그라비티에게 전달합니다.

---

4. 실전 가이드: 상세 실행 계획 (antigravity)

이 프로젝트의 핵심 뼈대인 antigravity의 실행 계획입니다. 단순히 코드를 짜는 것을 넘어 아키텍처와 에러 처리 전략까지 포함된 실무 지침서입니다.

🚀 antigravity: 블로그 리뷰 API 구현 계획
### 📂 구현 파일 구조

src/
├── app/api/reviews/route.ts      # 통합 API 엔드포인트
├── lib/
│   ├── review-parser.ts          # RSS/검색 결과 파싱 유틸
│   └── html-utils.ts             # HTML 태그 제거 헬퍼
└── types/review.ts               # Review 인터페이스 정의

### 🛠️ 단계별 체크리스트

• Phase 1 (기초): rss-parser 패키지 설치 및 환경 변수(.env.local) 설정.
• Phase 2 (유틸): HTML 정제 함수 및 데이터 파서 구현.
• Phase 3 (API): /api/reviews/route.ts 구현 및 폴백(Fallback) 로직 테스트.
• Phase 4 (Front): ReviewsSection 컴포넌트 구현 및 로딩/에러 UI 처리.

### 🛡️ 에러 처리 전략

• RSS 파싱 실패: 검색 API로 자동 폴백(Fallback).
• API 오류/키 누락: 서버 다운 방지를 위해 빈 배열([]) 반환 및 콘솔 경고.
• 네트워크 오류: 프론트엔드 안정성을 위해 조용히 실패 처리.

---

5. 실무 디테일 및 수정 사항

개발 과정에서 더 나은 사용자 경험을 위해 아래와 같은 디테일을 추가했습니다.

• 피드 우선순위 조정: 내부 리뷰의 정확한 데이터가 아니라 참조용 데이터로 판단해서 RSS 피드 관련 UI 위치를 하단으로 조정했습니다.
• 주의 문구 표시: 검색 API로 가져온 데이터 하단에 "네이버 블로그 검색 결과로 해당 시설과 무관한 내용이 포함될 수 있습니다."라는 안내 문구를 추가했습니다.
• 카드 디자인 통일: RSS(공식)와 검색(일반) 데이터에 상관없이, 아이콘이 빠진 카드에 통일감 있는 아이콘을 배치해 UI 완성도를 높였습니다.

---

6. 솔직한 개발 후기

AI를 활용한 개발은 확실히 효율적입니다. 하지만 이번 작업을 통해 느낀 점은 "코드 생성은 빠르지만, 검증이 너무 느리다"는 것입니다.

• 테스트의 어려움: 네이버 블로그의 다양한 설정(비공개, RSS 닫힘) 때문에 실제 데이터를 검증하는 과정이 생각보다 오래 걸렸습니다. 테스트에서도 상황에 따른 예시 링크를 적절히 제공을 해줘야 좋은 결과와 빠른 검증이 가능합니다.

그럼에도 불구하고, 단일 엔드포인트로 복합적인 데이터 소스를 처리하는 이 방식은 초기 서비스 운영에 엄청난 효율을 가져다주었습니다.

---

🔗 관련 참고 링크

• 네이버 검색 API 가이드
• RSS 공식 피드 구조

---

포스팅이 도움되셨나요? 모두 즐거운 바이브 코딩 하세요! 🚀