엄성준 | 프론트엔드 개발자

소개

오토위니에서 프론트엔드 개발을 시작해 신규 기능 개발부터 유지보수까지 폭넓은 업무를 수행했습니다. 그중 레거시 JSP 프로젝트를 React로 마이그레이션하며 구조를 개선했던 경험이 가장 기억에 남습니다.

사용자와 개발자 모두에게 효율적인 구조를 고민하며, URL의 SearchParams를 활용한 상태 관리, JSP와 React 혼용 환경에서의 SmartLink 공통 컴포넌트 설계, 도메인 중심 폴더 구조 재설계 등 지속 가능한 개발 환경을 위한 작업에 집중해왔습니다.

입사 전부터 현재까지 1일 1커밋을 실천하고 있으며, 개발하며 해결한 점과 잊고 싶지 않은 점들을 블로그에 기록하며 복습합니다. 이에 더해 주 5일 웨이트 트레이닝으로 업무에 필요한 체력을 관리합니다.

경력

총 2년 8개월

오토위니

정규직

2023.07 ~ 재직중

Autowini - 웹/모바일 레거시(JSP) 페이지 React 마이그레이션 및 프로젝트 통합

2024.08 ~ 2026.02

기존 JSP 기반 서비스를 React SPA 구조로 점진적 마이그레이션하여 기술 스택을 단일화하고, 불필요한 리소스 제거 및 라우팅 최적화를 통해 시스템 유지보수성과 로딩 속도 개선

레거시 시스템 점진적 마이그레이션 및 구조 개선

초기 개발 속도 확보를 위해 JSP 내 중간 영역만 React로 삽입하는 방식을 우선 채택하고, 이후 전체 레이아웃까지 React로 전환
JSP(MPA)와 React(SPA) 혼용 환경 대응을 위한 <SmartLink /> 공통 컴포넌트 개발
개별 React 프로젝트들을 단일 레포지토리로 통합하고 도메인 기반 디렉토리 설계를 도입하여 중복 코드 약 20% 제거

리소스 효율화 및 페이지 성능 최적화

필터 검색 페이지 마이그레이션 및 불필요한 리소스 로드 제거를 통해 로딩 시간 45초 → 20초로 약 55% 단축
매물 좋아요 기능에 Optimistic Update 적용으로 서버 응답 대기 없이 즉시 UI 반영
15개국 JSON 파일 일괄 로딩 → 선택한 언어만 동적 로딩으로 개선하여 번들 크기 약 100KB 감소
React.lazy, Suspense, Skeleton UI 적용으로 Lighthouse 성능/접근성 점수 평균 10점대 → 70점대로 개선

디자인 시스템 구축 및 사용자 편의성 최적화

Root CSS에 디자인 토큰을 정의하고 CSS 변수(var)를 활용해 인터페이스 확장성 확보
영어 전용 입력 제한 로직이 포함된 Headless Input 컴포넌트 설계로 재사용성 확보
SearchParams 기반 상태 관리 기법 도입으로 새로고침/URL 공유 시에도 검색 조건 유지

기술 스택 단일화 및 코드 신뢰성 확보

Vanilla JS, Vue.js, JSTL 문법을 TypeScript 기반 React로 통합 마이그레이션하여 기술 부채 해결
Vitest를 도입하여 주요 Util 함수에 대한 테스트 코드 작성으로 코드 신뢰성 확보

React TypeScript TanStack Query Zustand Emotion Tailwind CSS Vite Vitest i18next

Autowini - Bitbucket Pipelines 기반 CI/CD 파이프라인 구축 및 배포 자동화

2025.11 ~ 2025.12

JSP 레거시와 React 프로젝트가 공존하는 환경에서 다수의 프론트엔드 레포지토리를 효율적으로 관리하기 위한 통합 빌드 및 배포 체계 구축

CI/CD 환경 구축 및 네트워크 보안 강화

Bitbucket Pipelines 기반 자동화 파이프라인을 설계하여 프로젝트별 일관된 빌드 및 배포 프로세스 수립
Atlassian 고정 대역폭 IP 설정 및 IDC 방화벽 Inbound IP 허용 정책 적용으로 안전한 배포 경로 확보
SCP 비밀번호 인증 방식을 SSH Key 기반 인증 체계로 전환하여 보안성 강화

배포 최적화 및 운영 효율성 향상

Akamai Fast Purge API 자동 호출로 CDN 캐시 갱신 자동화, 배포 후 즉시 반영
Repository Variables를 활용하여 환경별 민감 정보 분리 관리
Naver Works Bot 연동으로 배포 성공/실패 결과 자동 알림

Bitbucket Pipelines SCP YAML SSH Key Akamai Fast Purge API

