Neoself의 기술 블로그

네이버에 자동차를 검색하면, 아래와 같이 드래그 동작으로 원하는 각도에서의 이미지 확인이 가능한 360도 이미지 뷰어를 본 적이 있을 것이다. 해당 뷰어는 실제로 3D모델을 사용하기보단, 다각도에서 촬영한 여러 사진들 중 하나를 드래그 제스처에 맞춰 렌더하는 방식으로 동작한다. 라이브러리를 사용하지 않고, React Native 프레임워크에서 해당 기능을 구현해보자. 우선 새로운 기능 구현을 할때마다 항상 그래왔듯 유사한 라이브러리의 깃허브 레포지토리를 확인해 동작방식을 분석해보았다. 구현목표와 가장 근접한 라이브러리는 react-native-360-image-viewer 라이브러리였다.https://github.com/phuochau/react-native-360-image-viewer GitHub -..

React Native 앱의 경우 대표적으로 react-native-splash-screen 라이브러리를 통해 초기 SplashScreen 구현이 가능하다. 하지만 라이브러리들을 일괄적으로 업데이트할때마다 각 라이브러리의 네이티브 코드끼리 충돌이 생기는 이슈를 겪으면서, 라이브러리들을 자체적으로 모듈화하는 것이 유지보수에 더 용이할 것이라는 판단 하에, react-native-splash-screen 라이브러리의 대체방안을 모색하게 되었다. 가장 먼저 시도한 방안은 iOS가 기본 제공하는 LaunchScreen으로 SplashScreen을 구현하는 것이였다. 하지만, React Native로 구현된 앱의 경우 네이티브 앱과 달리 앱 초기 로드 간에 추가적인 단계가 필요하기에 일반적으로 더 많은 시간이 소..

모바일 앱 개발에서 사용자 경험은 매우 중요하다. 특히 데이터를 불러오는 동안 사용자에게 적절한 피드백을 제공하는 것은 필수적이다. 이 글에서는 React Native 환경에서 효과적인 로딩 UI를 구현하는 방법, 특히 스켈레톤 UI를 최적화하는 과정을 다루고자 한다. 서버로부터 데이터를 불러오는 작업은 비동기로 진행되는 경우가 많다. 즉, 데이터를 불러 이를 처음으로 렌더하기까지에는 적지않은 시간이 소요될 수 있다.  이때 적절한 로딩 UI를 제공하지 않으면 다음과 같은 문제가 발생할 수 있다.사용자 혼란: 화면이 비어 있거나 변화가 없으면 사용자는 앱이 멈췄다고 생각할 수 있음잘못된 상호작용: 로딩 중임을 알리지 않으면 사용자가 불완전한 데이터로 작업을 시도할 수 있음부정적인 사용자 경험: 기다림의 ..

현재까지 프로젝트root/android 폴더 내 파일들을 설명하자면 다음과 같다.React Native 초기 생성 때 기본으로 추가되는 MainActivity.kt, MainApplication.ktgvr-android-sdk를 모듈화하여 RN에 연결하기 위한 PanoramaViewManager.java 및 PanoramaViewPackage.java 파일gvr-android-sdk가 제공하는 패키지 및 함수가 호출되고 사용되는 파일들이 위치한 video360 폴더MediaLoader.java = 렌더되는 파노라마 이미지 처리 및 관리 관련 클래스가 구현되어있는 파일VideoUiView.java = 렌더 대상을 이미지와 비디오 사이에서 토글하기 위한 Ui 구현에 필요한 파일MonoscopicView.ja..