051 프로젝트
HOMEZ
서울시 주택 거래 정보와 관리자 통계를 다룬 웹 프로젝트
OPEN API와 Kakao Map API를 활용해 서울시 주택 거래 정보를 조회하고, 관리자 통계까지 구현한 2인 웹 프로젝트입니다.
- SSAFY 5기 10일 웹 프로젝트
- Vue와 Spring Boot 기반 주택 거래 정보 서비스
- 회원·관리자 기능과 Chart.js 통계 구현
프로젝트 개요
HOMEZ는 서울시 주택 거래 정보를 기반으로 사용자가 집을 찾을 때 필요한 정보를 선택해 볼 수 있도록 만든 웹 프로젝트입니다. 사용자 기능뿐 아니라 관리자가 통계를 확인해 추후 광고나 운영 방향을 고민할 수 있는 기능도 함께 다뤘습니다.
기술 스택
프론트엔드
Vue CLI
4.5.13
Vue 2.6.11, Vue Router, Vuex 기반 화면 구성
Bootstrap
5.0.1
기본 UI 구성
Chart.js
2.9.3
관리자 통계 시각화
백엔드/API
Spring Boot
2.4.5
Java 8 기반 백엔드 API
MyBatis
2.1.4
DB 매핑
데이터베이스
MySQL
주택 거래, 회원, 공지 데이터 관리
플랫폼
Kakao Map API
주택 위치 정보 표시
팀 구성
- 개발 2명 - Vue와 Spring Boot 기반으로 프론트엔드와 백엔드를 함께 구현
기획 배경
SSAFY 5기 1학기 최종 프로젝트로 진행했습니다. 주택 거래 정보라는 주제는 과제에서 제시된 주제였고, 제한된 기간 안에서 프론트엔드와 백엔드, DB, 외부 API를 모두 연결해 보는 프로젝트였습니다.
목표와 구현 범위
주택 거래 정보 검색, Kakao Map 기반 위치 정보, 공지사항, 회원 기능, 관리자 기능, 통계 시각화를 구현했습니다.
내 역할과 기여
팀장으로 참여해 프로젝트 진행을 조율하고 최종 발표를 맡았습니다. 저장소 커밋 히스토리 기준으로 회원 관련 백엔드 API와 Vue 화면, 공통 코드, 라우터와 스토어 연결, 일부 UI 수정에 주로 기여했습니다. 회원 기능과 관리자 기능을 맡았고, 관리자 화면에서는 회원 목록과 신규 가입 추이, 연령대 분포, 성별 비율 통계를 확인할 수 있도록 구현했습니다. Spring Boot와 Vue 프로젝트 구조 설정, Database 설계와 구현은 팀원이 함께 진행했습니다.
실제 구현/기여 상세
- 팀장 역할
- 프로젝트 진행 조율
- 회원 기능 구현
- 회원 관련 REST API와 컨트롤러 구현
- 회원가입, 마이페이지, 회원정보 수정 화면 구현
- 관리자 기능 구현
- 회원 목록 관리자 화면 구현
- Chart.js 기반 신규 가입 추이, 연령대 분포, 성별 비율 통계 화면 구현
- 라우터와 Vuex 스토어 연결
- 일부 지도 UI와 이미지 마커 수정
- Spring Boot·Vue 프로젝트 구조 설정 공동 참여
- Database 설계와 구현 공동 참여
- 최종 발표 담당
설계와 구현
프론트엔드는 Vue 2 기반으로 구성하고, 백엔드는 Spring Boot와 MyBatis로 API와 DB 접근 흐름을 구성했습니다. 주택 위치 정보는 Kakao Map API를 활용했고, 관리자 통계는 회원 데이터와 공통 코드를 조합해 Chart.js로 시각화했습니다.
어려웠던 점과 해결
가장 어려웠던 부분은 원하는 디자인을 화면에 그대로 구현하는 일이었습니다. 기능 구현뿐 아니라 사용자가 보는 화면의 배치와 완성도를 맞추는 데 시간이 많이 들었습니다. 특히 관리자 기능을 더 강화하고 싶었지만, 짧은 기간 안에 원하는 기능을 모두 구현하지 못한 점이 아쉬움으로 남았습니다.
결과와 배운 점
SSAFY 5기 과정에서 2명이 10일 동안 진행한 웹 프로젝트이며, 팀장으로서 최종 발표를 맡았습니다. 평가에서는 중상위권 점수를 받았습니다.