—
Ep.4
Flutter는 구글에서 2018년 출시한 크로스 플랫폼 앱 개발 프레임 워크입니다.
크로스 플랫폼이란 하나의 코드 베이스로 Android, iOS, Web, Desktop 등 여러 가지 플랫폼에서 동작시키는 것을 의미합니다. 최근 들어 모바일 앱 개발 분야에서도 일관된 코드로 Android와 iOS 앱을 만들 수 있다는 점에서 주목받고 있습니다.
오늘은 기존 Android 앱으로 개발된 아이나비 내비게이션을 Flutter로 구현할 수 있을지 고민하고, 검토했던 내용에 대해 이야기해 볼까 합니다.
Flutter는 Dart 언어를 사용합니다. Dart 역시 Flutter와 마찬가지로 구글에서 만든 객체 지향 언어로, Flutter보다 훨씬 앞선 2011년에 공개되었습니다. C언어 문법과 거의 유사하며, null safety를 지원합니다.
Flutter 개발 환경 구성은 이 페이지에 자세히 설명되어 있으니 참고해 보시면 좋겠습니다. Flutter를 이용하여 앱을 개발할 때 IDE는 Android Studio 또는 VSCode를 사용할 수 있는데, 강력한 기능들을 지원하면서도 Android 앱 개발자에게 익숙한 Android Studio를 사용하는 것을 권장합니다.
이제 아이나비 내비게이션의 기능들을 어떻게 Flutter로 구현할 수 있을지 알아보겠습니다.
일반적으로 통신 기반 내비게이션의 구조는 크게 다음과 같이 분류할 수 있습니다.
왼쪽에 있는 지도(Display; DP)/안내/맵매칭 같은 경우, 각 OS 타겟 별로 빌드 된 산출물 파일을 import 해서 사용하는 것들로, 플랫폼 특화 요소로 분류할 수 있습니다.
오른쪽에 있는 사용자 인증/탐색/검색은 서버에서 데이터를 처리해서 앱(클라이언트)로 결과를 내려주는 것들로, 서버 기반 요소로 분류할 수 있습니다.
이러한 구성요소들 중 플랫폼 특화 요소에 속하는 지도와, 서버 기반 요소에 있는 항목들을 처리하기 위한 서버 통신을 중심으로 검토해 보았습니다.
내비게이션에서 지도를 표출하는데 핵심 역할을 하는 DP 엔진의 경우 공통 로직은 C++로 개발되어 있지만, 지도를 표출시키기 위한 View는 Android, iOS 각각 Native MapView를 제공하여 사용하고 있습니다. 이렇게 플랫폼 의존성이 존재하는 DP 엔진을 Flutter에서 어떻게 사용할 수 있을까요?
Flutter에는 플러그인이라는 개념이 있습니다. Android와 iOS 등 각 플랫폼별로 짜인 코드를 Flutter에서 동작할 수 있도록 하나로 묶은 것인데요. 플러그인의 API는 Flutter에서 사용할 수 있도록 Dart 언어로 작성되며, Platform Channel을 통해 플랫폼별로 사용하는 언어(Kotlin, Swift 등)로 작성된 코드도 플러그인에 포함됩니다.
플러그인의 흐름을 그림으로 표현하면 위와 같습니다. Flutter 앱에서 Method Channel을 통해 각 플랫폼별로 작성된 함수를 호출하고, 그 결과를 Flutter 코드로 반환해 주는 것이죠. 대표적인 예로, 하드웨어에 직접 접근이 필요한 기능들의 경우 Flutter 자체만으로 구현하기에는 어려움이 있어 플러그인의 Method Channel을 이용함으로써 이러한 제약을 해결할 수 있는 것입니다.
위에서 DP 엔진은 플랫폼별 MapView를 이용해서 지도를 표출한다고 했는데, Flutter에서 지도를 표출하려면 어떻게 해야 할까요? 안타깝게도 Flutter에서 Android의 Native View를 바로 사용할 수는 없습니다. Android Native 코드에서 Flutter에서 제공하는 PlatformView를 만들고, 그 안에 Native View를 추가하는 방식을 사용해야 합니다. Flutter에서 PlatformView를 호스팅 할 수 있는 방법은 크게 두 가지가 있습니다.
첫 번째 방법은 Virtual Display입니다.
Android Native View를 텍스처 형태로 렌더링 하는 방식으로, View 계층 구조에 포함되지 않는다는 특징이 있습니다. 그렇기 때문에 키보드 입력이나 접근성 같은 기능들이 동작하지 않을 수 있다는 단점이 있습니다.
두 번째는 Hybrid Composition입니다.
Virtual Display와는 다르게 Android Native View를 View 계층에 추가하기 때문에 키보드 입력 및 접근성 기능이 원활하게 동작합니다. 다만, Android 10 이전 버전에서는 화면을 그리는 방식의 차이로 인해 성능 저하가 발생할 수 있다는 단점이 있습니다.
DP 엔진은 별도의 키보드 인터랙션이 없고, Android 버전 호환성을 고려하여 Virtual Display 방식을 사용하기로 결정했습니다.
지도 표출 방식을 결정했으니, 이제 Flutter에서 서버 통신을 어떻게 구현할지 알아보겠습니다.
일반적으로 Android/iOS에서 특정 기능을 구현하고자 할 때, 직접 구현하기에는 시간과 노력이 많이 듭니다. 그래서 개발자들이 만들어 놓은 라이브러리를 많이 활용하게 되는데, Flutter도 마찬가지로 여러 가지 기능들을 프로젝트에 import 해서 사용할 수 있습니다. Flutter에서는 이를 패키지라고 부르고 있습니다.
pub.dev는 Flutter와 Dart의 공식 패키지 저장소입니다. 개발에 필요한 패키지를 검색할 수도 있고, 직접 패키지를 만들어 배포할 수도 있습니다. Flutter 생태계에서 대부분의 패키지는 이 저장소를 통해 배포됩니다.
Flutter에서 서버 통신을 구현할 때는 주로 Dio, Retrofit, Json Serializable 세 가지 패키지의 조합을 많이 사용합니다. 각 패키지가 어떤 역할을 하는지 살펴볼까요?
Dio는 서버 통신을 위한 클라이언트 객체를 제공하는 패키지입니다. 기본적인 서버 통신 외에도 Options, Interceptor 등 다양한 기능을 제공하기 때문에 커스터마이징 하기 편리하다는 장점이 있습니다. Android에서 흔히 사용하는 OkHttp 라이브러리에 해당하는 패키지라고 볼 수 있습니다.
Retrofit은 Dio를 통해 생성된 클라이언트 객체 기반으로 서버 API 요청을 함수 형태로 사용할 수 있게 만들어주는 패키지입니다. Android의 Retrofit 라이브러리와 동일한 역할을 하는데, 해당 패키지 설명 페이지에도 Android의 Retrofit에 영감을 받아 만들어졌다고 합니다.
Json Serializable은 서버 통신 응답으로 받아오는 JSON 문자열을 Flutter에서 정의한 데이터 클래스로 변환(역 직렬화) 하거나 역으로 JSON 문자열로 변환(직렬화) 하는 코드를 자동으로 생성해 주는 패키지입니다. 보통 Flutter에서 JSON을 처리할 때는 아래 이미지와 같은 절차에 따라 변환됩니다.
이와 같이 Dio, Retrofit, Json Serializable 패키지의 각 역할을 통해 서버 통신을 기능을 Flutter로 구현할 수 있습니다.
기존 Android 앱으로 개발되어 있던 아이나비 내비게이션을 Flutter 로 구현할 수 있을지 검토해 보는 과정에서 Flutter로 내비게이션을 개발하는 것이 아예 불가능한 것은 아니라는 결론을 낼 수 있었습니다.
물론, 내비게이션의 모든 기능을 Flutter로 구현하기에는 아직 많은 단계가 남았습니다.
안내, 맵매칭 엔진도 DP 엔진과 마찬가지로 플러그인으로 만들어 Flutter에서 사용할 수 있도록 호스팅 해주어야 하고, 이 글에서는 다루지 않았지만 화면에 UI를 그리는 방법도 기존과는 다른 방식을 사용해야 합니다.
하지만, 플랫폼별로 Native MapView가 분리되어 있던 DP 엔진을 플러그인으로 구성해 보고, Android에 이미 구현되어 있던 서버 통신 코드를 기반으로 Flutter로 개발해 보면서 플랫폼에 대한 의존성을 끊어내고 각 플랫폼에서 공통적인 코드를 사용할 수 있게 되었다는 긍정적인 측면을 확인할 수 있었습니다.
아이나비시스템즈의 모빌리티Tech그룹은 사용자의 위치 정보를 활용하여 교통, 이동, 배달, 공유경제 등 다양한 모빌리티 분야의 솔루션 및 앱 서비스를 연구, 개발하고 있습니다. 뿐만 아니라 모바일 앱 개발에 대한 신기술 동향도 관심을 가지고 지켜보고 있습니다. 끊임없는 관심과 개발을 통해, 앞으로도 저희 아이나비시스템즈, 그리고 모빌리티Tech그룹은 내비게이션을 비롯한 다양한 위치 기반 서비스를 통해 사용자들에게 보다 나은 모빌리티 경험을 제공할 수 있도록 노력하겠습니다.
—
by 아이나비시스템즈 모빌리티Tech그룹 조상규
