크로스 플랫폼이란? : 장단점과 개념 총정리

개발 기술이 점점 고도화되며, 앱과 웹을 함께 운용하는 회사들도 많아지고 있습니다. 앱과 웹 양방향 서비스는 물론, 기존에는 한쪽 환경에서만 기능하던 애플리케이션들도 환경 범위를 넓히기 위해 시도하는 경우가 많죠.

그럴 때 기업들은 종종 크로스 플랫폼 도구를 통해 개발하기도 합니다. 한 번의 개발로 여러 환경에서의 구현이 가능한 만큼, 리소스 절약과 빠른 속도가 장점이죠. 오늘은 이 ‘크로스 플랫폼 도구’에 대해서 함께 이야기해요.

📌 목차

크로스 플랫폼 도구

리액트 네이티브 (React Native)

자마린 (Xamarin)

마우이 (MAUI)

플러터 (Flutter)

1. 크로스 플랫폼 도구

크로스 플랫폼 도구는 여러 환경에서 동시 개발이 가능한 프레임워크를 말합니다. 단일 코드베이스로 여러 ‘플랫폼’에서 ‘크로스(cross)’하여 동시에 개발할 수 있게 하는 것이죠.

좀 더 자세히 풀어 보자면, 크로스 플랫폼 도구를 이용한다면 안드로이드와 iOS, 윈도우와 맥 OS 등 서로 다른 환경에서 말 그대로 동시에 개발이 가능합니다. 한 번의 개발로 양쪽 환경에서 모두 빌드가 가능한 서비스를 만들 수 있습니다.

그러다 보니 크로스 플랫폼 도구를 이용한 개발은 다양한 장단점을 가지고 있습니다. 무엇보다 각 환경별 개발을 하지 않아도 된다는 것, 그를 통해 시간과 리소스를 절약할 수 있다는 것이 대표적인데요. 크로스 플랫폼 도구에는 어떤 것들이 있을까요?

2. 리액트 네이티브 (React Native)

리액트 네이티브(React Native)는 리액트(React)로 안드로이드, iOS, 웹, UWP 환경에서의 개발을 지원하는 크로스 플랫폼 도구인 오픈 소스 프레임워크입니다. 메타가 개발해 2015년 발표되어 최근까지 계속해서 안정화 버전이 나오고 있습니다.

리액트를 사용하고 있거나 사용해 본 적 있는 개발자라면 큰 어려움 없이 단시간 안에 리액트 네이티브를 사용할 수 있다는 것이 장점입니다. 리액트 네이티브에서 개발을 하는 것은 리액트 기반이기 때문인데요. 자바 스크립트를 사용하기 때문에 사용성도 높습니다.

HTML과 CSS를 사용하지 않고 JavaScript를 읽어와 네이티브 뷰를 조작하는 방식으로 구동합니다. 각 환경에서의 네이티브 코드를 연결하는 브릿지 역할도 해 주는데요.

유연성이 높지만 이 브릿지가 필요하기 때문에 애니메이션 등 성능적 부분이 필요한 때 원하는 만큼의 성능을 발휘하게 하기가 어렵다는 것이 단점으로 꼽힙니다. 더불어 자바 스크립트와 네이티브 측면의 디버깅을 각각 동시에 처리해야 하기 때문에 이 역시 사용의 불편함을 야기할 수 있죠.

출처 : What’s Revolutionary about Flutter

리액트 네이티브로 만든 앱

페이스북과 인스타그램

리액트 네이티브를 만든 곳이 메타인 만큼, 페이스북과 인스타그램은 리액트 네이티브 기술을 가장 많이 그리고 잘 이용한 서비스 중 하나입니다. 두 앱 모두 현재 스마트폰 인구의 대부분이 사용중이라 해도 과언이 아닐 엄청난 회원 수를 가지고 있는 SNS죠.

디스코드

게이머들의 커뮤니케이션 앱을 꼽을 때 디스코드가 빠지는 일은 좀처럼 없습니다. 보이스 채팅, 화상 채팅, 게임과의 연동 보이스 채팅 등 꼭 게임이 아닐지라도 다양한 측면으로 사용 가능한 다중 채팅 앱인데요. 디스코드는 리액트 네이티브 기반으로 만들어졌습니다. 디스코드 외에 또 다른 유명한 글로벌 다중 채팅 앱 중 하나인 스카이프 역시 리액트 네이티브로 만들어졌어요.

