FlyWeb 은 Mozilla 플랫폼 부문에서 프로토타입으로 개발하고 있는 실험 프로젝트입니다. FlyWeb 은 작년에 곁가지 프로젝트로 시작했습니다. 그 뒤로 작은 임시 팀이 할당되어 개념 증명을 위한 “버전 제로” 구현을 시작했습니다. 지난 6개월 동안 우리는 이것저것 실험하며 개발했습니다. 이제 FlyWeb 에 대해 편하게 이야기할 수 있는 단계가 되었습니다. 웹 개발자들과 하드웨어 해커들이 특히 FlyWeb 에 관심을 가질 것 같습니다.

근본적으로, 우리가 추구하는 목표는 하나입니다. 물리적으로 가까이에 있는 사람들이나 기계들이 어플리케이션과 컨텐츠를 쉽게 주고받을 수 있게 하는 것입니다. 그렇게 하기 위해서, 우리는 누군가 자신을 “로컬 웹 서버”라고 선언하는 과정을 아주 간단하게 만들고 싶었습니다. 그리고 브라우저를 통해서 그 로컬 웹 서버를 발견하고 거기에 접속하는 과정도 아주 간단하게 만들고 싶었습니다. 이런 아키텍처가 기반으로 제공된다면 당신을 비롯해서 다른 개발자/해커들이 뭐든지 마음껏 만들 수 있을 것입니다.

FlyWeb 서버는 당신의 컴퓨터나 스마트폰에 로드된 웹-페이지 안에서 실행될 수도 있고, 또는 같은 네트워크에 연결되어 있는 작은 하드웨어 디바이스에서 실행될 수도 있습니다. FlyWeb 서버는 “인터넷”에 붙기 위해 설계된 것이 아닙니다. 로컬 네트워크 안에 가까이 모여 있는 사람들(즉, 물리적으로 바로 옆에 있는 사람들)을 위해 설계된 것입니다.

FlyWeb 의 설계는 간단합니다. FlyWeb 서버는 mDNS 를 이용해서 스스로를 로컬 네트워크에 알리는(advertise) 웹 서버입니다. Firefox Nightly 버전에, 주변에 있는 FlyWeb 서비스들의 목록을 보여주는 작은 UI 엘리먼트가 추가됐습니다 (dom.flyweb.enabled 설정이 true 일 때만 동작하며 디폴트 상태는 off 입니다). 브라우저에 표시된 FlyWeb 서비스 목록에서 접속할 서비스를 선택하면, 브라우저는 해당 서비스를 위해 고유한 “UUID hostname” 을 생성합니다. 그리고 해당 hostname 으로 요청되는 모든 URL 을 해당 서비스로 라우팅합니다. 우리는 Web API 를 확장해서 navigator.publishServer() 함수를 새로 만들었습니다. 이 함수를 이용해서 웹 페이지가 로컬 네트워크에 FlyWeb 서버를 공개합니다(publish). 웹 페이지가 FlyWeb 서버를 공개하려고 하면 사용자에게 이를 허용할지 묻는 대화상자가 팝업됩니다.

이 설계가 지원하려 하는 유즈케이스는 2가지입니다. 하나는 브라우저와 브라우저 사이의 통신입니다. 그리고 다른 하나는 브라우저와 거기에 UI 를 제공하는 “스마트 하드웨어” 사이의 통신입니다. 2가지 유즈케이스 모두 같은 아키텍처에 의해 처리됩니다.

브라우저와 브라우저 사이의 통신

당신이 스마트폰으로 하는 멀티플레이어 게임을 만들고 있다고 가정해봅시다. 지금 말하는 게임은 MMORPG 처럼 거대한 게임이 아니고, 같은 방에 모여있는 사람들끼리 간단히 즐길 수 있는 캐주얼 게임입니다. Catan 이나, Scrabble, 또는 포커 같은 게임 말입니다. 이제 당신은 2가지 방법 중 하나를 선택할 수 있습니다.

1. 스마트폰 앱을 만듭니다

이것은 분명히 되는 방법입니다. 하지만 이 방법을 쓰면 게임을 앱스토어에 올려야 합니다. 그래서 게임을 하기 전에 모든 사람들이 앱을 다운로드 받아야 합니다. 만약 다른 게임을 하고 싶다면, 모든 사람들이 다른 게임을 다운로드 받아야 합니다. 게임 앱은 폰 끼리 서로를 발견하고 접속하기 위해 나름의 통신 프로토콜을 사용할 것입니다.

