안녕하세요, Ground X의 Wallet Development Team입니다.
Ground X에서 블록체인 기술을 활용하여 사용자의 디지털 자산을 쉽고 편리하게 관리해 주는 디지털 자산 지갑 서비스를 개발하는 팀입니다.

지난 글에 이어 if(kakao)2020에서 Ground X가 준비한 Klip App2App API를 활용한 데모 앱 개발기 세션을 소개하고자 합니다.

이 글에서는 Klip App2App API를 사용하여 개발된 미술품 마켓이라는 데모 앱을 설명합니다. 구현 디테일에 대한 설명보다는 개발하면서 필요한 내용을 찾아보실 수 있는 가이드를 제공할 목적으로 작성했습니다. 자세한 내용은 if(kakao)2020 세션에서 보실 수 있습니다.

관련 세션 : BApp 개발자들을 위한 Klip : 야, 너두 BApp 개발할 수 있어

내용 설명에 앞서 Klip은 사용자의 디지털 자산을 쉽고 편리하게 관리해 주는 블록체인 기반 디지털 지갑 서비스입니다. 카카오톡 더 보기 탭에서 실행할 수 있습니다. App2App API는 이 Klip을 이용하여 외부 앱에서 사용자의 지갑 주소를 인증하거나 안전하게 자산을 전송할 수 있는 API입니다. 별도의 가입 과정 없이 간단한 API를 통해서 Blockchain App (이하 BApp) 개발에 활용할 수 있습니다.

여기서 설명할 미술품 마켓 앱은 여러 사람들이 판매를 위해서 올려놓은 미술품을 구경하거나 구매할 수 있고, 내가 소유 중인 미술품 목록을 보여주는 앱입니다. 부가적으로 미술품을 출품한 아티스트들을 후원할 수 있습니다. 좀 더 구체적으로는 아래와 같은 기능을 제공합니다.

사용자 지갑 주소 인증 : Klip을 통해서 앱에 접속한 사용자의 지갑 주소를 인증할 수 있습니다. 이를 통해서 블록체인 상에 해당 지갑 주소의 자산 내역을 확인하거나 주고받을 수 있게 됩니다.
내가 보유한 미술품 목록 : 앞서 인증된 주소를 통해 내가 보유하고 있는 미술품 목록을 블록체인 상에서 불러옵니다.
미술품 마켓 상품 목록 및 구매 : 미술품 마켓에 등록된 상품을 조회하고 구매할 수 있습니다.
아티스트 후원 : 미술품 제작자를 KLAY나 MAR 토큰으로 후원할 수 있습니다.

Klip에서 인증된 내 지갑 > 미술품 마켓 > 아티스트 목록

데모 앱 기반 기술

미술품은 카드 형태로 발급됩니다. 카드란 Klip에서 사용될 디지털 자산입니다. 예를 들어 미술품뿐만이 아니라 게임 아이템, 할인 쿠폰 등의 다양한 자신을 카드 형태로 발행하고 Klip 사용자 또는 BApp 사용자에게 보낼 수 있습니다.

모든 카드는 기본적으로 대체 불가 토큰 (Non-Fungible Token, 이하 NFT)입니다. 대체 불가 토큰은 간단하게 말하면 “화폐”(비트코인, 이더리움 등)가 아닌 "고유한 자산"입니다. 5만원권 지폐 1장은 다른 5만원권 지폐 1장으로 완벽히 대체 가능합니다. 하지만, 내 예술 작품은 다른 이의 예술 작품으로 대체 불가능합니다. 이렇게 수집품, 예술 작품, 개인용 물품 등 고유한 자산을 디지털화하여 블록체인상에 토큰 형태로 표현한 것이 바로 대체 불가 토큰입니다.

