[Java 웹 개발] 파이널 프로젝트 1. 기획

febCho·2024년 2월 16일
JavaSpringboot기획서스프링부트요구사항정의서웹개발파이널프로젝트

Final-ZIBI

목록 보기
1/6
post-thumbnail

1. 주제

1-1. 브랜드 네임

자취 플랫폼
ZIBI(집이 될래)

세미 프로젝트는 클론 코딩이었으니, 이번엔 기존에 없는 사이트를 기획해보자는 일념 하에 '자취인들에게 정보를 제공하는 플랫폼'을 개발하기로 했다.

아이데이션 과정에서 많은 자취인들이 자취하는 공간을 집이 아닌 '방'이라 부른다는 것을 떠올렸고, 낯설기만 한 방을 집으로 만들 수 있도록 다양한 정보를 제공하겠다는 기획 의도에 부합하는 '집이 될래(초안)'가 탄생했다.
(ZIBI는 챗봇, 고객센터 등에서 사용할 이름 정도로만 제안했었다.)

이후 로고화 작업 중 좀 더 그래픽 적인 면이 돋보이고 부르기 쉬운 이름인 ZIBI로 확정되었다.

1-2. 브랜드 로고

1-2-1. 타이포

ZIBI-TYPO

1-2-2. 심볼

ZIBI-SYMBOL

1-3. 브랜드 컬러

#32a77b
R : 50
G : 167
B : 123

지난 프로젝트와 마찬가지로 기획 초기 네이밍, 로고, 컬러 선정을 담당했다.

시연 시 보여줄 수 있는 완성도는 한 끗 차이로 결정되고, 그 한 끗은 브랜딩 측면에서 결정된다고 생각했다. 특히 세미 프로젝트하면서 '컬러가 명확히 정해지면 CSS를 적용할 때에 수월한 부분이 많아진다는 것'을 느꼈기에 컬러 선정에 심혈을 기울였다.

선정 기준은 경쟁자가 될 수 있는 유사 사이트와의 구별이었고, 경쟁자로는 오늘의 집(파란색), 자취생으로 살아남기(노란색) 등이 있었다.

프로젝트 내내 수강생들로부터 칭찬을 많이 받아 뿌듯했던 작업물이다.

2. 기획의도

생각했던 것보다 좁고 낯설기만 한 자취방.
안식처가 되어야 할 공간은 어느새 집이 아닌 방으로 칭해지며 고향 집과 비교되곤 한다. 우리는 그렇게 자취를 시작한 집에 애착을 갖지 못하고 있는 수많은 자취인들을 위해 1인 가구에 필요한 정보를 한 데 모은 플랫폼이 필요하다고 생각했다.
세분화되어 있는 자취 기능들을 한 데 모아 아직도 낯설기만 한 ‘방’이 포근한 ‘집’이 될 수 있도록 돕기 위해 ‘ZIBI(집이 될래)’가 탄생했다.

3. 개발 환경

  • 개발 OS : Windows 10 64bit
  • DBMS : Oracle
  • 개발도구 : Eclipse
  • 서버 : Apache Tomcat v9.0
  • Tool : Egov Spring Boot Framework
  • 개발 언어 : Java, HTML5, CSS, Javascript, jQuery, SQL
  • UML : StarUML
  • View Tool : Chrome

4. 요구사항

4-1. 메인

  1. 메뉴
  • 중고거래
  • 재능기부
  • 영화 예매(ZIBI 회원 한정 할인 혜택 제공)
  • 소모임 예약
  • 커뮤니티
  • 1인 가구 정보 및 정책
  1. 회원제 메뉴
  • 닉네임 등 로그인 정보
  • 로그인/로그아웃
  • 회원가입/마이페이지/관리자 페이지
  • 이메일 문의
  1. 사이트 홍보 캐러셀
  • 사이트 설명
  • 최신 영화 정보(가입 유도용)
  1. 메뉴별 설명
  2. 가장 *를 많이 한 회원(명예의 전당)
  3. 메뉴별 최신글

4-2. 회원가입

  1. 필수 입력 사항
  • 이메일 : 메일로 인증번호가 전송된다.
  • 닉네임 : 중복 체크 필요
  • 비밀번호
  • 비밀번호 확인

4-3. 로그인/로그아웃

  1. 입력폼
  2. SNS 간편 로그인 ex. 네이버, 카카오톡, 구글 등
  3. 비밀번호 분실 버튼

4-4. 마이페이지

  1. 회원 상세 정보

  2. 프로필 사진

  3. 가입일

  4. 정보 변경 버튼

  5. 비밀번호 변경 버튼

  6. 회원 탈퇴 버튼

  7. 거래 내역

  • 카테고리 분류 필요
  • 페이징 처리
  1. 활동 내역
  • 카테고리 분류 필요
  • 검색바
  • 페이징 처리
  1. 팔로우 목록 : 팔로우한 회원의 최신글을 모아볼 수 있다.
  • 페이징 처리 필요

