[논문]React Native와 Unity3D를 활용한 크로마키 기반 이미지 합성 모바일 앱 개발

김승준; 서범주; 조성현

doi:10.7583/jkgs.2020.20.4.11

React Native와 Unity3D를 활용한 크로마키 기반 이미지 합성 모바일 앱 개발
Development of a Mobile App Combining React Native and Unity3D for Chromakey-based Image Composition 원문보기

한국게임학회 논문지 = Journal of Korea Game Society, v.20 no.4, 2020년, pp.11 - 20

김승준 (홍익대학교 일반대학원 게임학과) , 서범주 (홍익대학교 일반대학원 게임학과) , 조성현 (홍익대학교 일반대학원 게임학과)

초록
AI-Helper

모바일 시장에서는 앱을 빠르게 개발하여 시장의 평가를 받는 것이 중요하다. 하지만 소규모 회사에서 단편화된 모바일 환경에 대응하여 제품을 신속하게 개발하고 배포하는 것은 어려운 일이다. 본 연구에서는 높은 수준의 기능과 성능을 요구하는 모바일 앱 개발 시에 크로스 플랫폼 솔루션인 React Native와 Unity3D를 동시에 활용하여 제작한 통합 개발 결과물이 요구 조건을 충족할 수 있음을 보인다. 또한 크로스 플랫폼을 통합한 개발 방식이 모바일 앱의 개발기간을 단축하고 개발 비용을 절감할 수 있음도 보여준다.

Abstract ▼ AI-Helper

In the rapidly changing mobile app market, it is crucial to develop a good idea quickly and receive its market evaluation. For a small-sized company, however, it is very challenging to rapidly develop and deploy their products in response to highly fragmented mobile environments. This article demonstrates that our integrated development environment using both React Native and Unity3D when developing a mobile app achieves a high level of functionality and performance requirements successfully. Moreover, this integrated environment helps reduce development costs and shorten development time.

주제어

표/그림 (8)

그림 [Fig. 1] Overview of Our Fairy Tale Service
그림 [Fig. 2] Constructing Interactable Image Combining Original with Guide Images
그림 [Fig 3]. Chromakey Editing Process
그림 [Fig. 4] Android App Building Process of Our Integrated Development Environment.
표 [Table 1] Pros and Cons of Our Integrated Development Environment
표 [Table 2] Android Devices Used for Performance Measurements
그림 [Fig. 5] Distributions of Upload Response Times over Different Image File Sizes
그림 [Fig. 6] Distribution of Upload Response Times over Test Periods

AI 본문요약
AI-Helper

* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.

문제 정의

본 연구에서는 React Native 프레임워크와 Unity3D 게임엔진을 통합한 개발환경을 활용하여 각 크로스 플랫폼에 특화된 기술을 적절하게 적용하여 크로마키 처리를 기반으로 이미지를 합성하는 모바일 앱 개발 사례를 소개하였다.
본 연구에서는 UI/UX 컴포넌트 개발에 유리한 웹 기술은 React Native 플랫폼을 활용하여 개발하고, React Native에서 매우 제한적으로 제공하는 실시간 이미지 처리와 같은 특화 기능들은 Unity3D를 활용하여 개발하고자 한다[8].
이 앱을 안드로이드에 적용하여 해당 기기들에서 기능성, 안정성, 네트워크 성능을 측정하여 다양한 안드로이드 기기에서 실제 운용가능성 여부를 알아본다. 본 연구에서는 동화책 편집을 위한 모바일 앱을 대상으로 크로마키 처리를 통한 실시간 이미지 합성 기능을 구현하고자 한다.
본 연구에서는 웹 기술을 기반으로 함으로써 새로운 기술 도입의 장벽을 줄이고 동시에 성능 저하 요인을 줄이는 방안으로 Facebook에서 개발한 React Native 프레임워크를 기반으로 한 모바일 앱 개발 방법론의 실제 활용 가능성을 알아보고자 한다. React Native는 웹 기술을 확장하였기 때문에 기존 웹기반 프로그래밍에 익숙한 개발자를 수용할 수 있으며, Virtual DOM과 같이 렌더링 성능 개선 요소를 도입하여 모바일 환경에서 네이티브 애플리케이션 수준의 성능을 만족할 수 있는 것으로 기대되고 있다[7].
본 연구에서는 이러한 크로스 플랫폼 기술 중에서 최근 각광받고 있는 React Native와 Unity3D를 적용하여 모바일 앱을 제작할 때, 기능과 성능에서 발생가능한 문제점들이 무엇이며 이를 해결하기 위한 어떤 방안들이 있는지 실제 개발 사례를 통해서 알아본다.
앞에서 기술한 바와 같이 본 논문에서 구현하고자 하는 모바일 앱은 서버와의 통신을 통해 사용자가 동화 내에서 상호작용 가능한 이미지들을 편집하여 자신만의 동화책을 만들 수 있는 기능을 제공하는 것을 목표로 한다. 이를 위해 모바일 앱에 필요한 기능과 성능의 요구사항은 다음과 같다.

