Frontend Engineer · NDUS INTERACTIVE · Since 2023 · Seoul

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

Toolbox

  • Next.js
  • TypeScript
  • React
  • Tailwind CSS

Work

Featured.

Featured · 01Live · 운영 중

AI 사용량 추적 SaaS

사내 SaaS · 사내 직원 11명 추적 운영 중

사내 직원 11명(Claude·Codex 2종) 추적, AI 결제 시 의무 설치로 결제 대상 100% 자동 편입되는 사내 SaaS — 모노레포 4패키지로 직접 설계·운영

직원별 Claude · Codex AI 도구의 사용량을 자동 수집하고 7일 사이클 기준 플랜 추천까지 제공하는 사내 SaaS입니다. 웹 포털 · Chrome MV3 확장 · 크로스플랫폼 Node CLI 콜렉터를 단일 모노레포로 묶었고, **사내 AI 결제 대상자는 온보딩에서 의무 설치되어 결제 대상 100%가 자동 편입**됩니다.

  • 사내 직원 11명을 추적하는 운영 중인 SaaS — AI 결제 시 온보딩에서 의무 설치되어 결제 대상자 100% 자동 편입
  • 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 쿼터 모니터링 운영 중
  • 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 · 운영팀 5명 사용 중

운영팀 5명이 코드 수정 없이 카피·이미지·프로젝트·팀까지 직접 편집하는 콘텐츠 모델 + 10개 테이블 어드민

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

  • Content Blocks 키-밸류 모델로 모든 카피·이미지를 운영팀 5명이 직접 편집 → 사이트 공개 이후 콘텐츠 변경 시 개발자 개입 0건
  • 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 · 운영 중

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

사내 운영 도구 · 회사 사이트 15개 통합 관리

회사 사이트 15개의 점검·롤백·트래픽 확인을 한 화면으로 통합해 반복 업무를 자동화한 사내 도구

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

  • 회사 Vercel 팀의 15개 프로젝트를 자동 감지 · 분류 — 신규 프로젝트도 별도 등록 없이 자동 편입
  • 관리자 점검 모드 — 도메인 일시 이동 · DB 이력 · 실패 시 자동 롤백
  • 동시성 보호 로직과 표준화된 AppError 응답 체계로 안전한 운영 보장
  • GA Data API 서비스 계정 연동, 프로젝트별 트래픽 1시간 캐시로 응답 부하 최소화
  • Next.js App Router
  • Supabase SSR
  • Vercel REST API
  • GA Data API
소스대시보드APIDBVercel REST API15 projects · 자동 감지GA Data API프로젝트별 트래픽Auto-Discovery감지 · 분류 · 편입Maintenance Mode도메인 이동 · 자동 롤백Traffic Monitor통합 트래픽 뷰동시성 잠금 + AppError 표준화Next.js App Router + Supabase SSRstate · cache · historysites15 projects 캐시maintenance_history이동 · 롤백 이력traffic_cache1h GA 캐시action_logs작업 감사
Figure · ndus-sites-dashboard data flow

Selected work

그 외 작업물.

04

HTML 폴더 자동 배포 도구

사내 운영 도구 · 17개 프로젝트 셀프서비스 배포

Live

HTML 폴더 업로드 한 번으로 Vercel 프로젝트 생성 · 배포 · 서브도메인 연결 · 버전 관리까지 처리하는 사내 도구입니다. 게임 개발팀(웹게임), 사업팀(피치덱), 디자이너(디자인 시연 페이지) 등 비개발자 부서가 직접 사용 중입니다.

  • 비개발자 부서(게임팀·사업팀·디자이너)가 직접 셀프서비스로 배포 — 누적 17개 프로젝트 운영 중
  • 업로드 → Vercel 프로젝트 생성 → 배포 → 서브도메인 연결까지 한 번에 처리 — 수동 배포 단계 제거
  • Vercel 함수 4.5MB 한도를 우회하는 Vercel Blob 직접 업로드(최대 50MB)
  • Next.js 16·
  • Supabase·
  • Vercel Blob·
  • Vercel REST API
Internal
05

Draw & Guess (가제)

실시간 멀티플레이 + AI 그리기 · 진행 중

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

  • WebSocket 기반 다중 사용자 상태 실시간 동기화 — 다중 접속 환경에서 끊김 없는 실시간 반영
  • Google Quick Draw! 오픈 데이터 기반 AI 그리기 코어 프로토타입
  • 서버 봇 로직 기반 자동 방 환경 구성
  • Next.js·
  • Supabase·
  • WebSocket·
  • Zustand
06

NDUS INTERACTIVE 코퍼레이트 사이트

회사 공식 사이트 · 3D 인터랙션

Live

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

  • Spline 3D 씬 Hero 통합 + 커서 추적 · 롤링 루프 인터랙션
  • OGL 기반 커스텀 Aurora 셰이더 · DotField 배경 직접 작성
  • 영/한 혼합 콘텐츠 구조 + React Compiler 성능 최적화
  • Next.js 16·
  • React 19·
  • Spline 3D·
  • OGL·
  • Tailwind
07

XOCIETY · App 사이트

통합 클라이언트 · 외부 의존성 통합

Live

Epic Games OAuth2 · 4종 EVM 지갑 · 컨트랙트 직접 호출 · 체인 마이그레이션까지 외부 의존성이 큰 통합 클라이언트입니다.

  • MetaMask · OKX · Coinbase · Wallet Connect 기반 EVM 로그인 구현
  • EVM 컨트랙트 직접 호출 NFT 민팅 구현
  • NFT 스테이킹 및 게임 아이템 → 실제 코인 전환 기능 구현
  • Next.js·
  • TypeScript·
  • OAuth2·
  • Wagmi·
  • EVM·
  • Sui
08

XOCIETY · 코인 에어드랍 사이트

고트래픽 라이브 운영 · 일평균 14,000명+

Live

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

  • 일평균 14,000명 이상이 사용하는 트래픽 구조를 무사고로 운영
  • 로그인부터 에어드랍 수령까지 전체 사용자 흐름 설계 · 구현
  • Sui Wallet Connect 기반 커스텀 서명 플로우 — 사용자가 직접 서명 후 토큰 수령
  • Next.js·
  • Sui Wallet Connect
09

XOCIETY · 통합 계정 사이트

유저 마이페이지

Live

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

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

XOCIETY · Admin 콘솔

운영 어드민

Live

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

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

XOCIETY · Draw 사이트

Sui NFT 뽑기

Live

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

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

XOCIETY · 게임 런처

Electron 런처 모듈

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

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

부수 사이트 · 인게임 웹뷰

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

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

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