현재 SSAFY(삼성청년소프트웨어아카데미)로 부터 코드 반출 관련 허가가 승인되지 않아 현재 상세 코드는 확인이 어렵습니다.
양해 부탁드립니다.
🏆 SSAFY 1학기 종합 프로젝트 최우수상 시상 🏆
- 프로젝트명 : Phantom
- 팀원 : 이륜기, 이언호
- 시작 일시 : 2021.11.17.(수)
- 완료 일시 : 2021.11.25.(목)
- 기술 스택
영화관으로의 복귀
가장 대중적인 문화 활동 중 하나인 영화 시청이 코로나가 창궐한 이후 사회적 거리두기로 영화 시청 인구 감소 및 영화관 방문 감소하였다.
코로나 백신 2차 접종이 전국 약 80%를 달성한 지금, 이 시점에 위드 코로나로 기존 일상으로 복귀와 함께 영화관으로 복귀를 바라는 사람들의 영화 추천 및 영화관 예매 안내, 넷플릭스 안내 서비스
- 현재 인기순, 상영순, 각 장르별 영화 목록 조회 (TMDB 기반)
- 영화 상세정보 조회 (트레일러, 줄거리, 배우, 제작진, 관련 영상 등.. 정보 제공)
- 조회한 영화 좋아요, 싫어요 데이터 기반으로 활용한 사용자별 맞춤 영화 추천 서비스 (좋아요, 싫어요 부족시 랜덤)
- 조회한 영화가 현재 CGV에서 상영중인 경우 CGV 내 해당 영화 예매 사이트로 이동
- 조회한 영화가 넷플릭스에서 시청 가능한 경우 넷플릭스 사이트 내 해당 영화 시청 사이트로 이동
- 자체 서버 내 사용자가 원하는 영화가 없는 경우, 검색창을 통해 영화 상세정보 조회 가능
- 사용자간 소통을 위한 커뮤니티
초기 버전 (제작 2021.11.17)
초기 버전 (제작 2021.11.18)
- Daily Scrum 활용한 컨셉 정리 및 하루 할당량 확인
- slack 통한 특정 코드 공유 및 확인 / 수정
-
본 프로젝트의 컨셉에 맞게 사이트 인트로 구성
개발자가 전달하려는 내용을 표현
- 로그인 및 회원가입 성공 시 영화관에 입장하는것과 같은 느낌을 주기 위한 애니메이션 적용
-
하단 네비게이션 바 이용하여 인기순, 장르별 영화 리스트 조회 가능
-
중앙에 선택된 영화 트레일러 영상 배경에 출력
배경으로 영상 지속적 출력할 경우 사용자 편의성에 문제 야기 고려하여 배경에 마우스를 올려 두어야 영상이 보이도록 설계
- 영화 상세정보 조회(트레일러, 배우, 제작진 등 조회)
- 사용자가 해당 영상 좋아요 / 싫어요 기능 적용
- 해당 영화에 대한 의견 남기기
- 선택한 영화가 현재 CGV 상영중인 경우 CGV 사이트 내 해당 영화 예매 페이지로 이동
- 사용자가 해당 영화를 손쉽게 예매할 수 있도록 설계
- 해당 영화가 현재 Netflix 에서 시청 가능한 경우, Netflix 사이트 내 해당 영상 페이지로 이동
- 사용자가 해당 영화를 손쉽게 시청 할 수 있도록 설계
- 사용자가 좋아요 누른 영화들을 확인 가능
- 사용자 맞춤 영화 추천
- 사용자간 소통을 할 수 있는 커뮤니티 공간
- 사용자가 원하는 영화 검색 (검색어가 포함된 영화 리스트 출력)
- 사용자 편의 증대를 위해 중요한 기능들로만 메뉴 구성 (다수의 메뉴로 사용자의 혼란 발생 가능성 감소를 위한 설계)
-
동적 페이지 크롤링의 어려움
CGV 와 Netflix 에서 현재 상영중인 영화 목록 확인 및 영상 관련 주소 확인을 위해 크롤링이 필요했으나 해당 페이지들이 동적 페이지로 단순 크롤링으로는 원하는 자료를 얻기 힘들었음.
=> Selenium 이용한 문제 해결
구글을 통한 검색 중 동적페이지 크롤링시
Selenium을 이용한다는 정보를 얻음.Selenium Documentation을 확인하여 동적 페이지 크롤링에 성공시킴.
-
프론트엔드와 백엔드 통신의 어려움
프론트엔드와 백엔드를 동시에 이용하여 개발한 경험이 전무하여 초기에 데이터 통신에 어려움을 겪음
=> Django rest_api 와 Vue Axios 활용한 데이터 통신
데이터 통신을 조금 더 간편하고 단순하게 하기 위해
django rest_api구현하여 클라이언트의 요청에 따라 데이터 응답하도록 설계Axios 활용하여 비동기 통신 구현, 각 페이지에서 필요한 정보들만 서버로 요청하여 응답 받아 통신 비용 감소 효과 꾀함
-
디자인 감각의 부족
디자인에 대한 학습 및 감각의 부족으로 초기 기획 당시 상세한 디자인 컨셉을 잡기 어려웠음
초기에는 사이트의 방향성과 컨셉을 잡고 프로젝트 진행
=> Vue Framework (Vuetify, Vuesax...) 이용한 UI 디자인
부족한 디자인을 보완하기 위해
Vuetify,Vuesax와 같은 프레임워크 이용하여 적절한 상황에 프로젝트에 적용하여 사용또한,
codepen사이트에서 다른 개발자가 제작한 애니메이션 및 디자인 참고
-
팀원과 의사소통의 어려움
코로나로 인한 비대면으로 초기 기획 당시 팀원과 의사소통에 어려움을 겪음
대화를 하지만 대면으로 의사소통하는것에 비해 많이 부족함
=> Discord, Slack 이용한 의사소통
Discord상시 이용으로 잦은 대화를 통한 의사소통 진행, 확인이 필요하거나 수정이 필요한 코드는Slack이용한 의사소통좀 더 명확한 의사소통이 필요한 경우
Discord화면 공유를 통한 의사소통을 진행
-
Vuex 이용 경험 부족으로 인한 각종 오류
하나의 저장소에서 데이터와 함수를 관리한다는 장점을 믿고 잦은 Vuex 사용
그러나 Vuex 에 대한 이해 및 숙련도 부족으로 각종 오류 발생
=> 꼭 필요한 경우에만 Vuex 사용 및 주석으로 기능 구분
Vuex가 무조건 좋은것만은 아니란것을 인지Vuex사용 빈도 감소 및 주석으로 기능 구분또한, 하나의 함수에는 한가지의 기능만을 하도록 기능 단순화를 하여 부품화를 위한 노력 진행
일주일이라는 짧은 기간동안 컨셉 기획, 디자인, 설계, 프로그래밍 등을 진행하는것이 다소 어렵게 느껴졌다.
또한, Vue 에 대한 1주일간의 학습 이후 바로 프로젝트를 진행하여 어려움을 더했다.
팀원과의 의사소통을 통해 컨셉을 하나로 일치시켜 앞으로 나아갈때마다 뿌듯함이 생겼다.
이번 프로젝트를 진행하게 되면서, 학습했지만 아직 미숙한 기술스택, 내가 새로 배워야할 필요가 있는 기술스택 등 현재 나의 위치와 상황에 대해 뒤돌아볼 수 있는 계기가 되었다.
또한, 프로그래밍이 진행되면서 다른 개발자가 이해하기 좋고, 사용자 경험을 더 증진 시킬 수 있는 방법에 대해 조금 더 고민해볼 수 있는 시간이였다.