패션 제품 라이프사이클 추적 및 디지털 제품 여권(DPP) 발행 플랫폼

1. Server-Driven UI(SDUI) 시스템 구축

   문제 상황

   파트너사별 상이한 UI 요구사항으로 인한 컴포넌트 코드 폭증 및 배포 의존도 심화

   해결 과정

   • Role 중심 SDUI 스키마 설계 및 JSON을 해석해 UI를 그리는 재귀 렌더러 구현으로 파트너사별 화면 동적 구성
   • Zod + React Hook Form으로 JSON 기반 동적 폼 검증 시스템을 구축하여 하드코딩된 로직 제거
   • 제품 및 소유자 상태에 따른 조건부 렌더링 로직을 서버 스키마로 관리하여 프론트엔드 비즈니스 로직 단순화
   • 의사선택자(:hover, :focus)를 포함한 확장 가능한 스타일 시스템 설계

   결과

   • 파트너사별 커스텀 컴포넌트 파일 90% 감소
   • 배포 없는 UI 대응으로 리드타임 30% 단축

   기술 스택

   ReactTypeScriptReact QueryJotaiEmotionZodReact Hook Form

2. 프론트엔드 아키텍처 재구성

   문제 상황

   CRA 레거시 구조의 유지보수 한계 및 유저/어드민 코드 혼재로 인한 관리 효율 저하

   해결 과정

   • FSD(Feature-Sliced Design) 아키텍처 도입으로 도메인 중심의 계층 분리 및 사이드 이펙트 최소화
   • ESLint 규칙 기반의 import 계층 제한을 통해 아키텍처 위반을 PR 단계에서 차단하여 코드 품질 유지
   • Atomic Design 기반 디자인 시스템 구축 및 Storybook을 통한 50+ 공통 컴포넌트 문서화
   • CRA에서 Vite로 마이그레이션 진행 및 의존성 라이브러리 버전 최적화

   결과

   • 빌드 시간 82% 감축 (192s → 33s)
   • 번들 크기 44% 축소 (1.46MB → 0.82MB)
   • 신규 개발자 온보딩 기간 40% 단축

   기술 스택

   ViteStorybookESLintHuskylint-staged

3. 어드민 백오피스 고도화

   문제 상황

   복잡한 권한별 메뉴 관리 비용 증가 및 70+ 필드 폼 관리의 어려움

   해결 과정

   • 메뉴 메타데이터 중심의 라우트 설계로 사이드바와 라우트를 동기화하여 관리 지점 단일화(SSOT)
   • Role 기반 라우트 동적 등록 시스템 구현으로 권한별 보안 강화 및 초기 로딩 성능 최적화
   • 네이버 클로바 OCR 연동으로 사업자등록증 입력 자동화
   • 글로벌 파트너사 대응을 위한 다국어(ko/en/ja/zh) 시스템 구축

   결과

   • Role 확장 유연성 확보
   • 초기 라우트 로딩 성능 42% 개선
   • 사업자등록증 입력 시간 80% 단축

   기술 스택

   React Routeri18n네이버 클로바 OCR API

4. 의류 케어라벨 WYSIWYG 에디터 개발 (SaaS)

   문제 상황

   외부 디자인 툴 의존으로 라이선스 비용 증가, 파트너사별 맞춤 라벨 요구 대응 한계

   해결 과정

   • React Grid Layout 및 Canvas API 기반의 캔버스 에디터 아키텍처 설계
   • 드래그&드롭, 다중 선택, 바운딩 박스, 레이어 계층 관리 등 복잡한 인터랙션 구현
   • 인쇄 옵션(흑백/금박/은박 등)별 실시간 프리뷰 시스템 구현
   • 인쇄 업체 연동 가능한 PDF 출력 파이프라인 구축

   결과

   • 외부 디자인 툴 의존 제거
   • 실제 출력물 미리보기로 샘플 제작 비용 및 시간 절감

   기술 스택

   Canvas APIReact-Grid-Layoutstyled-components

20세기 유럽 조명 및 소품 커머스 브랜드

1. 커머스 웹사이트 구축

   문제 상황

   SNS 기반 판매로 재고 관리 어려움, 주문 처리 수동화, 결제 프로세스 복잡으로 구매 전환 한계

   해결 과정

   • 브랜드 아이덴티티(BI) 설계부터 UI 디자인, 개발, 배포까지 End-to-End 프로젝트 리딩
   • 커머스 핵심 기능 구현: 상품 카탈로그, 장바구니, 실시간 재고 관리, 주문 상태 추적 시스템
   • PortOne 통합 결제 시스템 구축 (토스페이/카카오페이/이니시스)
   • AWS EC2 + GitHub Actions CI/CD 파이프라인 구축

   결과

   • PortOne 연동을 통한 결제 자동화 및 수동 주문 처리 프로세스 개선

   기술 스택

   ReactTypeScriptPortOne APIAWS EC2GitHub Actions