초보자들을 위한 이더리움 DApp 만들기

About Teckle (Technology + Tackle = Teckle)

Teckle은 “어려운 기술을 확고히, 효율적으로 분석하여, 많은 이들이 알 수 있도록 널리 알리자” 라는 목적을 가지고 만들어진 블록체인 스터디 및 DApp 개발 모임입니다. 현재 6인의 멤버가 함께하고 있습니다.

들어가며

이 글은 DApp을 처음 접하는 개발자를 위한 글입니다. Solidity 언어로 이더리움 기반의 탈중앙화된 애플리케이션(Decetralized applications)을 만드는 과정을 이해할 수 있게 썼습니다.

*기초적인 웹 개발 지식을 필요로 합니다.

목차:

Part 1. 개발 흐름 이해하기

• DApp이 뭔가요?
• Solidity란?
• 개발 환경 구성

Part 2. 개발부터 배포까지

• 스마트 컨트랙트 작성
• 테스트넷 배포
• 프론트엔드 작성
• 메인넷 배포

Part1. 개발 흐름 이해하기

A. DApp이 뭔가요?

먼저 DApp(Decentralized application)에 대한 이해를 하고 넘어가야겠죠? DApp은 블록체인 위에서 돌아가는 애플리케이션입니다. 아이폰과 구글이 각각의 OS로 플랫폼을 만들고 그 위에 앱들을 만들 수 있는 생태계를 제공한 것처럼, 블록체인 플랫폼 (ex. 이더리움, 이오스, 퀀텀, 네오 등) 역시 그 위에 애플리케이션을 만들고 운영할 수 있습니다.

그렇다면 일반 애플리케이션과 DApp의 차이가 뭐야? 라는 의문이 드실텐데요. 완벽히 탈중앙화된 애플리케이션은 다음과 같은 특성을 가지고 있습니다:

1. 오픈 소스 기반이며 자율적으로 운영됨 (블록체인으로 운영하는 서비스는 서비스가 중단되거나 사라진다고 하더라도, 한 번 배포하면 영원하기 때문에 계속해서 사용이 가능)
2. 퍼블릭 블록체인 위에 데이터를 저장 (한번 블록체인 위에 올라가면 데이터를 다시 되돌리거나 변형 불가능)
3. 암호화폐에 가치를 부여함
4. 알고리즘 기반에 의한 토큰 생성

위와 같은 특징때문에 데이터 조작으로 부터 안전하며, 민주적으로 애플리케이션을 운영할 수 있습니다. (커뮤니티가 주도해서 업데이트를 반영할지, 반영하지 않을지 정하기 때문에, 개발자들이 마음대로 서비스를 바꿀 수 없습니다).

DApp 의 가장 유명한 예시로는 크립토키티(Cryptokitties)가 있습니다. 크립토키티는 DApp으로 구현된 최초의 게임입니다. 고양이를 수집, 교배하는데, 고양이는 가상 화폐로 거래할 수 있습니다. 한때 이더리움 메인넷을 마비시킬 정도로 인기를 끌었던 앱이기도 하며, 얼마전엔 큰 투자 유치까지 완료했습니다. 게임에서 사용되는 거래와 데이터 중 크립토 이미지와 같은 일반적인 리소스들은 중앙화된 서버에서 관리를 하나, ERC 721 토큰 소유권에 대해서는 블록체인 위에 데이터를 올리는 형식으로 운영하고 있습니다.

크립토키티를 포함한 대부분의 DApp 들이 일부 리소스를 중앙화된 서버에 저장하는 것과 달리, DelegateCall(블록체인 기반 Q&A 질문 DApp)처럼 100% 블록체인 위에서 돌아가는 서비스도 있습니다.

현재 이더리움 블록체인에서 운영되고 있는 다양한 DApp을 보고 싶으시다면, 이곳에서 확인 가능합니다.

B. Solidity란?

Solidity란 이더리움 기반의 스마트 컨트랙트를 작성할 수 있는 객체지향형 프로그래밍 언어입니다. C++, Python, 그리고 자바스크립트에 영향을 많이 받았으며, 짜여진 스마트 컨트랙트는 이더리움 가상 머신인 EVM(Ethereum Virtual Machine)에서 실행됩니다.

