Compose Google Map

David·2024년 5월 4일

android compose googlemap

[Android] 실무에서는 어떻게

목록 보기

9/11

🗺️ 지도를 이용한 서비스 개발

회사에서 이번에
✌🏻지도 기반✌🏻의 반려견 유실 및 커뮤니티를
개발해야 하는 상황이 왔습니다.

현재 저희 앱에 상황은
바텀네비게이션, 마이페이지, 카메라 화면을 제외한
화면은 모두 컴포즈로 전환이 완료된 상태이고

바텀 네비게이션에 '동네' 탭이 추가되는 상황에서
해당 화면도 컴포즈로 개발되면
추후 컴포즈 통합에 편리한 상황인데

구글맵 컴포즈에 대한 자료가 별로 없고
있어도 기초적인 사용법 밖에 없어서
기술을 필요한 스펙에 맞게 검토를 해보았는데요.

검토하는 과정에서 발견한
사용법과 주의할 점 등을
공유해 보겠습니다.

🚀 Compose Google Map

📌 android-maps-compose dependencies

// Compose - map
implementation "com.google.android.gms:play-services-maps:$rootProject.googleMapVersion"
implementation "com.google.android.gms:play-services-location:$rootProject.googleLocation"
implementation "com.google.maps.android:maps-compose:$rootProject.composeMapVersion"
// (Optional)
implementation "com.google.maps.android:maps-compose-utils:$rootProject.composeMapVersion"

📌 GoogleMapAPIKey 설정

MAPS_API_KEY=YOUR_API_KEY가 저장된 곳을 셋팅
ComposeMap 을 사용하는 build.gradle.kts > secrets 를 사용


plugins {
    ...
    id(libs.plugins.secret.gradle.plugin.get().pluginId)
}

android {
    ...
}

dependencies {
    ...
    implementation(libs.bundles.compose.map)
}

secrets {
    // To add your Maps API key to this project:
    // 1. Add this line to your local.properties file, where YOUR_API_KEY is your API key:
    // MAPS_API_KEY=YOUR_API_KEY
    defaultPropertiesFileName = "local.properties"
}

💁🏻 구글맵 컴포즈 3요소

CameraPositionState

지도의 카메라 상태를 담당

// 초기 설정
val cameraPositionState = rememberCameraPositionState()
val cameraPositionState = rememberCameraPositionState {
   this.position = CameraPosition.fromLatLngZoom(LatLng target, float zoomLevel)        
}
// 카메라 제어
LaunchedEffect(key) {
   cameraPositionState.position = CameraPosition.fromLatLngZoom(latlng, zoom)
}

MapProperties

지도의 Property 를 설정 담당
지도 UI에서 내 위치를 받아올 수 있게 설정 여부 및 줌 설정 등등

val properties by remember {
        mutableStateOf(
            MapProperties(
                isMyLocationEnabled = true,
                minZoomPreference = getMinZoomLevelWithin3KM(windowWidthSize)
            )
        )
}

MapUiSettings

지도의 UI 설정 담당
지도에서 줌 표시 여부, 내 위치 표시 여부, 스크롤 가능 여부 등 설정 담당

val uiSettings by remember {
     mutableStateOf(
         MapUiSettings(
            myLocationButtonEnabled = true, 
            zoomControlsEnabled = false,
            rotationGesturesEnabled = false
         )
     )
}

위의 요소를 바탕으로
GoogleMap 컴포저블 함수를 구성하게 됩니다.

🛑 그런데 여기서 주의할 점이 있습니다.
구글맵에서 현재 내 위치를 받을 수 있게 설정 시는

"위치 권한을 받은 상태여야 합니다"

만약 권한을 받지 않은 상태에서
MapProperties와 MapUiSettings 로 내 위치 추적
허용 가능 설정 시
🐛 SecurityException 발생 합니다.

🏗️ 위치권한 허용 여부에 따른 UI 구성

