자생한방병원 운영 및 레거시 성능 개선
서버와 브라우저 구간을 나눠 병목을 찾고, 정적 리소스 최적화와 캐싱, 빌드 자동화까지 연결한 성능 개선 작업입니다.

Overview
운영 중인 레거시 웹 서비스의 느린 구간을 Pinpoint APM과 Lighthouse로 나눠 확인했습니다. 이미지와 JavaScript·CSS를 경량화하고 캐싱을 보완했으며, 개발자가 매번 반복하던 최적화 작업은 Node.js 모듈로 만들었습니다. 이 모듈을 Docker 빌드 과정에 넣어 배포 시 자동으로 실행되도록 구성했습니다. 그 결과 이미지 용량은 최대 94%, 클라이언트 트래픽은 80% 이상 줄었습니다.
Background
기존 서비스는 이미지와 정적 리소스가 무거웠고 페이지 로딩 과정에서 불필요한 네트워크 비용이 발생하고 있었습니다. 단순히 파일 몇 개를 줄이는 방식으로는 같은 문제가 반복될 수 있어 원인 분석과 함께 배포 과정 자체를 손볼 필요가 있었습니다.
Tech Stack
frontend
# JavaScript # Lighthouse # Image Optimization
backend
# Java # Spring # Redis
automation
# Node.js # Docker
analysis
# Pinpoint APM # Lighthouse
Key Tasks
- Pinpoint APM으로 서버 요청 구간과 병목 확인
- Lighthouse로 브라우저 리소스 로딩 상태와 성능 지표 확인
- 이미지, JavaScript, CSS 경량화 작업
- Node.js 기반 정적 리소스 최적화 모듈 개발
- Docker 빌드 시 최적화 모듈이 자동 실행되도록 구성
- 기존 Redis 환경에 주요 응답 데이터 캐싱 로직 추가
Outcomes
- 이미지 용량 최대 94% 절감
- 클라이언트 트래픽 80% 이상 감소
- 반복적인 정적 리소스 최적화 작업 자동화
- TTFB와 LCP 등 사용자 체감 성능 개선
Insights
- 성능 문제는 서버와 브라우저를 따로 확인해야 실제 병목을 빠르게 좁힐 수 있었습니다.
- 한 번의 최적화보다 같은 작업이 다시 필요하지 않도록 빌드 과정에 넣는 편이 운영상 효과가 컸습니다.
- APM 지표와 브라우저 지표를 같이 보면서 애플리케이션과 프론트 리소스의 영향을 구분할 수 있었습니다.