Node + sharp로 만드는 이미지 최적화 파이프라인

개요

웹 성능 최적화에서 이미지는 가장 큰 영향을 준다. 페이지 로드 속도를 개선하려면 원본 이미지를 그대로 배포하지 않고 크기, 포맷, 압축을 상황에 맞게 조정해야 한다. 이 글에서는 Node와 sharp를 중심으로 한 이미지 최적화 파이프라인을 단계별로 설명한다. 초보자도 이해할 수 있도록 흐름과 코드 예제를 함께 제공한다.

왜 이미지 최적화가 필요한가

이미지 파일이 크면 네트워크 비용과 로드 시간이 늘어난다. 반응형 디자인에선 여러 해상도와 장치별 이미지를 제공해야 한다. CDN을 활용하면 전송 속도가 개선되지만, 적절한 크기와 포맷으로 미리 최적화하지 않으면 이점이 제한된다. 따라서 자동화된 이미지 리사이즈와 캐싱이 필수다.

파이프라인 구성 요소

1) 입력 소스

원본 이미지는 사용자가 업로드하거나 외부 저장소(S3, GCS 등)에 위치한다. 가능하면 원본은 무손실이나 고품질로 보관한다.

2) 처리 레이어 (Node + sharp)

Node에서 sharp 라이브러리를 사용해 리사이즈, 포맷 변환(예: WebP, AVIF), 품질 조절 등을 수행한다. sharp는 빠르고 메모리 효율적이라 서버 사이드 이미지 처리에 적합하다.

3) 캐시 레이어

처리 결과는 디스크나 오브젝트 스토리지에 캐시한다. 요청마다 재연산을 피하려면 키(원본 경로 + 파라미터)를 기반으로 파일을 저장한다.

4) CDN 배포

CDN은 최종 사용자에게 이미지 파일을 빠르게 전달한다. 캐시 만료 정책, 원본 페칭 설정, 헤더 최적화가 중요하다.

설계 원칙

• 요청 시점에 가능한 한 적은 연산으로 응답하도록 캐시 우선 전략 채택
• 해상도와 포맷을 명확한 규칙으로 정해 일관성 유지
• 압축 품질은 시각 차이를 고려해 균형 있게 설정
• 보안과 권한 검증은 업로드 단계와 처리 단계 모두에서 수행

구현 흐름

아래 예제는 Express 기반 소형 서비스로, 쿼리 파라미터로 크기와 포맷을 받아 이미지를 처리하고 로컬 캐시에 저장한 뒤 응답한다. 실제 운영 환경에선 캐시를 S3로 변경하고 CDN으로 서빙한다.

필요 모듈 설치

npm install express sharp node-fetch mkdirp

간단한 서버 구현 예

const express = require('express');
const fetch = require('node-fetch');
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
const mkdirp = require('mkdirp');

const app = express();
const CACHE_DIR = path.join(__dirname, 'cache');
mkdirp.sync(CACHE_DIR);

// 안전한 파라미터 파싱
function sanitizeInt(v, fallback) {
  const n = parseInt(v, 10);
  if (isNaN(n) || n