Web3 dapp에 사용자 피드백 루프를 구축하는 방법

사용자 피드백 수집은 제품-시장 적합성을 달성하고 성공적인 애플리케이션을 만들기 위한 가장 중요한 단계 중 하나입니다. 그리고 UX 디자인 표준이 아직 형성되고 정의되지 않은 web3에서는 더욱 중요합니다.

web3 개발자들에게 dapp에 대한 사용자 피드백을 수집하는 가장 인기 있는 방법은 여전히 Google이나 Mailchimp 같은 기업이 제공하는 중앙화된 솔루션입니다. 하지만 이제 온체인 피드백 폼도 사용할 수 있습니다. 이러한 web3 네이티브 피드백 폼이 무엇인지, 왜 dapp의 성공에 중요한지, 그리고 어떻게 사용하는지 살펴보겠습니다.

이전 게시물에서 Consensys가 개발한 새로운 오픈소스 탈중앙화 web3 폼인 Form-xChange를 소개하고, MetaMask SDK를 사용하여 dapp에 통합하는 방법을 안내했습니다.

이번 튜토리얼에서는 피드백 폼을 프론트엔드에 배포하고, 사용자가 dapp에 대한 의견을 공유할 수 있는 새로운 폼을 만드는 방법을 보여드리겠습니다. 하지만 먼저, 제품 개발 및 관리에서 사용자 피드백 수집이 왜 중요한지 간략히 짚어보겠습니다.

대중화를 돕는 web3 사용자 피드백 폼

web3에는 네이티브 탈중앙화 피드백 폼이 절실히 필요합니다. 그 이유는 무엇일까요?

1. 비용을 획기적으로 절감합니다: 폼 생성과 관련된 유일한 비용(그것도 일회성)은 스마트 컨트랙트 배포 시에만 발생합니다. Linea와 같은 L2에 배포하면 비용은 보통 몇 달러를 넘지 않습니다.

2. 거의 무한한 커스터마이징이 가능합니다: 원하는 모든 종류의 피드백(텍스트, 반응, 링크 등)을 수집하도록 폼을 설계할 수 있습니다. 또한 프론트엔드는 컨트랙트와 완전히 분리되어 있어 필요에 따라 자유롭게 커스터마이징할 수 있습니다.

3. 사용한 만큼만 비용을 냅니다: 탈중앙화 폼은 응답 수에 따른 요금제가 없습니다. 이론적으로 원하는 만큼 응답을 기록할 수 있습니다. 고객이 가스비를 부담하는 모델을 채택하면 컨트랙트 배포 비용 외에는 추가 비용이 발생하지 않습니다. 고객을 대신해 비용을 부담하더라도, 비용 효율적인 네트워크에서 운영할 경우 몇 센트에 불과합니다.

4. 토큰 게이팅을 구현할 수 있습니다: 탈중앙화 폼을 사용하면 폼 질문에 응답할 수 있는 대상을 제한할 수 있습니다. 따라서 이론적으로 컬렉션의 NFT를 보유한 지갑, 일정 수량 이상의 ETH 잔액을 보유한 지갑, 또는 원하는 ERC-20 토큰을 보유한 지갑으로 접근을 제한할 수 있습니다.

튜토리얼: 나만의 탈중앙화 사용자 피드백 폼 만들기

1단계: MetaMask 설치

Linea에서 컨트랙트를 배포하고 상호작용할 것입니다. 이를 위해 Linea 네트워크로 구성되어 있고 소량의 LineaETH 잔액이 있는 암호화폐 지갑이 필요합니다.

먼저 web3 지갑이 필요합니다. 이 튜토리얼에서는 Linea가 자동으로 구성된 무료의 사용하기 쉬운 지갑인 MetaMask를 사용합니다. MetaMask는 여기서 브라우저 확장 프로그램으로 설치할 수 있습니다.

참고: 이 튜토리얼에서는 Brave 이외의 브라우저(예: Edge, Chrome, Safari 등)를 사용하는 것을 권장합니다. 작성 시점 기준으로 Form-xChange는 Brave 브라우저에서 실행 시 알려진 문제가 있습니다.

확장 프로그램을 추가하면 MetaMask가 지갑 복구 구문 제공을 포함한 일련의 단계를 완료하도록 안내합니다. 이 구문을 안전하게 보관하세요. 분실하면 복구할 수 없으며, 도난당하면 다른 사람이 자금에 접근할 수 있습니다.

