실제 비즈니스 가치를 창출한
주요 프로젝트 포트폴리오

React Node.js MongoDB Stripe PG Tailwind

스마트 이커머스 웹 플랫폼 (CommerceFlow)

맞춤형 실시간 추천 알고리즘과 전자결제 연동 기능을 갖춘 대규모 쇼핑몰 웹 애플리케이션입니다.

핵심 기능 & 아키텍처

• JWT + HttpOnly 쿠키 기반의 보안 인증 및 권한(Role)별 라우팅 가드
• Zustand 기반 실시간 장바구니 및 재고 상태 낙관적 업데이트(Optimistic Update)
• 관리자 전용 대시보드 (매출 분석 차트, 상품 등록/수정, 주문 배송 상태 관리)
• 트러블슈팅: 이미지 WebP 변환 및 레이지 로딩으로 초기 번들 크기 40% 절감

96점 Lighthouse 점수

1.2초 초기 로딩 속도

0% 결제 에러율

GitHub Code 라이브 데모

Vue 3 Socket.io Express Redis Pinia

실시간 팀 협업 메신저 (SyncChat)

웹소켓 기반의 초저지연 메시징, 파일 공유 및 채널별 권한 관리 기능을 제공하는 팀 협업 메신저 서비스입니다.

핵심 기능 & 아키텍처

• Socket.io + Redis Pub/Sub을 통한 다중 서버 간 실시간 메시지 동기화
• 드래그 앤 드롭 파일 업로드(AWS S3) 및 이미지 프리뷰 모달
• 타이핑 표시(Typing Indicator), 실시간 접속자 상태(Presence) 추적
• 트러블슈팅: 네트워크 불안정 시 자동 재연결 및 메시지 큐 버퍼링으로 유실 방지

< 50ms 메시지 전송 지연

1,000+ 동시 접속 부하테스트

100% 메시지 도달률

GitHub Code 라이브 데모

Next.js 14 TypeScript Chart.js Tailwind Zustand

개인 금융 & 자산 관리 대시보드 (FinScope)

수입/지출 내역을 시각적 차트로 정밀 분석하고 월별 예산 계획을 세울 수 있는 데이터 시각화 웹 애플리케이션입니다.

핵심 기능 & 아키텍처

• Next.js 14 App Router와 Server Components를 활용한 고속 초기 로딩
• Chart.js 인터랙티브 차트를 통한 카테고리별 지출 비율 및 월간 추이 시각화
• 엑셀(XLSX) 및 CSV 대용량 금융 데이터 가져오기/내보내기 엔진 내장
• 트러블슈팅: 복잡한 차트 재계산 시 React useMemo와 Web Worker로 메인 스레드 프리징 차단

0.8초 FCP 로딩 속도

98점 접근성 (a11y)

60 FPS 인터랙션 프레임

GitHub Code 라이브 데모

Python FastAPI React OpenAI API Docker

AI 스마트 코드 리뷰 & 문서화 툴 (CodeDoc AI)

Git Diff 변경점을 심층 분석하여 보안 취약점을 감지하고, API 마크다운 문서를 자동 생성하는 개발 생산성 솔루션입니다.

핵심 기능 & 아키텍처

• AST 구문 분석과 LLM 프롬프트 파이프라인을 결합한 코드 정적/동적 검증
• GitHub Webhook 연동을 통해 PR 생성 시 자동 분석 코멘트 게시
• FastAPI 비동기 스트리밍(Server-Sent Events)으로 실시간 리뷰 응답 표출
• 트러블슈팅: 토큰 비용 절감을 위한 코드 청킹(Chunking) 및 캐싱 레이어 구축

60% 리뷰 시간 단축

92% 버그 사전 감지율

45% API 비용 절감

GitHub Code 라이브 데모

React TypeScript Google Maps API Firebase PWA

클라우드 스마트 여행 플래너 (TripMap)

드래그 앤 드롭으로 일자별 여행 동선을 직관적으로 구성하고 동행자와 실시간으로 수정 내역을 공유하는 PWA 웹앱입니다.

핵심 기능 & 아키텍처

• Google Maps API 기반 최적 이동 경로 연산 및 일자별 소요 시간 산출
• Firebase Firestore를 이용한 동행자 간 다자간 실시간 동기화
• 서비스 워커(Service Worker) 기반 오프라인 모드 및 설치형 PWA 지원
• 트러블슈팅: 마커 클러스터링(Marker Clustering)으로 수백 개 장소 표시 시 렌더링 지연 해결

100점 PWA Lighthouse

30% 동선 이동시간 단축

실시간 다자간 협업

GitHub Code 라이브 데모

TypeScript Rollup Storybook Jest NPM

경량 모던 UI 컴포넌트 킷 (Lumina UI - Open Source)

웹 접근성(WAI-ARIA)을 완전 준수하고 트리 셰이킹(Tree-shaking)을 지원하는 30여 종의 재사용 가능한 리액트 UI 킷입니다.

핵심 기능 & 아키텍처

• 완벽한 다크/라이트 테마 토큰 시스템 및 CSS Modules 기반 캡슐화
• Storybook 8을 통한 컴포넌트 인터랙티브 카탈로그 및 문서화 배포
• Rollup 번들러와 ESM/CJS 듀얼 빌드 구성으로 최적화된 패키지 배포
• 트러블슈팅: 컴포넌트별 개별 export 구조로 필요한 컴포넌트만 번들링되도록 트리셰이킹 보장

< 15KB 초경량 번들 크기

120+ GitHub Stars

100% TypeScript 커버리지

GitHub Code Storybook 데모