💡 JSP 팀 프로젝트
📅 제작 기간
2022년 10월 27일 - 2022년 11월 17일(총 22일)
🤝 함께한 팀원
🙋♀️ 내가 맡은 역할
제가 맡았던 역할은 전박적인 프론트 디자인과 마이페이지 기능 구현, 플로우 차트 제작이였습니다.
✔️ 주제, 프로젝트 설계
코로나 19와 건강 관련한 관심 증가로 한국인 45%가 영양제를 챙겨먹고 있다고 합니다. 이또한 증가하는 추세라고해요. 이로 인해 저희 팀은 나에게 필요하고 맞는 영양소가 무엇인지 맞춤으로 알려주는 사이트를 제작하고자 했습니다. 건강한 성장의 동반자 라는 키워드를 가지고 [WITH] + [PILL]을 합쳐 '위드필' 이라는 사이트 이름을 정하였습니다. 또한 건강과 균형을 전달할 수 있는 청록색을 메인으로 사이트 제작이 진행되었습니다.
저희는 필리 사이트를 참고하여 사이트를 제작하였습니다.
✔️ 대표 기능
저희 사이트 위드필에선 건강 설문 조사를 통해 나에게 맞는 영양소, 그리고 그와 관련한 영양제를 추천해줍니다. 설문 조사 후에는 결과를 이메일로 해당 내용을 발송합니다.
비회원은 건강 설문만 가능하며 회원가입, 로그인을 통해 회원이 되면 관심있는 영양제들을 찜하기를 할 수 있습니다. 또한 마이페이지에서 저희 사이트의 프로모션 수신 동의 유무를 설정할 수 있으며 동의 했을 시 동의와 관련한 이메일을 발송합니다.
또한 추후에 서비스가 될 시 모바일에서도 무리없이 보여질 수 있도록 반응형 웹페이지로 제작했습니다.
✔️ 플로우 차트
🟢 전체 사이트 흐름
🟢 설문조사 흐름
- 설문조사는 비회원, 회원 모두 진행 할 수 있습니다. 약 15개 항목의 설문조사를 진행하면 해당 결과를 설문조사 마지막에 입력한 이메일 주소로 발송합니다.
설문조사에 결과에 따른 영양소, 영양제를 추천하며 해당 영양제들의 스토어 사이트로 넘어갈 수 있습니다.
🟢 스토어 흐름
- 설문조사를 진행하지 않아도 다양한 영양제 스토어에 입장할 수 있습니다.
🟢 회원 흐름
- 위드필의 회원은 회원 로그인 플로우를 따라 로그인하게 됩니다. 회원은 마이페이지를 이용할 수 있는데, 여기서는 회원 정보 수정, 찜한 목록 조회, 위드필 프로모션 수신 동위 유무 설정, 로그아웃, 회원 탈퇴 등을 진행할 수 있습니다.
🟢 비밀번호 찾기 흐름
- 회원이지만 비밀번호를 잃어버렸을 시 회원가입 시 입력한 이메일로 임시 비밀번호를 부여받을 수 있습니다.
🟢 회원 가입 흐름
- 회원 가입 플로우에 따라 회원 가입을 할 수 있습니다.
🟢 관리자 계정 흐름
- 관리자는 사전에 INSERT 된 계정들입니다. 해당 계정으로 로그인하면 위드필 공지사항를 수정 및 삭제 등 과 관련한 업무처리를 할 수 있습니다.
✔️ 개발 환경
저희 팀의 개발 환경은 아래와 같습니다.
프론트엔드
언어 : HTML / CSS / JS
라이브러리 : BOOTSTRAP / JQuery
툴 : Visual Studio Code
백엔드
언어 : Java
라이브러리 : myBatis
서버 : Apache Tomcat
툴 : eclipse
데이터베이스
언어 : Oracle
툴 : DBeaver
✔️ DB 설계
✔️ 페이지
🟢 메인 페이지
위드필의 메인 페이지 입니다. 메인 페이지에서는 설문조사, 영양제 스토어를 갈 수 있는 버튼들이 있고, 총 방문자, 오늘 방문자, 회원수 등을 확인할 수 있습니다. 또한 위드필의 모든 페이지들은 반응형으로 제작되었습니다.
- 페이지 흐름
- 반응형
🟢 설문조사 페이지
설문조사 페이지에서는 설문조사 참여자의 인적사항과 건강 고민을 작성받습니다. bmi 지수와 건강개선 관리 필요 유무에 따라 설문조사 결과 페이지가 다르게 출력됩니다.
-
저체중
-
정상체중
-
과체중
-
비만
-
고도비만
-
이메일로 설문 조사 결과 발송
🟢 스토어 페이지
스토어 페이지는 비회원, 회원 모두 접근이 가능하지만 찜하기 버튼은 회원만 가능합니다.
🟢 로그인 페이지
가입되어 있는 아이디와 비밀번호를 입력하면 로그인이 되며, 로그인 후에는 메인 메뉴가 [로그인] 에서 [로그아웃], [마이페이지] 로 변경이 됩니다. 카카오 로그인도 가능하지만 카카오 로그인 계정으로 마이페이지등의 기능은 구현하지 못했습니다. 추후 개발 예정입니다.
- 로그인 페이지
🟢 회원가입 페이지
회원 약관이 모두 동의 되어야 회원 정보를 입력할 수 있으며 각각의 벨리데이션 체크가 다 이뤄진 후에 회원 가입이 완료됩니다. 회원 가입이 완료된 계정으로 마이페이지 등이 접근 가능합니다.
-
회원 약관 페이지
-
회원 정보 입력 페이지
🟢 비밀번호 찾기 페이지
가입하였지만 비밀번호가 기억이 안날 때 비밀번호 찾기를 실행합니다. 가입된 최소 정보를 입력하면 입력한 이메일로 임시 비밀번호가 전송됩니다. 임시 비밀번호를 입력하여 로그인 한 후 마이페이지에서 비밀번호를 수정할 수 있습니다.
- 비밀 번호 찾기 페이지
- 입력한 이메일로 임시 비밀번호 발송
🟢 마이페이지 페이지
마이페이지에서는 회원 정보 수정, 찜목록 수정, 이메일 수신 여부 설정 등이 가능합니다.
-
마이페이지
-
수신 동의 관련 이메일
🟢 고객센터 페이지
위드필과 관련한 공지사항 및 약관등을 확인할 수 있는 페이지 입니다. 해당 페이지는 관리자 계정만 공지사항 수정 및 삭제를 할 수 있습니다.
-
고객센터 공지사항
-
고객센터 약관
💡 예외 상황 발생 및 해결
일반 회원의 마이페이지에서 회원 정보 수정 기능 제작을 할 때 수정할 내용을 입력하면 db update가 무사히 되었지만 변경된 정보를 반영하지 못하는 예외를 발견했었습니다. 그때 path 설정에 문제가 있었음을 발견했습니다. 기존에는 jsp 경로를 작성하였는데, 프론트컨트롤러에 작성한 URI로 변경하니 수정된 db의 내용을 무사히 반영 할 수 있게 되었습니다.
💡 팀 프로젝트 어려웠던 점
프론트와 백 작업을 하는 프로젝트가 처음이다보니 기획이나 프로젝트 진행 순서에 대해서 어려움을 많이 겪었습니다. 제가 프론트엔드 작업을 전적으로 맡게 되었는데 팀원들이 작업을 시작할 수 있게 대략적인 디자인 작업을 한 후 보내줬지만 기능 추가나 수정, 삭제 등의 일이 프로젝트 내내 생기면서 디자인도 여러번 바뀌게 되었고 그 디자인에 다시 기능을 추가하는 일이 빈번해졌습니다. 처음부터 페이지에 대한 기획을 확실히 하고 진행했었으면 하는 아쉬움이 남는 부분이었습니다.
또한, 각자 맡은 기능을 구현하고 마지막 쯤에 Github로 취합을 하였는데, 협업 툴인 Github의 장점을 잘 사용하지 못했던 것 같습니다. 본인들의 스타일대로 굳을 대로 굳어진 각자의 기능들은 합치는 부분에서 많이 헷갈리고 헤매게되었습니다. 처음부터 협업에 대해서 많이 공부하고 Github를 더 활발하게 사용하지 못한 부분이 프로젝트 후반에 많은 어려움을 줬습니다.
💡 소감
처음으로 프론트부터 백까지 작업하는 프로젝트를 하게 되어 막막했지만 든든한 팀원들과 함께 머리 맞대고 고민하다 보니 만족스러운 결과를 보게 된 거 같습니다. 한 가지 기능에도 발생하는 여러 변수들을 마주하고 고쳐나가는 과정을 통해 실력이 많이 향상된 거 같습니다. 팀으로 하나의 목표를 가지고 작업하고 결과물을 볼 수 있게 된 것은 큰 보람이 되었습니다.
