Project · 06

AI 감정 분석 기반 음악 추천 서비스

2026.03 ~ 2026.06

대표 프로젝트

먼저 볼 핵심

Claude 감정분석 추천

Claude 응답을 정규화해 설명 가능한 추천과 히스토리 개인화로 연결했습니다.

운영 화면 보기 GitHub 설계 문서 보기 화면 보기 README

문제

Claude 응답 형식이 흔들리면 추천 결과와 화면 상태가 함께 불안정해지고, 외부 API 키가 프론트에 노출될 위험도 있었습니다.

내 역할

팀원의 React 음악 추천 프론트에 Spring Boot 백엔드 프록시 추가
Claude 감정 분석·추천·믹스 응답을 서비스 데이터로 정규화
공통 에러 처리·캐시·rate limit·Swagger 문서와 Oracle 단일 JAR 배포 담당

확인 결과

Claude 감정 분석 결과를 정규화해 설명 가능한 추천으로 변환
감정 결과·추천 기준·히스토리를 분리해 사용자 기록 기반 개인화
Oracle VM에 단일 JAR로 배포하고 헬스 체크로 운영 확인

제가 기여한 부분

팀원이 만든 React 프론트에 Spring Boot 백엔드 프록시 추가
외부 API 키를 프론트에서 제거하고 백엔드 환경변수로 이동
Claude 감정 분석·추천·믹스 응답을 서비스 데이터로 정규화

contribution

전체 기능 / 제 기여

전체 프로젝트 기능

감정 자유 입력 기반 AI 음악 추천
YouTube 인기 차트·검색·MV 재생
맞춤 믹스와 취향 기반 추천
Firebase 인증과 감정 히스토리, 미니 플레이어

제가 맡아 정리한 부분

팀원이 만든 React 프론트에 Spring Boot 백엔드 프록시 추가
외부 API 키를 프론트에서 제거하고 백엔드 환경변수로 이동
Claude 감정 분석·추천·믹스 응답을 서비스 데이터로 정규화
공통 에러 응답·Caffeine 캐시·IP rate limit·Swagger 문서 구성
Vite 빌드를 포함한 단일 JAR로 Oracle VM 배포와 헬스 체크

role

내 역할 · 규모

팀원의 React 음악 추천 프론트에 Spring Boot 백엔드 프록시 추가
Claude 감정 분석·추천·믹스 응답을 서비스 데이터로 정규화
공통 에러 처리·캐시·rate limit·Swagger 문서와 Oracle 단일 JAR 배포 담당

기술 스택

ReactViteFirebase AuthenticationFirestoreAnthropic Claude APIYouTube Data API v3Spring BootJavaScript

case flow

문제 · 해결 · 결과

핵심 성과

Claude 감정 분석 결과를 정규화해 설명 가능한 추천으로 변환
감정 결과·추천 기준·히스토리를 분리해 사용자 기록 기반 개인화
Oracle VM에 단일 JAR로 배포하고 헬스 체크로 운영 확인

문제

Claude 응답 형식이 흔들리면 추천 결과와 화면 상태가 함께 불안정해지고, 외부 API 키가 프론트에 노출될 위험도 있었습니다.

해결

Spring Boot 백엔드 프록시를 추가해 Claude·YouTube 호출을 옮기고, Claude 응답을 정규화한 뒤 감정 결과·추천 기준·히스토리 저장 흐름을 분리했습니다.

결과

추천 결과를 감정 기준으로 설명할 수 있고, 사용자 감정 기록을 기반으로 개인화하는 흐름을 운영 배포본에서 확인할 수 있게 정리했습니다.

architecture

설계 / 문서

아키텍처

React(Vite) 프론트 → Spring Boot 백엔드 프록시(API Proxy·Caffeine Cache·Rate Limit·Global Error Handler) → Anthropic Claude API·YouTube Data API v3
Firebase Auth/Firestore로 로그인과 감정 히스토리를 처리하고, Vite 빌드를 static resource로 포함한 단일 JAR로 Oracle VM 배포

ERD / DB

