[MINTime 프로젝트] 영화 추천, 리뷰 사이트 개발 회고록 - 2 (movies)

---

ROOT 게시물은 이쪽 ↓↓↓↓↓↓

https://in0-pro.tistory.com/29

[MINTime 프로젝트] 영화 추천, 리뷰 사이트 개발 회고록 - 1

---

 

 

프로젝트 당시 제일 처음 고민했던 것은 '어떻게 영화 데이터를 가져오는가?'였다.

TMDB라는 영화 데이터 제공 사이트에서 API로 데이터를 가져올 수는 있겠는데,

이 데이터를 우리 DB에 저장하는 것이 문제였다.

그래서 나름대로 머리를 굴려본 결과, api로 데이터를 받아와 json 파일로 미리 만들어놓고,

json 파일을 DB에 푸시하는 히든 페이지를 만들어야겠다고 생각했다.

 

range(20000) 정도 (없는 아이디도 있기 때문에 결과적으로는 5000개 정도 데이터를 뽑았다.)를 설정하고

해당 아이디를 가진 영화를 get으로 요청한다.

그리고 몇 가지 조건이 있었는데,

overview가 10자 이상 존재하고 + 1980년대 이후에 나온 영화이고 + 포스터와 백드롭 이미지 주소가 있으며 + 트레일러 영상이 존재할 때

데이터를 담도록 했다.

제이슨 파일로 만든 코드는 아래와 같다.

json 파일로 만들기

인터넷에 검색해서 얻은 코드라 정확한 원리는 잘 모르지만,

movies.json이라는 파일에 mylist에 담긴 영화 정보를 인덴트는 tab을 기준으로 해서 데이터를 넣는 느낌이다.

그런데 이렇게 json 파일을 만들면 시간이 오래 걸린다.

20000개 다 조회하고 데이터 만드는 데 한 5~6시간? 걸린 것 같다.

vscode로 다른 일을 하면서 이 작업은 파이참으로 켜 두었다.

얼마 전에 노트북을 바꿔서 참 다행이라는 생각이 들었다.

이제 이렇게 만든 json 파일을 푸시하는 히든 페이지를 만들고, 혹시 모르니 스태프만 접근 가능하게 처리했다.

이 페이지 접근에 성공하면, 생성된 제이슨 파일을 로드한 후 미리 만들어 둔 Movie 모델에 하나씩 create 한다.

이 작업은 신기하게도 10초 내외로 끝났다.

아무튼, 이렇게 다소 수고스럽게(?) 가공해 푸시한 데이터를 유저에게 메인 페이지에서 보여준다.

 

1. index(메인)

마우스를 올리면 반투명하게 영화 정보를 보여준다.

from django.core.paginator import Paginator 하여 자동으로 페이지를 분배하게 하고, 아래와 같이 필터도 만들었다.

필터링

장르 필터는 펼치면 총 19개의 장르가 나타나고, 중복 체크가 가능하다.

필터는 말 그대로 django의 orm 'filter' 기능을 사용하여 구현했다.

개봉일 필터

일부 필터 코드를 공개하자면, 이러하다.

 

그리고 메인 페이지 UX에서 신경 쓴 점은, 자동 스크롤이다.

사용자가 영화 정보에 집중할 수 있도록 위쪽 광고 단을 넘기고 바로 영화 섹션으로 스크롤을 이동시켰다.

이 기능은 특히 페이지를 넘길 때 이상적으로 다가온다.

그리고 '지금 스크롤을 내렸다'라는 느낌을 주기 위해 일부러 'smooth' 효과를 주었다.

 

2. detail

상세 페이지

우측에 수정, 삭제 버튼은 관리자 계정에서만 보이고 일반 유저 계정에서는 보이지 않는다.

저 기능에 대해서는 manage 파트에서 다루겠다.

기본적인 영화 정보를 보여주고, 아래에 트레일러 영상도 보여준다.

리뷰 작성

그리고 이렇게 리뷰도 작성할 수 있다.

특정 영화에 한 번 리뷰를 작성하면 새로 또 작성하지는 못하고 리뷰 수정, 삭제만 가능하다.

현실적으로 보면 별점 위조를 막기 위해 이러한 장치가 필요하다고 생각하여 제한을 두었다.

리뷰는 <pre> 태그로 처리하여 사용자가 작성한 그대로 (엔터 등..) 반영할 수 있게 하였다.

 

리뷰 수정을 누른 경우에는 다른 페이지로 이동하지 않고 그 자리에서 바로 글을 고치는 느낌이 나게

javascript로 자신이 작성한 댓글을 hidden 처리하고, 스크롤을 smooth 없이 바로 맨 아래로 이동하게 하여

페이지가 reload 되었다는 사실을 사용자가 눈치채지 못하도록 했다.

하지만 주소창을 보면 reload 된 페이지가 맞다.. ㅎㅎ

 

3. search

네비게이션에 검색 박스가 있는데, 메인 페이지나 영화 상세 페이지에서 이 박스를 영화 검색 용도로 이용할 수 있다.

(커뮤니티, 매니저 페이지에서는 용도가 달라진다.)

그리고 이 부분에 재미를 위한 이스터 에그도 추가했다.

 

다음 챕터에서는 community app을 살펴보자.