Skip to content
@BadFilmSommeliers

Bad Film Sommeliers

Bad Film Sommeliers, BFS는 B급 영화와 컬트 영화, 인기 없는 영화를 즐기는 영화 팬들을 위한 영화 추천 웹사이트입니다.

BESTlogo

Bad Film Sommeliers, 이하 BFS 는 B급 영화와 컬트 영화, 인기 없는 영화를 즐기는 영화 팬들을 위한 영화 추천 웹사이트입니다.


만든 사람들

기획, 설계 및 구현 과정 전반에서 유기적으로 협업했습니다. 각자가 주도한 기능과 분야를 서술합니다.

  1. Alexuhn alexuhyun@gmail.com

    1. 백 - DRF를 이용한 RESTFUL API 생성. Django를 이용한 웹사이트 기능 구현.
    2. 프론트 - Vue를 이용한 SPA 구현. UI 설계 및 구현.
  2. Magpie1000 web.1000c@gmail.com

    1. 백 - API 설계. 외부 API 통신. User모델 설계. 서버 부하 최적화.
    2. 프론트 - 외부 API 통신. UX 성능 최적화.
    3. 영화 추천 알고리즘 제작

도움 주신 분

  1. bd: 마스코트 캐릭터 및 로고 디자인. 웹사이트 테마 컬러 설정.

프로젝트 기획 의도

Untitled

왜 세상은 내게 좋은 영화만 권할까?

좋은 영화, 나쁜 영화, 이상한 영화 다 찾아드립니다!

넷플릭스, 왓챠 등의 추천 플랫폼들은 내 영화 취향을 분석해 '좋은 영화', '잘 만든 영화'를 추천해줍니다. 많은 사람들이 이 서비스에 만족합니다. 하지만 만약 내가 못 만든 영화들을 좋아한다면? 이 영화들은 나에게는 좋은 영화들이 아닙니다!

나쁘고 구리지만 내가 좋아하는 영화들은 찾는 데에는 요령과 시간이 많이 필요합니다. 그 노력, BFS 가 대신 해드리겠습니다!


예상 이용자

  • 10대 후반 ~ 30대 초반의
  • 200편 이상의 영화를 관람한
  • 키치한 감성을 선호하는
  • 장르영화, B급 영화 팬

UX 개요

  • 다양하고 많은
  • B급 영화, 인기 적은 영화를
  • 장르 중심으로 선별해
  • 커뮤니티 기능과 함께 제공합니다.

프로젝트 기간

1차 : 2021.11.17 - 2021.11.25 (프로토타입)

2차 : 2021.12.01 - 2021.12.08 (SSR → CSR)


개발 도구

  • Python
    • Python 3
    • Django 3.2.9
    • Django REST framework 3.12.4
  • HTML, CSS
    • Bootstrap 5
  • Javescript
    • ECMA6 +
    • Vue 2
    • Vuetify 2
  • Database
    • sqlite3

주요 UI 특징

  • 모바일 대응
    • grid의 breakpoint마다 레이아웃이 변경되는 반응형 웹사이트로써 사용자가 모바일 환경에서도 쾌적하게 이용할 수 있도록 했습니다.
    • 모바일 기기에서 접근 시 레이아웃의 변화가 크지 않도록 주요 페이지는 두 개의 열을 중심으로 디자인 하여 모바일 환경에서 하나의 열로 재구성되도록 했습니다.
  • 직관적인 컬렉션 조회
    • 사용자는 컬력션 조회시 담겨있는 5개의 영화 포스터를 미리 확인할 수 있습니다.
    • 컬렉션 상세 페이지에서 목록 버튼을 클릭하여 담겨있는 영화를 자세히 조회할 수 있습니다.
  • 사용자가 기대하는 상식적인 웹 동작에 반응
    • 사용자는 영화 추천 사이트에 기대하는 대부분의 기능을 이용할 수 있습니다. 관례적으로 여겨지는 기능의 수행을 위해 클릭되어야 하는 버튼은 모두 사용자가 명확하게 알 수 있습니다. 또한 모든 클릭 가능한 요소는 마우스 호버시 커서가 바뀌고 반응합니다.
    • 명확하게 클릭할 수 있는 버튼이 아니더라도 영화 제목이나 사용자 닉네임과 같이 관례적으로 클릭이 가능할 것이라 여겨지는 요소는 마우스 호버시 커서가 바뀌고 반응하여 사용자가 클릭 가능하다는 것을 알 수 있게 합니다.
  • 맞춤 배경 이미지
    • 주요 페이지는 최상단에 특정 영화의 이미지가 나타납니다. 영화를 추천하는 페이지에서는 추천 영화 중 한 개의 영화를, 컬렉션을 조회할 수 있는 페이지에서는 최신 컬렉션에 속한 영화중 한 개의 영화를, 개인 페이지에서는 사용자가 좋아요를 누른 영화 중 한 개의 영화를 선택합니다.
  • 마스코트
    • 귀엽게 생긴 마스코트로 사이트의 분위기를 가볍게 만들어 스낵컬쳐 특성과 사이트의 개성을 강화하고자 했습니다.
  • 404 페이지
    • 잘못된 요청을 받을 시 404 페이지로 리다리엑트하여 사용자가 잘못된 접근을 했음을 명확히 보여주고 존재하는 페이지로 다시 접근할 수 있도록 유도하였습니다.