지갑 설정이 완료되면 MetaMask 확장 프로그램 왼쪽 상단의 네트워크 드롭다운으로 이동하여 테스트 네트워크 표시를 켜세요. 새 드롭다운에서 Linea Goerli 네트워크를 선택합니다. 모든 것이 정상적으로 진행되면 지갑이 다음과 같이 표시됩니다:

2단계: 파우셋에서 LineaETH 받기

Linea를 처음 사용하는 경우, 지갑의 LineaETH 잔액은 (당연히) 0일 것입니다.

이를 바꿔봅시다. Infura에는 파우셋이 있어 매일 무료로 0.5 LineaETH를 받을 수 있습니다. 이 파우셋에 접근하려면 무료 Infura 계정을 만들어야 할 수 있습니다.

충전이 완료되면 소량의 LineaETH 잔액을 확인할 수 있습니다:

3단계: Linea RPC 엔드포인트 받기

이전 단계에서 만든 계정으로 Infura에 다시 로그인합니다. 자동으로 메인 대시보드로 이동합니다.

여기서 오른쪽 상단에 새 API 키를 생성하여 새 프로젝트를 만드세요.

네트워크는 web3 API를 선택하세요. 키 이름은 원하는 대로 지정할 수 있습니다.

키가 생성되면 다양한 엔드포인트가 포함된 프로젝트 대시보드로 다시 이동합니다. 여기서 Linea 테스트넷과 연결된 엔드포인트를 메모해 두세요. 이후 단계에서 Form-xChange 컨트랙트를 배포할 때 필요합니다.

4단계: node와 npm 설치

Form-xChange 솔루션은 Infura, Next.js, Truffle, Dapp API 스택에서 실행됩니다. 이러한 기술을 설치하고 사용하려면 로컬 머신에 node와 npm이 필요합니다.

운영 체제에 맞게 여기서 다운로드할 수 있습니다.

완료 후 터미널에서 버전 번호를 확인하여 올바르게 설치되었는지 확인하세요.

$ node -v
$ npm -v
복사

5단계: Form-xChange 저장소 클론

앞서 언급했듯이 Form-xChange는 소스 코드가 GitHub에 공개된 오픈소스 저장소입니다.

다음 명령어를 사용하여 이 저장소를 클론하고 필요한 모든 패키지를 설치해 봅시다:

$ git clone https://github.com/Consensys/Form-XChange
$ cd Form-XChange
$ npm install
복사

즐겨 사용하는 코드 편집기(예: VS Code)에서 Form-xChange 저장소를 여세요. 이 프로젝트는 턴키 방식으로 제공되므로 몇 가지 환경 변수를 구성하는 것 외에는 코드를 거의 작성할 필요가 없습니다.

6단계: 피드백 폼 배포

Truffle 프로젝트와 폼 스마트 컨트랙트가 포함된 하위 폴더로 이동합니다:

이 폴더에는 FeedbackForm과 FeedbackFormFactory라는 두 가지 주요 컨트랙트가 포함된 contracts 하위 폴더가 있습니다.

전자는 질문 목록과 해당 질문에 대한 응답을 저장할 수 있는 개별 폼을 구현합니다.

후자는 전자의 커스터마이징된 버전을 배포하는 데 사용할 수 있는 팩토리 컨트랙트입니다.

소스 코드를 살펴보고 만들고자 하는 폼의 종류에 따라 수정할 수 있습니다. 이 튜토리얼에서는 기본 구성을 사용합니다.

이 단계에서는 FeedbackFormFactory 컨트랙트를 배포합니다. 이를 통해 생성자인 우리가 Next 프론트엔드에서 폼을 만들 수 있게 됩니다.

이를 위해 .env 파일을 만들고 다음 정보를 추가하세요:

다음으로 truffle-config.js 파일에서 일반 RPC 엔드포인트를 3단계에서 생성한 Infura 엔드포인트로 교체합니다. 최종 구성 파일은 다음과 같이 표시됩니다:

require("dotenv").config();
const mnemonic = process.env["MNEMONIC"];

const HDWalletProvider = require("@truffle/hdwallet-provider");

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1", // Localhost
      port: 9545,
      network_id: "5777",
      chain_id: 1337,
    },
    linea: {
      provider: () =>
        new HDWalletProvider(mnemonic, `< INFURA LINEA ENDPOINT >`),
      network_id: 59140,
      chain_id: 59140,
    },
  },
  mocha: {
    timeout: 100000,
  },
  compilers: {
    solc: {
      version: "0.8.13",
    },
  },
};
복사

