[아무(Archive of Movie)]

영화 추천 커뮤티니 사이트인 아무는, 영화에 대한 기록들을 남긴다는 의미인 아카이브 오브 무비(Archive of Movie)와, 고대 그리스의 소통의 장이라는 의미로 아고라 오브 무비(Agora of Movie), 그리고 아무 영화나 추천해준다는 말장난을 이용하여 만들어진 이름입니다!

커뮤니티에서 자신과 비슷한 취향의 유저, 혹은 정반대의 유저들을 만나 다양한 영화를 추천 받아보세요!

가. 개발 단계

1) 개발 기간

📅2022.05.11 ~ 2022.05.26

2) 와이어 프레임

디자인 툴 Figma를 이용하여 제작(📂Figma 링크)

페이지별 UI 구성 기획
댓글 기능을 활용해 팀원간의 비동기적 쌍방향 소통

3) ERD

draw.io

Django DB 구성에 필요한 roadmap 설계

4) API 설계

ㄱ. main project

HTTP verb	URL 패턴	설명 및 연결 urls/함수
	`admin/`	admin.site.url
	`api/v1/community/`	include(’community.urls’)
	`api/v1/movies/`	include(’movies.urls’)
	`api/v1/accounts/`	include(’accounts.urls’)
	`api/v1/accounts/`	include(’dj_rest_auth.urls’)
	`api/v1/accounts/signup/`	include(’dj_rest_auth.registration.urls’) 회원가입

ㄴ. accounts app

HTTP verb	URL 패턴	설명
GET	`profile/<username>/`	user의 프로필 페이지로 이동 (좋아요한 영화들 출력이 기본)
POST	`profile/<username>/follow/`	user에 대한 follow 상태 변화 (로그인 상태가 아닐 시 로그인 필요 알림 띄우기 or 팔로우 버튼 없애기)
POST	`profile/<username>/update/`	본인일 때만 profile img, nickname, introduce 프로필 생성
PUT	`profile/<username>/update/`	본인일 때만 profile img, nickname, introduce 상태 변화
GET	`profile/<username>/bookmark/`	북마크한 영화들이 출력 되고 있는 user의 프로필 페이지
GET	`profile/<username>/article/`	user가 작성한 게시물이 출력 되고 있는 user의 프로필 페이지
GET	`profile/<username>/comment/`	user가 작성한 댓글이 출력 되고 있는 user의 프로필 페이지

ㄷ. community app

HTTP verb	URL 패턴	설명
GET	`total/<int:page>`	전체 게시판 페이지
GET	`hot/<int:page>/`	인기 있는 게시물 페이지
GET	`review/<int:page>/`	영화 리뷰 페이지
GET	`free/<int:page>/`	자유 게시물 페이지
POST	`''`	게시물 생성
GET	`<int:article_id>/`	게시물의 디테일 페이지
PUT	`<int:article_id>/`	본인인 경우 게시물 수정
DELETE	`<int:article_id>/`	본인인 경우 게시물 삭제
POST	`<int:article_id>/like/`	게시물 좋아요
POST	`<int:article_id>/comments/`	댓글 생성
PUT	`<int:article_id>/comments/<int:comment_id>/`	본인인 경우 댓글 수정
DELETE	`<int:article_id>/comments/<int:comment_id>/`	본인인 경우 댓글 삭제

ㄹ. movies app

