| 김유진 | 전지웅 | 박세연 | 주보경 |
|---|---|---|---|
| 프론트엔드 | 프론트엔드 | 백엔드 | 백엔드 |
- 대회명 : 2023 대구를 빛내는 SW 해커톤
- 서비스명 : 어데고
- 타입 : S타입 : 권리 보호를 위한 SW 개발
- 노인 사회적 고립 해결 위한 위치기반 복지기관 안내 및 취미 커뮤니티 기능.
- PWA : Progressive Web Apps (PWA)는 웹 기술을 활용한 현대적인 애플리케이션 개발 접근 방식으로,앱을 설치하지 않고도 앱을 직접 설치해야하는 네이티브 앱과 유사한 경험을 제공합니다. PWA의 주요 장점은 오프라인 지원, 푸시 알림, 빠른 성능, 반응형 디자인 등으로 사용자 경험을 향상시킵니다. PWA는 웹 앱의 설치 및 업데이트가 간편하며, 다양한 플랫폼에서 일관된 사용자 경험을 제공합니다.
PWA 기술 적용 전 → PWA 기술 적용 후
- 맵 클러스터링 기술 : 지도에서 밀집된 마커를 그룹화하여 사용자에게 더 나은 시각화와 상호작용을 제공하는 기술입니다. 사용자가 확대/축소를 조절하면 마커들이 동적으로 클러스터로 그룹화되거나 분해됩니다.
1.마커 그룹화: 지도에 여러 마커가 표시되면, 일정한 거리 내의 마커들을 그룹화하여 하나의 클러스터로 표현합니다.
2.클러스터 마커 표시: 그룹화된 클러스터는 하나의 마커로 대표되며, 해당 마커에는 그룹 내의 마커 개수가 표시됩니다.
3.확대 시 분해: 사용자가 지도를 확대하면, 클러스터 내의 마커가 보이도록 확대 수준에 맞게 클러스터가 분해되어 개별 마커가 표시됩니다.
4. 축소 시 그룹화: 사용자가 지도를 축소하면, 마커가 일정 거리 이내에 있으면 다시 클러스터로 그룹화됩니다.
 |
 |
 |
|---|---|---|
| 1. 마커 | 2. 클러스터 마커 표시 | 3. 확대시 분해 |
- CRUD 및 cors: 백엔드에서는 user, board 등의 데이터 모델의 기본적인 CRUD 기능을 적용하여 회원가입, 로그인, 게시물 작성, 댓글 작성 등의 기능을 구현하였고 프론트엔드와 원활한 통신을 위한 cors 기능을 추가하였다.
(https://youtu.be/xCd0oPRQ9Rc)
[00:00] 인사
[00:03] 서비스 주요 기능
[00:10] 서비스 시연
[00:24] 로그인
[00:30] 내 주변 복지기관 찾기 기능
[00:39] 선택한 복지기관 프로그램 목록 확인 기능
[00:44] 해당 프로그램 신청 기능
[00:58] 선택한 복지기관 식단표 확인 기능
[01:03] 선택한 복지기관 프로그램 시간표 확인 기능
[01:11] 복지기관 주변 유동인구 분포 확인 기능 (맵 클러스터링 기술을 활용)
[01:36] 취미생활 모임 커뮤니티 기능
