
AI가 자동으로 블로그를 작성한다고?
안녕하세요! 오늘은 제가 개발한 트렌디 블로그 프로젝트를 소개하려고 하게씁니다.
이 프로젝트는 Google Trends에서 실시간 키워드를 크롤링하고, 엄선된 키워드를 기반으로 AI(GPT-4)가 자동으로 블로그 포스트를 작성하는 프로젝트 입니다
1. 프로젝트 개요
트렌디 인사이트 블로그는 매일 트렌드 키워드를 분석하고, SEO에 최적화된 블로그 콘텐츠를 자동으로 생성하는 시스템입니다.
2. 기술 스택
Frontend
- Next.js 14
- Styled-Components
- Zustand (상태관리)
Backend
- Express.js
- Puppeteer (웹 크롤링)
- Node-cron (스케줄링)
AI & Database
- OpenAI GPT-4 (콘텐츠 생성)
- DALL-E 3 (이미지 생성)
- Firebase Firestore
3. 시스템 동작 플로우
전체 시스템은 다음과 같은 순서로 자동화되어 있습니다:
ㄱ. 서버 시작 (Express)
ㄴ. 트렌드 키워드 크롤링 (Puppeteer)
ㄷ. 황금키워드 추출 (SEO 최적화)
- 크롤링한 키워드를 키워드 마스터에서 분석후 좋은 연관 키워드를 크롤링
ㄹ. GPT-4로 콘텐츠 생성
- 황금키워드를 OpenAI의 API를 사용해 블로그 포스팅 하고
ㅁ. Firebase에 저장
- 포스팅된 글을 FireBaseDB에 저장하여 DB를 구축
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
1. 프론트엔드 페이지 구성
ㄱ. 메인 페이지
추천 포스트
- 모든 카테고리에서 랜덤 6개 추출
오늘의 포스트
- 당일 작성된 포스트만 필터링
ㄴ. 카테고리 페이지
- 각 카테고리별로 포스트를 필터링해서 보여줍니다.
/popular- 인기 검색어 포스트/health- 건강 관련 포스트/business- 비즈니스 및 금융 포스트
ㄷ. 상세 페이지
- 마크다운 렌더링 (react-markdown)
2. SEO 최적화 전략
- 블로그의 핵심은 SEO입니다. 다양한 SEO 최적화 기법을 적용했습니다.
- 메타데이터 최적화
- 동적 메타데이터 (각 포스트별)
- 구조화된 데이터 (JSON-LD)
- Sitemap 자동 생성
- Robots.txt
3. UI/UX 디자인
- PC, TABLET, MOBILE 등 다양한 디바이스를 고려한 반응형 디자인
4. 핵심 특징 및 장점
ㄱ. 완전 자동화
- 매일 오전 9시에 자동 실행
- 사람 개입 없이 콘텐츠 생성
- 매일 신선한 포스트 발행 가능
ㄴ. 스마트 키워드 전략
- 트렌드 + 황금키워드 조합
- 경쟁도 낮은 키워드 타겟팅
- 검색 유입 극대화
ㄷ. SEO 최적화
- Server-Side Rendering (SSR)
- 동적 메타데이터 생성
- 구조화된 데이터
- Sitemap/Robots.txt
5. 프로젝트 회고
ㄱ. 잘한 점
- 처음부터 끝까지 내가 생각했던대로 특별한 문제없이 개발을 끝마쳤다.
- 이전 블로그 배포할때 사용한 AWS 사용법을 사용해서 잘 배포했다.
- 이전 블로그 개발할때 부족함을 느꼈던 SEO 개선 및 동적 OG등에 대해 아쉬운점을 느끼고 이번 프로젝트에 잘 반영함.
ㄴ. 아쉬운 점
- 내가 원하는 이미지를 제대로 생성하지 못한거 같아서 잠시 주석 처리해둔게 아쉬움.
- Puppeteer를 사용해서 크롤링 하다보니 서버 백단에서 동작하는데 무리가 있었음.
- FireBase 말고 다른 DB를 사용해보지 못해서 아쉬웠음.
ㄷ.배운 점
- OpenAI의 API 사용방법
- Next.js 14 App Router의 SEO 최적화 방법
- 구글 서치 콘솔 설정 방법 및 색인 설정 방법
6. 마무리
길고긴 추석연휴 동안 내가 만든 서비스로 100원이라도 벌어보고 싶다는 생각에 개발을 시작해서 무사히 배포까지 끝마쳤지만, 앞으로 구글 서치 콘솔에 무사히 등록이 되야하고, 애드센스도 통과를 해서 수익을 내서 내가 이 프로젝트를 시작한 이유를 달성하고 싶고, 수익형 블로그라는 이름에 걸맞게 쿠팡파티너스 등 다양한 수익화 방법을 이 프로젝트에 녹여서 경제적 자유를 느껴보자!!
궁금한 점이나 개선 아이디어가 있다면 댓글로 남겨주세요!