[기타]토스ㅣSLASH 22 - 미친 생산성을 위한 React Native 정리

"토스ㅣSLASH 22 - 미친 생산성을 위한 React Native"을 정리해봤습니다.
https://www.youtube.com/watch?v=b_6CjuvVg8o

2020년 1월 동남아시아에 토스앱 출시
1,100만 유저 보유
글로벌 팀 엔지니어 총 5명 : 2021년 기준 FE, iOS, Android 1명씩, Backend 2명

 

기존 구조의 문제점
- 느린 배포 속도 : 매우 느린 빌드 속도(3분 정도)
앱스토어 심사 시간 : 하룻밤 ~ 4주
업데이트가 전달되는 시간 : 동남아시아에는 자동 업데이트를 꺼 놓는 유저가 많음 -> 실험이 가능한 유저를 확보하려면 앱 신규 설치한 유저를 대상으로 할 수 밖에 없었음

- 개발 리소스 부족
같은 기능, 다른 구현 방식
iOS 개발자 휴가 시 iOS 아무도 건드릴 수 없음

- 해결 방법
앱의 모든 플로우를 웹으로 만든다면?
장점 : 항상 최신 기능 제공 가능
단점
 : 네트워크 환경 의존적 (앱을 실행할 때마다 리소스를 다운받기에), 오프라인에서도 사용가능하도록 개발하기가 구조적으로 까다로움
 : 성능적인 한계 (브라우저 위에 동작함으로)
동남아시아는 네트워크 환경이 안정적이지 않음, 저사양 안드로이드 기기 많이 사용하기에 네트워크 의존적이고 성능적 한계가 있다는 단점이 있음


Flutter
- 장점 : 훌륭한 공식 라이브러리 생태계, React Native보다 더 많이 사용됨
- 단점 : 높은 학습 비용(Dart 언어 및 프레임워크 공부해야 함)


React Native
- 장점 : Codepush 기능 사용 가능, 채용에 용이한 풍부한 개발자 풀
- 단점 : 빈약한 공식 라이브러리 생태계
- 특징
 : Javascript bundle 을 App 내부에 함께 배포
 : 앱스토어, 플레이스토어에서 앱에 포함된 Javascript 파일을 동적으로 변경하는 것을 허용


CodePush in Microsoft
- 특징 
 : Javascript bundle을 쉽게 최신 버전으로 유지할 수 있도록 도와주는 라이브러리 겸 서비스
 : 이 기능 이용하면 앱스토어, 플레이스토어에서 리뷰 없이 항상 최신 기능을 유저에게 배포할 수 있음


React Native 부분 적용
- 부분 적용을 가능하게 하는 요소들
 : 기존 프로젝트에 적용 가능
 : 1 React Native Bundle : N 진입점
 : React Native와 Native 간의 통신
 : Bundle을 다운로드 받아 사용

- 부분 적용을 하고 느낀 점 (iOS 개발자 관점)
 : 기존 프로젝트에 React Native 적용을 위한 추가 작업
 : React Native와 Native간의 통ㅇ신 고도화 이슈
 : 부족했던 Javascript 학습 및 반복 작업
 : 빌드 없는 개발
 : 심사없는 배포의 경험

- 사용해보기 전엔 알기 어려운 것들
 : 프로젝트 구조
 : 네비게이션 관리
 : 딥링크 관리
 : 푸시 알림 처리
 : 오픈소스 라이브러리 사용 경험
 : CodePush 배포 과정

- 기타
 : Native 기능이 필요한 것들은 대부분 오픈소스 라이브러리로 해결

- 부분 적용을 하고 느낀 점 (FT 관점)
 : 프로젝트의 구조, 라이브러리 선택에 대한 이해
 : 높은 생산성
 : CodePush 사용 경험


부분적으로 적용했을 때 장점
- 점진적 적용 가능
- 기존 모듈 활용 가능
- Migration Fault 이슈로부터 자유로움


완전히 다시 작성한다면?
- 시간이 더 오래 걸린다
- Cross Platform 이점
- 네이티브 뷰를 React Native 에 띄우기 가능


최종 결정은?
- 훨씬 더 많은 비즈니스 로직을 플랫폼 간 공유할 수 있는 완전히 다시 작성하는 방식이 팀의 전체적인 시간을 훨씬 많이 아껴줄 수 있을 것이라고 생각했고 팀원들도 이에 동의하여 완전히 다시 작성하는 방식을 선택함


과정은?
- 앱의 뼈대가 되는 TDS(Toss Design System) 컴포넌트들을 React Native로 다시 구현. 웹용 TDS 를 그대로 가져다 사용하고 싶었지만 브라우저에서 동작하도록 설계되어 있어서 새로 작성해야 했음 (중간중간에 정신이 혼미해서 그만둘 뻔 했음)
- 구현해야 할 기능들 리스트업(RN Only, Native)
- 딥링크 동작, 마케팅 툴 동작 등 놓치기 쉬운 영역들도 신경써서 챙김


후기
- 1달 반 예상했지만 2달이 걸림
- 앱 개선과 React Native 재작성 병행 
- 오픈 소스 라이브러리 잘되어 있어 가져다 쓰기 좋았음
- 관리되지 않은 프로젝트들 중에 직접 패치해서 사용한 것도 있음(ㄷㄷ)
- 숨어있는 로직 옮기기(푸시, 로그, 광고 연동, 마케팅 툴들을 하나씩 발견하며 옮기느라 생각보다 시간이 더 걸림)
- Native 개발자들은 React + Typescrip 학습 비용 발생


React Native 적용 후 느낀 장점 (FT 관점)
- CodePush로 유저들이 앱을 업데이트할 필요가 없어졌음
- 별다른 노력 없이도 두 플랫폼 간 UI의 일관성을 지킬 수 있었음
 : 플랫폼별로 구현이 다를 경우 발생하는 팀 차원의 비효율성이 많이 개선됨
 : 이전에 플랫폼 간 플로우가 다르다거나 이벤트 로그가 찍히는 기준이 미묘하게 다른 경우가 꽤나 자주 발생했었음. 이는 데이터 분석의 어려움으로 이어졌었음. 좀 더 기민하게 움직이는 팀이 되었음


React Native 적용 후기 (iOS 관점)
- 빨라진 개발 속도 (Hot Reloading 덕분. 3달 걸릴 복잡한 기능을 2주에 끝냄)
- 커리어 고민(기술의 유망성, 전문성의 포기, 역량의 확장)
 : 전문성 포기는 Object-C -> Swift 로 넘어가는 거와 비슷하다고 느꼈던 것이라 잘 이겨낼 수 있을 것이라 생각함
 : 안드로이드, 웹 프론트까지 모든 플랫폼을 개발할 수 있는 사람이 되기로 마음 먹음


React Native 적용 후기 (FT 관점)
- 저렴한 학습 비용
- 역할의 확장 (로그인 플로우나 홈 화면처럼 유저가 앱을 켜면 바로 마주하는 화면들은 로딩속도가 존재하는 웹 페이지로 구성하기엔 다소 어려움이 있음)
- 더 높은 복잡성 (앱 푸시, 파일 읽고 쓰는 것 등을 위한 API를 사용하게 됨. 전반적으로 다루어야 할 복잡도가 훨씬 더 높아짐)


React Native 적용 후기 (팀 관점)
- 빠르게 실패와 개선 과정 반복 가능
- 채용이 어려운 초기 스타트업에 유용