React Native의 다중 플랫폼 비전
React Native는 페이스북과 업계 전반에서 모바일 개발의 기준을 크게 높이는 데 성공했다. 우리가 컴퓨터와 새로운 방식으로 상호작용하고 새로운 기기가 등장함에 따라, React Native가 모두를 위해 존재하기를 바란다. React Native가 처음에는 모바일 앱 개발을 위해 만들어졌지만, 다양한 플랫폼에 초점을 맞추고 각 플랫폼의 강점과 제약을 고려해 개발하는 것이 상호 시너지 효과를 낸다고 믿는다. 이 기술을 데스크톱과 가상 현실로 확장했을 때 큰 이점을 확인했으며, 이게 React Native의 미래에 어떤 의미를 지니는지 공유하게 되어 기쁘다.
플랫폼 특성 존중하기
첫 번째 지침 원칙은 각 플랫폼 사용자들의 기대에 부응하는 것이다. 안드로이드 사용자는 TalkBack을 활용한 접근성 있는 앱을 기대한다. 네비게이션은 다른 안드로이드 앱과 동일하게 동작해야 한다. 버튼은 안드로이드에서 기대하는 모습과 느낌을 가져야 한다. iOS 버튼처럼 보이거나 동작해서는 안 된다. 크로스 플랫폼 개발자 경험을 일관되게 제공하려는 목표가 있지만, 사용자의 기대를 희생하는 유혹에 저항한다.
React Native는 개발자가 사용자의 기대를 충족시키면서도 더 나은 개발자 경험을 얻을 수 있도록 돕는다. 이 섹션에서는 다음과 같은 내용을 공유한다:
- 플랫폼 제약을 받아들이면, 오히려 다른 플랫폼에서의 경험이 개선된다.
- 제도적 지식을 활용해 더 높은 수준의 크로스 플랫폼 추상화를 구축할 수 있다.
- 각 플랫폼의 다른 참여자들은 더 나은 개발자 및 사용자 경험을 구축하는 데 영감을 준다.
플랫폼 제약 사항 수용하기
특정 디바이스의 하드웨어나 사용자 기대치는 고유한 제약 사항과 요구 사항을 부과한다. 예를 들어, Android와 VR 헤드셋은 iOS, macOS, Windows에 비해 메모리가 더 제한적이다. 또 다른 예로, 사용자는 모바일 앱이 거의 즉시 시작되길 기대하지만, 데스크톱 앱이 시작하는 데 시간이 더 걸리는 것에 대해 덜 불편해한다. React Native를 통해 이러한 문제를 접근하면 한 플랫폼에서 얻은 교훈과 작성한 코드를 다른 플랫폼에 더 쉽게 적용할 수 있다는 사실을 발견했다.
React Native와 Relay는 Android와 iOS에서 1000개 이상의 Facebook 서비스를 지원한다.
예를 들어, React Native는 Android에서 메모리 사용량을 줄이는 데 중요한 "뷰 평탄화(view flattening)"라는 최적화 기법을 사용한다. iOS에는 동일한 메모리 제약이 없기 때문에 이 최적화를 구현하지 않았다. 지난 몇 년간 새로운 크로스 플랫폼 렌더러를 구축하면서 "뷰 평탄화"를 다시 구현해야 했다. 이번에는 플랫폼별 Java 대신 C++로 작성했다. iOS에서 동일한 최적화를 시도하는 것은 이제 단순히 스위치를 켜는 문제였다. 실제 Facebook 앱에서 이 최적화가 iOS 성능을 개선하는 것을 확인했다! iOS를 위해 이 최적화를 구축하지 않았을 수도 있지만, Android에 투자한 것이 iOS 투자에도 도움이 된 것이다.
제도적 지식에서 배우기
React Native가 처음 만들어졌던 이유 중 하나는 엔지니어링 분리 현상을 줄이기 위함이었다. 동일한 제품을 개발하는 Android 엔지니어와 iOS 엔지니어는 서로 분리되는 경향이 있다. Android 엔지니어는 Android 엔지니어의 코드를 리뷰하고, Android 관련 미팅과 컨퍼런스에 참석한다. iOS 엔지니어는 iOS 엔지니어의 코드를 리뷰하고, iOS 관련 미팅과 컨퍼런스에 참석한다. 서로 다른 플랫폼에서 작업하는 엔지니어들은 각각 고유한 도메인 지식과 제도적 지식을 가지고 있으며, 이를 통해 더 나은 제품 경험을 구축한다.
React Native와 같은 크로스 플랫폼 프레임워크의 가장 큰 장점 중 하나는 서로 다른 도메인 전문성을 가진 엔지니어들을 하나로 모을 수 있다는 점이다. 우리는 더 많은 플랫폼을 대상으로 함으로써 플랫폼 전문가들 간의 제도적 지식 교류를 가속화할 수 있다고 믿는다.
예를 들어, React Native의 접근성 추상화는 Android, iOS, 웹 각각이 접근성을 다루는 방식을 반영하여 설계되었다. 이를 통해 우리는 두 모바일 플랫폼에서 접근성 힌트를 더 효과적으로 처리할 수 있는 공통 인터페이스를 구축할 수 있었다.
또 다른 예로, 웹에서 사용자가 느끼는 속도에 대한 연구는 Suspense와 같은 동시성 기능으로 이어졌다. 지난 한 해 동안 이러한 기능들은 새로운 Facebook.com 웹사이트에서 검증되었다. 이제 새로운 렌더러를 통해 이러한 기능들은 React Native로 도입되었으며, 이벤트 스케줄링과 우선순위 설계에 영향을 미치고 있다. React 팀이 웹 경험을 개선하기 위해 투자한 노력은 네이티브 플랫폼을 위한 React Native에도 긍정적인 영향을 미치고 있다.
경쟁이 혁신을 이끈다
도메인별 엔지니어, 밋업, 컨퍼런스 외에도 각 플랫폼은 비슷한 문제를 해결하는 독특한 플레이어들을 끌어들인다. 웹에서는 React(React Native를 직접 지원함)가 종종 Vue, Preact, Svelte와 같은 오픈소스 웹 프레임워크로부터 영감을 받는다. 모바일에서는 React Native가 다른 오픈소스 모바일 프레임워크로부터 영향을 받았으며, 페이스북 내부에서 개발된 다른 모바일 프레임워크로부터도 배운 바가 있다.
우리는 경쟁이 장기적으로 모두에게 더 나은 결과를 가져다준다고 믿는다. 각 플랫폼에서 다른 플레이어들이 뛰어난 이유를 연구함으로써, 다른 플랫폼에도 적용할 수 있는 교훈을 얻을 수 있다. 예를 들어, 복잡한 웹사이트를 단순화하려는 경쟁은 React의 개발에 영향을 미쳤고, React Native가 모바일 앱을 위한 선언적 프레임워크를 제공하는 데 앞서 나갈 수 있게 했다. 웹에서 더 빠른 반복 주기와 빌드 시간에 대한 요구는 Fast Refresh의 개발로 이어졌고, 이는 React Native에도 큰 이점을 제공했다. 마찬가지로, 내부 모바일 프레임워크에서의 성능 최적화 — 특히 데이터 가져오기와 병렬화 관련 — 는 React Native를 개선하는 데 도전을 주었고, 새로운 Facebook.com 웹사이트를 구축할 때 React에도 영향을 미쳤다.
React와 Relay가 Facebook.com 웹사이트를 구동한다.
새로운 플랫폼으로의 확장
React와 React Native는 전환점을 맞이하고 있다. React는 React 18 출시를 위한 준비를 시작했고, 새로운 React Native 렌더러가 이제 Facebook 모바일 앱을 완전히 지원한다. 우리 팀은 Facebook 내에서 React Native의 도입이 확대됨에 따라 올해 크게 성장했다. 다른 플랫폼에서 개발 중인 팀들도 이러한 도입을 주목했고, React Native의 혜택을 누릴 수 있는 기회를 발견했다.
지난 한 해 동안, 우리는 Microsoft와 Messenger 팀과 협력하여 Windows와 macOS에서 진정한 네이티브 영상 통화 경험을 만들었다. 모바일 앱의 시작 시간에 대한 높은 기준을 적용한 덕분에, React Native를 사용한 데스크톱 영상 통화의 초기 구현은 기존 Electron 구현의 성능을 완전히 뛰어넘었다. 이 경험을 구축하는 첫 몇 주 동안, 우리는 여러 라이브 영상 통화를 하며 윈도우 크기를 조정하는 동영상을 녹화했고, 부드러운 프레임 속도에 감탄했다.
데스크톱을 위한 개발은 매우 흥미로웠다. 우리는 모바일 경험을 구축하는 데서 배운 지식을 데스크톱에 적용하며 새로운 가능성을 탐구했다. 여러 자식 윈도우, 메뉴 바, 시스템 트레이 등을 통해 우리의 시야를 넓혔다. 데스크톱 Messenger의 새로운 기능을 계속 협력하며 개발하면서, 웹과 모바일에서의 개발 방식에 영향을 미칠 수 있는 기회를 발견할 것으로 기대한다. 최신 소식을 확인하려면 GitHub에서 데스크톱 협업 작업을 확인할 수 있다.
React Native가 Windows와 macOS용 Messenger의 영상 통화를 지원한다.
또한 우리는 Facebook Reality Labs와 더 긴밀히 협력하여 React가 Oculus에서 가상 현실 경험을 제공하는 데 어떤 독자적인 위치에 있는지 이해하고 있다. React Native로 VR 경험을 구축하는 것은 메모리 제약이 더 엄격하고 사용자가 상호작용 지연에 민감하기 때문에 특히 흥미롭다.
모바일용 React Native와 마찬가지로, 우리는 기술을 Facebook 규모에서 검증한 후에 공개할 계획이다. 많은 부분이 여전히 변화 중이며, 우리는 여전히 많은 질문을 가지고 있다. 커뮤니티와 공유하기 전에 기술이 프로덕션 준비가 되어 있고 신뢰할 수 있는지 확신하고 싶다.
VR 개발의 대부분은 여전히 내부적으로 진행되겠지만, 가능한 한 빨리 더 많은 내용을 공유할 계획이다. 또한 VR용 React Native의 개선 사항이 오픈소스로 공개될 것으로 기대한다. 예를 들어, VR 사용 사례를 위한 메모리 사용량 감소 프로젝트가 모바일과 데스크톱 경험에서도 메모리 사용량을 줄이는 데 도움이 될 것으로 예상한다.
React와 Relay가 Oculus Home 및 기타 여러 가상 현실 경험을 지원한다.
React가 업계에서 어떻게 도입되었는지 돌아보면, 커뮤니티에서는 항상 더 많은 플랫폼에서 React를 사용하려는 열망이 있었다. 우리가 React Native를 커뮤니티에 발표하기 전에도, Netflix는 이미 Gibbon이라는 커스텀 렌더러를 개발하여 TV 경험을 구축하고 있었다. 또한 Facebook이 데스크톱용 Messenger를 개발하기 전에, Microsoft는 이미 Office와 Windows 10에서 네이티브 데스크톱 경험을 구축하기 위해 React를 사용하고 있었다.
요약
요약하자면, 우리의 비전은 React Native의 영역을 모바일을 넘어서 확장하는 것이다. 이미 Facebook의 데스크톱 및 VR 팀과 협력하며 첫걸음을 내디뎠다. 각 플랫폼의 제약 조건을 받아들이고, 기존의 지식을 배우며, 다른 플레이어로부터 영감을 얻는 것이 생태계 내 모든 플랫폼에 이익이 된다는 것을 알고 있다. 무엇보다도, 이를 통해 우리의 지침 원칙에 충실하게 유지할 수 있다.
React Native가 다양한 플랫폼에서 어떤 가능성을 열어줄지 계속 탐구하며, 앞으로의 전개가 기대된다. 더 많은 업데이트를 확인하고 여러분의 생각을 공유하려면 @reactnative로 연락하라!