Frontend Engineer · NDUS INTERACTIVE · Since 2023 · Seoul

프론트엔드를 중심으로 일하면서, 필요할 땐 CMS · 운영 도구 · DB 스키마까지 직접 만듭니다.

Toolbox

  • Next.js
  • TypeScript
  • React
  • Tailwind CSS

Work

Featured.

Featured · 01Live · 운영 중

AI 사용량 추적 SaaS

사내 SaaS · 운영 중

브라우저 확장 · CLI 콜렉터 · 어드민 콘솔을 단일 모노레포로 통합한 사내 SaaS

직원별 Claude · Codex 등 AI 도구의 사용량을 자동 수집하고 7일 사이클 기준 플랜 추천까지 제공하는 사내 SaaS입니다. 웹 포털 · Chrome MV3 확장 · 크로스플랫폼 Node CLI 콜렉터를 단일 모노레포로 묶었습니다.

  • apps/web · packages/extension · packages/cli-collector · packages/shared 4-패키지 npm 모노레포 설계
  • Chrome MV3 확장이 background SW에서 claude.ai 사용량 API를 폴링해 Supabase로 송신하는 파이프라인 구축
  • Codex · Claude Code의 로컬 캐시를 파싱하는 크로스플랫폼 Node CLI (Windows Startup · macOS LaunchAgent 자동 등록) 구현
  • 관리자 대시보드에서 Upgrade / Downgrade / Adequate / Insufficient 플랜 추천 시그널과 임계값을 실시간 조정 가능하도록 구현
  • Vercel Cron 기반 Slack DM 자동 알림(미동작 사용자 감지)과 DB 쿼터 모니터링 운영 중
  • 디바이스 등록 코드(30분 만료) · 90일 토큰 만료 · SHA-256 해시 저장으로 콜렉터 보안 모델 구현
  • Next.js 16
  • React 19
  • Supabase Postgres
  • Chrome MV3 Extension
  • Node CLI
  • Tailwind CSS
  • Zod
  • Vercel Cron
소스콜렉터APIDBBrowserclaude.ai 사용량 APILocal cacheCodex 캐시Local cacheClaude Code 캐시Chrome MV3background SW pollingNode CLI · cross-platformautostart on loginSHA-256 tokenNext.js 16 · apps/webtracker-service.ts (Route Handlers)users / devicesauth · 디바이스cli_usage_rollups차원 A · KST dailyquota_snapshots차원 B · 7-day cycleingestion_logs감사 로그Vercel CronSlack DM
Figure · ai-usage-tracker data flow
  1. 01

    Problem

    초기 설계에서는 모든 AI 사용량을 단일 테이블에 모아 집계하려고 했습니다. 그러나 Codex·Claude Code가 제공하는 '오늘의 토큰·세션' 같은 KST 일자 기준 누적치(차원 A)와, Claude 웹이 제공하는 '현재 7일 사이클의 사용률'(차원 B)이 의미적으로 결합 불가능한 차원이라는 사실을 운영 중에 발견했습니다. 두 값을 같은 행에 채워 넣으니 일별 그래프에서 '어제 사용률은 90% 였는데 일자 토큰 카운트는 0' 같은 모순이 반복됐고, 플랜 추천 로직도 사용자별로 들쑥날쑥한 결과를 냈습니다.

  2. 02

    Solution

    차원을 명시적으로 분리했습니다. cli_usage_rollups 테이블은 (user, KST date) 키로 토큰·세션·시간을 버킷팅하고, quota_utilization_snapshots는 (provider, product, surface, external_account_id, cycle_start) 키로 7일 사이클의 최대 사용률을 별도 보존하도록 마이그레이션했습니다. 두 테이블은 절대 JOIN하지 않으며, 화면도 '오늘 회사 전체 활동' 카드와 '내 현재 사이클 사용률' 카드로 완전히 분리해 의미 혼선을 차단했습니다.

  3. 03

    Result

    차원 분리 이후 일자 그래프와 사이클 게이지가 각각 일관된 의미를 보존하게 되었고, 플랜 추천(Upgrade / Downgrade / Adequate / Insufficient data)이 cycle_max_utilization 단일 지표로 결정되도록 단순화됐습니다. 이 과정을 정리한 30+ 데이터 정확성 함정·해결책 노트는 이후 신규 마이그레이션을 검토할 때마다 회귀 방지 체크리스트로 활용 중입니다.

