hwon-j / aurora

Aurora

프로젝트 목표

• 영화 데이터 기반 추천 서비스 구성
• 영화 추천 알고리즘
• 커뮤니티 서비스 구성
• 서비스 관리 및 유지보수

프로젝트 소개

• 유저가 좋아요하는 영화와 시청한 영화를 기반으로 영화를 추천해주는 서비스

프로젝트 기간

• 2023.05.17 ~ 2023.05.25

기술 스택

• Backend
  • python, Django
• Frontend
  • vue.js, HTML5, CSS, JavaScript, Bootstrap

팀원 구성 및 역할 분담

• 김성준
  • backend : 영화 model, serializer, views 작성
  • frontend : 영화 관련 페이지 css와 db의 연결
  • etc erd 작성, ppt 작성, 발표
• 장혜원
  • backend : 로그인 기능, 회원 가입 기능, 유저관련 기능
  • frontend : 유저와 관련된 페이지의 css와 db 연결
  • etc : readme 작성

메인 페이지

• 영화 포스터를 카드 형식으로 띄우기
• 포스터 클릭시 영화의 상세 페이지로 이동
• 상단의 버튼을 통해 장르별로 영화를 필터링 할 수 있다.
• 페이지네이션을 통해 다음 페이지로 이동할 수 있다.

nav영역

• Movie, Recommand, search, Login, Logout, Profile, Signup 으로 구성되어있으며 로그인 여부에 따라 보이는 것이 다르다.

상세 영화 페이지

• 영화의 포스터, 제목, 장르, 평점, 줄거리를 기본 데이터로 보여준다.
• 영화에 대한 좋아요와 시청한 영화를 체크할 수 있다.
• 좋아요 버튼에서 그 영화에 좋아요한 사람의 수를 알 수 있다.
• 상세 영화 페이지에서 그 영화에 대한 댓글을 달 수 있다.
• 댓글에는 별점과 내용이 포함되며 댓글 제출시 Comments창에 입력한 댓글이 입력되고 프로필 이미지와 별점, 이름, 댓글이 작성된 시간이 출력된다.
• 오른쪽의 삭제 버튼을 통해 자신이 작성한 댓글을 삭제할 수 있다.
• 댓글의 유저네임 클릭시 해당 유저의 프로필 페이지로 이동한다.

검색 페이지

• 화면 상단 Nav의 검색창을 통해 영화를 검색할 수 있다.
• 검색시 검색 결과 창으로 이동하며 검색한 단어가 포함된 영화를 모두 보여준다.
• 영화의 포스터가 화면에 나타나고 클릭시 영화의 상세 페이지로 이동 가능하다.

추천 페이지

• 유저가 좋아요 혹은 봤어요를 클릭한 영화 데이터를 기반으로 영화의 장르 개수를 저장하여 가장 많은 장르의 영화를 평점순으로 10개를 보여준다.
• 만약 유저가 아직 좋아요나 봤어요를 클릭하지 않은 경우 인기순으로 10개를 보여준다.

프로필 페이지

• 화면 상단의 Profile 클릭시 로그인된 유저의 프로필 페이지로 이동한다.
• 프로필 페이지에는 해당 유저가 저장한 이미지가 보여지며 이미지를 저장하지 않은 경우 기본 이미지가 보여진다.
• 프로필 유저의 팔로우, 팔로잉수를 출력하며 자신의 페이지에는 팔로우 버튼이 존재하지 않는다.
• 팔로우, 팔로잉 클릭시 모달 창으로 팔로우, 팔로잉한 사람의 유저네임이 목록으로 띄워지고 해단 유저네임 클릭시 해당 유저의 프로필로 이동한다.
• 좋아요한 영화와 봤던 영화가 보여진다.
• 그 영화클릭시 해당영화의 상세 페이지로 이동한다.

로그인, 회원 가입 페이지

• 로그인이 되지 않은 상태라면 상단에 Login, Signup을 보여주며 클릭시 로그인, 회원가입창으로 이동한다.

느낀점

• 김성준

  • 프로젝트가 시작되고 페어와 같이 설계부터 시작하였습니다. 프로젝트의 컨셉을 먼저 잡고 ERD를 작성했습니다 어떤 기능을 구현할지 구현을 할때 어떤 방법으로 어느정도 구상하고 프로젝트를 시작했습니다. 하지만 막상 프로젝트를 시작하고 처음의 큰 틀은 지키되 구현방법에서 많은 오류와 생각대로 되지 않아 프로젝트를 진행하며 계획했던 구현 방법과는 다르게 구현을 하였던 기능도 있었습니다. 프로젝트를 진행하다보니 욕심이 생겨 구현하고자 하지않았던 기능들도 추가 하게되었습니다 또한 기능을 구현하고자 하였지만 못했던 기능이 있었습니다. 캐러셀이 그 기능이였는데 컴포넌트를 많이쓰다보니 css에서 캐러셀을 구현하는데 어려움을 겪었고 결국 구현하지 못했던부분이 많은 아쉬움으로 남았던것 같습니다 이후 프로젝트를 진행하게 되었을때 이 문제를 거름삼아 조금 더 완성도가 높은 프로젝트를 진행 할 수 있을 것 같습니다.

• 장혜원

  • 우선 처음으로 해 본 페어 프로젝트라서 깃으로 데이터를 관리하는 것부터 난항을 겪었다. 혼자서만 사용하던 깃을 둘이서 사용하다보니 충돌이 잦았고 따라서 이로 인해 새로 만드는 경우도 있었다. 그래서 이제는 나름 익숙하게 사용할 수 있게 된 것 같다. 그리고 프론트와 백을 나누어 프로젝트를 진행한 것도 처음이라 무엇부터 해야하는지를 결정하는 것도 어려웠다. 하지만 페어와 함께 설계하고 순서를 결정하면서 기능을 나누어 구현을 시작했고 처음에는 막막했지만 기능이 하나씩 구현되는 것이 보여지니 뿌듯했다. 가장 오래 시도했던 것은 유저가 입력한 이미지를 DB에 저장하고 그것을 다시 불러오는 과정에서 아직은 백-프론트 연결이 익숙지 않아 몇번 시도하고 포기했다. 하지만 다른 기능을 구현하면서 연결에 대해 이해하게 되었고 이미지를 저장하는 것에 성공했다. 아직은 부족한 점이 보이고 더 구현하고 싶은 기능들도 있어 아쉽지만 좋은 경험이었다.