WiniLogis - Web 빌드 시스템 마이그레이션 및 SEO/성능 최적화

2025.08 ~ 2026.02

Vite 마이그레이션을 통해 레거시 빌드 환경의 병목을 제거하여 개발 생산성을 향상시키고, 번들 최적화 및 메타 태그 동적 제어 시스템 구축을 통해 서비스 품질과 SEO 지표를 개선

Vite 마이그레이션 및 개발 환경 최적화

Webpack 5 → Vite로 빌드 시스템 전환하여 개발 서버 구동 시간 39초 → 148ms로 약 260배 단축
Claude Code를 활용해 50개 이상의 파일 내 177개 환경 변수 참조 방식을 안정적으로 이관, 미사용 레거시 의존성 18개 제거
Jenkins 파이프라인 최적화로 전체 배포 시간 3분 30초 → 1분 30초로 약 57% 단축

프론트엔드 번들 및 리소스 최적화

전체 리소스 일괄 로딩 → 페이지 단위 Lazy Loading으로 개선하여 메인 번들 크기 약 77% 축소
WebP 포맷 적용 및 img loading="lazy" 속성 적용, 히어로 배너 영상 약 30% 경량화
depcheck를 활용한 미사용 의존성 12개 제거 및 미사용 i18n 리소스 탐지로 빌드 사이즈 최적화

SEO 고도화 및 i18n 다국어 로딩 개선

<SeoHelmet /> 공통 컴포넌트 개발로 메타 태그 중복 선언 문제 해결
범용적으로 사용할 수 있도록 react-head-safe 오픈소스 라이브러리 배포
canonical 태그, sitemap.xml 추가 및 Jenkins 배포 시 Sitemap 자동 생성 스크립트 구축
다국어 JSON을 Namespace 단위 분리 + HttpBackend 동적 로딩으로 리소스 낭비 방지

React TypeScript Styled-Components Webpack 5 Jenkins i18next Vite

Autowini - Admin Outbound List(App) 채팅 시스템 개발

2025.06 ~ 2025.08

비즈니스 요구사항에 맞춘 단계적 개발 전략을 수립하여 관리자 운영 효율을 개선하고, WebSocket 및 TanStack Query를 활용한 고도화된 실시간 통신 환경 구축

단계적 개발 전략을 통한 빠른 서비스 출시 및 구조 고도화

초기: Shadow-root 기반 iframe 채팅창을 우선 삽입하여 핵심 기능 신속 출시
고도화: React 통합 페이지로 전환, TanStack Query Refetch 전략(10초 주기) 도입으로 데이터 정합성 확보
중앙 리사이즈 스크롤바 기능 구현으로 좌측 리스트/우측 채팅 영역 너비 자유 조절

사용자 경험(UX) 및 미디어 핸들링 최적화

이미지 로딩 완료(onLoad) 시점 파악으로 최하단 스크롤 자동 이동 로직 구현
onPaste 및 드래그 앤 드롭으로 채팅창 내 이미지 즉시 업로드 기능 개발
AVIF 포맷 손상 문제를 Canvas 변환 로직으로 정상 JPG 변환 해결
아랍어 정렬 이슈 해결을 위해 react-markdown 전용 스타일 재정의

브라우저 인터랙션 및 리소스 최적화

브라우저 비활성 상태에서 메시지 수신 시 탭 제목 알림(깜빡임) 및 자동 복구 로직 구현
알림 로직에 Debounce를 적용하여 10초에 한 번만 실행되도록 최적화

React TypeScript TanStack Query stomp.js WebSocket Emotion Vite

기술 스택

HTML5

CSS3

JavaScript

TypeScript

React

Next.js

GitHub

Git

학력

학점은행제

컴퓨터공학과

2023.08 ~ 2024.08 · 졸업

장안대학교

인터넷정보통신과 (3년제)

2018.03 ~ 2023.02 · 졸업

수상 / 자격증 / 기타

🏆

2025 오픈소스 컨트리뷰션 아카데미

[체험형-2차] 멘티 · 2025.09

MDN Web Docs 문서 한글화 기여

📜

정보처리 산업기사

한국산업인력공단 · 2024.09

⭐

Autowini 우수사원 상

2023.12

🎓

제로베이스 프론트엔드 스쿨 10기 수료

우수 수강생 · 2023.06

🏅

장안대학교 캡스톤 디자인 대상

1:1 멘토링 서비스 플랫폼 "Mentworing" · 2022.11

📜

네트워크관리사 2급

한국정보통신자격협회 · 2021.07

꾸준함을 강점으로 삼는프론트엔드 개발자 엄성준입니다.

소개

경력