Solidity is statically typed, supports inheritance, libraries and complex user-defined types among other features.

위 문장에 나와있듯이 솔리디티는 정적 타입의 언어이며, 상속과 라이브러리, 사용자 정의 타입을 지원하는 등 여러 특징이 있습니다.

물론 솔리디티 이외에도 이더리움 기반의 DApp을 만들 수 있는 언어들이 있습니다. 하지만 솔리디티가 가장 널리 쓰이고 있습니다. 가장 많이 쓰여지는 언어이다 보니 지원도 많이 되고, 문서화가 잘 되어 있습니다.

솔리디티를 사용하면, 투표를 위한 DApp부터, 크라우드 펀딩 서비스, 경매 시스템, 다중 지갑 등의 서비스들을 구현할 수 있습니다. 아직 솔리디티를 접하지 않은 분이시라면, CryptoZombies라는 게임을 추천합니다. 게임을 만들면서 스마트 컨트랙트에 대한 개념과 작성 방법을 쉽게 배울 수 있습니다.

C. 개발 환경 구성하기

DApp을 구현하기 위한 개발 환경은 크게 두 가지로 나눌 있습니다. 스마트 컨트랙트를 작성하고 배포하는 백엔드 사이드와, 사용자 인터페이스를 구현할 프론트엔트 사이드입니다. 아래 그림은 전체 개발 환경을 표현한 다이어그램입니다. 이 다이어그램에 대한 자세한 설명은 밑에서 이어가도록 하겠습니다.

Front-end:

HTML/CSS/Javascript

웹 프론트엔드를 작성에 사용하는 언어들. 블록체인 기반 서비스(DApp)의 클라이언트를 웹 브라우저 기반으로 만들 때 필요.

Web3.js

이더리움 자바스크립트 API.

Metamask

이더리움 풀노드를 운영하지 않고도 웹 브라우저에서 DApp을 사용할 수 있게 해주는 크롬 및 파이어폭스 확장 프로그램. 즉, 일부 필수적인 블록 헤더 데이터만 외부의 풀노드로부터 받아와 검증하는 라이트 클라이언트 중 하나.

메타마스크를 사용하면 여러 사이트의 계정을 관리하고, 블록체인 트랜잭션에 서명할 수 있음.

Back-end:

Solidity

이더리움의 스마트 컨트랙트를 작성할 수 있는 객체지향형 프로그래밍 언어

Remix IDE

솔리디티 코드를 작성하고 컴파일 및 배포까지 쉽게 자동으로 할 수 있도록 돕는 온라인 컴파일러 툴. 디버깅 툴로도 많이 쓰임.원래는 로컬 컴퓨터에 직접 솔리디티 컴파일러를 설치해야하는데, 리믹스 웹브라우저를 사용하면 그런 과정없이 쉽고 빠르게 컴파일 및 배포가 가능

TestRPC

개발 단계에서 실제 이더없이 시뮬레이션 테스트 환경을 구성할 수 있게 해주는 툴. 원래 이더리움 메인넷에서 테스트를 하려면 실제 이더가 필요하지만, TestRPC 를 사용하면 마이닝 없이 가상환경에서 리소스, 트랜잭션에 대한 제한 없이 이더리움을 만들어내서 테스트를 할 수 있음.

TestNet

이더리움의 퍼블릭 테스트 네트워크. 현재 아래와 같은 3개의 퍼블릭 테스트넷을 제공.

• Ropsten (Proof of Work): 프로덕션 환경이 실제 메인넷이랑 가장 비슷하여 (PoW 이기 때문에) 현재 가장 많이 쓰여지고 있는 테스트 네트워크. Geth 와 Parity 클라이언드 둘다 지원. 이전에 스팸 어택을 당한 이력이 있음… 이더 마이닝이 가능하며, 테스트 이더를 요청할 수 있다.
• Kovan (Proof of Authority): Parity 팀이 랍스텐의 문제를 해결하기 위해 개발한 테스트 네트워크. 스팸어택으로부터 안전하며, Parity 클라이언트만 지원. 이더 마이닝 불가능하며, 테스트 이더 요청 필요.
• Rinkeby (Proof of Authority): Rinkeby 역시 스팸 어택을 방지하고자 만들어졌으며, 이더리움 팀이 개발한 테스트넷. Geth 클라이언트만 지원. 이더 마이닝 불가능하며, 테스트 이더 요청 가능.