HTTP verb	URL 패턴	설명
GET	`/`	HOME화면 (추천 영화)
GET	`hot/`	최근 HOT(최근 좋아요가 많이 눌린)한 영화 리스트 데이터 전송
GET	`like/`	팔로우한 사람들이 좋아하는 영화 리스트 데이터 전송
GET	`bookmark/`	팔로우한 사람들이 북마크한 영화 리스트 데이터 전송
GET	`genres/`	DB의 장르 데이터 전송
GET	`search/<int:search_page>/`	전체 영화 검색 페이지 /
GET	`<int:movie_id>/`	단일 영화 디테일 조회 페이지
POST	`<int:movie_id>/like/`	단일 영화에 대한 like 상태 변화 (로그인 상태가 아닐 시 로그인 필요 알림 띄우기 or like 버튼 없애기)
POST	`<int:movie_id>/bookmark/`	단일 영화 bookmark기능 상태 변화 (로그인 상태가 아닐 시 로그인 필요 알림 띄우기 or bookmark 버튼 없애기)
GET	`anonymous/recommend/recent/`	비로그인 유저가 받는 추천 영화 리스트(최신 순)
GET	`anonymous/recommend/hot/`	비로그인 유저가 받는 추천 영화 리스트(인기 순)

5) 파일 구조

Django

Django 컴포넌트 구조 Notion 링크

Vue

Vue 컴포넌트 구조 Notion 링크

나. 프로젝트 소개

1) 개발 도구

BE: Django
DB: Sqlite3
FE: Vue, Vuex, Vuetify, SCSS
UI tool: Figma

2) 주요 기능

ㄱ. 회원가입 페이지

보기 설정 구현: 눈 모양 아이콘 클릭 시 비밀번호 확인 가능, 눈 모양 아이콘 토글 변경
오타 및 비밀번호 확인과 일치 여부 확인 가능
가입 시 프로필 사진 생략 가능
이 경우 기본 이미지로 최초 설정

ㄴ. 로그인 페이지

회원가입과 마찬가지로 비밀번호 확인 가능
회원가입 페이지 이동 버튼 배치

ㄷ. 네비게이션 바

아무 영화 사이트의 모든 페이지로 이동 가능
비로그인 유저는 마이페이지 링크 생략
프로필 사진 미등록 유저: 프로필 사진 자리에 기본 이미지 배치

ㄹ. 메인 페이지

다양한 기준에 의한 영화 추천
- AMU 인기 영화 : 서비스 사이트에서 최근 한 달간 가장 많이 좋아요/북마크가 기록된 영화
- 최근 개봉 영화 : 가장 최근 개봉한 영화들
- 인기 영화 : TMDB 영화 API의 popular(관객 수) 기준으로 높은 점수를 받은 영화

로그인 사용자에게는 팔로우 기능을 기반으로 한 영화들을 추가로 추천 제공
- 팔로워들이 좋아하는 영화
- 팔로워들이 북마크한 영화

검색바 검색을 통해 영화 검색 결과 페이지로 이동
검색어는 영화 제목과 배우 이름 중 선택해 검색
검색하고 있는 글자가 포함된 제목의 영화들을 검색창 하단에 표시
표시된 영화 제목을 클릭 시 해당 영화의 상세페이지로 이동

ㅁ. 영화 검색 페이지

검색된 영화들의 결과 페이지
배우 이름으로 검색 시, 해당 배우가 출연한 영화들을 표시
정렬 기준
- 최신순, 오래된 순
- 평점 높은 순, 평점 낮은 순
- 제목 오름차순, 제목 내림차순
필터 기준
- 영화 장르
- 최소 평점

ㅂ. 영화 상세 페이지

UI 및 기능
- 포스터와 영화의 트레일러를 상단에 표시
- 로그인한 유저만 좋아요와 북마크 버튼을 클릭 가능
출연진
- 출연진 사진에 마우스를 올리면, 배우 이름과 배역 표시
- 출연진 사진을 클릭 시 해당 배우가 출연한 영화들을 표시하는 검색페이지로 이동
리뷰
- 해당 영화에 대해 커뮤니티에 연결된 리뷰들을 확인 가능
- 리뷰 클릭 시 커뮤니티의 해당 리뷰 게시글로 이동

ㅅ. 커뮤니티 페이지

