harimchung / moofy

🏆최우수 프로젝트🏆 삼성 청년 SW 아카데미(SSAFY) 8기 관통프로젝트 비전공자 영화 추천 알고리즘을 이용한 웹사이트

 

Movie Only One For You

🥇 최우수 프로젝트 선정

당신의 취향에 꼭 맞는 영화를 추천해주는 단 하나의 사이트, 무피입니다.

목차

1. 만든 사람들
2. 주요 기능
3. 주요 UI 특징
4. 데이터베이스 모델링
5. 영화 추천 알고리즘
6. 후기

---

만든 사람들

기획, 설계 및 구현 과정 전반에서 유기적으로 협업했습니다. 각자가 주도한 기능과 분야를 서술합니다.

1. 윤대혁

   1. 데이터 수집 및 가공
   2. 검색 및 영화 추천 알고리즘 기획
   3. USER 모델 제작 및 USER 기능 구현

2. 정하림

   1. 알고리즘 구현
   2. UX/UI 디자인 구현

INSTALL

1. back

$ cd final-pjt-back
$ python -m venv venv
$ source venv/Scripts/activate
$ pip install -r requirements.txt
$ python manage.py migrate
$ python manage.py loaddata movies/vectordata_300.json
$ python manage.py runserver

2. front

$ cd final-pjt-front
$ cd movie-cli
$ npm install
$ npm run serve

주요 기능

목표

• 사용자의 사이트 이용 행동을 수집하여 개인화 추천 구현
• 실제 구현 정도 : 90%

영화

1. 추천
   • 사용자는 신규가입 시 약 300개의 영화 가운데 무작위로 추천 받습니다.
   • 최초로 고른 영화를 기반으로 하여 사용자의 취향을 분석합니다.
   • 이후 영화 상세페이지에 들어가거나 리뷰를 남기면 취향에 반영합니다.
   • 분석한 취향에 맞춰서 개인별 추천이 진행됩니다.
   • 회원가입 시 옵션으로 선택한 나이, 성별에 따라 추천이 진행됩니다.
     • 둘 중 하나만 선택한 경우 나머지 옵션은 랜덤으로 진행됩니다.
   • 많이 선택한 장르에 따라 추천이 이뤄집니다.
2. 검색
   • DB에 있는 영화 중 제목과 배우에 따른 검색기능을 지원합니다.
3. 예고편
   • youtube에 있는 해당 영화 예고편을 보여줍니다.

커뮤니티

1. 리뷰
   • 각 영화에 대하여 리뷰와 평점을 남길 수 있습니다.
   • 리뷰의 수와 평점은 실시간으로 반영되어 표시됩니다.
   • 본인이 작성한 리뷰를 수정, 삭제할 수 있습니다.

사용자

• 회원가입 시 옵션으로 나이와 성별을 선택할 수 있습니다.
• 회원정보 수정 및 탈퇴를 지원합니다. 이 때에는 비밀번호 유효성 검사가 이루어집니다.
  
  
  

주요 디자인 특징

• 반응형 웹
  • 사용자의 화면 크기에 맞게 추천 영화 포스터 이미지 크기와 수가 조절됩니다.
  • 사용자 화면에 맞춰서 디자인이 조절됩니다 (검색창, 통계자료, 검색결과)
• UX를 고려한 회원인증처리
  • 회원가입, 로그인 등 회원인증 처리를 router-link가 아닌 modal로 처리하여 회원가입 후 다시 홈으로 이동해야 하는 불편함을 고려하였습니다.
• UX를 고려한 영화 상세설명
  • 이전 위치와 상관없이 영화 상세설명으로 이동하면 자동으로 화면 상단으로 이동하도록 처리하였습니다.
  • 상세 설명 페이지에 들어가면 navbar의 배경색과 글씨색상이 변합니다.
  • 스크롤을 내리면 다시 원래 navbar 색상으로 변합니다.
  • 줄거리는 글자 단위가 아닌, 단어 단위로 행을 바꿔서 가독성을 높였습니다.
  • 영화 API에서 제공하는 배경 이미지가 없을 경우, 기본 이미지를 사용하도록 처리하였습니다.
• 직관적인 리뷰
  • 댓글 작성자에게만 수정, 삭제 버튼이 보이도록 처리하였습니다.
  • 리뷰에 남긴 평점은 실시간으로 계산하여 별로 표시하였습니다.
  • 별은 0.1점 단위로 조절하여 직관성을 높였습니다.
