Flutter vs React Native 아직도 뭐 쓸지 고민이야?
비개발자 분들도 쉽게 이해할 수 있도록 작성 했으며, Flutter와 React Native로 둘 다 개발을 해보며 느낀 매우 주관적인 생각이고 가볍게 봐주셨으면 좋겠습니다 :)
Flutter 장점 xD
1) 직관적 (Beginner Friendly)
- Flutter를 사용할 때 가장 좋았던 점은 시스템이 굉장히 직관적이고 코드를 한눈에 보기 편했습니다. 독학을 하는데 큰 어려움 없이 따라갈 수 있었고 완성된 코드를 볼 때도 필요한 것을 찾기 쉬웠습니다. 개인적으로 웹 개발이나 React 다뤄보지 않은 사람이라면 React Native보다 Flutter를 더 쉽게 배울 수 있을 것 같다는 생각이 듭니다
2) 기본 제공되는 툴의 퀄리티가 매우 높음
- Flutter 자체에서 기본 제공되는 툴의 퀄리티가 정말 높습니다. RN을 사용했을 때 외부 라이브러리를 활용하는 경우가 정말 많았던 반면에 Flutter는 공식 Flutter 팀에서 기본으로 제공하는 위젯 (RN에서는 컴포넌트라고 하죠, 앱을 구성하는 부품!) 이 매우 많으며 완성도 또한 매우 높아 외부 라이브러리에 의존하는 빈도가 적었습니다. 아무래도 공식으로 지원 되는 것이다 보니 개발 문서도 찾아보기 편했습니다.
3) 개발 속도가 빠르다
- 개인적으로는 RN보다 Flutter를 사용했을 때 더 빠르게 개발을 할 수 있었던 것 같습니다. 이 부분은 숙련도 차이일 수도 있으나 Flutter는 각 위젯을 꾸미기 위한 스타일링 방식을 in-line 형태로 구현한 것이 가장 크다고 생각합니다. 해당 내용은 아래 React Native에 대해 얘기할 때 더 자세히 다루도록 하겠습니다.
4) 어떤 라이브러리를 쓸지 고민하는 시간이 적다
- 개발을 하며 외부에서 라이브러리를 사용하는 것은 중요한 일이죠. 내가 0부터 1까지 모든 코딩을 하는 것보다 남이 미리 짜놓은 코드를 활용할 수 있다면 매우 효율적일 것입니다. 하지만 일면식도 없는 남의 코드를 가져다 쓴다는 것은 꽤나 리스크가 있는 행위이죠. 그렇기 때문에 누가 개발한 어떤 라이브러리를 활용할지 고민하는 것도 매우 중요합니다.
- Flutter는 외부 라이브러리를 사용할 때 어떤 것을 사용할지 고민하는 시간이 매우 적었습니다. 사실 장점이 될 수도 있고 단점이 될 수도 있지만, 초보 개발자에게는 장점이 될 수 있다고 생각합니다. 우선 이전에도 언급한 것과 같이 Flutter의 기본 툴 자체가 광범위하고 퀄리티가 높으며, 외부 라이브러리 역시 Flutter 팀에서 공식으로 지원하는 라이브러리가 많습니다. Flutter 팀에서 공식으로 지원하는 라이브러리가 아니더라도 특정 기능을 위해 보편적으로 사용되는 라이브러리가 있었습니다. 때문에 어떤 라이브러리를 사용할지 정하기 위해 분석과 고민하는 시간을 아낄 수 있었습니다.
Flutter 단점 :(
1) 아직 국내에서 생소하다
- Flutter의 가장 취약한 부분이며 다른 분들도 공감할 수 있는 단점이라고 생각합니다. 개발이라는 것은 처음에 혼자 시작하더라도 분명 언젠가는 협업이 필요한 시점이 옵니다. 서로 익숙한 프레임워크, 익숙한 언어를 알고 있어야 협업이 가능한데 아직 국내에서는 주로 Flutter보다는 React Native를 다루는 개발자를 찾기 쉬운 것 같습니다. 특히 Flutter를 사용하기 위한 프로그래밍 언어인 Dart도 거의 쓰이지 않는 언어이기 때문에 Flutter만을 위해 하나의 언어를 배워야 한다는 비효율이 존재합니다.
주관적인 생각으로는 위의 단점 외에는 크게 돋보이는 단점은 없다고 생각합니다. 추가적인 단점으로는 최종 빌드 된 어플의 크기가 좀 크다는 것, Dart언어를 배워야한다는 비효율 정도가 있습니다!
React Native 장점 :D
1) React로 웹 개발을 사용해본 사람이라면 추가적으로 배울 것이 거의 없다.
- 저는 프론트 개발을 Flutter(App 개발) -> React Native(App 개발) -> React(Web 개발) 순서로 접해봤습니다. 때문에 처음 React Native를 배우며 생소하고 이해 안되던 부분이 많았습니다. 하지만 웹 개발을 위해 React를 배우다 보니 React Native가 React의 구조를 그대로 가져와 앱 개발을 위해 만들어진 프레임워크라는 것을 피부로 느꼈습니다. React의 숙련도가 높은 웹 개발자가 어플을 만들기 위해서는 Flutter보다 RN을 배우고 사용하는 것이 효율적입니다. 애초에 React Native의 슬로건이 'Learn once, write anywhere' 니까요!
2) 구글에 쳐보면 안 나오는 게 없다
- 개발을 하다 보면 코딩만큼 중요한 것이 필요한 정보를 검색 하는 것입니다. React Native는 Flutter보다 오래 되었고 커뮤니티가 활발하게 이어져 왔습니다. 그러다 보니 RN으로 개발을 하다 직면 하는 문제들은 이미 대부분의 개발자들이 겪어본 문제였고, 이를 해결하기 위한 방법도 정말 많이 공유 되어있습니다. 나 혼자 문제를 해결할 때까지 몇 백자 짜리 코드를 하나하나 읽어보는 것보다 똑같은 문제를 해결한 사람의 해답을 보는 것이 훨씬 빠르고 효율적이기 때문에 인터넷에 RN에 대한 자료가 많다는 것은 매우 큰 장점입니다.
3) JavaScript
"Any application that can be written in JavaScript, will eventually be written in JavaScript.” ㅡ Jeff Atwood, Co-Founder of Stack Overflow
- 개발자들 사이에서는 유명한 말이죠. JavaScript로 개발 가능 한 어플은, 언젠가는 JavaScript로 개발 될 것이다. 그만큼 JavaScript는 널리 사용되는 언어이며 JavaScript만으로 프론트, 백을 구축할 수 있는 활용도 높은 언어입니다. 물론 언어 자체에 결함도 존재하지만, 범용성 높은 JavaSript를 활용한다는 것이 React Native의 장점 중 하나라고 생각합니다.
React Native 단점 T^T
1) CSS...CSS...CSS
CSS 역사로 알아보는 CSS가 어려워진 이유
저는 사실 UI 구현하는 것보다는 효율적인 CSS가 무엇인지 몰라서 늘 불만스러워요…
> 구현은 어떻게든 해서라도 얼추 되겠는데... 그게 좋은 코드같아보이지않아서ㅜㅜ
프롤로그
맞습니다. CSS는 배우기 어렵지 않으며 CSS를 작성하는 것 역시 어렵지 않습니다. 하
https://velog.io/@teo/css-history-1
(위의 글은 CSS 역사에 대해 다루는 글입니다. 너무 재밌게 읽었어서 한번 공유해봅니다.)
- 제가 처음 React, RN 생태계에 발을 처음 들였을 때 가장 고통스럽고 익히기 힘들었던 게 React의 CSS, RN의 StyleSheet 였습니다. RN에서 기능을 구현하기 위한 코딩은 오히려 금방 손에 익었지만 화면을 이쁘게 구성하기 위해 사용되는 CSS문법의 StyleSheet는 아직까지도 손이 잘 가지 않는 것 같습니다. 우선 StyleSheet를 사용할 경우 꾸미고 싶은 각각의 컴포넌트에 이름을 부여 해야 하는데 컴포넌트의 수가 많아질수록 이름을 떠올리기도 쉽지 않고, 문법이 직관적이지 않다는 느낌을 자주 받았습니다. 물론 웹 개발 분야에 오래 몸 담고 있었더라면 바로 적응 했을 것 같았지만, 저는 나중에 Tailwind CSS라는 확장 툴을 사용하여 Flutter와 비슷하게 in-line 형태로 스타일링을 구현하여 사용했습니다. 개인적으로 CSS문법의 스타일링은 시간도 많이 잡아 먹는 느낌이 들었고, 코드를 보기도 더 어려웠던 것 같습니다.
2) Android와 IOS 코딩
- Flutter와 React Native 둘다 하나의 소스코드로 Android, IOS앱을 동시에 개발하는 크로스 플랫폼 개발 프레임워크 입니다. 하지만 Android와 IOS의 작동 방식이 달라서 가끔은 기종에 따라 코딩과 설정을 달리해야 하는 경우가 있습니다. RN의 경우 이런 기종에 따라 코딩을 다르게 해야 한다는 빈도가 Flutter보다 더 잦다는 느낌을 받았습니다. Android폰에서 개발을 완벽하게 해 놓았는데 IOS폰에서 보면 화면이 다르게 보이는 경우가 있습니다. 어떤 경우에서 기종에 따라 다르게 보이는지 알고 있으면 큰 문제가 되지 않지만 처음 RN으로 개발을 했을 때는 기종에 따라 화면이 달라 당황스러웠던 경우가 종종 있었습니다.
3) 정보의 과부화
- 장점에서 언급한 것과 같이 React Native는 Flutter보다 오래 되었고 커뮤니티가 활발하게 이어져 왔습니다. 이는 찾아볼 정보가 많다는 뜻이기도 하지만, 동시에 더 이상 지원되지 않는 기능이나 문법들로 인해 잘못된 정보를 자주 제공하기도 합니다. 초심자 입장에서는 더 이상 사용되지 않는 문법들을 구별하기 어려웠고, 이로 인한 삽질을 자주 했던 것 같습니다.
So What?
저는 Flutter와 React Native중 하나만 골라야한다면 답은 명확하다고 생각합니다.
- 웹개발을 해보며 JS, CSS를 다뤄봤고 부담이 없었다? -> React Native
- 웹개발을 해본적이 없지만 어플을 만들어보고 싶다? -> Flutter
두 프레임워크를 사용하여 완성 된 어플의 성능 차이는 크게 느껴지는 것은 없었고, 개인적으로 개발자 경험(DX)은 Flutter가 React Native보다 월등히 좋게 느껴졌습니다. 사실 위에 서술한 두 프레임워크의 단점들은 충분히 극복 가능하며 미처 서술하지 못한 장단점들도 있으니 둘다 사용해보고 자신에게 잘 맞는 친구를 고르는 것이 가장 좋다고 생각합니다!
P.S. 이런 글을 처음 써봐서 많이 서투를 것 같습니다. 앞으로도 재밌는 프로덕트를 개발하며 느낀 점들을 정리하여 꾸준히 작성하려 노력해보도록 하겠습니다 😂
