[이재우] Solo Project Section 3


# 넷플릭스
코로나의 영향으로 영화관을 가지 못하는 사람들이 대부분 넷플릭스를 통해서 영화감상을 한다고 말할 수 있다. 나에게 있어 넷플릭스는 개인이 시청한 데이터를 모아 그 데이터를 바탕으로 모두가 좋아할만 한 영화나 드라마를 넷플릭스 자체적으로 만든다는것이다. 예를들어, `킹덤`을 들 수 있다. 스릴러 호러 영화나 드라마를 좋아하는 나부터 시작하여, 멜로나 로맨스를 좋아하는 동생까지 게다가 사극을 좋아하는 아버지, 어머니 모두가 좋아했던 드라마이기도 하다. 이처럼 넷플릭스에서는 많은 데이터를 수집하고 그 데이터를 바탕으로 작품들을 추천해주고, 또는 제작까지 한다. 그래서 이번 프로젝트는 넷플릭스와 같은 영화 추천 웹 사이트를 만들고 싶었다. 즉, 나만의 넷플릭스를 만들어 보는것이다. `FLASK`를 활용하여 넷플릭스와 거의 동일한 웹을 만들어서 간단한 모델을 통해서 영화 추천을 받을 수 있는 웹사이트를 만들어 보는것이다.

# 영화 추천 시스템
나만의 넷플릭스에서는 우선 회원가입을 하게 되어 있고, 회원가입을 할 때 필수항목이 이메일과 패스워드 또 가장 좋아하는 영화 제목 하나, 그리고 좋아하는 장르 하나를 입력 또는 선택하도록 되어있다. 따라서 입력 받은 영화 제목의 장르를 기반으로 가장 유사한 영화를 추천해주는 시스템을 만드는 것이다. 사용한 영화 추천 방법은 두가지가 있다.
1. 로지스틱 분류 모델을 통해서 예측
2. 코사인 유사도를 통한 유사한 장르의 영화 추천

로지스틱 분류 모델의 성능에는 크게 관여를 하지 않고, 가장 기본적인 설정을 통해서 예측을 해보았다.

# 넷플릭스 템플릿 구하기
나만의 넷플릭스를 만드는것이기 때문에 우선 다양한 사람들의 클로닝 예시를 찾아야 했었다. 너무나 유명한 웹 사이트이기 때문에 많은 예시들이 다양하게 존재하였다. 사용한 예시들을 소개하겠다.
## 1. 인덱스 페이지
인덱스 페이지는 넷플릭스를 처음 들어갔을 때 나오는 페이지로, 기본적으로는 30일 무료 사용권을 입력한 이메일을 통해 전달 받을 수 있다.


위의 사진과 같은 인덱스 페이지를 만들기 위해서 사용한 코드는 아래에 레포에서 가져왔다. 유투브 강의도 있기 때문에 훨씬 쉽게 사용 가능하다.

* https://github.com/techiecoder2079/Netflix-Clone

## 2. 로그인 페이지
기본 로그인 페이지로 이메일과 비밀번호를 입력하게 되면 로그인이 가능하게 한 페이지이다.


위의 페이지로 로그인을 할 수 있도록 하였으며, `Sign up`을 통해 회원가입 페이지와 연동하였다.

사용한 코드는 아래에서 확인할 수 있다.
* https://github.com/cristiandelcidd/Nelflix-starter

# 회원가입 페이지
우선 회원가입을 해야한다. 넷플릭스에서는 따로 회원가입 페이지가 존재하지 않기 때문에, 따로 회원가입 페이지를 만들었어야 했다. 그래서 로그인 페이지를 그대로 가져왔고 거기에 이름을 수정하고 항목을 추가하여 다음과 같이 만들었다.


아이디를 이메일로 사용하고, 패스워드와 가장 좋아하는 영화 하나와 장르를 드랍박스를 통해서 선택을 하도록 하였다. `html` 과 `css`를 예시를 통해서 배웠기 때문에, 정말 많은 시행을 통해서 파일을 수정하려고 하였다.

## 3. 메인 페이지
로그인을 하게되면 메인페이지로 이동을 하도록 설정을 하고 보여지는 메인 페이지는 넷플릭스에서 추천하는 드라마나 영화를 가장크게 표시되고, 밑에 `Recommended`라고 해서 입력한 영화를 기반으로 추천받은 영화를 보여주도록 하였다. 여기서 사용한 방법은 로지스틱 분류 모델을 사용하여 회원가입할 때 입력받은 영화의 장르를 바탕으로 예측하여 첫번째 영화를 추천하고, 나머지 4개는 입력받은 영화의 장르 문자열을 벡터화를 하여 코사인유사도를 통해서 가장 유사한 영화들을 추천받도록 하였다. 모델 성능에는 크게 관여를 하지 않았기 때문에, 계속 같은 영화를 추천해주는 등 문제가 있지만, 나머지 코사인 유사도를 통해서 추천받은 영화는 나름 준수한 추천을 확인할 수 있었다. 그리고 메인 포스터는 변경이 되지 않는데, 이 또한 영화 API에서 제공하는 포스터의 사진을 조정을 많이 해야했고, 조정을 하여 보았지만 보기에 좋지 않아 하나의 깔끔한 포스터로 선정을 하였다.