• 유효성 검사
  • 회원이 아닐 때에는 기본 화면을 보여주고, 상세 페이지로 이동하지 않도록 막았습니다.
• 404 페이지
  • 유효하지 않은 페이지로 이동 시 404페이지를 노출하도록 하였습니다.
  • nav 바가 상단에 있기 때문에 사용자는 자연스럽게 홈으로 이동할 수 있도록 유도하였습니다.

데이터베이스 모델링

1. 영화진흥위원회 api에서 제공하는 주간 박스오피스 영화의 제목을 약 3000개 정도 수집
2. 수집한 제목 데이터를 바탕으로 python 크롤링 프로그램을 작성하여, 네이버 영화 페이지에서 부가 정보가 존재하는 영화와 tmdb api에서 제공하는 video key값이 존재하는 영화를 대상으로 약 300개 정도의 데이터를 수집

영화 추천 알고리즘

1. 영화의 profile vector 계산

   • 영화의 특성을 나타내는 정보로 장르, 흥행 정도(popularity), 평점(actual_vote_average), 영화 상영시간(running time), 국가, 관람등급 6가지를 선정

   • 각 6가지를 차원으로 가지는 6차원 벡터로 모든 영화 데이터의 profile vector를 계산하여 데이터로 저장

   • 다음은 데이터를 저장할 때 사용한 기준이다.

     정보	저장 값	특징
     장르	0~28	범주화
     평점	실수	값 자체
     흥행정도	0, 1, 2, 3	로그변환을 수행하여 사분위수를 기준
     국가	0, 1, 2, 3	한국, 미국, 일본, 기타
     상영시간	0, 1, 2, 3	사분위수
     관람등급	0,1,2,3,4,5	전체 관람가, 12세 관람가, 15세 관람가, 청소년 관람 불가, 제한상영가, 등급보류

   • 영화의 profile은 불변하는 값이므로, 미리 계산하여 데이터로 저장하면 효율적인 알고리즘을 기대할 수 있다.

2. user의 profile vector 계산

   • 유저가 관심있어한 영화를 대상으로 적절한 가중치를 부여하고, 영화 profile vector의 가중평균을 유저의 profile vector라고 정의하고, 이것이 유저의 종합적인 취향을 나타내는 vector이다.
   • “적절한 가중치”란 유저가 사이트를 이용하면서 특정 영화에 대한 관심을 보이는 정도로 정의한다.
   • 사이트를 가입하여 이용한 최초에는 유저의 취향을 알 수 없으므로, 랜덤으로 영화를 제시하고 1개 이상의 관심있어한 영화를 체크한다.
   • 유저가 사이트를 이용하면서 영화 이미지를 클릭하면, 해당 영화의 상세정보 페이지로 이동하며, 이는 그 영화에 관심을 보인다는 뜻으로 1점을 부여
   • 영화의 상세정보 페이지에서 평점과 리뷰를 작성하면, 영화에 더욱 관심있어한다는 뜻으로 제시한 평점에 따라 1점이나 2점으로 차등 점수를 부여
   • 점수 부여는 상세 정보 페이지로 가거나, 리뷰를 작성하면 무한히 가능한데, 무한히 선형적으로 증가하는 것을 방지하기 위해 그동안 얻은 점수의 로그변환을 사용하여 가중치를 구한다.

3. 유저의 profile과 영화의 profile 사이 cosine similarity를 계산

   • 두 vector의 거리가 서로 가깝다는 것은 두 vector가 나타내는 특성이 서로 비슷하다는 뜻
   • 두 vector의 거리를 나타내는 정도로 cosine similarity를 계산하고 이 값이 클수록 두 vector가 서로 비슷하다는 뜻이다.
   • 유저의 profile vector와 영화의 profile vector의 cosine similarity가 크다는 뜻은, 두 vector의 특성이 서로 비슷하다는 뜻으로, 유저가 해당 영화에 관심있어할 가능성이 크다는 뜻이다.

4. 아직 보지 않은 영화에 대한 추천

   • 가지고 있는 모든 영화에 대하여 특정 유저가 관심있어한 정도 중 최솟값을 가지는 영화를 모두 찾는다.
   • 유저의 profile vector와 관심도가 최솟값인 영화의 profile vector의 cosine similarity를 구하여 큰 값을 가지는 영화 순서대로 10개를 추천