URL

Netlify Status https://bfs.ninja


주요 기능

영화

  1. 추천
    • 사용자가 좋아요를 남긴 영화를 기반으로 선호 장르를 추출해 이를 기반으로 영화를 추천합니다.
    • 사용자는 신규 가입 후 첫 로그인시 최대 1000개의 영화 목록을 제공받고 이중 선호하는 영화에 좋아요를 남겨 취향이 반영된 영화를 추천받을 수 있습니다.
    • 사용자는 B영화 또는 힙스터 모드를 활성화하여 추천받는 영화의 종류를 달리 할 수 있습니다.
    • 사용자가 좋아요 또는 후기를 남긴 영화는 다시 추천되지 않습니다.
  2. 조회
    • 사용자는 TMDB에서 제공하는 모든 영화를 조회할 수 있습니다.

커뮤니티

  1. 후기
    • 사용자는 TMDB에서 제공하는 모든 영화에 대하여 후기를 작성할 수 있습니다.
    • 사용자는 작성된 후기에 대하여 댓글을 작성하고 좋아요를 남길 수 있습니다.
    • 최근 작성된 후기와 한 주에 가장 좋아요를 많이 받은 후기는 메인 페이지에 게시됩니다.
    • 후기는 각 영화 페이지에 게시되며 로그인한 사용자의 후기는 최상단에 게시됩니다. 다른 사용자의 후기는 최근순, 인기순으로 정렬 가능합니다.
  2. 컬렉션
    • 사용자는 TMDB에서 제공하는 모든 영화를 이용해 원하는 영화를 모아 컬렉션을 생성할 수 있습니다.
    • 사용자는 생성된 컬렉션에 대하여 댓글을 작성하고 좋아요를 남길 수 있습니다.
    • 최근 작성된 컬렉션과 한 주에 가장 좋아요를 많이 받은 컬렉션은 메인 페이지에 게시됩니다.
    • 모든 컬렉션은 컬렉션 페이지에 게시되며 최근순, 인기순으로 정렬 가능합니다.

사용자

  • 사용자는 회원가입시 다른 사용자와 중복되지 않는 닉네임을 입력해야 합니다. 이는 추후 변경 가능합니다.
  • 사용자는 개인 페이지에서B영화힙스터 모드를 활성화할 수 있습니다.
  • 사용자는 개인 페이지에서 좋아요를 누른 컬렉션과 영화와 후기, 생성한 컬렉션, 후기를 남긴 영화, 작성한 후기를 확인할 수 있습니다.
  • 사용자는 좋아요를 누른 영화와 후기를 남긴 영화를 전체 화면에서 조회할 수 있습니다.

영화 추천 알고리즘

아래의 순서대로 추천 영화를 조회합니다.

  1. 사용자가 클라이언트에 추천 영화 요청 발송
  2. 클라이언트가 서버에 요청 발송
  3. 서버는 클라이언트에게 사용자가 좋아하는 영화 정보좋아하는 장르 정보 를 제공
  4. 클라이언트는 서버에서 받은 정보를 기반으로 개인화된 쿼리 를 TMDB API에 발송
  5. TMDB에서 받은 자료를 재 가공,
  6. 사용자가 좋아할 만 한 영화들을 추천해줍니다.

Untitled 1


PROJECT README

프로젝트에 대한 자세한 사항은 링크에서 확인하실 수 있습니다.

Pinned Loading

  1. client client Public

    Vue

  2. server server Public

    Python

Repositories

Showing 3 of 3 repositories

Top languages

Loading…

Most used topics

Loading…