가상자산 백서 학습 서비스 'widigg'

Overview

구름 & 핀테크지원센터 · 2026.03~07 · 콘텐츠 구조화 · 학습 UX · Web3

widigg 은 Whitepaper Digging 의 줄임말로, 서비스 도메인(widigg.com)이기도 하다.

입문자용 가상자산 백서 학습 웹 서비스를 기획·구현하고, 이후 학습 인증을 온체인 NFT로 발급하는 Web3 기능까지 확장했다.

• 원문 → 번역 → 해설 → 핵심 용어 3-Level 아코디언 트리 설계
• 백서를 문장 단위로 구조화 + CoinGecko 실시간 시세 연동
• AI 학습 기능(Gemini) — 백서 근거 인용 Q&A(스트리밍)·자동 퀴즈·백서→구조화 JSON 생성 파이프라인
• 학습 수료 NFT 배지 — 퀴즈 만점 시 ERC-721 배지를 Base 메인넷에 실제 민팅. 서버가 EIP-712 바우처로 통과를 검증해야만 발급, 메타데이터 완전 온체인, SNS 공유용 OG 카드
• 가격 알림(웹푸시) · 학습 화면 이미지·PDF 저장까지 프론트엔드 직접 구현
• Skill: 정보 구조화·콘텐츠 설계, 학습 UX 설계, 프론트엔드 구현, LLM(Gemini) 연동, 스마트 컨트랙트 개발, 온체인·오프체인 아키텍처
• Stack: Next.js 16, TypeScript, Tailwind CSS, Google Gemini API, Solidity·OpenZeppelin·Hardhat, ethers.js·Base(L2), Firebase, Web Push·GitHub Actions

Problem

가상자산 백서는 전문 용어와 긴 문장으로 가득해 입문자의 진입 장벽이 높다. 원문을 그대로 읽기 어렵고 번역만으로는 맥락·핵심 용어를 이해하기 힘들다.

Solution

1. 3-Level 아코디언 트리 — 원문 → 번역 → 해설 → 핵심 용어를 단계적으로 펼침
2. 문장 단위 구조화 — 백서를 문장 단위로 분해해 한 문장씩 쉽게 학습
3. AI 학습 보조(Gemini) — 백서 내용에만 근거해 답하는 인용형 Q&A(스트리밍)와 4지선다 퀴즈 자동 생성. 문장 단위 구조(id)를 LLM 근거 앵커로 재활용해 답변·정답의 근거 문장으로 바로 이동
4. 학습→온체인 인증 연결 — 다른 프로젝트(project-EF)의 지갑·Firebase 모듈을 이식해, 퀴즈 만점 시 ERC-721 배지를 민팅. 핵심은 부정 발급 방지 설계: 정답을 클라이언트에 노출하지 않고 서버가 채점→EIP-712 바우처 서명을 발급하며, 컨트랙트는 이 서명이 있어야만 민팅한다. 배지 이미지(SVG)·메타데이터는 완전 온체인 저장
5. 가격 알림 — 목표가 도달 시 브라우저 웹푸시(무료 스케줄러로 15분 주기 체크)

Result

• 복잡한 백서를 문장 단위로 쉽게 학습할 수 있는 구조 완성 + 한/영 다국어 AI 생성
• LLM(Gemini) 을 더해 정적 학습 콘텐츠를 질문·퀴즈로 상호작용하는 경험으로 확장
• 학습 완료를 위·변조 불가능한 온체인 NFT 인증으로 발급 — 컨트랙트를 Base 메인넷에 배포·소스 검증(Basescan·Sourcify), 실민팅 E2E 검증까지 완료
• Web2(학습·AI) + Web3(온체인 인증)를 한 서비스로 잇고, 무료 티어 제약(가스비 정책·크론 한도)까지 실운영 관점으로 해결
• 기획부터 프론트엔드·스마트 컨트랙트 직접 구현, Vercel 배포·운영까지 완주

Retrospective

콘텐츠를 학습 경험으로 설계 — 어려운 도메인 콘텐츠를 정보 구조화와 학습 UX로 풀어, 읽는 글을 학습 과정으로 바꿨다.

Web2에서 Web3까지 확장 — 학습 서비스에 스마트 컨트랙트·온체인 민팅을 더하며, 서명 기반 서버 검증으로 신뢰할 수 있는 발급 구조를 직접 설계·구현했다.

기획과 구현의 경계를 넘다 — Next.js·Solidity로 직접 구현하며 기획 의도를 손실 없이 화면과 온체인으로 옮겼다.

Links

• 서비스 살펴보기 ↗