1. 개요

일반 정보

스마트 계약을 작성하고 배포한 후, 다음 단계는 사용자가 스마트 계약 기능과 어설프게 상호작용할 필요 없이 직관적이고 간편하게 이용할 수 있도록 인터페이스를 구축하는 것입니다.

현재 웹3 업계에서는 React(및 React 기반 프레임워크)가 가장 널리 사용되고 있습니다. React의 풍부한 라이브러리와 개방적인 생태계 덕분에 Vue나 Angular와 같은 다른 프레임워크는 거의 사용되지 않습니다.

인터페이스는 스마트 계약과 어떻게 연동되나요?

프론트엔드 UI는 RPC 블록체인 노드에 연결하여 스마트 계약과 상호작용할 수 있습니다. RPC는 Remote Procedure Call의 약자로, 기본적으로 클라이언트(여기서는 인터페이스를 의미함)가 블록체인 네트워크에 연결하여 데이터를 요청하거나, 트랜잭션 전송, 스마트 계약과의 상호작용과 같은 작업을 수행할 수 있도록 돕는 프로토콜입니다.

사용자 본인이 서버에 직접 설치하고 운영하는 블록체인 노드를 사용할 수도 있고, Node-as-a-service(Node 서비스 제공업체)를 이용할 수도 있습니다. 연결 수요가 적다면 Node-as-a-service 제공업체를 이용하면 비용을 크게 절감할 수 있습니다.

2. 프론트엔드 프로젝트의 구조

우리는 이 기술 스택을 활용하여 다음과 같은 프론트엔드를 구축할 예정입니다:

• Next.JS - React 프로덕션 프레임워크
• TailwindCSS - CSS용 유틸리티 클래스 라이브러리
• Shadcn UI - Tailwind 기반 React 컴포넌트 라이브러리
• Wagmi v2 - 블록체인과 연동하기 위한 React 훅 라이브러리
• WalletConnect - DApp과 지갑을 연결하는 통신 프로토콜
• Rainbowkit - 지갑과 DApp을 연결하는 컴포넌트 라이브러리
• React Query Tanstack - React용 쿼리 실행 라이브러리

다음은 Solidity 섹션에서 FundMe 스마트 계약용 UI를 구축하기 위한 샘플 프로젝트의 구성도입니다.

.
├── README.md
├── abi
│   └── FundMe.json
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.tsx
│   └── providers.tsx
├── components
│   ├── abi.ts
│   ├── fund-me-balance.tsx
│   ├── fund.tsx
│   ├── my-fund.tsx
│   └── ui
├── components.json
├── lib
│   └── utils.ts
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.ts
└── tsconfig.json