[세미 프로젝트] Fitneeds — 🏋️ 헬스장 검색 & 리뷰 웹사이트

학원에서 진행한 세미 프로젝트의 기록. 팀원 6명이서 약 한 달간 만든 웹 애플리케이션이다.

 

📌 GitHub : GitHub LINK

🎬 시연 영상 : Video LINK

📊 발표 PPT : PPT LINK

---

1. 📅 프로젝트 개요

Fitneeds는 국내 헬스장을 검색하고 리뷰할 수 있는 웹사이트다.

요즘 건강관리에 대한 관심이 높아지면서 헬스장 정보를 찾는 사람도 많아졌는데, 기존 플랫폼들은 리뷰의 신뢰성이 부족하다는 문제가 있었다. 그래서 고객 인증 리뷰 시스템을 핵심으로 차별화하려고 했다.

벤치마킹한 사이트는 다짐(da-gym.co.kr) 과 네이버 지도였고, 위치 기반 검색, 필터링, 슬라이드형 리뷰 같은 기능을 참고했다.

개발 기간	2022.10.16 ~ 2022.11.16 (약 32일)
플랫폼	Web Application
팀 규모	6명

---

2. 🛠 개발 환경

Back-End : JDK 11, JDBC, OracleDB (ojdbc8)

Front-End : HTML5, CSS, JavaScript, jQuery, Ajax, JSP

Infra : AWS EC2 (Windows), Tomcat 8.5, Route 53, Cafe24 (DNS)

API & 라이브러리 : Kakao Map API, Chart.js, Sweetalert2, Owl Carousel, Bootstrap

협업 툴 : Notion, Git, GitHub Desktop, Sourcetree, ERD Cloud

---

3. 📋 기획 & 설계

팀원들과 함께 와이어프레임, ERD, 일정표를 미리 정리하고 개발에 들어갔다. 디자인 통일성을 위해 공통 컬러, 폰트 사이즈, 버튼 스타일을 CSS로 지정해서 공유했고, 목업 페이지도 미리 구현해서 전체적인 사이트 컨셉을 맞췄다.

① 일정표

노션을 활용하여 실시간 진행 현황에 대하여 공유했고(지훈이의 아이디어), 나는 이미 간트 차트의 중요성을 알고 있었던 터라, 전반적인 일정 수립과 조율을 위해 간트 차트 엑셀을 따로 만들어서 활용하기도 했다.

② ERD

각자 맡은 페이지에 대하여 필요한 테이블과 컬럼을 구조화했었는데 크게 복잡하지않게 설계한터라 초기 ERD와 완성 후 ERD의 변경은 없었다. 

③ 와이어프레임

디자인 통일성과 개발 편의를 위해 피그마를 처음 써봤었다. 막상 써보니 목업까지 만들 수 있는 데다가 HTML·CSS 소스도 바로 확인할 수 있어서 생각보다 훨씬 편리했다.

---

4. 👩‍💻 내가 개발한 기능들

① 운영자 페이지 — 리뷰 관리 (테이블 출력)

리뷰 목록을 출력할 때 시설명, 인증 여부 같은 정보가 시설 테이블 / 유저 테이블 / 리뷰 테이블 3개에 흩어져 있었다. SEQ 값을 조인해서 실제 이름으로 보여주는 방식으로 구현했고, 이메일 조회는 별도 JOIN 문을 사용했다. 검색할 때도 SEQ가 아닌 실제 이름으로 찾을 수 있도록 사용자 편의성을 챙겼다.

 

② 운영자 페이지 — 리뷰 관리 (날짜 필터)

JSTL의 날짜 포맷 기능으로 날짜를 출력하고 이벤트 조건에 활용했다. Animate.css를 적용해서 UI에 살짝 애니메이션 효과도 넣었다.

 

③ 운영자 페이지 — 리뷰 관리 (검색)

검색 카테고리와 세부 카테고리를 구현해서 원하는 조건으로 세밀하게 검색할 수 있도록 만들었다. 당시에는 SQL JOIN에 대한 이해도가 크지않았던터라 원하는대로 구현하기가 어려웠었다. 

 

④ 운영자 페이지 — 리뷰 관리 (리뷰 인증 시스템)

Fitneeds의 핵심 차별화 기능이었다. 사용자가 리뷰와 함께 이미지를 업로드하면, 운영자가 해당 이미지를 확인한 후 인증하는 방식으로 리뷰의 신뢰성을 높였다.

 

