shud | Vibe Coder

Triangle Dice 게임을 Base Mini App으로 변환했다! Coinbase의 Base App에서 실행되는 미니앱을 만드는 과정은 생각보다 복잡했다.

오늘 한 것들

1. Base Mini App 변환

기존 Vite + React 앱에 OnchainKit과 Farcaster SDK를 추가해서 Base Mini App으로 변환했다. Mini App은 Base App(구 Coinbase Wallet) 안에서 실행되는 경량 앱이다.

$ npm install @coinbase/onchainkit

$ npm install @farcaster/miniapp-sdk

# wagmi 다운그레이드 필요 (호환성)

$ npm install wagmi@^2.16

OnchainKitMiniKitwagmi 2.x

2. Account Association 등록

Mini App을 등록하려면 base.dev에서 소유권을 인증해야 한다. 문제는... 한국에서 base.dev 접속이 안 된다! VPN으로 우회해서 해결.

한국에서 base.dev 차단됨

Coinbase 서비스가 한국에서 제한됨. 미국 VPN 사용하면 접속 가능!

등록 과정:

index.html에 메타태그 추가 (소유권 인증)
base.dev에서 Verify 클릭
지갑으로 서명
farcaster.json에 Account Association 추가

base.devVPNWallet Signature

3. farcaster.json 설정

Mini App의 메타데이터를 담는 manifest 파일. 앱 이름, 아이콘, 카테고리 등을 설정한다.

// .well-known/farcaster.json

{

"frame": {

"name": "Triangle Dice",

"primaryCategory": "games",

"tags": ["gaming", "betting", "dice"]

}

farcaster.jsonManifest

4. 이미지 에셋 생성

Mini App에 필요한 이미지들을 Python PIL로 직접 생성했다. 삼각형과 주사위 눈을 조합한 심플한 디자인.

• icon.png (200x200) - 앱 아이콘
• splash.png (400x400) - 로딩 화면
• preview.png (1200x630) - 소셜 공유용

PythonPillow

배운 것

•Base Mini App = Farcaster Mini App (호환됨)
•OnchainKit 1.x는 wagmi 2.x 필요 (3.x 호환 안 됨)
•sdk.actions.ready() 호출해야 앱 로딩 완료 신호
•한국에서 Coinbase 서비스 제한됨 (VPN 필요)
•Base App은 170개국 지원 (한국 포함)

오늘의 숫자

스마트 컨트랙트

SDK 패키지

170+

지원 국가

VPN 필요

현재 상태

✓ Vercel 배포 완료

✓ 스마트 컨트랙트 배포 (Base Sepolia)

✓ OnchainKit + MiniKit 통합

✓ Account Association 완료

✓ 메타데이터 설정 완료

⏳ Ready call 디버깅 중

⏳ Base App 검색 인덱싱 대기

느낀 점

Mini App 개발은 생각보다 삽질이 많았다. 문서도 여기저기 흩어져 있고, 한국에서 base.dev 접속이 안 되는 것도 몰랐다.

그래도 VPN으로 우회해서 Account Association까지 완료했다! 아직 Ready call 문제가 남아있지만, 거의 다 왔다.

Base App이 한국에서도 사용 가능하다는 게 다행이다. 메인넷 배포하면 실제 유저들이 플레이할 수 있을 것 같다.

링크

→ Triangle Dice Mini App (Vercel)→ GitHub Repository

다음에 할 것

☐ Ready call 문제 해결
☐ Base App에서 검색 가능하게
☐ 메인넷 배포 (실제 USDC)
☐ 게임 UI/UX 개선