안드로이드 개발자의 바닥부터 시작하는 Flutter SDK 개발

지난 9월에 토스페이먼츠에 합류한 주니어 Android 개발자입니다. 분명히 Android 개발자로 취직했는데, 회사 첫 출근 날 PO가 저에게 커피챗에서 물어봅니다.

결제위젯 Flutter SDK 개발… 어떻게 생각하시나요?

결제위젯은 토스페이먼츠만의 결제 서비스로, 한 번 연동하면 노코드로 운영할 수 있는 결제 UI예요. JavaScript, Android, iOS SDK로 제공되고 있었지만 가맹점에서 Flutter SDK 요구를 꾸준히 받고 있었어요.

속으로는 흠칫했지만 출근한지 일주일도 안 됐으니 웃으면서 즐거운 도전이 될 것 같다는 말씀을 드려요. 그리고 일주일 뒤, 토스페이먼츠 결제위젯 Flutter SDK를 만들기 시작합니다. 오늘은 Flutter의 F도 몰랐던 Android 개발자가 Flutter SDK를 만드는 과정에서 느낀 점, 배운 점을 공유드릴게요.

새롭지만 익숙한 Dart

저는 Android 개발에 사용되는 언어인 Kotlin을 주로 사용해 왔고, C/C++이나 Java에도 익숙하지만 JavaScript 계열의 언어를 사용한 경험은 적었어요. Dart를 전혀 모르는 상태에서 Flutter 개발을 시작했지만, Dart를 배우는 데 그렇게 오래 걸리지는 않았어요.

Dart는 전통적인 클래스 기반의 객체지향 시스템과 강력한 타입 시스템을 가지고 있어서 Java에 익숙하면 금방 적응할 수 있어요. 람다 표현식, 비동기 프로그래밍(async-await) 등 현대적인 프로그래밍 언어의 기능도 모두 가지고 있어서 어떤 언어를 사용하던 개발자라도 불편함 없이 적응할 수 있습니다. 또한 런타임에 타입이 결정되는 다이나믹 타입을 이용해 유연하게 코드를 작성할 수 있고, Ahead-of-Time 컴파일러가 있어서 개발 시 매우 편리한 핫 리로드를 제공하는 특징적인 장점을 가지고 있습니다.

Dart는 분명 잘 만들어진 현대적인 프로그래밍 언어이고 다른 언어를 대체할 수 있는 잠재력이 있어요. 하지만 아직은 Flutter 외에 Dart가 사용되는 큰 프레임워크가 없고 생태계나 커뮤니티가 크지 않다는 단점이 있어요. 또한 각 분야마다 이미 주로 사용되는 언어가 존재하는 상황에서 개발자들이 위험을 감수하고 Dart로 기존 언어들을 대체할 만큼 인기를 얻지 못하고 있는 것도 사실입니다. 하지만 Flutter 개발만을 위해서라도 Dart는 배워 볼 가치가 있고, 잘 만들어진 현대적인 언어를 적은 비용으로 익힐 수 있다는 점에서 Dart는 충분히 매력적인 언어라고 생각해요.

적응하기 쉬운 UI 구조

Flutter UI의 핵심은 Widget입니다. Widget은 Android View와 유사하게 프레임워크 내에서 생명주기를 가지고 동작합니다. Android 개발과 동일하게 Widget의 여러 생명주기 함수들을 오버라이드 한 이후에 원하는 동작을 구현할 수 있어요. 또한 Flutter에서 Widget을 조합하여 UI를 구성하는 방식은 Jetpack Compose에서 UI를 만드는 것과 비슷한 느낌이라서 어렵지 않게 Flutter UI를 그리는 방법을 익힐 수 있었어요.

간단한 예시를 볼게요. Jetpack Compose에서는 각 UI 컴포넌트를 아래와 같은 @Composable 함수로 정의해요.

@Composable
fun MyColumn() {
	Column {
			Text("1")
			Text("2")
			Text("3")
	}
}

Flutter는 Column, Text와 같은 Widget의 하위 클래스들을 조합해서 UI를 구성해요.

@override
Widget build(BuildContext context) {
	return const Column(
    children: [
      Text('1'),
      Text('2'),
      Text('3'),
    ],
  );
}

코드를 보면 알 수 있듯 UI를 구성하는 방법은 Android와 굉장히 유사합니다. 또한 각 구성 요소 클래스의 이름이 Scaffold, SizedBox, Column, Text처럼 직관적으로 알기 쉽게 되어 있어서 찾아보면서 학습하기 용이합니다.

크로스 플랫폼의 함정

크로스 플랫폼은 하나의 코드로 여러 운영체제의 앱을 동시에 개발할 수 있다는 장점이 있지만, Android와 iOS의 차이로 인해 분기를 나눠서 코드를 따로 작성해야 되는 경우도 있어요.

서로 다른 UI 스타일

Android와 iOS 유저 모두에게 자연스러운 사용 경험을 제공하기 위해 각 운영체제에 맞추어 UI를 수정할 필요가 있어요. 예를 들어, 결제위젯에서는 Android, iOS 각 다른 방식으로 결제창을 띄웠어요. Android에서는 결제창에서 백버튼으로 뒤로 내비게이션하는 것이 자연스럽지만, iOS에서는 모달 형태가 주로 사용되기 때문에 모달 바텀시트에 웹뷰를 넣어 띄웠어요.