3. 자마린 (Xamarin)

자마린(Xamarin)은 마이크로소프트가 소유하고 있는 안드로이드, iOS, 맥(MacOS)와 윈도우, TVOS, 워치OS(Watch OS)를 동시에 개발할 수 있는 오픈 소스 크로스 플랫폼이었습니다. .NET(닷넷)과 C#(씨샵)을 이용합니다.

Visual Studio로 앱을 구성할 수 있고, 각 요소들을 공유할 수 있죠. Xamarin.Essentials를 통해 네이티브 디바이스들간의 상호 API 연결을 지원합니다. 마이크로소프트가 직접 개발했고 개선하고 있기에 꾸준히 유입이 있는 도구였어요.

한동안 리액트 네이티브, 자마린, 플러터 이 셋이 크로스 플랫폼 도구의 3대 대명사였지만, 2024년 5월 마이크로소프트의 발표로 자마린에 대한 지원이 공식적으로 종료되고 이제 ‘마우이(MAUI)’ 라는 도구로 대체되는데요. 마우이는 어떤 도구일지 바로 설명드릴게요. 그 전에, 자마린으로 만들어진 앱은 어떤 것들이 있었는지 한 번 살펴볼까요?

자마린으로 만든 앱

슈퍼자이언트 게임즈 (SUPERGIANT GAMES)

슈퍼자이언트 게임즈는 PC와 콘솔에서 플레이 가능한 게임을 만드는 회사입니다. iOS 플랫폼으로의 확장을 위해 새로운 개발 도구를 찾고 있을 때 자마린을 이용해 개발했죠. 그 뒤 자마린을 이용해 개발한 iOS 앱으로 앱스토어에 안착했고, 여전히 미국에서 사랑받는 게임사로 자리하고 있습니다.

스토리오 (STORYO)

스토리오는 글로벌 비디오 편집 프로그램 앱입니다. 단순하고 이해하기 쉬운 기능들로 누구나 비디오 편집에 벽을 느끼지 않고 시도하게 할 수 있죠. 사진으로 동영상을 만드는 것을 기본 기능으로 삼고 있습니다. 170개국 이상 나라에서 사용되고 있습니다.

4. .NET 마우이 (.NET MAUI)

마우이(MAUI)는 마이크로소프트가 자마린의 후발 주자로 개발한 크로스 플랫폼 도구입니다. 마우이는 멀티 플랫폼 앱 UI(Multi-platform App UI)를 뜻하며, 윈도우, 맥OS, iOS, 안드로이드 동시 개발을 지원합니다.

자마린과 전체적인 방향성이 비슷하지만, 좀 더 발전되고 개선되었습니다. 그 대표적인 요소는 바로 환경 플랫폼별 소스 코드를 추가하거나 수정할 수 있는 점이죠. 단일 코드베이스 아래에서 다양한 코드 전개와 레이아웃 구현을 하는 것이 목적인 만큼 더욱 사용자의 편의성을 높이려 한 것이 눈에 띕니다.

마이크로소프트는 자마린에서 마우이로의 업데이트를 지원합니다. 자마린에서 마우이로 애플리케이션 변환하기 위해서는 코드를 다시 짜거나 서비스를 다시 구현할 필요 없이 업데이트만 하면 됩니다. 마우이가 앞으로 어떤 개발적 족적을 찍어낼지 기대되네요.

5. 플러터 (Flutter)

플러터는 구글에서 개발한 크로스 플랫폼 도구 중 가장 많은 다중 환경에서의 동시 개발이 가능한 프레임워크로, 안드로이드, iOS, 웹, Windows, MacOS, Linux 6가지 환경에서의 개발이 가능합니다.

구글의 오픈 소스 프로그래밍 언어 Dart를 이용합니다. Dart에 대한 학습이 필요하다는 점과 OS에서 제공하는 API를 크로스 플랫폼인 플러터에서 적용해 주기 전까지는 사용하기 어렵다는 점이 단점으로 뽑히기도 합니다.

하지만 Dart는 멀티 플랫폼에서 동작하도록 구글이 직접 개발한 언어로, UI 구현에 매우 큰 강점을 가지고 있습니다. UI 최적화에 뛰어난 위젯 형태의 시스템을 기반으로 하기 때문인데요.

