***

title: 크로스 플랫폼
description: 크로스 플랫폼 앱은 하나의 소스 코드로 Android, iOS에서 똑같이 작동하는 앱을 뜻하는데요. 대표적으로 React Native, Flutter가 있어요.
keyword: 크로스 플랫폼, 앱, React Native, Flutter
------------------------------------------

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

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

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

![크로스 플랫폼 비교](https://static.tosspayments.com/docs/glossary/cross-platform-1.png#3004x1312)

## React Native

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를 사용하는데요. 빠른 핫 리로드를 지원하고 하나의 앱 안에서 수천 개의 모듈을 처리할 수 있어요.

![RN](https://static.tosspayments.com/docs/glossary/cross-platform-2.png#2940x1442)

## Flutter

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는 다양한 [빌드 모드](https://docs.flutter.dev/testing/build-modes)를 지원하는데요. 앱 개발 중에 사용하는 debug 모드에서는 핫 리로드 기능이 있어요. 컴파일을 안 해도 바로 앱에서 UI 변경사항을 확인할 수 있죠.

## 2023 크로스 플랫폼 트렌드

크로스 플랫폼 트렌드를 살펴볼게요. React Native가 먼저 릴리즈되어서 처음에는 인기가 더 많았지만, 2023년 기준으로 구글 트렌드, [Stack Overflow 설문 조사](https://survey.stackoverflow.co/2023/#section-most-popular-technologies-other-frameworks-and-libraries) 결과에 따르면 Flutter가 React Native보다 인기는 더 앞서 나가고 있어요. 그만큼 Flutter 커뮤니티나 학습 자료도 늘어나고 있고요.

![크로스 플랫폼 트렌드](https://static.tosspayments.com/docs/glossary/cross-platform-3.png#3000x1448)

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

## 토스페이먼츠 결제위젯 SDK

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

* [결제 React Native SDK](/sdk/widget-rn)
* [결제 Flutter SDK](/sdk/widget-flutter)