큰 틀은 다음과 같습니다.
✅ 위치 권한의 값 변경에 따라 허용이 됐는지 확인
✅ 위치 권한 상태에 따라 적절한 UI 구성

위의 구성을 코드로 보면
다음과 같습니다.

📍 Marker 그리기

마커를 그리기 위해서는
위도(latitude)와 경도(longitude)가 필요 합니다.
GoogleMapCompose 에서는 위도 경도를
MarkerState로 감싸서 사용 합니다.

코드를 보면 MarkerState 자체는
Wrapper 클래스이고
position이 위도경도(LatLng) 를 상태로 사용하고 있습니다.

따라서 어떤 마커를 만든다 ➡️ MarkerState 가 있어야 한다라고 이해하시면 좋습니다.

그래서 마커를 그리는 가장 기본적인 형태는
GoogleMap 컴포넌트를 생성하고
contents 람다안에 Marker를 생성해주시면 됩니다.

💅🏻 📍 Custom Marker 그리기

기획에서는 당연히(?!) 기본 마커만 사용하게 기획하지 않고
커스텀한 디자인의 마커를 기획 하셨습니다.

기획에서는 마커 디자인이
✌🏻이미지✌🏻와 ✌🏻텍스트✌🏻가
들어간 조합의 마커였습니다.

이미지는
우리 서버에 올린 이미지 or 공공 API 에 등록된 이미지를
받아오는 스펙이였습니다.

해당 기획의 Custom Marker 를 그리기 위해
어떤 설계들과 테크닉이 필요 했는지 설명해보겠습니다.

📄 Marker Model 설정

서버에서 내려주는 위도, 경도를 LatLng 형태로 Mapping
Mapping 된 LatLng 형태의 위치 프로퍼티를 Marker 에서 사용할 수 있도록 MarkerState로 Wrapping

📍 MarkerComposable

해당 컴포저블은 key의 변경이 있어야만 contents 가 Recomposition 됩니다.

위의 기획을 보시면
Marker는 이미지를 서버에서 받아
Rendering 해야하는 상황입니다.

현재 저희 회사는
Remote Image 사용 시
Coil Library 를 사용하는데요.

content에 컴포넌트를 구성해서
Rendering 을 진행하면

🚨네트워크 이미지가 항상 실패로 보였습니다.🚨
👉🏻 등록된 이슈

🚀 해결 방법
📌 이미지 로드 시 실패한 데이터만 Recomposition
📌 key 를 이용한 방법 (8월 이후 추가된 방법)

위 방법으로 어떻게 해결했는지 보겠습니다.
👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻

🚀 이미지 로드 시 실패한 데이터만 Recomposition

로직을 처리하는 ViewModel 에서는
다음과 같은 처리가 필요했습니다.

이미지 로드를 실패한 데이터 > UI에서 바라보는 상태 데이터를 변경(retryCount++)

성공한 데이터 > UI에서 바라보는 상태 데이터를 변경(isLoadedImage = true)

위의 Recomposition 을 유발하는 상태 변경 로직은 지도가 움직일 때 취소가 가능한 로직이야 함

취소는 cooperative 하게 작동해야 함

UI의 Screen 에서는

VM 에서 호출한 마커 데이터 그리기

이미지 프리로드

위치 이동에 따른 마커 api 호출 및 이미지 로드 결과 데이터 전송

이동 시 이전에 요청에 대한 처리를 취소

위 코드는 마커가 움직인 후에 VM에 마커들을 호출하는 Request 를 요청하는 로직입니다.

카메라의 포지션을 바탕으로 플로우 emit
호출 조건은 이동 후, 줌 아웃 후, 새로고침 되어야 할 때
너무 많은 데이터 요청을 피하기 위해 debounce

✌🏻추가로✌🏻

이동 중에 미처 완료되지 못 한 Job들은 모두 취소합니다.
이는 맵 이동 시 퍼포먼스 개선을 위한 코드 입니다.

