[Project-Outline] MapSnapshot 적용

🧐 문제 설명

1. 썸네일의 URL 불러오기

• 썸네일이 Firebase와 같은 외부 저장소에 URL 형태로 저장되어, 불러올 때마다 네트워크 비용이 증가하고 여러 썸네일을 불러올 때 앱의 응답성에 안좋은 영향을 미칠 위험이 있다.

현재 Firebase storage에 저장되어 있는 이미지 파일들

• 이미지 경로를 직접 하드코딩하여 사용하는 방식은 이미지 경로를 변경하거나 파일 위치를 수정할 때마다 코드 전반에서 수정을 해야 하기 때문에 유지보수성이 떨어질 것으로 예상된다.

2. RecordView, CardView에서 지도 로드 문제

• 현재의 구현 방식은 지도를 반복적으로 렌더링하여 리소스를 소비하고 있었다. 이러한 비효율성은 앱의 성능 저하와 리소스 낭비로 이어지며, 특히 저사양 기기에서 더 큰 문제를 일으킬 수 있다고 판단했다.
• 또한 실제로 실 기기 사용시 아래의 그림처럼 러닝 횟수마다 지도가 랜더링 되고, 스크롤 시 버벅이는 사용성 문제도 발견하였다!

지도들 로드된 모습

💡 해결 과정

1. 실제 지도를 불러오는 대신, 단순히 이미지를 사용하여 경로와 지도를 표시하도록 개선

애플에서 지원하는 MKMapSnapshotter 클래스가 있었고, 이를 사용했다. MKMapSnapshotter 를 활용하여 지도를 Snapshot하고 경로를 그 위에 얹어주었다.

    private func createMapSnapshot(completion: @escaping (UIImage?) -> Void) {
        ...
        // 맵 설정
        let configuration = MKStandardMapConfiguration(emphasisStyle: .muted)
        configuration.pointOfInterestFilter = .excludingAll
        options.preferredConfiguration = configuration
        
        let snapshotter = MKMapSnapshotter(options: options)
        snapshotter.start { snapshot, _ in
            // 맵 옵션 추가
            let context = UIGraphicsGetCurrentContext()
            if !coordinates.isEmpty {
            	// 라인 그리는 부분
                drawPolyline(on: snapshot, in: context)
            }
            
            let resultImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            
            completion(resultImage)
        }
    }
    
    private func drawPolyline(on snapshot: MKMapSnapshotter.Snapshot, in context: CGContext?) {
		// 라인 그리기
    }

2. 이미지를 로드 한 후 캐싱하여 반복되는 로딩을 최소화

NSCache를 사용하여 이미지를 캐싱하는 방법을 사용했다. 계산해보니 각 이미지당 30KB ~ 160KB 정도의 메모리를 차지하고 있어 런타임 메모리사용에 있어 큰 영향을 미치지 않는다고 판단했다.

class MapSnapshotCache {
    static let shared = MapSnapshotCache()
    private let cache = NSCache<NSString, UIImage>()
    
    // 최대 100개 항목 총 100MB 캐싱 메모리 할당
    private init() {
        cache.countLimit = 100
        cache.totalCostLimit = 1024 * 1024 * 100
    }
    
    func image(forKey key: String) -> UIImage? {
        return cache.object(forKey: key as NSString)
    }
    
    func setImage(_ image: UIImage, forKey key: String) {
        cache.setObject(image, forKey: key as NSString)
    }
}

 

🚨 트러블 슈팅

1. 경로가 튀는 문제

아래와 같이 기존의 로드된 데이터와 달리 경로가 튀는 문제가 발생하였다. 똑같은 데이터를 사용했기 때문에 경로가 튀는 문제가 발생한 것에 대한 문제를 찾기 어려웠다.

선을 얇게 해보니 경로의 문제가 아닌 약간의 노이즈를 굵은 선이 그리면서 나타나는 UI의 문제라는 것을 파악했다. 기존 가지고 있던 smoothLocations를 입력해 보았지만 해결이 되지 않는다. 아마 경로가 튀는 문제가 아닌 경로의 노이즈와 라인 두께의 상대적인 문제인 듯 했다.

그렇다면 smooth도 해주고, 촘촘한 거리는 어느정도 생략하면서 그려주면 되겠다는 생각을 하여 filter와 smooth를 중복 적용해주었더니 아래와 같은 깔끔한 결과를 얻을 수 있었다.