2019. 11. 18. 17:31ㆍ카테고리 없음
빅데이터를 기반으로 하여 사용자에게 영화를 추천하는 웹 서비스입니다.
빅데이터와 관련 있는 다양한 기술들을 사용하여 사용자에게 각기 다른 추천 정보를 제공할 수 있습니다.
사용된 기술을 백엔드 분야에서 Django를
프론트엔드 분야에서는 Vue.js 와 Vuetify를 사용했습니다.
저는 이 프로젝트에서 UI, UX, 전체 디자인에 관한 프론트엔드와
백엔드에서 사용자의 CRUD 개발을 진행하였습니다.
본 사이트의 핵심 주제는 '영화'이기 때문에 주제와 관련하여 옛날 영화 필름 이미지와 비슷하게 꾸몄습니다.
또 사이트를 대표하여 나타낼 색들을 검정색, 하얀색 그리고 빨강색으로 정하였습니다.
특히 윗 사진처럼 빨강색을 기능과 의미를 강조할 때 사용하였습니다.
영화 검색 메뉴에서 검색했을 때 나타나는 결과화면입니다.
설명하기에 앞서, 본 사이트의 디자인을 영화필름에 착안했기 때문에
스크롤을 허용하지 않는 것이 디자인 개발 방향에 있어 전제 조건이었습니다.
그래서 검색 결과를 카드 방식으로 사이드로 돌려가며 볼 수 있도록 했습니다.
많은 결과를 간략하게 볼 경우에는 힘들다는 것이 단점입니다.
카드를 선택할 경우 상세 정보 페이지로 이동합니다.
상세 정보 페이지에서는 클릭한 영화의 제목, 장르, 평점 등 다양한 정보를 갖고 있습니다.
감독 혹은 출연진을 클릭할 경우 해당 인물의 정보를 간략하게 확인할 수 있습니다.
우측의 포스터를 클릭할 경우 DB에 존재하는 영화의 예고편을 보여줍니다.
평점 우측의 빨강색 플러스 버튼을 누르면 평점을 등록할 수 있습니다.
추천 영화 페이지입니다.
사용자가 구독한 서비스에 맞춰 추천하는 영화 10개를 보여줍니다.
추천 영화 중에서 10개를 무작위로 골라주기 때문에 클릭할 때마다
추천 영화 목록이 다르게 나타납니다.
사용자는 추천 받을 서비스를 기호에 맞게 선택할 수 있습니다.
선택할 시 내부적으로 구현한 클러스터링 기술에 따라 추천 정보가 달리 보여집니다.
사용자의 정보를 확인할 수 있는 회원정보 페이지입니다.
사용자의 정보와 평점을 부여한 영화들을 확인할 수 있습니다.
회원의 직업에 맞게 썸네일을 띄워주려는 이슈가 있었으나
직업이 너무 다양하기 때문에 중단하였습니다..
자세한 기능 과정은 아래 시연 영상을 참조해주시길 바랍니다.
.
.
.
빅데이터를 접해보고 싶어 시작했으나 백엔드보다는 프론트엔드와 디자인 위주로 진행하였습니다.
프로젝트를 진행하면서 아쉬웠던 것은 메뉴와 기능이 적었던 점과 웹의 이해도가 너무 낮아
개발 범위를 크게 잡지 못하고 점진적으로 했던 점입니다.
이 때의 경험을 제 전용 홈페이지를 직접 제작할 때 참고할 생각입니다.
감사합니다.