본문 바로가기

프로젝트

사내 프로젝트 2개 · 개인 프로젝트 8개 · 오픈소스 2개

회사에서 맡은 서비스와 직접 만든 것을 모았습니다.

사내 프로젝트

Autowini · 프론트엔드 개발 · 2023.07 ~ 재직 중

  • 사내진행 중2023.07 ~

    Autowini Web · Mobile · Admin

    사이트모바일

    프론트엔드 개발

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

    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 는 측정한 대역폭과 화질별 요구 대역폭을 비교해 고르도록 구성

    6. 클레임 접수 시스템 (Web · Mobile · App)

      • 웹 · 모바일 · 앱 웹뷰에서 함께 쓰는 채팅 UI 기반 클레임 접수 화면
      • 구글 시트 번역을 JSON 으로 받아 오는 스크립트를 만들어 7개 언어 지원
      • TanStack Query useMutation 으로 처리 단계별 성공 · 실패 로직 분리

    7. 카히스토리 · 수리 이력

      • 웹 · 모바일 카히스토리 조회 페이지 개발(JSP)
      • 차량 도막 정보 · 수리 이력 등록 · 수정 화면과 조회 템플릿 개발

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

  • 사내진행 중2023.07 ~

    WiniLogis Web · Mobile

    사이트

    단독 풀스택 개발

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

    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 로 오프라인에서도 데이터 확인

    6. Shipping Blog · Buyer Review

      • 블로그 목록 · 상세(무한 스크롤 · 모바일 스와이프) 개발과 반응형 리뉴얼
      • Admin 글 작성 · 수정 · 공개 설정, React-Quill 에디터와 이미지 순서 드래그
      • 관리자가 쓴 HTML 을 DOMPurify 로 정제해 렌더링
      • Buyer Review 게시판과 리뷰 영상 팝업 재생

    7. 운임 조회 · 비회원 부킹 · 견적 메일

      • 로그인하면 회원 정보를 자동 입력하고, 비회원은 기존 회원인지 확인해 자동으로 부킹
      • 도착 국가별 운임 조회와 티켓 모양의 운임 카드 UI
      • Admin 에서 부킹 정보로 견적(Quotation) 메일을 여러 명에게 발송

    8. 유로화 · 인보이스

      • 인보이스 PDF 다운로드(Web), Admin 인보이스 생성 · 수정과 PDF · Excel 내보내기
      • EUR 환율을 24시간 저장해 두고 최소 호출로 유로 환산, 유로 기준 인보이스 발행

    9. 부킹 리퀘스트 · 관리자 화면

      • 반응형 부킹 리퀘스트 화면과 요청 · 상담 채팅 기능
      • Admin 부킹 단계 · 요청 기록 · 상담 · 이메일 기록 관리 화면과 회원 관리 CRUD
      • How It Works 5단계 안내 페이지, 메인 리뉴얼, Admin 디자인을 Tailwind CSS 로 리뉴얼
      • 헤더 · 모바일 사이드바를 리팩터링해 잘림 문제를 고치고 코드 1,249줄 감축

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