블록체인을 활용한 쇼핑몰 구현하기

2019.10.28

블록체인 기술은 2008년 Satoshi Nakamoto가 발표한 백서로부터 그 존재를 드러내기 시작했습니다. 블록체인 기술을 활용한 암호화폐(Cryptocurrency)는 대중들에게 가장 많이 알려진 대표 사례입니다.

본 문서에서는 블록체인 기술을 실생활에 접목한 다른 활용사례로 쇼핑몰을 소개합니다.

결정자적 지갑을 활용한 쇼핑몰

비트코인, 블록체인과 금융의 혁신 책에 결정자적 지갑을 활용한 쇼핑몰 구현 사례가 등장합니다. 해당 사례에서 관리자는 시드값을 통해 생성된 블록체인 주소를 제품의 고유 블록체인 주소로 사용합니다. 이후에 구매하려는 고객은 제품의 블록체인 주소로 해당 금액을 입금합니다.

이런 내용은 현실 세계와 약간의 차이가 있을 뿐 크게 다르지 않습니다.

현실 세계에서 관리자는 제품을 홈페이지에 등록하고, 해당 제품에 대한 재고관리를 합니다. 고객은 홈페이지 회원가입을 위해 이름, 생년월일, 전화번호, 주소 등을 입력합니다. 회원가입이 끝나면 제품 구매가 가능하며 구매 결정 시 해당 제품에 대한 결제 방식을 선택합니다. 결제 방식으로는 실시간 계좌이체, 무통장입금, 신용카드 등이 제공되며, 선택한 금융 서비스를 이용해 관리자에게 입금합니다.

위와 같은 기존 현실 세계와 블록체인 세계의 차이는 다음과 같습니다.
첫번째, 본인 인증
두번째, 금융 기관

현실 세계에는 각기 다른 금융기관이 존재합니다. 각 기관마다 제공하는 금융 서비스, 영업 시간 등이 다르며 이를 이용하기 위해서는 해당 기관에 가입해야 합니다. 금융 기관은 금융 서비스 이용 시 제 3자의 무단 사용을 방지해야하는 책임이 있으며, 본인 인증을 통해 이것을 해결합니다. 본인 인증은 아이핀(I-PIN)과 주민등록번호, 본인 명의의 휴대전화 등 다양한 인증 수단이 존재합니다.

그에 반해, 블록체인 세계는 탈중앙화된 노드들로 구성되어 있으며 Address와 그에 대응되는 Private Key를 생성하여 해당 블록체인을 사용하고, 이를 통해 본인을 증명합니다. VAN사를 통해 결제가 진행되고 결제 내역이 금융 기관에 전달되는 복잡한 과정은 없습니다. 단지, 제품의 블록체인 주소에 금액을 입금하고, 해당 블록체인 주소로 발생한 트랜잭션을 조회하는 것이 끝입니다.

그렇다면 실제로 블록체인을 활용한 쇼핑몰을 구현하여 그 모습을 확인해보겠습니다. 과정은 크게 프로젝트 설정, 블록체인 주소 생성하는 부분, 생성된 주소를 사용하는 부분, 전체적인 프론트 구성, 결제과정으로 나뉘어 집니다.

프로젝트 설정

프로젝트 설정은 groovy 기반의 빌드 시스템인 Gradle을 사용합니다. Multi Project 구성 방식을 사용하여 루트 프로젝트와 서브 프로젝트들로 구성합니다.

우선 이클립스에서 새로운 gradle 프로젝트를 하나 생성합니다.

다음으로 settings.gradle 파일을 작성합니다. 해당 파일을 통해 만들고자 하는 루트 프로젝트와 서브 프로젝트들을 구성할 수 있습니다.

다음으로 작성할 파일은 build.gradle입니다. 작성이 끝났으면, 프로젝트를 선택 후 Refresh gradle project를 클릭합니다.

group = 'io.blocko'

ext {
 springBootVersion = '2.0.0.RELEASE'
 herajVersion = '1.1.0'
}

buildscript {
 repositories {
 maven {
 url "https://plugins.gradle.org/m2/"
 }
 google()
 mavenCentral()
 }
 dependencies {
 classpath "io.spring.gradle:dependency-management-plugin:1.0.8.RELEASE"
 }
}