Mainnet

실제 거래가 이루어지는 이더리움의 메인 네트워크.

Part2. 개발부터 배포까지

A. Solidity로 스마트 컨트랙트 만들기

솔리디티에는 기존의 다른 언어들과는 다른 특징들이 많습니다. “오, 이런 것도 되네?”라고 생각할 수 있는 요소들도 있지만, 반대로 “아니, 이런 것도 안돼?”라고 생각할 법한 것들도 많습니다…(진짜로…). 그렇기 때문에 간단한 DApp이라도 직접 만들어 배포해보는 것이 정말 중요합니다. 그 과정에서 배울 수 있는 것들이 매우 많습니다.

여기서는 저희가 Github에 올려놓은 VisitCounter DApp을 분석하며 솔리디티의 특징들을 함께 알아보겠습니다.

VisitCounter의 전체 소스 코드는 이 Github 저장소에 올라가 있습니다.

이름에서 알 수 있듯이, 해당 프로젝트에서는 우리 DApp에 총 몇 명이 방문했는지, 또 누가 몇 번을 방문했는지 기록합니다.

하.지.만… 그 전에 먼저 유의하셔야 할 것이 있습니다..! 이더리움의 DApp에서 블록체인에 뭔가를 기록하려 한다면, ‘가스(Gas)’라고 불리는 일종의 처리(Transaction) 수수료를 지불해야 합니다. 이는 결국 사용자가 이더를 지불해야 한다는 것이죠. 그리고 이더는 뭐죠? 사용자가 거래소 등에서 실제 현금을 주고 구입해야 하는, 진짜 돈입니다.

이번 글 하나에서 이더리움과 솔리디티의 모든 개념을 명확하게 모두 설명하기는 힘들지만, 이거 하나만 기억하시면 됩니다.

“이더리움에서 DApp을 사용하려면 돈을 내야 한다!”

즉, 우리가 예시로 볼 VisitCounter는 대부분의 사용자 입장에서는 아무런 가치가 없을 것이기 때문에… 아무도 우리 DApp에 방문하지 않을 거에요… 그렇지만 공부하는 입장에서는 굉장히 적절한 프로젝트입니다!

왜 그런지는 다음에 쓸 글에서 상세히 알아보도록 하고(설명할 것이 생각보다 많아서 다른 글로…), 우선 이 파일을 슬쩍 보고 오세요! 지금은 이해할 수 없는 것들이 있더라도, “대충 이렇게 생겼구나” 정도로만 감을 잡으시면 됩니다.

B. 테스트넷 배포

위에서 솔리디티 코드를 작성한 후에는, 무엇을 해야 할까요?

일반적인 웹 프로그래밍 기준으로 보면, 서버사이드 코드를 작성한 후에 서버에 코드를 업로드해야 하겠죠.

컴파일이 필요한 경우에는 컴파일 후 생성된 바이너리 파일 등 실행 가능한 형태의 파일을 업로드하여 배포를 해야 할 것입니다.

그렇다면 솔리디티의 경우에도 코드 작성 후 위와 같이 배포를 하는 과정이 필요하겠죠!? 하지만 여기에서도 일반적인 서버사이드 코드 배포와는 다르게, 블록체인의 특성 때문에 조금은 새로운 방식의 테스트와 배포가 필요합니다. 이 부분에서 명심하셔야 할 것은…

“이더리움 블록체인에 배포한 컨트랙트는 지울 수 없다. 즉 한 번 배포하면 이더리움이 유지되는 한, 계속 존재한다.”

