영화를 추천 해주고, 리뷰를 작성 하기도 하며, 좋아하는 영화에 좋아요 할 수도, 보고 싶은 영화를 북마크 에 담아둘 수도 있고, 여러 선택지를 제시하는 테스트를 통해 내 친구와 닮은 영화를 찾아주는 등 재미난 기능이 많은 
기반의 웹사이트입니다.이 프로젝트는 SSAFY(Samsung Software Academy For Youth) 12기 비전공 파이썬 1학기 프로젝트입니다.
| Name | 정지은 👑 | 홍노을 |
|---|---|---|
| Profile |
|
|
| Position | Front/Backend Develop | Backend Develop |
| Git | @doh3e | @H11-eng |
| wldms3333@gmail.com | hne9711@gmail.com |
정지은
아이디어 구상 / 프로젝트 흐름 구상 / UX UI 디자인 / 테마 및 컨셉 아이디어 제시
모델 정의 및 ERD 생성 / Django allauth, dj-rest-auth, simpleJWT 기반의 회원가입 및 로그인 로직
메인 페이지, 영화 파트 백엔드 로직 제작 및 프론트 작업 전반
회원 파트 (로그인, 회원가입, 마이페이지) 로직 제작 및 프론트 작업 전반
리뷰 파트 프론트, CSS 작업 / 무비포유(친구와 닮은 영화 찾기) 로직 및 프론트, 이미지 작업
깃허브 유지보수 / 백업 관리
홍노을
아이디어 구상 / 프로젝트 흐름 구상 / 모델 정의 / 테마 및 컨셉 아이디어 제시
Django DRF 기반 Serializer 작성 / Review, Comment CRUD 작성
디버깅 / 프레젠테이션 작업 / fixture 및 DB 관리
- 관통프로젝트 필수 요구사항 이행 (영화 DB, 추천기능, 커뮤니티)
- back-end에
Django/ front-end에Vue.js를 활용하여 반응형 웹페이지 제작 - 디자인과 컨셉 :
우주,코스믹그리고고양이한 스푼.
* 디자인 및 컨셉의 통일성 확보 - 영화 API를 활용하여 영화 검색, 추천 기능 활성화
* 최소 3가지 유형으로 추천받을 수 있도록 함
* 유저의 선호 기반 추천 알고리즘을 제시하려고 노력 - 리뷰 작성 시에도 API를 호출하여 유저가 영화 제목만 검색하면 정확한 영화 정보가 다 기입될 수 있도록 함
* 리뷰 댓글, 좋아요 기능 - 간단한 테스트를 제공하여 유저가 자신의 친구들에게 '자신이 생각한 친구와 닮은 영화'를 공유할 수 있도록 함
* 사이트 방문 유도, 흥미 요소 부여
* 자신이 만든 친구 카드를 PC와 서버에 저장
-
필수 요구사항 이행 완료
- 회원 기능(회원가입/로그인 등), 영화 DB fixture 2000개, 여러가지 추천 기능 구현,
- 유저간의 소통이 가능한 리뷰 게시판 및 상호 팔로우가 가능한 환경 구축
- 회원 기능(회원가입/로그인 등), 영화 DB fixture 2000개, 여러가지 추천 기능 구현,
-
프론트-백 간의 원활한 흐름, 유저의 화면 크기에 따른 반응형 웹페이지 구현
- bootstrap을 활용하지 않고 순수 css로 media 쿼리를 작성하여 모바일 환경까지는 고려하기 어려웠으나,
PC나 태블릿 환경의 유저가 비슷한 경험을 할 수 있도록 고려하여 화면 배치 - back-end와 front-end의 원활한 상호작용 확인. 오류가 날 시 상황에 맞는 오류 메세지를 throw / catch 하도록 고려
- bootstrap을 활용하지 않고 순수 css로 media 쿼리를 작성하여 모바일 환경까지는 고려하기 어려웠으나,
-
유저가 직관적으로 파악할 수 있도록 UX/UI 통일 고려, 디자인 컨셉 통일감 중시
- 사용 font와 color 등을 사전에 지정하여 가급적이면 해당 무드를 벗어나지 않도록 함
- 동시에 정적이고 딱딱한 사이트가 아니라 최대한 유저가 다양한 경험을 하고 즐길 수 있도록 애니메이션 등 활성화
-
영화 API를 통해 유저가 영화를 검색하기 용이하게 하고, 받아온 API를 백엔드에서 여러 알고리즘으로 처리하여 다양한 추천 제시
- 사용 API : TMDB, KOFIC(영화진흥위원회 DB)
- 추천 로직에 관해서는 추천 로직 설명 파트에서 자세히 다룸
-
리뷰 작성 시 정확한 정보를 유저가 입력하게 하기 보다는, 간단한 검색으로 영화 정보를 전부 받아올 수 있게 리뷰 작성 페이지 구현
-
무비포유테스트 제작, 저장 성공- 주변 친구들에게 테스트 시켜본 결과 반응이 좋았음
- 주변 친구들에게 테스트 시켜본 결과 반응이 좋았음
Like, Bookmark가 manytomany가 되지 않은 이유
DB에 있는 영화는 2000개에 불과한데, API를 통한 검색으로도 영화를 찾고 북마크/좋아요 할 수 있기 때문
DB에 없는 영화를 manytomany로 연결할 순 없다! => 두 모델에 영화 정보를 함께 추가하게 된 이유이기도 함
cineMATE/
├─ back-end/
│ ├─ accounts/ 회원관리
│ ├─ cinemate/ 프로젝트 설정
│ ├─ community/ 커뮤니티
│ ├─ media/ 유저 업로드 폴더
│ ├─ movies/ 영화관련 기능
│ └─ requirements.txt 백엔드 의존성 파일
├─ front-end/
│ ├─ index.html
│ ├─ package.json
│ └─ src/
│ ├─ App.vue
│ ├─ assets/ 정적 리소스용 폴더(CSS, img)
│ ├─ axios.js 백엔드 비동기요청용 js 파일
│ ├─ components/ vue 하위컴포넌트 폴더
│ │ ├─ accounts/ 회원 관련 하위컴포넌트
│ │ ├─ community/ 커뮤니티 관련 하위컴포넌트
│ │ ├─ movies/ 영화 관련 하위컴포넌트
│ │ └─ Navbar.vue 네비게이션 바
│ ├─ main.js
│ ├─ router
│ │ └─ index.js
│ ├─ stores
│ │ └─ counter.js
│ ├─ utils
│ │ └─ validators.js 회원 유효성검사용 js 파일
│ └─ views vue 상위 컴포넌트 폴더 (라우터에 직접연결됨)
├─ project_resource 프로젝트 내에서 필요한 리소스 모음
└─ README.md
사전에 인기순으로 불러온 2000개의 DB중 vote_average(평점, 10점 만점)와 vote_count(투표수)를 고려하여 100위 선정 후 보여줌
기본 추천 (좋아요/북마크 기반)
유저가 좋아요/북마크 한 영화의 장르 중 가장 많은 장르 1, 2위를 뽑고 1, 2위 장르가 함께 포함된 영화를 찾는다.
특별한 날 추천(생일, 크리스마스 등...)생일, 혹은 개발자가 지정해둔 특별한 날에 관련 큐레이션을 띄운다.
유사유저 기반 추천나와 선호하는 영화가 비슷한 유저 상위 몇 명을 뽑아 유사유저로 지정하고, 유사유저가 좋아하거나 북마크한 다른 영화를 추천한다.
TOP RATED 영화 리스트, 국내 박스오피스 순위 및 신작 목록
회원가입 유효성 검사, 프로필사진 미리보기, 로그인, 로그아웃
내 정보 보기, 회원수정/탈퇴, 내 좋아요/북마크 저장함, 리뷰 보관함
영화 장르별 보기, 영화 검색, 영화 큐레이팅, 영화 상세보기
리뷰 게시판, 리뷰 작성, 리뷰 상세보기, 댓글
친구와 닮은 영화 찾기 테스트, 결과 파일로 저장 및 서버에 저장
정지은
이번 프로젝트를 통해 백엔드와 프론트엔드를 모두 다뤄볼 수 있어 좋았다.
또 UX를 어떻게하면 불편없이 짤 수 있을지에 대한 고민을 많이 해보는 시간이 되었다.
몇 개월 전 외부에서 처음 해본 팀 프로젝트와 비교했을 때, 스스로 많이 성장했음을 느꼈다.
다음에 프로젝트를 한다면 기능 하나하나의 깊이를 좀 더 파고들어보고 싶고,
디자인패턴 등을 열심히 공부하여 좀 더 객체지향의 이점을 살린 프로그래밍을 해보고 싶다.
홍노을
비전공자로서 SSAFY를 통해 처음으로 파이썬을 포함하여 알고리즘, 백엔드, 프론트엔드에 대해 배울 수 있었고,
이번 기회로 RESTful한 백엔드 API 구현을 해볼 수 있어서 좋았다.
한 학기동안 배운 내용을 바탕으로 유의미한 결과물을 만들어낼 수 있는 좋은 기회였다.
추후 추가 예정