블록체인과 프론트엔드의 관련성

블록체인 학회 개발자 모집 공고들을 보다가 한 가지 의문이 들었다.

“블록체인 개발자라면 Solidity나 백엔드 경험이 더 중요한 것 아닌가?
그런데 왜 React, Next.js, TypeScript 같은 프론트엔드 경험을 우대할까?”

 

처음에는 블록체인 개발이라고 하면 스마트 컨트랙트, 서버, 데이터베이스, 보안처럼 백엔드에 가까운 영역을 먼저 떠올리게 되었다.

 

그러나 블록체인 개발은 단순히 스마트 컨트랙트를 작성하는 것에서 끝나지 않는다. 사용자가 지갑을 연결하고, 버튼을 누르고, 트랜잭션을 승인하고, 결과를 화면에서 확인할 수 있어야 비로소 하나의 서비스가 된다.

 

따라서 DApp을 실제 서비스 형태로 완성하려면 프론트엔드도 굉장히 중요했고, 내가 UMC에서 Web파트에서 한 학기 동안 공부했던 내용들이 모두 이어지겠구나 하는 생각이 들었다. 그래서 이에 대한 내용을 오늘 한번 적어보고자 한다. 

---

일반 웹서비스와 DApp의 구조 차이

일반적인 웹서비스는 보통 다음과 같은 구조로 작동한다.

Frontend → Backend Server → Database

 

사용자가 React 화면에서 버튼을 누르면 프론트엔드는 백엔드 API를 호출한다.
백엔드는 요청을 처리하고, 데이터베이스에 정보를 저장하거나 불러온다.

 

하지만 블록체인 기반 DApp은 구조가 조금 다른 것 같다.

Frontend → Wallet → Smart Contract → Blockchain

 

여기서 스마트 컨트랙트는 기존 웹서비스의 백엔드와 데이터베이스 역할 일부를 대신한다.

• 예를 들어 투표 DApp을 만든다고 하자
  투표 로직은 Solidity로 작성된 스마트 컨트랙트에 들어가고, 투표 결과는 블록체인에 기록된다.
• 하지만 사용자는 Solidity 코드를 직접 실행하지 않는다.
• 사용자는 웹사이트에 접속해서 지갑을 연결하고, 후보를 선택한 뒤, “투표하기” 버튼을 누른다.
• 이 과정에서 필요한 것이 바로 프론트엔드다.

DApp에서 프론트엔드가 하는 일

GPT한테 간단한 투표 DApp의 동작 과정을 한번 물어봤다.

사용자 입장에서는 아래와 같은 흐름으로 서비스를 이용하게 된다.

1. 웹사이트 접속
2. 지갑 연결
3. 후보 선택
4. 투표하기 버튼 클릭
5. 트랜잭션 서명
6. 블록체인에 투표 결과 저장
7. 현재 투표 수 화면에 표시

 

여기서 스마트 컨트랙트가 담당하는 부분은 주로 투표 로직과 데이터 저장이다.
하지만 사용자가 실제로 보는 화면, 지갑 연결, 버튼 클릭, 트랜잭션 요청, 결과 표시 등은 대부분 프론트엔드에서 처리한다.

 즉, DApp 개발에서 프론트엔드는 단순히 예쁜 화면을 만드는 역할도 있지만, 실제로 사용할 수 있게 만드는 중간 다리 역할을 해줘야 한다. 

React와 Next.js가 중요한 이유

React는 사용자 인터페이스를 만들기 좋은 대표적인 프론트엔드 라이브러리다.
DApp에서도 지갑 연결 버튼, 토큰 잔액 표시, DAO 투표 화면, DeFi 예치/출금 화면 등을 만들 때 React가 자주 사용된다고 한다. 

 

Next.js는 React 기반 프레임워크로 실제 서비스나 해커톤 프로젝트에서 많이 사용된다.
페이지 라우팅, 배포, API Routes, SEO, 랜딩페이지 제작 등이 편리하기 때문이다.

 

블록체인 프로젝트에서도 결국 사용자는 웹사이트를 통해 서비스를 이용한다.
그래서 Next.js를 사용하면 DApp 화면, 프로젝트 소개 페이지, 대시보드, 지갑 연결 페이지 등을 빠르게 만들 수 있다.

 

특히 학회나 해커톤에서는 짧은 시간 안에 결과물을 만들어야 하는 경우가 많다.
이때 Next.js + TypeScript + Solidity + wagmi/viem 조합은 DApp MVP를 빠르게 구현하기 좋은 스택이라고 GPT가 알려주었다.

 