2. 웹을 기반으로 게임을 만듭니다

이것도 합리적인 방법입니다. 하지만 몇 가지 문제가 있습니다. 모든 사람들이 반드시 게임 웹 사이트에 접속해야 합니다. 그리고 웹 사이트에 계정을 만들어야 합니다 (아니면 무언가 고유한 토큰을 받아야 합니다). 그래야 사람들이 함께 모여 게임을 시작할 수 있습니다. 플레이어들 간의 통신은 게임을 제공하는 호스트 머신을 경유해야 합니다. 그래서 빠른 사용자 입력이 필요한 게임은 서비스하기 어렵거나 불가능합니다. 또, 게임에 참여하는 사람들 모두가 인터넷에 접속한 상태여야 합니다.

FlyWeb 을 이용한 접근방식

위의 2가지 방법 모두 상당한 사용자 저항을 유발합니다. FlyWeb 을 이용하면 당신은 해당 게임을 웹 게임 형태로 개발할 수 있습니다. 하지만 클라우드를 이용하지 않고서도 멀티플레이어 게임을 만들 수 있습니다. 게임 페이지 자체가 인근에 존재하는 여러 플레이어들을 서비스할 수 있습니다. 이것이 어떻게 가능한지 설명하겠습니다.

1. 그룹내 한 사람이 게임 웹 사이트에 접속합니다. 그리고 게임 안에서 새로운 멀티플레이어 세션을 시작합니다.
2. 해당 게임이 navigator.publishServer() FlyWeb API 를 호출합니다. 그러면 인근에서만 접근할 수 있는 로컬 서버가 오픈(publish)됩니다. publishServer 는 Promise 를 리턴합니다. 이를 통해 FlyWebPublishedServer 객체를 얻을 수 있습니다. 해당 게임은 FlyWebPublishedServer 객체에 이벤트 핸들러를 바인드해서 HTTP/WebSocket 리퀘스트를 처리합니다.
3. 주변 친구들은 브라우저를 통해서 해당 게임을 찾고, 해당 게임에 직접 접속합니다.
4. 친구들이 모두 접속하면, 호스트 웹 페이지에서 FlyWebPublishedServer 이벤트 핸들러가 호출됩니다. 호스트 웹 페이지는 웹 서버처럼 동작합니다. 그래서 자기 자신의 복제본을 접속한 모든 친구들에게 전달합니다 (그리고 접속한 상대방을 계속 관리합니다). 해당 게임이 빠른 커뮤니케이션을 필요로 할 경우, “클라이언트” 웹 페이지는 호스트 웹 페이지를 상대로 웹소켓 커넥션을 만들 수 있습니다.
5. 이제 모든 친구들이 함께 플레이합니다. 해당 게임이 연결되어 있는 한, “호스트 페이지”와 플레이어 페이지들 사이의 통신은 HTTP 통신과 WebSocket 통신 같은 웹 표준 기술을 이용해서 수행됩니다.

어느 누구도 앱을 다운로드 받을 필요가 없습니다. 어느 누구도 계정을 만들거나 고유 토큰을 만드는 복잡한 절차를 밟을 필요가 없습니다. 해당 게임을 호스팅하는 브라우저만 “서버” 페이지를 가져오기 위해 인터넷에 연결하면 됩니다 (Service Worker 같은 새로운 웹 기술을 사용한다면, 인터넷 연결조차 필요 없을 수 있습니다). 해당 게임은 순수한 웹 프로토콜을 이용해서 만들 수 있습니다. 모든 통신은 게임하기에 충분할 만큼 빠르게 처리됩니다. 기본적으로, 로컬 네트워크와 FlyWeb 기능을 지원하는 브라우저만 있으면 다른 어떤 인프라 없이도 멀티유저 경험을 만들 수 있습니다.

예제로 보여주기 위해, Justin 이 FlyWeb 을 이용해서 Unity WebGL 기반 자동차 경주 데모를 만들었습니다. 이 데모는 마리오카트처럼 4명의 플레이어가 분할된 화면을 공유합니다. Mozilla 토론토 사무실에서 Kannan 이 간단하게 게임 세션을 열었습니다.