제안 방법

다음으로 색상, 명도, 채도 값 조정을 통해 원하는 배경색상을 HSV 공간에서 크로마키 처리하도록 배경 색상, 채도, 명도를 조절하도록 구현하였다([Fig.3](c) 참조). 실시간으로 색상 변경이 가능하여 사용자는 원하는 수준의 전경 객체를 분리할 수 있다.
웹 서비스에는 여러 개의 웹 기반 관리도구로 구성되어 있다. 동화 서비스를 제공하기 위해 동화를 온라인상에서 제작할 수 있는 동화 제작 시스템, 제작된 동화를 수정, 발간할 수 있는 동화 관리 시스템, 스티커 부착 등과 같은 부가 서비스 제공 시스템, 사용자 관리 시스템 등으로 구성된다.
실시간 크로마키 처리는 촬영 중 원본 이미지 픽셀에 대한 원시 데이터 접근을 필요로 하는데, 이는 성능 저하의 요인이 된다. 따라서 전용 필터링 로직을 구현하는 대신 성능을 극대화하기 위해 WebGL에서 제공하는 쉐이더 기능을 활용하였다. 크로마키의 쉐이더 처리는 내장된 그래픽 카드의 기능을 활용함으로써 소프트웨어 기반 크로마키 필터링 처리보다 성능을 향상시킬 수 있다.
3](b) 참조). 모바일 디바이스의 촬영 모드는 한 손 촬영이 가능한 세로 모드(portrait)로 고정하였다. 때문에 원본 이미지의 종횡비를 유지하여 촬영하도록 세로 모드에서 촬영한 이미지를 클리핑(clipping) 처리하고 있다.
모바일 앱 개발에 Unity3D는 2019.2.17.f1 버전, React Native는 0.62 버전을 사용하여 개발하여 통합하였으며, 2020년 3월 24일부터 5월 4일에 걸쳐 운용성 및 성능 테스트를 진행하였다.
본 연구에서는 모바일 앱 개발에 상대적으로 용이한 크로마키를 기반으로 분리한 전경 객체를 동화의 배경에 합성하는 방법을 사용한다.
본 연구에서는 모바일 앱에서 크로마키 처리 기법을 활용하여 사용자가 자신이 원하는 이미지 객체를 기존 동화 페이지에 합성하고 동화를 재생하는 방법을 사용한다.
본 장에서는 클라이언트에서 서버로 크로마키 처리된 이미지를 전송하는 데 걸리는 응답시간과 처리 성공률에 대한 성능평가 결과를 제시한다.
이를 위해 기능 및 성능 측면에서 높은 수준의 요구사항을 갖는 모바일 앱을 개발하였다. 이 앱을 안드로이드에 적용하여 해당 기기들에서 기능성, 안정성, 네트워크 성능을 측정하여 다양한 안드로이드 기기에서 실제 운용가능성 여부를 알아본다. 본 연구에서는 동화책 편집을 위한 모바일 앱을 대상으로 크로마키 처리를 통한 실시간 이미지 합성 기능을 구현하고자 한다.
React Native로 개발된 컴포넌트와 Unity3D로 개발된 컴포넌트는 가이드 URI 이미지 정보(종횡비 정보, URI 주소 정보 등) 전달과 편집 완료 정보 등을 지속적으로 교환할 수 있어야 하며, 이를 위해 UnityView에서 제공하는 메시지 전달방식을 사용한다. 이러한 메시지 정보들을 JSON 형태로 가공하여 전달하도록 구현하였다.
이 기법으로 원하는 배경 색상 및 명도, 채도를 실시간으로 설정하여 원하는 전경 객체가 시각적으로 추출되는지 확인하는 작업이 필요하다. 이러한 실시간성은 React Native에서 직접 제공하지 않기 때문에 Unity3D를 이용하여 구현하였다.
이를 위해 기능 및 성능 측면에서 높은 수준의 요구사항을 갖는 모바일 앱을 개발하였다. 이 앱을 안드로이드에 적용하여 해당 기기들에서 기능성, 안정성, 네트워크 성능을 측정하여 다양한 안드로이드 기기에서 실제 운용가능성 여부를 알아본다.
서버에 업로드된 이미지는 성능 향상 및 안정성을 높이기 위해 이미지 해상도를 낮춘 이미지로 변경하였으며, 모바일 앱은 서버로부터 해상도가 변경된 이미지를 받아 앱 내부 캐시에 저장하였다. 이미지를 읽을 때 캐시에서 먼저 이미지를 읽도록 URI 정보를 수정하였다. 따라서 캐시에 있으면 캐시에서 읽고, 없으면 서버에서 읽어오도록 함으로써 React Native에서 기존에 제공하는 Image 컴포넌트의 기능을 수정 없이 사용할 수 있었다.
CSS를 이용한 애니메이션을 제공하며, 복잡한 수준의 애니메이션은 스크립트 프로그래밍을 통해 지원하고 있다. 이와 유사한 path.js, raphael.js 등이 있으나 본 연구에서는 다양한 객체들을 캔버스에 편리하게 배치할 수 있도록 구현된 fabric.js를 선정하였다.
크로마키 처리시 실시간 크로마키 처리를 위해 모바일 앱에서 제공하는 GPU를 활용한 크로마키 쉐이더를 사용하여 구현하였다. 실시간 크로마키 처리는 촬영 중 원본 이미지 픽셀에 대한 원시 데이터 접근을 필요로 하는데, 이는 성능 저하의 요인이 된다.
따라서 크로마키 처리에 따른 이미지 파일 용량 줄이기가 응답시간 성능에 큰 영향을 미친다. 테스트 기간 중 크로마키 처리로 생성된 모든 이미지에 대한 업로드 응답시간을 측정하였다. 그 결과는 [Fig.

대상 데이터

Web 표준 기술로 널리 쓰이는 HTML5와 CSS3, Javascript를 기반으로 앱에서 요구하는 성능을 만족시키는 기술로 PWA 기술이 발전해오고 있으나, 아직 만족스러운 성능을 제공하지 못하기 때문에 모바일 앱 개발에 무리가 있다. 그래서 본 연구에서는 유연한 이식성과 성능을 제공할 수 있는 React Native와 Unity3D를 기본 개발 환경으로 선정하였다.
테스트에 사용한 웹서버는 카페24 웹 호스팅에서 제공하는 10G 광아우토반 full SSD 퍼스트클래스 6G 서비스로서 하드디스크 용량은 4GB, 스트리밍 용량은 5.5GB로 PHP 7.3 MariaDB 10.0버전이 설치되어 있다. 테스트로 사용한 모바일 디바이스들은 [Table 2]와 같다.

이론/모형

UI/UX 요소는 React Native의 JSX를 기반으로 화면 구성 작업 및 상호작용을 단순화하였으며, 사용자 터치를 기반으로 실시간 이미지 촬영, 크로마키 처리 및 편집 기능 등은 Unity3D 개발 환경을 활용하였다. 이들 상이한 개발 환경을 통합 운영함으로써 각 플랫폼에서 제공하는 특화된 기능을 적절하게 분배하고 사용하여 7개월의 짧은 개발 기간에 2명의 개발 인원(UI/UX 디자이너 제외)으로 목표하던 기능과 성능의 요구사항들을 만족할 수 있었다.
동화책 앱에서 사용되는 동화 제작 기술 및 그 저장 형식을 설명한다. 동화책을 꾸미는 기반 도구로 오픈 소스인 fabric.js[12]를 활용한다. fabric.
본 연구에서는 모바일 기기에 부착된 카메라를 통해 인식된 비디오 프레임으로부터 원하는 전경 객체를 분리하기 위해 크로마키 필터링 기법을 사용한다. 이 기법으로 원하는 배경 색상 및 명도, 채도를 실시간으로 설정하여 원하는 전경 객체가 시각적으로 추출되는지 확인하는 작업이 필요하다.
전체 페이지 구성 및 페이지 이동은 React Native로 개발되었으며, 크로마키 처리 및 이미지 편집 작업은 Unity3D로 개발되었기 때문에 두 개의 상이한 개발 환경에서 개발된 모듈들을 연동하는 기술이 필요하다. 본 연구에서는 통합 환경 구축을 위해 Beaulieu가 제시한 방식을 적용하였다[13]. [Fig.
모바일 앱 사용자는 기존 동화 페이지에서 상호작용이 가능한 객체 이미지를 교체할 수 있다. 이때 교체되는 이미지 객체를 생성하기 위해 카메라에서 촬영한 이미지에서 후경 이미지를 제거하는 매팅 기법을 사용한다. 매팅 기법을 적용할 때 전경 이미지객체가 원하는 대로 분리되는지 실시간적으로 확인가능 해야 한다(실시간성).

성능/효과

소프트웨어적으로 보정한 버전을 개발하여 이 문제를 해결하였으나, 다른 기기에 비해 크로마키 편집 속도가 늦었다. 동일 회사 제품군에도 기능상 다양한 문제가 발생하여 안드로이드 기기에서의 운영은 여전히 파편화 현상이 있음을 확인하였다.
본 연구에서는 적정 응답시간은 3초로 설정하였다. 마지막으로 사용자 관리, 동화 보기 및 재생, 동화 페이지 편집 등의 동화 제작 앱으로서 보편적인 기능들이 모바일 기기에서 안정적으로 동작해야 한다(모바일앱 기능성).
1]과 같다. 본 연구에서 제안하는 통합 개발 환경은 웹에서 사용하는 CSS 같은 기술을 적용함으로써 UI 설계 및 개발 프로세스를 획기적으로 단축할 수 있으며 UI 관련 유지보수를 수월하게 해준다.
본 연구에서 크로스 플랫폼들을 통합한 개발 환경 방식이 향후 모바일뿐만 아니라 PC 앱을 개발할 때 개발 비용을 절감하고 개발 시간을 단축할 수 있음을 보여주었다. 본 연구에서 소개한 통합 개발 방법이 확산되고 보편화되기를 기대한다.
UI/UX 요소는 React Native의 JSX를 기반으로 화면 구성 작업 및 상호작용을 단순화하였으며, 사용자 터치를 기반으로 실시간 이미지 촬영, 크로마키 처리 및 편집 기능 등은 Unity3D 개발 환경을 활용하였다. 이들 상이한 개발 환경을 통합 운영함으로써 각 플랫폼에서 제공하는 특화된 기능을 적절하게 분배하고 사용하여 7개월의 짧은 개발 기간에 2명의 개발 인원(UI/UX 디자이너 제외)으로 목표하던 기능과 성능의 요구사항들을 만족할 수 있었다.
566)이며 평균 이미지 파일크기는 979KB (±391KB)이다. 이상치(outlier)값에 따른 민감도를 줄인 중간 값 응답시간은 2.214초로 목표 수치인 3초 이내로 안정적이었으며, 파일크기 중간 값은 954KB로 이상치의 영향이 크지 않음을 알 수 있다.
반면, 다음과 같은 통합 개발 환경의 단점들도 있다. 첫째, React Native와 Unity3D 게임엔진의 버전에 따라서 통합 개발 환경을 구축할 때 추가 혹은 삭제 방식이 상이하다. React Native는 지속적으로 업데이트되는 오픈소스로 기능의 추가, 변경, 삭제가 빈번하다.
크로마키 처리된 이미지의 데이터 업로드 속도는 이미지 파일의 크기에 의존한다. 크로마키 처리되지 않은 일반적인 압축된 이미지 파일의 경우, 촬영 해상도에 크게 좌우되며 본 연구에서 사용한 1080x1920 이미지 해상도를 기준으로 평균 2MB 정도의 용량을 차지하였다. 따라서 크로마키 처리에 따른 이미지 파일 용량 줄이기가 응답시간 성능에 큰 영향을 미친다.
따라서 전용 필터링 로직을 구현하는 대신 성능을 극대화하기 위해 WebGL에서 제공하는 쉐이더 기능을 활용하였다. 크로마키의 쉐이더 처리는 내장된 그래픽 카드의 기능을 활용함으로써 소프트웨어 기반 크로마키 필터링 처리보다 성능을 향상시킬 수 있다.
0으로 업그레이드를 한 후에 운용성을 확인하였다. 테스트에 사용한 기기 11개(삼성 10종, LG 1개) 모두 모바일 앱 운용성 테스트를 통해 로그인, 로그아웃, 동화 목록 보기, 동화 재생, 동화 페이지 편집 기능들이 정상 동작함을 확인하였다.