좀 더 구체적으로 NFT는 특정 기술 스펙을 구현한 특별한 타입의 스마트 컨트랙트입니다. Klaytn에서 토큰을 발행하려는 모든 사람들은 스펙을 따라야 합니다. 위에서 언급한 NFT는 KIP-17이라는 표준으로 정의돼 있습니다. 그리고 카드 자체는 기본적으로 블록체인 위에 저장되지만 카드의 구체적인 속성은 JSON 포맷 형태로 저장된 외부 URL을 참조하는 방식으로 구현됩니다.

후원하기 기능은 KLAY와 같은 코인으로 가능합니다. KLAY는 Klaytn 자체 코인을 말합니다. 그 외에도 대체 가능한 토큰으로도 후원 가능합니다. 여기서 대체 가능한 토큰이란 KIP-7 표준을 구현한 스마트 컨트랙트를 말합니다. 데모 앱에서는 MAR이라는 가상의 토큰으로 후원합니다.

앞서 말씀드린 스마트 컨트랙트는 Solidity라는 언어를 통해서 구현 가능합니다. 자세한 내용은 아래 문서를 참조하세요. If kakao 2020 블록체인 세션에도 자세한 내용을 설명하니 많은 관심 바랍니다.

https://ko.docs.klaytn.com/smart-contract
관련 세션 : “Solidity로 시작하는 스마트 컨트랙트 개발: 블록체인 개발자가 되어 몸값을 올려보자”

아래의 App2App API에서 자세히 설명하겠지만, KLAY와 카드를 교환하는 작업은 일반적인 자산 전송으로 처리할 수 없는 작업이라서 별도의 스마트 컨트랙트가 필요합니다. 따라서 데모 앱의 경우에도 미술품 마켓을 위한 등록, 조회 등의 기능들이 포함된 스마트 컨트랙트를 직접 구현한 후 Klaytn에 배포해야 합니다. 만약 사용자가 데모 앱을 통해 카드를 구매한다면, Klip을 통해 스마트 컨트랙트를 실행하는 방식으로 동작합니다.

마켓에 등록된 카드 목록을 얻어오기 위해서는 스마트 컨트랙트에 저장된 내용을 조회할 필요가 있습니다. 스마트 컨트랙트에 지정한 함수를 호출하여 해당 내용을 불러올 수 있는데요, 이 부분은 caver-js와 같은 Klaytn SDK나 Klaytn API Service (이하 KAS)를 통해서 구현할 수 있습니다. 자세한 내용은 아래 문서를 참조하세요.

참고로 Frontend는 React를 이용하여 구현했으며, JavaScript 번들을 제공하는 웹서버 이외에 Backend 구현은 필요 없습니다. Frontend 구현은 아래 if kakao 2020 세션에서 보실 수 있습니다.

관련 세션 : “두통 없는 비동기 I/O 처리를 위한 Redux-Saga 활용기”

App2App API 및 구현

App2App API는 BApp 개발자가 별도 가입 절차 없이 Klip 사용자를 인증하고 해당 사용자의 토큰 및 카드를 전송하기 위한 API입니다. 또한 직접 개발한 스마트 컨트랙트 실행을 Klip 사용자에게 요청할 수 있습니다. 기본적으로 카카오톡이 설치된 모바일 환경에서 BApp이 Deep Link를 통해 Klip에 서명을 요청하는 방식으로 동작합니다. App2App API는 아래와 같은 상황에서 활용할 수 있습니다.

BApp 사용자의 Klip 지갑 주소 인증
Klip을 통한 KLAY, 토큰 전송
Klip을 통한 카드 보유 목록 조회 및 전송
Klip을 통한 스마트 컨트랙트 실행

아래 그림은 App2App API에 대한 기본적인 동작 방식을 나타냅니다.

Klip App2App 기본 동작 및 요청 방식