아래의 여러 카테고리들로 구분
- 영화게시판 : 영화와 관련된 게시글. 게시글에 영화를 검색해 제목을 입력하면 게시글에서 영화 포스터를 확인 가능
- 자유게시판 : 영화와 무관한 내용의 글을 작성하는 공간
- 전체게시판 : 영화게시판의 게시물과 자유게시판의 게시물을 모두 확인 가능
- 인기게시판 : 댓글 수, 좋아요 수를 기준으로 10개, 50개, 100개가 넘는 게시물만 필터해 확인 가능

정렬기준 선택 가능
- 최신순 : 가장 최근에 등록된 게시물부터 차례로 표시
- 좋아요 많은 순 : 좋아요 개수가 많은 게시물부터 차례로 표시
- 댓글 많은 순 : 댓글 개수가 많은 게시물부터 차례로 표시

페이지 당 표시되는 게시물의 개수를 설정 가능
- 5개, 10개, 20개 단위

ㅇ. 게시물 작성 페이지

영화 리뷰와 일반 게시물 중 선택해서 작성
리뷰의 경우 특정 영화를 검색해서 등록해야만 작성 가능
귀여운 별을 이용해 평점 등록
자유게시판 선택 시, 영화 검색바와 평점 선택 별 미표시

ㅈ. 게시물 수정 페이지

본인이 작성한 게시물을 수정
기존 작성 내용이 자동으로 폼에 표시
이전 버튼 클릭 시 수정 중이던 내용 취소 가능

ㅊ. 게시물 상세 페이지

게시물 작성 유저만 수정/삭제 버튼을 확인 가능
유저들은 좋아요 및 댓글 작성 가능
커뮤니티로서의 정체성으로 소통 기능 확보
영화 리뷰 게시물일 경우 해당 영화의 포스터까지 확인 가능
영화 포스터를 클릭 시 해당 영화의 상세 페이지로 이동

ㅋ. 프로필 페이지

좋아요한 영화

유저의 프로필 페이지 진입 시 기본적으로 유저가 좋아요를 누른 영화 표시
대상 유저를 팔로우/언팔로우 가능
본인 프로필 페이지인 경우, 사이트 내의 활동명과 자기소개, 프로필 사진을 수정 가능

북마크한 영화

프로필 페이지의 유저가 북마크한 영화 표시

작성한 게시글

프로필 페이지의 유저가 작성한 게시글 표시
가장 최근 작성한 게시글부터 상단에 배치해 나열
게시글 제목 클릭 시 해당 게시물로 이동

작성한 댓글

유저가 작성한 댓글 표시
댓글을 달은 원글의 제목을 하단에 표시하여 확인 가능
해당 댓글 영역 클릭 시 해당 댓글이 달린 게시물로 이동

ㅌ. 반응형 구현

다. 협업 과정

1. 팀원 및 업무 분담

	공통	박승훈	이윤경
BACK	ERD설계 API 설계	데이터 소스 구축 Pagination 로직 구현 게시글 정렬 및 필터 기능 구현	추천 알고리즘 구현 영화 검색 기능 구현 영화 정렬, 필터 구현 데이터 모델링
FRONT	와이어 프레임 제작	컴포넌트 설계 및 시각화 SCSS 모듈화 Community 컴포넌트 Profile 컴포넌트	Django-Vue 연동 Movie 컴포넌트 로고 및 캐릭터 디자인

2. 개발 기록

🧷노션 링크

공통

박승훈

이윤경

라. 회고

박승훈

와이어프레임이 무색하게

Figma를 이용해서 와이어프레임을 작성하는 데에 꽤나 많은 시간과 노력을 쏟았는데, 막상 개발에 돌입해 디자인을 하다보니 와이어프레임을 구현하지 못하거나 더 개선한 경우가 허다했습니다. 물론 좋은 뼈대가 되어준 것은 사실이나, 너무 디테일한 시각적 계획은 무의미하니 더 실전에 빠르게 돌입하는 것이 좋겠다고 느꼈습니다.

화면을 그리는 즐거움. 짧은 즐거움.