위젯은 플러터에서의 UI 요소 구성 단위로, 레이아웃, 텍스트, 버튼, 애니메이션, 형태 등을 위젯을 통해서 만들 수 있습니다. 이렇게 위젯을 통해서 UI를 만들 수 있기 때문에, 퍼즐을 맞추듯이 자유로운 커스텀이 가능합니다. 한 번 만들어 둔 위젯을 에셋처럼 사용하여 다양한 상황에서 반복 사용할 수 있어 사용성이 높고 유지 보수가 용이하죠.

아까 리액트 네이티브에 대해 설명하며, 타 환경 사이에서 브릿지를 만든다고 했던 것 기억하시나요? 플러터는 이러한 연결구가 필요치 않습니다. 말씀드린 것처럼 플러터 위젯 자체를 사용하기 때문에 네이티브 위젯(에셋)을 사용할 필요가 없으며, UI를 ‘그려오는’ 것이기 때문이죠. 그러다 보니 특히 화면 동작에서는 각 환경별 네이티브 방식과 차이가 거의 없을 정도로 실효성이 좋습니다.

출처 : What’s Revolutionary about Flutter

이러한 이유들로 점유율 42% 이상을 기록하며 크로스 플랫폼 도구 중에서도 우뚝 올라선 플러터는 현재 회사와 팀의 볼륨과 상관없이 자유자재로 쓰이고 있는데요. 차량용 인터페이스까지 개발이 가능할 뿐만 아니라 UI나 코드의 수정 사항이 빌드 지연 시간 없이 자동으로 업데이트되어 수정사항 반영이 매우 빠르다는 점 역시 그 이유 중 하나입니다.

플러터에 대해 좀 더 자세히 알아보고 싶으시다면, 플러터만 자세히 살펴본 글을 읽어 보시기를 추천합니다.

▶︎ Flutter(플러터) : 앱 개발의 범용성 최강 프레임워크, 플러터 알아보기

플러터로 만든 앱

지식인

궁금한 것이 생기면 무엇이든 물어볼 수 있는 곳, 네이버의 지식인 앱은 플러터로 만들어졌습니다. 국내 대형 엔터프라이즈 서비스에서는 최초로 플러터가 적용된 사례인데요.

네이버의 개발자 지식공유 블로그 네이버D2에서는 플러터를 이용해 지식인 앱을 개발한 과정과 플러터를 사용하기로 결정한 것에 대한 과정, 그 이유들이 수록되어 있습니다.

▶︎ 지식iN 앱을 Flutter로 개발하는 이유

라인(LINE) : 데마에칸(出前館)

네이버의 채팅 서비스 앱 라인, 모두 알고 계실 것 같은데요. 라인은 카카오톡과 유사한 형태의 무료 채팅 앱으로, 일본에서 크게 성공해 일본 내 국민 채팅 서비스로 자리잡았죠. 그러던 중 2020년 일본의 1위 배달 앱인 ‘데마에칸’을 인수했는데요. 라인은 데마에칸을 본격적으로 리뉴얼하며 플러터를 이용했습니다.

번개장터

번개장터는 네이버의 카페에서 출발해 이제는 IT 기업으로 성장한 중고 거래 플랫폼입니다. 네이버 카페와 앱 모두 이용 가능하며, 번개장터 앱에서는 사기 방지 독자적 결제 시스템인 ‘번개페이’ 도 있죠. 플러터로 개발된 대표적인 국내 앱 중 하나입니다.

크로스 플랫폼 도구는 다양한 장점들로 인해 꾸준한 수요 증명과 사용도 상승이 이어지고 있습니다. 그 중에서도 플러터는 현재 다양한 도메인, 다양한 볼륨의 서비스에서 폭넓게 사용되고 있는 도구죠. 가장 폭넓은 지원 환경 다양성과 편의성이 그를 뒷받침합니다. 해외에서부터 플러터 개발자에 대한 수요도 증가하고 있는데요.

웹과 앱을 자유자재로 개발하는 양방향 개발자가 되고 싶다면, 지금 스파르타 내일배움캠프에서 플러터 개발자가 되는 여정에 함께하세요.

미래의 변곡점에서 능력을 발휘할 수 있는 역량을 갖추는 것은 모든 개발자가 꿈꾸는 일이니까요. 누구나 큰일 낼 수 있습니다.