2023. 3. 13. 13:30ㆍ포트폴리오
[미디어 컨텐츠 리뷰 전문 사이트 프로젝트]
GitHub : https://github.com/zlxjh9812/Final_project
GitHub - zlxjh9812/Final_project
Contribute to zlxjh9812/Final_project development by creating an account on GitHub.
github.com
About me: https://maenggoo.tistory.com/entry/About-me
1. 웹 사이트 소개
1) 개발 동기
요즘은 무엇을 하든 실천하기 전에 이미 경험이 있는 다른 사람들의 의견을 먼저 확인하는 경향이 강한 추세라고 생각했습니다. 보편적인 예로 배달 음식을 주문하기 전 다른 사람들이 남긴 별점, 리뷰 등등을 참고하여 불필요한 손해를 사전에 차단하는 것이 있습니다. 이렇듯 '리뷰' 라는 자체의 가치를 높게 평가하여 리뷰 전문 사이트를 제작하기로 했습니다.
2) 더 나아가
현재 제작한 사이트는 영화/TV프로그램 등등 미디어 컨텐츠 관련 리뷰만을 다루지만 더 나아간다면 제품, 장소 등등 여러 분야를 다룰 수 있는 가능성이 있다고 생각합니다.
3) Reviewer 만의 장점
Reviewers 사이트 내에서는 사용자들이 자신들의 개인적인 경험을 작성하여 형성될 데이터 베이스 자체가 강점이라고 생각합니다. 평소 리뷰를 볼 대상을 특정한 후 그 특정된 대상의 리뷰만을 볼 수 있었다면 이 사이트에서는 리뷰들 중에서 자신이 볼 대상을 찾을 수 있다는 점 인것 같습니다. 즉 컨텐츠를 정한 후 리뷰를 찾아보는 것이 아닌 리뷰만을 보고 추천하는 컨텐츠를 결정할 수 있도록 틀을 깬 것이라고 생각합니다.
4) Reviewers 보완해야 할 단점
장점에는 조건이 붙는다는 것이 단점인것 같습니다. 각각의 사용자들의 주관들이 모인 데이터베이스가 강점이기 때문에 어느정도 수준의 사용자들이 확보 되지 않는다면 그 데이터베이스 자체의 신뢰도가 떨어진다는 단점이 있습니다.
👉 그리하여 리뷰만을 작성하는 것이 아닌 API 데이터를 활용하여 인기 영화/ 인기 TV프로그램을 제공해주는 컨텐츠를 추가하였습니다.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
2. 사용 기술
1) Spring FrameWork
2) JSP
3) JavaScript
4) Java
5) jQuery
6) Oracle
7) Ajax
8) HTML
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
3. 구현 화면 및 기능
1) 메인 페이지
인기 영화와 인기 TV프로그램 카테고리에 따라 인기영화 -> TV 프로그램으로 변경입니다.
1-1) 인기 영화
메인 페이지 중 인기영화 페이지로써 상단에는 인기영화를 API를 활용하여 영화 컨텐츠를 인기순으로 끌어와 정보를 제공해주며 하단에는 사용자가 직접 작성한 리뷰 중 추천수에 따라 순서대로 표출 됩니다.(현재는 모두 0이기 때문에 데이터 순으로 정렬)
1-2) 인기 TV 프로그램
위와 같지만 인기 영화에서 인기 TV 프로그램으로 컨텐츠가 바뀌며 인기영화->인기TV프로그램으로 텍스트가 바뀝니다.
2) 컨텐츠 리뷰 게시판
2-1) 영화 리뷰 게시판
왼쪽 사이드 바 옵션 중 컨텐츠 리뷰의 하위 옵션인 영화 리뷰를 선택하면 확인할 수 있는 화면으로 사용자가 직접 작성한 리뷰들의 모음을 보여주는 화면 입니다.
2-2) TV프로그램 리뷰 게시판
TV프로그램의 리뷰 게시판으로 영화 리뷰와는 분류 해놓은 상태입니다. 이 또한 컨텐츠 리뷰의 하위옵션 중 TV 프로그램 리뷰를 선택하면 확인 할 수 있는 화면으로 사용자가 직접 작성한 리뷰 입니다.
3) 자유게시판
리뷰 게시판과는 독립적으로 사용할 수 있는 자유게시판 입니다.
1. 미디어 컨텐츠와는 별개로 자유 주제로 사용자들끼리 의사소통을 하는 게시판을 제작했습니다.
2. 미디어 컨텐츠가 아니기 때문에 썸네일 기능을 삭제한 게시판입니다.
3. 조회수와 추천수를 확인할 수 있며 작성 날짜 또한 확인 할 수 있습니다.
4. 하단에 글쓰기 버튼을 통해 공통 글 작성 폼으로 이동할 수 있습니다.
4) 회원가입
회원가입을 할 수 있는 페이지입니다.
1. 아이디, 비밀번호와 비밀번호 확인 별명을 중복 체크 혹은 일치를 Ajax로 텍스트로 표시되어 확인하는 방법을 사용했습니다.
2. 이메일 인증기능도 추가하여 이메일로 인증 번호를 받아 입력하여 일치여부를 확인하는 것도 Ajax 방식으로 처리 하였습니다.
3. 회원가입을 완료하면 데이터 베이스의 회원(users) 테이블에 저장됩니다.
5) 게시글 작성(첨부파일 미리보기)
글을 작성하는 폼입니다.
1. 로그인을 한 상태에서만 글 작성을 할 수 있도록 권한으로 제한을 두었습니다.
2. 세션을 통해 아이디를 받아와 작성자를 저장하였습니다.
3. 제목을 설정할 수 있으며 썸네일에 사용될 사진을 파일첨부로 받을 수 있고 혹은 리뷰할 컨텐츠에서 Select 옵션으로 장르(영화, TV, 웹툰, 자유게시판)을 선택하여 검색기능 자동완성을 통해 영화와 포스터를 확인한 후 썸네일을 지정 할 수 있습니다.
4. 리뷰할 컨텐츠는 필수 입력 사항이며 리뷰할 컨텐츠에서 선택한 사진은 첨부파일이 없을 경우에만 썸네일로 지정될 수 있도록 하였습니다.
5. CK 에디터를 사용하여 글을 작성할 때 썸네일과는 별개인 사진을 내용으로 첨부할 수 있으며 여러 기능들을 제공했습니다.
6) 리뷰 게시글 상세보기
사용자가 리뷰를 클릭하면 보이는 글 상세보기 페이지 입니다.
1. 상단 부분에 작성자와 날짜, 좋아요 개수, 조회수를 확인할 수 있습니다.
2. 리뷰 게시글의 제목이 Coral색으로 표시되고 있고, 제목 밑에 리뷰한 컨텐츠에 대한 영화 정보 바로가기 버튼을 밝은 회색 글씨로 만들었습니다. 같은 색으로 장르도 표시하였습니다.
3. 내용 부분에 사진을 첨부한 모습입니다.(CK 에디터)
4. 하단 부분에 좋아요 버튼을 javaScript와 Ajax를 활용해 빨간색 하트로 변함과 동시에 좋아요 개수가 +1 이 되도록 하였습니다.
5. 태그를 활용하여 독립적인 태그 검색 기능 구현을 하였습니다.
6. 우측 하단에 목록을 선택하면 리뷰 게시판으로 이동하며 댓글을 클릭했을때 하단에 존재하는 댓글의 첫줄로 이동하도록 기능 구현을 하려 했으나 불필요한 기능으로 생각되어 프로젝트를 마무리한 후 삭제하였습니다.
7) 페이징
페이징 처리 기능을 구현하였습니다.
1. 컨텐츠 리뷰(영화, TV 프로그램)과 자유게시판에서 한 페이징당 15개의 컨텐츠가 쌓이면 페이징 기능이 구현되도록 처리하였습니다.
2. 가장 오래된 리뷰가 가장 뒤쪽으로 밀리도록 구현하였습니다.