부스트캠프 웹・모바일 9기 멤버십 Android : And04_project

🍀 Nature Album 🍀

주변의 생물을 촬영하고 식별하여 나만의 생물 도감을 만들고, 생물 지도를 친구들과 공유할 수 있는 앱 서비스

⭐ 프로젝트 소개

• 주변 생물을 촬영해 도감에 등록할 수 있습니다.
• 생물 도감 뿐만아니라 생물 지도에도 등록됩니다.
• 비회원으로 네트워크 없이 어디서든 생물을 촬영해 나만의 생물 도감을 만들어보세요~!
• 추가로 로그인을 하면 친구들의 생물 지도를 함께 볼 수 있답니다 😉 함께 즐겨보시는 것도 추천드립니다.

✨ 서비스 기능 소개

• 📸 생물 촬영 : 카메라로 주변의 생물 촬영
• 🖼️ 생물 도감 등록 : 라벨링하여 도감에 저장 및 도감 확인
• 🗺️ 생물 지도 확인 : 생물 도감의 위치 별로 표시되는 지도 확인
• 🤼 친구의 생물 지도 보기 : 로그인 하여 친구 추가한 친구들의 생물 지도 함께 보기

---

✨ 상세 기능 요약

✨ 상세 기능

Nature.Album.-.HD.mp4

도감 등록

카메라 권한	촬영 & AI 라벨링

도감 보기

도감 상세보기	도감 이미지 앨범에 저장	도감 이미지 삭제

지도

내 지도 보기	친구 지도 보기	네트워크 연결 확인

마이페이지 로그인 및 네트워크 연결 처리

로그인	네트워크 마이페이지	동기화

마이페이지 친구 기능

친구 목록	친구 검색과 네트워크 대응
친구 요청 거절과 수락	foreground 친구 요청 알림
background 친구 요청 알림	앱 종료 상태일 때 친구 요청 알림

---

💫 서비스 구조

✨ 기술 스택

분야	기술 스택
OS	Android
Launguage	Kotlin
UI	Compose
Network	Retrofit
Asynchronous	Coroutine, Flow
image	Coil
DI	Hilt
Background	WorkManager
Database	Room, FireStore
Map	Naver Map
Firebase	Firebase Storage, Firebase Cloud Messaging, Cloud Functions
AI	Gemini, Green-Eye
Tooling	Notion, Figma, Figjam, Github, Git, Zep

---

🔑 핵심 경험

1. 동기화

🔍 문제 상황

동기화는 로그인 상태에서 매일 자정에 WIFI 연결 상태에서만 실행이 됩니다.
동기화가 필요한 상황은 다음과 같습니다.

1. 비회원으로 사용하다 로그인하는 경우
2. 네트워크 없이 사용하여 서버와 로컬의 데이터가 상이한 경우
3. 앱을 재설치하거나 앱 데이터를 삭제하여 로컬 데이터가 날아간 경우
4. 네트워크가 없는 상태에서 도감을 삭제 또는 추가한 경우

🚀 해결 과정

따라서 서버와 로컬의 데이터를 모두 가져와 비교하여 서버에 필요한 데이터, 로컬에 필요한 데이터, 상이한 데이터로 분류한 뒤 저장 및 수정이 이루어지도록 구현하였습니다.

⚠️ 문제점

• 모두 가져와 비교하기 때문에 데이터가 많아지면 그만큼 오래걸리게 됩니다.
• 또한 지금은 서버에 필요한 데이터, 로컬에 필요한 데이터, 상이한 데이터 세 가지 모두 각각 탐색하여 추출하기 때문에 효율에 대한 문제가 있습니다.

🌟 개선 방안

1. 탐색 방법 최적화

• 현재 탐색 방법을 Filter와 none, any 확장 함수를 사용하고 있는데 이는 for문으로 하나씩 탐색하는 방법으로 한 번 탐색할 때마다 O(N)의 시간 복잡도가 소요됩니다.
• 따라서 이진 탐색으로 탐색하여 탐색 시간을 줄이는 방법을 사용 >> 다만 현재 데이터 리스트는 각각의 객체 타입으로 이루어져 있어 이를 어떻게 이진 탐색으로 구현할 지 고민이 필요합니다.

2. Local DB 속성 추가

• 서비스의 특성상 서버는 로컬 데이터의 변화를 파악하기 어렵지만 로컬은 서버에 저장 된 데이터를 파악할 수 있습니다. Local DB에 서버 저장 유무에 대한 속성을 추가하여 미등록 된 데이터만 가져와 비교하는 방법으로 시간 단축을 기대할 수 있습니다.

3. 한 번의 탐색으로 데이터 분류

• 한 번의 탐색으로 서버에 필요한 데이터, 로컬에 필요한 데이터, 상이한 데이터를 추출, 현재 같은 탐색을 3번 반복하여 서로 다른 데이터를 추출하고 있는데 이를 한 번에 3가지의 데이터를 추출하여 시간 단축을 기대할 수 있습니다.

---

2. Recomposition 최적화

기존 하위 컴포저블이 가진 상태를 호이스팅함으로써 공유하고 재사용 가능한 stateless한 컴포저블로 만들었습니다.

