Ch.2 JavaScript 라이브러리 15선
Sharp — 이미지 초고속 일괄 처리
핵심 내용
Sharp는 이미지를 초고속으로 변환하는 Node.js 라이브러리입니다
한 줄 요약: 이미지 리사이즈, 포맷 변환(WebP), 워터마크 삽입을 초고속으로 처리. 1장당 약 50ms. 실생활 비유: 사진관의 '자동 인화기'라고 생각하세요. 사진 100장을 넣으면 크기 조절, 보정, 포맷 변환을 한꺼번에 처리해서 깔끔하게 정리된 사진으로 내보내줍니다.
이미지 100장을 포토샵으로 하나씩 열 건가요?
Python Pillow: 범용 이미지 처리. 필터, 그리기 등 기능 다양하지만 속도가 느림. 대량 처리 시 수 분 소요.
Node.js Sharp: libvips 기반 초고속 엔진. 리사이즈 + 포맷 변환 특화. 1000장 WebP 변환에 수 초. 메모리도 적게 사용.
npm 한 줄이면 설치 끝
npm init -y
npm install sharpconst 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로 생성됩니다. 콘솔에서 파일별 용량 절약률도 확인할 수 있어요!
핵심 용어
리사이즈
가로/세로 픽셀 지정, 비율 유지, 크롭 등 다양한 리사이즈
포맷 변환
JPG → WebP, PNG → AVIF 등 최신 포맷으로 자동 변환
워터마크
로고나 텍스트를 이미지 위에 합성 (composite)
일괄 처리
폴더 안의 수백 장을 한 번에 처리 — 반복 노동 제로
쇼핑몰 운영
상품 이미지 수백 장을 일괄 리사이즈 + WebP 변환
블로그/SNS
업로드 전 이미지 용량 최적화로 로딩 속도 개선
썸네일 생성
원본 이미지에서 다양한 크기의 썸네일 자동 생성
핵심 정리
- 1Sharp는 Node.js 이미지 처리 라이브러리 — libvips 기반으로 1장당 약 50ms 초고속
- 2sharp().resize().webp().toFile() 체이닝으로 리사이즈 + 포맷 변환을 한 줄에
- 3Pillow 대비 5~10배 빠르고 메모리 효율적 — 대량 이미지 일괄 처리에 최적
- 4AI 프롬프트에 '입력 폴더 + 출력 크기 + 포맷 + 품질'을 명시하면 정확한 일괄 처리 스크립트 생성
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작