후속연구

본 연구에서 크로스 플랫폼들을 통합한 개발 환경 방식이 향후 모바일뿐만 아니라 PC 앱을 개발할 때 개발 비용을 절감하고 개발 시간을 단축할 수 있음을 보여주었다. 본 연구에서 소개한 통합 개발 방법이 확산되고 보편화되기를 기대한다.

질의응답

핵심어	질문	논문에서 추출한 답변
	Progressive Web Apps 기술의 활용범위가 정체된 이유는 무엇인가?	최근 One Source Multi Use(OSMU)라는 개념으로 다양한 플랫폼에 대응하여 수많은 모바일 기기 종류에 적용 가능한 크로스 플랫폼 개발 기술들이 도입되어 개발자들의 부담을 경감시키고 있다[1]. 또한 개발자가 접근하기 쉬운 성숙한 웹기반 기술을 적극적으로 활용한 Progressive Web Apps (PWA) 기술은 기존 네이티브 솔루션, 크로스 플랫폼 솔루션과 경쟁하고 있으나 성능이 기대에 미치지 못해 활용범위가 정체되어 있다[2].
	크로스 플랫폼 개발을 지원하는 다양한 개발 환경은 어떤 형태로 나타나고 있는가?	크로스 플랫폼 개발을 지원하는 다양한 개발 환경은 오픈소스 형태로 혹은 판매용 제품 형태로 나타나고 있다. 널리 사용되는 제품들로는 Ionic, PhoneGap, React Native, Xamarin 등이 있다[3].
	크로스 플랫폼 개발을 지원하는 다양한 개발 환경의 제품 형태로는 어떤 것들이 있는가?	크로스 플랫폼 개발을 지원하는 다양한 개발 환경은 오픈소스 형태로 혹은 판매용 제품 형태로 나타나고 있다. 널리 사용되는 제품들로는 Ionic, PhoneGap, React Native, Xamarin 등이 있다[3]. Ionic이나 PhoneGap은 웹과 전용 기술을 혼합한 형태로 제공하고 있으며, React Native는 Javascript를 활용하여 플랫폼별로 제공되는 네이티브 인터페이스 컴포넌트를 브리지 형태로 연결하여 사용한다.