allprojects {
 version '0.1-SNAPSHOT'
}

def javaProjects = [project('aergo-store-common'), project('aergo-store-web')]

configure(javaProjects) {
 apply plugin: 'java'
 apply plugin: 'maven'
 apply plugin: 'idea'
 apply plugin: 'checkstyle'
 apply plugin: 'eclipse'

 sourceCompatibility = JavaVersion.VERSION_1_8
 targetCompatibility = JavaVersion.VERSION_1_8

 eclipseJdt.doLast( {
 ant.propertyfile(file: ".settings/org.eclipse.core.resources.prefs") {
 ant.entry(key: "eclipse.preferences.version", value: "1")
 ant.entry(key: "encoding/<project>", value: "utf8")
 }
 } )

 idea {
 module {
 outputDir file('build/classes/java/main')
 testOutputDir file('build/classes/java/test')
 }
 }

 compileJava.options.encoding = 'UTF-8'
 compileTestJava.options.encoding = 'UTF-8'

 repositories {
 jcenter()
 mavenLocal()
 mavenCentral()
 }

 dependencies {
 compileOnly "org.projectlombok:lombok:1.18.8"
 testCompile "org.projectlombok:lombok:1.18.8"
 }
 checkstyle {
 project.ext.checkstyleVersion = '8.24'
 project.ext.sevntuChecksVersion = '1.26.0'

 ignoreFailures = true
 configFile = file("${rootProject.projectDir}/styles.xml")
 reportsDir = file("${buildDir}/checkstyle-reports")
 configurations {
 checkstyle
 }
 checkstyleMain {
 source = sourceSets.main.allSource
 reportsDir = checkstyle.reportsDir
 }
 dependencies{
 assert project.hasProperty("checkstyleVersion")

 checkstyle "com.puppycrawl.tools:checkstyle:${checkstyleVersion}"
 checkstyle "com.github.sevntu-checkstyle:sevntu-checks:${sevntuChecksVersion}"
 }
 }

 task sourcesJar(type: Jar, dependsOn: classes) {
 classifier = 'sources'
 from sourceSets.main.allSource
 }

 jar {
 baseName = 'store'
 }

}

group = 'io.blocko'

ext {

springBootVersion = '2.0.0.RELEASE'

herajVersion = '1.1.0'

}

