이번 시리즈를 통해 우리는 탈중앙화되고 분산화된 웹의 가능성을 탐색하는 프로젝트들을 다룰 것입니다. 이 프로젝트들은 Mozilla 프로젝트가 아닙니다. 그리고 어떤 프로젝트들은 Mozilla 와 다른 방식으로 웹 브라우저를 정의합니다. 이 프로젝트들에는 공통점이 있습니다. 이 프로젝트들은 오픈소스이고 누구나 참여할 수 있습니다. 그리고 모두에게 공개되고 누구나 접근 가능한 웹을 추구한다는 점에서 Mozilla 와 같은 사명을 공유하고 있습니다.

웹이 건강함을 유지하려면 자신을 표현하는데 소요되는 경제적 비용이 장애가 되지 않아야 합니다. Dweb 시리즈의 이번 회차에서 다룰 주제는 WebTorrent 입니다. WebTorrent 는 웹 브라우저에서 실행되는 BitTorrent 프로토콜 의 구현체입니다. BitTorrent 는 파일을 제공하기 위해 고안된 방식입니다. BitTorrent 를 쓰면 웹 사이트의 동시접속자 수가 증가할수록 웹 사이트의 서비스 제공 능력도 함께 증가하게 만들 수 있습니다. 즉, 데이터센터에서 중앙 서버를 운영하기 위해 필요한 비용을 제거할 수 있습니다. 이번 글은 Feross Aboukhadijeh 가 작성했습니다. 그는 WebTorrent 의 창안자이자, PeerCDN 의 창립자이자, 엄청나게 많은 NPM 모듈의 저자입니다. 그는 지금까지 225 개의 NPM 모듈을 만들었습니다! – Dietrich Ayala

WebTorrent 가 뭐죠?

WebTorrent 는 브라우저에서 실행되는 첫 토렌트 클라이언트입니다. WebTorrent 는 (웹 랭귀지인) JavaScript 로만 작성됐습니다. 그리고 WebTorrent 는 피어-투-피어(peer-to-peer) 전송을 위해 WebRTC 를 사용합니다. 브라우저 플러그인, 익스텐젼, 부가 설치물 같은 게 필요하지 않습니다.

오픈 웹 표준으로, WebTorrent 는 웹사이트 사용자들을 서로서로 연결합니다. 그래서 효과적으로 파일을 전송할 수 있는 분산되고 탈중앙화된 브라우저-투-브라우저(browser-to-browser) 네트워크를 만듭니다. 더 많은 사람들이 WebTorrent 적용 웹사이트를 이용할수록 네트워크는 더 빨라지고 더 강인해집니다.

아키텍처

WebTorrent 프로토콜은 BitTorrent 프로토콜과 똑같은 방식으로 동작합니다. 다만 WebTorrent 는 TCP 또는 uTP 가 아니라 WebRTC 를 전송 프로토콜로 쓴다는 점만 다릅니다.

WebRTC 의 연결 모델을 사용하기 때문에, 우리는 트래커 프로토콜을 구현하기 위해 몇 가지를 수정했습니다. 그래서, 브라우저 기반의 WebTorrent 클라이언트, 즉 “web peer” 는 WebTorrent/WebRTC 를 지원하는 클라이언트 하고만 연결될 수 있습니다.

피어들이 연결되고 나면, 통신에 사용되는 와이어 프로토콜(wire protocol)은 일반적인 BitTorrent 와 정확히 똑 같습니다. 이 때문에 Transmission 과 uTorrent 같은 기존의 인기 있는 토렌트 클라이언트가 WebTorrent 를 지원하는 것이 쉬울 수 밖에 없습니다. 이미 Vuze 가 벌써 WebTorrent 를 지원하고 있습니다!

시작하기

브라우저에서 토렌트를 다운로드 하는 것은 코드 몇 줄만 있으면 됩니다!

WebTorrent 를 사용해보려면, 그냥 당신의 웹페이지에 webtorrent.min.js 스크립트를 포함시키세요. WebTorrent 웹사이트나 CDN 복사본 링크에서 다운로드할 수 있습니다.

<script src="webtorrent.min.js"></script>

그렇게 하면 window 객체에 WebTorrent 함수가 포함됩니다. npm 패키지도 준비되어 있습니다.

var client = new WebTorrent()

// Sintel, a free, Creative Commons movie
var torrentId = 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent'

var torrent = client.add(torrentId)

torrent.on('ready', () => {
// Torrents can contain many files. Let's use the .mp4 file
var file = torrent.files.find(file => file.name.endsWith('.mp4'))

// Display the file by adding it to the DOM.
// Supports video, audio, image files, and more!
file.appendTo('body')
})

이게 전부입니다! 이제 당신은 토렌트를 통해 전해지는 데이터를 웹페이지의 <video width="300" height="150"> 태그로 볼 수 있습니다!

더 알아봅시다

더 자세한 내용은 webtorrent.io 링크를 보세요. Freenode IRC 의 #webtorrent 채널이나 Gitter 채널에 질문을 올려보세요. 우리는 질문에 대답해줄 더 많은 사람과 GitHub 이슈 트래커를 해결할 더 많은 사람이 필요합니다. 만약 당신이 친절하고 기꺼이 도움을 나눌 사람이라면, 그리고 토렌트 프로토콜이나 WebRTC 에 대해 깊이 파 볼 이유가 필요했던 사람이라면, 이 프로젝트가 아주 좋은 기회가 될 것입니다!

이 글은 Feross Aboukhadijeh 이 쓴 Dweb: Building a Resilient Web with WebTorrent 의 한국어 번역본입니다.