같은 앱을 Flutter, React Native, Ionic 으로 개발해 봤어요

(medium.com/@fmmagalhaes)

22P by xguru 4달전 | favorite | 댓글 6개

최적의 크로스 플랫폼 모바일 개발 프레임워크를 찾던 중 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보다 원격 디버깅에서 뒤처짐
앱 크기
- 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 개발 능력을 키우는 것이 모바일 및 웹 개발자로서의 역량을 향상시켜 줄 것이라 생각함
프로젝트가 발전함에 따라 코드 구성, 관심사의 분리, 컴포넌트 재사용성 등이 더 명확해질 것임
훌륭한 애플리케이션은 세 프레임워크 중 어느 것으로도 구축할 수 있음
- 프레임워크 선택 시 개발의 즐거움을 간과하지 말아야 함
- 실험 앱 개발을 통해 다양한 프레임워크를 탐험해보기를 권장함

▲

kaistj 4달전 [-]

개인적인 경험으로는 앱 개발 시 중요한 부분이 상태관리와 UI 부분 이었습니다.

RN 은 전역관리는 Redux + Redux-saga, 페이지별로는 React-query 를 사용했고
Flutter 는 Riverpod 를 사용했었습니다.

개인적으로 React 쪽의 상태관리 및 로직의 순서 관리가 조금더 이해가 쉬웠고,
개발하기도 용이했습니다. 웹 베이스의 플랫폼으로 개발이 조금 쉬웠습니다.

Flutter 는 개인적으로 Riverpod 에 대한 이해가 쉽지 않았습니다. (시간 투자가 조금 적기도 했습니다.)
간단한 상태관리는 큰 어려움이 없었지만, 플랫폼의 이해 때문인지,
상태 변경에 대한 처리 및 서버 API 처리 이후의 공통 처리 부분에서 구현의 복잡함? 어려움 이 있었습니다.

UI 쪽은 Flutter 쪽의 위젯이 속성 및 기능이 잘 정의 되어 있어 개발이 수월했습니다.
React 는 antd UI 라이브러리를 사용했는데, 사용 경험은 나쁘지 않았습니다.

React 는 2년전이라 개발 관련 라이브러리가 오래된 경험이고
Flutter 는 최근에 개발하였는데, 투자 시간이 적었습니다.

제 개발 경험도 댓글로 남깁니다~
이런 부분도 있구나... 하는 정도로 생각해주세요~ ^^

답변달기

▲

xguru 4달전 [-]

감사합니다! 다른 분들께도 도움될 것 같아요.

답변달기

▲

bus710 4달전 [-]

제 경우, 플러터는 html/css를 알 필요 없이 다트로 모든 것을 할 수 있어서 좋았습니다.

답변달기