⑤ 회원가입 — 일반 / 사업자

정규표현식으로 입력 형식을 제한하고, DB에 맞는 입력 길이 제한, 상황별 에러 메시지 출력, 이메일 중복 확인(Ajax) 등을 구현했다.

솔직히 가장 고생한 부분은 파일 업로드 칸 디자인과 이벤트 처리였다. input[type=file]을 커스텀 디자인으로 꾸미면서 이벤트가 꼬이는 걸 잡는 게 생각보다 시간을 엄청 잡아먹었다 😅

사업자 전용으로 회원가입 시에는 카카오맵 API를 활용해서 위·경도 데이터를 입력받도록 구현했다. 이 데이터가 나중에 시설 지도 표시에 쓰였다.

 

 

⑥ 리뷰 작성 페이지

리뷰를 쓸 때 편하고 재미있게 쓸 수 있도록 신경을 썼다.

• 텍스트 입력 제한 + 실시간 글자수 안내
• 욕설 필터 기능
• 랜덤 익명 리뷰어 닉네임 생성 - 2단어를 조합해서 닉네임 생성할 수 있도록 했다.

욕설 필터나, 랜덤 닉네임 생성은 지금 구현한다면 유지보수 차원에서 테이블에 데이터 넣고 사용하는 방식으로 만들었을 것 같다. 당시에는 익숙하지도 않고, 테이블을 더 늘리지않는 방향으로 잡았기때문에 파일에 다이렉트로 작성하였었다.

⑦ 전체적인 디자인

개발을 시작하기 전에 팀원들과 회의를 거쳐 피그마로 와이어프레임과 페이지 구성을 사전에 제작해서 공유했다. 각자 어떤 페이지를 어떻게 만들지 미리 맞춰두니까 개발할 때 훨씬 수월했다.
목업 페이지도 미리 구현해뒀는데, 실제 코딩 전에 사이트 전체 컨셉을 팀원들이 공유하고 방향을 맞추는 데 큰 도움이 됐다.
또한 개발 편의를 위해 공통 요소는 include로 분리해서 재사용했고, CSS 파일도 별도로 만들어 연결하는 방식으로 구성했다. 디자인 통일성을 유지하기 위해 공통 컬러, 폰트 사이즈, 버튼 디자인 등을 미리 지정해두고 팀원 모두가 같은 스타일을 가져다 쓰도록 했다. 덕분에 각자 다른 페이지를 만들어도 전체적으로 통일감 있게 나왔다.

메인 화면이 너무 밋밋한거 같아 애니메이션 적용을 하면서 어떻게 하면 자연스럽고 눈에 띌까, 그리고 에러가 나지않을까 고민하며 마지막까지 수정했던게 가장 기억에 남는다. ㅎㅎ

번외로, 세미 프로젝트 때 이렇게 작업해둔 방식이 파이널 프로젝트 때도 그대로 이어졌다. 파이널 때는 디자인 개발에 직접 참여하지 않고 수정에만 손을 보탰는데, 그럼에도 불구하고 미감도 좋고 통일감과 완성도까지 챙겨져서 결과물을 보고 꽤 뿌듯했다. 😊

---

5. 💬 마무리 회고

한 달이라는 짧은 기간 동안 기획부터 배포까지 해내는 게 정말 쉽지 않았다.

개발에 대한 CS 지식이 하나도 없었던 데다가, 구글에 열심히 검색해서 복붙하는 식의 개발이 맞나 싶은 의문도 들었다. 그런데 그렇게라도 직접 구축해보니 개발에 대한 자신감이 조금씩 생겼고, 오류를 어떻게 해결하는지, 어떤 식으로 구조를 잡아나가야 하는지 방향이 잡히기 시작했다.

AWS EC2에 실제로 배포해보고 도메인까지 연결해본 경험은 정말 값졌다. 팀원들과 노션으로 일정을 관리하고 Git으로 협업하면서 실무와 비슷한 흐름을 경험할 수 있었던 것도 좋았다.

특히 필요한 기능들에 대하여 구글 검색을 통해 코드를 짜맞추며 직접 구현하는 과정은 정말 재미있었다. 다음 프로젝트에서는 더 발전된 걸 만들어보고 싶다는 생각도 들었다. 🤗