한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.
안드로이드로 확장되는 웹 기술
2016년 10월 13일 목요일
Paper Planes
는 "한 화면에서 다른 화면으로 종이비행기를 던질 수 있다면 어떨까?"라는 단순한 생각으로 시작되었습니다.
이 생각을 구현하기 위한 핵심 기술은 디바이스와 디바이스를 바로 연결할 수 있는 웹 기술을 활용하여 전 세계 각지의 사람들을 연결하는 것입니다. 여기에, 최신 웹 기술, 특히 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
Contents
ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase
검색
Tag
인디게임페스티벌
정책 세미나
창구프로그램
AdMob
AI
Android
Android 12
Android 12L
Android 13
Android 14
Android Assistant
Android Auto
Android Games
Android Jetpack
Android Machine Learning
Android Privacy
Android Studio
Android TV
Android Wear
App Bundle
bootcamp
Business
Chrome
Cloud
Community
compose
Firebase
Flutter
Foldables
Game
gdg
GDSC
google
Google Developer Student Clubs
Google Play
Google Play Games
Interview
Jetpack
Jetpack Compose
kotlin
Large Screens
Library
ma
Material Design
Material You
ML/Tensorflow
mobile games
Now in Android
PC
Play Console
Policy
priva
wa
wear
Wearables
Web
Web/Chrome
Weeklyupdates
WorkManager
Archive
2024
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2023
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2022
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2021
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2020
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2019
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2018
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2017
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2016
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2015
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2014
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2013
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2012
12월
11월
10월
9월
8월
7월
6월
5월
3월
2월
1월
2011
12월
11월
Feed
