• MapFragment를 Compose로 래핑한다

  Naver Maps는 Fragment로 구현하는 것을 권장하기 때문에 MapFragment를 활용해 지도 기능을 사용할 수 있다. MapFragment를 Compose 내에서 사용하도록 래핑함으로써 필요한 위치에 배치할 수 있으며, 지도 API의 모든 기능을 활용하면서도 Compose UI 계층과 통합할 수 있다.

• AndroidView를 사용하여 MapFragment를 삽입한다

  AndroidView를 사용하여 MapFragment를 Compose에 삽입할 수 있다. 이 방식으로 지도 뷰 위에 Compose 컴포넌트를 오버레이할 수 있으며, 이를 통해 BottomSheet, FloatingActionButton, Marker 등과 같은 인터렉션 요소를 쉽게 추가할 수 있다. AndroidView 내에 FragmentContainerView를 감싸 설정하고 Compose 상위에서 필요한 마커 및 오버레이 요소를 배치한다.

• BottomSheet와 Marker를 지도에 오버레이한다

  Scaffold를 사용하여 화면을 구성하고, BottomSheet를 지도 위에 오버레이 형태로 배치한다. 이때 BottomSheetScaffold를 사용해 지도와 독립적인 상태 관리가 가능하며, 사용자 입력이나 정보 표시와 같은 기능을 지도와 별도로 수행할 수 있다.

• Compose Navigation으로 화면 전환을 관리한다

  Compose의 NavHost와 NavController를 사용해 화면 전환을 관리하고, 지도가 포함된 화면을 필요한 시점에만 표시하도록 한다. 이를 통해 성능 효율을 높이고 지도가 활성화될 때만 MapFragment를 사용하게 하여 리소스를 최적화할 수 있다.

• 지난 피어세션에서 민주님네가 먼저 MapFragment 도입을 시도했고 생명주기 문제가 있었다는 것을 알게 되었다. 우리 팀도 Naver Maps로 XML을 Compose에서 사용하면서 발생하는 문제들을 해결해보고 생명주기에 맞게 사용하는 것을 도전해보는 것이 목표였다. 그래서 나도 먼저 Fragment로 실험해보다가 민주님께 DM으로 혹시나 생명주기 문제를 해결했는지 먼저 여쭈어보았고 아직 해결되지 않아 우리 팀이 해결되면 말해달라고 했다. 아래는 민주님을 통해 알게 된 민주님네 진행 상황을 정리해둔 것이다.

• naver map을 fragment로 하여 android view 로 compose에 삽입

