Ch.2 JavaScript 라이브러리 15선

Sharp — 이미지 초고속 일괄 처리

article

핵심 내용

Sharp는 이미지를 초고속으로 변환하는 Node.js 라이브러리입니다

한 줄 요약: 이미지 리사이즈, 포맷 변환(WebP), 워터마크 삽입을 초고속으로 처리. 1장당 약 50ms. 실생활 비유: 사진관의 '자동 인화기'라고 생각하세요. 사진 100장을 넣으면 크기 조절, 보정, 포맷 변환을 한꺼번에 처리해서 깔끔하게 정리된 사진으로 내보내줍니다.

이미지 100장을 포토샵으로 하나씩 열 건가요?

Python Pillow: 범용 이미지 처리. 필터, 그리기 등 기능 다양하지만 속도가 느림. 대량 처리 시 수 분 소요.

Node.js Sharp: libvips 기반 초고속 엔진. 리사이즈 + 포맷 변환 특화. 1000장 WebP 변환에 수 초. 메모리도 적게 사용.

npm 한 줄이면 설치 끝

npm init -y
npm install sharp
const sharp = require('sharp');

sharp('input.jpg')
  .resize(800, 600)
  .webp({ quality: 80 })
  .toFile('output.webp')
  .then(() => console.log('변환 완료!'))
  .catch(err => console.error('에러:', err));

실행 결과: `node convert.js` 실행하면 input.jpg가 800x600 크기의 WebP 파일로 변환됩니다. 원본 2MB → 변환 후 약 150KB. 용량이 90% 이상 줄어드는 마법!

AI에게 이렇게 요청하세요

좋은 프롬프트 예시 "Sharp로 폴더의 모든 jpg/png 파일을 1200px 리사이즈하고, WebP 품질 85%로 변환해서 output/ 폴더에 저장하는 스크립트 만들어줘. 원본 파일명은 유지해줘."

프롬프트 변형 • "이미지 하단에 반투명 워터마크 로고를 합성해줘" • "가로 이미지는 1200px, 세로 이미지는 800px로 다르게 리사이즈해줘" • "변환 전후 용량 비교를 콘솔에 표시해줘"

// AI가 생성해줄 핵심 코드 구조
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const inputDir = './images';
const outputDir = './output';

if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);

const files = fs.readdirSync(inputDir)
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f));

for (const file of files) {
  const name = path.parse(file).name;
  await sharp(path.join(inputDir, file))
    .resize(1200, null, { withoutEnlargement: true })
    .webp({ quality: 85 })
    .toFile(path.join(outputDir, `${name}.webp`));
}

쇼핑몰 상품 이미지 일괄 최적화

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const INPUT = './product-images';
const OUTPUT = './optimized';

if (!fs.existsSync(OUTPUT)) fs.mkdirSync(OUTPUT, { recursive: true });

async function optimizeImages() {
  const files = fs.readdirSync(INPUT)
    .filter(f => /\.(jpg|jpeg|png)$/i.test(f));

  console.log(`총 ${files.length}개 이미지 처리 시작...`);

  for (const file of files) {
    const inputPath = path.join(INPUT, file);
    const name = path.parse(file).name;

    // 메인 이미지 (1200px)
    await sharp(inputPath)
      .resize(1200, null, { withoutEnlargement: true })
      .webp({ quality: 85 })
      .toFile(path.join(OUTPUT, `${name}.webp`));

    // 썸네일 (300px)
    await sharp(inputPath)
      .resize(300, 300, { fit: 'cover' })
      .webp({ quality: 75 })
      .toFile(path.join(OUTPUT, `${name}-thumb.webp`));

    const original = fs.statSync(inputPath).size;
    const optimized = fs.statSync(
      path.join(OUTPUT, `${name}.webp`)
    ).size;
    const saved = ((1 - optimized / original) * 100).toFixed(1);
    console.log(`${file}: ${saved}% 절약`);
  }

  console.log('모든 이미지 최적화 완료!');
}

optimizeImages();

실행 방법: `product-images/` 폴더에 상품 사진을 넣고 `node optimize.js` 실행. `optimized/` 폴더에 메인 이미지(1200px)와 썸네일(300x300)이 WebP로 생성됩니다. 콘솔에서 파일별 용량 절약률도 확인할 수 있어요!

key

핵심 용어

리사이즈

가로/세로 픽셀 지정, 비율 유지, 크롭 등 다양한 리사이즈

포맷 변환

JPG → WebP, PNG → AVIF 등 최신 포맷으로 자동 변환

워터마크

로고나 텍스트를 이미지 위에 합성 (composite)

일괄 처리

폴더 안의 수백 장을 한 번에 처리 — 반복 노동 제로

쇼핑몰 운영

상품 이미지 수백 장을 일괄 리사이즈 + WebP 변환

블로그/SNS

업로드 전 이미지 용량 최적화로 로딩 속도 개선

썸네일 생성

원본 이미지에서 다양한 크기의 썸네일 자동 생성

check_circle

핵심 정리

  • 1Sharp는 Node.js 이미지 처리 라이브러리 — libvips 기반으로 1장당 약 50ms 초고속
  • 2sharp().resize().webp().toFile() 체이닝으로 리사이즈 + 포맷 변환을 한 줄에
  • 3Pillow 대비 5~10배 빠르고 메모리 효율적 — 대량 이미지 일괄 처리에 최적
  • 4AI 프롬프트에 '입력 폴더 + 출력 크기 + 포맷 + 품질'을 명시하면 정확한 일괄 처리 스크립트 생성

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작