React Native와 함께 인프런 앱 새로 만들기│인프콘2024

인프런 앱의 역사와 발전

인프런 앱은 2021년에 처음 출시되었는데요, 그때는 앱 개발 경험이 없는 프론트엔드 개발자가 만든 앱이었어요. 결과는 아시다시피 그리 좋지 않았는데, 사용자 리뷰도 안 좋았고 결국 2023년 4월에 공개 중지되었죠. 이후, 새로운 인프런 앱을 만들기로 결심하게 되었고, 2023년 말에는 모바일 셀을 신설해 5명의 팀이 구성되었어요. 그 후, 2024년 초부터 인프런 앱 개발을 시작해, 6월 중순에는 스토어에 출시할 수 있었습니다.

새로운 인프런 앱은 이전의 단순한 리더 앱에서 벗어나, 사용성을 개선하는 데 집중했어요. 예를 들어, 강의를 구매하고 보는 과정에서 백그라운드 재생, 배속 설정, 노트 기능 등 다양한 기능을 추가했죠. 이러한 변화는 사용자 경험을 크게 향상시켰고, 더 많은 피드백을 받을 수 있게 되었답니다.

React Native 선택 이유와 아키텍처

그렇다면 왜 React Native를 선택했을까요? 사실, 앱 개발을 시작할 때 팀의 상황이 큰 영향을 미쳤어요. 우리 팀은 React 개발자가 많았지만, Android 개발자는 한 명도 없었거든요. 그래서 크로스 플랫폼 프레임워크로 React Native를 선택하게 되었죠. 또, React Native의 CLI와 Expo의 차이점에 대해서도 고민했어요. Expo는 여러 서드파티 라이브러리를 관리해주고, 업데이트가 쉬워서 많은 개발자들이 선호하죠.

그러나 우리 팀은 커스터마이징이 중요했기 때문에 React Native CLI를 선택했어요. 이 결정은 팀의 기술 스택과 경험에 따른 결과였죠. React Native의 아키텍처를 살펴보면, 자바스크립트 런타임과 네이티브 UI 사이의 통신이 이루어지는 구조로 되어 있습니다. 하지만 이 과정에서 발생할 수 있는 지연 문제와 동시 작업의 어려움은 개발자들에게 도전이 되었죠.

플레이어 구현과 웹뷰 문제 해결

앱의 핵심 기능 중 하나인 플레이어는 네이티브로 구현했어요. 기존의 React Native Video 라이브러리를 사용하지 않은 이유는, 이전 앱에서 많은 문제가 있었고, 필요한 기능이 부족했기 때문이었죠. 그래서 직접 네이티브 코드를 작성해 플레이어를 구현했습니다. 이로 인해 더 빠른 유지보수와 성능 개선이 가능했어요.

또한, 웹뷰 문제도 만나게 되었어요. 웹뷰에서 특정 페이지에서 줌 기능이 작동하지 않는 문제가 발생했는데, 이는 메타 태그가 자바스크립트 사이드에서 제거되는 현상 때문이었죠. 여러 번의 시도 끝에, 서드 파티 라이브러리와의 충돌이 원인임을 알게 되었고, 이를 해결하기 위해 자바스크립트 메서드를 오버라이딩하는 방식으로 문제를 해결했어요.

이런 경험들은 정말 많은 것을 가르쳐 주었고, 앱 개발 과정에서의 문제 해결 능력을 더욱 키워주었습니다. 앞으로도 더 나은 앱을 만들기 위해 계속해서 학습하고 개선해 나가야겠죠.