준비가 완료되었습니다! 다음 명령어를 실행하여 피드백 폼 팩토리 컨트랙트를 배포하세요:

모든 것이 정상적으로 진행되면 다음과 같은 출력을 확인할 수 있습니다:

> [email protected] linea
> npm run compile && npm run generate-types && npm run migrate:linea

> [email protected] compile
> truffle compile

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.

> [email protected] generate-types
> typechain --target=truffle-v5 'build/contracts/*.json'

Successfully generated 5 typings!

> [email protected] migrate:linea
> truffle migrate --network linea

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.

Starting migrations...
======================
> Network name:    'linea'
> Network id:      59140
> Block gas limit: 61000000 (0x3a2c940)

1_deploy_contracts.js
=====================

   Replacing 'FeedbackFormFactory'
   -------------------------------
   > transaction hash:    0x50ba2c362cb463d0b763ba5f092e3f1a8591dd9cd358f2feda035438ce02cee0
   > Blocks: 2            Seconds: 21
   > contract address:    0xBDAb1F857dC80968022784cc1C868820BFD2F7c5
   > block number:        1099121
   > block timestamp:     1688991002
   > account:             0xc361Fc33b99F88612257ac8cC2d852A5CEe0E217
   > balance:             0.62878173171592041
   > gas used:            2636875 (0x283c4b)
   > gas price:           2.500000007 gwei
   > value sent:          0 ETH
   > total cost:          0.006592187518458125 ETH

   > Saving artifacts
   -------------------------------------
   > Total cost:     0.006592187518458125 ETH

Summary
=======
> Total deployments:   1
> Final cost:          0.006592187518458125 ETH
복사

컨트랙트 주소를 메모해 두세요. 이후 단계에서 필요합니다.

7단계: Next 프론트엔드 팩토리 배포

피드백 폼 팩토리 컨트랙트가 배포되었으니 이제 Next 프론트엔드로 넘어가겠습니다. 다음 명령어를 실행하여 Next 앱 프로젝트로 이동합니다:

이전 단계에서 배포한 컨트랙트와 앱을 연결해야 합니다. lib/contract.ts/config.ts 파일을 열고 컨트랙트 주소를 추가하면 됩니다.

apps/web 폴더에 또 다른 .env 파일을 만들고, 이번에는 3단계에서 생성한 프로젝트의 Infura 키를 추가합니다.

준비가 완료되었습니다! 이제 앱을 localhost에 배포해 봅시다:

이제 localhost:3000에서 앱을 확인할 수 있습니다. 다음과 같이 표시됩니다:

새 폼을 만들어 봅시다!

앱 오른쪽 상단의 기능을 사용하여 MetaMask 지갑을 연결하세요. 연결이 완료되면 앱이 자동으로 팩토리 컨트랙트를 배포한 사람이 바로 당신임을 인식하고, 앱의 생성자로 인정합니다.

이를 통해 여기 UI에서 새 폼을 만들 수 있습니다.

폼 제목, 설명, 그리고 최소 하나의 질문을 추가하고 폼 만들기를 클릭하세요.

그러면 MetaMask가 트랜잭션 승인을 요청합니다. 폼 생성은 실질적으로 새로운 FeedbackForm 컨트랙트를 생성하는 것이기 때문에 이 작업이 필요합니다.

홈 페이지로 돌아가면 방금 만든 폼을 확인할 수 있습니다. 이제 폼에 응답을 제출할 수 있습니다!

이 응답을 기록하려면 MetaMask를 통해 소량의 가스비를 지불해야 합니다.

web3 스택으로 계속 개발하기: Infura, Linea, MetaMask

이것으로 완성입니다! 코드를 거의 작성하지 않고도 dapp을 위한 완전한 탈중앙화 폼 솔루션을 배포하고, 사용자 피드백을 수집할 뿐만 아니라 탈중앙화된 web3 네이티브 방식으로 수집하는 능력을 갖추게 되었습니다. Form-xChange와 같은 프로젝트는 web2 UX 디자인을 web3 애플리케이션에 도입하는 데 큰 발걸음이 될 것입니다. Next 프론트엔드의 디자인과 느낌, 그리고 스마트 컨트랙트가 제공하는 기능을 자유롭게 수정하세요. 이것을 여러분만의 것으로 만드는 것은 자유이며, 오히려 권장합니다.