위 코드는 VM으로부터 마커 데이터가 내려올 때 preload 하는 코드입니다,

각 마커마다 병렬적으로 이미지를 preload 합니다.
📌 여기서 중요한 점은 allowHardware(false)로 설정해야 하는 점 입니다.
- 이유는 마커를 커스텀하게 그릴 때 GoogleMap Sdk 에서 BitmapDescriptor 라는 객체를 이용하는데
  컴포즈에서 BitmapDescriptor 객체를 얻기 위해서 Bitmap을 얻어야하고
  Bitmap(커스텀하게 그려진)을 얻기위해 Canvas를 이용하는데
  이 때, hardware bitmap 을 이용할 때 broken case에 걸리기 때문입니다.
  
  그래서 만약 false로 설정을 안 하면
  Fatal Exception: java.lang.IllegalArgumentException: Software rendering doesn't support hardware bitmaps
  를 마주하게 됩니다.

위 코드는 마커를 받아와서 GoogleMap에 Rendering 하는 코드입니다.

하위 버전을 호환성을 고려하여 filter 조건에 isUndefinedCategory.not() 을 조건으로 명시합니다.
아이템마다 CustomMarker를 그려줍니다. > 이 때, coil 에 SubcomposeAsyncImage를 사용 했습니다.
마지막 아이템을 그린 후 image 로드에 성공한 데이터와 실패한 데이터를 분류하여 vm에 전송 합니다.

여기까지가
🚀 이미지 로드 시 실패한 데이터만 Recomposition 로
해결한 방법 입니다.

위의 방법들로 처리하기까지
많은 고려와 복합적인 이해가 필요 했습니다.

상태에 대한 이해
코루틴 취소에 대한 이해
API 호출에 대한 비용 최소화
Map 에서 Camera position 과 이를 Stream Data로 활용하여 처리(flow)
coil에 대한 이해

📌 key 를 이용한 방법 (8월 이후 추가된 방법)

위의 방법으로 앱을 서비스 후
지속적으로 개선할 방법을 고민 했었습니다.

그래서 피처 개발이 끝나고 차분히 조금씩
분석을 시작 했었는데요.

이미지 로드가 실패가 나왔고
그 이후에 상태가 변화하지 않았기 때문에
그러면 로드를 실패한 데이터에 한해서
Recomposition을 유도하여 해결을 했는데

Recomposition에 관점으로 계속 생각해보니
관점을 해당 컴포넌트에서
좀 더 넓혀서 구글맵으로 생각해보니
해당 구글맵에서 Recomposition이 발생하여
컴포넌트가 이미지를 채 불러오기도 전에
리컴포지션이 되고
그러면 이미지 불러오는 로직이
취소 된다고 생각이 들었습니다.
왜냐면 실제로 coil 로그를 보면

ImageLoader App Package 🏗 Cancelled - https://이미지주소
로 찍히기 때문입니다.

그래서 생각을 정 반대로
Recomposition을 딱 한 번만 보장하면 어떨까
라는 생각을 했고

이를 key를 이용하여 구현 해봤습니다.

위 코드에서 key를 이용함으로서
구글맵 contents에서 사용하는
CircleMarkerComponent를 여러번 실행하는 것이 아닌
markerItem.id가 키가 되어 ✌🏻한 번만 실행을 하고✌🏻

해당 AsyncPainter를 statefull 한 구조로 가져 가면서
AsyncPainter가 상태가 변경될 때
MarkerComposable 을 Recomposition을 하면

이미지 로드는 취소가 안 되고
이미지 로드 상태 or 마커 아이템이 변화할 때만
MarkerUI를 상태에 맞춰서 그릴 수 있게 됩니다.

👆🏻🗺️ Gesture Tracking

Compose Google Map 에서
Gesture 를 파악하기 위해서는
CameraPositionState 객체를 이용합니다.

다만 파악할 수 있는 방법이
위 코드와 같이 한정적입니다.

