Experience
경력
2025.04 - 현재1년
더블티
프론트엔드 개발자
그룹웨어 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곳 발굴
2024.04 - 2025.041년
태백넷
프론트엔드 개발자
AI 이미지 처리 SaaS tebekAI의 프론트엔드를 디자이너 1명과 2인 팀으로 단독 설계·개발했습니다.
- 5개 AI 서비스 프론트엔드 전체 단독 구현 (실종아동 유사도 비교, 명화 스타일 변환 등)
- 회원 인증 시스템 및 크레딧 기반 결제 시스템 구축
- 경찰청 실종검색 OpenAPI 연동, 반응형 디자인, Google Analytics·AdSense 운영
Projects
프로젝트
2026.02 - 현재풀스택 설계 및 개발개인 프로젝트
Game Park
iframe + postMessage 프로토콜 기반으로 게임을 독립 통합하는 웹 게임 플랫폼. Claude Code 에이전트 워크플로우를 포함한 보일러플레이트를 구축하여 일관된 아키텍처로 게임을 빠르게 개발하는 시스템을 설계했습니다.
TypeScriptReactNext.jsNestJSTailwind CSSPrismaPostgreSQLSocket.ioViteCanvas
- 게임 플랫폼 아키텍처 설계 — 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
2026.01 - 현재프론트엔드 개발회사 프로젝트
직구라운드
글로벌 B2B/B2C 해외 직구 플랫폼의 프론트엔드를 Next.js 기반으로 개발하고 있습니다. 견적서·요청서·제안서 등 B2B 거래 전 주기와 공급/정산/구매 내역 관리, 실시간 1:1 채팅, 검색 결과 페이지, 커뮤니티, SEO 인프라를 구축했습니다.
TypeScriptNext.jsReactTailwind CSSZustandReact QueryReact Hook FormZodTiptapSTOMPMSWStorybookVitei18n
- 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 라우팅
2025.04 - 2026.01프론트엔드 개발 (웹·Electron)회사 프로젝트
더블유웍스 (Double U Works)
그룹웨어 SaaS의 근태·결재·인사 등 핵심 도메인 프론트엔드를 개발하고, 채팅 데스크톱 앱을 전담했습니다. 실제 업무 흐름에서 반복되는 불편을 분석하고 기능으로 개선했습니다.
TypeScriptReactTailwind CSSZustandSocket.ioElectronStorybookNode.jsExpress
- 채팅방 생성 시간 단축 (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 캐시 초기화 설계
2024.04 - 2025.04프론트엔드 전담회사 프로젝트
tebekAI
디자이너 1명과 2인 팀으로 AI 이미지 처리 SaaS의 프론트엔드 전체를 단독 설계·구현하고, 기획부터 배포·운영까지 전 주기를 주도했습니다.
ReactCSS ModulesREST APIGoogle AnalyticsAdSense
- 5개 AI 서비스 프론트엔드 전체 단독 구현 (실종아동 유사도 비교, 명화 스타일 변환 등)
- 회원 인증 시스템 및 크레딧 기반 결제 시스템 구축
- 경찰청 실종검색 OpenAPI 연동, 반응형 디자인, Google Analytics·AdSense 운영
About
기술 스택
Frontend
JavaScriptTypeScriptReactNext.jsTailwind CSSZustandElectron
Backend
Node.jsExpressSocket.ioJavaSpring Boot
Infra
AWS (S3, CloudFront)GitHub ActionsGitStorybookPlaywright
Education
교육
삼성 청년 SW 아카데미 (SSAFY)
8기 · 웹 개발 트랙
42 Seoul
이노베이션 아카데미