LG U+ 유레카 1기 최종 융합 프로젝트 우수상 수상

멍티비티(반려경 동반 가능 시설 플랫폼)

현대 사회에서 반려동물은 가족의 일원으로 자리 잡고 있습니다. 이에 따라 반려견과 함께할 수 있는 공간에 대한 수요가 증가하고 있으며, 반려견과 함께 이동할 수 있는 시설에 대한 정보 또한 중요해졌습니다. 본 프로젝트는 반려견 동반 가능 시설을 찾고자 하는 반려인과 이러한 시설을 제공하는 사업자를 연결하는 플랫폼을 개발하는 것을 목표로 합니다.

배포 주소 : https://mungtivity.vercel.app/
프로젝트 기간 : 2024.11.12 ~ 2024.12.19

고창준	금세현	김병옥	김영동	이신지	이은석	장현희	채희원
FE	BE	BE	FE	BE	FE	BE	FE

반려동물을 양육하고 있는 가구는 23년 기준 28.2%로 점점 증가하는 추세이고, 그 중에서도 강아지를 키우는 비율이 높은 것을 확인할 수 있었습니다 하지만 반려동물 출입 가능 장소는 제한되어 있고, 이에 대한 정보를 기존 지도에서 쉽게 찾기가 어려웠습니다. 따라서 저희 서비스는 사용자가 '반려동물 동반 가능 시설을 손쉽게 조회하는 것'과 '반려동물과의 추억 기록'을 목표로 서비스를 개발하였습니다.

1. 정보 부족

• 반려동물과 함께할 수 있는 시설 정보가 제한적이며, 여러 플랫폼에 흩어져 있어 원하는 정보를 쉽게 찾기 어렵습니다.

2. 검색의 불편함

• 반려동물 동반 가능 시설이라도 강아지의 종이나 체중에 따라 입장 가능 여부가 달라지지만, 기존 플랫폼에서는 이를 세부적으로 검색하기 어렵습니다.

1. 사용자 편의성 개선

• 반려동물 동반 가능 시설 공유 플랫폼을 통해 동반 가능한 장소를 한눈에 확인할 수 있으며, 사용자의 반려동물 특성에 맞는 맞춤형 시설을 추천받을 수 있습니다.

2. 구체적인 검색 필터 제공

• 지역과 장소명 검색은 물론, 반려동물의 종이나 체중에 따른 입장 가능 여부까지 세부적으로 검색할 수 있습니다.
• 검색 시 지역별 날씨 정보도 함께 제공하여 사용자가 더욱 편리하게 검색할 수 있도록 지원합니다.

1. 소셜 로그인

• 카카오 소셜 로그인
  

2. 마이페이지

• 회원 정보 CRUD, 내 반려견 목록 조회 및 등록 가능

• 선호 시설과 선호 지역 정보 수정 가능
  

3. 반려동물 정보 관리

• 반려동물 프로필 관리 (CRUD)
  

4. 검색

• 검색어로 검색

• 지역, 날짜, 같이 갈 반려동물 선택 후 해당 정보를 반영하여 장소 검색

• JooQ를 도입하여 로그인 여부에 따른 좋아요 검색, 페이징 여부에 따른 검색 등 동적으로 검색 가능

• 기상청 단기 예보 조회 API와 중기 예보 조회 API를 사용하여 지역 선택 시 당일부터 10일 후까지의 날씨 정보 제공
  

5. 즐겨찾기

• 장소에 즐겨찾기를 할 수 있고, 즐겨찾기 한 장소를 모아 볼 수 있다.
  

  

6. 후기

• 장소에 사진, 영상을 포함한 후기를 남길 수 있고, 내가 쓴 후기를 모아 볼 수 있다.
  

  

7. 지도

• 즐겨찾기 한 장소의 정보를 알 수 있다.

• 즐겨찾기 한 장소의 위치를 핀을 통해 알 수 있다.

• 지도에서 장소를 검색할 수 있다.
  

8. 길찾기

• 현재 위치에서 특정 장소까지 가는 길을 조회할 수 있다.
  

9. 추천

• 개인 별 펜션 추천과 펜션 연관 시설 추천

• 콘텐츠 기반 필터링과 협업 필터링을 사용하여 보다 정확한 추천

• 협업 필터링에서 대규모 데이터 처리와 기계 학습 기반 추천 라이브러리 Mahout을 사용

• 사용자의 리뷰 데이터와 선호 지역을 기반으로 개인 별 맞춤 펜션 추천 제공

• 사용자의 리뷰 데이터와 거리를 기반으로 펜션 연관 시설 추천 제공
  

  

10. 조회 수 기반 핫한 장소

• 조회 수를 기반으로 핫한 장소를 카테고리 별로 조회 가능
• Redis의 Sorted Set 자료구조 사용 (Score 기준으로 조회수 자동 정렬에 용이할 것이라 판단)
• 로그성 테이블과 비즈니스 테이블 분리
  

11. 최근 본 장소

• Local Storage를 활용하여 최근 본 장소 목록 조회 가능
  

12. 멍생네컷

• 프레임과 이미지 4장을 골라 멍생네컷 생성
• 이미지는 다운로드 및 공유 가능
• 나의 멍생네컷 목록과 전체 멍생네컷 목록 조회

1. 이미지가 많아서 화면 로딩이 느려지는 현상

   • Intersection Observer를 활용한 무한 스크롤을 구현하여 필요한 만큼 데이터를 불러와 이미지 로딩 속도 최적화
     

2. 고화질 이미지를 업로드 하는데 5초 넘게 걸리는 현상

   • Canvas API 및 OffscreenCanvas를 활용하여 이미지를 JPEG 또는 WebP 형식으로 압축 후 백엔드로 전송
   • 이를 통해 업로드 시간 5초에서 123ms로 대폭 개선
     