참고문헌 (14)

YoungHyun Chang and SangYeob Oh, "A study on the development of one source multi use cross-platform based on zero coding", Multimedia Tools and Applications Vol. 74, No. 7, pp. 2219-2235, 2015.

상세보기
Andreas Biorn-Hansen, Tim A. Majchrzak, and Tor-Morten Gronli, "Progressive Web Apps: The Possible Web-native Unifier for Mobile Development", In WEBIST, pp. 344-351, 2017.
Majchrzak, T. A., Biorn-Hansen, A., and Gronli, T.-M, "Comprehensive analysis of innovative crossplatform app development frameworks", In Proc. 49th HICSS. IEEE Computer Society, pp. 6162-6171, 2017.
https://unity.com
https://www.unrealengine.com
Scott Forstall and Imran Chaudhri, "Webview applications", U.S. Patent Application No. 11/145,560, 2006.
B. Eisenman, "Learning react native: building native mobile apps with javascript", O'Reilly Media Inc., 2015.
T. Norton, "Learning C# by developing games with unity 3D", Packt Publishing Ltd, 2013.
A. Smith, J. Blinn, "Blue Screen Matting", Proc. of SIGGRAPH '96. pp. 259-268. 1996.
Swarnendu Ghosh, Nibaran Das, Ishita Das, and Ujjwal Maulik, "Understanding Deep Learning Techniques for Image Segmentation", ACM Computing Surveys, Vol. 52, No. 4, Article 73, 2019.

