README.md

UNIRO, 함께 만들어가는 휠체어 배리어프리 길찾기

📌 목차

1. 서비스 소개
2. 팀원 소개
3. 협업 방식
4. 프론트엔드
5. 백엔드

아티클 미리보기

파트	제목	기여자
공통	완벽한 길을 그리기 위한 노력	모두
FE	완벽한(?) 페이지를 위한 LightHouse 점수 개선기	박준혁
FE	오브젝트 (Polyline, Marker) 캐싱	윤동현
BE	대량의 데이터로 인한 OOM 해결과정	송현성
BE	1,500ms -> 160ms로 4단계 개선된 핵심로직	송민규

더 자세한 기술 아티클은 📝 UNIRO-Wiki 페이지에서 보실 수 있어요.

---

🚀 서비스 소개

🔗 UNIRO

• 캠퍼스 내 이동이 더 이상 불편하지 않도록!
• 휠체어를 사용하는 대학생이 보다 안전하고 편리하게 캠퍼스를 이동할 수 있도록 돕는 길찾기 서비스입니다.
• 정보 기술을 활용하여 이동 과정에서의 물리적·정보적 장벽을 해소하고, 모두가 함께하는 포용적인 캠퍼스 환경을 만들어갑니다.

시연 영상

랜딩 페이지	메인 페이지

학교 선택 페이지	길 찾기 페이지

새로운 길 제보하기	불편한 길 제보하기

👥 팀원 소개

FE 팀

박준혁	윤동현
FE	FE
- 길찾기 결과 페이지 구현 및 최적화 진행 - Suspense로 로딩 자동화 - Post 요청 안정화를 위한 debounce 구현 - FCP 감소 및 정적 리소스 축소를 위한 클라이언트/인프라 대책 마련	- 메인 / 불편한 길 / 새로운 길 지도 페이지 제작 - API 에러 핸들 로직 구현 - 길 선택 알고리즘 + 새로운 길 생성 알고리즘 구현 - 캐싱과 알고리즘을 통한 지도 페이지 최적화 진행

BE 팀

👑 송현성	송민규
BE, 팀장	BE
- OOM 문제를 Jpa Stream API + SSE로 데이터를 분할 처리하여 해결 - 길찾기 알고리즘(A* 알고리즘) 개발 및 개선 - Hibernate envers를 활용한 DB버전화 & 특정 버전 조회 로직 구현 - Google Map Elevation API 연동 및 이벤트 기반 비동기 배치 처리 구현	- Redis 및 FastJson을 활용한 조회속도 1,500 ms -> 160ms 개선 - Dockerizing 및 blue-green 무중단 배포 자동화 인프라 구축 - R-tree를 활용한 길 추가 로직 개발, 10,000 ms -> 200ms 개선 - 테스트 컨테이너 구축 - 어드민 로그인 구현

우리팀의 기술 스택

구분	기술 스택
FE
BE
인프라
소통

🤝 협업 방식

빠른 개발과 QA로 완성도 높은 서비스 제작

• 저희 팀은 완성도 높고 버그 없는 서비스 제작을 최종 목표로 삼았습니다.

• 4주라는 길지 않은 개발 기간동안, 이를 위해 핵심 기능을 빠르게 개발·배포하고, 반복적인 QA와 고도화를 통해 완성도를 높이고자 했습니다.

• 그 결과, 2주 차에 핵심 기능을 성공적으로 배포했으며, 세 차례의 내부 QA와 두 차례의 외부 QA를 진행했습니다.

날짜	QA
2/5	1차 자체QA
2/8	2차 자체QA
2/11	3차 자체QA
2/14	소프티어 버그데이QA
2/21	소프티어 데모데이QA

스프린트 단위 개발

• 저희 팀에서는 일주일 단위의 스프린트를 가지고 개발하고 있습니다. 해당 방식을 통해 아래와 같은 장점을 갖게 되었습니다.

1. 빠른 피드백과 개선
2. 유연성 있는 요구사항 변경
3. 개발 리스크 감소

릴리즈 노트

• 각 스프린트의 개발 내용을 아카이빙 하기 위해 릴리즈 노트를 만들어 관리했습니다.

