Frontend Engineer · Interactive Systems
산업용 X-ray 영상 처리 도메인에서
Canvas 기반 고성능 인터랙티브 툴을 설계하고 구현합니다.
대용량 데이터 + 실시간 UI 환경에서
병목을 측정하고, 구조적으로 분리하고, 수치로 개선하는 것을 선호합니다.
Core
Next.js · React · TypeScript
State & Data
Zustand · TanStack Query / Router / Table
Visualization & Processing
Konva.js · GeoTIFF · OpenCV.js (WASM)
Real-time
Socket.IO
2025.03 – Present
2024.08 – 2024.11
배터리 셀 X-ray 불량 검출 + AI 학습용 라벨링 툴
프론트엔드 아키텍처 설계 및 구현 주도
- Canvas Layer 분리 → 30fps → 60fps
- XOR Delta + RLE 압축 → Undo/Redo 메모리 2GB → 50MB
- Bitmask 직접 구현 (Uint8Array + BFS)
- ML 파이프라인 UI / Auto Labeling 설계
고해상도 영상 Denoising + Super Resolution UI
- OpenCV.js (WASM) 기반 클라이언트 영상 처리 → 실시간 프리뷰
- Vector Polygon 전환 → 메모리 70% 절감
소프트웨어 라이선스 발급/관리 시스템
FSD 4-Layer 아키텍처 설계
- TanStack Virtual → 1,000건 테이블 1,000ms → 30ms
- MSW 기반 API Mock → 백엔드 의존성 제거
React exit animation flicker 제거 라이브러리
Suspense 기반 DOM commit 제어
- 0.88KB (gzip)
- 22 tests (Lines 100% / Branch 84%)
사내 C#/.NET 팀 온보딩용 Marketplace 플러그인
- 7 Skills (Code Review · TDD · MVVM Generator 등)
- 12 Modern C# 규칙
- v1.8.0
High-Performance Canvas Architecture Demo
3-Layer Rendering · 60fps · XOR+RLE Delta History
Worker Offloading · 115 Tests · Live Demo
CRDT 기반 Offline-First 매매일지
Yjs + Dexie 이중 계층 구조 · PWA · 서버 비용 $0
React 디자인 패턴 · React 내부 구조 · JS 심화 · TypeScript 챌린지 등
총 49개 아티클