이 예제에서는 랩탑 브라우저가 “게임 콘솔” 역할을 합니다. 그리고 스마트폰의 FlyWeb 클라이언트가 게임 컨트롤러 역할을 합니다. 스마트폰 브라우저는 랩탑 웹 페이지에 존재하는(hosted) 게임 서버를 찾아서 연결합니다. 그리고 “컨트롤러 UI” 웹 페이지를 다운 받습니다. 이제 폰에 로드된 컨트롤러 페이지는 호스트 페이지와 웹소켓 커넥션을 맺습니다. 그래서 웹소켓 커넥션을 통해 터치 조작과 핸들 조작을 전송합니다.

만약 안드로이드 폰과 랩탑을 갖고 있다면, 지금 당장 이 데모를 실행해볼 수 있습니다 (원한다면, 소스코드도 다운로드 받아서 수정해볼 수 있습니다). flyweb.github.io 에 접속해서 지시사항 대로 따라 해 보세요. 그리고 페이지의 “Showcase” 섹션에 있는 데모 링크를 방문해보세요. 해당 게임은 GitHub 페이지를 이용해서 호스트되고 있습니다. 그리고 소스코드는 GitHub repo 의 “flyweb-gp” 폴더 아래에 있습니다.

GitHub repo 에 존재하는 “flyfile” 과 “photo-wall” 서브폴더도 살펴보세요. 웹을 통해서 스마트폰들끼리 파일을 공유하는 보다 간단한 데모가 있습니다.

스마트 하드웨어

당신이 하드웨어 디바이스를 만들고 있다고 가정해 봅시다. 매력적인 온도조절기일 수도 있고, 아니면 직접 만든 쿼드콥터 드론일 수도 있습니다. 좋습니다! 이제 당신은 그것을 조종할 UI 가 필요합니다. 당신에게는 몇 가지 선택지가 존재합니다.

1. 스마트폰 앱을 만듭니다

아마도 이것이 가장 처음 생각나는 선택지일 것입니다. 하지만 여기에는 약간의 문제가 있습니다. 스마트폰 앱을 만드는 것은 어렵습니다. 당신은 개발 환경을 구축해야 하고, 당신이 선택한 플랫폼에 맞춰 SDK 와 빌드 도구 등을 다운로드 받아야 합니다. 당신은 앱을 작성하고, 컴파일한 다음, 당신의 폰으로 로드해야 합니다. 당신이 만든 앱을 다른 사람도 쉽게 쓰게 하려면, 해당 앱을 앱스토어에 등록하고 관리해야 합니다 (이를 위해서는 앱스토어의 승낙이 필요합니다). 이건 아주 큰 장애요소입니다.

더욱이, 당신은 이 앱을 모든 타겟 플랫폼 별로 빌드해야 합니다. 혹시 해당 앱을 폰 뿐만 아니라 Windows 랩탑이나 Mac 랩탑에서도 사용하고 싶나요? 앱을 더 만드세요. 이건 분명히 개발자에게 편한 길이 아닐 것입니다.

2. 당신이 만든 디바이스에서 서비스되는 웹 UI 를 만듭니다

이 접근법은 상당히 간단합니다. 당신은 네이티브 앱을 만들 필요가 없습니다. 이렇게 만든 UI 는 다양한 플랫폼 위에서 실행됩니다. 앱스토어에 앱을 등록할 필요도 없습니다. 사이드-로딩 하기 위해 앱을 하나의 번들로 묶을 필요도 없습니다. 하지만 UI 에 접속하기가 어렵습니다. 당신은 반드시 브라우저를 열어야 합니다. 그리고 어떻게 해서든 디바이스의 IP 주소를 찾아서 입력해야 합니다.

이것 역시 에러가 발생하기 쉽습니다. 만약 당신이 나중에 다른 로컬 네트워크에 존재하는 다른 서비스를 동일한 사설 IP 주소로 이용하게 된다면 (예를 들어 192.168.1.1:80), 그 서비스가 이전 서비스의 쿠키를 훔칠지도 모릅니다. 캐시도 주의해서 사용해야 합니다. 왜냐하면 당신이 두 번째 서비스를 방문할 때 첫 번째 서비스로부터 캐시된 페이지를 보게 될 수도 있기 때문입니다.

FlyWeb 접근법