4-5. 공개 프로필

  1. 팔로우/언팔로우 버튼
  2. 작성글 목록
  3. 회원 정보 : 닉네임이 사용되는 서비스에 <a></a>로 링크로 걸리게 된다.

4-6. 영화 예매

  1. 영화 목록
  • 상영관 선택
  • 영화 선택
  • 날짜/시간 선택
  1. 좌석 선택 : 이미 선택한 좌석은 선택할 수 없다.
  • 인원 선택
  • 등급 구분
  • 인원수 제한 필요
  1. 결제 : 결제 후 결제 내역이 제공된다.
  • 결제 방법 선택 ex. 카카오페이/카드

4-7. 채팅

  1. 중고거래 채팅 : 1대 N 방식이며 웹소켓을 사용한다.

4-8. 중고거래

  1. 목록
  • 검색
  • 마이페이지
  • 판매하기 버튼
  1. 상품 등록(판매하기)
  • 제품 사진
  • 글 제목/내용
  • 판매가
  • 카테고리
  • 상품 상태
  • 거래 방법
  • 거래 희망 장소 선택 : API를 사용해 구현한다.
  1. 상세 페이지
  • 판매자 정보
  • 상품 정보
  • 거래 신청 및 예약 : 채팅 버튼, 바로 예약 버튼
  1. 마이페이지
  • 상품 등록
  • 나의 판매 내역
  • 나의 구매 내역
  • 찜 상품
  • 거래 후기

4-9. 소모임 예약

  1. 목록
  • 카테고리
  • 검색바
  • 나의 예약 목록 : 기존 목록과 별도로 페이징 처리한다.
  • 정렬
  • 모임 만들기 버튼
  1. 상세 페이지
  • 작성자 정보
  • 후기
  • 모임 정보
  • 썸네일 이미지
  • 수정/삭제/모임 취소하기/참여 신청하기 버튼
  • 댓글/대댓글
  • SNS 공유 ex. 카카오톡
  • 스크랩 버튼
  1. 참여 신청 페이지 : 버튼 클릭 시 모달창 형태로 노출된다.
  • 신청하는 모임 정보
  • 주의사항(동의 여부) 체크박스
  • 이메일 : 입력한 이메일로 신청 정보가 전송된다.
  1. 모임 만들기 폼 : 필수 입력 항목과 선택 입력 항목으로 구분된다.
  • 카테고리
  • 승인 여부
  • 제목/내용 : 이지웍에디터를 사용한다.
  • 장소 : API를 이용한다.
  • 준비물
  • 참여 인원
  • 참여 비용
  • 썸네일 : 미선택 시 기본 이미지가 제공된다.
  • 모임 시간 및 일정 : DateRangePicker를 사용한다.

  1. 모임 수정 폼 : 글 작성 페이지와 동일하되 썸네일 삭제 버튼과 미리보기가 제공된다.

  2. 모임 취소 폼

  • 비밀번호 인증
  • 복구 불가 안내 체크박스

4-10. 재능기부

  1. 목록
  • 헬프미/헬프유 분류
  • 카테고리
  • 검색바
  • 정렬
  1. 글 작성 폼
  • 게시판/카테고리 분류
  • 제목/내용
  • 사진(파일)
  • 주소 입력
  1. 상세 페이지
  • 해결 여부 체크 : 토글 형태로 동작한다.
  • 상세 글 내용
  • 스크랩 버튼
  • 조회수/댓글수
  • 댓글

  1. 글 수정 폼 : 글 작성 페이지와 동일한 형태

  2. 글 삭제 : confirm 창으로 의사를 확인한다.

4-11. 1인 가구 정보

  1. 1인 가구 통계 : 지도 API와 공공데이터를 활용한다.
  2. 1인 가구 정책 사이트 : 클릭 시 해당 사이트로 연결되도록 제공한다.

4-12. 커뮤니티

  1. 글 등록
  • 제목/내용/파일
  1. 댓글
  2. SNS 공유
  3. 검색바

4-13. 관리자

  1. 영화 정보 세팅
  • 상영관 정보 DB 추가 폼
  • 영화 정보 DB 추가 폼
  • 날짜 및 시간 추가 폼
  1. 1인 가구 정보 세팅
  • 공공 데이터 가져오기 버튼
  • 행정구역 정보 목록
  • 위도, 경도, URL 등 세팅
profile
febCho
Done is better than perfect.
다음 포스트

[Java 웹 개발] 파이널 프로젝트 2. DB 설계

0개의 댓글