가장 많은 시간을 검색에 사용한 부분은 아래에 추천되는 영화 목록에 넷플릭스와 동일하게 마우스를 포스터에 옮기면 확대가 되고 양 옆으로 이동이 되도록 하고 싶었지만, `css`파일을 배우는것이 목적이 아니기 때문에 일단 잠시 접어두었다.

사용한 소스코드는 아래에서 찾을 수 있다.
* https://github.com/reginaldop/netflix-html-css

## 4. 트렌드 페이지
2번째 메뉴인 트렌드 페이지에서는 TMDB영화 API에서 인기 있는 영화 첫 페이지를 가져와서, 랜덤하게 영화를 추천하도록 하였다. 랜덤 인덱스를 활용하여 중복이 되지 않도록 구성하고 매번 다른 결과 그리고 같은 영화는 추천하지 않도록 설정하였다. 단순함을 피하기 위해서 메인 페이지를 다른 작품을 소개함으로써 지루함을 피하려고 하였다.


메인페이지의 코드를 그대로 가져오고, 위의 메인 포스터만 변경하였다.

## 5. 네비게이션 바
처음 코드에는 네비게이션 바의 기능이 아무것도 없었다, 그렇기 때문에 기능을 추가하기 위해 여러가지를 찾아보았다. 최대한 넷플릭스의 느낌이 구현될 수 있도록 노력하였다. Hover가 무엇인지도 모르고 무작정 따라하기 시작하니 원래 css코드도 잃어버리고 정말 고생했다. 애니메이션을 추가하고, 빨간색으로 글자가 변경되도록 구현을 해보았다. 다른사람의 코드를 가져오는것이 아닌, 스스로 작성한 부분이라 많이 뿌듯하였다. 이런 맛으로 프론트엔드 개발자를 할 수도 있겠구나 싶었다.

## 6. 업데이트 페이지

회원가입시 입력한 가장 좋아하는 영화를 변경할 수 있도록 하였다. 비밀번호를 확인 후, 영화를 변경할 수 있다. 실시간으로 업데이트가 되지 않기 때문에, 매번 영화를 변경해줘야 다른영화를 추천받을 수 있는것은 너무나 아쉬운 부분이다. 나의 능력이 부족함이기 때문이다. 정말 아쉽다.

## 7. 회원탈퇴 페이지

마지막으로, 회원탈퇴 페이지를 구성하였다. 가입한 이메일과 비밀번호를 통해서 회원탈퇴가 가능하다. 게다가, 회원탈퇴를 취소할 수 있는 여러가지 버튼으로 마음을 여러번 확인 할 수 있도록 하였다.

# FLASK
다음으로는 앱을 구성하기 위한 파이썬코드를 소개하도록 하겠다. 다소 이해가 어려운 부분을 설명을 하려고 하였다. 파일의 구성은 다음과 같다.


## 1. __init__.py
`__init__.py`에서는 앱을 실제적으로 만들기 위한 설정이 이루어지는 곳이다, 데이터베이스를 연결하고 다양한 엔드포인트들을 연결할 수 있다.

## 2. models.py
`models.py`에서는 연결된 데이터 베이스에서의 테이블 생성을 할 수 있도록 하였다.


모델을 구성할 때에는 `Users` 테이블과 `Moives`테이블이 N:N관계를 보여주기 때문에, 병합 테이블인 `Lists`를 만들어주었다. 이를 어떻게 활용하면 좋을까 생각을 해보았다. 매번 `메인페이지`를 불러왔을 때, 추천 영화들이 업데이트가 되도록 해보고 싶었지만 잘 되지 않았다. 결국은 저 `Lists` 테이블의 정보를 사용하여 실시간으로 업데이트가 되는 영화 추천 시스템을 구상하였지만, 뜻대로 쉽게 되지 않았다.

## Routes
`Routes`에서는 다양한 엔드포인트들이 구성되어 있다.
* `/` : 인덱스 페이지
* `/data` : 데이터베이스의 초기설정이 이루어지도록
* `/main` : 영화 추천 메인 페이지
* `/trend` : 인기 영화 추천 페이지
* `/update` : 회원가입시 입력한 영화를 변경할 수 있습니다.
* `/signout` : 회원탈퇴 페이지

# 최종결과
지금 [배포](https://polar-ravine-46925.herokuapp.com/)위의 코드를 잘 구성하여, `Heroku`에 업로드를 해보았다. 사실 `FLASK`에 대해서 1도 몰랐고, `html`파일, `css`파일 모두 이게 무엇인지 내가 넷플릭스라는 너무 높은 벽을 잡았나 생각을 했다. 진짜로 너무 힘들었고, 왜 이렇게 썼는지 이해하는데 얼마나 많은 시간이 들었는지 모른다. 이해를 했다가도, 내가 원치 않은 결과를 마주하였을 때 패배감은 너무나 컸다. 그떄마다, 다른사람들을 도와주었다. 다양한 사람들의 코드를 보면서 이렇게 할 수도 있구나 배우고 또 동기부여도 되고 결국은 완성을 할 수 있었다. 많은 사람들의 `HTML` 클로닝을 따라해보고, 뭣도 모르지만 한 줄씩 따라해보고 그러다보니 대충 왜 이렇게 설정을 하였고, `CSS`파일이 이렇게 연동이 되는구나 많이 이해할 수 있었다. 백지를 주고 이거 작성해봐! 라고 말하면 못한다. 하지만, 완성된 코드를 보면 그래도 한 번 더 들여다 보면 이해를 할 수 있게 되었다.