호이스팅된 상태를 하위 컴포저블에게 주기 위해 by remember를 사용하여 바로 값에 접근하여 값 자체를 상태를 필요로하는 컴포저블에게 넘겨주었습니다.

🔍 문제 상황

하지만 위 이미지처럼 by remember 를 통해 값 자체를 넘겨줄 때 상태를 끌어올린 위치까지 전부 리컴포지션이 되는 문제가 발생했습니다.

하지만 반대로 = remember 를 사용해 State 타입을 넘겨주었을 땐, 실제 상태를 이용하는 컴포저블만 리컴포지션이 발생했습니다.

🚀 원인과 해결 과정

두 선언 방식은 어떤 차이가 있길래 리컴포지션 측면에서 전혀 다른 결과가 발생했는지 알아보기 위해 들어간 내부 코드의 설명에서 정답을 찾을 수 있었습니다.

내부 코드에서는 아래와 같은 설명을 통해 안내하고 있었습니다.

A mutable value holder where reads to the value property during the execution of a Composable function, the current RecomposeScope will be subscribed to changes of that value.

When the value property is written to and changed, a recomposition of any subscribed RecomposeScopes will be scheduled.

컴포저블 함수가 실행되는 동안 .value(getValue) 를 읽으면 현재 실행중인 컴포저블은 해당 상태의 변경사항을 구독(subscribed)한다.

value 속성이 작성되고 변경되면 해당 상태를 구독한 컴포지션은 리컴포지션의 대상이된다.

즉, 상위 컴포저블에서 by remember 를 통해 값에 접근할 때는 내부적으로 getValue 를 통해 value 속성에 접근했기에 리컴포지션이 대상이 되었던 것이고, = remember를 사용하여 State 타입을 넘겨주었을 때는 value 속성에 접근한 것이 아니기에 리컴포지션 대상이 되지 않았던 것이었습니다.

✅ 결과

따라서, 상태를 끌어올린 위치의 컴포저블에서는 = remember 를 사용하고, 상태를 필요로하는 하위 컴포저블까지 State 타입을 넘겨주는 것으로 리컴포지션 최적화를 할 수 있었습니다.

---

3. FCM 구현: 백엔드 문제 해결

🔍 문제 상황

FCM(Firebase Cloud Messaging)으로 친구 요청 알림을 구현하려 했으나, 서버가 필요했고, 팀에 백엔드 개발자가 없는 상황이었다.

🚀 해결 과정

1. Firebase Cloud Functions 활용
   • Spring 서버 대신 Firebase Cloud Functions로 서버 역할 대체.
   • Firestore 트리거(onCreate)를 활용해 친구 요청 문서 생성 시 FCM 알림 전송 로직 구현.
2. 문제 해결
   • Firebase 설정 오류를 해결하며, 백그라운드 및 종료 상태에서도 정상 작동 확인.

✅ 결과

• Firebase Functions와 Firestore 트리거를 통해 친구 요청 알림 자동 전송 성공.
• 백엔드 학습을 통해 클라이언트 개발자로서 기술적 한계를 극복.

🌟 배운 점 및 성장

• 기술 경계를 넘는 태도: 백엔드 문제를 직접 해결하며 도전 정신과 문제 해결 능력을 키움.
• 기술 확장 경험: Firebase Cloud Functions와 Firestore 트리거를 활용해 클라이언트-서버 연동 이해도 향상.

---

4. MapView와 Coil 이미지 로딩 및 Compose-View 라이프사이클 관리

🔍 문제 상황

1. Marker의 아이콘을 뷰로 생성할때 attach를 하지 않고 바로 비트맵으로 변환해서 내부의 이미지 비동기 로딩이 동작하지 않음.
2. Compose에서 MapView의 라이프사이클을 관리해야함.

🚀 해결 과정

1. Marker - Coil 이미지 로드
   • 마커의 아이콘으로 사용할 커스텀 뷰 제작.
   • 커스텀 뷰에 uri를 설정하는 메소드를 추가해 coil로 이미지 로드.
   • 마커를 invisible인 상태로 맵뷰에 add
   • ImageView.load의 이미지 로드 상태 리스너에서 마커의 아이콘을 업데이트하는 콜백 실행
2. Compose-View 라이프사이클 동기화
   • DisposableEffect와 LifecycleObserver를 활용해 MapView와 Compose 생명주기를 통합 관리.
   • onDispose에서 메모리 정리

✅ 결과

• Coil로 Marker에 정상적으로 이미지 로딩.
• 마커의 이미지 로드 시작, 실패시 아이콘 변경
• Compose와 MapView를 안정적으로 통합 관리.

🌟 배운 점 및 성장

• 생명주기 관리 이해: Compose와 View의 독립적 라이프사이클을 통합 관리하는 방법 학습.
• 비동기 처리 최적화: 정적인 UI와 비동기로 동작되는 UI의 연동방법 학습.
• 통합 관리 경험: Compose와 기존 View를 함께 사용하는 기술적 자신감 확보.

---

📔 문서

Nature Album Wiki에서 우리의 모든 여정을 확인하세요!
아이디어부터 개발, 그리고 해결 과정까지, 모든 이야기가 담겨 있습니다. 궁금하시다면 지금 바로 확인해보세요! 🚀

---

🧑‍🤝‍🧑 전국구 팀 구성

정유진	임형준	김도윤	노진환	김정호