김지환

그룹웨어 SaaS 더블유웍스의 근태·결재·인사 등 핵심 도메인 프론트엔드를 개발하고, 채팅 데스크톱 앱을 전담했습니다. 현재는 해외 직구 플랫폼 직구라운드의 프론트엔드를 담당하고 있습니다.

• 상품·공급사 통합 검색 결과 페이지 구현 — 탭·정렬·페이지네이션 URL 동기화 기반 SSR
• STOMP 기반 실시간 1:1 채팅 클라이언트 연동 — REST+WS 하이브리드, WS 전용 토큰 분리, 거래 진행상태·회원 유형별 액션 이벤트 처리
• Storybook 빌더 webpack → Vite 전환 — cold build 평균 28.9s → 13.9s (약 2.08× 빠름), 산출물 크기 -23.5%
• 텍스트 에디터 Plate.js → Tiptap v2 전면 교체 — 모바일 환경 입력·레이아웃 문제 해결
• 채팅방 생성 시간 98.3% 단축 (6s → 0.1s) — 반복 요청 구조 병목 파악 및 단순화
• Electron IPC 소켓 최적화 — 중복 구독 134→15 (-88.8%), 타이핑 입력 지연 해소
• 전자결재 자동 임시저장 — 세션 만료로 인한 데이터 유실 방지, 디바운스·쓰로틀링으로 저장 빈도·서버 부담 제어
• Playwright E2E 테스트 · GitHub Actions CI/CD · AWS S3/CloudFront 자동 배포 환경 구축
• 코드 스플리팅 최적화 (Lighthouse Performance 63→73, FCP 3.1s → 2.2s) · 보안 (refresh-token http-only 쿠키 전환)
• Claude Code 팀 활용 체계 구축 — 역할별 커맨드·컨텍스트 정리, WBS 기준 팀 생산성 약 56% 향상
• CES 2026 부스 기획·운영 PO — 유관 업체 3곳 발굴

AI 이미지 처리 SaaS tebekAI의 프론트엔드를 디자이너 1명과 2인 팀으로 단독 설계·개발했습니다.

• 5개 AI 서비스 프론트엔드 전체 단독 구현 (실종아동 유사도 비교, 명화 스타일 변환 등)
• 회원 인증 시스템 및 크레딧 기반 결제 시스템 구축
• 경찰청 실종검색 OpenAPI 연동, 반응형 디자인, Google Analytics·AdSense 운영

iframe + postMessage 프로토콜 기반으로 게임을 독립 통합하는 웹 게임 플랫폼. Claude Code 에이전트 워크플로우를 포함한 보일러플레이트를 구축하여 일관된 아키텍처로 게임을 빠르게 개발하는 시스템을 설계했습니다.

• TypeScript
• React
• Next.js
• NestJS
• Tailwind CSS
• Prisma
• PostgreSQL
• Socket.io
• Vite
• Canvas

• 게임 플랫폼 아키텍처 설계 — iframe + postMessage 프로토콜 기반 게임 통합 구조
• AI 기반 개발 파이프라인 설계 — Claude Code 에이전트 규칙·권한 정책(allow/deny)과 5단계 워크플로우(기획 SDD → 계획·AI 에셋 → 서브에이전트 병렬 개발 → 코드 리뷰·검증 → PR 릴리즈)를 포함한 보일러플레이트 구축, init.sh 한 줄로 플랫폼 컨벤션을 준수하는 게임 프로젝트 생성
• Kaboom(실시간 지뢰찾기) — Socket.io 멀티플레이어, 매칭 대기열, 랭킹 시스템
• 한들(한국어 워들) — 솔로 게임, 매일 새로운 퍼즐 생성, 결과 공유 기능
• 신화 디펜스 (솔로·로그라이크 타워 디펜스) — 증강(축복) 15종·합성 타워 특수능력 5종·도전 모드 3종, 타일 기반 맵 + 속성 상성 시스템(5맵·몬스터 25종), 결과 화면 딜량 통계
• 신화 디펜스 기술 구현 — Canvas 기반 실시간 렌더링, 배속(1x/2x/4x) 모드에서 프레임당 커진 delta time이 충돌 판정·이동을 건너뛰는 문제를 delta time을 잘게 나눠 여러 번 update 하는 방식으로 해결, 시드 기반 결정론적 PRNG로 합성·성장 랜덤성의 공정성 보장, iframe postMessage 플랫폼 브리지 + standalone fallback

글로벌 B2B/B2C 해외 직구 플랫폼의 프론트엔드를 Next.js 기반으로 개발하고 있습니다. 견적서·요청서·제안서 등 B2B 거래 전 주기와 공급/정산/구매 내역 관리, 실시간 1:1 채팅, 검색 결과 페이지, 커뮤니티, SEO 인프라를 구축했습니다.

