소개
지난 2주간 진행해온 '요즘뭐배워요' 프로젝트가 한 단계 더 진화했습니다. 기본적인 데이터 시각화를 넘어서서 사용자가 관심 있는 주제를 직접 검색하고 탐색할 수 있는 기능을 구현하고자 했습니다.
MVP 단계에서 가장 중요한 것은 사용자가 실제로 사이트에서 원하는 정보를 찾을 수 있느냐는 것입니다. 단순히 트렌드를 보여주는 것을 넘어서, 사용자가 '내가 궁금한 배움 주제'에 대한 최신 정보를 직접 검색하고 확인할 수 있는 기능이 필요했습니다.
진행 방법
### 1. 데이터 수집 시스템 개선: n8n 최적화
먼저 기존의 일일 10개 뉴스 수집을 대폭 확대했습니다.
250개 수집 시스템 구축:
기존: 일일 10개 뉴스
개선: 일일 250개 뉴스 (API 제한 극복을 위한 분할 요청)
네이버 API 제한: display 최대 100 → 100+100+50 구조
n8n 워크플로우 개선:
Code1: 3개 요청 파라미터 생성
HTTP Request: 동적 파라미터로 자동 3회 실행
Code2: 3개 결과 병합 및 중복 제거
### 2. 데이터 품질 개선: Google Sheets 자동 필터링
수집된 데이터의 품질을 자동으로 관리하는 시스템을 구축했습니다.
ARRAYFORMULA 기반 자동 필터링:
```javascript
=ARRAYFORMULA(
IF(A2:A="","",
IF(OR(
COUNTIF($D$2:D2,D2:D)>1,
AND(F2:F<>"",COUNTIF($F$2:F2,F2:F)>1)
),"중복",
IF(REGEXMATCH(D2:D&E2:E,"(?i)운세"),"제외","포함")))
)
```
이 함수로 제목 중복, URL 중복, 관련 없는 키워드("운세" 등)를 자동으로 제거하고, 필터링된 데이터만 웹사이트에 표시됩니다. 그런데 중복 기사 삭제가 잘 안되는 경우가 있어 구글시트의 중복행 삭제 기능을 활용했습니다.^^ Supabase로 데이터를 이전하기 전까지 당분간 이렇게 수작업으로 하면 될 것 같습니다.
### 3. 검색 기능 구현: Lovable을 활용한 단계별 개발
검색 기능을 단계적으로 구현했습니다.
첫 번째 명령어: 기본 검색 시스템
```
검색창 기능 활성화 및 Google Sheets 연동으로 검색 시스템 구축:
1) 검색창 기능 활성화: 키워드 입력 후 Enter
2) Google Sheets filtered_data 연동: 제목과 요약 필드 검색어 매칭
3) 검색 모드 전환: 검색 실행 시 대시보드 숨김, 검색 결과만 표시
4) 페이지네이션 구현: 15개씩 단위 표시, "더보기" 버튼
```
두 번째 명령어: 모바일 최적화
```
모바일 검색 결과 최적화:
- 반응형 레이아웃: 데스크톱(테이블) vs 모바일(카드) 조건부 표시
- 카드 형태 검색 결과: 각 기사를 개별 카드로 표시
- 터치 친화적 설계: 전체 카드 클릭 영역, 적절한 간격과 크기
```
세 번째 명령어: 키워드 클릭 연동
```
키워드 클릭 검색 기능을 수정:
1) 검색 결과 표시 방식을 기존 검색창 검색과 동일하게 통일
2) 날짜 역순 정렬 적용
3) 15개씩 페이지네이션 + 더보기 버튼
4) 총 개수 표시 형식 통일
```
### 4. 하이브리드 개발 방식 활용
Lovable의 일일 명령어 제한을 극복하기 위해 다음과 같은 도구를 조합해서 활용했습니다.
개발 환경 조합:
Lovable: 복잡한 기능 구현 (AI 기반 빠른 개발)
Cursor: 단순 텍스트 수정 (직접 파일 접근)
GitHub: 자동 동기화 (버전 관리)
결과와 배운 점
### 성공적으로 구현된 기능들
기본 검색 시스템: 제목/요약 검색, 키워드 하이라이트, 페이지네이션
모바일 최적화: 데스크톱/모바일 구분된 반응형 UI
데이터 수집 확대: 일일 10개 → 250개 (배움 관련 일 최대 뉴스 추산량)
반자동 품질 관리: 중복 제거 및 키워드 필터링 일부 자동화
사용자 경험 통일: 모든 검색 방식에서 동일한 인터페이스
### 주요 시행착오와 깨달음
API 제한의 창의적 해결: 네이버 API의 display 100 제한을 만났을 때, 이 제한이 맞나요?, 100+100+50 분할 요청으로 해결했습니다. 때로는 제약이 더 나은 시스템 설계로 이어진다는 것을 배웠습니다.
하이브리드 개발의 효율성: Lovable만으로는 한계가 있었지만, Cursor와 GitHub을 조합하니 훨씬 효율적인 개발이 가능했습니다. 각 도구의 장점을 파악하고 적재적소에 활용하는 것이 중요합니다.
사용자 중심 설계의 중요성: 단순히 기능을 만드는 것이 아니라, 사용자가 실제로 어떻게 사용할지를 고민하며 개발하니 훨씬 완성도 높은 결과물이 나왔습니다. 특히 모바일 환경에서의 터치 친화적 설계가 중요했습니다.
### 기술적으로 흥미로웠던 부분
Google Sheets의 숨겨진 파워 ARRAYFORMULA를 활용한 실시간 데이터 필터링이 예상보다 강력했습니다. 복잡한 백엔드 없이도 상당한 수준의 데이터 처리가 가능하다는 것을 확인했습니다.
AI 도구의 학습 곡선 Lovable에 정확한 요구사항을 전달하는 방법을 나름 터득했습니다. 구체적인 기능 명세와 단계적 접근이 성공의 핵심이었습니다.
### 앞으로의 계획
현재 기본 검색 기능이 완성된 상태에서 다음 단계를 준비해볼까 합니다. 사정이 허락하면요^^:
데이터베이스 전환: Google Sheets에서 Supabase로 마이그레이션하여 성능 개선
데이터 추가: 빅카인즈, 한국학술지인용색인 등
검색 기능 전문화: 다양한 조건으로 검색
AI 인사이트 시스템: 토픽 모델링 결과 적용과 생성형 AI API 연동으로 주간 트렌드 분석글 자동 생성
메뉴 구조 개편: Home, Search, Insight 등으로 사이트 구조 구축
도메인 연결: 커스텀 도메인으로 연결
도움 받은 글 (옵션)
스터디에서 다른 분들의 n8n 활용 사례를 보면서 워크플로우 최적화에 대한 아이디어를 많이 얻고 있습니다. 아직 제대로 써보지 못한 것들이 많고요. 스터디장님께서 다양하게 시도(실패 포함^^)하는 모습에서 배운 바가 컸습니다. 많은 정보도 유용했고요!