이에 카메라가 이동할 때마다
Gesture 를 파악할 수 있는
Effect API 를 설계 했습니다.

제가 필요한 정보는 zoom-in, zoom-out, moving 이 필요했고

"API 에서 제공하는 상태 + 상태를 내부에서 저장하여 비교 + 값 비교"

MapGestureToken 을 완성 했습니다.

🛑 점이 Google-Map에서
제스처를 분류하는 부분입니다.

위와 같이 제스처를 분류한 목적은
API 호출 최소화 입니다.

zoom-in 할 때는 이미 해당 반경에
데이터가 존재하므로
다시 로드할 이유가 없습니다.

위와같이 트래킹함으로서
데이터 로드와 렌더링을
조금 더 효율적으로
동작하게 만들었습니다.

📍 위치에 대해서

해당 기획에서 현재 위치를 받아오는 곳은
총 3군데 입니다.

지도 처음 진입 시
신고/목격 글 작성 시
게시글 알림 받는 장소 설정 시

위의 로직을 만들기 위해서
생각해봐야 할 점들이 있습니다.

우선 공통적으로 사용하는 곳이 많으니
✅ 로직을 하나로 통일해야 합니다.
또한 현재 위치를 받아오는 로직은
UI가 아닌 ViewModel에서 처리를 하는데
✅ 이 때, 테스트를 편히 작성하기 위해
생성자 Inject 해주는 구조로 만듭니다.
현재 위치를 가져오는 클래스의
변경을 고려하여 구체적인 클래스를 주입하는 것이 아닌
✅ 추상화에 의존하게 binding하여 주입합니다.

위의 코드는 현재 위치를 가져오는 코드입니다.
위도 경도를 스트림 형태의 데이터로 전달합니다.(flow)

위 코드는 DI 모듈입니다.
앱 전체의 생명주기를 갖는 것이 아닌
해당 화면의 ViewModel 생명주기로
객체를 관리합니다.

또한, 구체적인 클래스를
추상화에 의존할 수 있게 @binds 합니다.

위 코드는 위에서 설계한 interface 를
ViewModel 에서 constructor Inject 하여

UI에서 사용하는
currentPositionAtOnce 를 업데이트 합니다.

이로써 현재 위치를 받아오는 로직을
전부 봤습니다.

다음으로는 위와 관련해서
유저가 GPS 위치를 시스템적으로 off 하여
발생한 트러블 슈팅에 대해
살펴보겠습니다.

📡 GPS, GNSS 설정에 대해서

지도 앱을 출시하고 얼마 지나지 않아
다음과 같은 에러 메세지가
Sentry 에 종종 발생 했습니다.
시간이 지남에 따라 에러 발생량이 증가하여
이는 컴포즈 이슈가 아닌걸로 생각했고

난독화 된 코드(b1.a)를
progarud mapper를 통해서
파악해보니 '동네 탭' 부분이였습니다.

이에 동네탭을 개발하면서 발생했던 에러 케이스를
생각하면서 재현을 해보았더니
동일한 오류 재현에 성공하였습니다.

🐛 에러 내용

유저가 맵에 진입했을 때 최초로 위치를 받아오고 > 해당 위치로 이동시켜야 함

이 때 현재 위치를 받아올 때 GPS 설정이 안 되어 있어서 에러 발생

💫 해결 프로세스

위치 권한을 상태로 가지고 있어야 한다.

GPS 권한 실시간으로 트래킹 (on, off)

권한이 없을 때 GPS를 시스템적으로 요청하여 on, off 할 수 있게 처리

해결 결과

⚙️ 위치 권한을 시스템적으로 요청하여 on, off

LocationRequest을 통해 API 설정
위치관련 설정을 쉽게 결정할 수 있는 구글 API > SettingClicent 할당
LocationSettingsRequest 설정
fail Listener를 설정하여 ResolvableApiException 으로 intentSenderRequest 얻기
- intentSenderRequest 를 통해서 launcher 로 실행할 수 있게 하기 위함