• 이로 인해 fragment 위 마커 등은 custom view로 만들어 fragment에서 하던 것처럼 진행해야 함

  [[네이버 지도 API] 마커 아이콘 커스텀 뷰 만들기](https://www.notion.so/API-13aea5e5fc1780e3a497fb5cdc4e2e9c?pvs=21)

  • Fragment 위에 composable을 띄워서 표시하는 것 실패하셨다고 함. 커스텀 뷰로 충분히 가능해서 꼭 안해도 될 것 같다고 말씀하심. ⇒ 시간 되면 시도해보기

• Fragment와 Compose 간의 생명주기 문제

https://github.com/boostcampwm-2024/and06-musicroad/pull/85

• 위의 PR 마지막 Comment 참고

저도 다른 화면으로 이동했다가 돌아오면 마커 생성이 여러 개가 되는 것은 로그를 통해 인지하고 있었습니다. 다른 화면을 n번 다녀오면 중앙 버튼을 한 번 클릭했을 때 마커 생성 로그가 n번 찍힙니다. 이벤트 방출은 한 번 되는데 이벤트 문제라기보단 프래그먼트 문제라고 생각하고 있었는데 윤겸님이 언급해주셔서 다시 이 문제에 대해 알아봤습니다.

저희는 지금 MapScreen 안에서 AndroidView로 MapFragment를 띄우고 있습니다.

다른 화면을 다녀왔을 때 버튼을 클릭하면 이벤트 방출은 한 번인데 왜 마커 생성이 두 번 되는지 이것저것 가설을 세워보고 로그를 찍어보며 원인을 찾았습니다.

AndroidView(
    modifier=Modifier.fillMaxSize(),
    factory= { context->
FragmentContainerView(context).apply {
            id=View.generateViewId()

            (contextasFragmentActivity).supportFragmentManager.beginTransaction()
                .replace(id,MapFragment())
                .commitAllowingStateLoss()
        }
    }
)

현재 위처럼 AndroidView가 작성되어 있습니다. AndroidView의 factory는 composable이 컴포지션될 때 실행됩니다. 화면을 이동했다가 돌아오면 새로 컴포지션 되기 때문에 새로운 화면으로 이동했다가 돌아올 때마다 factory가 호출됩니다.

factory 안에서 id를 View.generateViewId()로 생성하고 있는데 이는 factory가 실행될 때마다 다른 값을 생성합니다. 따라서 replace가 되는 것이 아니라 새롭게 추가가 됩니다.

다른 화면으로 갔다가 다시 돌아왔을 때 factory에서 새로운 프래그먼트가 만들어지고 이전 프래그먼트도 여전히 살아있는 상태입니다. 프래그먼트끼리 뷰모델은 공유하고 있기 때문에 버튼을 한 번 눌렀을 때 두 프래그먼트에서 이벤트를 받고 각자 마커를 생성하여 로그가 두 번 찍히는 것이었습니다.

위 코드에서 id 값을 고정 값(ex. R.id.fragment_map)으로 바꾸면 replace에서 프래그먼트가 교체되기 때문에 다른 화면을 갔다와도 프래그먼트가 하나만 있게 됩니다. 따라서 화면을 이동하고 돌아와도 버튼을 눌렀을 때 마커가 중복으로 생성되지 않습니다.

그런데 위처럼 변경했을 때 왜 다른 화면으로 가도 MapScreen이 실행되는지(로그에서 태그가 MapScreen인 것이 MapScreen이 실행된 것입니다), 다른 화면으로 갔을 때 기존 프래그먼트가 onPause() 되는 게 아니라 다시 돌아왔을 때 onPause()부터 소멸까지 수행하는 것 등 아직 이해할 수 없는 부분들이 있습니다 ㅠ

꽤 알아봐야 할 부분이 있을 것 같아 이 PR을 계속 열어두는 것보다는 bug 이슈를 생성하고 거기서 해결해보는 것도 좋을 것 같습니다.

compose navigation과 fragment를 함께 사용하니 생명주기 관리가 어렵네요 ㅠㅠ

---

• Fragment와 Compose의 생명주기 차이
  • AndroidView를 통해 Fragment를 삽입하면, Fragment의 생명주기와 Compose 생명주기가 서로 다른 방식으로 동작하게 되어, 화면 재진입 시 Fragment가 중복 생성되는 문제를 일으킬 수 있음
• AndroidView의 factory 속성 작동 방식
  • factory는 Composable이 처음 생성되거나 재생성될 때 실행
  • 화면을 이동하거나 돌아올 때마다 factory가 호출되면, View.generateViewId()로 생성된 ID가 변경되어 새로운 Fragment가 추가될 수 있음
    • custom view로 마커 생성할 때 id를 지정해두고 사용해야겠음
    • id 값을 고정된 리소스 ID (예: R.id.fragment_map)로 설정하여 Fragment가 교체되도록 하기
• Compose와 Fragment를 함께 사용할 때의 Navigation 문제
  • Compose Navigation과 Fragment Navigation은 각각 별도의 스택을 관리
  • Compose Navigation으로 화면을 이동하면 Fragment의 생명주기가 적절하게 관리되지 않거나 예상치 못한 동작을 유발(화면 전환이나 재진입 시 더 복잡)
• Fragment 생명주기와 ViewModel 공유
  • 화면 이동 후 돌아왔을 때 두 개의 Fragment가 같은 ViewModel을 공유하고 있다면, 이벤트가 중복 처리될 가능성이 있음( Fragment가 여러 개 중복 생성되었기 때문)
    • Fragment를 고정된 ID로 설정하여 중복 생성을 막아야 함

• https://webconcert-public-assets.s3.ap-northeast-2.amazonaws.com/conferences/woowa2021/presentations/1-6.pdf
• https://www.youtube.com/watch?v=BX0rQvYgf1I

https://navermaps.github.io/android-map-sdk/guide-ko/5-1.html

멀티스레딩

오버레이 객체는 아무 스레드에서나 생성할 수 있습니다. 그러나 오버레이의 속성은 스레드 안전성이 보장되지 않으므로 여러 스레드에서 동시에 접근해서는 안됩니다. 특히 지도에 추가된 오버레이의 속성은 메인 스레드에서만 접근해야 하며, 그렇지 않으면 [CalledFromWrongThreadException](https://navermaps.github.io/android-map-sdk/reference/com/naver/maps/map/CalledFromWrongThreadException.html)이 발생합니다. 단, 오버레이가 지도에 추가되지 않았다면 다른 스레드에서 오버레이의 속성에 접근해도 예외가 발생하지 않습니다.

따라서 대량의 오버레이를 다룰 경우 객체를 생성하고 초기 옵션을 지정하는 작업은 백그라운드 스레드에서 수행하고 지도에 추가하는 작업만을 메인 스레드에서 수행하면 메인 스레드를 효율적으로 사용할 수 있습니다. 다음은 1000개의 마커를 백그라운드 스레드에서 생성하고 속성을 지정한 후 메인 스레드에서 지도에 추가하는 예제입니다.

• DisposableEffect는 특정 Composable이 화면에 진입하거나 떠날 때 한 번씩 실행되어야 하는 작업을 처리하는 데 유용
• SideEffect는 컴포지션이 성공적으로 완료된 후 한 번 실행되어야 하는 작업을 처리
• 기존의 Fragment나 Activity에서의 onResume/onPause와 같은 역할을 수행

https://www.youtube.com/watch?v=G67sUjEpsGQ

https://github.com/mapbox/mapbox-maps-android/blob/main/extension-compose/src/main/java/com/mapbox/maps/extension/compose/internal/MapViewLifecycle.kt

• 오히려 mapview로 두고 생명주기를 직접 관리하는 것이 더 나을지도 모름. 그것이 composable 처럼 사용할 수 있을 것 같음.
• https://webconcert-public-assets.s3.ap-northeast-2.amazonaws.com/conferences/woowa2021/presentations/1-6.pdf
• https://www.youtube.com/watch?v=BX0rQvYgf1I

• 아래의 라이브러리를 참고해서 MapView의 생명주기를 조절해보자.

https://github.com/mapbox/mapbox-maps-android/blob/main/extension-compose/src/main/java/com/mapbox/maps/extension/compose/internal/MapViewLifecycle.kt

package com.and04.naturealbum.ui.maps

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.viewinterop.AndroidView
import com.naver.maps.map.MapView
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.LifecycleEventObserver
import androidx.lifecycle.LifecycleOwner
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.platform.LocalLifecycleOwner

@Composable
fun MapScreen(modifier: Modifier = Modifier) {
    // 현재 Context를 가져옵니다. 이는 MapView 초기화 시 사용
    val context = LocalContext.current
    // 현재 MapScreen의 LifecycleOwner 가져옴. 이는 생명주기를 관리하는 데 사용
    val lifecycleOwner: LifecycleOwner = LocalLifecycleOwner.current

    // MapView를 Compose에서 사용할 수 있도록 rememberSaveable을 사용하여 상태를 관리
    // Configuration change에도 MapView가 재생성되지 않고 유지
    val MAP_VIEW_ID = 12345 // 이후 ids.xml로 고정 id 빼기

    val mapView = remember {
        MapView(context).apply {
            id = MAP_VIEW_ID // MapView에 고유한 ID를 설정
        }
    }

    // MapView의 생명주기를 관리하기 위해 DisposableEffect를 사용
    DisposableEffect(lifecycleOwner) {
        // 현재 LifecycleOwner의 Lifecycle을 가져옴
        val lifecycle = lifecycleOwner.lifecycle
        // Lifecycle 이벤트를 관찰하는 Observer를 생성
        val observer = LifecycleEventObserver { _, event ->
            when (event) {
                Lifecycle.Event.ON_CREATE -> mapView.onCreate(null)
                Lifecycle.Event.ON_START -> mapView.onStart()
                Lifecycle.Event.ON_RESUME -> mapView.onResume()
                Lifecycle.Event.ON_PAUSE -> mapView.onPause()
                Lifecycle.Event.ON_STOP -> mapView.onStop()
                Lifecycle.Event.ON_DESTROY -> mapView.onDestroy()
                else -> Unit
            }
        }
        // Lifecycle에 Observer를 추가하여 생명주기를 관찰
        lifecycle.addObserver(observer)

        // DisposableEffect가 해제될 때 Observer를 제거하고 MapView의 리소스를 해제
        onDispose {
            lifecycle.removeObserver(observer)
            mapView.onDestroy() // MapView의 리소스를 해제하여 메모리 누수를 방지
        }
    }

    // AndroidView를 사용하여 Compose 내에 MapView를 표시
    AndroidView(factory = { mapView }, modifier = modifier) {
        // 필요한 경우 추가적인 설정을 업데이트
        it.getMapAsync { naverMap ->
            // 지도가 준비된 후 추가 설정을 수행
            naverMap.minZoom = 10.0
            naverMap.maxZoom = 18.0
        }
    }
}

• 네이버 지도 API에서 지도에 사용할 이미지 오버레이를 생성하기 위한 OverlayImage 추상 클래스
• 다양한 소스(뷰, 비트맵, 리소스 ID, 에셋 파일, 앱 내부 파일, 파일 경로 등)에서 이미지를 가져와 오버레이 이미지로 변환하는 클래스

1. 필드
   • id: 오버레이 이미지의 고유 식별자이다. 소스에 따라 ID는 다르게 설정된다.
2. 정적 팩토리 메서드
   • 다양한 소스에서 OverlayImage 객체를 생성하기 위해 여러 정적 메서드를 제공한다:
     • fromView(View view): 뷰를 통해 오버레이 이미지를 생성한다.
     • fromBitmap(Bitmap bitmap): 비트맵으로부터 오버레이 이미지를 생성한다.
     • fromResource(int resourceId): 리소스 ID를 통해 오버레이 이미지를 생성한다.
     • fromAsset(String assetName): 에셋 파일 이름을 통해 오버레이 이미지를 생성한다.
     • fromPrivateFile(String fileName): 앱의 내부 파일을 통해 오버레이 이미지를 생성한다.
     • fromPath(String absolutePath): 파일의 절대 경로를 사용하여 오버레이 이미지를 생성한다.
     • fromFile(File file): File 객체를 사용해 오버레이 이미지를 생성한다.
3. 추상 메서드
   • getBitmap(Context context): 구체적인 오버레이 이미지에서 비트맵을 가져오는 메서드로, 각 소스별 클래스에서 구현해야 한다.
4. equals와 hashCode 메서드
   • 두 OverlayImage 객체가 동일한 id를 가지는지 확인하기 위해 equals와 hashCode 메서드를 재정의한다.

AndroidView(factory = { mapView }, modifier = modifier) {
        // 필요한 경우 추가적인 설정을 업데이트
        it.getMapAsync { naverMap ->
            // TODO: 지도가 준비된 후 추가 설정을 수행
            naverMap.minZoom = 10.0
            naverMap.maxZoom = 18.0
                photos.value.map { photoDetail ->
                    Marker().apply {
                        position = LatLng(photoDetail.latitude, photoDetail.longitude)
                        icon = OverlayImage.fromView(ImageMarker(context, photoDetail.photoUri))
                        width = 72
                        height = 100
                        map = naverMap
                    }
                }

        }

    }

import android.content.Context
import android.util.AttributeSet
import android.view.LayoutInflater
import android.widget.ImageView
import androidx.constraintlayout.widget.ConstraintLayout
import coil3.load
import coil3.request.crossfade
import coil3.request.error
import coil3.request.placeholder
import com.and04.naturealbum.R

class ImageMarker @JvmOverloads constructor(
    context: Context,
    uri: String,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : ConstraintLayout(context, attrs, defStyleAttr) {
    init {
        LayoutInflater.from(context).inflate(R.layout.image_marker, this, true)
        findViewById<ImageView>(R.id.iv_marker_image).load(uri) {
            crossfade(true)
            placeholder(R.drawable.cat_dummy)
            error(R.drawable.ic_launcher_background)
        }
    }
}