← 이력서로 돌아가기
PlayDapp Tournaments
토너먼트 개발팀 · 2022.08 ~ 2024.06
Next.jsTypeScriptRedux ToolkitTanStack QueryEmotionweb3-reactwagmi
게임 플레이 결과에 따라 보상을 제공하는 블록체인 기반 플랫폼으로, 초기 TF팀으로 합류해 약 1.5개월 만에 소프트 런칭을 완료하고 이후 서비스 안정화를 주도했습니다.
주요 과제 및 문제 인식
- 짧은 런칭 기한 내 소프트 런칭 필요 — 초기 TF팀으로서 제한된 일정(약 1.5개월) 안에 블록체인 게임 플랫폼의 소프트 런칭을 완료해야 하는 시간적 제약이 있었습니다.
주요 역할 및 성과
프로젝트 리딩 및 아키텍처
프론트엔드 파트 리딩(4인)
프로젝트 전반의 기술 스택 선정 및 컨벤션 수립을 주도하고, 프론트 개발 환경·프로젝트 구조를 설정해 팀 협업 효율을 높임
서비스 전반 UI 개발
서비스 내 다수 페이지를 직접 개발해 전체 페이지의 약 60%를 담당했습니다.
담당 페이지
- 메인 페이지 · 마이 프로필
- 게임 페이지(동적 라우팅) · 무료 플레이(freezone)
- PvP 리플레이 페이지(동적 라우팅)
- FAQ 페이지
- 메일 인증 플로우: 결과 체크(resultCode 분기)·전송 완료·인증 완료·오류 페이지
- 404 페이지
Web3 게임 브릿지 구축
iframe으로 게임 클라이언트를 연동하고 postMessage로 게임 플레이·결과 노출 이벤트를 통신하는 체계 구축
Web3 인프라 및 온체인 기능
WalletConnect V2 마이그레이션
문제
- WalletConnect V1 서비스 종료로 V2로의 마이그레이션이 필요
검토
- web3-react로 진행하려면 V8로 올려야 하는데, V6와 구조·사용법이 완전히 달라 부작용이 크고 일부 지갑은 V8을 지원하지 않음
해결
- 공식 문서가 권장하는 wagmi를 도입해 마이그레이션, 지갑 연동 안정성 확보
가상화폐 보상 출금
react-hook-form으로 입력값 유효성을 검증하고 contract ABI 함수를 호출해 보상으로 얻은 가상화폐 출금을 처리
Ticket NFT Convert · 재화 Migration
Ticket을 NFT로 전환하는 Convert 기능과 유저 재화 Migration 기능을 구현해 온체인 자산 플로우를 처리
성능 최적화
분석
- bundle-analyzer로 번들 크기를 분석해 대체 가능하거나 불필요한 패키지를 제거
최적화
- 모달 등 상호작용 시 노출되거나 우선순위가 낮은 컴포넌트에 code splitting 적용
결과
- First Load JS를 470kb에서 162kb로 65% 절감해 초기 로딩 속도 개선