사용자, 감정 분석 기록, 추천 결과, 음악 메타데이터(YouTube videoId) 중심 Firestore 구조
운영 집계는 원본 프롬프트·IP 없이 H2 analytics DB에 요청 수·상태 코드·추천 이벤트만 저장

API 명세

감정 분석(POST /api/emotion), 추천(POST /api/recommend), 맞춤 믹스(POST /api/mix·/api/mixes), 취향 추천(POST /api/taste/recommend)
인기 차트·검색·videoId 조회(GET /api/chart·/api/search·/api/video-id), 헬스·운영 요약(GET /api/health·/api/ops/summary)

README / 문서 링크 보기

debugging

트러블슈팅

Claude 응답 형식 변화는 정규화와 AI_RESPONSE_PARSE_FAILED 분기로 처리하고, YouTube quota(YOUTUBE_QUOTA_EXCEEDED)는 Caffeine 캐시와 videoId 캐시로 호출을 줄였습니다. 외부 API 키는 백엔드 환경변수로만 두고 공통 에러 응답으로 화면 붕괴를 막았습니다.

verification

검증 / 운영 기록

보안 체크

YouTube·Claude API 키를 프론트에서 제거하고 Spring Boot 백엔드 환경변수로만 관리했습니다. 운영 로그는 client_ip를 SHA-256 해시로만 저장하고 원본 프롬프트·요청 body·API 키는 저장하지 않으며 IP 기반 rate limit을 적용했습니다.

운영 경험

Vite 빌드 결과를 Spring Boot static resource로 포함해 약 27MB 단일 JAR로 Oracle VM에 배포하고, /api/health 헬스 체크와 배포 검증 스크립트로 운영 상태를 확인했습니다.

features

주요 기능

감정 자유 입력 → Claude 감정 분석 → 맞춤 음악 추천

YouTube 인기 차트·검색·뮤직비디오 재생

좋아요·앨범·감정 기반 맞춤 믹스 생성

장르/아티스트 취향 기반 추천

Firebase 인증과 Firestore 감정 분석 히스토리 저장

분석 기록 기반 재생·다음에 재생·미니 플레이어

problem solving

문제 해결 과정

문제 상황

Claude 감정 분석 응답을 그대로 추천에 쓰면 응답 형식이 조금만 바뀌어도 화면과 추천 결과가 함께 흔들렸습니다.

해결 과정

Claude 응답을 백엔드에서 서비스 데이터(허용 감정 집합·추천곡 구조)로 정규화하고, 감정 결과·추천 기준·히스토리 저장을 분리했습니다. 파싱 실패는 AI_RESPONSE_PARSE_FAILED로 구분해 기본 흐름으로 떨어지게 했습니다.

배운 점

AI API는 붙이는 것보다 응답을 안정적인 서비스 데이터로 바꾸고 실패 경로를 설계하는 과정이 더 중요했습니다.

takeaways

프로젝트에서 배운 것

AI API 응답은 서비스 데이터로 정규화하고 실패 경로를 먼저 설계해야 함

감정 분석 결과와 추천 기준을 분리하면 추천을 설명할 수 있음

외부 API 키는 프론트에서 제거하고 백엔드 프록시로 옮겨야 안전함

캐시와 rate limit로 외부 API quota와 비용을 함께 관리해야 함

interview prep

면접 질문 3개

Q01

AI 응답을 그대로 추천에 쓰지 않은 이유는 무엇인가요?

Claude 응답 형식이 조금만 달라져도 화면과 추천이 흔들렸기 때문입니다. 백엔드에서 응답을 허용 감정·추천곡 구조로 정규화하고, 파싱 실패는 별도 에러 코드로 분리해 기본 흐름으로 떨어지게 했습니다.

Q02

이 프로젝트에서 본인이 맡은 부분은 어디인가요?

프론트는 팀원이 만든 React 앱이고, 저는 Spring Boot 백엔드 프록시를 붙였습니다. 외부 API 키를 프론트에서 제거하고 Claude·YouTube 호출을 백엔드로 옮긴 뒤 캐시, rate limit, 공통 에러 처리, Swagger 문서, Oracle 배포를 담당했습니다.

Q03