엄성준

한국 중고차를 해외 바이어에게 파는 수출 플랫폼입니다.

1. 레거시 페이지 React 전환 (Web · Mobile)

   • JSP 레거시를 React · TypeScript 로 단계적으로 옮기고, 처음 세팅 · 폴더 구조 · 공통 아키텍처 설계를 주도
   • JSP 안에 React 를 부분 삽입해 전환 위험을 줄인 뒤, 전체 레이아웃을 React SPA 로 바꿔 화면 접힘 · 리소스 중복 로딩 해결
   • Web 은 필터 검색 · 통합 검색 · 찜 목록 · 운송 정보 · 파츠위니 통합 검색, Mobile 은 찜 목록 · 최근 본 매물 · 운송 정보를 차례로 분리
   • 흩어진 React 프로젝트를 web-www-front · web-mobile-front 로 통합하고 공통 UI · 로직을 모듈화해 중복 코드 약 20% 감소
   • 필터 검색 페이지 리소스 로딩 구조 개선과 지연 로딩으로 같은 시나리오 기준 로딩 45초 → 20초
   • 글로벌 헤더 · 푸터를 React 로 만들고 SmartLink 로 JSP · React 이동을 분기, Lighthouse 성능 · 접근성 평균 10점대 → 70점대
   • Vite manualChunks 로 React 코어를 vendor 청크로 분리하고 Akamai CDN 캐시 정책을 고쳐 정적 리소스 재다운로드 최소화
   • 15개 언어 JSON 을 언어 · 페이지 단위로 동적 로딩해 초기 번들 약 100KB 감소
   • SearchParams 상태 관리로 검색 조건을 URL 에 유지하고, Skeleton UI · 이미지 지연 로딩 · 찜 낙관적 업데이트 적용

2. 디자인 시스템 · 테스트 · 배포 자동화

   • 디자이너와 디자인 토큰 기반 디자인 시스템을 만들고 Tailwind CSS 로 전환
   • Styled-Components 를 Emotion 으로 옮겨 SSR 환경의 스타일 깜빡임(FOUC) 대응
   • Vitest 로 주요 유틸 테스트, Playwright 로 주요 사용자 시나리오 E2E 환경 구축
   • Bitbucket Pipelines CI/CD 구축, SSH 키 인증 · rsync 증분 배포 · Akamai Fast Purge 캐시 무효화 · 배포 결과 알림 봇 연동
   • Claude Code 중심 개발 과정(화면 이미지로 첫 UI, Hooks 로 테스트 자동 생성, Artifact 로 계획 · 진행 관리)으로 개발 시간 50% 이상 단축

3. Keycloak 인증 시스템 (Web · Admin)

   • Keycloakify 로 로그인 · 회원가입 · 비밀번호 찾기 등 인증 화면 7종을 React 로 커스터마이징
   • Web · Admin 인증 화면을 한 테마로 묶고 i18next · 구글 시트 번역으로 15개 언어 지원
   • 가입 뒤 Buyer · Seller 전환 페이지를 만들어 인증과 서비스 가입 흐름을 연결
   • Axios 인터셉터와 updateToken() 으로 액세스 토큰 자동 갱신과 공통 API 인증 처리

4. Admin 채팅 시스템

   • stomp.js WebSocket 으로 실시간 메시지 송수신과 채팅 목록 동기화, 수신 때 TanStack Query refetch 로 목록 갱신
   • JSP 리스트 옆 iframe 채팅으로 시작해 React 통합 페이지로 옮기고, 리스트 · 채팅 너비를 끌어서 조절
   • 이미지 붙여넣기 · 드래그 업로드, 이미지가 다 뜬 뒤에도 채팅 하단 고정
   • visibilitychange 와 디바운스로 새 메시지가 오면 브라우저 탭 제목으로 알림
   • AVIF 이미지가 일부 Windows PC 에서 깨진 jpg 로 받아지던 문제를 Canvas 변환으로 해결
   • react-markdown 기본 스타일 때문에 어긋나던 채팅 UI · 아랍어 정렬을 필요한 스타일만 재정의해 정리

5. 영상 플레이어 화질 선택

   • Hls.js 플레이어에 360p · 480p · 720p 직접 선택 기능 추가
   • AUTO 는 측정한 대역폭과 화질별 요구 대역폭을 비교해 고르도록 구성

React · TypeScript · TanStack Query · Zustand · Tailwind CSS · Emotion · Keycloak · stomp.js · Vitest · Playwright · Vite · JSP

해상 운송 견적 · 부킹 · 선적 일정을 다루는 물류 서비스입니다.

1. 빌드 · SEO · 성능 개선

   • Webpack 5 를 Vite 로 옮겨 개발 서버 구동 39초 → 148ms
   • Claude Code 로 50개 넘는 파일의 환경 변수 참조 177곳을 process.env 에서 import.meta.env 로 일괄 전환
   • 페이지 단위 지연 로딩 · 코드 분할로 메인 번들 약 77% 감소, Lighthouse 성능 34점 → 70점 이상
   • Styled-Components 를 Tailwind CSS 로 옮겨 런타임 스타일 생성 비용 제거
   • WebP 이미지, 영상 화질 조정 · CDN, Hero 리소스 preload · fetchPriority 로 LCP 개선
   • 메타 태그 중복을 막는 SeoHelmet 을 만들고 범용으로 다듬어 react-head-safe 로 npm 공개
   • canonical 과 사이트맵 인덱스(main · oceanfreight · shipping-schedule · blog · review) 구축
   • 번역 JSON 을 네임스페이스로 나눠 동적 로딩, 미사용 의존성 30개(레거시 18 · depcheck 12)와 안 쓰는 번역 키 정리

2. 전역 상태 Redux Toolkit → Zustand

   • Redux Toolkit 보일러플레이트를 걷어 내고 상태를 담는 규칙(값 3개 이상은 객체)을 정함
   • 스토어별 persist 로 필요한 상태만 localStorage 에 저장
   • Redux Toolkit · react-redux · redux-persist 를 제거하고 코드 2,169줄 → 1,179줄(약 45% 단축)

3. 국가 데이터 DB 이관 · 전용 API

   • 프론트엔드 상수 파일(2,230줄)에 있던 전화 국가번호를 DB 로 옮기고 국가 전용 API 신설
   • 전체 코드를 돌려주던 기존 API 대신 써서 응답 크기 229KB → 12.6KB, 상수 파일 제거로 번들 11.3KB 추가 감소
   • TanStack Query select 로 데이터를 바꿔 주어 기존 24개 파일의 로직은 그대로 유지

4. 배포 이관 (Jenkins → Bitbucket Pipelines)

   • 기존 Jenkins 배포 파이프라인을 Bitbucket Pipelines 로 옮겨 Autowini 와 배포 방식을 표준화
   • Pipelines Schedules 로 사이트맵을 하루 한 번 자동으로 만들어 배포

5. PWA

   • 네이티브 앱 없이 데스크톱 · 모바일 홈 화면에 설치
   • Service Worker 로 오프라인에서도 데이터 확인

React · TypeScript · Vite · TanStack Query · Zustand · Tailwind CSS · Styled-Components · React-Quill · React-pdf · i18next