탈중앙화 사용자 인터페이스를 위한 IPFS

IPFS

dapps

프론트엔드

초급

오리 포메란츠

2024년 6월 29일

9 분 소요

여러분은 놀랍고 새로운 탈중앙화 애플리케이션 (dapp)을 작성했습니다. 심지어 이를 위한 사용자 인터페이스도 작성했습니다. 하지만 이제 누군가 클라우드의 단일 서버에 불과한 사용자 인터페이스를 다운시켜 검열을 시도할까 봐 걱정될 수 있습니다. 이 튜토리얼에서는 사용자 인터페이스를 IPFS(Interplanetary File System) (새 탭에서 열림)에 올려 검열을 피하는 방법을 배웁니다. 이를 통해 관심 있는 누구나 향후 접근을 위해 서버에 고정(pin)할 수 있습니다.

Fleek (새 탭에서 열림)과 같은 서드파티 서비스를 사용하여 모든 작업을 처리할 수도 있습니다. 이 튜토리얼은 작업량이 더 많더라도 자신이 무엇을 하고 있는지 충분히 이해하고 싶은 사람들을 위한 것입니다.

로컬에서 시작하기

여러 서드파티 IPFS 제공자 (새 탭에서 열림)가 있지만, 테스트를 위해 로컬에서 IPFS를 실행하여 시작하는 것이 가장 좋습니다.

IPFS 사용자 인터페이스 (새 탭에서 열림)를 설치합니다.
웹사이트가 포함된 디렉터리를 생성합니다. Vite (새 탭에서 열림)를 사용하는 경우 다음 명령어를 사용하세요:
```
pnpm vite build
```
IPFS 데스크톱에서 가져오기(Import) > 폴더(Folder)를 클릭하고 이전 단계에서 생성한 디렉터리를 선택합니다.
방금 업로드한 폴더를 선택하고 이름 바꾸기(Rename)를 클릭합니다. 더 의미 있는 이름을 지정하세요.
폴더를 다시 선택하고 링크 공유(Share link)를 클릭합니다. URL을 클립보드에 복사합니다. 링크는 https://ipfs.io/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ와 유사할 것입니다.
상태(Status)를 클릭합니다. 고급(Advanced) 탭을 확장하여 게이트웨이 주소를 확인합니다. 예를 들어, 제 시스템의 주소는 http://127.0.0.1:8080입니다.
링크 단계의 경로와 게이트웨이 주소를 결합하여 주소를 찾습니다. 예를 들어, 위 예시의 URL은 http://127.0.0.1:8080/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ입니다. 브라우저에서 해당 URL을 열어 사이트를 확인하세요.

업로드하기

이제 IPFS를 사용하여 로컬에서 파일을 제공할 수 있지만, 이것만으로는 그다지 흥미롭지 않습니다. 다음 단계는 오프라인 상태일 때도 전 세계에서 파일에 접근할 수 있도록 만드는 것입니다.

잘 알려진 피닝(pinning) 서비스 (새 탭에서 열림)가 여러 개 있습니다. 그중 하나를 선택하세요. 어떤 서비스를 사용하든 계정을 생성하고 IPFS 데스크톱에 있는 콘텐츠 식별자(CID)를 제공해야 합니다.

개인적으로는 4EVERLAND (새 탭에서 열림)가 가장 사용하기 쉬웠습니다. 사용 방법은 다음과 같습니다:

대시보드 (새 탭에서 열림)로 이동하여 지갑으로 로그인합니다.
왼쪽 사이드바에서 Storage > 4EVER Pin을 클릭합니다.
Upload > Selected CID를 클릭합니다. 콘텐츠의 이름을 지정하고 IPFS 데스크톱에서 CID를 제공합니다. 현재 CID는 Qm로 시작하고 그 뒤에 base-58로 인코딩된 (새 탭에서 열림) 해시를 나타내는 44개의 문자와 숫자가 이어지는 문자열(예: QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ)이지만, 이는 변경될 가능성이 있습니다 (새 탭에서 열림).
초기 상태는 Queued(대기 중)입니다. 상태가 Pinned(고정됨)로 변경될 때까지 새로고침합니다.
CID를 클릭하여 링크를 가져옵니다. 제 애플리케이션은 여기 (새 탭에서 열림)에서 확인할 수 있습니다.
한 달 이상 고정하려면 계정을 활성화해야 할 수도 있습니다. 계정 활성화 비용은 약 1달러입니다. 창을 닫았다면 로그아웃 후 다시 로그인하여 활성화 요청을 다시 받으세요.

IPFS에서 사용하기

이 시점에서 여러분은 IPFS 콘텐츠를 제공하는 중앙화된 게이트웨이에 대한 링크를 갖게 됩니다. 요약하자면, 사용자 인터페이스가 조금 더 안전해졌을 수는 있지만 여전히 검열 저항적인 것은 아닙니다. 진정한 검열 저항성을 확보하려면 사용자가 브라우저에서 직접 (새 탭에서 열림) IPFS를 사용해야 합니다.

이를 설치하고(데스크톱 IPFS가 작동 중인 상태에서) 아무 사이트에서나 /ipfs/<CID> (새 탭에서 열림)로 이동하면, 탈중앙화된 방식으로 제공되는 해당 콘텐츠를 얻을 수 있습니다.

단점

IPFS 파일은 확실하게 삭제할 수 없으므로, 사용자 인터페이스를 수정하는 동안에는 중앙화된 상태로 두거나 IPFS 위에서 가변성을 제공하는 시스템인 IPNS(Interplanetary Name System) (새 탭에서 열림)를 사용하는 것이 가장 좋습니다. 물론 가변적인 것은 무엇이든 검열될 수 있으며, IPNS의 경우 해당 개인 키를 가진 사람을 압박함으로써 검열이 이루어질 수 있습니다.

또한 일부 패키지는 IPFS와 호환성 문제가 있으므로, 웹사이트가 매우 복잡하다면 좋은 해결책이 아닐 수 있습니다. 그리고 당연하게도, 서버 연동에 의존하는 모든 것은 클라이언트 측을 IPFS에 두는 것만으로는 탈중앙화될 수 없습니다.

ENS를 통한 검색 가능성

ENS 이름(예: vitalik.eth)을 웹사이트에 연결하면, 완전히 탈중앙화된 웹페이지로 간주되어 dweb3.wtf (새 탭에서 열림) 서비스에 의해 자동으로 고정(pin)됩니다. 또한 DuckDuckGo, Brave Search 또는 Google이 기존 웹에서 하는 것과 마찬가지로 web3compass.net (새 탭에서 열림) 검색 엔진을 통해 검색할 수 있게 됩니다.

결론

이더리움이 탈중앙화 애플리케이션 (dapp)의 데이터베이스와 비즈니스 로직 측면을 탈중앙화할 수 있게 해주는 것처럼, IPFS는 사용자 인터페이스를 탈중앙화할 수 있게 해줍니다. 이를 통해 dapp에 대한 또 다른 공격 벡터를 차단할 수 있습니다.

제 작업물은 여기에서 더 확인하실 수 있습니다 (새 탭에서 열림).