- 쉽고 빠르게 운동 메이트를 찾는 운동 번개 서비스
- 프로젝트 명 : FiThunder
- 프로젝트 일시 : 2024.05.10 ~ 2024.05.23 (14일)
| 이지혜 | 김선하 |
|---|---|
 |
 |
| @c0zl | @kimzonah |
- Front-end : HTML, Vue
- Back-end : Java, Spring Boot
- 버전 및 이슈관리 : Github
- 협업 툴 : Discord, Notion
- 테스트 : Swagger
- 목업 디자인 : Figma
Front
- 내 번개 페이지, 번개 게시판 페이지, 번개 일정 관리 페이지, 번개 생성 페이지, 사진첩 페이지, 로그인/회원가입
Back
- 지난 번개 / 예정된 번개 조회(내 번개 조회), 번개 일정 수정, 번개 게시글 CRUD, 번개 댓글 등록 및 삭제, 사진 등록 및 조회
Front
- 메인 페이지(번개 지도 및 목록), 친구 목록 페이지, 친구 관리 페이지, 번개 상세 페이지
Back
- 번개 전체 조회, 번개 검색 조회, 번개 참여 상태, 친구 검색 조회, 친구 신청/수락/거절, 친구 상태, 번개 상세 정보 조회, 로그인/로그아웃/회원가입
정기 모임이 부담스러운 헬스인들을 위한 운동 번개 모임 서비스
🗺️ 주변에 어떤 번개 모임이 있는지 찾아볼까요 ?
- 사이트에 들어가거나 새로고침을 누르면, 현재 내 위치를 중심으로 지도를 볼 수 있어요
- 접속하는 것만으로 주변의 번개 모임들을 한 눈에 찾아볼 수 있어요 ~
- 원하는 장소의 모임을 선택해 번개에 참여해보세요 !
🔍 원하는 날짜, 카테고리, 장소 별로 번개 모임을 검색해보세요 !
- 운동하고자 하는 날짜는 선택해 해당 날짜의 번개 모임을 찾아볼 수 있어요 ~
- 배드민턴, 풋살, 사이클, 테니스 등 내가 원하는 운동만 모아서 검색할 수도 있어요
👁️ 나의 번개들을 한 눈에 살펴볼 수 있어요
- 지난 번개와 예정된 번개를 따로 두어 남아 있는 번개들을 쉽게 확인 가능 !!
- 내가 번개장이라면 ? 번개 장소와 일시도 수정하고 번개 신청도 관리해보세요 ~
- 번개마다 있는 게시판 기능을 적극 활용해 번개원들과 소통해보세요
👤 마음에 드는 유저는 친구 추가해 번개 메이트로 !
- 친구 검색을 통해 유저들을 찾아보세요
- 마음에 드는 유저가 있다면 친구 추가도 할 수 있어요
- 친구가 번개를 만들면 [번개 모집 중] 표시가 활성화 되니 원하는 번개에 참여해 보는 건 어떨까요 ?
📷 마음에 들었던 번개는 사진첩에 기록할 수 있어요 ~
- 지난 번개 들 중 재밌었던 번개가 있다면 사진을 등록해 추억을 남겨보세요 :)
| 기능 | 디자인 | 상세 설명 |
|---|---|---|
| 번개 조회하기 |  |
원하는 조건에 따라 번개를 검색하고 찾을 수 있습니다. |
| 번개 만들기 |  |
희망하는 번개를 직접 만들어 볼 수 있습니다. |
| 내 번개 |  |
나의 번개들을 한눈에 확인할 수 있습니다. |
| 친구 |  |
검색을 통해 친구를 맺을 수 있습니다. |
| 사진첩 |  |
즐거웠던 번개 모임의 추억은 사진으로 남겨 둡니다. |
인증되지 않은 유저 접근 관리
- 회원이 아닌 유저가 사이트에 접속했을 때 바로 번개 페이지로 이동할 수 있도록 설계하고자 하였습니다. 때문에 로그인 하지 않은 유저가 내 번개나 사진첩과 같은 페이지로 이동할 때의 처리가 필요했습니다.
- back-end 설계 시에 요청을 보낸 유저에 대한 이해가 필요하다고 판단하였고, 최초 API 설계를 할 떄부터 해당 요청을 보낼 수 있는 유저를 따로 적어두어 그 외의 경우에는 접근을 막을 수 있도록 처리하였습니다.
- front-end에서 역시 session 처리를 통해 로그인이 필요한 페이지의 경우 로그인 되지 않은 유저의 접근을 사전에 차단하고 로그인 페이지로 전환되도록 구현하였습니다.
여러 진행 상태에 따른 버튼 표현
- 친구 요청이나 번개 가입 신청은 여러가지 상황이 생길 수 있는 요소이기 때문에 해당 부분에 대해서 여러가지 고민이 있었습니다.
- 저희는 상태 반환을 위한 요청을 새로 만들기로 하고, Back-end에서 '친구 아니고 요청없음:0 / 친구:1 / 로그인유저가 요청 보내고 승인대기중:2 / 로그인유저가 요청 받음:3'과 같이 응답을 반환하였습니다.
- Front-end에서는 이러한 요청에 대한 응답을 기준으로 친구 관계나 번개 가입 유무를 판단하여 적절한 버튼이 보이도록 구현하였습니다.
- 짧은 시간 내에 프로젝트를 진행하게 되면서 최대한 기능 구현의 완성도를 높이자는 목표를 가지고 진행하게 되었는데 기존에 설계했던 대부분의 기능을 구현하였고, 수상이라는 결과까지 따라오게 되어 만족하였습니다. 다만 빠른 시일 내 완성해야 하다보니 코드의 리팩토링이나 통일성에 신경을 쓰지 못한 부분이 조금 아쉬웠습니다.
- 개발 초기 단계에서 생각보다 시간을 많이 투자하게 되었는데 이 부분이 추후 개발에 있어서 큰 도움이 되었다고 느꼈습니다. 오히려 '개발 초기 설계에 시간이 더 필요하구나'라고 생각할 정도로 개발만 한다고 프로젝트를 완성할 수 있는 것이 아니라는 것을 배울 수 있는 시간이었습니다.
- 번개 생성 시에 모임 장소를 설정하기 위해 카카오 로컬 API를 사용하였습니다. 그 중에서도 사용자가 '삼성캠퍼스', '유성구 편의점' 등 키워드만으로 쉽게 검색할 수 있도록 키워드로 장소 검색하기 API를 활용하여 UX를 고려하여 개발하였습니다.
- 프로젝트 기획, 개발 전반에 대한 프로세스와 구현, 자신 없었던 front-end에 대해서도 프로젝트를 통해 많이 배우고 성장할 수 있었습니다.
- 아이디어 도출부터 설계에 오랜 시간을 쏟았다고 생각했지만 막상 개발에 돌입해보니 기능들의 유기적인 흐름을 위해 더 고려해야할 부분들이 많았습니다. 개발 자체보다도 구체적인 설계와 적극적인 의사소통의 중요성을 느꼈습니다. 여러 시행착오를 겪고 페어와 함께 문제를 해결해가면서 많이 성장할 수 있었습니다.
- 위치 기반의 정보를 지도로 보여주기 위해 카카오 맵 API를 사용했습니다. API 공식 문서를 통해 마커와 오버레이 커스텀까지 할 수 있었습니다. 이에 API를 활용하는 법을 배울 수 있었고 공식 문서를 읽는 연습을 할 수 있었습니다.
- 단순한 CRUD 기능뿐만 아니라 친구 신청, 번개 신청 등의 다대다 관계 맵핑을 구현하면서 문제 해결 능력과 복잡한 DB와 백엔드 설계 역량을 기를 수 있었습니다.