분산형 웹사이트를 만드는 방법

by

탈중앙화 웹사이트 구축 방법

분산형 웹사이트를 만드는 과정은 많은 사람들이 생각하는 것보다 훨씬 간단합니다. 핵심적으로, 분산형 웹사이트와 기존 웹사이트의 가장 큰 차이점은 후자는 분산 네트워크에서 호스팅된다는 점입니다. 그 외의 대부분은 기존 웹사이트와 동일합니다.

이 가이드에서는 분산형 웹사이트를 만들고 실제로 운영하는 데 필요한 모든 단계를 상세히 설명합니다. 이 과정을 시작하기 전에 Web3 도메인과 약간의 ETH가 들어있는 디지털 지갑이 필요합니다.

1. 웹사이트 파일 준비

우선, 필요한 웹사이트 파일들을 준비해야 합니다. 만약 직접 만드는 것이 어렵다면, 템플릿 제공업체에서 무료 웹사이트 템플릿을 다운로드하여 사용할 수도 있습니다. 이 가이드에서는 무료 CSS 템플릿을 다운로드하여 웹사이트를 구축해 보겠습니다.

  • 무료 CSS에서 원하는 템플릿을 선택하여 다운로드합니다. 다운로드한 ZIP 파일의 압축을 풀면, 개별 파일들이 담긴 폴더가 생성됩니다.

만약 처음부터 웹사이트를 구축하는 경우, 모든 파일이 하나의 폴더 안에 있는지 확인해야 합니다.

2. IPFS에 웹사이트 파일 업로드

IPFS(InterPlanetary File System)는 전 세계적으로 분산된 P2P 컴퓨터 네트워크로 구성된 파일 저장 시스템입니다. 이 시스템은 파일 호스팅을 위해 협력하며, 분산형 파일 저장 시스템 중 가장 널리 사용되고 있습니다.

개인 컴퓨터에서 독립적으로 실행되는 IPFS 노드를 통해 웹사이트 파일을 호스팅할 수도 있습니다. 하지만 이 방법의 단점은 누군가가 분산형 웹사이트에 접근하려면, 해당 컴퓨터가 온라인 상태를 유지해야 한다는 점입니다.

다른 대안으로는 피냐타, 인푸라, 또는 플릭과 같은 IPFS 호스팅 플랫폼을 이용하는 것입니다. 이러한 플랫폼은 IPFS 네트워크를 통해 파일을 호스팅하고 배포하여 누구나 접근할 수 있게 해줍니다. 그러나 일부 서비스는 이용료를 지불해야 합니다.

IPFS 노드에 업로드

먼저, 독립적인 IPFS 노드를 실행해야 합니다.

  • 개인 PC에 IPFS를 설정합니다. PC 클라이언트를 다운로드하거나 Brave 브라우저 확장을 사용하여 IPFS 노드를 설정할 수 있습니다.
  • IPFS 설정이 완료되면 IPFS 대시보드를 열고 ‘가져오기’를 클릭한 다음, 웹사이트 폴더를 업로드합니다.

  • 웹사이트가 제대로 작동하는지 확인하려면, 파일 오른쪽의 점 3개를 클릭하고 ‘링크 공유’를 선택한 후 복사합니다. 그 후 Brave 브라우저의 새 탭에서 해당 IPFS 링크를 열어봅니다. 만약 Brave 설정이 올바르게 되어 있다면 웹사이트가 제대로 표시될 것입니다.

Fleek에 업로드

Fleek을 사용하면 사용자가 IPFS에 웹사이트를 무료로 업로드할 수 있습니다. 반면에 Piñata는 프리미엄 패키지를 필요로 합니다. Fleek을 이용하기 위해서는 먼저 GitHub에 웹사이트를 배포해야 합니다.

  • GitHub 대시보드를 열고 새로운 저장소를 만듭니다.

    다음으로, Git을 사용하여 웹사이트 파일을 GitHub 저장소에 업로드합니다. Git은 GitHub와 잘 통합된 버전 제어 시스템입니다. 쉬운 시연을 위해, 먼저 ‘dWeb’이라는 데스크탑 폴더에 웹사이트 파일을 저장합니다.
  • Git-scm에서 최신 버전의 Git을 다운로드하여 설치합니다.
  • PC 시작 메뉴에서 Git Bash를 실행하고 다음 명령어를 입력합니다: 
    cd desktop/dWeb

    이 명령어는 데스크탑에 생성한 ‘dWeb’ 폴더 내에서 Git을 실행하여 로컬 저장소를 초기화합니다.

  • 다음으로, 다음 명령어를 순서대로 하나씩 실행합니다. 
                git init
    
            git add .
    
            git commit -m "first commit"
    
            git remote add origin [url].git

    여기서 [url]은 GitHub 저장소 주소를 나타냅니다. 이 예시에서는 다음과 같습니다.

    git remote add origin https://github.com/yourusername/yourrepository.git