처음에는 필요한 데이터를 받는 것이 중요하다고 느껴서 django serializer를 완전히 구성하고, 화면에 뿌리기 위한 준비를 모두 마쳤는데 그 기간이 꽤나 길었습니다. 그 사이에 원하는대로 잘 되지 않기도 하고 노력의 성과가 시각적으로 도드라지지 않아 지치기도 했습니다.

그런데 프론트엔드로 화면을 구성하면서 준비된 데이터를 조금씩 화면에 필요한 재료로 사용하며 그리다보니 재미도 있었고, 레이아웃 구성 실력도 삽시간에 늘 수 있었습니다. 나중에는 데이터 구성도 구성이지만, 화면에 이를 그리고 필요한 부분을 더 보충하는 방식으로 진행해봐도 좋겠습니다.

길고도 짧았던 2주

사전에 팀원을 미리 구성하여 당초 주어진 기간보다 더 일찍 시작해 구상부터 기획까지 마쳤는데 그 날부터 오직 프로젝트만 생각하며 잠자고 밥 먹는 시간을 제외하고 프로젝트에만 몰입했는데, 2주가 어떻게 갔는가 싶을 정도로 시간이 부족했습니다.

실제로 2주 중에 10일은 새벽 4시가 넘도록 개발을 붙잡고 있었고, 이 중 일주일은 아침 해가 뜨고 나서 잠이 들었을 정도로 몰입했습니다. 우리의 온전한 실력으로 어엿한 하나의 서비스를 만드는 즐거움과 동시에 계획했던 많은 것들을 모두 해내고 싶다는 부담이 동시에 있었습니다.

마감을 바라보는 지금, 더 구현해보고 싶은 기능들이 있지만 이렇게 마무리를 지어야 함이 아쉽습니다. 기회가 된다면 이 프로젝트, 또는 다른 프로젝트를 처음부터 구성해 실전 개발 실력을 키우고 싶습니다.

개발은 역시 실전

이번 프로젝트 진행 중에 데이터를 불러오고 선택적으로 구체화하기 위한 django의 serializer, Python 언어 방식의 django의 ORM, 화면을 구성하는 CSS의 superset인 SCSS까지, 지금껏 제대로 이해하지 못했던 부분들이 정말 많은 기술들을 자의 반, 타의 반으로 파나가며 공부를 해야했고, 실전압축적으로 공부하며 피부로 와닿는 실습을 하니 단기간에 많은 이해와 성장이 동반되었다고 생각합니다.

실제로 SCSS 같은 경우는 개발 블로그의 레이아웃이나 세부 디자인을 커스터마이징하기 위해 한동안 많이 써봤음에도 불구하고 본격적으로 개발 단계에서 사용해보는 것이 처음인만큼 많이 해매거나 비효율적으로 사용하기도 했습니다. 하지만 불과 3일도 채 되지 않아 mixin, nesting, calc, 변수, 함수 등의 기능들을 조금이나마 익숙히 사용할 수 있었습니다.

프론트엔드 재밌다!

레이아웃 구성에서 반응형 구현을 잘 하지 못했는데, 구현을 위해 flex를 부딪히면서 구조화하는 연습을 하다보니 이제는 웬만한 구조는 모두 어떻게 짜야할지 구조화가 가능해졌습니다. 위에서 언급한 SCSS의 mixin을 이용해 자주 사용하는 반복 구문들은 컴포넌트화하여 include해 사용하는 데에도 익숙해졌습니다.

한 페이지씩 화면을 구성하며 점차 원하는대로 뚝딱뚝딱 페이지를 만들어내는 제 스스로의 성장을 보며 뿌듯하고, 극한의 상황에서 사람이 어떻게 난관을 파헤쳐나가는지 느낄 수 있었습니다.

고통은 나누면 반

이번 프로젝트는 사실상 정말 고역이었습니다. 기간은 짧았고, 하고 싶은 것은 많았습니다. 그래서 반 동기, 스터디원들과 함께 계속 개발에 몰두했는데, 오랜 밤샘 작업과 반복이 계속되며 지쳐가는 와중에도 함께 힘든 순간을 공유하고 위로할 수 있다는 것이 얼마나 큰 의지이자 도움이 되는지 느낄 수 있었습니다.

