MBTing
프로젝트 발표날짜 : 2023. 12. 20
(스마트웹&콘텐츠개발)자바기반 반응형 UI/UX 웹 콘텐츠 개발자 양성과정1 1회차
팀장/팀원 | 정**(팀장) : 마이페이지(프로필, 회원정보 관리, 상품 결제 및 조회, 매칭 신청자 관리), 회원가입, 로그인(카카오), 인증메일 발송 |
---|---|
기** : 홈페이지소개 페이지( 홈페이지 기능 안내, 팀원 소개) | |
김** : 1:1 채팅 페이지(대화 신청, 취소, 거절, 대화 가이드, 읽음 표시), 매칭 리스트 조회·검색, 로그인(일반, 카카오), 메인페이지(메뉴바, Best 매칭 대상 표시) | |
김** : 만남 후기게시판(게시글 전체조회 / 상세조회 / 등록 / 삭제, 검색 기능, 좋아요 기능, 인기 게시글 목록 기능) | |
김** : MBTI 성향 조사 기능, 매칭 대상자 추천·검색 , 공지사항 게시판(조회, 검색), 메인페이지(메뉴바, 푸터) | |
정** : 관리자페이지(회원, 공지게시판, 매출 , 결제상품 환불, 고객센터 관리), 홈페이지 현황 통계화 | |
개요 | * Q. MBTING.의 의미? A. MBTI + 소개팅의 합성어 => MBTI를 기반으로 성격이 맞는 사람들을 매칭 시켜주는 소개팅 사이트입니다. * Q. MBTING.만의 장점? A_1. 사회적 분위기 반영 a. 요즘 트렌드에 맞게 MBTI라는 소재를 통해 소개팅이 이루어짐 b. 안전을 위해 상호 동의가 이루어져야만 소개팅 관련 기능을 이용 가능 |
구현기능 | - 일반 회원 기능 1. 회사 소개 페이지 ●발표할 PPT 내용을 작성(임원진 소개 - 조원 소개, 회사소개 - 프로젝트 소개, 회사 위치- 학원 위치(카카오지도api 이용) 2. 1:1 채팅기능 ● 상호 동의후에 사용 가능, 대화창 내 프로필 이미지 표기, 만남단계(매칭 상호동의 ~ 연락처 교환)에서는 대화 기록, 만남 이벤트 종료시는 대화방 소멸 ● 상황별 대화 가이드 기능(챗지피티api 이용 고려) 3. 로그인 / 회원가입 ●모달창 구현, 로그인이 필요한 서비스시 자동연결, 카카오 로그인api 사용, 아이디 찾기, 비밀번호 재설정 기능 ●회원가입시프로필 이미지 등록 필수, 실시간 유효성 검사 3. 만남후기게시판 ●1:1 매칭을 완료 후 등록 가능, 섬네일 및 게시글 내 이미지 첨부 가능, 등록 비밀번호로 수정 및 삭제 가능 ●날짜순 / 좋아요순 / 조회수순 조회 기능 4. 1:1 매칭기능 ●기본 1:1 매칭은 설문조사 MBTI성향 값이 존재할 때만 진행 가능, MBTI 성향에 따른 궁합 대상 표기 ●M연시 게임 매칭은 성향조사 게임 진행 후 결과에 맞는 성향과 매칭 ●인적사항을 통한 매칭은 사용자가 희망하는 인적사항을 입력 후 조회된 리스트 중 선택하여 매칭 → 매칭 신청의 경우 상호 수락이 완료되어야만 매칭이 이루어짐, 회원 신고 기능 5. 연애테스트(MBTI 성향조사 기능) ●설문조사 형식으로 MBTI 성향조사, 결과로 MBTI 값 받기 ●M연시(대화형 시뮬레이션 게임) 형식 조사, 결과는 별칭형식으로 저장(MBTI값이랑 별개) 6. 고객센터 페이지 ●FAQ페이지(하위메뉴는 아이콘형식으로 표기, 각 항목의 질문 클릭시 답변 열람가능) ●네이버톡톡, 1:1 채팅api로 상담 구현 고려 7. 결제페이지 ●결제시스템(1:1 매칭횟수 지급, 회원가입시 1회 무료), 결제 금액 표기(매칭 횟수별 금액 표기), 카카오api를 이용한 결제 기능 구현 8. 마이페이지 ●기본정보표기(인적사항, 매칭기록), 프로필 이미지는 슬라이드 형식으로 시각화 ●MBTI 성향이 Null이라면 성향테스트 페이지로 이동 ●프리미엄 계정 시각화, 프리미엄 계정 활성화 기능은 결제 페이지로 이동 - 관리자 기능 ●회원 관리페이지 구현(정지상태를 토글식으로 관리, 프리미엄 계정 목록 표기, 아이디 / 이름 / 매칭상태 / 프리미엄상태 표기) →신고는 1:1 채팅으로 구현, 신고내역조회, 삭제 기능, 신고에 답장, 신고 승인/반려 가능 ●공지사항 관리페이지 구현(공지 작성 / 수정 / 삭제) ●후기 관리페이지 구현(리스트조회, 정지) ●메인페이지 슬라이드 광고 편집(이미지 등록, 문구 수정) ●통계시각화(회원수 / 성별비율 / MBTI성향분포 / 매칭성공률 / 프리미엄 계정 비율 / 매출(년별,월별)) ●고객센터 문의 관리 페이지(네이버톡톡 api, 1:1채팅 api 관리페이지 연결) |
설계의 주안점 | 사람은 각각 다른 성향과 가치관을 가지고 있어 마음이 맞는 이성을 찾기 어렵습니다. 그래서 저희는 첫 만남에도 오래된 친구를 만난 것처럼 편안하고 즐거운 시간을 보낼 수 있는 매칭 사이트를 목표했습니다. 그 결과 사용자는 간단한 설문조사와 대화형 시뮬레이션 게임을 통해 자신의 MBTI 성향에 맞는 최적의 상대를 추천받고, 간편하게 원하는 상대와 매칭하고 대화할 수 있는 UI/UX 디자인을 설계했습니다. - 사용자가 간편하게 MBTI 궁합에 맞는 대상과 매칭/대화 할 수 있는 UI/UX 디자인 구현 - 매칭 횟수를 추가할 수 있는 결제 시스템 - 매칭이 성사되었을 때 작성 가능한 포토 후기 게시판 - 사이트 기능을 관리할 수 있는 관리자 기능 구현 |
사용기술 및 개발환경 |
- Language : Java 11, JSP&Servlet, CSS3, HTML5 - FrameWork / Library : Spring Framework, JQuery, JSTL, Ajax, Mybatis, Web Socket - DB: Oracle 11g EE - Tool : Kakao Oven, StarUML(5.0), ERDCloud, Oracle SQL Developer(23.1.0), Visual Studio Code, Eclipse, STS, Bootstrap - WAS: Apache Tomcat (9.0.80) - 협업프로그램: Slack, Github |