sparta 팀과제 3 Netflix 클론코딩

이번에 하게 된 과제는 넷플릭스 클론코딩입니다.

저희 팀원은 저를 포함해 5명입니다. 

 

저는 여기서 User 모델을 담당하여 이와 관련된 기능을 맡았습니다. 이 글에서는 제가 담당하고 구현한 기능에 초점을 맞추어 설명하겠습니다.

레트로플릭스

팀 과제를 시작하기 전 처음에 어떤 식으로 과제를 할지 고민하던 중 90년대부터 2000년대 까지의 작품들로 구성된 넷플릭스, 이름하여 레트로플릭스를 만들기로 하였습니다.

 

 

User모델

장고에서 기본으로 제공하는 AbstractUser를 상속하여 만들었습니다. 

찜한 영화를 담기 위한 favorite_movies, 생일을 담는 birthday, 성별을 담는 gender, 닉네임을 담는 nickname, 프사를 담는 profile_img, 깃허브, 카카오로 혹인 회원가입을 통해 아이디가 생성되었는지를 기록하는 login_method로 구성하였습니다.

 

랜딩 페이지

처음 사이트에 들어왔을 때 보이는 화면입니다. '무료로 과거와 30일간 떠나보세요' 버튼을 누르면 회원가입으로, 로그인 버튼을 누르면 로그인화면으로 이어지게 됩니다.

 

 

회원가입 페이지

앞서 구성한 모델을 바탕으로 필요한 정보를 입력하도록 하였습니다. 여기서 이메일을 적고 '인증번호 보내기' 버튼을 누르면 해당 이메일로 10000~99999사이의 랜덤한 인증번호가 발송이 되고 인증번호가 일치하여야 회원가입이 됩니다.

django가 제공하는 send_email 기능을 사용하여 구현하였습니다.

 

또한 input에 적절한 값들이 입력되지 않거나, 아이디, 이메일이 중복이 되는 경우에는 다시 폼으로 돌아와 유효한 값을 적도록 하였습니다.

 

로그인 페이지

방금 생성한 아이디로 로그인 할 수도 있고, 깃허브와 카카오톡의 아이디가 존재한다면 그걸 사용하여 로그인 할 수 있도록 하였습니다. Oauth를 사용하여 구현하였습니다.

이 과정을 간략하게 설명해보겠습니다. 나, 유저, 깃허브가 있다고 가정해봅시다.

1. 먼저 깃허브에 나의 페이지 정보를 주고 인증에 필요한 정보를 받아 놓는다.

2. 유저는 깃허브로 로그인을 하고 로그인에 성공하면 유저에게 '코드를 발급해준다'

3. 유저는 그 코드를 나에게 주고 나는 그 코드를 깃허브에게 보낸다.

4. 깃허브는 유저에게 발급한 코드와, 내가 깃허브에 저장한 정보를 비교하여 맞다면 토큰을 발급해준다.

5. 그 토큰을 통해서 유저의 관한 정보에 접근하도록 깃허브에 요청을 보내면 깃허브는 그에 해당하는 정보를 준다.

 

이런 로직으로 흘러가게 됩니다. 하지만, 저희가 회원가입에 적었던 정보들이 소셜 로그인을 하였을 때는 존재하지 않을 수 있습니다. 따라서 소셜 로그인을 한 경우에는 먼저 마이페이지로 이동하여 필요한 정보들을 입력하도록 하였습니다.

비밀번호 찾기 버튼을 토글로 만들었습니다. 버튼을 누르면 아이디를 적어달라는 input이 나오고 해당하는 아이디가 있다면 해당 아이디의 email주소로 임시 비밀번호가 보내집니다. 임시 비밀번호는 숫자, 영어를 포함한 15자의 랜덤난수 

로 설정됩니다.

마이 페이지

나의 정보 프사, 아이디, 비번를 변경할 수 있고, 내가 찜한 영화 목록들이 나오게 됩니다. favorite_movies는 manytomany필드이기에 영화페이지에서 찜하기 버튼을 누르면 하나하나 추가되도록 설정하였습니다.

 

성별, 생년월일은 한번 바꾸면 고칠 수 없도록 해두어 화면에는 나오지 않고있습니다.

 

찜하기

찜하기 버튼을 누르게되면 ajax로 moive의 pk를 담아 서버에 통신을 보냅니다. try except문을 활용하여 로그인 된 유저의 favorite_movies.get을 사용하여 오류가 발생한다면 찜이 안된 상황이고, 오류가 발생하지 않는다면 찜이 된 상황으로 인식하게 만들었습니다. 여기서 찜하기를 누른다면 마이페이지에서 이 영화가 나타나게 됩니다.

 

Search바

 장르별 버튼을 만들어 클릭하게 되면 해당 장르의 영화가 출력이 되도록 만들었고, 페이지네이션이 되도록 추가하였습니다.  뿐만 아니라 Search바의 고유 기능인 검색 기능도 추가하여 '늑대'라는 키워드로 검색하면

'늑대'가 들어간 영화들을 출력하고, 영화제목이 아닌 장르를 적으면 장르 버튼을 누른 것과 동일하게 구현하였습니다.

 

제가 주로 구현한 부분은 이 정도 이고, 우리 팀원분들이 만든 기능도 간략히 소개하겠습니다.

 

메인 페이지

조회수를 기반으로 가장 많이 눌린 영화순으로 구성되어있는 '가장 인기있는 컨텐츠 Top 10'입니다.

사전에 준비해놓은 데이터셋을 기반으로 수백개의 아이디에서 수천 수만개의 인위적인 평점을 만들어 코사인 유사도를 바탕으로 제 user id와 제일 비슷한 유저를 찾아 비슷한 유저가 제일 높은 점수를 준 영화들을 뽑아주도록 하였습니다.

 

이 추천 기능은 사전에 등록된 자료를 바탕으로 작성이 되어 실시간 추천시스템이 아닌점을 말씀드립니다.

또한 장르별, 세대별로 나의 나이의 + 5 ~ 10년사이의 영화를 추천해주도록 하였습니다.

 

모달 페이지

영화 버튼을 누르면 모달창에 간략한 정보가 나오고 상세 정보를 누르게 되면

디테일 페이지로 이동하게 됩니다. 여기서 좀 더 아래로 내리면 리뷰를 작성하는 공간이 있습니다.

 

상세 페이지

 

작성된 리뷰의 성별 퍼센테이지, 연령 퍼센테이지를 Chart.js를 활용하여 보기 쉽도록 구현하였습니다.

 

리뷰

 

레트로플릭스 (notion.so)

taehyeki/retroflix: A classic movie streaming service cloning Netflix with a recommedation filtering algorithm applied. (github.com)

GitHub - taehyeki/retroflix: A classic movie streaming service cloning Netflix with a recommedation filtering algorithm applied.

 

느낀 점 :

1. 기본적으로 데이터 셋이 중요하다는 것을 깨달았습니다. 팀원 분께서 크롤링을 해주셔서 쉽게 작업할 수 있었습니다. 이 후에 크롤링에 대해서 좀 더 공부해보고 싶다는 걸 느꼈습니다.

 

2. 처음에 방향성을 잘 잡는 것이 정말 중요하다고 생각했습니다. 구체적이면 구체적일 수록 좋다는걸 느꼈습니다. 

 

3. 그리고 모델을 잘 짜야겠다는 생각이 들었습니다. 다양한 모델을 만들고 그 모델간의 foreign key와 many to many를 구상하는 능력을 길러야겠다는 생각을 했습니다. 

 

우리 팀원분들 너무 고생하셨습니다.!!!!