이번 주 프로젝트: WebTorrent
이번 주에는 @feross와 @dcposch와 함께 WebTorrent에 대해 이야기를 나눴다. WebTorrent는 웹 기반의 토렌트 클라이언트로, 사용자들을 연결해 분산형 브라우저 간 네트워크를 형성한다.
WebTorrent란 무엇인가?
WebTorrent는 브라우저에서 동작하는 최초의 토렌트 클라이언트이다. 완전히 JavaScript로 작성되었으며, WebRTC를 사용해 피어 간 통신을 가능하게 한다. 브라우저 플러그인, 확장 프로그램, 또는 별도의 설치가 필요하지 않다.
WebTorrent는 오픈 웹 표준을 활용해 웹사이트 사용자들을 연결하여 분산되고 탈중앙화된 브라우저 간 네트워크를 형성한다. 이를 통해 효율적인 파일 전송이 가능하다.
WebTorrent의 동작 데모는 webtorrent.io에서 확인할 수 있다.
이게 왜 멋질까?
YouTube 같은 비디오 사이트를 상상해보자. 하지만 이번에는 방문자들이 사이트 콘텐츠를 호스팅하는 데 직접 참여한다. WebTorrent로 구동되는 웹사이트를 더 많은 사람이 사용할수록, 사이트는 더 빠르고 안정적으로 작동한다.
브라우저 간 직접 통신은 중개자를 없애고, 사람들이 자신의 방식으로 소통할 수 있게 한다. 더 이상 클라이언트/서버 구조가 아니다. 모든 사람이 동등한 네트워크의 일원이 된다. WebTorrent는 웹을 다시 분산화하는 여정의 첫걸음이다.
Electron이 왜 필요했을까?
약 1년 전, 우리는 WebTorrent를 데스크톱 앱으로 실행하는 WebTorrent Desktop을 만들기로 결정했다.
WebTorrent Desktop을 만든 이유는 세 가지다:
- 깔끔하고 가벼우며 광고 없이 오픈소스로 제공되는 토렌트 앱을 원했다.
- 스트리밍 지원이 잘 되는 토렌트 앱을 원했다.
- BitTorrent와 WebTorrent 네트워크를 연결하는 "하이브리드 클라이언트"가 필요했다.
웹 브라우저에서 토렌트를 다운로드할 수 있는데, 왜 데스크톱 앱이 필요할까?
먼저, WebTorrent의 설계 배경을 간단히 살펴보자.
초기에는 BitTorrent가 TCP를 전송 프로토콜로 사용했다. 이후 uTP가 등장하면서 TCP보다 더 나은 성능과 추가적인 장점을 제공했다. 모든 주요 토렌트 클라이언트는 결국 uTP를 채택했고, 현재는 두 프로토콜 모두를 사용할 수 있다. WebRTC 프로토콜은 논리적인 다음 단계다. 이 프로토콜은 웹 브라우저와의 상호 운용성을 제공하며, 모든 데스크톱 BitTorrent 클라이언트와 수백만 개의 웹 브라우저로 구성된 거대한 P2P 네트워크를 가능하게 한다.
"웹 피어"(웹 브라우저에서 실행되는 토렌트 피어)는 수백만 개의 새로운 피어를 추가함으로써 BitTorrent 네트워크를 더 강력하게 만들고, BitTorrent를 다양한 새로운 사용 사례로 확장한다. WebTorrent는 기존 BitTorrent 클라이언트가 WebTorrent를 쉽게 지원할 수 있도록 BitTorrent 사양을 최대한 따르도록 설계했다.
Vuze와 같은 일부 토렌트 앱은 이미 웹 피어를 지원하지만, 나머지 클라이언트가 이를 지원할 때까지 기다리고 싶지 않았다. 즉, WebTorrent Desktop은 WebTorrent 프로토콜의 채택 속도를 높이기 위한 우리의 방법이었다. 사람들이 정말로 사용하고 싶어 하는 훌륭한 토렌트 앱을 만들어 웹 피어(웹사이트 사용자)와 토렌트를 공유할 수 있는 네트워크 내 피어의 수를 늘리는 것이 목표였다.
토렌트의 잘 알려지지 않은 흥미로운 활용 사례
WebTorrent의 가장 흥미로운 활용 사례 중 하나는 피어 지원 전송(peer-assisted delivery)이다. 위키백과나 인터넷 아카이브와 같은 비영리 프로젝트는 방문자들이 함께 참여하도록 함으로써 대역폭과 호스팅 비용을 줄일 수 있다. 인기 있는 콘텐츠는 브라우저 간에 빠르고 저렴하게 전송할 수 있다. 드물게 접근되는 콘텐츠는 오리진 서버에서 HTTP를 통해 안정적으로 제공할 수 있다.
인터넷 아카이브는 이미 토렌트 파일을 업데이트해 WebTorrent와 잘 작동하도록 했다. 따라서 인터넷 아카이브 콘텐츠를 사이트에 임베드하려는 경우, 아카이브의 호스팅 비용을 줄이는 방식으로 구현할 수 있다. 이를 통해 아카이브는 웹 아카이빙에 더 많은 자원을 투자할 수 있다.
또한 CDN부터 P2P를 통한 앱 배포까지 다양한 비즈니스 활용 사례도 있다.
WebTorrent를 사용한 멋진 프로젝트들
WebTorrent로 만들어진 가장 멋진 프로젝트는 단연 Gaia 3D Star Map이다. 이 프로젝트는 은하수를 3D로 구현한 인터랙티브 시뮬레이션이다. 데이터는 토렌트를 통해 브라우저에서 직접 로드된다. 은하계를 날아다니며 인간이 얼마나 작은 존재인지 깨닫게 되는 경험은 정말 감동적이다.
이 프로젝트가 어떻게 만들어졌는지는 Torrenting The Galaxy라는 블로그 포스트에서 확인할 수 있다. 저자 Charlie Hoey는 WebGL과 WebTorrent를 사용해 이 별 지도를 어떻게 만들었는지 설명한다.
Brave도 매우 인상적인 프로젝트다. Brave는 광고와 트래커를 자동으로 차단해 웹을 더 빠르고 안전하게 만드는 브라우저다. 최근 Brave는 토렌트 지원을 추가해 별도의 앱 없이 전통적인 토렌트를 볼 수 있게 했다. 이 기능은 WebTorrent로 구현되었다.
대부분의 브라우저가 PDF 파일을 렌더링할 수 있는 것처럼, Brave는 마그넷 링크와 토렌트 파일을 렌더링할 수 있다. 이제 토렌트는 브라우저가 기본적으로 지원하는 또 하나의 콘텐츠 타입이 된 셈이다.
Brave의 공동 창업자 중 한 명은 JavaScript의 창시자인 Brendan Eich다. WebTorrent도 JavaScript로 작성되었기 때문에 Brave가 WebTorrent를 통합한 점이 매우 의미 있다고 생각한다.
WebTorrent Desktop을 Electron으로 개발한 이유
Electron 앱은 모든 앱에 Chrome 콘텐츠 모듈을 포함하기 때문에 "부풀려졌다"는 이야기가 있다. 경우에 따라 이는 부분적으로 사실이다. Electron 앱 설치 프로그램은 보통 ~40MB인 반면, 운영체제별 앱 설치 프로그램은 보통 ~20MB 정도다.
하지만 WebTorrent Desktop의 경우, 정상적인 작동 과정에서 거의 모든 Electron 기능과 수십 가지 Chrome 기능을 사용한다. 각 플랫폼별로 이러한 기능을 처음부터 구현하려면 앱 개발에 몇 달에서 몇 년이 더 걸렸을 것이다. 아니면 단일 플랫폼에서만 출시할 수 있었을 것이다.
예를 들어, 다운로드 진행 상황을 보여주기 위해 Electron의 dock 통합, 백그라운드에서 실행하기 위한 메뉴 바 통합, 마그넷 링크를 열기 위한 프로토콜 핸들러 등록, 비디오 재생 중 절전 모드 방지를 위한 절전 모드 차단, 그리고 자동 업데이터를 사용한다. Chrome 기능도 많이 사용한다: 다양한 비디오 형식을 재생하기 위한 <video> 태그, 자막 지원을 위한 <track> 태그, 드래그 앤 드롭 지원, 그리고 네이티브 앱에서 사용하기 까다로운 WebRTC 등이 있다.
또한, 우리의 토렌트 엔진은 JavaScript로 작성되었으며, 특히 TCP 및 UDP 소켓 지원을 위한 require('net')과 require('dgram')과 같은 많은 Node API의 존재를 가정한다.
기본적으로 Electron은 우리가 필요로 하는 기능을 모두 갖추고 있었고, 기록적으로 빠른 시간 안에 견고하고 세련된 앱을 출시할 수 있게 해주었다.
Electron의 가장 좋은 점은 무엇인가?
WebTorrent 라이브러리는 오픈 소스 사이드 프로젝트로 2년 동안 개발되어 왔다. 우리는 WebTorrent Desktop을 단 4주 만에 만들었다. 이렇게 빠르게 앱을 개발하고 출시할 수 있었던 주된 이유는 Electron 덕분이다.
Node.js가 jQuery를 사용하던 프론트엔드 개발자들에게 서버 프로그래밍을 가능하게 한 것처럼, Electron은 웹이나 Node.js 개발에 익숙한 누구나 네이티브 앱 개발을 할 수 있게 해준다. Electron은 정말 강력한 도구다.
웹사이트와 데스크톱 클라이언트가 코드를 공유하나요?
네, webtorrent npm 패키지는 Node.js, 브라우저, 그리고 Electron에서 동작한다. 정확히 동일한 코드가 모든 환경에서 실행될 수 있다. 이것이 바로 JavaScript의 매력이다. JavaScript는 현대의 보편적인 런타임 환경이다. Java 애플릿은 "한 번 작성하고 어디서든 실행"되는 앱을 약속했지만, 여러 가지 이유로 그 비전은 실현되지 못했다. Electron은 다른 어떤 플랫폼보다도 이 이상에 상당히 근접한 성과를 보여주고 있다.
WebTorrent 개발 과정에서 어떤 어려움을 겪었나요?
초기 버전의 앱에서 UI 성능 문제로 고생했다. 토렌트 엔진을 메인 앱 윈도우를 그리는 렌더러 프로세스에 함께 배치했는데, 이로 인해 토렌트 엔진에서 CPU 사용량이 급증할 때마다(예: 피어로부터 받은 토렌트 조각을 검증하는 경우) 앱이 느려지는 문제가 발생했다.
이 문제를 해결하기 위해 토렌트 엔진을 두 번째, 보이지 않는 렌더러 프로세스로 이동시켰다. 그리고 IPC를 통해 이 프로세스와 통신하도록 구조를 변경했다. 이렇게 하면 해당 프로세스에서 CPU를 많이 사용하더라도 UI 스레드에 영향을 미치지 않는다. 부드러운 스크롤링과 애니메이션은 정말 만족스럽다.
참고: 토렌트 엔진을 렌더러 프로세스에 배치한 이유는 WebRTC에 접근해야 하기 때문이다. WebRTC는 렌더러 프로세스에서만 사용할 수 있다.
Electron의 개선이 필요한 부분은 무엇인가?
프로덕션 준비가 된 앱을 빌드하고 배포하는 방법에 대한 더 나은 문서화가 필요하다. 특히 코드 서명(code signing)과 자동 업데이트(auto-updating)와 같은 복잡한 주제에 대한 설명이 부족하다. 우리는 소스 코드를 뒤지고 Twitter에서 질문을 올리는 방식으로 최적의 방법을 직접 찾아야 했다.
WebTorrent Desktop는 완성되었나요? 아니라면, 다음에 어떤 기능이 추가될 예정인가요?
현재 버전의 WebTorrent Desktop은 훌륭하지만, 여전히 개선의 여지가 있다고 생각한다. 현재는 사용 편의성, 성능, 자막 지원, 그리고 비디오 코덱 지원을 개선하기 위해 노력 중이다.
프로젝트에 참여하고 싶다면 GitHub 페이지를 확인해 보자!
다른 개발자에게 유용할만한 Electron 개발 팁
WebTorrent Desktop 기여자 중 한 명인 Feross는 NodeConf Argentina에서 _"Real world Electron: JavaScript로 크로스 플랫폼 데스크톱 앱 만들기"_라는 주제로 발표했다. 이 발표는 기본적으로 동작하는 앱을 더욱 세련되고 전문적으로 다듬는 단계에 있는 개발자에게 특히 유용한 팁을 담고 있다.
또 다른 WebTorrent 기여자인 DC는 앱을 더 세련되고 네이티브하게 느껴지도록 만들기 위한 체크리스트를 작성했다. 이 체크리스트에는 코드 예제가 포함되어 있으며, macOS 독 통합, 드래그 앤 드롭, 데스크톱 알림, 앱 로딩 속도 개선 등의 주제를 다룬다.