영화 추천 앱 "MovieNest"의 감정 기반 개인화 시스템 구현

카테고리

• *프로그래밍/소프트웨어 개발**

서브카테고리

• *앱 개발**

대상자

• 개발자 (JavaScript, REST API, TMDB 활용), UX/UI 디자이너 (사용자 감정 기반 추천 로직)
• 난이도: 중급~고급 (API 연동, 상태 관리, 사용자 경험 개선)

핵심 요약

• 감정 기반 추천 로직: weather + time → mood → TMDB genre 매핑 (moodGenreMapping 객체 활용)
• 지리 정보 거부 처리: navigator.geolocation 사용 시 시간만 기반으로 감정 추론
• 성능 최적화: virtual scroll + debounce로 UI 반응성 향상
• TMDB 연동: 35, 10751 (Comedy, Family) 등 장르 코드 동적 호출

섹션별 세부 요약

1. 문제 정의 및 목표

• 기존 시스템의 한계: 사용자 감정에 따른 영화 추천 기능 부재
• 목표: 날씨, 시간, 감정을 연동한 개인화 추천 시스템 구현
• 핵심 기술: OpenWeather API, JavaScript, TMDB API

2. 감정 매핑 로직

• 날씨-시간 조합:

- Rainy Night → Romantic Thriller (🌧️🌙)

- Sunny Morning → Feel-Good Comedy (☕☀️)

- Foggy Afternoon → Mystery Drama (🕵️‍♀️)

• moodGenreMapping 객체:

```javascript

{

feelgood: [35, 10751], // Comedy, Family

cozy: [10749, 18], // Romance, Drama

}

```

3. 지리 정보 처리

• 권한 거부 시 대응:

- navigator.geolocation 사용 시 시간만 기반으로 감정 추론

- 사용자에게 "날씨 정보가 없어도 추천 가능" 메시지 표시

• API 비용 절감: OpenWeather OneCall API 3.0 → 무료 API로 전환

4. 성능 최적화

• UI 반응성: virtual scroll + debounce로 무한 스크롤 처리
• 페이징 오류 수정: 새로운 감정/검색 시 페이지 초기화 로직 추가

5. 미래 기능

• 협업 시청 목록 (Collaborative Watchlist)
• 음성 기반 검색 (Voice-based Search)
• AI 기반 감정 예측 (GPT + 날씨 예측 모델)

결론

• 핵심 팁:

- 무료 API 활용 (OpenWeather, TMDB)

- 권한 거부 시 대응 로직 필수 (시간 기반 감정 추론)

- UI/UX 개선: Mood Explanation Banner로 추천 이유 투명성 강화

• 실무 적용: moodGenreMapping 객체를 기반으로 TMDB 장르 코드를 동적으로 호출하며, 사용자 맞춤형 추천 시스템 구현 가능.