Stack
- Front-End
- HTML5, CSS3, JavaScript, JQuery, Bootstrap
- Back-End
- Java, JSTL
- DataBase
- Oracle, SQLDeveloper
- Server
- Apache Tomcat
- Open API
- TMDB API, YouTube API
Introduction
조각별 프로젝트는 KOSTA 257기 세미 프로젝트로 진행되었습니다.
Motivation
COVID-19로 인해 영화관 방문자보다 집에서 영화를 감상하는 사람들의 비중이 증가했습니다. 이로 인해 작아진 영화 시장에서는 예전의 영화들이 회자되고 역주행하는 현상이 보여지고 있습니다. 조각별은 이러한 변화를 고려하여 영화 평점을 매기고 자유롭게 영화에 대해 이야기를 나눌 수 있는 사이트를 만들고자 했습니다.
영화를 보고 후기를 쓰면서 조각을 하나씩 남기고, 영화를 평가하면서 별을 남기는 자는 의미로 조각별이라는 이름을 만들었습니다. 사람마다 각기 다른 조각별을 가지고 영화에 대해 다양한 소통을 하고자 함이 조각별 프로젝트의 목표입니다.
Project Schedule
4월 19일 : 주제 정하기
4월 20일 : DB 테이블 설계, 핸들러명 정하기, 시나리오 흐름 짜기
4월 21일 : 구현 부분 나누기, DB 쿼리 작성, VO & DAO & SERVICE 만들기
4월 24~28일 : jsp, back, front 구현하기
4월 29~30일 : 디버깅
5월 1~2일 : 디버깅 및 디테일 구현
5월 3일 : 발표 준비 & 프로그램 최종 실행
5월 4일 : 발표🌟
Team Member
Team Member Roles
- 유저 : 회원 관리 + 마이페이지 + 다른 유저의 홈 (김혜원 + 박재연)
- 영화 : 영화 api 불러오기 + 별점 남기기 + 예고편 재생 (윤해현 + 손행원)
- 후기 : 한 줄 평 작성 + git 관리 (송가영)
Features
영화
인기순으로 보기, 평점순으로 보기, 장르별로 보기
별점 남기기, 찜하기
장르별 검색, 작품으로 검색
후기
영화 감상평 남기기, 감상평 스포일러 방지 기능
베스트 댓글 보기, 최신순으로 보기
유저
팔로잉 기능, 자신의 한 줄 조각(한 줄 소개) 남기기
마이페이지 (별점, 찜, 후기 목록 보기)
Design-Prototype
miro를 이용하여 prototype을 만들었습니다.
각각 페이지마다 필요한 핸들러도 적어주면서 설계를 진행했습니다.
전체
전체적인 페이지
흐름에 따라 화살표를 만들어주어 흐름을 알기 쉽도록 설계
영화
index 페이지 : 상단 메뉴 + 슬라이드
영화 목록 페이지 : 인기순, 평점순, 장르별로 보기 가능 & 검색 기능
영화 디테일 페이지 : 영화 정보 + 예고편 보기
한 줄평 + 찜 + 별점 남기기 + 다른 사용자의 후기평 보기
마이페이지
내 정보 수정 & 한 줄 소개
찜 & 후기 & 별점 목록은 7개씩 보여주기
+(더보기) 버튼을 누르면 해당 목록의 전체 영화 목록을 보기 가능
리뷰 작성
후기 작성 (스포일러 체크 여부)
다른 후기 보기 (스포일러가 들어가 있으면 확인 더블 체크)
API
① TMDB API
TMDB API를 이용하여 영화를 가져왔습니다.
② YouTube API
YouTube API를 이용하여 영화 예고편 영상을 가져왔습니다.
The Feature I Developed
① 회원가입 (비동기)

② 내 정보 수정 (비동기) & 한 줄 소개
한 줄 소개 추가/수정 /삭제
찜한 기록 보기 + 찜 취소 기능
별점 기록 보기 + 별점 별로 기록 보기
코멘트 기록 보기 (한 줄만 출력되게)
③ 다른 유저 페이지
팔로우 추가 + 취소
찜한 기록 보기
별점 기록 보기
코멘트 기록 보기
The Feature Team Developed
Main Page
index 페이지 입니다.
처음 페이지는 슬라이드 형식으로 대표 영화를 소개하는 구성을 보여주고 있고, 메뉴바 외의 공간을 클릭하면 “인기순”으로 영화 리스트를 보여주는 페이지로 넘어가게 됩니다.
장르별로 보기
TMBD에서 제공하는 장르별을 이용하여 장르별 검색을 구현하였습니다.
인기순, 평점순, 개봉예정작으로 보기
인기순, 평점순, 개봉예정작별로 영화 리스트를 볼 수 있으며 페이징을 구현했습니다.
영화 정보 보기
i 를 눌러 영화 정보와 예고편을 볼 수 있습니다.
그리고 조각별 사용자들이 남긴 별점을 계산하여 평균 별점을 계산하였습니다.
리뷰 작성하기
영화 디테일 페이지에서 리뷰를 작성할 수 있습니다.
스포일러가 표시된 후기를 작성할 경우에 😀같이 생긴 이모티콘 버튼을 클릭하고 작성할 수 있습니다.
리뷰 보기
다른 사람의 리뷰와스포일러 리뷰를 볼 수 있습니다.
검색하기
영화 검색을 통하여 사용자가 찾고 싶은 영화를 찾을 수 있습니다.
Development Reflections (KPT)
[Problem]
아쉬웠던 점은 CSS였다.
테마와 글씨체나 색을 정했긴 했지만 각자 맡은 부분을 각자 구현을 했는데 사람마다 스타일이 달라서 조금은 다른 느낌의 디자인이 나왔다.
그리고 z-index와 bootstrap에 대해 알게 됐다.
내가 쓴 CSS코드가 제대로 작동이 안 돼서 왜 그런가하고 찾아봤더니 z-index 순위에 밀려난 것도 있었고, 부트스트랩 때문에 밀려난 것도 있었다.
부트스트랩의 우선순위에 대해서 알게 됐고, CSS에서 z-index를 쓸 때 팀원분들과 잘 상의해서 써야 할 필요성을 느꼈다.
[Try]
디버깅 중 영화 제목으로 검색하는 기능이 있었는데 띄어쓰기가 들어갈 경우 제대로 검색이 되지 않았던 문제가 있었다. 만약 공백이 들어가 있다면 “%20”으로 치환하여 검색하는 기능을 다시 돌려봤는데 제대로 돌아갔다.
String text = request.getParameter("query");
String[] array=text.split("");
String text2="";
for(int i=0; i<array.length;i++) {
if(array[i].equals(" ")) {
text2+="%20";
}else {
text2+=array[i];
}
}
[Keep]
① 매번 프로젝트를 하면서 느끼지만 설계가 가장 중요한 것 같다. 이번 프로젝트에서는 테이블명, 변수명, 핸들러명을 다 정하고 시작해서 수월하게 진행이 된 것 같다.
② 일정을 정하는데 이상적인 목표에서 80% 정도만 잡으라는 조언을 보고 딱 내가 할 수 있을 만큼의 80%로 계획을 세웠다.
여기서 조금만 더 빡센 일정이었다면 시간과 마음의 여유가 없었을 것 같다.
③ 구현한 걸 비동기로 보여주고 싶어서 Jquery를 이용했는데 익숙치 않아서 여러번 고쳐야 했었다.
하루에 몇 시간 동안 잡고 있었기 때문에 Jquery와 ajax에 대한 이해도가 올라가게 됐다.