다시 말하자면, 보통의 서버사이드 프로그램처럼 개발자가 마음대로 이미 배포한 코드를 서버에서 지운다거나 접근하지 못하도록 막을 수 없다는 것입니다. 바로 “분산 애플리케이션”이기 때문에, 내 컴퓨터에서 지웠다고 다른 사람들 컴퓨터에서도 지워지는 것은 아니기 때문이죠. 완전히 같진 않지만, 이와 유사한 구조로는 토렌트 같은 애플리케이션이 있겠습니다.

이 특성으로 인해 일반적으로 다음과 같은 절차를 거쳐 이더리움 메인넷에 컨트랙트를 배포합니다.

1. Testrpc와 같은 가상 환경에서 솔리디티 컨트랙트 테스트

• 가상 환경은 실제 블록체인이 아니며, 채굴 없이도 마음대로 이더를 발급하고 컨트랙트를 배포한 후 지우는 등이 가능함

2. 테스트넷에 배포

• 실제 블록체인이어서 채굴을 통해 이더를 생성해야 하지만, 채굴 난이도가 매우 낮음. 다양한 종류의 테스트넷이 있으며, 물론 테스트넷에서 받은 이더는 실제 이더리움 메인넷에서는 사용할 수 없음

3. 이더리움 메인넷에 배포

• 컨트랙트 생성 등 모든 트랜잭션이 발생할 때마다 가스를 소모해야 함. 즉, 실제 이더를 지불함.

이런 배포 과정도 간단하지만은 않기에, 해당 내용으로 별도의 글을 작성하여 누구든 이해하기 쉽게 설명할 예정입니다.

C. Front-end 만들기

솔리디티로 블록체인에 올라갈 컨트랙트 코드를 작성하고, TestRPC나 테스트넷에 우리의 컨트랙트를 배포하고 나면, 무엇을 해야 할까요?

기존 웹의 개념으로 보자면, 지금까지 한 것들은 말하자면 서버의 API만 만들어놓은 상태인 것입니다. 우리 DApp의 사용자들이 직접 보고 사용할, 앞단의 클라이언트가 없는 상태입니다.

하지만, 크롬 브라우저에 연결하여 사용할 수 있는 일종의 지갑인 메타마스크를 사용하면, 크롬에서 큰 번거로움 없이 일반적인 웹사이트를 이용하듯 DApp을 쓸 수 있습니다. 즉, 웹사이트를 만들 때 사용하는 HTML, CSS, Javascript의 조합으로 DApp을 이용할 수 있는 클라이언트를 만들 수 있는 것이죠.

즉, 웹 프로그래밍 경험이 어느 정도 있으신 분들은 큰 부담 없이 바로 따라하실 수 있습니다! =)

VisitCounter의 저장소에 있는 frontend 디렉토리를 보시면, 하나의 디렉토리와 하나의 html 파일을 보실 수 있을 겁니다. 왜 이런 구성인지는 더 상세히 다룰 다른 글에서 보도록 하고… 여기서는 html 파일의 내용을 슬쩍 가볍게 보도록 하겠습니다.

음… 형태는 어디서 많이 본 형태이긴 한데, 뭔가 낯선 아이들이 조금씩 있죠?(형태 자체가 낯설다면, 요런 사이트나 요런 사이트에서 HTML, Javascript를 먼저 배워보세요!)

1. Web3

정확히 뭔지는 모르겠지만, 뭔가 이 web3라는 것이 앞부분에 굉장히 많이 보이죠? 이게 우리의 머리를 복잡하게 하는 원인인 것 같기도 하고…. 이 web3가 뭘까요?

Web3는 우리가 이더리움 블록체인과 통신할 수 있도록 해주는 API의 집합체라고 보시면 됩니다. 즉, 우리의 컨트랙트와 데이터를 주고 받을 수 있도록 정해진 규약대로 메시지를 만들어주는 역할을 합니다. 우리는 자바스크립트로 만들어진 Web3를 사용해야 하니, 정확히는 Web3.js를 사용하는 겁니다.

