리액트 네이티브는 2015년 당시 페이스북(현 메타)에서 개발한 오픈 소스 모바일 애플리케이션 프레임워크(framework, 프로그램 개발에 사용되는 도구를 모아 놓은 구조화된 틀)입니다. 안드로이드, iOS 등 모바일에 최적화된 애플리케이션을 빠르게 테스트하고 개발할 수 있어 널리 활용되고 있습니다. LG CNS 빌드센터는 2022년 상반기 출시한 가전 커뮤니티 플랫폼 ‘220 코드 앤 코드(Cord & Code)’ 프로젝트를 시작으로 리액트 네이티브 역량을 강화하고 있습니다.
리액트 네이티브의 장점
1) 애플리케이션 개발 생산성 향상
리액트 네이티브는 한 벌의 소스코드 만으로도 여러 종류의 플랫폼에서 구동 가능한 애플리케이션을 개발할 수 있습니다. 소스코드 리포지토리(repository, 개발자가 애플리케이션 소스 코드에 대한 변경을 수행 및 관리하는 데 사용하는 중앙화된 디지털 스토리지)에 대한 관리 비용이 줄고, 동일한 기능을 구현하기 위한 플랫폼별 소스코드를 작성할 필요도 없기 때문에 개발 생산성과 소스코드 품질이 향상됩니다.
2) 사용자 경험 향상
리액트 네이티브는 네이티브 기반의 부드럽고 빠른 반응성을 제공함으로써 사용자 경험을 획기적으로 향상시킵니다. 리액트 네이티브로 만들어진 애플리케이션은 특유의 딱딱한 느낌이 드는 웹앱과 달리 세련된 UX를 제공하기 때문에 제품에 대한 긍정적인 이미지를 형성하는 데 유리합니다.
3) 낮은 집입장벽
리액트 네이티브는 리액트(React)*의 State/Props/컴포넌트/상태 관리 개념을 공유하기 때문에 리액트 사용이 익숙한 웹 개발자에게는 진입장벽이 낮습니다. 상대적으로 수가 부족한 안드로이드, iOS 네이티브 개발자 대신 웹 개발자가 앱 화면을 개발할 수 있어 프로젝트 개발 인력을 확보하기 용이합니다.
• 리액트(React)는 페이스북(현 메타)이 2013년에 출시한 자바스크립트 라이브러리로, 모던 프론트엔드 라이브러리 중 가장 큰 생태계를 갖고 있습니다. ‘모던 프론트엔드’에 대한 설명은 아랫글을 참고하세요.
4) 많은 양의 레퍼런스
리액트 네이티브는 출시 이후 충분한 기간 동안 검증과 적용을 거쳐왔기 때문에 신뢰할 만한 데이터와 레퍼런스가 많습니다. 특히 라이브러리 생태계가 잘 갖춰져 있다는 것이 장점입니다.
네이티브 개발 역량이 중요한 이유
모바일을 통한 서비스와 사용자 경험이 크게 증가하면서 리액트 네이티브 개발의 중요성이 커지고 있습니다. 프로젝트 현장에서는 기존 웹 개발 인원만으로 프로젝트를 진행할 수 있을 것 같다는 초기의 예상과는 다르게, 실제로는 중요한 이벤트마다 네이티브 개발자의 역할이 절실해지는 순간이 많아지고 있습니다.
리액트 네이티브와 리액트는 기본 철학과 개념을 공유하지만, 독자적인 개발 원칙이나 표준을 가지고 있습니다. 예를 들어, 스타일을 적용할 때 구조나 속성 명이 웹과 다르기 때문에 헤매기도 하며, 지원되지 않는 속성이 많은 웹에서 CSS(Cascading Stylesheet, 사용자에게 문서를 표시하는 방법을 지정하는 언어)만으로 쉽게 구현할 수 있는 기능을 붙여가며 구현해 내야 할 수도 있습니다.
리액트 네이티브로 만든 앱이 출시되기 위해서는 일련의 과정(심사→배포→테스트)에 대한 경험이 필요합니다. 빌드 결과물로 나온 설치 파일을 스토어에 출시해야 하기 때문이죠. 심사 때문에 오픈 일정이 틀어지는 일이 없도록 대략적인 기간과 심사 결과에 대한 대처방안을 염두에 둘 필요가 있습니다.
또한 프로젝트 리포지토리 내 JavaScript 번들을 감싸기 위한 iOS, 안드로이드 소스코드가 포함되어 있음을 간과해서는 안 됩니다. 실제로 서드파티(프로그래밍을 도와주는 plug_in이나 library 등을 만드는 회사) SDK(Software Development Kit, 개발자들에게 소프트웨어 개발을 위한 툴과 리소스를 제공하는 패키지) 연동이나 커스텀 기능 구현을 위해 네이티브 소스코드를 수정해야 할 일이 빈번히 일어납니다. 이외에도 운영 단계에서는 리액트 네이티브 및 주요 라이브러리의 버전 변경에 따라 네이티브와의 연동 이슈가 발생하기도 하는데요. 이때 발생하는 몇몇 이슈는 웹 개발자만의 역량으로는 해결하기 어려운 경우도 있습니다. 특히 성능과 관련된 영역은 많은 경우 JavaScript 소스코드를 보완하는 것만으로는 눈에 띄는 개선을 이뤄내기 쉽지 않기 때문에 네이티브 소스코드의 수정이 필요합니다.
프로젝트에서 새로운 프레임워크를 적용하는 것은 의사결정부터 쉽지 않기에 레퍼런스 하나하나가 정말 소중합니다. LG CNS 빌드센터는 이 값진 레퍼런스 경험을 쌓아가며 리액트 네이티브 역량을 강화하고 있습니다. 최근에는 리액트 네이티브 프로젝트에 마이크로 프론트엔드(하나의 웹/앱을 구성하는 여러 모듈을 쪼개 빌드/배포하는 것으로 각 모듈을 담당하는 여러 팀이 독립적으로 서비스를 개발/테스트/배포해 기존 아키텍처보다 상대적으로 유연)개념을 적용해 기존보다 유연하고 확장 가능한 구조를 마련하고 있습니다.
글 ㅣ LG CNS CTO 빌드센터 클라우드네이티브개발팀 현가영
