[블록체인 연구소] <2023 APTOS 서울 해커톤> 참가기 PART. 03
대망의 마지막 FRONTEND
까마득했다.
어쨌든 해커톤이고 디테일한 기능구현보다 사실상 보여지는 것이 더 중요하다는게 너무 자명했기에.
앞서 밑밥을 깔았듯 나는 화면 개발은 안 한지 너무 오래 됐기도 하고 거의 불가능하다고 봐야할 정도였지만 그렇다고 화면개발자를 구할 수도 없는 노릇이었다.
“이럴 때 일수록 정신 똑바로 차려야 돼!”
스스로 세뇌하며 울며 겨자 먹기로 대강의 화면안을 머릿속으로 구상한 후 그와 가장 비슷한 템플릿을 찾는 것으로 시작했다.
다행이 딱 적합한 코드베이스가 있었고 이 대략적인 레이아웃을 수정 하는 방식으로 진행했다.
소스는 typescript 기반의 react; react-app/jest로 동작하는 nextjs 프레임 워크이고 베이스는 사내 다 프로젝트에서 사용된 것을 차용했다.
Layouts은 기존의 틀을 거의 그대로 유지했고, 우리가 배치할 dapps들과 안에 들어갈 text들만 치환해주었다.
일부 event handler나 버튼들도 추가하고 mission start와 verify등의 필요 기능에 맞게 커스터마이징 해주었다.
Next js의 디렉토리는 기본구조인 아래와 같은 형식인데, 정적파일들이 있는 asset, 비즈니스 로직을 담은 src, 공통 컴포넌트가 있는 common, 레이아웃 모임 layout, URL 베이스로 동작하는 pages, CSS관련 styles 등으로 구성되어 있다.
Next.js의 동작방식
기본적으로 서버사이드 렌더링(SSR)을 지원한다. 첫 진입시에는 pre- rendering 하고 (대략 app.tsx 혹은 기존의 index.js가 그 역할을 한다.) 서버에서 모든 html요소들을 작성한 후 browser로 리턴된다.
여기까지는 아직 정적인 페이지 상태이고 이후 Hydration과정 이후 해당 웹앱이 interactive한 동작을 수행하게 된다.
외부 데이터가 필요한 경우 아래와 같이 react-query와 API를 통한 Data Fetching을 해오고, 필요에 따라 InitProps, PageProps등을 전역적 or Scope단위로 페이지마다 적용하여 Props로 내려주었다.
import type { InfiniteData } from '@tanstack/react-query';
import type { IResponseData, ErrorType } from 'api/types';런타임 환경에 필요한 환경변수들도 모두 config / environment 파일에 적용해주었다.
중요한 부분인 지갑 연동이 남아있었는데, APTOS에서는 대표적으로 martion wallet, petra wallet을 지원한다.
다행히 APTOS Labs에서 npm을 제공하는 wallet-adapter가 있어서 이를 체크 아웃하여 petra 연동을 해주었다.
@aptos-labs/wallet-adapter-react 및
import { PetraWallet } from "petra-plugin-wallet-adapter";
import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";등등을 import 해주고 실제 지갑 connect, network 선택, 연결해제, sign Txn 등은 해당 라이브러리의 useWallet을 통해 동작한다.
import { WalletName } from '@aptos-labs/wallet-adapter-core';
import { useWallet, WalletReadyState } from "@aptos-labs/wallet-adapter-react";
import { AptosClient, Types } from "aptos";
export default function Login() {
const {
connected,
disconnect,
account,
network,
wallet,
signAndSubmitTransaction,
signTransaction,
signMessage,
signMessageAndVerify,
wallets, connect
} = useWallet();Login(User Petra 연동)
그럼에도 부족한 것들은 마지막 찬스, 디자인으로 승부보기로 했고 화면의 꽃, 대문인 메인 페이지와 로고를 디자이너 연주님께 부탁했다.
“어··· 음···, 이름은 프로토스이고
그냥 앱들 모아서 홍보해주는 플랫폼입니다···.”
옹알이 수준의 미흡한 정보전달과 함께 알잘딱깔센(?)을 시전했는데 거의 작품 수준의 작업물을 하사해주셨다.
괜히 전문가가 아니다.
광활한 우주를 연상하게 하는 화려한 애니메이션과 함께 고오-급져 보이는 행성들을 상징하는 요소들까지, 딱 우리 프로젝트인 모험, 시작이라는 컨셉과 찰떡이었다.
다시 한번 디자이너 연주님께 압도적 감사를!
메인화면
화면단에 필요한 이미지들과 안에 들어갈 text들도 적절한 phrase로 정리해주고 적용시킴으로서 화면도 얼추 1차 개발은 완료해 나갈 수 있었다.
시간이 남으면 추가로 구현해보고자 했던 play ground 엔터테인먼트 기능이나 팬케익 스왑과 같은 외부 UI를 우리 페이지 안으로 끌어오는 것도 해보고 싶었으나 시간관계상 이는 과감히 포기.
다만 향후 전개하고자 하는 방향을 설명하기 위해서 간단한 mockup 페이지 정도만 추가해주는 것으로 정리했다.
최종 submission과 presentation
열심히 개발 다 했으니 이제 우리의 결과물을 잘 포장해서 심사위원과 venue에 계신 모든 참여자, 관계자에게 발표만 하면 됐다.
발표자료는 강민님, 현빈님, 승용님이 화면에 허덕이던 나를 대신해서 잘 만들어주셨고 demo video까지 굉장히 깜찍하게 잘 찍어 주셨다.
마지막 발표
마지막 데모 데이에는 수면 시간도 부족하게 달려왔던지라 발표를 준비할 시간 따윈 없었고, 그냥 그동안 했던 거 회고하듯 피칭했다.
이때도 참 설상가상이었던게 발표 15분전에 데모동영상을 찍는데 갑자기 devnet이 다운되어 어플리케이션의 모든 기능이 먹통이었고 부랴부랴 mainnet으로 fullnode를 변경해주어 빠르게 정상화 시켰다.
나는 패닉 직전이었는데 현빈님이 옆에서 침착하게 대응해주어서 가능했다.
이번에 우리 팀원들을 통해서도 참 많은 것들을 배울 수 있었다.
이거 말고도 내 노트북과 단상 디스플레이 연결이 안돼서 몇 분을 더 까먹는 현장사고가 있었지만 앱토스 측에서 빠르게 대응해주어 발표도 무사히 잘 마칠 수 있었다.
3일간의 해커톤은 그렇게 끝이 났다.
지나고 보니 이 당시에 겪은 에피소드들은 고스란히 추억으로 새겨졌고, 고생을 통해 형성된 우리 팀의 끈끈함도 남아서 참 의미있는 경험이었지 싶다.
(추가적으로 시급 $1200짜리 러브콜을 견제해야한다는 임무도 같이 남았지만…)
수상작의 선정은 심사숙고를 통해 나중에 발표해준다는 공지가 있었고 아직 별다른 소식은 없다.
우리의 PROTOS가 입상하면 정말 좋겠지만 경험만으로도 이미 가치있기에 개인적으론 충분히 만족하고있다.
모두가 입을 모아 하는 말인데 이후에 또 이런 기회가 있다면 그땐 좀 더 잘 준비해서 또다시 도전해보고 싶다고 한다.
너무 고생했습니다 team!