5. 가장 많이 선택한 장르를 가지는 영화 추천

   • 유저가 사이트를 이용하면서 상세페이지나 리뷰를 작성한 영화의 장르 정보를 수집한다.
   • 가장 많이 선택한 장르와 동일한 장르를 가지는 모든 영화를 찾는다
   • 유저의 profile과 해당 장르의 영화 profile의 cosine similarity를 구하여 큰 값을 가지는 영화 순서대로 10개를 추천

6. 가장 관심있어한 영화와 비슷한 영화를 추천

   • 유저가 사이트를 이용하면서 상세페이지나 리뷰를 작성한 영화중, 가장 관심있어한 영화를 찾는다.
   • 가장 관심있어한 영화의 profile과 나머지 모든 영화의 profile의 cosine similarity를 구하여 큰 값을 가지는 순서대로 10개를 추천

7. 영화 검색 알고리즘

   • 영화의 제목이나 배우명에 유저가 입력한 키워드가 포함된 모든 영화 데이터를 찾는다.
   • 해당 영화의 profile과 유저의 profile의 cosine similarity를 계산하여, 큰 값을 가지는 순서대로 검색 결과를 출력해준다.
     
     

후기

🤖 대혁

• 평소에 추천 시스템을 구현해보고 싶다는 생각을 했었는데, 가장 기본적인 cosine similarity를 이용한 알고리즘이었지만 이번 기회에 구현할 수 있어서 좋았습니다.
• 쉽게 모든 것을 구현할 수 있을 것이라고 생각했지만, 직접 해보니 평소에 아무 생각없이 이용하던 웹사이트들에 개발자들의 수많은 고려사항들이 숨어있다는 것을 느끼게 되었습니다. 예를 들어 회원정보 수정이나 탈퇴에 비밀번호 인증하는 것은 사용자들에게는 기본인데, 개발자 입장에서 귀찮아서 구현 하기 싫었던 기억이 납니다.
• 버그 고치기가 쉽지 않다는 것을 느꼈습니다. 쉽게 어떤 부분을 고치더라도 다른 부분에서 문제 생길지도 모르니 개발자들의 고충을 조금이나마 느낄 수 있었습니다.
• 기획과 소통의 중요성을 느낄 수 있었습니다. 충분히 기획하고 팀원과 잘 소통해서 그나마 큰 문제 없이 원하는 바를 잘 구현한 것 같았습니다
• 평소에 같이 팀되고 싶었던 마음속 1순위 친구와 팀을 이루어 프로젝트를 할 수 있어서 좋았습니다. 옆에서 너무 고생시킨 것 같아서 미안해…. 잘해줘서 너무 고마워.. 하림아.. 같이 프로젝트 해서 너무 재밌었어. 다음에도 같이 할 수 있었으면 좋겠다

🐶 하림

• 프로젝트 전에 1인분만 해내자! 하고 다짐했는데 1인분은 한 것 같아서 매우 뿌듯합니다.
• 처음 random한 영화를 보여주고, 사용자가 클릭한 movie data를 받아 DB에 저장 성공하던 날이 가장 기억에 납니다. (대혁님은 이제 일사천리라고 했지만 그 후로 수많은 에러를 만났다. 🙈)
• 프로젝트를 하며 정말 많은 걸 배웠는데 지금 기억나는 건 이미지, 동영상 비율을 유지하면서 크기를 줄이는 CSS 오늘 열심히 만든 model serailizer에 다른 필드 추가하기. 그리고 django에서 처음 만난 JSON Field 정도. 아, vue에서는 새로고침하면 정보가 다 날라가서 꼭 vuex로 보내야 한다는 것도.
• 신경쓰지 않으면 모를테지만, CSS 디테일에 신경을 많이 썼다. 반응형 web구현을 위해서 계속 화면크기를 바꿔가며 확인했다. 특히 navbar 같은 곳에 디테일을 담으려고 노력했다. 😆
• 대혁님께 짜증을 너무 많이 내서 죄송하다. 옆에서 수많은 칭찬으로 나를 힘나게 한, 최고의 파트너 👍
• Special Thanks To : 🐹