사내에서 ReactNative를 도입하면서 Android 개발자로써, 겪은 문제점과 의사결정의 과정들입니다.
- 왜 크로스플랫폼을 도입했는지
- 어떻게 React Native를 기존 앱에 통합할 수 있는지
- 기존에 문제점들이 해결되었는지
에 대해서 써보려고 합니다.
- 왜 크로스플랫폼을 도입했는지
네이티브 앱(AOS IOS)를 개발하다 보면 늘 문제되는 상황이 생깁니다.
1. 예상하지 못한 오류가 있을 때 핫픽스를 올리는 경우가 생기면 어떻게하지?
2. 각 OS마다 다르게 만들 필요가 있나? 그냥 하나의 크로스플랫폼으로 하면 되지 않나? 혹은 웹뷰를 쓰면 안되나?
와 같은 고민들이 있습니다.
1. 예상하지 못한 오류가 있을 때 핫픽스를 올리는 경우가 생기면 어떻게하지?
개발자가 잘 하면 됩니다. 오류없이 만드는게 개발자의 역할이라고 생각하고 최대한 오류가 나도 대응하기 쉬운 방식으로 개발을 하는 것이 가장 옳은 방법입니다.
다만, 시간과 인력이 부족한 상황에서 빠르게 개발/배포 주기를 가져가다 보면 문제가 생길 수 밖에 없습니다.
이런 제한된 시간과 인력 부족의 상황에서, 개발자 개인에 노력에 기대는 방식은 옳은 방법이라고 생각하지 않습니다.
문제되는 상황을 시스템적으로 해결하지 못하면 문제는 결국에는 반복될 뿐입니다.
근본적인 문제를 해결해야 합니다.
2. 각 OS마다 다르게 만들 필요가 있나? 그냥 하나의 크로스플랫폼으로 하면 되지 않나? 혹은 웹뷰를 쓰면 안되나?
웹뷰로 하는 방법도 있습니다. 다만, 이 과정에서 네이티브처럼 성능을 가져가야 하는 요청사항이 있을 때 여러 테크닉이 요구됩니다.
아래의 당근 발표에서 볼 수 있듯이 다양한 기술튜닝 과정들이 있고, 이 과정들 또한 개발자의 시간이죠.
모든 의사결정은 시간과 비용을 고려해야하며, 시간과 인력이 제한된 상황에서는 생각하는 옵션에 넣지 않았습니다.
https://www.youtube.com/watch?v=4UD4EB00AME
- 어떻게 React Native를 기존 앱에 통합할 수 있는지
그렇다면 크로스플랫폼(React Native)는 어떨까요?
React Native에서 기존 앱에 통합하는 방법이 있습니다.
https://reactnative.dev/docs/integration-with-existing-apps
Integration with Existing Apps · React Native
React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc
reactnative.dev
공식문서에서 볼 수 있듯이 기존에 동작하고 있는 AOS IOS앱에 react native로 만들어진 feature를 통합하는 방식입니다.
아래와 같이 HelloAndroid로 네이티브로 만들어진 앱에서 React Native feature를 만들어서 실행한 결과입니다.
방법은 공식 문서에 나와있는 것 처럼 생각보다 간단합니다.
1. android root디렉토리에 package.json을 설정하고 node moudle과 연결해준 다음
2. build된 bundle파일을 런타임에 띄워주는 방식입니다.
ReactNative에서 가장 큰 장점 중 하나가 CodePush죠.
그런데 리액트 네이티브 개발에 대해서 찾아보신 분들은 코드푸시 종료된다던데? 라고 하면서 어떻게하지? 라고 생각해보셨을 것입니다.
관련 대안으로 hot-updater를 사용하는 방법도 있습니다. 한국인 개발자분이 만들어놓으신거 같더라구요.
https://github.com/gronxb/hot-updater
GitHub - gronxb/hot-updater: A self-hostable OTA update solution for React Native (Alternative to CodePush)
A self-hostable OTA update solution for React Native (Alternative to CodePush) - gronxb/hot-updater
github.com
그런데 원리는 결국 bundle파일을 다운받고, 바꿔주는 것이기 때문에, 그냥 자체적으로 CDN서버를 구축해서 runtime에 동적으로 bundle파일을 바꿔주는 형태로 구현하면 됩니다.
(저희팀에서는 라이브러리를 사용하지 않고 자체적으로 구현했습니다. 라이브러리를 사용하는 순간 라이브러리에 종속되어서 마음대로 커스텀을 하기 번거로운 경우가 생길 수 있기 때문에, 저는 라이브러리 사용을 선호하지 않습니다.)
그렇다면 react native로 해서 기존에 겪고 있는 문제들이 해결되었나?
수많은 장점들이 있었습니다.
- 크로스플랫폼으로 개발 효율화
크로스플랫폼으로 AOS IOS를 한꺼번에 개발할 수 있기 때문에 당연히 개발 속도는 빨라졌습니다.
그리고 네이티브 앱을 개발하면서 느낀 "빌드 -> 해당 화면으로 이동 -> 디버그" 의 과정이 React Native hot reloading을 통해서 빠르게 해결되었습니다.
feature들을 각각 하나의 프로젝트로 쪼개서 여러개의 bundle로 관리하기 때문에 Micro Fronted 형태에서는 AI가 훨씬 작업을 잘 해줍니다. 체감상 네이티브 개발의 x4 정도 되는 것으로 느꼈습니다.(크로스플랫폼 x2, AI 작업 효율화,hot reload x2)
- 코드푸시로 인한 실시간 업데이트
네이티브 개발자가 코드푸시를 한번 써보면 신세계죠.
앱 업데이트 없이 그냥 바로 프로덕션 앱을 수정할 수 있다고? 에서 느끼는 감정이 많습니다.
QA또한 부담을 조금 덜 가지고 갈 수 있습니다.
그러나 수많은 단점들도 나왔습니다.
- 기존 라이브러리와 충돌
AOS IOS에서 사용하고 있는 기존 라이브러리와 충돌로 인해 별의별 문제점이 다 나왔습니다. 특정 네이티브 라이브러리에서 사용하고 있는 버전에서 react native 에서 사용하는 라이브러리와 충돌로 인해 라이브러리를 못 쓰는 작업이라던지, AOS에서는 되는데 IOS는 되지 않는 이상한 이슈들이 발생했습니다.
- 알 수 없는 이상한 오류들
갑자기 특정 IOS버전에서는 bottomSheet 를 띄우고 나서 view가 dismissed되는 현상이 발생했습니다. 원인을 파악하는데 며칠 사용했던 것으로 기억합니다.
- 그 외에 일반적이지 않은 오류사항들
구글링/AI를 사용해도 해결 방법이 나오지 않는 이상한 이슈들이 있었습니다.
실제 앱이 빌드되고 어떻게 javascript module과 native앱이 어떤 방식으로 통신하고 동작하는지 Low Level 까지 알 지 못하면 해결할 수 없는 이슈들이 있었습니다. 이 과정에서 오히려 native앱에 대한 지식이 깊어진 것 같습니다.
- 기존에 문제점들이 해결되었는지
기존에 문제점 몇가지가 해결되었습니다.
1. 각 OS마다 2번 만들던 feature들을 하나의 소스코드로 릴리즈 할 수 있어서 개발자/QA의 공수가 줄었습니다.
2. 코드푸시로 비지니스 요구사항을 좀 더 빠르게 대응할 수 있게 되었습니다.
3. 성능튜닝을 일부 하긴 했지만, Native와 거의 유사한 속도를 가져갈 수 있었습니다.
실제 사내에서 테스트했을 때, 어느 부분이 React Native로 만들어졌는지 구분할 수 없을 만큼 네이티브 앱과 거의 유사한 성능을 구현했습니다.
결론적으로
요즘은 개발자가 개발만 하는 역할이 아니라 문제 해결사(Problem Solver)라고 하던가요?
세상에서 요구하는 역할에 맞춰서 기존에 문제점을 해결하고 사내에 자산을 만들었던 과정이라 재미있게 진행한 과정입니다.
물론 앞으로 해결해야하는 테크니컬한 이슈가 많이 남긴 했지만, 좋은 동료와 함께라면 잘 해나갈 수 있을 것 같습니다.
Kotlin / Java 베이스의 개발자로써, JS관련 언어와 플랫폼(Javascript / Typescript / React)를 배우는 과정에서 약간의 허들이 있긴 했지만, 최근에는 AI의 서포트로 굉장히 빠르게 학습할 수 있었습니다.