이러한 명령어를 실행하면, 웹사이트 폴더 내에 숨겨진 ‘.git’ 폴더가 초기화되고, 모든 웹사이트 파일이 ‘.git’ 폴더에 추가되어 업로드 준비 상태가 됩니다. 마지막으로, 해당 파일들은 GitHub 저장소에 업로드됩니다.

위의 설명처럼, 이것이 여러 웹사이트 파일과 폴더를 GitHub 저장소에 업로드하는 가장 효율적인 방법입니다.

Fleek을 GitHub에 연결하기

다음은 Fleek 계정을 GitHub와 연결하는 방법입니다.

  • Fleek에 접속하여 계정에 로그인한 후, ‘새 사이트 추가’를 클릭합니다.
  • Fleek을 GitHub에 연결하고 웹사이트 파일이 있는 저장소에 대한 액세스 권한을 부여합니다.
  • Fleek은 선택한 저장소를 보여줍니다. ‘배포 위치’ 탭으로 이동하여 ‘IPFS’를 선택한 후 ‘계속’을 클릭합니다.
  • 프레임워크를 선택하고 (확실하지 않으면 ‘기타’로 설정) 사이트를 배포합니다.

이제 웹사이트가 IPFS에 배포됩니다.

3. Web3 도메인 연결

로컬 IPFS 노드를 사용하든 Fleek과 같은 온라인 플랫폼을 사용하든, 이 시점에서는 사이트가 IPFS에 배포되어 있어야 합니다. 즉, 사이트의 IPFS 해시가 생성되었다는 의미입니다.

다음 단계는 Web3 도메인을 사이트에 연결하는 것입니다. 이는 시장에서 가장 신뢰받는 Web3 등록 기관 중 한 곳에서 구입할 수 있습니다. 도메인 비용은 플랫폼 조건에 따라 다르며, 블록체인 기반 도메인 시스템의 경우 블록체인에 기록되는 트랜잭션에 대한 네트워크 수수료가 발생합니다.

이 가이드에서는 ENS에서 ‘elgwaro.eth’ 도메인을 획득했다고 가정하겠습니다.

ENS 도메인을 IPFS 웹사이트에 연결

다음은 ENS 도메인을 IPFS 호스팅 사이트에 연결하는 방법입니다.

  • ENS 대시보드를 열고 도메인 이름 섹션에 접속합니다.
  • ‘기록’ 탭을 선택하고 ‘기록 편집’을 클릭합니다.
  • ‘기타’를 선택하고 독립적인 IPFS 웹사이트 링크를 붙여넣은 후, ‘저장’을 클릭합니다.
  • 트랜잭션을 승인하려면 지갑을 연결하라는 메시지가 나타납니다. 네트워크 활동에 따라 소액의 수수료가 부과됩니다.
  • 트랜잭션이 완료되면 Web3 도메인이 분산형 웹사이트에 연결됩니다.

Fleek을 사용하는 경우 Fleek 대시보드에서 도메인을 연결할 수 있습니다.

  • 배포된 웹사이트 대시보드를 열고 ‘사용자 정의 도메인 추가’를 클릭합니다.
  • ENS 정보까지 아래로 스크롤하고 ‘ENS 추가’를 클릭합니다.
  • ENS 도메인을 입력하고 ‘확인’을 클릭한 후 확인합니다.
  • 다음으로 ‘콘텐츠 해시 설정’을 클릭합니다. 네트워크 활동에 따라 소액의 수수료를 지불하여 트랜잭션을 승인하려면 지갑을 연결해야 합니다.

    연결된 지갑 계정이 도메인의 컨트롤러인지 확인해야 링크 설정이 성공적으로 완료됩니다.

4. 웹사이트 접속

Web3 도메인이 분산형 웹사이트에 성공적으로 연결되면, 해당 Web3 도메인으로 분산형 웹사이트에 접속할 수 있습니다.

ENS 도메인에 ‘.link’를 추가하여 접속할 수 있습니다. 예를 들어, 이 예시에서는 elgwaro.eth.link입니다. 만약 Brave와 같이 IPFS를 지원하는 브라우저를 사용하는 경우 URL 끝에 ‘.link’를 포함할 필요가 없습니다.

이제 분산형 웹사이트를 성공적으로 만들었습니다.

Web2 개발을 넘어서

시간이 지남에 따라 인터넷이 더욱 분산화됨에 따라, 분산형 웹사이트의 수가 중앙화된 서버에서 호스팅되는 웹사이트의 수를 넘어설 것입니다. 다행히도 Web2에서 Web3 웹사이트 개발로 전환하는 것은 보기보다 훨씬 쉽습니다. 만약 검열에 저항하는 분산형 웹사이트를 구축하고자 한다면, 이 가이드가 큰 도움이 될 것입니다.