같은 앱을 Flutter, React Native, Ionic 으로 개발해 봤어요
(medium.com/@fmmagalhaes)- 최적의 크로스 플랫폼 모바일 개발 프레임워크를 찾던 중 Flutter, React Native, Ionic 이 눈에 들어옴
- 세 프레임워크 모두 단일 코드베이스로 여러 플랫폼에서 좋은 성능을 약속함
- API를 활용해 기본 데이터를 화면에 표시하는 모바일 앱을 세 가지 버전으로 제작해 비교해봄
- 앱의 요구사항: 화면 로딩 시 국가 정보 표시, 로딩 스피너, 새로운 랜덤 국가를 가져오는 버튼, 국가 목록은 한 번만 가져오기
Flutter
- Flutter는 2017년 구글이 만든 오픈 소스 프레임워크로, 단일 코드베이스에서 여러 플랫폼용 네이티브 애플리케이션을 만듦. Dart 언어 기반
- Flutter 문서와 튜토리얼을 한 시간 동안 학습 후 개발 시작
- 개발 환경 설정과 에뮬레이터 실행이 매끄러웠음
- 4시간 만에 기본 기능을 갖춘 앱을 제작함
- Android Studio의 제안 기능이 개발에 큰 도움이 됨
- Hot Reload 기능으로 변경사항을 즉시 확인할 수 있어 개발 시간을 단축시켜 줌
- 그러나 "모든 것이 위젯"이라는 개념 때문에 중첩이 많고 스타일과 요소가 혼재되어 있어 직관적이지 않음
React Native
- 메타가 2015년에 만든 오픈 소스 자바스크립트 프레임워크로, 네이티브 안드로이드 및 iOS 애플리케이션을 구축할 수 있음
- React 라이브러리 사용 경험이 있었고, VS Code 설치가 이미 완료된 상태였음
- 개발 환경 설정 과정이 복잡/혼란스러웠음 (Expo Go와 React Native CLI의 차이점 이해 필요)
- 2.5시간 만에 앱을 완성했으나 이미지 표시 문제 해결에는 어려움이 있었음
- React의 컴포넌트 기반 아키텍처 덕분에 코드가 간결하고 모듈화됨
- JSX를 사용하여 컴포넌트의 UI를 HTML과 유사한 코드로 작성할 수 있음
Ionic
- Ionic은 2012년에 만들어진 오픈 소스 모바일 UI 툴킷으로, 단일 코드베이스에서 현대적이고 고품질의 크로스 플랫폼 모바일 앱을 구축
- 리액트, Vue, 앵귤러로 개발 가능
- 풍부한 UI 컴포넌트와 매력적인 사용자 인터페이스 제공
- Ionic 동영상과 가이드를 30분간 학습 후 개발 시작
- Angular 버전으로 앱을 개발했고, 익숙한 개발 생태계 덕분에 빠르게 개발할 수 있었음
- 초기 설정 과정에서 생성된 많은 JSON 및 TypeScript 구성 파일이 다소 부담스러웠음
- 2시간 만에 앱을 완성함
- UI 구현이 쉬웠으며 문서화가 잘 되어 있음
- HTML 템플릿을 사용하여 UI와 로직을 분리할 수 있음
- Spinner와 Floating Action Button과 같은 UI 컴포넌트 덕분에 UI 구현이 용이함
비교: Flutter, React Native, Ionic
-
코드 스타일 및 언어
- 자바스크립트 기반 프레임워크들이 코드 가독성과 단순성에서 우세함
- Flutter의 중첩된 코드 스타일은 다소 혼란스럽고 읽기 어려움
- React와 Angular 템플릿 중 어느 것을 선호할지는 개인 취향에 따름
-
생태계
- 2024년 4월 기준, 미국에서 설치된 상위 500개 앱 중 12.57%가 React Native로, 5.24%가 Flutter로, 0.52%가 Ionic으로 제작됨
- React Native는 많은 자유도를 제공하지만 설정과 도구 사용에 혼란을 초래할 수 있음
- Flutter는 채택률이 증가 중이며, GitHub 공개 저장소 수가 많음
-
도구
-
Hot Reload
- 브라우저에서 세 프레임워크 모두 코드 변경 시 빠르게 앱을 재로드함
- 안드로이드 기기나 시뮬레이터에서 Flutter의 Hot Reload가 가장 빠름
-
원격 디버깅
- Flutter DevTools가 직관적이며 다양한 기능을 제공함
- Ionic은 Chrome Developer Tools와 유사한 인터페이스로 디버깅이 용이함
- React Native는 React DevTools를 제공하지만 Flutter와 Ionic보다 원격 디버깅에서 뒤처짐
-
Hot Reload
-
앱 크기
- Ionic: 3.2MB, Flutter: 18.1MB, React Native: 25.2MB
- 설치 후 차지하는 용량은 각각 9.61MB, 34.66MB, 55.47MB임
-
사용자 경험
- Flutter와 Ionic은 플랫폼에 맞는 UI 컴포넌트를 제공해 일관된 사용자 경험을 보장함
- React Native는 추가 라이브러리에 의존해야 함
-
성능
- Flutter는 네이티브 코드로 컴파일되어 React Native보다 빠를 것으로 예상됨
- Ionic은 웹뷰에서 실행되므로 성능이 다소 느릴 수 있음
결론
- Flutter의 코드 스타일에 대해 더 파고 들고 싶고, 디버깅의 판도를 바꿀 수 있는 Hot Reload 기능은 매력적
- 그럼에도 불구하고 기존의 웹 개발 지식(TypeScript, HTML, CSS)을 모바일 앱 개발에 활용할 수 있는 Ionic에 더 끌림
- Ionic 개발 능력을 키우는 것이 모바일 및 웹 개발자로서의 역량을 향상시켜 줄 것이라 생각함
- 프로젝트가 발전함에 따라 코드 구성, 관심사의 분리, 컴포넌트 재사용성 등이 더 명확해질 것임
- 훌륭한 애플리케이션은 세 프레임워크 중 어느 것으로도 구축할 수 있음
- 프레임워크 선택 시 개발의 즐거움을 간과하지 말아야 함
- 실험 앱 개발을 통해 다양한 프레임워크를 탐험해보기를 권장함
native ui 를 사용하는 유일한 크로스플랫폼 라이브러리라 포기하기 힘들죠…
대안 있으면 바로 갈아타고 싶을 정도지만 본문의 flutter 도, ionic 도 native ui를 선택하지 않은걸 보면 미래는 없는듯합니다.
아무래도 크로스플랫폼 자체가 마이너하다보니 관련 라이브러리 개발이 늦거나 부족한데요.
React-Native는 React 생태계를 일부 공유하는 것에서 강점이 있는 것 같습니다.
2년 전에 개발할 때보다 최근에 RN 개발하면서 tailwind나, ReactQuery, TRPC 등 같은 React에서 활발히 개발/사용되는 라이브러리를 사용해서 갈수록 RN 생산성이 높아졌던 기억이 있습니다.
개인적인 경험으로는 앱 개발 시 중요한 부분이 상태관리와 UI 부분 이었습니다.
RN 은 전역관리는 Redux + Redux-saga, 페이지별로는 React-query 를 사용했고
Flutter 는 Riverpod 를 사용했었습니다.
개인적으로 React 쪽의 상태관리 및 로직의 순서 관리가 조금더 이해가 쉬웠고,
개발하기도 용이했습니다. 웹 베이스의 플랫폼으로 개발이 조금 쉬웠습니다.
Flutter 는 개인적으로 Riverpod 에 대한 이해가 쉽지 않았습니다. (시간 투자가 조금 적기도 했습니다.)
간단한 상태관리는 큰 어려움이 없었지만, 플랫폼의 이해 때문인지,
상태 변경에 대한 처리 및 서버 API 처리 이후의 공통 처리 부분에서 구현의 복잡함? 어려움 이 있었습니다.
UI 쪽은 Flutter 쪽의 위젯이 속성 및 기능이 잘 정의 되어 있어 개발이 수월했습니다.
React 는 antd UI 라이브러리를 사용했는데, 사용 경험은 나쁘지 않았습니다.
React 는 2년전이라 개발 관련 라이브러리가 오래된 경험이고
Flutter 는 최근에 개발하였는데, 투자 시간이 적었습니다.
제 개발 경험도 댓글로 남깁니다~
이런 부분도 있구나... 하는 정도로 생각해주세요~ ^^