프론트엔드 시점에서 바라본 web3

2023. 2. 6. 07:50UX Engineer 이야기
doworld

들어가며

지난 글에서 web3가 무엇인지 살펴보았는데요. (WEB 3.0 - web3가 뭐죠?)

이번에는 프론트엔드 시점에서 바라본 web 3.0에 대해 이야기해 보고자 합니다.

사용자는 주로 웹브라우저를 통해 프론트엔드에 접근하여 디앱을 구동하고 서비스를 이용할 수 있는데 그 가운데에서 우리가 가장 영향력을 펼칠 수 있는 디앱에 대해 알아보아요.

DApp (Decentralized Application)이란?

디앱(DApp, Decentralized Application)은 분산형 애플리케이션을 말해요.

디앱은 블록체인 기술(암호화폐와 블록체인, 스마트 콘트랙트 등)을 기반으로 구축되며, 중앙 관리자가 없는 분산형 시스템이에요.

누구나 읽고 쓸 수 있는 공개된 블록체인 네트워크에서 동작하고, 데이터를 저장하고 관리하는 것을 중앙 집중화된 서버가 아닌 네트워크 상의 모든 노드에서 이루어져요.

서버에 중앙 집중화되지 않고 네트워크의 모든 노드에서 저장 및 관리되므로 더욱 견고하고 안전해요.

주로 스마트 콘트랙트를 이용하여 구현되며, 스마트 콘트랙트는 블록체인 네트워크에서 실행되는 프로그램이에요.
스마트 콘트랙트에 대한 자세한 설명은 스마트 콘트랙트(Smart Contract) 글을 참고하면 좋아요.

프론트엔드 개발자로서 DApp에서 주목해야 하는 점은 무엇일까?

UX

원활하고 직관적인 사용자 경험을 제공해야 해요.

사용하기 쉬운 인터페이스 설계, 안정적인 서비스 보장 및 사용자에게 가치를 제공하고 보안과 블록체인 기술의 고유한 특성을 고려해야 해요.

UI

프론트엔드 개발자로서 디앱을 구축하려면 블록체인 네트워크와 상호작용하는 사용자 인터페이스를 만드는 거예요.

사용자가 쉽고 직관적으로 이용할 수 있도록 사용자 친화적인 인터페이스를 설계하고 모바일, 태블릿, 데스크톱 등 다양한 기기에서 이용 가능한 인터페이스를 제공할 수 있어요.

모바일 장치의 사용이 매일 증가함에 따라 사용자 참여를 늘리고 궁극적으로 디앱의 인기를 높이는 데 도움이 돼요.

Globalization

여러 언어와 통화를 지원하고, 언어별 텍스트 및 이미지 구현과 다양한 날짜 및 시간, 숫자 형식을 지원하여 전 세계 시장의 다른 문화, 지역에 맞게 앱을 조정할 수 있어요. 

접근성

또 다른 중요한 고려 사항은 접근성이에요.

디앱을 장애인도 사용할 수 있어야 하며 접근성 지침을 따라야 해요.

이미지에 대한 대체 텍스트 제공, 적절한 명암비 사용, 인터페이스에서 키보드 탐색 가능 여부도 고려해야 해요.

성능 최적화

블록체인 네트워크와 상호 작용함에 따라 블록체인과의 상호 작용은 느리고 비용이 많이 들 수 있어요.
따라서 최상의 성능을 보장하려면 프론트엔드 코드를 축소하거나, 지연 로드, 캐싱 등 최적화하는 기술들이 중요해요.

기술의 이해/구현

디앱의 핵심적인 특징은 백엔드의 스마트 컨트랙트와 데이터베이스인 블록체인에 포함된 어카운트 상태 정보 등의 데이터가 모두 블록체인에 포함되어 있고 이 모든 데이터들은 공유할 수 있다는 점이에요.

디앱은 블록체인 기반으로 구축되므로 블록체인 기술을 이해하는 것이 필수예요.

현재 가장 레퍼런스가 많은 이더리움 web3.js로 블록체인 프론트엔드 개발을 시작해 보는 것이 좋은 선택일 것 같아요.
web3.js는 JSON RPC(Remote Procedure Call, 원격 프로시저 호출) 스펙을 구현한 이더리움 자바스크립트 API에요.
쉽게 말하면 JSON RPC 스펙에 대한 처리를 web3.js에 맡기고, JSON RPC가 아닌 자바스크립트로 디앱을 개발할 수 있도록 지원하는 라이브러리예요.
web3.js 라이브러리를 크롬 확장 프로그램(Chrome Extension) 메타마스크(Metamask)와 함께 살펴보고
간단하게 잔액 조회 및 이더리움 전송 샘플 프로그램을 자바스크립트(또는 타입스크립트)로 제작하고 컨트랙트에 어떻게 접근하는지 익히면서 블록체인 기술들을 이해하면 수월할 것 같아요.

마치며

결국 서비스와 사용자가 만나는 접점은 클라이언트에서 이뤄지기 때문에 블록체인에서 프론트엔드 개발은 중요해요.
지금까지 우리가 해오던 것들에 스마트 콘트랙트의 쉬운 상호 작용 허용 등 상대적으로 새롭게 떠오르는 블록체인 기술의 이해를 더하고
개발 및 동향을 최신 상태로 유지하며 혁신과 실험에 개방적인 태도를 갖는 것이 중요하다고 생각해요.

 

이 글은 pxd XE Group Blog 에서도 보실 수 있습니다.