이 과정에서 스와이프 뒤로가기 이슈나 모달을 아래로 드래그하는 모션과 웹뷰 내 스크롤 모션이 서로 충돌하여 잘 동작하지 않는 등의 이슈가 발생하기도 했습니다. 라이브러리의 문서를 꼼꼼히 읽고 설정 파라미터을 적절히 조절하면 해결되는 문제가 대부분이었지만, DragGestureRecognizer를 직접 커스텀해서 웹뷰에 gestureRecognizer를 지정해서 해결하기도 했어요.

복잡한 딥링크 처리

결제위젯에서는 고객이 선택한 결제수단에 따라 카드 또는 은행 앱으로 이동해요. 앱마다 딥링크를 사용하는 방법이 다르기 때문에 SDK에서는 모든 경우를 잘 파싱해서 올바른 앱을 실행해야 하는데요. Flutter 개발에는 Android와 iOS의 각자 다른 딥링크 실행 방법도 신경써야 했어요. 각 운영체제에서intent, market, onestore 등 서로 다른 URL을 열어야 했고, 앱이 사용자 휴대폰에 설치가 안 되어 있을 때 Android는 플레이스토어로, iOS는 앱 스토어로 연결해 줘야 됐어요.

일반적인 네이티브 개발자라면 한 쪽만 알아도 충분하지만, 크로스 플랫폼인 Flutter의 특성상 양쪽 모두를 신경 써야 하고 2배의 QA 테스트 케이스가 필요해요. Android와 iOS 한 쪽에서 이슈가 생겨서 문제를 해결하면 멀쩡하던 다른 쪽에 이슈가 발생하기도 하는 어지러운 QA 과정을 겪었습니다.

낯선 iOS 개발 환경

저는 아이폰을 단 한 번도 써보지 않은 골수 Android 사용자였고, 크로스 플랫폼 개발도 처음이었어요. 그래서 일어난 단순한 문제들이 있었어요. 예를 들어, Android와 달리 iOS에는 물리적 뒤로가기가 없는데요. 처음에는 이런 UI 차이점을 고려하지 않고 1차 개발에 iOS 뒤로가기 기능을 넣지 않았어요. QA에서 iOS 오류가 난 이후에 뒤로갈 방법이 없었던 당황스러운 일이 생겼죠.

또, Flutter 개발은 VSCode나 Android Studio 등 여러 IDE에서 가능한데요, 저는 가장 익숙한 안드로이드 스튜디오에서 개발했어요. 하지만 iOS 빌드와 테스트 배포를 위해서는 XCode와 iOS의 개발 환경에도 익숙해져야 했습니다. Android 개발자라면 볼 일이 거의 없는 ruby나 cocoapods를 설치하면서 수많은 오류 메시지를 만나는 경험도 했어요.

교훈과 반성, 그리고 얻은 것

크게 느낀 점은 역시 새로운 프레임워크는 똑바로 천천히 공부하고 써야 된다는 것입니다. 특히 중요한 앱 라이프사이클이나 기본적인 Flutter Widget(SafeArea, Scaffold 등)의 사용법을 처음에 꼼꼼히 공부했다면 개발이 2주는 빨리 끝났을 것 같아요. Flutter 공식 문서가 워낙 잘 되어 있어서 천천히 읽고 충분히 이해하고 개발을 시작하는 것을 추천해요.

그리고 Flutter는 미래가 밝은 크로스 플랫폼이라는 생각이 들었어요. 하나의 코드로 웹, Android, iOS 앱을 모두 만들 수 있다는 점은 네이티브 개발과 비교할 수 없는 장점이기 때문입니다. 하지만 라이브러리만 사용해서 만들기 어려운 복잡한 기능을 구현하려면 네이티브 함수를 끌어다 써야 할 수도 있기 때문에 네이티브 Android와 iOS의 지식은 여전히 중요합니다.

Flutter는 간단한 토이 프로젝트, 신규 프로젝트 또는 작은 규모의 프로젝트에 쓰기엔 무척 유용해 보입니다. 하지만 기존에 있는 거대한 프로젝트를 마이그레이션하거나 일부분만 Flutter로 개발하려면 연동 과정에서 개발자가 많이 고통받을 수도 있겠다는 생각을 했습니다.

결제위젯 Flutter SDK 사용해보세요

두 달의 우여곡절 끝의 결과물은 바로 결제위젯 Flutter SDK입니다. 개발 중인 Flutter 프로젝트에 온라인 결제가 필요하다면 토스페이먼츠 결제위젯을 사용해보세요. 결제위젯은 아래와 같이 주문서 페이지에 간편히 넣을 수 있는 결제 UI에요. 카드, 간편결제 등 모든 일반 결제수단을 지원해요.

• 결제위젯 Flutter SDK 샘플 앱
• 결제위젯 Flutter SDK 문서

함께 읽으면 좋을 콘텐츠

📍 Android, iOS 웹뷰에서 딥링크 열기

📍 Android 액티비티(Activity)란?

📍 React Native와 Flutter, 어떤 특징이 있나요?

Writer 양주현 Graphic 이은호, 이나눔

토스페이먼츠 Twitter를 팔로우하시면 더욱 빠르게 블로그 업데이트 소식을 만나보실 수 있어요.

---

• 토스페이먼츠 홈페이지
• 토스페이먼츠 개발자센터
• 토스페이먼츠 GitHub
• 토스페이먼츠 실시간 문의