README
개요
README는 "놀면서 만드는 NFT"라는 콘셉트의 블록체인 기반 게이미피케이션 플랫폼입니다. 실시간 그림 퀴즈 게임에서 그린 그림을 NFT로 민팅하고, 내장 마켓플레이스에서 거래할 수 있습니다.
React 프론트엔드, Spring Boot 백엔드, Node.js 소켓 서버, Solidity 스마트 컨트랙트로 구성된 멀티 서비스 아키텍처이며, SSAFY 7기 특화 프로젝트로 6인 팀에서 7주간 개발했습니다.
주요 기능
실시간 그림 퀴즈 게임
- Socket.io 기반 멀티플레이어 게임룸 생성·참여
- 출제자가 그림을 그리면 참여자가 채팅으로 정답 맞추기
- Canvas 실시간 동기화, 채팅 메시지에서 정답 자동 판별
- 첫 정답자 인식 및 보상 시스템
NFT 민팅
- 게임에서 그린 그림을 ERC721 NFT로 변환
- IPFS에 NFT 메타데이터 저장
- Hashlips Art Engine 기반 배치 민팅 지원
- MetaMask 지갑 연동으로 블록체인 트랜잭션 처리
NFT 마켓플레이스
- NFT 구매·판매·가격 설정
- 이벤트 옥션 (시간 제한 판매)
- 좋아요(찜) 기능
- 소유 NFT 인벤토리 관리 (마이페이지)
Web3 인증 및 튜토리얼
- MetaMask 지갑 기반 로그인·인증
- Ethereum 네트워크 설정 가이드
- 블록체인 개념 교육 튜토리얼
기술 스택
| 분류 | 기술 |
|---|---|
| Frontend | React 18, TypeScript, Redux Toolkit, Socket.io Client, Web3.js |
| Backend | Java 8, Spring Boot 2.5, JPA, MySQL, Swagger |
| WebSocket | Node.js 16, Express, Socket.io, PM2 |
| Smart Contract | Solidity 0.8, Truffle, OpenZeppelin 4.7 |
| 저장소 | IPFS (NFT 메타데이터), MySQL (앱 데이터) |
| 인프라 | AWS EC2, Docker, Jenkins CI/CD, Nginx, Let's Encrypt SSL |
아키텍처
스마트 컨트랙트
| 컨트랙트 | 역할 |
|---|---|
| MintReadmeToken | ERC721 NFT 생성 및 소유권 관리 |
| SaleReadmeToken | 마켓플레이스 거래 로직 |
| GetReadmeToken | NFT 데이터 조회 인터페이스 |
| DrawToken | 이벤트 보상 토큰 배포 |
| SsafyToken | ERC20 테스트 토큰 |
담당 역할
프론트엔드 파트 리더를 맡았습니다.
- Socket.io 게임 클라이언트: 실시간 그림 퀴즈 게임 기능 구현, 캔버스 동기화 및 채팅 정답 판별
- Redux 상태 관리: Feature 기반 슬라이스 설계 (auth, game, mint, nft), redux-persist 세션 관리
- 게임 UI 구현: 게임룸 생성·참여, 실시간 드로잉 캔버스, 스코어보드
- 프론트엔드 아키텍처: 페이지·컴포넌트 구조 설계, API 레이어 구성
회고
블록체인과 실시간 통신을 한 프로젝트에서 같이 다뤘습니다. 손이 가장 많이 간 쪽은 Socket.io로 여러 명의 캔버스를 동기화하고 채팅에서 정답을 걸러내는 부분이었습니다. 서버를 거치지 않고 프론트에서 Web3.js로 스마트 컨트랙트를 직접 호출해 본 것도 이때가 처음이었습니다.
프론트엔드 파트 리더로 Redux 상태 설계와 Feature 단위 디렉토리 구조를 정했습니다. 3인이 나눠 작업하는 만큼 기준은 충돌을 줄이는 쪽에 뒀습니다.