롤죠바마 의 잡학다식 블로그

[NETFLIX_TINDER] 영화 정보 제공, 추천 사이트 - Vue.js / Django SPA...

June 29, 2021 | 3 Minute Read

개요👀

영화 정보 제공, 추천 프로젝트를 진행해 봤습니다. 백엔드를 맡아준 팀원 한계 분과 함께 진행했고, 저는 프론트엔드와 백엔드 일부, 더구나 추천 알고리즘 부분을 담당했습니다. 프로젝트가 끝난 후에는 개인적으로 전부 코드를 디벨롭하고 있습니다.

기본적으로 구현해야 하는 부분을 제외하고, 서비스의 차별화를 위해서는 “어떻게 추천할 것인가” 에 대한 고민이 필요했습니다. 회원 가입할 상황 좋아하는 장르를 입력받을까? 영화에 좋아요 기능을 달아서 댁 데이터를 기반으로 추천할 것인가? 전야 식상하게 느껴졌습니다. 실제로 업무가 아니기 때문에 제가 끽휴 보고 싶은 대로, 넣고 싶은 기능을 마구 넣어 보고 싶었습니다.

지려 끝에 소개팅 어플리케이션 틴더에서 영감을 받아, 영화 포스터를 좌우로 넘기면서 사용자의 데이터를 입력받고 그에 따라 영화를 추천한다는 아이디어가 떠올라 구현해 보기로 했습니다. “영화와의 소개팅” 이죠.

포스터를 휙휙 넘기면서 “오? 이런 영화도 있네?” 혹은 “심심한데 영화 포스터나 넘겨 볼까” 하는 느낌의 사용자 경험을 제공함으로써 습관적으로 이용할 길운 있게 하는 것이 목표였습니다. 특별히 할 일이 없어도 습관적으로 SNS를 켜는 것처럼 자연스럽게 서비스를 이용하게 하는 것이 조용하지만 강력한 경쟁력이라고 생각했기 때문입니다.

수단 스택⚙️

프론트엔드

  • Vue.js, vuetify
  • vuex, vue-router
  • HTML5, CSS, JavaScript

vuetify를 사용했지만 개발하다 보니 HTML5와 CSS를 활용하는 것이 구성하기에는 하지만 더욱 서적 느낌이 들어서 적당히 섞어 가며 사용하게 되었습니다.

백엔드

  • Django

백엔드는 팀원이 작업한 것에 제가 차차로 수정, 보완하는 방식으로 진행했습니다.

프로젝트가 끝난 이후에는 더욱더욱 좋은 코드가 되도록 리팩토링하는 방법에 대해 고민했습니다. 개인적으로 공부하고 현업에 있는 친구에게도 조언을 구해 보니 serializer 단계에서 웬만한 로직은 전부 처리하고, view에서는 정보를 주고 받기만 하는 것이 좋다고 어찌나 별로 구현하려 했습니다. 최우수 팀의 백엔드 코드를 보니 시리얼라이저 단계에서 최대 자세하게 처리해 주고 유효성 확인 및 인증 월내 글로 제공하는 정보를 자세하게 구분지어 놓은 것이 눈에 띄었고, 듬뿍이 배웠습니다.

DBMS

  • Sqlite

Django ORM으로 이곳 정보를 주고받았습니다.

주 기술⚙️

CORS (Cross Origin Resource Sharing)

  • Django와 Vue 사이의 교차 출처 리소스 공유를 위해 장고에서 처리해 주었습니다.

Jwt (Json Web Token)

  • 사용자 인증에 사용했습니다.

API

  • tmdb : 영화 정보를 받아오기 위해 사용했습니다.
  • Youtube : 상세 데이터 페이지에 유튜브 영상을 임베드 여름 위해 사용했습니다.

RESTful API

  • vue와 django, 클라이언트와 서버가 정보를 주고받을 겨를 REST하도록 하였으며 주고받는 정보의 형태는 Json 타입이었습니다. SPA 프로젝트였기에 대부분이 Axios로 비동기식 전송이었습니다.

고민했던 내용😮