Featured · 02Live · 운영 중

INDIECATER 사이트 & Admin CMS

신규 브랜드 · 사이트 + 운영 CMS

Hero · Brand · Services · Projects · Team · Contact를 운영팀이 코드 수정 없이 직접 편집하는 콘텐츠 모델

인디게임 큐레이션 레이블 INDIECATER의 브랜드 사이트와 운영자용 콘텐츠 관리 시스템을 처음부터 끝까지 구축했습니다.

  • Content Blocks 키-밸류 모델로 모든 카피·이미지를 운영팀이 직접 편집
  • Projects · Services · Team · Genre Tags · Project Statuses · Nav 등 10개 테이블 CRUD 어드민
  • Supabase RLS와 ndus.io 이메일 화이트리스트로 권한 분리, DB 트리거 기반 감사 로그
  • GSAP · Lenis 기반 스무스 스크롤 · 모션 인터랙션과 Resend 기반 Contact 폼
  • Next.js 16
  • Supabase
  • GSAP
  • Lenis
  • Radix UI
  • Resend
Featured · 03Live · 운영 중

XOCIETY · App 사이트

게임 · NFT 통합 서비스 화면

4종 EVM 지갑 로그인 · 직접 컨트랙트 NFT 민팅 · Polygon→Sui 토큰 마이그레이션까지 클라이언트 통합 전반 담당

게임과 NFT 기능을 다양한 방식으로 활용할 수 있는 핵심 서비스 화면입니다.

  • MetaMask · OKX · Coinbase · Wallet Connect 기반 EVM 로그인 구현
  • EVM 컨트랙트 직접 호출 NFT 민팅 구현
  • NFT 스테이킹 및 게임 아이템 → 실제 코인 전환 기능 구현
  • Polygon에서 Sui로의 토큰 마이그레이션 흐름 구현
  • 지갑 연동을 Ethers에서 Wagmi로 마이그레이션
  • Next.js
  • TypeScript
  • OAuth2
  • Wagmi
  • EVM
  • Sui

Selected work

그 외 작업물.

04

XOCIETY · 코인 에어드랍 사이트

Live

바이낸스 · 바이비트 동시 상장에 맞춰 출시한 토큰 에어드랍 사이트입니다.

  • 로그인부터 에어드랍 수령까지 전체 사용자 흐름 설계 · 구현
  • Sui Wallet Connect 기반 커스텀 서명 플로우 — 사용자가 직접 서명 후 토큰 수령
  • Next.js·
  • Sui Wallet Connect
05

NDUS INTERACTIVE 코퍼레이트 사이트

Spline 3D · 커스텀 WebGL 셰이더

Live

회사 공식 사이트를 Spline 3D와 커스텀 WebGL 셰이더 기반의 스크롤 SPA로 구현했습니다.

  • Spline 3D 씬 Hero 통합 + 커서 추적 · 롤링 루프 인터랙션
  • Next.js 16·
  • React 19·
  • Spline 3D·
  • OGL·
  • Tailwind
06

XOCIETY · 통합 계정 사이트

유저 마이페이지

Live

유저 자산과 이벤트 정보를 조회 · 활용하는 통합 계정 사이트입니다.

  • Epic Games OAuth2 로그인 구현
  • Wallet Connect 기반 EVM · Sui 계정 연동
  • 프리미엄 배틀패스 결제 흐름 · 전적 · 이벤트 결과 조회 화면 구현
  • Next.js·
  • Epic Games OAuth2·
  • Wallet Connect