또한 스스로 안주하지 않고 더 나아갈 수 있는 원동력이 되었습니다. 막히거나 어려운 부분을 공유하며 서로 해결을 위해 도우며 앞장서고, 좋은 기술을 소개해주며 시너지를 얻었습니다. 한편 서로가 서로의 결과물에 감탄하고 영감과 자극을 받기도 하였습니다. 열정적인 동료들과 함께여서 이 2주간의 고행을 마칠 수 있었습니다.

이윤경

두려움 반 재미 반!

처음에는 내가 아는게 없는데 개발이 가능한걸까? 무서웠고, 같은 팀원에게 폐가 되는게 아닐까 두려움이 있었지만, 점점 눈에 보이는 결과물을 만들어내면서 매일 자발적으로 밤을 지새우게 되었습니다. 2주간의 강행군에 많이 지치기도 했지만, 처음 포스트맨으로 원하는 값들을 끄집어 낸 순간 느낀 환희는 잊혀지지 않습니다. 모르는 것들이 많아도 공부해가면서 하나하나 기능들을 완성할 때마다 너무 기뻤고, 이러한 성취감 덕에 끝까지 개발을 이어나갈 수 있었던 것 같습니다.

다시 처음으로

개발을 진행해가면서 많이 배우고, 성장하지만, 또 그것은 이전의 나는 지금의 나보다 조금 형편없었다는 뜻이기도 합니다.. 이전에 왜 이런 방식으로 코드를 구현했는지 이해가 안가기 시작하고, 전에 만든 기능을 활용해야 하는데, 이 코드로는 원하는 방향으로 구현할 수 없다는 것을 중간에 깨달았습니다. 때문에 도중에 Vuex를 사용하지 않고, props와 emit으로 구현했던 검색기능을 수정해야했는데, 코드 수정 중, 오타 하나를 못찾아서 3시간을 날렸다는 것을 알았을 땐 딱 지구 한바퀴만 돌고 오고 싶기도 했습니다. 이부분에서 시간을 많이 빼앗긴 것 같아 아직도 아쉬운 마음이 많이 듭니다.

뒤돌아보면서

하고 싶은 것들은 많았고, 이를 위해 많은 밤을 페어와 함께 지새웠지만, 아무리 시간을 늘려봐도, 부족한 실력을 메꾸기에는 짧았던 것 같습니다. 프로젝트를 진행하면서 현재 나에게 필요한 부분이 어느 곳인지 깨달았고(특히 CSS...), 다음에는 더 만족스러운 결과를 내기 위해 앞으로 더욱 공부해나갈 것 입니다! 프로젝트는 끝이 났지만, 무언가를 배울 때마다, AMU의 업데이트를 계속 진행해볼 것 같습니다.

마지막으로, 스스로에게 아쉬운 부분도 많았지만, 거의 매일 3시간씩 잠을 자며 힘냈던 자신에게 수고했다고는 말해주고 싶습니다! 부족했던 저와 함께 프로젝트를 진행해 준 페어에게 감사하고, 질문할 때마다 친절하게 달려와서 알려주던 스터디 팀원들에게도 사랑을 가득 담은 하트를 보냅니다!! 정말 대단해서 따라가고 싶은 동료들이 있다는 건 정말 행운인 것 같습니다. 끝나서 이렇게 마지막 문구를 적고 있다니.. 이 감정을 말로 어떻게 표현해야할 지 모르겠습니다.. 앞으로도 화이팅 !!! 🙌

Name		Name	Last commit message	Last commit date
Latest commit History 212 Commits
final-pjt-back		final-pjt-back
final-pjt-front		final-pjt-front
readme_asset		readme_asset
README.md		README.md

team-amu/amu

Folders and files

Latest commit

History

Repository files navigation