FlyWeb 접근법은 기본적으로 선택지 2번과 동일합니다. 하지만 약간의 마법이 추가됩니다. 첫 번째 마법은 mDNS 를 이용한 서비스 알림(advertising) 기능과 브라우저 UI 를 통해 제공되는 서비스 검색 기능입니다. FlyWeb 을 이용할 경우, 수동으로 서비스의 IP 주소를 찾아서 입력하지 않습니다. 두 번째 마법은 자동으로 생성되는 고유한 호스트네임(hostname)입니다. 현재 구현된 방식에 따르면, 당신이 서비스에 연결할 때마다 브라우저는 UUID 를 이용해서 해당 서비스를 위해 고유한 호스트네임을 만듭니다. UUID 는 서비스들 사이에서 절대 공유되지 않습니다. 그래서 우리는 서비스들 사이의 쿠키 유출 문제나 캐시 문제를 피할 수 있습니다.

놀랍도록 재능이 많은 Kate Glazko 의 도움으로, 우리는 FlyWeb 소개 데모를 만들었습니다. Parrot AR 쿼드콥터와 라즈베리파이(쿼드콥터 제어와 FlyWeb 서버 실행을 담당)를 이용한 데모입니다. 2016년 6월에 열린 Mozilla All-Hands meeting 에서 이 데모를 시연했습니다. 여기 데모 동영상이 있습니다.

이 데모의 소스코드도 우리의 예제 레포 (flyweb-quadcopter 폴더 아래)에 존재합니다. 우리는 ESP8266 처럼 간단한 다른 하드웨어 데모도 만들었습니다. ESP8266 는 $5 짜리 WiFi 칩에 임베디드 컨트롤러를 내장시킨 하드웨어입니다. FlyWeb 서버는 극단적으로 미니멀한 하드웨어에서도 실행될 수 있습니다. 작은, 저전력 디바이스도 아주 풍부한 UI 를 제공할 수 있습니다. 왜냐하면 웹 플랫폼 덕분에 작은 디바이스가 자신보다 강력한 스마트폰이나 컴퓨터로 컨트롤 UI 를 전달하기 때문입니다.

다음 계획

현재, 이 기능은 Firefox Nightly 에만 구현되어 제공되고 있습니다 (Aurora 또는 Beta 가 아닙니다). 그리고 pref 설정에서 디폴트 off 되어 숨겨져 있습니다. 현재 구현물은 기본적으로 “version 0” 상태입니다. 단지 놀라운 데모를 만들어 FlyWeb 의 잠재력을 알릴 수 있는 정도의 상태입니다.

팀의 현재 목표는 얼리어댑터 개발자들과 열정적인 사람들이 현재의 구현물을 써보게 만들고 미래에 “진정한” 웹 표준이 될지도 모르는 이 기능이 쓸만한지 피드백을 받는 것입니다. 만약 당신이 멋진 멀티유저 “로컬 에어리어” 경험을 만드는 방법을 찾고 있는 웹 개발자라면, 또는 당신의 창작물에 UI 를 부여할 쉬운 방법을 찾고 있는 하드웨어 해커라면, FlyWeb 을 살펴봐주세요. 써보고 당신의 생각을 알려주세요.

만약 이 기능의 잠재적 가치에 큰 관심이 있거나, 이 기능을 이용해서 무언가 만들고 싶거나, 이 기능의 구현에 참여하고 싶다면 (우리 팀은 2명입니다. 거대 프로젝트가 아닙니다. 아주 실험적인 “비밀” 프로젝트입니다), flyweb.github.io 를 방문해 주세요. Slack 을 통해 우리와 대화할 수도 있습니다. Slack 주소는 mozflyweb.slack.com 입니다 (여기에서 가입합니다). 트위터에서도 우리를 팔로우할 수 있습니다. @MozFlyWeb 입니다.

공지

이것이 아주 초기 단계의 구현물이라는 것을 명심해 주세요. 아마도 버그나 보안상 문제가 있을 것입니다. 정말 FlyWeb 을 사용할 거라면, 별도의 Firefox 프로파일을 만들어 사용할 것을 권합니다. 그러면 평범한 목적으로 웹을 사용할 때 다른 안전한 프로파일을 사용할 수 있기 때문입니다. FlyWeb 데모나 당신이 만든 코드를 실행할 때만 새로 만든 별도의 프로파일을 사용하세요.

Happy hacking! : )

이 글은 Kannan Vijayan 이 쓴 FlyWeb – Pure Web Cross-Device Interaction 의 한국어 번역본입니다.