MVP 소개 Part 1) E-Explorer

Eden_Jessica

Published in

에덴체인

11 min readApr 7, 2018

E-Explorer는 4월 말에 공개할 2개의 MVP 중, 첫 번째로 공개될 EdenChain의 웹기반 유틸리티 프로그램입니다.

현재 기본적인 기능은 완성이 된 상태이며, UI/UX 작업 중입니다. 초기 버젼인만큼, 앞으로도 지속적으로 보완하고 업데이트해 나갈 것입니다.

E-Explorer에 관한 간단한 기술적 설명을 첨부하니, 아래를 참조해주시기 바랍니다. :D

What is E-Explorer?

E-Explorer는 EdenChain의 블록 정보를 살펴볼 수 있는 웹기반의 Block Browser이다. E-Explorer를 이용하면 누구나 쉽게 EdenChain에서 사용하는 블록과 트랜잭션에 대한 정보를 검색하고 살펴볼 수 있다.

E-Explorer를 개발하면서 가장 중요한 특징으로 생각했던 것은 2가지로 요약하여 이야기할 수 있다. 바로 1) 사용성과 2) 관련 데이터와의 연계이다.

1) 사용성
E-Explorer는 개발자보다는 일반인이 주 사용자이기 때문에 블록체인 기술과 EdenChain에 대해 자세히 알지 못하더라도 자신의 계좌 혹은 특정 트랜잭션을 손쉽게 찾아 볼 수 있는 UI/UX가 필요하다. 때문에 되도록 별도의 학습없이 직관적으로 사용할 수 있도록 설계하고자 했다.

2) 관련 데이터와의 연계
관련 데이터와의 연계는 다른 Block Explorer를 사용하면서 느꼈던 불편한 점을 개선하는 방향으로 E-Explorer에 구현했다. Block은 Blockchain에서의 트랜잭션 데이터 처리를 위한 기본적인 단위이고, Block안에 다수의 Transaction이 들어가 있다. 개발자 입장에서는 Transaction과 해당 Transaction이 들어있는 Block의 내용도 함께 확인하고 싶은 경우가 있는데, 타 Block Explorer에서는 이것이 쉽지 않았다. E-Explorer에서는 Block, Batch 그리고 Transaction 등 서로 연관된 데이터를 클릭함으로써 상세한 정보를 얻을 수 있도록 기능을 구현하였다.

What can you do with E-Explorer?

E-Explorer에서 제공하는 주요한 기능은 다음과 같다.

Block 데이터 브라우징
- Edenchain 내의 블록들을 살펴볼 수 있고, 자세한 내용을 확인할 수 있다.
Batch 데이터 브라우징
- Block내에 존재하는 Batch들의 리스트를 보고, 자세한 내용을 확인할 수 있다.
Transaction 데이터 브라우징
- Batch내에 존재하는 transaction들의 리스트를 보고, 자세한 내용을 확인할 수 있다.
State 데이터 브라우징
- EdenChain내에서 사용하는 State의 리스트와 상세한 정보를 볼 수 있다.
Transaction 검색
Stat 정보 제공
- EdenChain내의 통계정보를 확인할 수 있다.

위의 기능들은 보통의 Block Explorer와 유사한 기능을 제공하며 Block Explorer 인 만큼 Edenchain 내의 블록과 관련된 데이터를 일목요연하게 확인할 수 있고, 관련 데이터를 몇 번의 클릭으로 쉽게 찾아볼 수 있도록 구성되었다.

Architecture

E-Explorer는 독립적인 Client와 Server의 구조로 설계했으며, API를 이용해 서로 네트워킹 한다.

아키텍쳐를 설계하면서 가장 고심했던 부분은 Client와 Server의 Decoupling을 최소화해 Server는 Client에서 사용했던 프로그래밍 언어나, 아키텍쳐 등에 상관없이 필요한 기능을 추가하거나, 기존의 구조를 업데이트하는 것이 가능한 구조로 만드는 것이었다.

왜냐하면 EdenChain은 지속적으로 업데이트되고, 새로운 기능과 기존 아키텍쳐의 변화가 예상되고, 이는 필연적으로 E-Explorer의 아키텍쳐에도 영향을 미칠 것이다.

