개발 기술이 점점 확장되면서, 앱과 웹을 함께 운영하는 회사들이 많아지고 있습니다. 앱과 웹을 동시에 지원하는 서비스뿐만 아니라, 기존에 앱이나 웹 한쪽에서만 제공되던 서비스들도 이제는 더 넓은 사용자층을 확보하기 위해 플랫폼 확장을 시도하는 경우가 많죠.
이럴 때 기업들은 '크로스 플랫폼 도구'를 통해 개발하기도 합니다. 한 번의 개발로 iOS, 안드로이드, 웹까지 모두 구현할 수 있어 시간과 비용을 크게 절감할 수 있는 게 큰 장점이죠. 오늘은 이 크로스 플랫폼에 대해 함께 알아보겠습니다.
📌 목차
- 크로스 플랫폼 도구
- 리액트 네이티브 (React Native)
- 자마린 (Xamarin)
- 마우이 (MAUI)
- 플러터 (Flutter)
- 플러터 공부법
1. 크로스 플랫폼 도구
크로스 플랫폼 도구는 여러 환경에서 동시 개발이 가능한 프레임워크를 말합니다. 단일 코드베이스로 여러 ‘플랫폼’에서 ‘크로스(cross)’하여 동시에 개발할 수 있게 하는 것이죠.
좀 더 자세히 풀어 보자면, 크로스 플랫폼 도구를 이용한다면 안드로이드와 iOS, 윈도우와 맥 OS 등 서로 다른 환경에서 말 그대로 동시에 개발이 가능합니다. 한 번의 개발로 양쪽 환경에서 모두 빌드가 가능한 서비스를 만들 수 있습니다.
그러다 보니 크로스 플랫폼 도구를 이용한 개발은 다양한 장단점을 가지고 있습니다. 무엇보다 각 환경별 개발을 하지 않아도 된다는 것, 그를 통해 시간과 리소스를 절약할 수 있다는 것이 대표적인데요. 크로스 플랫폼 도구에는 어떤 것들이 있을까요?
2. 리액트 네이티브 (React Native)
리액트 네이티브(React Native)는 리액트(React)로 안드로이드, iOS, 웹, UWP 환경에서의 개발을 지원하는 크로스 플랫폼 도구인 오픈 소스 프레임워크입니다. 메타가 개발해 2015년 발표되어 최근까지 계속해서 안정화 버전이 나오고 있습니다.
리액트를 사용하고 있거나 사용해 본 적 있는 개발자라면 큰 어려움 없이 단시간 안에 리액트 네이티브를 사용할 수 있다는 것이 장점입니다. 리액트 네이티브에서 개발을 하는 것은 리액트 기반이기 때문인데요. 자바 스크립트를 사용하기 때문에 사용성도 높습니다.
HTML과 CSS를 사용하지 않고 JavaScript를 읽어와 네이티브 뷰를 조작하는 방식으로 구동합니다. 각 환경에서의 네이티브 코드를 연결하는 브릿지 역할도 해 주는데요.
유연성이 높지만 이 브릿지가 필요하기 때문에 애니메이션 등 성능적 부분이 필요한 때 원하는 만큼의 성능을 발휘하게 하기가 어렵다는 것이 단점으로 꼽힙니다. 더불어 자바 스크립트와 네이티브 측면의 디버깅을 각각 동시에 처리해야 하기 때문에 이 역시 사용의 불편함을 야기할 수 있죠.
리액트 네이티브로 만든 앱
- 페이스북과 인스타그램
리액트 네이티브를 만든 곳이 메타인 만큼, 페이스북과 인스타그램은 리액트 네이티브 기술을 가장 많이 그리고 잘 이용한 서비스 중 하나입니다. 두 앱 모두 현재 스마트폰 인구의 대부분이 사용중이라 해도 과언이 아닐 엄청난 회원 수를 가지고 있는 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를 ‘그려오는’ 것이기 때문이죠. 그러다 보니 특히 화면 동작에서는 각 환경별 네이티브 방식과 차이가 거의 없을 정도로 실효성이 좋습니다.
이러한 이유들로 점유율 42% 이상을 기록하며 크로스 플랫폼 도구 중에서도 우뚝 올라선 플러터는 현재 회사와 팀의 볼륨과 상관없이 자유자재로 쓰이고 있는데요. 차량용 인터페이스까지 개발이 가능할 뿐만 아니라 UI나 코드의 수정 사항이 빌드 지연 시간 없이 자동으로 업데이트되어 수정사항 반영이 매우 빠르다는 점 역시 그 이유 중 하나입니다.
플러터에 대해 좀 더 자세히 알아보고 싶으시다면, 플러터만 자세히 다룬 글을 읽어 보시기를 추천합니다.
플러터로 만든 앱
- 지식인
궁금한 것이 생기면 무엇이든 물어볼 수 있는 곳, 네이버의 지식인 앱은 플러터로 만들어졌습니다. 국내 대형 엔터프라이즈 서비스에서는 최초로 플러터가 적용된 사례인데요.
네이버의 개발자 지식공유 블로그 네이버D2에서는 플러터를 이용해 지식인 앱을 개발한 과정과 플러터를 사용하기로 결정한 것에 대한 과정, 그 이유들이 수록되어 있습니다.
- 라인(LINE) : 데마에칸(出前館)
네이버의 채팅 서비스 앱 라인, 모두 알고 계실 것 같은데요. 라인은 카카오톡과 유사한 형태의 무료 채팅 앱으로, 일본에서 크게 성공해 일본 내 국민 채팅 서비스로 자리잡았죠. 그러던 중 2020년 일본의 1위 배달 앱인 ‘데마에칸’을 인수했는데요. 라인은 데마에칸을 본격적으로 리뉴얼하며 플러터를 이용했습니다.
- 번개장터
번개장터는 네이버의 카페에서 출발해 이제는 IT 기업으로 성장한 중고 거래 플랫폼입니다. 네이버 카페와 앱 모두 이용 가능하며, 번개장터 앱에서는 사기 방지 독자적 결제 시스템인 ‘번개페이’ 도 있죠. 플러터로 개발된 대표적인 국내 앱 중 하나입니다.
6. 플러터 개발자 되는 법
크로스 플랫폼은 다양한 장점으로 개발 시장에서 꾸준히 사용되고 있습니다. 특히 플러터는 규모에 상관없이 서비스 개발에서 널리 채택되고 있으며, 점유율 42%로 실사용률 높은 프레임워크입니다.
이에 따라 플러터 개발자에 대한 수요도 증가하고 있습니다. 기회를 놓치지 않고 플러터 개발자가 되고 싶다면, 내일배움캠프 플러터 과정에 참여해 보세요.
1) 확실한 커리큘럼
플러터의 언어인 다트(Dart)는 학습 곡선이 완만하여 언어의 이해에 들이는 시간을 줄일 수 있다는 장점이 있는데요. 내일배움캠프의 플러터 트랙은 이러한 장점들을 최대한 활용한 커리큘럼으로 구성되어 있습니다.
본격적인 캠프 시작 전 사전캠프를 통해 미리 맛보기 강의를 제공받을 수 있고, 이를 통해 정규 과정이 시작하면 바로 기본기를 다지고 입문을 시작할 수 있도록 합니다. 개발에서 가장 중요한 기본기, 짧은 기간 안에 확실하게 습득해 보세요.
2) 앱 출시부터 디자이너와의 협업을 경험하는 팀 프로젝트
앱 출시와 프로젝트 경험이 중요한 이유는 서비스 운영 및 개선 경험이 취업의 핵심이기 때문입니다. 그래서 내일배움캠프 Flutter 트랙은 팀 프로젝트를 다회 경험할 수 있도록 구성되어 있습니다.
무엇보다 UIUX 디자이너와의 협업이 가능합니다. 최종 프로젝트 진행시, 신청자에 한해 프로젝트에 적합한 디자이너를 배정해 드립니다. 앱 개발 수강생들에게만 드리는 한정 혜택으로, 개발자 직무 취준생들끼리만 하는 프로젝트가 아니라 타 직군과의 커뮤니케이션 역량도 기를 수 있는 기회가 됩니다.
3) 인턴십 기회 제공
내일배움캠프에서 배운 이론과 프로젝트를 바탕으로 실제 회사에서 실무 경험을 쌓는 인턴십 프로그램에 참여할 수 있습니다. 또한, 인턴 업무들을 이력서에 잘 녹일 수 있도록 전문 커리어 매니저의 지속적인 관리를 받을 수 있습니다.
IT 취업에 한계란 없다, 내일배움캠프에서 여러분의 무한한 가능성을 확인하세요
비전공자, 늦은 나이, 경험 부족···, 도전을 머뭇거리게 하는 단어들은 너무 많습니다. 대부분은 이 단어들의 무게에 짓눌려 결국 시작조차 못 하고 포기하죠.
내일배움캠프는 IT 취업에서 여러분의 발목을 잡는 단어는 아무것도 없다고 믿었습니다. 그리고 내일배움캠프에서 탄생한 수천 명의 IT 취업생으로 증명했죠.
내일배움캠프가 여러분의 가능성에 대한 ‘의심’을 ‘확신’으로 바꿔드리겠습니다. 체계적이고 꼼꼼한 관리, 고도화된 커리큘럼, 그리고 매니저와 튜터의 적극적인 지원을 믿고, 새로운 도전을 시작해 보세요.
취업 꿀정보 무료 콘텐츠: 실제 기업별 합격자 이력서 무료 공유 이벤트
내가 원하는 미래로의 길, 쉽지 않습니다. 그래서 내일배움캠프는 IT 취업을 위해 달리고 계신 분들에게 도움이 될 무료 콘텐츠를 준비했어요.
직무별 면접 예상 질문 100선과 취업 트렌드 분석, 특강까지 모두 준비했어요. 특히 그 중에서도 많은 분들이 궁금해 하실 IT 기업별, 직무별 실제 합격자의 이력서도 완전 무료로 공유합니다. 지금 바로 확인하고 나만의 큰일에 한 걸음 더 다가가세요.
Share article
Subscribe to our newsletter
