2024년 5월
현재 공개된 깃허브 코드는 21년 코드로, 대표적으로 Vue.JS 2가 deprecate되는 등 라이브러리를 최신화해야 실행되는 상태입니다.
fork해서 자유롭게 수정하셔도 됩니다.
개요👀
영화 정보 제공, 추천 프로젝트를 진행해 봤습니다. 백엔드를 맡아준 팀원 한 분과 함께 진행했고, 저는 프론트엔드와 백엔드 일부, 그리고 추천 알고리즘 부분을 담당했습니다. 프로젝트가 끝난 후에는 개인적으로 전체 코드를 디벨롭하고 있습니다.
기본적으로 구현해야 하는 부분을 제외하고, 서비스의 차별화를 위해서는 "어떻게 추천할 것인가" 에 대한 고민이 필요했습니다. 회원 가입할 때 좋아하는 장르를 입력받을까? 영화에 좋아요 기능을 달아서 그 데이터를 기반으로 추천할 것인가? 모두 식상하게 느껴졌습니다. 실제 업무가 아니기 때문에 제가 해 보고 싶은 대로, 넣고 싶은 기능을 마구 넣어 보고 싶었습니다.
궁리 끝에 소개팅 어플리케이션 틴더에서 영감을 받아, 영화 포스터를 좌우로 넘기면서 사용자의 데이터를 입력받고 그에 따라 영화를 추천한다는 아이디어가 떠올라 구현해 보기로 했습니다. "영화와의 소개팅" 이죠.
포스터를 휙휙 넘기면서 "오? 이런 영화도 있네?" 혹은 "심심한데 영화 포스터나 넘겨 볼까" 하는 느낌의 사용자 경험을 제공함으로써 습관적으로 이용할 수 있게 하는 것이 목표였습니다. 특별히 할 일이 없어도 습관적으로 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도 인터랙티브한 디자인을 제외하면 자유롭게 구성할 수 있습니다.
디테일 Youtube 영상 추가 후
뭔가 허전하다는 생각에 유튜브도 넣었습니다.
반응형 CSS
창이 작아진다면 그에 맞게 세로로 내용이 배치됩니다.
디테일 GIF
디테일 페이지의 동작 화면입니다.
틴더
틴더의 구현은 기존의 라이브러리인 vue-tinder를 사용했습니다.
마우스 드래그를 통한 인터랙션, 혹은 버튼을 사용할 수 있습니다. 모바일에서는 좌우로 슬라이딩하면 포스터가 넘어갑니다. 이를 통해 호감, 비호감 등의 데이터를 받아서 해당 유저가 선호하는 장르 데이터를 데이터베이스에 쌓았습니다.
후기
작년에 개발 공부를 시작하고 Spring과 JSP 프로젝트를 진행하면서 배웠던 전체적인 웹의 흐름을 이번에 django와 vue를 사용하며 비로소 체화한 느낌입니다. 복습이 중요하다고들 하는데 이번에 제대로 느꼈다고 할까요? 애매했던 내용이 '아, 이래서 그렇게 했었구나. 이 개념이 이걸 뜻하는 거였구나.' 라고 비로소 와닿았습니다.
재미있었고, 굉장히 열정적이고 협조적인 팀원과 함께하는 팀 프로젝트여서 즐거웠습니다. 이번에 느끼고 배운 것들로 다음 프로젝트에서는 더 좋은 결과를 만들겠습니다.
github: https://github.com/Gomyo/NETFLIX_TINDER
Gomyo/NETFLIX_TINDER
넷플릭스와 틴더를 결합한 영화 정보, 추천 SPA 토이 프로젝트. Contribute to Gomyo/NETFLIX_TINDER development by creating an account on GitHub.
github.com
최근댓글