릴리즈 버전	진행기간	릴리즈 노트	릴리즈 PR
v1.0.0	1주차 스프린트	1주차 릴리즈 노트	v1.0.0
v1.1.0	2주차 스프린트	2주차 릴리즈 노트	v1.1.0
v1.2.0	3주차 스프린트	3주차 릴리즈 노트	v1.2.0
v1.3.0	4주차 스프린트	4주차 릴리즈 노트	v1.3.0

🐳 협업을 위한 무중단 배포 구축

• 소프티어 활동에서는 함께 개발하는 시간이 많습니다.
• 하지만 서버를 배포할 때마다 프론트엔드가 이를 인지하고 대응해야 하는 과정이 불필요한 비용처럼 느껴졌습니다.
• 배포로 인한 소통 비용은 약 5분 정도이지만, 저희는 빠른 배포를 목표로 개발했기에 이러한 시간이 쌓이면 협업에 큰 불편이 될 것이라 생각했습니다.
• 이를 개선하기 위해 서버에서 무중단 배포를 구축하여, 프론트엔드가 서버의 배포 시점을 신경 쓰지 않아도 개발에 불편함이 없도록 만들었습니다.
• 관련 구현 wiki 페이지

🧭 협업을 위한 어드민 기능 개발

• 초기 데이터를 만들거나 가설의 검증을 위해 일일히 찾아봐야 하는 불편한 과정들이 있었습니다.
• 이를 개선하기 위해 프론트측에서 어드민을 개발하였고, 이를 통해 백엔드에서 기술스택에 있어 의사결정 시간을 상당히 단축할 수 있었습니다.
• 관련 wiki 페이지

건물 노드 생성	노드 및 간선 정보 확인

Jira를 이용한 프로젝트 관리

- 진척도를 시각화하여 진행상황을 파악할 수 있었습니다.

배포 방식

• 각 주차마다 각 파트 브랜치에서 작업하며 금요일마다 Main 브랜치에 merge 합니다.

🙌 그라운드 룰

📞 일정 및 연락

1. 일정 변동 등 공유 사항은 카카오톡으로 전달해주세요.
2. 연휴 및 주말에는 확인 즉시 응답만 주시면 됩니다. 해결은 이후에 진행해도 괜찮아요.
3. 개인 일정이 생길 경우, 가능하면 전날까지 알려주세요. 카톡으로 간단히 공유해도 괜찮아요.
   1. 윤동현: 매주 목요일 19:00 퇴근
   2. 박준혁: 매주 화요일 19:00 퇴근
   3. 송민규: 매주 목요일 19:00 퇴근
4. 카톡이나 슬랙으로 먼저 연락하고, 응답이 없을 경우 대면으로 이야기해요. (센터에서 진행)
5. 상대방이 에어팟을 끼고 있어도 괜찮아요 :)

🗣️ 업무 및 회의

1. 매일 오전 10:30에 스크럼으로 하루를 시작해요. (수업 이후)
2. 문서 작성 및 구체적인 계획 서술 필수에요.
3. 연휴 기간 동안 매일 오전 11:00에 온라인 데일리 및 모각코를 진행해요.
4. 회의록 작성은 돌아가면서 진행해요.

👥 작업 및 피드백

1. 모든 머지는 반드시 1명의 승인을 받아야 가능해요.
2. 피드백은 건전하고 건강하게 주고받아요. 근데 이제 따뜻함을 잊지 말아주세요.

---

🎨 프론트엔드

프론트엔드에서 구현한 기능과 기술 스택을 정리합니다.

• 사용 기술: React, TypeScript, Zustand, TanStack-Query, Tailwind CSS, Frame

디렉토리 구성

├── src
    ├── api (API 통신 함수)
        ├── transformer  (API 통신 변환기)
        ├── type (API 통신 타입 선언)
            ├── request
            ├── response
    ├── assets
    ├── components (페이지 별 컴포넌트)
    ├── constant (상수, Enum
    ├── hooks (커스텀 훅)
    ├── map (지도 세팅)
    ├── pages (페이지 컴포넌트)
    ├── types (타입)
    └── utils (기타 함수)

FrontEnd 화면 구성

FrontEnd 배포 과정

Github Action Flow

1. Multi Stage Build
2. GCR Push -> VM Pull
3. Deploy New Container

---

🛠 백엔드

백엔드에서 구현한 기능과 기술 스택을 정리합니다.

• 사용 기술: Java, Spring Boot, JPA, MySQL, Redis, Hibernate envers, FastJson, Querydsl

아키텍처

ERD

---