Collaborative Pixel Canvas on Sui Blockchain
8x8 픽셀 캔버스에서 협업하여 픽셀 아트를 만들고, 완성된 작품을 NFT로 경매하는 분산형 애플리케이션입니다.
Pixel Art DApp은 Sui 블록체인 기반의 협업형 픽셀 아트 플랫폼입니다. 사용자들이 8x8 캔버스에 함께 픽셀을 칠하여 작품을 완성하고, 완성된 작품은 자동으로 NFT가 되어 경매에 올려집니다.
- 🎨 협업 픽셀 페인팅: 8x8 캔버스에서 다른 사용자들과 협업하여 픽셀 아트 제작
- ⏱️ 쿨다운 시스템: 과도한 페인팅을 방지하기 위한 10초 쿨다운 메커니즘
- 🏆 NFT 자동 생성: 64개 픽셀이 모두 칠해지면 자동으로 NFT 생성 및 SVG 이미지 생성
- 💰 자동 경매: 완성된 NFT는 24시간 경매로 자동 등록
- 📊 리워드 분배: 경매 수익을 픽셀 기여도에 따라 참여자들에게 자동 분배
- 📈 리더보드: 기여도별 사용자 랭킹 시스템
pixel_canvas/
├── pixel_art_dapp/ # Move 스마트 컨트랙트
│ ├── sources/
│ │ ├── canvas.move # 캔버스 핵심 로직
│ │ ├── factory.move # 캔버스 생성 팩토리
│ │ ├── auction.move # 경매 시스템
│ │ ├── nft.move # NFT 생성 및 관리
│ │ ├── economics.move # 리워드 분배 로직
│ │ ├── display.move # NFT 디스플레이 메타데이터
│ │ ├── utils.move # 유틸리티 함수
│ │ └── events.move # 이벤트 정의
│ └── tests/ # 테스트 파일
└── pixel_art_frontend/ # React 프론트엔드
├── src/
│ ├── components/ # UI 컴포넌트
│ ├── pages/ # 페이지 컴포넌트
│ ├── hooks/ # React 훅
│ ├── utils/ # 유틸리티 함수
│ └── types/ # TypeScript 타입 정의
└── package.json
- Node.js (v16 이상)
- Sui CLI (설치 가이드)
- Sui Wallet 브라우저 확장 프로그램
git clone <your-repo-url>
cd pixel_canvascd pixel_art_dapp
# Sui 클라이언트 설정 (testnet 환경)
sui client switch --env testnet
# 활성 주소 확인
sui client active-address
# 테스트넷에서 SUI 토큰 받기
sui client faucet
# 컨트랙트 빌드
sui move build
# 컨트랙트 배포
sui client publish --gas-budget 100000000배포 완료 후 다음 정보를 기록해두세요:
- Package ID: 배포된 패키지의 ID
- Factory ID: 생성된 Factory 객체의 ID
cd ../pixel_art_frontend
# 의존성 설치
npm install
# 환경 변수 설정
cp .env.example .env.local.env.local 파일에 배포된 컨트랙트 정보 입력:
VITE_PACKAGE_ID=your_deployed_package_id
VITE_FACTORY_ID=your_deployed_factory_id
npm run dev브라우저에서 http://localhost:5173으로 접속합니다.
- Sui Wallet 확장 프로그램을 설치하고 계정을 생성
- 테스트넷으로 네트워크 변경
- DApp에서 "Connect" 버튼을 눌러 지갑 연결
- "Create" 페이지에서 새로운 8x8 캔버스 생성
- 제목과 설명 입력 (0.1 SUI 수수료)
- "Browse" 페이지에서 진행 중인 캔버스 선택
- 원하는 색상을 선택하고 캔버스의 빈 픽셀을 클릭
- 10초 쿨다운 후 다음 픽셀 페인팅 가능
- 완성된 캔버스는 자동으로 24시간 경매 시작
- "Auction" 페이지에서 진행 중인 경매 확인 및 입찰
- 경매 종료 후 픽셀 기여도에 따라 자동으로 리워드 분배
- 지갑에서 받은 SUI 토큰 확인 가능
- 캔버스 생성: 0.1 SUI
- 픽셀 페인팅: 무료 (쿨다운 10초)
- 경매 입찰: 입찰 금액만큼
- 캔버스 제안자: 20%
- 픽셀 기여자들: 70% (기여도 비례)
- 플랫폼: 10%
- 크기: 8x8 픽셀 (64 픽셀)
- 형식: 온체인 SVG
- 메타데이터: 완성 시간, 기여자 정보, 픽셀 해시 포함
cd pixel_art_dapp
sui move testcd pixel_art_frontend
npm run lint # 코드 스타일 검사
npm run build # 빌드 테스트// 픽셀 칠하기
public fun paint_pixel(canvas: &mut Canvas, x: u8, y: u8, color: u32, clock: &Clock)
// 경매에 입찰
public fun place_bid(canvas: &mut Canvas, bid: Coin<SUI>, clock: &Clock)
// 경매 정산
public fun settle_auction(canvas: &mut Canvas, clock: &Clock)
// 리워드 분배
public fun distribute_revenue(canvas: &mut Canvas)// 새 캔버스 생성
public fun create_canvas(
factory: &mut Factory,
title: vector<u8>,
description: vector<u8>,
payment: Coin<SUI>,
clock: &Clock
)새로운 기능 추가 시:
sources/디렉토리에 Move 파일 작성tests/디렉토리에 테스트 추가sui move build로 컴파일 확인sui move test로 테스트 실행
기술 스택:
- React 18 + TypeScript
- Sui dApp Kit (지갑 연결 및 트랜잭션)
- React Router (라우팅)
- Tailwind CSS (스타일링)
- Vite (빌드 도구)
개발 가이드라인:
- 컴포넌트는
src/components/에 저장 - 페이지는
src/pages/에 저장 - Sui 관련 유틸리티는
src/utils/sui.ts활용 - 타입 정의는
src/types/index.ts에 추가
- Sui 클라이언트를 메인넷으로 변경:
sui client switch --env mainnet-
충분한 SUI 토큰 확보 후 컨트랙트 배포
-
프론트엔드 환경 변수를 메인넷용으로 업데이트
cd pixel_art_frontend
npm run build
# dist/ 폴더를 웹 서버에 배포- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
이 프로젝트는 MIT 라이센스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.
문제가 발생하거나 질문이 있으시면:
- GitHub Issues를 통해 버그 리포트 또는 기능 요청
- Sui Developer Discord 커뮤니티 참여
Happy Pixel Painting! 🎨✨