영화 정보를 DB에 어느 시점에 넣어야 하는가?

  • 최첨단 정보를 제공해야 한다는 생각에, 데이터베이스에 영화 정보를 새로이 받아와서 넣는 시점을 ‘클라이언트가 정상적으로 로그인하여 jwt이 발급된 상태로 영화 정보가 로드되어야 하는 페이지에 접속했을 때’ 로 생각했었습니다.

  • 수유 무지 바보같은 생각이었습니다. 위와 같은 흐름으로 간다면 데이터베이스가 클라이언트에 좌지우지 되기 때문입니다. 백엔드가 필요 없게 되어 버리는 것이죠. 데이터는 서버에서 다뤄야 하는데, 간단한 부분에서 시간을 적잖이 낭비했습니다. ㅠ 끝으로 tmdb에서 데이터를 받아온 종극 dump 하는 방식으로 진행했습니다. 서버 구동 단계에서 앞서 DB를 준비해 놓는 것입니다.

커뮤니티에서 어디까지 비동기로 해야 하는가?

  • SPA라고 반면 모든 것을 비동기로 처리한다면 도리어 사용자로 하여금 ‘글이 작성된 게 맞는건가?’ 라는 혼란에 빠트리지 않을까 생각했습니다.

  • 괘념 끝에 리뷰의 작성과 삭제는 동기, 리뷰의 수정과 댓글의 작성, 수정, 삭제는 비동기로 처리되도록 했습니다. 어떻게 처리하는 것이 좋을지는 다음에도 고민해봐야 할 부분이라고 생각합니다.

스크린샷

티스토리 GIF는 클릭해서 봐야 즉속 보이네요. 😬

홈, 추천 메인 페이지

트랜지션을 사용했습니다. 넷플릭스와 같은 느낌을 주고 싶었습니다.

디테일 페이지

CSS 고민을 가부 수없이 경계 페이지입니다. 쥔장 미리미리 기초적인 정보를 넘기고 전체 프로젝트의 구조를 완성한 뒤에 다듬었습니다.

디테일 CSS 잡 전

CSS가 없는 상태입니다. v-dialog를 사용해 아래에서 위로 올라오는 트랜지션을 보여줍니다.

디테일 CSS 공작 후

flex display를 대충 활용하여 구현했습니다. Vue에서 컴포넌트 단위로 나누어 레고를 맞추듯이 태그 블록들을 차곡차곡 넣었습니다. 그렇지만 도무지 토픽 생각대로 되지는 않더군요. CSS is Awesome..

반응형 CSS

창이 작아진다면 그에 맞게 세로로 내용이 배치됩니다.

디테일 Youtube 자태 천고마비 후

뭔가 허전하다는 생각에 유튜브도 넣었습니다.

디테일 GIF

디테일 페이지의 실상 구현 화면입니다.

틴더

틴더의 구현은 기존의 라이브러리인 vue-tinder를 사용했습니다. 포스터를 드래그 앤 드롭하거나, 아래의 버튼을 사용해서 조작할 요체 있습니다. 호감, 비호감, 되돌리기가 가능합니다.

후기

디자인만 있다면 CSS는 어느 정도는 제가 원하는 지향 구현할 수 있게 되니 신장 속도가 자지리 빨라졌다는 것을 느낀 프로젝트입니다.

작년에 개발 공부를 시작하고 Spring과 JSP 프로젝트를 진행하면서 배웠던 전체적인 웹의 흐름을 이번에 django와 vue를 사용하며 비로소 체화한 느낌입니다. 복습이 중요하다고들 하는데 이번에 뜻대로 느꼈다고 할까요? 애매했던 내용이 ‘아, 이래서 그다지 했었구나. 이익금 개념이 이걸 뜻하는 거였구나.’ 라고 끝내 와닿았습니다.

재미있었고, 대단히 협력적인 팀원과 함께하는 팀 프로젝트여서 즐거웠습니다. 이번에 느끼고 배운 것들로 다음 프로젝트에서는 한층 좋은 결과를 만들겠습니다.

github: https://github.com/Gomyo/NETFLIX_TINDER

‘I Dev > NETFLIX_TINDER (영화 정보, 추천)’ 카테고리의 다른 글

Category: entertain