• TypeScript
• Next.js
• React
• Tailwind CSS
• Zustand
• React Query
• React Hook Form
• Zod
• Tiptap
• STOMP
• MSW
• Storybook
• Vite
• i18n

• B2B 거래 관리 시스템 구현 — 견적서 작성·수정·PDF 미리보기·엑셀 다운로드, 요청서·제안서 CRUD 및 상세 페이지 (구매/공급 양방향)
• 상품·공급사 통합 검색 결과 페이지 구현 — 탭 전환, 정렬·페이지네이션의 URL 동기화 기반 SSR, 타입 정합성 개선
• STOMP 기반 실시간 1:1 채팅 클라이언트 연동 — REST+WS 하이브리드 구조, WS 전용 토큰 분리 전환, 회원 유형별 액션 버튼·거래 진행상태 이벤트 처리, 파일 전송 에러 복구
• Storybook 빌더 webpack → Vite 전환 — cold build 평균 28.9s → 13.9s (약 2.08× 빠름), 산출물 크기 -23.5%, 컴포넌트 개발 DX·CI 시간 개선
• 텍스트 에디터 Plate.js → Tiptap v2 전면 교체 — 웹 기준으로 도입했던 에디터가 모바일 환경에서 입력·레이아웃 문제를 일으켜, 모바일 호환이 검증된 Tiptap v2로 재작성
• 공급·정산·구매 내역 관리 — 리스트+상세+필터, 반응형 테이블, 엑셀/PDF 다운로드, 메모 기능
• 토크라운드(커뮤니티) 기능 구현 — 게시글·댓글·QnA·신고/삭제 모달, API 스펙 정합성 수정, SSR/CSR 통합
• SEO 인프라 구축 — metadata·robots·sitemap·manifest·JSON-LD·OG·hreflang 적용, 18개 공개 페이지 metadata 생성, AI 봇 허용·301 redirect·커스텀 404·OG/favicon/PWA 아이콘 에셋 배치
• 공통 UI·다국어(ko/en/zh)·반응형 디자인 체계 구축 — AlertDialog/ConfirmDialog 공통 컴포넌트, 필터 시스템, 테이블·폼의 모바일~데스크톱 대응, hreflang·i18n 라우팅

그룹웨어 SaaS의 근태·결재·인사 등 핵심 도메인 프론트엔드를 개발하고, 채팅 데스크톱 앱을 전담했습니다. 실제 업무 흐름에서 반복되는 불편을 분석하고 기능으로 개선했습니다.

• TypeScript
• React
• Tailwind CSS
• Zustand
• Socket.io
• Electron
• Storybook
• Node.js
• Express

• 채팅방 생성 시간 단축 (6초→0.1초) — 요청 구조를 분석해 반복 요청이 병목임을 파악하고 구조를 단순화하여 개선
• 전자결재 자동 임시저장 — 작성 중 로그인 만료로 내용이 유실되는 문제를 개선, 디바운스·쓰로틀링으로 저장 빈도와 서버 부담 조절, 마지막 저장 시점 표시
• Electron IPC 소켓 최적화 (IPC 등록 88.8% 감소) — Zustand + EventBus 패턴으로 중복 구독 134회→15회, 타이핑 입력 지연 해소
• Claude Code 팀 활용 체계 구축 — 역할별 커맨드·컨텍스트 정리, 코드 작성·커밋·PR 과정 표준화, WBS 기준 팀 생산성 약 56% 향상
• Playwright 기반 E2E 테스트 도입 및 GitHub Actions CI/CD · AWS S3/CloudFront 자동 배포 환경 구축
• 코드 스플리팅 최적화 — 빌드 청크 3,900KB→2,000KB, Lighthouse Performance 63→73, FCP 3.1s→2.2s
• 보안 개선 — refresh-token http-only 쿠키 전환, React Query 캐시 초기화 설계

디자이너 1명과 2인 팀으로 AI 이미지 처리 SaaS의 프론트엔드 전체를 단독 설계·구현하고, 기획부터 배포·운영까지 전 주기를 주도했습니다.

• React
• CSS Modules
• REST API
• Google Analytics
• AdSense

• 5개 AI 서비스 프론트엔드 전체 단독 구현 (실종아동 유사도 비교, 명화 스타일 변환 등)
• 회원 인증 시스템 및 크레딧 기반 결제 시스템 구축
• 경찰청 실종검색 OpenAPI 연동, 반응형 디자인, Google Analytics·AdSense 운영

8기 · 웹 개발 트랙

이노베이션 아카데미