NFT 마켓플레이스 판매 및 구매 기능 만드는 방법 : 3탄

지난 포스팅에서는 NFT 지갑을 연결하고, 민팅하는 법을 보았다. 이번 포스팅에서는 NFT를 판매하고 사는 방법을 알아보려 한다. 버블(bubble.io)이 노코드 툴이긴 하지만 백엔드 기능이 워낙 폭발적이어서 빡코딩이 필요한 부분이 있다. 정말 초반에 답답한 부분만 넘어간다면 게임과 같은 서비스를 제외하곤 거의 모든 서비스를 만들고 테스트해볼 수 있다. 그러니 힘내서 배워봤으면 좋겠다.

 

1. 판매 기능 구현

판매 페이지에서는 일반적으로 아래와 같은 내용들이 포함된다.

Content (image, audio plus image cover, video, 3d model view)
Name
Description
Status (On Sale, Not for Sale)
Price
Bids (optional)
History (optional)
Links to item on other exchanges (optional)

 

페이지 타이틀 설정

본격적인 판매 기능 구현에 앞서 필요한 것은 지난 포스팅에서도 사용한 Rarible SDK 플러그인을 설치해야 한다. 그후 원하는 위치에 "판매 버튼"을 만들고 워크플로우로 이동하면 된다.

참고로 NFT가 이미 판매중인지 여부를 식별할 수 있어야 하는데 이번 예시에서는 "Not for Sale"과 "On Sale"로 진행할 예정이다. 일반적으로 사용되는 패턴이니 참고하면 좋을 것 같다. 그리고 반복적인 판매 요청이 일어나지 않도록 When으로 조건을 설정해 주면 된다.

 

판매버튼 세팅 이미지

 

현재 개발하고 있는 페이지는 MVP를 목적으로 하기 때문에 팝업 역시 간단하게 제작되었다. 기본적으로 판매 가격 설정을 비롯해서 Rarible SDK를 호출하는 버튼 그리고 취소하는 버튼이 포함되면 된다. 추가적으로 유저의 잔고와 수수료 등을 포함하면 더욱 사용자 친화적이 될 수 있다.

 

팝업 세팅 이미지

 

마지막으로 세팅해줘야 하는 건 Rarible SDK 기능을 활용해서 Create Order에 Confirm 버튼을 연결해 주는 것이다. 이렇게 하면 기본적인 판매 워크플로우는 완성이 된다.

 

컨펌 버튼 연결

판매 기능이 완성되었다면 다음으로는 메타마스크를 호출해 암호화폐 결제를 실행시키는 것이다. NFT 거래에 익숙한 사람이라면 괜찮겠지만, 처음 접해보는 노코더라면 조금은 생소하게 느껴질 수 있다. 특히 메타 마스크 연결에 있어서는 한 번에 되지 않을 수 있으니, 다양한 시도를 해보는 것이 필요하다.

 

메타마스크 결제 화면

SDK에서는 아래와 같이 3가지 응답을 받을 수 있다.

1. Sell Order was Rejected by User
2. Error while placing Sell Order
3. Sell Order Placed

지난 포스팅에서 살펴봤던 민팅 기능과 비슷하게 처음 두 응답 중 하나가 수신되면 팝업에서 취소가 되고, 입력 필드에서는 데이터를 삭제하면 된다.

아래 이미지 예시는 "유저가 거부한 응답"과 주문 판매 중 일어난 오류" 응답과 굉장히 비슷하다.

응답 유형 이미지

이 과정을 통해서 '판매' 응답을 받았다면 성공한 것이다. 이제 진짜 NFT 마켓플레이스의 모습을 갖췄다고 볼 수 있다. 이제는 NFT의 상태를 '판매중'으로 업데이트하고, Sell Order 해시를 기록하면 된다. 그리고 마지막으로 알림 또는 토스트 메시지를 이용하여 '주문 완료' 팝업까지 띄워주면 완벽하다.

2. 구매 기능

판매 기능을 구현했으니 이제 구매 기능을 구현할 차례입니다. 아래 이미지는 구매가 가능한 디테일 페이지이며, NFT가 판매되는 가격과 구매 버튼 그리고 NFT 정보를 확인해 볼 수 있습니다. 

 

구매 페이지 예시

구매 같은 경우 실수 구매하는 상황이 발생할 수 있기 때문에 이를 예방하기 위해 팝업과 같은 기능으로 한 번 더 확인을 받는 게 좋다.

 

최종 확인 페이지

SDK를 활용하면 구매 워크플로우는 비교적 간단하다. 이전 단계에서 저장한 구매 데이터만 불러오면 끝난다. 주문과 관련된 주요 정보는 가격, 판매자, 시간 등이니 참고하면 좋을 것 같다.

 

구매 워크플로우

지금까지 작업 모든 기능이 정상적으로 작동했다면 메타마스크 요청이 다시 한번 나타나게 된다. 가격, 대상 체인 및 수수료 등 모든 구매자가 주의해야 하는 변수들이다.  블록체인 특성상 거래가 진행된 이후에는 환불과 같은 절차가 곤란하거나 불가능할 수 있기 때문에 주의가 필요하다.

 

메타마스크 최종 확인 이미지

이 단계까지 성공하면 아래와 같이 두 가지 응답이 있을 수 있다.

1. Buying Item Rejected By User
2. Item Bought Successfully

첫 번째 응답을 바았을 경우에는 워크플로우 이전 단계에 문제가 있을 확률이 높다. 때문에 주문 판매 해시가 제대로 저장이 되었는지 그리고 제대로 작동하고 있는지 확인해 볼 필요가 있다. 만약 두 번째 응답을 받았다면 여러분은 개발 천재거나 재능이 있는 사람임이 분명하다. 모든 단계를 성공적으로 마쳤기 때문이다.

 

NFT 구매 성공 이미지

 

해당 포스팅은 버블에서 영문으로 제작된 콘텐츠를 번역해서 포스팅했습니다. 더 자세한 내용이 궁금하거나 더 많은 케이스를 확인해 보고 싶다면 버블(bubble.io)에서 제공하 How to build an NFT marketplace with no-code 콘텐츠를 참고하면 좋을 것 같다.