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

지금까지 우리는 새로운 개발자 도구들, 분산화된 소셜 피드, 그리고 탈중앙화 방식의 파일 공유 방법을 살펴봤습니다. 오늘은 조금 다른 것을 소개하려고 합니다. 만약 웹이 분산화된다면 브라우저의 사용 경험 자체가 어떻게 변할지 상상해봅시다. 바로 Beaker 브라우저가 추구하는 것입니다! Beaker 는 완전히 분산화된 웹의 모든 것을 제공하려는 어떤 팀의 거대한 비전입니다. Beaker 의 공동 창업자 Tara Vancil 이 작성한 이번 글을 즐겨주세요. – Dietrich Ayala

Blue Link Labs 와 Beaker

우리는 Blue Link Labs 입니다. 3명으로 구성된 팀입니다. 우리는 Dat 프로토콜과 실험적인 피어-투-피어 브라우저인 Beaker 을 가지고 웹 세상을 개선하려고 합니다.

우리가 Beaker 를 개발하는 이유는 무언가 퍼블리싱하고 공유하는 것이 웹 철학의 핵심이기 때문입니다. 하지만 아직도 우리는 웹 사이트를 퍼블리싱하거나 간단한 문서를 공유하려고만 해도 서버를 어떻게 운영해야 하는지 알아야 합니다. 아니면 그런 일을 대신해줄 누군가에게 비용을 지불해야 합니다.

그래서 우리는 스스로 물어봤습니다. “만약 브라우저에서 웹 사이트를 공유할 수 있다면 어떨까?”

dat:// 같은 피어-투-피어 (peer-to-peer) 프로토콜을 이용하면 흔히 보는 사용자 디바이스들로 컨텐츠를 호스팅할 수 있게 됩니다. 우리는 dat:// 프로토콜을 써서 Beaker 브라우저가 웹사이트 퍼블리싱을 처리할 수 있게 만들었습니다. 서버를 거치지 않고 말이죠. 웹 사이트의 저자와 그것을 보는 사람들이 웹 사이트의 호스팅에 기여합니다. 일종의 BitTorrent 입니다. 하지만 웹 사이트를 위한 것이죠!

아키텍처

Beaker 는 분산된 피어-투-피어 네트워크를 사용해서 웹사이트와 데이터셋(dataset)을 공개합니다 (우리는 그것을 “dats” 라고 부르곤 합니다).

dat:// 웹사이트는 공개키와 URL을 사용해서 식별합니다. 그리고 dat:// 웹사이트에 추가되는 데이터 조각들은 서명된 로그(signed log)에 추가됩니다. dat://
웹사이트 방문자들은 트래커(tracker) 또는 DHT 를 이용해서 서로를 발견합니다. 그런 다음 서로서로 데이터를 동기화합니다. 이를 위해 다운로더인 동시에 업로더가 됩니다. 그리고 전송 과정에서 데이터가 변조되지 않았는지 검사합니다.

본질적으로 dat:// 웹사이트는 https:// 웹사이트와 많이 다르지 않습니다. dat:// 웹사이트는 브라우저가 웹 표준에 따라 해석하는 파일과 폴더들의 집합니다. 하지만 Beaker 브라우저의 dat:// 웹사이트는 특별합니다. 왜냐하면 우리가 피어-투-피어 웹 API 를 추가했기 때문입니다. 그래서 개발자들은 dat:// 파일들에 대한 읽기,쓰기,감시하기를 할 수 있으며, 피어-투-피어 웹 앱을 만들 수 있습니다.

P2P 웹사이트 만들기

Beaker 를 이용하면 누구나 클릭 한번으로 쉽게 dat:// 웹사이트를 만들 수 있습니다 (우리가 준비한 투어 페이지를 봐주세요). 만약 당신이 HTML, CSS, JavaScript 와 친숙하다면 (아주 조금만 알아도!) 당신은 당장 dat:// 웹사이트를 퍼블리싱 할 수 있습니다.

개발자들은 우리가 준비한 API 문서를 살펴보거나 가이드 문서를 읽어보는 것부터 시작하면 좋습니다.

아래 예제는 새로운 JSON 파일을 생성하고 저장해서 스스로를 수정하는 웹사이트를 보여줍니다. 작위적이기는 하지만, 이 예제는 dat:// 웹사이트가 데이터, 사용자 프로필 등을 어떻게 저장하는지의 패턴을 보여줍니다. dat:// 웹사이트는 그런 데이터를 서버에 전송하지 않습니다. dat:// 웹사이트는 웹사이트 자체에 데이터를 저장할 수 있습니다!

// index.html

Submit message

<script src="index.js"></script>

// index.js

// first get an instance of the website's files
var files = new DatArchive(window.location)

document.getElementById('create-json-button').addEventListener('click', saveMessage)

async function saveMessage () {
var timestamp = Date.now()
var filename = timestamp + '.json'
var content = {
timestamp,
message: document.getElementById('message').value
}

// write the message to a JSON file
// this file can be read later using the DatArchive.readFile API
await files.writeFile(filename, JSON.stringify(content))
}

더 배우려면

우리는 사람들이 dat:// 과 Beaker 를 이용해서 무언가 만드는 것을 볼 때마다 신이 납니다. 우리는 누군가 만든 개인 사이트나 블로그 또는 Beaker API 로 만든 앱을 보는 것을 좋아합니다.

피어-투-피어 웹 분야에는 탐험할 곳이 너무 많습니다!

• Beaker 간단히 살펴보기
• Beaker 문서들
• p2pforever.org – 피어-투-피어 웹 리소스들을 모아놓은 간단한 허브
• GitHub 의 Beaker 소스레포

이 글은 Tara Vancil이 쓴 Dweb: Serving the Web from the Browser with Beaker의 한국어 번역본입니다.