App2App API를 사용하는 과정은 Prepare, Request, Result 세 가지 스텝으로 구분됩니다. Prepare 스텝은 App2App 요청을 위한 Request Key를 발급받는 과정입니다. Request 스텝은 인증 또는 서명을 Deep Link를 통해 요청하기 위한 과정이고, 마지막으로 result 스텝은 App2App 요청에 대한 결과를 얻기 위한 과정입니다. Request Key는 Deep Link 호출 및 결과 확인 과정에서 필요합니다.

데모 앱의 첫 번째 작업은 Klip 사용자의 지갑 주소를 얻어오는 것입니다. Prepare 스텝에서 요청 타입을 `auth`로 세팅하여 사용자의 지갑 주소를 얻어올 수 있습니다. 이렇게 얻어온 사용자 지갑 주소를 통해서 현재 보유 중인 카드를 얻어오거나 보유 중인 KLAY 잔고 등을 얻어올 수 있습니다. 보유 중인 카드 목록은 App2App API를 통해서 얻을 수 있고, KLAY 잔고는 앞서 말씀드린 caver-js SDK 또는 KAS를 통해 얻을 수 있습니다. 일반적으로 Klip 지갑에는 다양한 카드가 존재할 수 있습니다. 이 중에서 특정 스마트 컨트랙트에서 발행된 카드를 구분할 수 있습니다. 데모 앱에서는 미술품에 해당하는 카드를 별도 탭으로 표시합니다.

미술품 마켓 탭에는 다른 BApp 사용자들이 판매를 위해서 올려둔 카드 목록을 제공합니다. 그리고 특정 카드를 클릭하면 구매 가격과 함께 구매 여부를 묻는 팝업 창이 뜨게 됩니다. Klip으로 진행 버튼을 누르면 Prepare 스텝의 요청 타입을 `execute_contract`으로 세팅하여 거래를 위한 스마트 컨트랙트 실행을 Klip을 통해 진행할 수 있습니다. 해당 스마트 컨트랙트를 Klip을 통해서 실행하면 Klip 사용자의 지갑에서 지정된 KLAY를 스마트 컨트랙트에 전송하고, 구매를 요청한 카드는 해당 사용자의 지갑 주소로 전송됩니다.

Klip으로 구매 진행 > Klip에서 App2App 요청 확인

마지막 아티스트 목록에서는 여러 미술가들의 목록이 나오고 KLAY 또는 MAR 토큰으로 좋아하는 미술가를 후원할 수 있습니다. 예를 들어 후원하기 버튼을 누르면 `send_klay` 타입의 App2App API를 호출하고, Klip을 통해서 미술가의 지갑 주소로 지정된 KLAY에 전송됩니다.

여기서는 App2App API에 대한 구체적인 사용법에 대해서는 설명하지 않았습니다. 자세한 사용 방법은 아래 튜토리얼을 통해서 확인하실 수 있습니다.

http://docs.klipwallet.com/tutorial/tutorial-a2a-rest-api

마치며

이 글에서는 BApp을 개발하기 위해 필요한 여러 기반 기술과 Klip App2App API를 개념 위주로 가볍게 소개하였습니다. 더 재밌는 내용은 if(kakao)2020 세션 및 참고 링크를 통해서 보실 수 있습니다.

Ground X에서는 지갑 및 관련 API를 함께 개발할 Frontend, Backend 개발자를 상시 채용하고 있습니다. 새로운 기술을 함께하실 많은 분들의 지원을 기다리고 있습니다. 자세한 내용은 아래 링크를 참고하세요.

https://www.groundx.xyz/careers

<관련 세션 및 참고 링크>

이 글에서 설명한 내용은 11월18일~20일, 아래 if(kakao)2020 세션에서 자세히 보실 수 있습니다.

위 문서의 내용 및 이미지는 아래 문서를 참고하여 작성되었습니다.

Klip API 공식 문서 : https://docs.klipwallet.com
Klaytn 공식 문서 : https://docs.klaytn.com
KAS 공식 문서 : https://docs.klaytnapi.com

if(kakao)2020 코멘터리 03 : Klip App2App API를 활용한 데모 앱 개발기