상세보기
R. Battle and E. Benson, "Bridging the semantic Web and Web 2.0 with representational state transfer (REST)" Journal of Web Semantics 6(1), pp. 61-69, 2008.

상세보기
Juriy Zaytsev, Stefan Kienzle, and Andrea Bogazzi. "Fabric. js-a powerful and simple Javascript HTML5 canvas library", 2008.
F. Beaulieu, "Part 1. Show Unity3D view in React-Native application. Yes it's possible!", URL: https://medium.com/@beaulieufrancois/show-unity3d-view-in-react-native-application -yes-its-possible-852923389f2d, 2018.
React Native UnityView, “react-native-unity-view”,URL:https://www.npmjs.com/package/react-native-unity-view, 2018.

저자의 다른 논문 :

표제어: PCR

동의어: Packet Collision Rate

용어 설명 출처 목록 (6)

용어 설명: PCR은 세균 특이성이 있는 primer를 이용하여 적은 수의 세균이 있을지라도 쉽게 검출할 수 있는 유용한 방법이며, 이를 이용하여 구강 내 치면세균막이나 타액에서 직접 세균을 검출할 수 있게 되었다[8].

내보내기 구분	파일저장 인쇄 메일전송
구성항목	기본정보 상세정보 관리번호, 논문명, 저널/프로시딩명, 저자 , 발행년, 권, 호, 시작페이지, 끝페이지, 발행기관 관리번호, 논문명, 대등논문명, 저자 , 저널/프로시딩명, 발행기관, 발행년, 발행언어, 권, 호, 시작페이지, 끝페이지, ISBN, ISSN, 주제분야, 키워드, 초록(한글), 초록(영문), 저자(소속기관)
저장형식	Text(ASCII format) Excel format RefWorks Direct Export RIS format (for Reference Manager, ProCite, EndNote), Scholar's Aids, Mendeley
메일정보	받는사람 (필수) @ 보내는사람 (선택) @ 제목 내용 KISTI 검색결과 이메일 서비스
안내	총 건의 자료가 검색되었습니다. 다운받으실 자료의 인덱스를 입력하세요. (1-10,000) 검색결과의 순서대로 최대 10,000건 까지 다운로드가 가능합니다. 데이타가 많을 경우 속도가 느려질 수 있습니다.(최대 2~3분 소요) 다운로드 파일은 UTF-8 형태로 저장됩니다. 파일의 내용이 제대로 보이지 않을실 때는 웹브라우저 상단의 보기 -> 인코딩 -> 자동선택 여부를 확인하십시오. ~ Text(ASCII format) Excel format

연합인증