회사에서 React Native로 개발을 하며 사소한 업데이트나 긴급한 hotfix의 경우 마켓 심사를 거치지 않고 바로 사용자에게 변경사항을 반영하고 싶다는 기획의 요청이 있어서 이에 대응하기 위해 Microsoft의 Visual Studio AppCenter에서 제공하는 기능중 하나인 Code Push를 이용해서 In-app 업데이트를 제공한 경험있는데요, 이를 바탕으로 이 Code Push란 무엇이고 어떻게 쓸 수 있는지에 대해 공유해보고자 합니다.
이 글인 Part.1에서는 SDK설정 등 Code Psuh를 사용하는 자세한 방법보다는 Code Push가 무엇이고 어떻게 동작하는지 등 개념적인 이야기를 먼저 하고 Part.2에서 그 자세한 방법에 대해 다뤄보겠습니다.
1. React Native 앱의 빌드와 배포
Code Push의 동작에 대해 이해하려면 React Native의 기본적인 동작방식에 대한 이해가 필요합니다.
React Native의 슬로건은 “한 번만 배우고, 모든 곳에서 써먹어라.” 입니다. 이 슬로건처럼 React Native는 Javascript를 통해서 React와 비슷한 문법으로 Web 개발을 하듯이 Android와 iOS 앱을 한 번에 개발할 수 있도록 만들어졌습니다.
우리가 Javascript나 Typescript로 React Native 코드를 작성하면, Metro라는 번들러가 이 코드를, 이미지나 폰트와 같은 Assets와 함께 Javascript Bundle로 번들링 해줍니다. 이후 Bridge라는 것을 통해서 Javascript의 각 Thread들이 네이티브 모듈의 Thread와 통신하면서, Javascript 코드가 네이티브 모듈을 동작하게 합니다.
이 과정에서 Code Push와 관련된 중요한 포인트는 이 Javascript Bundle이 되겠습니다.
앱이 만들어졌다면 사용자에게 배포를 해야합니다.
배포를 위해선 이전 단계에서 만들어진 Bundle을 네이티브 파일로 빌드한 뒤, iOS의 경우엔 TestFlight라는 플랫폼에 업로드를 하고 앱스토어 심사를 받게 되는데, 그 심사에 통과되어야만 App Store에 앱을 올릴 수 있습니다. Android의 경우엔 AAB확장자를 가진 파일로 만들어 Play Store에 제출을 하게 되고, 마찬가지로 그 심사를 통과해야만 앱이 Play Store에 업로드 됩니다.
이러한 심사는 짧게는 24시간에서 길게는 7일까지 소요되며 사용자에게 즉각적인 개선점을 제공하는데에 병목이 되기도 합니다.
2. 코드푸시(Code Push)의 동작 원리
먼저 Code Push 기능을 사용하길 원하는 개발자는 앱에 Code Push 기능을 탑재(관련 코드를 작성)하고 해당 앱을 마켓/스토어에 올려 사용자가 받을 수 있도록 합니다. Code Psuh는 그 다음부터 활약할 수 있게 됩니다.
앱이 마켓에 올라가고 그것을 다운로드 받은 사용자가 있다는 전제하에, 개발자가 새로운 코드를 Javascript Bundle 형태로 AppCenter에 배포 하면, AppCenter는 개발자가 가지고 있는 Key와 앱센터 내부에 그 개발자가 등록한 앱 중 Key가 일치하는 앱를 찾아 해당 저장소(AppCenter)에 새롭게 번들링된 코드(JS Bundle)를 저장합니다. 이로서 AppCenter는 이전 버전의 Bundle을 가지고 있는 상태에서 새로운 Bundle 또한 가지게 됩니다.
이 상태에서 사용자가 앱을 실행시키면, 앱이 실행됨과 동시에 AppCenter 서버와 통신을 하게 됩니다.
사용자의 앱의 Code Push기능이 자신이 가지고 있는 Key와 AppCenter 서버에서 Key가 일치하는 앱을 찾아, 현재 사용자의 디바이스에 설치된 앱과 해당 AppCenter 서버의 앱을 비교합니다. 만약 두 앱 사이에 코드가 차이 없다면 그대로 앱의 메인 프로세스를 실행시키고, 차이가 발견된다면 AppCenter 서버가 가진 새로운 코드를 다운로드받아 현재 앱을 업데이트하게 됩니다.
물론 사용자의 앱이 어느 시점에 AppCenter 서버와 통신을 하여 업데이트 존재 여부를 체크할 것인지, 어느 시점에 새로운 코드를 다운로드 받고 어느 시점에 재실행할지는 개발자가 설정할 수 있습니다.
3. Code Push를 사용하는 이유
그래서 도대체 왜 Code Push를 사용하는지 궁금하실 수 있습니다.
Code Push를 사용하는 가장 큰 이유이자 코드푸시의 최대 장점은, 긴 마켓 업로드 심사 기간을 거쳐 앱스토어나 플레이스토어에 앱을 올리는 과정을 생략하고 커맨드 라인 단 한 줄로 최신의 코드를 사용자의 앱에 즉각 반영할 수 있기 때문입니다. 그렇기 때문에 사용자에게 즉각적인 서비스 개선 경험을 제공할 수 있습니다.
또한 이 업데이트를 사용자가 모르게 앱 접속중에 실시할 수 있어서, 흔히 ‘잠수함 패치’라고 불리는 ‘사용자가 모르는 새에 앱이 최신화 되는’ 업데이트를 제공할 수도 있습니다.
개발적인 측면에서도 Build Mode를 여러개로 두고 테스트하고 배포할 수 있어서 운영 버전(Release) 앱의 안정성을 높일 수 있으며, 이전 버전의 코드를 AppCenter 서버가 가지고 있기 때문에 만일의 사태에 대비한 Roll-back 또한 간편합니다.
그리고 AppCenter에서는 Code Push 이외에도 Code Push로 등록된 앱에 대해서 다른 추가적인 기능들을 제공하기에 이런 기능을 사용하기에 편리합니다. 사용자 앱의 에러나 충돌 여부를 알 수 있는 Diagnostics 기능을 제공하기도 하고, Google Analytics와 같은 통계 분석 자료를 대시보드 형태로 보여주기도 합니다.
4. Code Push의 한계
그럼 Code Push는 무적이 아니냐, 마켓 심사를 뭐하러 거치냐 하고 의문이 들텐데요. Code Push가 가지는 한계점도 있습니다.
Code Push는 Javascript/Typescript 코드와 이미지나 폰트와 같은 앱 자체의 정적 자산(Assets)만을 업데이트할 수 있습니다. 그렇기에 네이티브 모듈을 다루는 라이브러리의 추가나, 네이티브 코드의 변경이 있을 경우엔 앱을 재빌드해 정식적인 마켓 업로드 과정을 거쳐야 합니다.
그리고 각 마켓 정책상, 현재 앱이 제공중인 서비스의 범위를 크게 벗어나면 안됩니다. 다만, 보통은 이런 경우 네이티브 코드를 변경할 일이 동반되기 때문에, 기존에 없던 새로운 서비스를 제공하거나 서비스 정책이 크게 바뀌는 경우 빌드를 통한 정식 심사 과정을 거치게 되어있습니다.
5. Code Push의 모범적 활용 방안
Microsoft AppCenter 공식문서에 따르면 Build 단계는 세 개로 두는 것이 가장 모범적입니다. 공식문서에서 추천하는 세 Build 모드는 각각 Debug/Staging/Production입니다.
Debug는 개발시에 바로바로 시뮬레이터를 통해서 확인 가능하도록 따로 Code Psuh는 설정하지 않고, Staging부터 Code Push를 설정하되 Staging 빌드는 실제 배포 환경과 동일한 테스트용으로, Production 빌드는 사용자에게 제공되는 운영 버전의 실제 제품을 나타냅니다.
제가 회사에서 개발하고 있는 앱도 그 방향을 따라가고 있습니다.
앱은 우선 Android와 iOS를 각각 다른 앱으로 AppCenter에 등록하고(JS Bundle 단위로 앱을 나누는 것이 좋습니다), OS별 앱은 모두 각각 Debug/Staging/Production 빌드로 나누었습니다.
Debug는 개발자들이 개발 및 소단위 테스팅을 할 때 사용되며, Staging은 여러 테스트용 실기기에 빌드된 파일 형태로 앱을 다운받아 QA팀과 개발팀이 통합 테스팅을 하는 용도로 사용중이고, Production은 실제 App Store와 Play Store를 통해 배포하는 운영 버전의 앱으로 사용중입니다.
저도 이번에 처음으로 이 Code Push라는 기능을 사용해봤는데요, Visual Studio Code나 WebStorm 등 에디터에서 코드 파일을 저장하면 시뮬레이터가 Auto Refresh 기능으로 그 코드를 반영하여 앱을 새로 띄우는 것처럼, 아니면 정말 App이 아닌 Web을 서비스 하듯이, 이미 이전 버전의 앱이 설치되고 그 이후로 개발 컴퓨터에 연결된 적이 없는 디바이스에서 최신 코드를 반영할 수 있다는 점이 참 인상깊었습니다.
그리고 인터넷에는 이 Code Push를 '어떻게 적용하는지'에 대한 정보는 많은데 정작 그 '원리나 개념 자체'에 대한 이야기는 적어서, 이러한 개념을 먼저 바탕에 두고 Code Push를 적용을 한다면 그 과정이 훨씬 수월할 것이라고 생각되어 이에 대한 이야기를 Part.1에 담아보았습니다.
Code Push를 배우고 적용하는 과정에서 참고한 문서는 Microsoft의 공식문서인데, 특히나 AppCenter 공식문서의 경우엔 한글화도 되어있어 접근하기 편리하니 관심 있으신 분들은 한 번 공식문서와 함께 자신의 앱에 Code Push를 적용해보는 것을 추천드립니다.
Microsoft Visual Studio AppCenter 공식문서 : https://docs.microsoft.com/en-us/appcenter/distribution/codepush/
Microsoft react-native-code-push 라이브러리 공식문서 : https://github.com/microsoft/react-native-code-push
'React Native' 카테고리의 다른 글
| Code Push를 이용한 React Native 인앱 업데이트 Part.2 (1) | 2022.09.22 |
|---|