buildscript {

repositories {

maven {

url "https://plugins.gradle.org/m2/"

}

google()

mavenCentral()

}

dependencies {

classpath "io.spring.gradle:dependency-management-plugin:1.0.8.RELEASE"

}

allprojects {

version '0.1-SNAPSHOT'

}

def javaProjects = [project('aergo-store-common'), project('aergo-store-web')]

configure(javaProjects) {

apply plugin: 'java'

apply plugin: 'maven'

apply plugin: 'idea'

apply plugin: 'checkstyle'

apply plugin: 'eclipse'

sourceCompatibility = JavaVersion.VERSION_1_8

targetCompatibility = JavaVersion.VERSION_1_8

eclipseJdt.doLast( {

ant.propertyfile(file: ".settings/org.eclipse.core.resources.prefs") {

ant.entry(key: "eclipse.preferences.version", value: "1")

ant.entry(key: "encoding/<project>", value: "utf8")

}

} )

idea {

module {

outputDir file('build/classes/java/main')

testOutputDir file('build/classes/java/test')

}

compileJava.options.encoding = 'UTF-8'

compileTestJava.options.encoding = 'UTF-8'

repositories {

jcenter()

mavenLocal()

mavenCentral()

}

dependencies {

compileOnly "org.projectlombok:lombok:1.18.8"

testCompile "org.projectlombok:lombok:1.18.8"

}

checkstyle {

project.ext.checkstyleVersion = '8.24'

project.ext.sevntuChecksVersion = '1.26.0'

ignoreFailures = true

configFile = file("${rootProject.projectDir}/styles.xml")

reportsDir = file("${buildDir}/checkstyle-reports")

configurations {

checkstyle

}

checkstyleMain {

source = sourceSets.main.allSource

reportsDir = checkstyle.reportsDir

}

dependencies{

assert project.hasProperty("checkstyleVersion")

checkstyle "com.puppycrawl.tools:checkstyle:${checkstyleVersion}"

checkstyle "com.github.sevntu-checkstyle:sevntu-checks:${sevntuChecksVersion}"

}

task sourcesJar(type: Jar, dependsOn: classes) {

classifier = 'sources'

from sourceSets.main.allSource

}

jar {

baseName = 'store'

}

설정한 settings.gradle, build.gradle과 동일하게 프로젝트가 구성됩니다.

이상으로 Gradle의 Multi Project를 이용한 프로젝트 설정이 끝났습니다. 다음으로 알아볼 내용은 제품에 부여할 블록체인 주소 생성에 관한 내용입니다.

블록체인 주소 생성

대부분의 제품들은 모델명을 통해 식별이 가능합니다. 예를 들면 제품은 제품명, 모델명, 가격 등에 속성을 지니고 있습니다. 다음의 그림처럼 모델명 GK5TSU824BK는 유일성과 최소성을 만족하여 기본키로 선택 가능하지만 제품명 M-Logo Sweat는 어느 한 가지도 만족하지 못하기 때문에 기본키가 될 수 없습니다.

제품의 모델명이란 색상이나 사양 등을 표시해야 할 필요가 있을 때, 그런 특징까지 모델명에 포함하는 경우가 있기는 하나 모델명을 짓는 데 일관된 규칙은 존재하지 않습니다. (관련 글: (-.-)a “제품 ‘모델명’은 어떻게 짓나요?”)

앞으로 구현할 쇼핑몰에서는 제품의 식별자로써 Heraj(아르고 용 java SDK)에서 생성한 블록체인 주소를 사용합니다.

블록체인 주소는 타원곡선 즉, 0부터 2²⁵⁶(=10⁷⁷) 가지의 무작위 숫자로부터 생성됩니다. 이는 가시적 우주의 원자 개수로 표현되는 10⁸⁰과 맞먹는 숫자입니다. 결과적으로 동일한 블록체인 주소를 2번 생성하기란 불가능한 일로써 식별자로 사용하기에는 충분합니다. 또한 블록체인 주소를 제품의 식별자로 사용하게 되면 별도의 계좌 없이 해당 주소를 통한 제품 주문이 가능해집니다.

현재 Heraj에서는 결정자적 지갑을 사용한 주소 생성 기능을 제공하지 않기 때문에 이를 사용하기 위해선 별도의 구현이 필요합니다.(작성 시 heraj 버전 : 1.1.0) 해당 문제는 Bitcoin-core 패키지에서 제공하는 DeterministicKey 생성 로직을 이용하여 해결합니다.

final DeterministicSeed seed =
        new DeterministicSeed(mnemonicCode, null, passphrase, new Date().getTime());
final DeterministicKeyChain chain = DeterministicKeyChain.builder().seed(seed).build();
final List<ChildNumber> keyPath = HDUtils.parsePath("M/44H/60H/0H/0/0");
final DeterministicKey key = chain.getKeyByPath(keyPath, true);

final DeterministicSeed seed =

new DeterministicSeed(mnemonicCode, null, passphrase, new Date().getTime());

final DeterministicKeyChain chain = DeterministicKeyChain.builder().seed(seed).build();

final List<ChildNumber> keyPath = HDUtils.parsePath("M/44H/60H/0H/0/0");

final DeterministicKey key = chain.getKeyByPath(keyPath, true);

다음으로 Heraj에서 제공하는 ECDSAKey를 활용하여 DeterministicKey로부터 AergoKey를 생성합니다.

final BigInteger privatekey = key.getPrivKey();
final ECDSAKey ecdsaKey = new ECDSAKeyGenerator().create(privatekey);
final AergoKey aergoKey = new AergoKey(ecdsaKey);

final BigInteger privatekey = key.getPrivKey();

final ECDSAKey ecdsaKey = new ECDSAKeyGenerator().create(privatekey);

final AergoKey aergoKey = new AergoKey(ecdsaKey);

이상으로 아르고 키 생성이 끝났습니다, 이제 이를 활용하여 제품의 식별자로 아르고 키를 사용하는 방법에 대하여 알아보겠습니다.

@PrePersist

앞선 내용에서 결정자적 지갑을 활용하여 아르고 키를 생성하였습니다. 이제 생성한 아르고 키를 제품이 DB에 저장되기 바로 직전 상태에서 식별자로 부여받도록 만들어보겠습니다.

javax.persistence 패키지 안에는 @PrePersist라는 어노테이션이 있습니다. 이는 persist() 메서드를 호출하여 영속성 컨텍스트에서 엔티티를 관리하기 직전에 호출됩니다.

@MappedSuperclass
@ToString(callSuper = true)
public abstract class UuidEntity extends PersistableEntity implements Persistable<String> {
  
  @Id
  @Column(name = "UUID", updatable = false)
  @Getter
  @Setter
  protected String id;

  @PrePersist
  protected void prePersist() throws Exception {
    if (id == null) {
      id = childKey().getAddress().getValue();
    }
  }
  ...

@MappedSuperclass

@ToString(callSuper = true)

public abstract class UuidEntity extends PersistableEntity implements Persistable<String> {

@Id

@Column(name = "UUID", updatable = false)

@Getter

@Setter

protected String id;

@PrePersist

protected void prePersist() throws Exception {

if (id == null) {

id = childKey().getAddress().getValue();

}

...

이제 UuidEntity 클래스를 상속받은 Product 클래스는 해당 제품이 완전하게 DB에 등록되는 시점에서 식별자로 블록체인 주소값을 가지게 됩니다.

@Entity
@ToString(callSuper = true)
@Table(name = "PRODUCTS")
public class Product extends UuidEntity {

  @Getter
  @Setter
  protected String name;

  @Getter
  @Setter
  protected String color;
  ...

@Entity

@ToString(callSuper = true)

@Table(name = "PRODUCTS")

public class Product extends UuidEntity {

@Getter

@Setter

protected String name;

@Getter

@Setter

protected String color;

...

전체 소스에 관해서는 아래 주소를 참고하시기 바랍니다.
https://github.com/id6827/aergo-store

다음으로는 쇼핑몰 프론트엔드에 관련된 내용입니다.

Frontend

이번 프로젝트에서는 전통적인 방식의 View Resolver인 Thymeleaf를 활용하여 구현해보겠습니다. 우선, Thymeleaf를 더 효율적으로 사용 가능하게 하는 thymeleaf-layout-dialect를 build.gradle에 추가합니다.

dependencies {
  compile project(':aergo-store-common')
  
  compile "org.springframework.boot:spring-boot-starter-web:${springBootVersion}"
  compile "org.springframework.boot:spring-boot-starter-data-jpa:${springBootVersion}"
  compile "org.springframework.boot:spring-boot-starter-thymeleaf:${springBootVersion}"
  compile "nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.4.1"
  
  ...

dependencies {

compile project(':aergo-store-common')

compile "org.springframework.boot:spring-boot-starter-web:${springBootVersion}"

compile "org.springframework.boot:spring-boot-starter-data-jpa:${springBootVersion}"

compile "org.springframework.boot:spring-boot-starter-thymeleaf:${springBootVersion}"

compile "nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.4.1"

...

해당 패키지를 추가하게 되면 layout.html은 모든 html의 기본 base로 활용 가능합니다.

디렉토리 구조로 살펴보면 다음과 같습니다.

Templates 안에 base 역할을 담당할 layout.html을 생성하고 public 안에는 구현할 html 파일을 생성합니다. layout:decorator 태그를 사용하여 layout.html을 layout으로 지정하고, 추가 내용은 fragment 태그에 작성합니다.

<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="../templates/layout">
<th:block layout:fragment="head-title">
    <title>Login | Aergo Store</title>
</th:block>
<th:block layout:fragment="section">
	<section id="form"><!--form-->
		<div class="container">
			<div class="row">
				<div class="col-sm-4 col-sm-offset-1">
					<div class="login-form"><!--login form-->
						<h2>Login to your account</h2>
						<form action="login" method="post">
							<input type="email" name="email" placeholder="Enter email" />
							<input type="password" name="password" placeholder="Enter password" />
							<span>
								<input type="checkbox" class="checkbox"> 
								Keep me signed in
							</span>
							<button type="submit" class="btn btn-default">Login</button>
						</form>
					</div><!--/login form-->
				</div>
				<div class="col-sm-1">
					<h2 class="or">OR</h2>
				</div>
				<div class="col-sm-4">
					<div class="signup-form"><!--sign up form-->
						<h2>New User Signup!</h2>
						<form action="/signup" method="post">
							<input type="email" name="email" placeholder="Enter email" />
							<input type="text" name="username" placeholder="Enter username" />
							<input type="password" name="password" placeholder="Enter password" />
							<button type="submit" class="btn btn-default">Signup</button>
						</form>
					</div><!--/sign up form-->
				</div>
			</div>
		</div>
	</section><!--/form-->

</th:block>
</html>

<!DOCTYPE html>

<th:block layout:fragment="head-title">

<title>Login | Aergo Store</title>

</th:block>

<th:block layout:fragment="section">

<h2>Login to your account</h2>

<span>

Keep me signed in

</span>

<button type="submit" class="btn btn-default">Login</button>

</form>

</div>

</div>

</div>

<h2>New User Signup!</h2>

<button type="submit" class="btn btn-default">Signup</button>

</form>

</div>

</div>

</section>

</th:block>

</html>

Frontend에 사용할 Template의 경우, 개인이 개발한 것을 사용하거나 디자이너가 작성한 것 혹은 이미 구현된 것을 구입하여 사용합니다. MVP처럼 빠른 결과물이 요구되는 상황에서는 무료 Template을 사용하여 구현합니다.

이번 쇼핑몰 구현에 사용된 Template는 eShopper라는 무료 Template입니다. eShopper는 그림과 같이 쇼핑몰에 필요한 기본 요소들이 자세하게 구현되어 있습니다.

해당 Template을 내려받고 프로젝트의 main/resources/public/ 안에 파일을 복사합니다.

이제 복사한 Template 파일을 렌더링 하는 방법에 대하여 알아보겠습니다.

서버사이드 렌더링

SpringBoot와 Thymleaf를 활용하면 손쉽게 서버사이드 렌더링이 가능합니다. Controller를 통해 html 파일과 객체를 반환하는 방법은 다음과 같습니다.

@GetMapping("index")
  public ModelAndView home() {
    final ModelAndView mav = new ModelAndView("index");
    final Pageable pageable = PageRequest.of(0, 5);
    final List<Article> shirts = articleService.findByAll(pageable).getContent();
    mav.addObject("articles", shirts);

    return mav;
  }

@GetMapping("index")

public ModelAndView home() {

final ModelAndView mav = new ModelAndView("index");

final Pageable pageable = PageRequest.of(0, 5);

final List<Article> shirts = articleService.findByAll(pageable).getContent();

mav.addObject("articles", shirts);

return mav;

}

GET 방식의 /index 요청이 들어올 경우, 서버에서는 index.html과 article 객체를 반환합니다. 반환된 결과를 렌더링 하면 다음과 같습니다.

다음은 세션 처리를 추가한 Login 기능입니다.

 @PostMapping("login")
  public ModelAndView login(final User user, HttpServletResponse response) throws Throwable {
    log.info("Login user : {}", user);
    return userService.login(user).map(u -> new ModelAndView("index", "user", u))
        .orElse(new ModelAndView("index", "user", null));
  }

@PostMapping("login")

public ModelAndView login(final User user, HttpServletResponse response) throws Throwable {

log.info("Login user : {}", user);

return userService.login(user).map(u -> new ModelAndView("index", "user", u))

.orElse(new ModelAndView("index", "user", null));

}

로그인이 성공하면 index.html과 user 정보가 반환되고, Thymleaf의 th:if 태그에 의해 숨겨진 메뉴가 보이게 됩니다.

<ul class="nav navbar-nav">
  <li><a href="/" class="active"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
  <li><a th:if="${user != null}" href="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Cart</a></li>
  <li><a th:if="${user != null}" href="/"><i class="fa fa-truck" aria-hidden="true"></i> Delivery</a></li>
  <li><a th:if="${user != null}" href="/"><i class="fa fa-user" aria-hidden="true"></i> Account</a></li>
  <li><a th:if="${user == null}" href="login"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</a></li>
  <li><a th:if="${user != null}" href="logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a></li>
</ul>