크로스 플랫폼 앱은 하나의 소스 코드로 Android, iOS에서 똑같이 작동하는 앱을 뜻하는데요. 네이티브 앱과 대조되는 개념이에요.

네이티브 앱은 각 운영 체제에 맞춰 따로 개발 및 운영이 필요해요. 각 앱을 개발하는 플랫폼도 다르고 사용하는 프로그래밍 언어도 다르죠. 예를 들어, Android 네이티브 앱은 안드로이드 스튜디오에서 Kotlin 언어로 개발하는데, iOS 네이티브 앱은 XCode에서 Swift 언어로 개발해요. Android와 iOS는 호환이 되지 않아서 사실상 두 개의 앱을 만드는 것과 같아요.

네이티브 개발의 이런 한계점을 개선하고자 크로스 플랫폼 앱이 탄생했어요. 크로스 플랫폼 앱 하나가 있다면 Android와 iOS 운영 체제를 위해 동시에 개발 및 운영할 수 있다는 장점이 있어요. 크로스 플랫폼에는 대표적으로 React Native, Flutter가 있어요. React Native는 메타(페이스북)에서 2015년에 공개했고, Flutter는 구글에서 2017년에 공식 릴리즈했어요.

React Native는 iOS와 Android에서 똑같이 동작하는 앱을 구현하는 JavaScript 기반 프레임워크입니다. 이름에서 알 수 있다시피 메타에서 개발한 React를 기반으로 만들어졌어요. 그래서 JavaScript와 React의 기본 지식을 알고 있는 개발자는 큰 어려움 없이 React Native로 바로 크로스 플랫폼 앱 개발을 시작할 수 있어요. 개발자가 벌써 익숙한 JavaScript 기반 라이브러리, npm을 사용하면서 iOS, Android 앱을 동시에 만들 수 있다는 큰 장점이 있어요.

어떻게 하나의 코드 베이스로 iOS와 Android 앱 개발이 가능할까요? React Native는 런타임 중에 JavaScript 브릿지를 생성하고 JavaScript 코드를 네이티브 코드로 변환해서 컴파일해요. 브릿지를 통해서 네이티브 UI에 접근하는 것이죠. 덕분에 Objective-C API로 iOS 컴포넌트를, 자바 API로 안드로이드 컴포넌트를 렌더링할 수 있어요. iOS, Android 플랫폼의 표준 렌더링 API를 사용하기 때문에 엔드 유저에게 네이티브 UI를 그대로 제공할 수 있어요.

React Native 개발 환경은 어떨까요? JavaScript 개발할 때 사용하는 코드 에디터를 그대로 사용하면 돼서 간편하게 개발을 시작할 수 있어요. Android Studio, Xcode 등 새로운 도구를 배울 필요가 없죠. React Native 개발 프레임워크는 메트로(Metro)라는 JavaScript bundler를 사용하는데요. 빠른 핫 리로드를 지원하고 하나의 앱 안에서 수천 개의 모듈을 처리할 수 있어요.

Flutter는 iOS와 Android뿐만 아니라 데스크탑(Windows, MacOS), 웹 브라우저에서 작동하는 앱을 구현하는 크로스 플랫폼 프레임워크에요. Flutter는 많은 개발자에게 생소할 Dart 언어를 사용하는데요. 별도 브릿지가 필요 없다는 점, 따라서 성능이 우수하다는 점 때문에 구글에서 Dart를 선택했다고 해요. 언어 자체는 생소할 수 있지만 C, JavaScript, Java 등 여러 가지 언어의 특성을 가지고 있어서 빠르게 배울 수 있어요.

브릿지가 없다면 Flutter는 어떻게 하나의 코드 베이스로 여러 플랫폼을 지원할까요? Dart는 앱이 빌드되기 전에 코드를 미리 컴파일하는 Ahead-of-time(AOT) 전략을 지원하는데요. 컴파일 타임에 Dart 코드를 네이티브 코드로 컴파일하기 때문에 브릿지가 필요 없이 각 플랫폼과 직접 통신할 수 있어요. 따라서 앱이 시작하는 속도가 빨라요. 그리고 Flutter는 자체적인 위젯을 Canvas 위에 직접 렌더링하기 때문에 여러 플랫폼에 똑같은 UI를 제공할 수 있어요.

Flutter 개발 환경은 어떨까요? Flutter도 안드로이드 스튜디오, Visual Studio Code, IntelliJ와 같이 다양한 코드 에디터를 사용할 수 있어요. 또 Flutter는 다양한 빌드 모드를 지원하는데요. 앱 개발 중에 사용하는 debug 모드에서는 핫 리로드 기능이 있어요. 컴파일을 안 해도 바로 앱에서 UI 변경사항을 확인할 수 있죠.

크로스 플랫폼 트렌드를 살펴볼게요. React Native가 먼저 릴리즈되어서 처음에는 인기가 더 많았지만, 2023년 기준으로 구글 트렌드, Stack Overflow 설문 조사 결과에 따르면 Flutter가 React Native보다 인기는 더 앞서 나가고 있어요. 그만큼 Flutter 커뮤니티나 학습 자료도 늘어나고 있고요.

그러나 우리가 일상에 자주 사용하는 앱에는 React Native로 만든 앱이 많아요. 페이스북, 인스타그램, 마이크로소프트 오피스 등 다양한 대기업이 React Native를 선택했어요. 물론 Flutter도 BMW, Google Pay, 알리바바 등 다양한 기업에 채택됐지만 비교적 포트폴리오가 약하고 시니어 개발자가 부족하다는 의견이 있어요.

토스페이먼츠도 최근 크로스 플랫폼 트렌드에 따라 Flutter, React Native 전용 SDK를 출시했어요. 이제 어떤 플랫폼을 사용하든, 내 서비스의 온라인 결제는 토스페이먼츠 결제위젯으로 완성하세요.

• 결제위젯 React Native SDK
• 결제위젯 Flutter SDK