실제로는 훨씬 더 복잡한 로직을 Web3 덕에 쉽게 사용할 수 있게 된 것이지만, 아무래도 새로운 개념이 많다 보니 우리에겐 그저 복잡하게만 보일 수밖에 없겠죠? 지금 당장은 너무 어렵게 생각하지 마시고, ‘아, 이더리움 DApp의 웹 클라이언트를 만들 때는 Web3.js를 써야겠구나’하는 정도로 기억해두시면 됩니다.

Web3에서 제공하는 기능은 굉장히 다양한데, 단순히 컨트랙트의 함수를 호출하거나 값을 받아오는 것 외에도, watch 기능을 써서 내 지갑에 특정 이벤트가 발생하면 일정한 로직을 실행하도록 하는 등의 처리도 가능합니다. 이런 세부적인 내용에 대해서는 소스를 더 상세히 분석할, 앞으로 쓸 글에서 더 알아보도록 하겠습니다.

2. ABI(Application Binary Interface)

HTML 소스 중간에 보시면, 위와 같은 뭔지 몰라도 이상하게 생긴 JSON 포맷의 데이터를 보실 수 있을 겁니다. 그 내용을 조금 살펴보시면, 뭔가 막 떠오르지 않으시나요?

맞습니다, 바로 VisitCounter의 솔리디티 코드로에서 본 인터페이스와 비슷한 내용을 가지고 있지요. 우리가 지금 보고 있는 클라이언트단에서는 솔리디티로 만들어진 코드가 어떤 형태인지를 알 수가 없기 때문에, ‘너가 지금 통신할 대상은 이러이러한 구조를 가지고 있고, 이런 함수가 있어’ 이런 내용을 자바스크립트에서 알 수 있도록 제공하는 것입니다.

이런 언어나 플랫폼에 대한 의존성 없이, 어디서나 해당 인터페이스에 대한 정보를 제공할 수 있게끔 하는 형태를 Application Binary Interface라고 합니다. DApp에서 이 ABI가 중요한 이유는, 바로 함수 실행과 이더, 즉 돈이 밀접한 연관이 있기 때문입니다. ‘이더리움에서 DApp을 사용하려면 돈을 내야 한다!’라고 했던 것, 다들 기억하시죠?

ABI에 있는 함수 하나를 예시로 보겠습니다.

위 예시에서 볼 수 있듯이, ABI에는 함수명(name), 함수의 인수(inputs) 등 함수에 대한 설명이 있습니다. 거기에 솔리디티만의 특징인, payable과 stateMutability를 포함하죠.

payable이 true면 내가 이 함수를 사용해서 내가 가진 이더를 해당 컨트랙트로 보낼 수 있다는 것을 의미합니다. 크립토키티 같은 DApp에서 내 이더를 주고 고양이를 살 때 사용하는 함수 등이 payable 함수가 되겠죠?

stateMutability에는 다양한 값이 들어가는데, VisitCounter 예제에서는 nonpayable 외에 view를 사용하는 부분이 있습니다. 나중에 더 구체적으로 알아볼 것이지만, view 함수는 실행할 때 가스를 소모하지 않습니다. 즉 내 돈을 쓰지 않는다는 거죠! 이런 중요한 정보는 ABI에 등록해놓고 알려줘야겠죠? :)

아직 위에서 본 두 내용이 정확하게 이해가 되지 않더라도 괜찮습니다. 앞으로 올라올 글들을 통해 함께 공부해나가시면 조금 더 쉽게 이해하실 수 있을거에요!

D. 메인넷 배포

• 배포까지 너무 한 번에 다 써버리면 재미가 없겠죠…? (절대 지금 우리가 몰라서 그러는 것이 아니에요…)
• 이 글이 개발 환경을 이해하는 데에 도움이 되었다면, 댓글로 알려주세요! 그럼 다른 글과 함께 메인넷 배포도 더욱 서둘러 업데이트를 할 수 있을 것만 같아요…!

이 다음 글에서는 구체적으로 이 글에서 언급된 도구들을 어떻게 활용하고, 실제로 DApp 을 개발하고, 배포하는 과정까지 자세히 다룰 예정입니다.

글을 보시고 질문이나 피드백이 있으시면 언제든지 알려주세요!

감사합니다.