소개
대략 일주일 전에 구축한 '요즘뭐배워요' 프로젝트의 기본 틀을 바탕으로, 이번에는 실제 데이터를 연동하여 작동하는 웹사이트를 만들어보고자 했습니다.
이번 작업에서는 지난 1주일 전후 동안 n8n을 활용해서 Google Sheets에 누적하여 저장한 뉴스 데이터(매일 10건의 뉴스)를 Lovable로 구축한 웹사이트에 실시간으로 연동하여 진짜 '살아있는' 트렌드 분석 사이트를 만들었습니다.
진행 방법
### 1. 데이터 연동: Google Sheets API 실시간 연결
먼저 n8n으로 수집된 데이터가 저장된 Google Sheets를 웹사이트에 연동했습니다. API 키를 발급( https://console.cloud.google.com/ ) 받고 다음과 같은 형식의 URL로 데이터에 접근할 수 있도록 설정했습니다:
```
https://sheets.googleapis.com/v4/spreadsheets/[SHEET_ID]/values/[SHEET_NAME]?key=[API_KEY]
```
데이터 구조는 다음과 같습니다:
date, timestamp, keyword, title, summary, url, originalUrl, source, pubDate
나중에 빅카인즈와 한국학술지인용색인의 데이터와 통합할 경우 이 데이터 구조는 수정될 가능성이 큽니다. 그래서 지금은 Claude가 제안한 대로 그대로 두었습니다.
### 2. Lovable을 활용한 단계별 시각화 구현
기존에 가상 데이터로 만들어진 시각화 요소들을 하나씩 실제 데이터로 교체했습니다. Claude Sonnet 4가 제안해준 Lovable 명령어를 적극 활용했습니다.^^
첫 번째 명령어: 최근 트렌드 차트 제작
```
최근 트렌드 차트를 실제 Google Sheets 데이터로 교체해주세요.
API 정보:
- URL: ...
구현 요청사항:
1. 위 API에서 데이터를 fetch해서 date 필드 기준으로 날짜별 기사 수를 집계
2. 기존 '최근 트렌드' 차트를 실제 데이터로 교체 (Chart.js 사용)
3. 차트 하단에 최신 기사 5개를 테이블로 표시
4. 나머지 섹션은 그대로 유지
차트 스타일: 기존 디자인과 동일하게 유지
```
하지만 날짜별 기사 수가 매일 10개로 동일해서 의미가 없다는 것을 깨달았습니다.ㅠㅠ^^
두 번째 명령어: 워드클라우드 제작 시도
```
'최신 뉴스 키워드' 워드클라우드를 실제 Google Sheets 데이터로 교체해주세요.
요청사항:
1. title 필드에서 텍스트를 추출하여 단어 빈도 분석
2. 한글 키워드 추출 (2글자 이상)
3. 불용어 제거 ("있다", "하다", "것이", "이는", "수", "등" 제거)
4. 상위 20개 키워드로 워드클라우드 생성
5. 기존 '최신 뉴스 키워드' 섹션을 실제 데이터로 교체
워드클라우드 스타일: 기존 디자인과 동일하게 유지
```
워드 클라우드가 제대로 나오지 않았습니다. 그래서 ...
세 번째 명령어: 키워드 분석으로 전환
```
'최신 뉴스 키워드' 섹션을 간단한 키워드 목록으로 교체해주세요.
Google Sheets API에서 title 필드 데이터를 가져와서 간단한 텍스트 목록으로 표시해주세요. 워드클라우드 대신 키워드를 크기별로 나열하는 형태로 만들어주세요.
```
빌드 에러가 발생했지만, 키워드 태그 형태로 성공적으로 구현되었습니다 ( 운세 11개, 오늘의 9개 등). 배움에 왠 운세?
네 번째 명령어: 통계 대시보드 제작
최신 인사이트 부분은 수집된 기사의 내용을 바탕으로 생성형 AI로 글을 써서 제공하는 부분인데, 생성형 AI를 아직 세팅하지 못해 다음과 같은 명령어로 간단한 통계 대시보드를 만들었습니다.
```
'최신 인사이트' 섹션을 배움 트렌드 통계로 교체해주세요.
Google Sheets 데이터를 분석해서 다음 통계를 카드 형태로 표시:
1. 총 수집 기사 수
2. 가장 많이 보도하는 언론사 TOP 3
3. 수집 기간 (첫 번째 기사 날짜 ~ 마지막 기사 날짜)
4. 기존에 추출한 키워드 TOP 3 재활용
각 통계를 현재 카드 디자인과 동일한 형태로 표시해주세요.
```
결과: 총 110건, TOP 언론사 www.ksmnews.co.kr (4건), 수집 기간 5.15~5.25 등, 간단한 결과입니다만, 정확한 통계를 표시할 수 있었습니다.
### 3. GitHub 연동 및 문서화
Lovable에서 GitHub 연동을 설정하여 모든 코드 변경사항이 자동으로 백업되도록 했습니다. 또한, 테스트 삼아, GitHub에서 프로젝트 현황에 맞게 README.md를 수정했습니다.
### 4. 로컬 환경과의 연동
Lovable 무료 계정의 명령어 제한을 극복하기 위해 윈도우 환경에 Cursor를 설치한 로컬 개발 환경을 활용했습니다.
워크플로우:
- 로컬에서 코드 수정: Cursor에서 AI를 활용하여 src/pages/Index.tsx 파일을 테스트 삼아 편집
- Git 커밋 및 푸시:
```sh
git add src/pages/Index.tsx
git commit -m "텍스트 및 스타일 수정"
git push
```
결과와 배운 점
### 성공적으로 구현된 기능들
- ✅ 실시간 데이터 연동: Google Sheets API를 통한 자동 업데이트
- ✅ 키워드 분석: 한글 텍스트에서 키워드 추출. 그런데 "운세"와 같은 관련 없는 키워드가 등장.ㅠㅠ
- ✅ 통계 대시보드: 총 기사 수, 주요 언론사, 수집 기간, 인기 키워드 4개 카드. 좀 더 의미 있는 통계 개발 필요
### 주요 시행착오와 해결 과정
1. 날짜별 트렌드 분석의 함정^^ 처음에 사람들이 보통 하듯이, 날짜별 기사 수 변화를 보여주려 했지만, n8n에서 매일 10개씩 수집하므로 의미없는 평평한 그래프만 나왔습니다. 이를 통해 데이터의 특성을 먼저 파악하고 적절한 분석 방법을 선택하는 것의 중요성을 배웠습니다.
2. 빌드 에러 vs 실제 작동 워드클라우드 구현 중 "Build unsuccessful" 에러가 발생했지만, 실제로는 키워드 분석이 정상 작동하고 있었습니다. 이런 에러 메시지가 어떤 영향을 주는지 추가 확인이 필요해보입니다.
3. AI 개발 도구의 효과적 활용법 Lovable 같은 AI 도구를 사용할 때는 한 번에 복잡한 요청보다는 단계별로 명확한 지시를 주는 것이 효과적이었습니다. 특히 API 정보, 데이터 구조, 구체적인 요구사항을 명시하면 성공률 이 높아졌습니다. 일일 5개 제한을 고려해서 4번의 명령어만 사용했습니다. Lovable 무료 계정의 제약(일일 5개, 월 30개)을 적극 활용해봐야겠다는 도전의식이 생겼습니다.^^
### 앞으로의 계획
현재 완성된 MVP를 기반으로 다음 단계를 계획하고 있습니다:
- 데이터 수집 정교화: 현재 일간 10개의 뉴스를 수집하는 기계적인 방식의 개선
- AI 인사이트 자동 생성: OpenAI API를 연동하여 트렌드 분석 글 자동 생성
- 고급 시각화: 워드클라우드, 네트워크 그래프 등 인터랙티브 요소 추가
- 데이터 소스 확장: 빅카인즈, KCI 등 학술 데이터 통합
- 사용자 피드백 시스템: 실제 사용자들의 의견 수집 및 개선
도움 받은 글 (옵션)
이번 프로젝트에서는 Claude AI와의 체계적인 대화를 통해 단계별 개발 전략을 수립했습니다. 특히 기술 스택 선택, 데이터 연동 방법, 시각화 우선순위 결정 등에서 AI의 조언이 매우 유용했습니다.
물론, 열정적인 스터디장이신 정기님과 자상하고 능력자인 조교?^^ 멍멍_님, 그리고 스터디에서 지식과 정보를 공유해주신 분들의 도움이 컸습니다!