React Native 네이티브 모듈 연결하기 - 파노라마 뷰(Android 1/3)

1. 구현 방향 설정

초기에는 react-native-panorama-view 라이브러리를 import하여 앱 내부에 파노라마 뷰를 추가하려고 하였다.

https://github.com/lightbasenl/react-native-panorama-view

 

파노라마 뷰를 다루는 라이브러리들 중 100개를 넘는 깃허브 스타를 갖고 있는 라이브러리였음도 불구하고, ios, android 두 네이티브 플랫폼 다 정상동작하지 않았다,,, 확실히 앱에 자주 사용되지 않는 기능의 경우 활성화된 라이브러리를 찾기 힘든 것 같다..

 

라이브러리 코드를 분석한 결과, 대부분이 네이티브 코드로 작성되어 있었다. iOS의 경우, JavaScript와 네이티브 코드 간의 변수명 불일치로 인해 터치 제스처 관련 이벤트가 제대로 전달되지 않는 문제가 있었기에, iOS 네이티브 뷰 파일을 수정해 비교적 쉽게 해결할 수 있었다.

 

문제는 Android였는데, 본래 react-native-panorama-view 라이브러리의 Android 모듈 구현에 사용된 'com.google.vr:sdk-base' SDK가 deprecated, archived되어 기존 사용되던 메서드 중 일부가 사라졌기에, 사용하는 SDK 자체를 변경, View, Manager 클래스를 재구성하여 연결하는 대규모 작업이 필요했다.

 

1.1. 대체 SDK 탐색

인지도 높은 깃허브 public 레포를 둘러보며 대체 SDK를 탐색해본 결과, 대부분의 레포가 모두 com.google.vr:sdk-base를 계속 사용하고 있었기에, 대체 SDK를 찾는 데에 굉장히 애를 먹었다...(아마 구글이 패키지를 팽 한지 그리 오래되진 않았던 것으로 보임…)

그래도 긴 삽질 끝에 panoramaGL, 그리고 gvr-android-sdk를 Android SDK 후보로 추려볼 수 있었다.

 

1. PanoramaGL

https://github.com/hannesa2/panoramaGL

panoramaGL의 경우, 세계최초 파노라마뷰 관련 오픈소스 라이브러리라고 스스로를 소개하고 있는데, 어느정도의 인지도를 보유하고 있으며, iOS에서는 구현하였던 핀치 제스쳐를 통한 줌과 z축 각도변경을 모두 지원한다고 하여 가장 먼저 시도해본 라이브러리이다. 하지만, 자체 모듈화를 위해 실제 깃허브 클론하여 분석해본 결과, 아래와 같은 이슈가 존재했다.

• Android 18 버전 이상에서 터치 상태 유지 시, 화면 각도가 지속적으로 변하는 문제
• 핀치 제스처 작동 불능

 

PanoramaGL 라이브러리의 SampleApp 캡처영상

 

2. gvr-android-sdk

https://github.com/googlevr/gvr-android-sdk

사실상, com.google.vr:sdk-base와 상당부분을 공유하고 있는 Daydream VR용 패키지이다. 2019년 11월부터 archived 상태이지만, 다음과 같은 장점이 있었다.

 

• PanoramaGL에서 발견된 터치 관련 문제가 없음
• 핀치 줌 기능은 없지만, 추후 구현을 위한 주석 등이 잘 정리되어 있음

 

다만, 최신 버전(1.200.0)이 Maven 저장소에 없어 일부 메서드가 작동하지 않는 문제가 있었는데, 이는 다음과 같이 해결하였다.

(https://github.com/googlevr/gvr-android-sdk/issues/632)

 

• Module 수준의 build.gradle 파일에서 com.google.vr:sdk-base dependency 제거
• SDK의 .aar 파일을 직접 프로젝트에 추가
• 로컬 .aar 파일을 참조하도록 설정

 

implementation 'com.google.vr:sdk-base:1.200.0' // 제거
implementation files('../libs/sdk-base-1.200.0.aar') // 로컬에 추가한 aar파일의 경로 추가

 

기본적인 터치동작을 통한 화면각 조정 기능이 정상동작한다는 점, 그리고 직접 핀치 제스쳐 로직을 추가하는 것이 추후 자체 모듈화 및 유지보수에 더 용이할 것이라는 판단 하에 gvr-android-sdk를 안드로이드 모듈 구현에 최종 사용하기로 결정하였다.

 

1.2. gvr-android-sdk 커스터마이징

 

gvr-android-sdk가 기본 제공하는 수많은 데모앱 파일들 중, 내가 구현하고자 하는 목표와 제일 근접한 데모 앱은 video360이라는 파일이였다. 해당 데모앱의 메인기능은 360 비디오를 파노라마 뷰로 확인하는 기능이였는데, 기능 토글을 통해 이미지 또한 표시가 가능하였다.

 

 

하지만, 이미지 파일만을 렌더할 계획이기에, 비디오 재생 로직과 두 미디어 파일유형을 토글하는 데에 필요한 Ui 및 로직 구현 파일들을 모두 제거하였다.

또한, Google Daydream 기기에 최적화된 VrVideoActivity 파일은 모바일 기기만 동작할 계획인 파나로마뷰 모듈 구현에 필요가 없기에 마찬가지로 제거하였다.

 

그 외 파일들은 이미지 파노라마를 띄우는 핵심 뷰 클래스인 MonoscopicView를 중심으로 모두 유기적으로 연결되어있는 재료 파일들이므로, 모두 유지하기로 방향을 정하였다.

 

 

코드 경량화 후, 테스트 시에 확인했던 기능들이 모두 정상 동작하는 것을 확인한 이후, 해당 파일들을 모두 React Native 프로젝트 폴더로 이동하였다.

 

React Native 프로젝트 폴더 내부로 이동시킨 파일들

다음 포스트에서는 React Native로 이동시킨 상기 파일들을 모듈화하여 React Native와 연결하는 과정을 다루겠다.