TypeScript는 왜 우대될까?

블록체인 프론트엔드는 일반 프론트엔드보다 타입 실수가 훨씬 치명적일 수 있다.

예를 들어 다음과 같은 값들을 자주 다룬다.

지갑 주소
컨트랙트 주소
체인 ID
트랜잭션 해시
토큰 수량
스마트 컨트랙트 함수 인자

 

이 값들은 형식이 틀리거나 타입을 잘못 다루면 바로 오류가 발생할 수 있다!!!

 

그러나 TypeScript를 사용하면 이런 실수를 줄일 수 있다.

const walletAddress: `0x${string}` = "0x1234abcd...";

 

위 코드는 walletAddress라는 값이 반드시 0x로 시작하는 문자열이어야 한다는 뜻이다.

블록체인에서는 지갑 주소나 컨트랙트 주소가 보통 0x로 시작하기 때문에, TypeScript를 사용하면 주소 형식과 관련된 실수를 어느 정도 줄일 수 있다.

 

다만 이것만으로 실제 유효한 이더리움 주소인지 완벽하게 검증되는 것은 아니고, 기본적인 형식 오류를 줄이는 데 도움이 된다.

이처럼 TypeScript는 DApp 개발에서 안정성을 높이는 역할을 한다.
그래서 블록체인 프로젝트에서 TypeScript 경험이 있는 사람을 우대하는 구나를 알게 되었다.

 

블록체인 개발자는 꼭 백엔드만 하는 것이 아니다

블록체인 개발자라고 해서 모두 같은 일을 하는 것은 아니다.
크게 나누면 다음과 같은 역할이 있다.

 

스마트 컨트랙트 개발자	온체인 로직 작성, 테스트, 배포	Solidity, Foundry
Web3 프론트엔드 개발자	지갑 연결, 컨트랙트 호출, DApp UI 구현	React, Next.js, TypeScript, wagmi, viem
백엔드/인프라 개발자	인덱싱, API 서버, 노드 운영, 데이터 처리	Node.js, DB, RPC, The Graph
보안/감사	컨트랙트 취약점 분석	Solidity, EVM, 보안 지식
리서치/기획	프로토콜 분석, 토크노믹스, 서비스 구조 설계	블록체인 이해, 문서화, 분석력

이 중에서 React, Next.js, TypeScript 경험은 특히 Web3 프론트엔드 개발자와 관련이 깊다.

 

프론트엔드 경험은 블록체인 개발에서 강점이 될 수 있다

나는 이번 학기 UMC에서 Web파트에 지원하여 한 학기 동안 활동을 하고 있다. 그리고 방학 때는 2달 동안 팀을 꾸려 프로젝트를 진행하게 된다.  처음에는 이런 경험이 블록체인 개발과 얼마나 관련이 있을지 의문이 들었다.

 

하지만 DApp 구조를 간단하게라도 이해하고 나니, 프론트엔드 경험이 오히려 블록체인 개발에서 큰 장점이 될 수 있다는 것을 알게 되었다.

블록체인 서비스도 결국 사용자가 있어야 의미가 있다. 아무리 좋은 스마트 컨트랙트를 작성해도, 사용자가 사용하기 어렵다면 서비스로서 완성도가 떨어진다. 사용자가 지갑을 연결하고, 트랜잭션을 이해하고, 현재 상태를 직관적으로 확인할 수 있도록 만드는 것은 프론트엔드의 역할이다.

 

서비스의 본질은 UX!!! 

결론

블록체인 개발에서 백엔드나 스마트 컨트랙트가 중요한 것은 맞다.
하지만 DApp을 하나의 완성된 서비스로 만들기 위해서는 프론트엔드도 반드시 필요하다.

특히 React, Next.js, TypeScript는 사용자가 블록체인과 상호작용하는 화면을 만들고, 지갑과 스마트 컨트랙트를 연결하는 데 자주 사용된다.

결국 블록체인 프론트엔드는 단순한 UI 개발이 아니다.

그래서 블록체인 학회에서 React, Next.js, TypeScript 경험자를 우대하는 것은 이상한 일이 아니다.
오히려 DApp을 직접 완성할 수 있는 사람을 찾는 기준이라고 볼 수 있다.

이번 학회 지원을 준비하면서 내가 가진 프론트엔드 경험을 블록체인과 연결해볼 수 있다는 점이 흥미롭게 느껴졌다. 앞으로는 Solidity와 스마트 컨트랙트뿐만 아니라, 프론트엔드와 컨트랙트를 연결하는 Web3 개발 흐름까지 함께 익혀보고자 한다