Back to Selected Work

자생한방병원 운영 및 레거시 성능 개선

Performance Optimization · 운영 개선

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

자생한방병원 썸네일

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 지표와 브라우저 지표를 같이 보면서 애플리케이션과 프론트 리소스의 영향을 구분할 수 있었습니다.