이러한 업데이트마다 E-Explorer의 Client에도 영향을 주는 것은 생산성과 안정성 등의 다양한 측면에서 좋지 않은 결과를 만들어낼 수 있기 때문에 Server와 Client가 아무런 상관관계 없이 독립적인 구조를 가지도록 하였다. Client와 Server가 당연히 어떠한 연관관계도 없고 단지 API를 이용해 서로 필요한 데이터를 주고 받는 식으로 설계하였기 때문에 Server의 변화가 Client에 영향을 주지 않는다. 반대의 경우도 마찬가지이다.

새로운 기능의 추가가 필요하다면 그에 필요한 API를 서버에 정의하고, Client에서는 추가된 API를 통해 필요한 데이터를 가져오고, 설계에 맞춰 데이터를 표시하면 된다.

이러한 사상을 담은 E-Explorer의 아키텍쳐는 아래의 그림과 같다.

앞서 설명한대로 E-Explorer Server와 E-Explorer Client는 API 만을 이용해 통신을 할 뿐 서버에서 Client Page를 생성하거나, 데이터를 만들어내는 등의 작업은 하지 않도록 설계되었다.

Data Structure

E-Explorer의 본질적인 기능은 EdenChain내에 존재하는 데이터들, 즉 Block, Batch, Transaction의 내용을 살펴보고, 검색하는 것이다. 따라서 E-Explorer를 잘 활용하기 위해서는 EdenChain내의 데이터구조가 어떻게 되어 있는지 이해하는 것이 큰 도움이 된다.

EdenChain의 데이터구조는 다른 블록체인과 다르게 Block과 Transaction 사이에 Batch라고 하는 데이터가 존재한다. (Block과 Transaction은 다른 블록체인과 동일한 개념이기 때문에 별도의 설명은 하지 않는다.) Batch는 연관된 Transaction들을 묶어주는 그룹으로 Error Handling, Scalability에 중요한 역할을 한다.

예를 들어 설명하면 Seller A와 Buyer B가 거래를 한다고 가정해보자. 이 두 사람이 거래를 하기 위해서는 다음과 같은 일련의 작업들이 필요하다.

Seller A의 Account 정보확인
Buyer B의 Account 정보확인
Buyer B의 잔고확인
Buyer B가 Seller A에게 송금

이러한 일련의 작업들은 하나하나의 Transaction이 되기 때문에 이 경우에는 최소 4개의 Transaction이 필요하다. 이 4개의 transaction은 결국 Seller A와 Buyer B의 거래를 처리하기 위한 것이기 때문에 동일한 작업으로 생각할 수 있다. 그래서 이 과정 중 무엇인가 문제가 생겼을 때 해당 4개의 Transaction을 모두 무효화하는 등의 적절한 에러 핸들링을 하게 되면 Blockchain Platform입장에서는 Transaction 처리를 매우 빠르고 정확하게 할 수 있다.

이러한 이유로 EdenChain에서는 Batch라는 Transaction Group 데이터를 사용한다.

Server

E-Explorer Server의 본질적 역할은 API Server이다. Client에서 요청한 자료를 JSON 형식으로 만들어 빠르게 전달되는 것이기 때문에 UI와 관련된 코드들은 필요 없으며, EdenChain의 API를 이용해 필요한 정보를 수집하고, 혹은 데이터베이스에 접속해 데이터를 가공해 전달한다.

이러한 이유로 Server는 Client에서 호출한 API에 대한 실행로직을 가지고 있는 함수를 실행시키는 일종의 Dispatcher이다. Server는 여러 API Call을 빠른 시간에 처리할 수 있어야 하므로 최대한 간결하고 빨리 실행할 수 있도록 코드를 작성하는 게 중요하다.

E-Explorer에서는 Django Framework을 사용해 E-Explorer Server를 개발했다. Django Framework은 무겁기 때문에 API Server로 사용하기에는 최적의 선택은 아니지만 EdenChain 개발자들이 좋아하는 관계로 그냥 선택했다. :)

Stateless Data

E-Explorer server는 다수의 E-Explorer Client의 API 요청을 처리하기 때문에 필요시 E-Explorer Server를 손쉽게 늘릴 수 있는 방법이 요구된다. Performance 측면에서 보면 Python Django는 결코 최선의 선택이 아니기 때문에 반드시 Scalability를 위한 방법이 필요하다. 앞으로 EdenChain이 많이 활용되면 될수록 E-Explorer 사용자도 선형적으로 증가하기 때문에 E-Explorer Server의 처리용량을 단순한 서버추가로 해결할 수 있어야 한다.

