정의현

글로벌 온라인 게임 플랫폼의 차세대 로비 시스템. 레거시 v1의 기술 부채를 해소하고 성능·확장성·테스트 커버리지를 전면 개선한 리아키텍처링 프로젝트.

ROLE

프론트엔드 개발 리드

STACK

Next.js 16 · React 19 · TypeScript · Jotai · TanStack Query · SCSS Modules · next-intl · Motion / React · WebSocket · Playwright · Vitest

• Jotai + TanStack Query 기반 상태 관리 아키텍처 설계로 서버/클라이언트 상태 분리 및 캐시 최적화
• next-intl 기반 11개 언어 i18n 파이프라인 구축, 런타임 번역 누락 감지 시스템 도입
• WebSocket 기반 실시간 게임 상태 동기화 및 자동 재연결 로직 구현
• Playwright E2E + Vitest 유닛 테스트 체계 수립, CI 파이프라인에 자동화 테스트 통합

온라인 게임 플랫폼 로비의 초기 프론트엔드를 제로부터 구축. 다국어 지원과 인증 시스템, 실시간 통신 등 플랫폼의 핵심 인프라를 설계하고 운영까지 담당.

ROLE

프론트엔드 개발

STACK

Next.js 14 · React 18 · TypeScript · Recoil · SWR · SCSS Modules · next-intl · next-auth · Motion / React · WebSocket · Jest

• Recoil + SWR 기반 전역 상태 관리 및 서버 데이터 페칭 아키텍처 설계
• next-auth 기반 인증/인가 플로우 구현, 세션 관리 및 보안 미들웨어 설계
• 10개 언어 다국어 지원 체계 구축 및 지역별 콘텐츠 분기 로직 구현

6년간 다양한 기업·기관의 웹사이트와 서비스 UI를 퍼블리싱. 반응형 웹, 크로스 브라우저 호환, 웹 접근성(WCAG) 준수를 핵심 원칙으로 수십 건의 프로젝트를 수행.

ROLE

웹 퍼블리셔 (리드)

STACK

HTML5 · CSS3 · SCSS / Sass · JavaScript · jQuery · Responsive Design · Cross-Browser · Web Accessibility · Gulp

• 시맨틱 마크업과 SCSS 기반 컴포넌트 스타일 아키텍처 설계, 재사용 가능한 UI 패턴 라이브러리 구축
• IE11~최신 브라우저 크로스 브라우징 대응 및 모바일·태블릿·데스크톱 반응형 레이아웃 구현
• WCAG 2.1 AA 기준 웹 접근성 준수, 키보드 네비게이션·스크린 리더 호환성 검증

Google Maps 리뷰를 AI로 요약·분석해 주는 크롬 확장 프로그램. Claude Code와 페어 프로그래밍하며 기획·설계부터 배포까지 단독으로 완성한 AI 어시스턴트 개발 프로젝트.

ROLE

풀스택 개발 (AI 페어 프로그래밍)

STACK

Chrome MV3 · TypeScript · Vite · Vitest · Cloudflare Workers · Supabase · Gemini API · Paddle Billing · Claude Code

• Claude Code에게 요구사항과 제약을 명확히 전달하고 설계 결정을 함께 검토하며, 확장·백엔드·결제 인프라를 AI 주도로 구현
• TypeScript 기반 Google Maps 리뷰 스크레이퍼 설계 및 Vitest 픽스처 테스트로 DOM 구조 변경에 대응
• Cloudflare Workers + Supabase + Gemini API로 분석 파이프라인 구축, 레이트 리밋·사용량 추적·프리미엄 권한 검증 로직 분리
• Paddle Billing 기반 구독 결제 및 무료 티어 일일 한도 시스템, 90일 분석 히스토리 저장 구현

바로가기

주식 물타기 평균단가를 계산해 주는 크롬 확장 프로그램. AI 코딩 어시스턴트를 활용해 바닐라 JS 확장부터 서버리스 백엔드·결제 연동까지 1인 개발로 스토어 출시까지 완료.

ROLE

풀스택 개발 (AI 페어 프로그래밍)

STACK

Chrome MV3 · Vanilla JS · Vite · Vercel Serverless · Upstash Redis · Paddle Billing · Claude Code

• Claude Code와 함께 요구사항 정리·코드 생성·리팩토링 사이클을 반복하며 의존성 없는 경량 Vanilla JS + Vite 확장 구현
• 8개 언어(EN/KO/JA/ZH-CN/ZH-TW/DE/ES/PT) 다국어 지원 및 다크모드 자동 대응
• Vercel Serverless + Upstash Redis 기반 구독 상태 검증 백엔드 설계, Paddle Billing(Merchant of Record) 연동
• Pro 구독으로 추가 통화(KRW/JPY/EUR/GBP/CNY/INR/BRL) 잠금 해제 기능 구현 및 Chrome Web Store 정식 배포

바로가기

Turborepo 모노레포 기반의 풀스택 블로그 플랫폼. 공개 블로그와 관리자 대시보드를 독립 앱으로 분리하고, 공유 패키지를 통해 타입 안전성과 코드 재사용성을 확보.

ROLE

풀스택 개발 (개인 프로젝트)

STACK

Next.js 16 · React 19 · TypeScript · Turborepo · Supabase · TailwindCSS · Recharts · Zod · Resend

• Turborepo 모노레포 아키텍처로 블로그 앱 / 어드민 대시보드 / 공유 패키지(DB, UI, Config) 분리
• Supabase RLS 정책 기반 보안 모델 설계, DB 트리거를 활용한 조회수 자동 집계 및 프로필 자동 생성
• 방문자 분석 대시보드 구축 — 디바이스, 브라우저, 리퍼러 추적 및 Recharts 기반 시각화

GitHub