07

Vercel 멀티 사이트 운영 대시보드

사내 운영 도구

Live

회사 Vercel 팀의 모든 프로젝트를 자동 감지 · 분류하고 점검 모드 · 트래픽을 한 곳에서 운영하는 사내 대시보드입니다.

  • 관리자 점검 모드 — 도메인 일시 이동 · DB 이력 · 실패 시 자동 롤백
  • 동시성 보호 로직과 표준화된 AppError 응답 체계
  • GA Data API 서비스 계정 연동, 프로젝트별 트래픽 1시간 캐시
  • Next.js App Router·
  • Supabase SSR·
  • Vercel REST API·
  • GA Data API
Internal
08

XOCIETY · Admin 콘솔

게임 · 토큰 운영 어드민

Live

게임 · 토큰 운영을 위한 내부 관리자 콘솔입니다.

  • Polygon 토큰 에어드랍 · 소각 기능 구현
  • 초대 코드 · 게임 데이터 업로드 · 토큰 비율 · 시즌 설정 기능
  • 개발용 강제 NFT 지급 도구 · 유저 스테이킹 상태 조회
  • Next.js·
  • TypeScript
Internal
09

HTML 폴더 자동 배포 도구

사내 운영 도구

Live

HTML 폴더 업로드 한 번으로 Vercel 프로젝트 생성 · 배포 · 서브도메인 연결 · 버전 관리까지 처리하는 사내 도구입니다.

  • Vercel 함수의 4.5MB 한도를 우회하는 Vercel Blob 직접 업로드(최대 50MB)
  • 배포 이력 기반 버전 롤백 · 과거 버전 프리뷰
  • `indiecater.io` 서브도메인 자동 연결 + 308 리다이렉트 도메인 마이그레이션
  • Next.js 16·
  • Supabase·
  • Vercel Blob·
  • Vercel REST API
Internal
10

XOCIETY · Draw 사이트

Sui NFT 뽑기

Live

Sui DApp Kit으로 NFT 뽑기와 트랜잭션 조회를 제공하는 사이트입니다.

  • Sui Connect 로그인 · NFT 뽑기 · 트랜잭션 조회 (리더보드 · 개인 랭킹)
  • Next.js·
  • Sui DApp Kit
11

Draw & Guess (가제)

실시간 멀티플레이 게임 · 진행 중

AI가 그림을 그리고 사용자가 맞히는 실시간 멀티플레이 파티 게임의 전체 아키텍처를 직접 설계 · 구현하고 있습니다.

  • Google Quick Draw! 오픈 데이터 기반 AI 그리기 코어 프로토타입
  • 서버 봇 로직 기반 자동 방 환경 · 다중 사용자 상태 동기화
  • 다중 접속 환경 캔버스 스트로크 렌더링 최적화 진행 중
  • Next.js·
  • Supabase·
  • WebSocket·
  • Zustand
12

XOCIETY · 게임 런처

Electron 런처 모듈

게임 플레이 가능 여부를 판단하는 런처 기능을 구현했습니다.

  • 오픈 시간 카운트다운, NFT 보유 · 초대 코드 기반 플레이 가능 체크
  • Electron
Internal
13

부수 사이트 · 인게임 웹뷰

여러 보조 사이트 · 웹뷰 묶음

운영 단계에서 필요한 보조 사이트와 인게임 웹뷰들을 묶어 진행했습니다.

  • Adidas NFT 쇼룸(adidas.xociety.io) 인수 · Vercel Analytics 커스텀 이벤트 트래킹
  • XOCIETY 브랜드 사이트(xociety.io) 구축
  • 인게임 이벤트 배너 · 슬라이드 웹뷰, 테스트 결과 · 랭킹 리더보드, 일일 자동 업데이트 이슈 공유 페이지
Internal