이와 같은 방법을 적용하기 위해서는 사용하는 데이터에 상태정보가 없는, Stateless Data가 요구된다. Stateless Data는 각 서버들이 공유해야 하는 상태정보가 없기 때문에 서버에 상관없이 API Call을 처리할 수 있어 Scalability를 비교적 손쉽게 확보할 수 있다.

예를 들어 Client A가 2개의 API Call을 요청했을 때, 이것을 서로 다른 API 서버에서 각각 처리해 결과치를 돌려줘도 아무런 문제가 없다. E-Explorer는 프로그램의 특성상 Stateless Data이기 때문에 Load Balancer를 이용하면 어렵지 않게 API Server의 처리용량을 증가시킬 수 있다.

Load Balancer

다수의 API Server를 운영해 Scalability를 확보하려면 외부에서 들어오는 요청을 적절히 분산해 운영중인 API Server에 전달할 수 있어야 한다. 이런 경우에 Load Balancer를 이용하면 된다.

Load Balancer는 외부에 노출되는 End Points로 E-Explorer Client는 E-Explorer Server를 직접 호출하지 않고 Load Balancer에 API를 호출한다. Load Balancer는 접속되어 있는 E-Explorer에 전달해 실제 API Call을 처리하고 그 결과값을 원래 호출한 E-Explorer Client에 전달한다.

Load Balancer로는 Nginx를 사용한다. Nginx는 안정적인 고성능 웹서버로 아파치 웹서버 다음으로 많이 사용되고 있으며, Load Balancer, Proxy Server등으로도 활용할 수 있다.

Client

E-Explorer Client는 Javascript 기반의 독립적인 어플리케이션으로 AJAX를 이용해 E-Explorer Server와 통신을 한다. Client는 서버와 달리 UI/UX 가 매우 중요하기 때문에 사용자가 별도의 학습 없이 바로 사용할 수 있도록 구성하고 다양한 화면을 적절한 이벤트에 따라 보여줄 수 있어야 한다.

E-Explorer Client는 EdenChain의 블록에 대한 정보를 살펴보는 것이 주요한 기능인 만큼, Grid, Form등이 주요한 UI 구성요소가 된다. 또한 E-Explorer는 UI를 가지고 있기 때문에 기능 및 화면의 업데이트 그리고 신규기능의 추가가 쉽게 예상된다. 따라서 이러한 요구사항들에 대해 빠르게 대처하면서 기존의 아키텍쳐에 영향을 미치지 않는 그러한 아키텍쳐로 설계해야 한다.

MVVM

E-Explorer Client에는 MVVM(Model-View-Viewmodel) 아키텍쳐 패턴을 적용한다. 클라이언트 프로그램 개발에 가장 많이 사용하는 아키텍쳐 패턴은 MVC(Model-View-Controller) 일 것이다. MVC 패턴은 코드를 각각의 역할에 따라 분리해서 작성한다는 면에서는 장점이 있지만, 반대급부도 존재한다.

MVC 적용시 웹페이지의 증가에 따라 복잡성이 증가하는데, 특히 개인적으로 맘에 들지 않는 것은 Controller에 대한 기준이 명확하지 않다는 점이다. 어떤 코드를 작성할 때 이것을 View에 넣어야 하는 것인지, Model에 넣어야 하는지에 대한 구분이 프로그램이 복잡해질 수록 어려워지기 시작한다. 여러 사람이 협업해야 하는 경우라면 더욱 심각해진다. 이렇게 코드가 Controller, View, Model로 구분되지 않는다면 애초에 MVC를 적용한 의미가 없어진다.

이러한 이유로 EdenChain Team에서는 MVVM을 적용한다. MVVM 아키텍쳐 패턴을 적용했을때 가장 큰 장점은 View를 기준으로 전체적인 구조를 만들 수 있다는 점이다. 사실 생각해보면 Client 프로그램은 여러 개의 준비된 화면을 사용자의 요구에 따라 보여주는 것이라는 것을 생각해보면 MVVM이 MVC보다 훨씬 더 UI를 가진 클라이언트 프로그램에 적합하다는 것을 알 수 있다.