3. 멍생네컷 생성 시 이미지가 줄어드는 현상

   • hmtl2canvas 라이브러리가 HTML 태그를 캡쳐할 때 대부분의 CSS 스타일을 지원하지만 object-fit: cover 속성을 제대로 처리하지 못하는 문제가 발생함.
   • 기존에는 이미지 업로드 후 css로 이미지가 꽉 차도록 하여 프레임에 맞게 비율을 조절하였으나, html2canvas를 호출하기 전 JavaScript로 이미지의 크기나 비율을 조정한 후 캡처하여 해결
     

1. 이미지를 넣으려 하는데 S3가 응답을 안한다면?

   • temp_file 테이블에 url, 멤버 정보와 함께 Blob 형식으로 이미지 임시 저장 후 서비스가 정상적으로 된다면 temp_file을 S3에 업로드 한 뒤 임시 이미지 삭제
     

2. S3 업로드가 성공했는데 데이터베이스 작업 중 예외가 발생했다면?

   • S3에 업로드 된 파일이 남아있는 상황을 고려하여 데이터베이스 작업 중 예외가 발생하면 업로드 된 파일을 삭제하는 로직 추가
     

React

• 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반 아키텍처를 통해 재사용성과 유지보수성을 높입니다.

Tailwind CSS

• 유틸리티 퍼스트 CSS 프레임워크로, 미리 정의된 클래스명을 사용하여 빠르고 효율적으로 스타일링할 수 있습니다. 커스터마이징이 용이하여 반응형 디자인에 적합합니다.

Zustand

• 경량 상태 관리 라이브러리로, React 애플리케이션의 상태를 간편하게 관리할 수 있도록 돕습니다. 간단한 API와 훅을 제공하여 개발자 경험을 개선합니다.

Yarn

• JavaScript 패키지 매니저로, 패키지 의존성을 관리하고 설치 속도를 개선합니다. npm보다 빠르고, 안정적인 설치를 지원하여 팀원 간의 일관성을 유지합니다.

MSW (Mock Service Worker)

• API 요청을 가로채고 모의 응답을 제공하여, 프론트엔드 개발 및 테스트를 용이하게 하는 라이브러리입니다. 실시간으로 API를 모킹할 수 있어 개발 과정에서 유용합니다.

Axios

• Promise 기반의 HTTP 클라이언트로, API와의 통신을 간편하게 처리할 수 있게 도와줍니다. 요청 및 응답을 쉽게 변환하고, 다양한 설정이 가능합니다.

Vite

• 빠른 빌드 및 개발 서버를 제공하는 차세대 프론트엔드 빌드 도구로, 핫 모듈 교체(HMR)가 지원되어 개발 속도를 크게 향상시킵니다. ES 모듈을 기반으로 하여 최적화된 번들링을 제공합니다.

Storybook

• UI 컴포넌트를 독립적으로 개발하고 문서화할 수 있는 도구로, 다양한 상태를 시각적으로 확인할 수 있게 해줍니다. UI 개발을 보다 효율적으로 진행할 수 있도록 지원합니다.

Chromatic

• Storybook과 통합되어 UI 컴포넌트의 시각적 변화를 관리하는 서비스로, 자동화된 시각적 테스트와 리뷰 기능을 제공합니다. 팀원 간의 협업을 개선하는 데 도움을 줍니다.

JavaScript

• 웹 개발의 핵심 프로그래밍 언어로, 클라이언트 측 및 서버 측에서 동작하며, 비동기 프로그래밍, DOM 조작, 이벤트 처리 등을 통해 인터랙티브한 웹 애플리케이션을 구축할 수 있습니다.

Spring Security

• 애플리케이션의 인증과 권한 관리를 구현하기 위한 보안 프레임워크입니다.

JWT (JSON Web Token)

• 사용자 인증 정보를 안전하게 주고받을 수 있는 토큰 기반 인증 방식입니다.

Spring Data JPA

• 테이블을 객체로 매핑해 쿼리를 자동으로 생성하며, 복잡한 관계를 효율적으로 처리합니다.

Spring Data JDBC

• Batch 처리 등 대량 데이터 삽입 작업을 빠르고 간단하게 수행할 수 있습니다.

Spring Batch

• 대용량 데이터를 효율적으로 처리하기 위한 배치 프로세싱 프레임워크입니다.

JOOQ

• 동적 쿼리를 작성하고 데이터베이스 작업을 유연하게 처리하기 위해 사용됩니다.

Mahout

• 기계 학습 기반의 라이브러리로, 추천 시스템에서 협업 필터링을 구현할 때 활용됩니다.

AWS EC2

• 스프링 애플리케이션을 배포하기 위한 서버입니다.

RDS (MySQL)

• 안정적인 데이터 관리를 위한 데이터베이스 서버입니다.

Redis

• 캐싱을 통해 빠른 데이터 조회와 고성능 처리를 지원합니다.

S3

• 파일 저장 및 관리를 위한 객체 스토리지 서비스입니다.

ELB (Elastic Load Balancer)

• 애플리케이션 서버의 트래픽을 분산 처리하여 가용성과 안정성을 높입니다.

master: 배포가 되는 브랜치
develop: 배포전 임시
KAN-[number]: Jira 스토리 번호

Commit Format Type: content

feat: Seo 기능 추가

feat: Header 스타일 추가

git commit -m "feat: "

Commit Type

Description

## 작업 내용

- 작업 내용 1
- 작업 내용 2

## 이슈
- 어떤 이슈가 있는지 작성

## 참고

- 구현한 화면이나 영상
- bug fix면 어떻게 해결했는지