안드로이드로 확장되는 웹 기술
2016년 10월 13일 목요일
Paper Planes 는 "한 화면에서 다른 화면으로 종이비행기를 던질 수 있다면 어떨까?"라는 단순한 생각으로 시작되었습니다.
이 생각을 구현하기 위한 핵심 기술은 디바이스와 디바이스를 바로 연결할 수 있는 웹 기술을 활용하여 전 세계 각지의 사람들을 연결하는 것입니다. 여기에, 최신 웹 기술, 특히 JavaScript와 WebGL은 멋진 종이비행기 비행 화면을 그릴 수 있는 기반이 되었습니다.
Paper Planes 는 Google I/O 2016의 기조연설에 앞서 30분 동안 참가자와 외부 관중을 연결하는 모습을 보여줌으로써 처음으로 소개되었습니다. 2016년 유엔 세계 평화의 날에 공개 출시하기 위해 저희는 Android Experiment를 제작했습니다. Google Play에서도 추천 앱으로 제공되었습니다. 전 세계 어디에서든 여러분이 접은 비행기가 잡히면 이를 알려주는 알림 기능을 포함해, 안드로이드 누가(Nougat) 기능을 활용하였고, 동시에 기존의 웹 기술을 확장해 사용하였습니다.
그 후에, 사용자는 다시 확인해 자신이 날려 보낸 비행기가 세계 어디에서 잡혔는지 볼 수 있습니다. 비행기에 찍힌 각각의 스탬프는 여권처럼 읽혀지고, 3차원 지구에 비행 경로와 비행 거리가 강조표시됩니다.
자신만의 비행기를 만드는 것 외에도, 사용자는 자신의 휴대폰을 가지고 그물처럼 동작을 취하여 세계 각지에서 던진 비행기 하나를 잡아서 열면 비행기가 어디를 거쳐왔는지 볼 수 있습니다. 그런 다음, 자신의 스탬프를 추가하고 종이비행기 무리로 다시 던질 수 있습니다.
WebGL
로우 폴리(low-poly) 스타일의 지구부터 무리를 지어 날아다니는 비행기까지, WebGL을 사용해 이 환경을 구동하는 3차원 요소를 렌더링했습니다. 저희는 지구에 빛을 비추기 위해 맞춤형 GLSL 셰이더를 작성하고 사용자가 종이비행기를 잡아 열거나 닫을 때 비행기에 애니메이션 효과를 주기 위해 모프 타깃(morph target)을 작성했습니다.
WebSocket
사용자가 비행기를 "던지면" 메시지가 websocket을 통해 백엔드 서버로 전송되며, 여기서 비행기가 모든 데스크톱 컴퓨터로 전달되어 날아오르는 비행기가 시각화됩니다.
WebWorker
비행기가 무리 지어 날아다니는 시뮬레이션은 각 비행기의 위치를 계산하여 해당 정보를 WebGL에서 렌더링되는 주 스레드로 다시 전달하는 WebWorker를 사용하여 여러 스레드에 걸쳐 계산됩니다.
여러 플랫폼에서 훌륭하게 작동하는 환경을 구축하기 위해 기본 안드로이드 코드를 사용하여 웹을 확장했습니다. 안드로이드에 긴밀하게 통합된 Chromium을 활용하여 이미 존재하는 웹 코드로 애플리케이션의 뷰 계층을 생성하는 동시에, 풍부한 기능의 알림과 백그라운드 서비스 등, OS에 긴밀히 통합되는 기능을 추가할 수 있게 되었습니다.
WebView와 Java 코드를 연결하는 방법에 대해 더 알아보고 싶으면 이 GitHub 리포지토리에서 가이드를 확인하시기 바랍니다.
알림
안드로이드 앱에 푸시 알림을 전송하는 데는 FCM(Firebase 클라우드 메시징)이 사용되었습니다. 다른 사람이 사용자의 비행기를 잡아 날리면 비행기가 경유한 도시 수와 거리(마일)를 보여 주는 알림이 FCM을 통해 비행기를 만든 사람의 기기로 전송됩니다. 발신되는 알림은 기기에 너무 자주 전송되지 않도록 적절히 관리됩니다.
백그라운드 서비스
저희는 하루에 한 번 실행되면서 로컬 저장소를 기준으로 검사하여 사용자가 마지막으로 앱을 방문한 시기를 확인하는 백그라운드 서비스를 구현했습니다. 사용자가 2주일 이상 방문한 적이 없을 경우, 이 앱은 사용자가 앱을 다시 실행하여 새 비행기를 만들어 던져보라고 초대하는 알림을 전송합니다.
통신 네트워크
저희 애플리케이션은 Google Cloud Platform을 기반으로 하는 서버 네트워크에서 실행됩니다. 저희는 내장된 지오코딩 헤더를 사용하여 스탬프의 지리적 근사 위치를 가져오고 Socket.IO를 사용하여 WebSocket을 통해 모든 기기를 연결했습니다.
사용자는 가장 가까이 있는 서버에 접속하게 됩니다. 이 서버에서 단 하나의 메인 서버는 물론, 해당 지역에서 이 환경에 접속한 모든 데스크톱 컴퓨터로 메시지를 전달합니다.
향후 발전
이 접근 방식은 극히 훌륭한 효과를 발휘해, 모든 플랫폼과 폼 팩터에 걸쳐 원활하고 매력적인 환경을 지원하고 전 세계 각지의 사람들을 연결해 줍니다. 기본 기능을 사용하여 웹을 확장하는 것은 앞으로 탁월한 품질의 환경을 제공하기 위한 아주 유용한 경로가 된다는 것이 입증되었습니다. Android Experiments 웹사이트에서 자세한 내용을 확인하실 수 있습니다.
개발자 게스트 게시자: Active Theory
이 생각을 구현하기 위한 핵심 기술은 디바이스와 디바이스를 바로 연결할 수 있는 웹 기술을 활용하여 전 세계 각지의 사람들을 연결하는 것입니다. 여기에, 최신 웹 기술, 특히 JavaScript와 WebGL은 멋진 종이비행기 비행 화면을 그릴 수 있는 기반이 되었습니다.
Paper Planes 는 Google I/O 2016의 기조연설에 앞서 30분 동안 참가자와 외부 관중을 연결하는 모습을 보여줌으로써 처음으로 소개되었습니다. 2016년 유엔 세계 평화의 날에 공개 출시하기 위해 저희는 Android Experiment를 제작했습니다. Google Play에서도 추천 앱으로 제공되었습니다. 전 세계 어디에서든 여러분이 접은 비행기가 잡히면 이를 알려주는 알림 기능을 포함해, 안드로이드 누가(Nougat) 기능을 활용하였고, 동시에 기존의 웹 기술을 확장해 사용하였습니다.
소개
사용자는 자신만의 비행기를 만들고 접는 동시에 자신의 위치가 미리 입력된 스탬프를 추가할 수 있습니다. 간단하게 던지는 동작을 취하면 비행기가 가상 환경으로 날아갑니다. 데스크톱 웹사이트를 방문하는 사용자는 비행기가 화면으로 날아가는 것을 볼 수 있습니다.
그 후에, 사용자는 다시 확인해 자신이 날려 보낸 비행기가 세계 어디에서 잡혔는지 볼 수 있습니다. 비행기에 찍힌 각각의 스탬프는 여권처럼 읽혀지고, 3차원 지구에 비행 경로와 비행 거리가 강조표시됩니다.
자신만의 비행기를 만드는 것 외에도, 사용자는 자신의 휴대폰을 가지고 그물처럼 동작을 취하여 세계 각지에서 던진 비행기 하나를 잡아서 열면 비행기가 어디를 거쳐왔는지 볼 수 있습니다. 그런 다음, 자신의 스탬프를 추가하고 종이비행기 무리로 다시 던질 수 있습니다.
WebView
저희는 Google I/O 무대 위에 놓인 50피트짜리 초대형 화면에서 최신 웹 기술을 활용하는 데스크톱과 모바일 기기에 이르기까지 다양한 기기에서 작동하도록 Paper Planes를 개발했습니다.WebGL
로우 폴리(low-poly) 스타일의 지구부터 무리를 지어 날아다니는 비행기까지, WebGL을 사용해 이 환경을 구동하는 3차원 요소를 렌더링했습니다. 저희는 지구에 빛을 비추기 위해 맞춤형 GLSL 셰이더를 작성하고 사용자가 종이비행기를 잡아 열거나 닫을 때 비행기에 애니메이션 효과를 주기 위해 모프 타깃(morph target)을 작성했습니다.
WebSocket
사용자가 비행기를 "던지면" 메시지가 websocket을 통해 백엔드 서버로 전송되며, 여기서 비행기가 모든 데스크톱 컴퓨터로 전달되어 날아오르는 비행기가 시각화됩니다.
WebWorker
비행기가 무리 지어 날아다니는 시뮬레이션은 각 비행기의 위치를 계산하여 해당 정보를 WebGL에서 렌더링되는 주 스레드로 다시 전달하는 WebWorker를 사용하여 여러 스레드에 걸쳐 계산됩니다.
여러 플랫폼에서 훌륭하게 작동하는 환경을 구축하기 위해 기본 안드로이드 코드를 사용하여 웹을 확장했습니다. 안드로이드에 긴밀하게 통합된 Chromium을 활용하여 이미 존재하는 웹 코드로 애플리케이션의 뷰 계층을 생성하는 동시에, 풍부한 기능의 알림과 백그라운드 서비스 등, OS에 긴밀히 통합되는 기능을 추가할 수 있게 되었습니다.
WebView와 Java 코드를 연결하는 방법에 대해 더 알아보고 싶으면 이 GitHub 리포지토리에서 가이드를 확인하시기 바랍니다.
알림
안드로이드 앱에 푸시 알림을 전송하는 데는 FCM(Firebase 클라우드 메시징)이 사용되었습니다. 다른 사람이 사용자의 비행기를 잡아 날리면 비행기가 경유한 도시 수와 거리(마일)를 보여 주는 알림이 FCM을 통해 비행기를 만든 사람의 기기로 전송됩니다. 발신되는 알림은 기기에 너무 자주 전송되지 않도록 적절히 관리됩니다.
백그라운드 서비스
저희는 하루에 한 번 실행되면서 로컬 저장소를 기준으로 검사하여 사용자가 마지막으로 앱을 방문한 시기를 확인하는 백그라운드 서비스를 구현했습니다. 사용자가 2주일 이상 방문한 적이 없을 경우, 이 앱은 사용자가 앱을 다시 실행하여 새 비행기를 만들어 던져보라고 초대하는 알림을 전송합니다.
통신 네트워크
저희 애플리케이션은 Google Cloud Platform을 기반으로 하는 서버 네트워크에서 실행됩니다. 저희는 내장된 지오코딩 헤더를 사용하여 스탬프의 지리적 근사 위치를 가져오고 Socket.IO를 사용하여 WebSocket을 통해 모든 기기를 연결했습니다.
사용자는 가장 가까이 있는 서버에 접속하게 됩니다. 이 서버에서 단 하나의 메인 서버는 물론, 해당 지역에서 이 환경에 접속한 모든 데스크톱 컴퓨터로 메시지를 전달합니다.
향후 발전
이 접근 방식은 극히 훌륭한 효과를 발휘해, 모든 플랫폼과 폼 팩터에 걸쳐 원활하고 매력적인 환경을 지원하고 전 세계 각지의 사람들을 연결해 줍니다. 기본 기능을 사용하여 웹을 확장하는 것은 앞으로 탁월한 품질의 환경을 제공하기 위한 아주 유용한 경로가 된다는 것이 입증되었습니다. Android Experiments 웹사이트에서 자세한 내용을 확인하실 수 있습니다.
개발자 게스트 게시자: Active Theory
