자생한방병원 레거시 성능 최적화
레거시 시스템의 구조적 병목을 APM 데이터 기반으로 진단하고, 프론트·백엔드·인프라 전 영역에서 성능을 개선한 최적화 프로젝트입니다.
Overview
APM(Pinpoint)과 Google Lighthouse 분석을 통해 전체 응답 시간 5,223ms의 병목 원인을 4가지 핵심 지점으로 진단하고 해소했습니다. 실시간 이미지 최적화 엔진을 직접 개발해 원본 대비 최대 94% 용량을 절감했으며, JS/CSS Minify 파이프라인 자동화, IntersectionObserver 기반 Lazy Render 전환으로 TTFB 및 LCP를 유의미하게 개선했습니다.
Key Tasks
- APM(Pinpoint) 분석으로 외부 YouTube 썸네일 확인 요청 1,200ms(23%) 지연 원인 파악 및 개선
- 페이지당 36회 발생하던 DB getConnection 오버헤드 및 반복적인 구성 정보 조회 구조 개선
- 메인 리뷰·게시판 쿼리의 동기적 실행 구조를 IntersectionObserver 기반 비동기 Lazy Render로 전환
- 실시간 이미지 최적화 엔진(Optimizer Controller) 개발 - WebP/WebM 변환 및 브레이크포인트별 리사이징
- double-checked locking 적용으로 서버 내 중복 변환 방지 및 ETag 기반 브라우저 캐시 효율 극대화
- 원본 250KB 이미지를 15.1KB로 압축 서빙 (압축률 약 94% 달성)
- Node.js 기반 JS/CSS Minify 파이프라인을 Maven/Tomcat 빌드 프로세스에 통합 자동화
- 메인/서브 CSS 분리 로드, 웹 폰트 preload 및 font-display: swap 적용으로 렌더링 차단 해소
- 다중 외부 CDN 의존성 제거 후 로컬 서버 서빙 방식으로 전환, 네트워크 신뢰성 확보
- 평균 TTFB 1,948ms → 구조 개선을 통한 서버 응답 속도 단축
Outcomes
- 이미지 용량 최대 94% 절감으로 클라이언트 트래픽 80% 이상 감소
- 외부 API 블로킹 및 DB 커넥션 과부하를 비동기 로딩으로 분산하여 서버 응답 성능 개선
- 렌더링 차단 리소스 제거로 사용자 체감 속도(LCP) 획기적 향상