[SSAFY] 1학기 최종 프로젝트 : 영화 추천 사이트

TMDB API를 활용한 데이터 기반 영화 추천 사이트 개발

싸피 1학기 과정을 마치면서 1학기 동안 함께 공부했던 팀원들과 팀장 및 Client Server 담당자로 영화 추천 사이트를 개발하게 되었다. 

프로젝트를 시작하면서 팀원들과 의견을 취합하는 과정에서 우리가 가장 먼저 했던 일은 우리가 할 수 있는 것과 현실적(경제적)으로 불가능한 일을 구분해 나가는 것이었다. 이 과정을 거치면서 우리의 주 목적인 영화 추천을 어떻게 효과적으로 할 수 있을지 고민해보았다. 그리고, UX를 향상하는 기능을 집중 목표로, 영화 추천 / 게시판을 개발하기 위해 노력했다.

현재 인기있는 OTT사이트들 (OTT사이트는 우리 프로젝트와는 달리 스트리밍 기능까지 있다는 차이점이 있음)을 참고했을 때, 우리 팀이 집중 한 공통점은
  1. 어두운 배경으로 영화관 처럼 모니터에 집중할 수 있도록 시각적 효과를 주었다.
  2. 홈화면 부터 추천된 영화를 노출하여 고객들의 선택의 폭을 줄였다,
  3. 영화디테일을 보여줄 때 모달을 통해 정보를 보여준다

특히, 우리는 3번에 집중을 했다. 왜 영화사이트들은 창을 이동하면 더 많은 정보를 줄 수 있을 텐데 창을 이동시키지 않고 모달을 통해 정보를 주는 것일까? 우리 팀은 그 이유를 "추천"에 있다고 생각을 했다. 아무리 좋은 추천을 하더라도 단 하나의 선택으로 이용자들이 원하는 영화를 찾기는 쉽지 않을 것이다. 즉,  사용자에게 다양한 추천을 하고, 사용자가 추천을 확인할 때, 다양한 영화 정보를 확인할 수 있도록 모달을 사용했다고 우리 팀은 생각했다.

그렇기 때문에 우리는 디테일을 모달에 구현하는 것을 첫번째 목표로 생각했다. 하지만 모달을 구현할 때 어려운 점이 있었는데, 모달을 구현할 때 가장 중요한 것 중 하나가 모달이더라도 모든 정보가 들어가는 것이고, 다른 하나는 디자인적 요소였다. 디자인적 요소가 부족하면 모달의 이점이 사라진다고 생각했기 때문에 디자인적  요소를 고려하면서 모달에 정보를 넣는 것이 이번 프로젝트에서 가장 힘들었던 점이었다.

정보를 너무 많이 넣는다면, 디자인적으로 보기 좋지않고, 그렇다고 정보를 줄이기에는 영화에 디테일을 보여준다는 모달의 취지와는 맞지 않았다. 우선 우리는 디테일 안에 이 영화의 기본적인 내용은 물론이고, 예고편 영상, 이 영화에 대한 사용자들의 내용을 넣고 싶었는데 이것들을 하나의 화면에 다 넣었을 경우 보기가 너무 좋지 않았다.

우리는 고민하다가 유튜브 영상을 처음부터 넣을 경우 배경 이미지와 곂치는것 같아 유튜브 영상도 버튼으로 모달 안에 모달로 구현해 보았고 결과는 만족스러웠다. 한 줄 리뷰와, 유튜브 버튼을 이용해 우리가 원하는 정보를 다 넣을 수 있었고, 디자인 도 만족할 수 있었다.

 

우리 팀의 차별화된 요소는 모달을 통한 UX 향상이었고, 나머지 게시판 역시 비동기를 활용하여 UX를 향상하려고 노력했지고 나름 성공적인 결과물이 나왔다고 생각한다.

처음부터 끝까지 처음 진행해 보는 프로젝트였는데, 팀원분들과 소통을 가지는 시간이 많았기 때문에 비교적 순조롭게 진행될 수 있었다.

나 자신의 부족함을 많이 배울 수 있었고, 더 발전할 수 있는 기회를 만들어주는 프로젝트 경험이었던 것 같다. 특히 CSS에서 아직 내가 부족하구나를 많이 느꼈고 내일부터 css공부를 다시 시작해야겠다는 동기를 주었다.

일주일간 노력이 보상받듯 너무 기쁜 사피 프로젝트 우수상(2등)을 받아 너무 행복한 프로젝트 경험이다. 앞으로 프로젝트 를 경험하면서 힘들 때는 오늘의 보상과 기쁨을 생각하면서, 포기하지 않고 진행할 수 있을 것 같다. 같이 고생한 팀원들에게 너무 감사하고 고맙다. 11조 NextLevel 앞으로도 파이팅!!!

 

이 프로젝트의 자세한 내용은 밑에 프로젝트 명세서 밑 깃 링크를 통해 코드를 확인할 수 있다.

---

1. 프로젝트 명세서

1. 프로젝트 개요
   • TMDB API와 YouTube API를  활용한 영화 정보 제공
   • 군집분석 알고리즘(코사인 유사도)을 활용한 사용자 맞춤형 영화 추천
   • 날씨와 시간 정보를 활용한 영화 추천
   • 한 줄 리뷰 게시판을 활용한 유저 소통의 장 마련
2. 데이터 베이스 모델링 (ERD)

ERD

3. 컴포넌트 모델링

컴포넌트 구조

4. 코드보기