Node.js로 이미지 자동 리사이징하기: sharp와 fs-extra 활용

안녕하세요! 오늘은 Node.js를 사용해서 이미지를 자동으로 리사이징하는 방법에 대해 이야기해볼게요. 이 프로젝트는 sharp라는 강력한 이미지 처리 라이브러리와 fs-extra를 활용하여, 원본 이미지를 다양한 크기로 변환하고 저장하는 작업을 자동화합니다. 제가 만든 소스 코드를 기반으로, 어떻게 동작하는지 살펴보고 실행 방법까지 함께 알아보겠습니다.

1. 왜 이런 도구가 필요할까?

웹 개발이나 앱 개발을 하다 보면 아이콘 또는 이미지를 다양한 크기로 제공해야 할 때가 많습니다. 예를 들어, 웹사이트의 파비콘(favicon)이나 모바일 앱 아이콘은 여러 해상도에서 잘 보여야 하죠. 이를 수동으로 하나씩 만들면 시간도 많이 걸리고 실수할 가능성도 커집니다. 그래서 저는 Node.js 스크립트를 작성해서 이 과정을 자동화해봤어요!

2. 사용된 라이브러리

이 프로젝트에서는 두 가지 주요 라이브러리를 사용했습니다:

sharp: 고성능 이미지 처리 라이브러리로, 이미지를 리사이즈하거나 포맷을 변경하는 등의 작업을 쉽게 할 수 있어요.
fs-extra: Node.js의 기본 fs 모듈을 확장한 라이브러리로, 디렉토리 생성이나 파일 복사 같은 작업을 더 간편하게 처리할 수 있습니다.

3. 소스 코드

아래는 제가 작성한 소스 코드입니다. 코드는 간단하면서도 효율적으로 작동하죠.

import sharp from 'sharp';
import fs from 'fs-extra';
import path from 'path';
import { fileURLToPath } from 'url';

// ES 모듈에서 __dirname 얻기
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

async function resizeIcon() {
  const sourceIcon = 'icon/icon.png'; // 원본 이미지 경로
  const outputDir = 'public/icon';   // 출력 디렉토리 경로

  // 출력 디렉토리가 없으면 생성
  await fs.ensureDir(outputDir);

  // 리사이즈할 크기와 출력 파일명 정의
  const sizes = [
    { size: 16, filename: 'icon16.png' },
    { size: 32, filename: 'icon32.png' },
    { size: 48, filename: 'icon48.png' },
    { size: 128, filename: 'icon128.png' }
  ];

  // 각 크기별로 이미지 리사이즈 및 저장
  for (const { size, filename } of sizes) {
    await sharp(sourceIcon)
      .resize(size, size)
      .toFile(path.join(outputDir, filename));

    console.log(`Created ${filename} (${size}x${size})`);
  }

  console.log('All icons have been created successfully!');
}

// async 함수 실행
resizeIcon().catch(err => {
  console.error('Error resizing icons:', err);
});

4. 코드 작동 원리

4.1. 디렉토리 설정

sourceIcon: 원본 이미지 파일 경로입니다. 여기서는 icon/icon.png를 사용했어요.
outputDir: 리사이징된 이미지를 저장할 디렉토리입니다. 만약 디렉토리가 없다면 fs.ensureDir를 통해 자동으로 생성됩니다.

4.2. 이미지 크기 정의

sizes 배열에는 리사이징할 이미지의 크기와 출력 파일명이 정의되어 있습니다. 예를 들어, { size: 16, filename: 'icon16.png' }는 16x16 크기의 이미지를 생성하고 파일명을 icon16.png로 저장한다는 의미입니다.

4.3. 이미지 리사이징

sharp 라이브러리를 사용해 이미지를 리사이징하고, .toFile() 메서드로 지정된 경로에 저장합니다. 각 크기별로 반복문을 돌면서 이미지를 순차적으로 처리합니다.

4.4. 에러 처리

resizeIcon 함수는 async/await 구조로 작성되었으며, 에러 발생 시 catch 블록에서 오류 메시지를 출력합니다.

5. 실행 방법

5.1. 필요한 패키지 설치

프로젝트를 실행하기 전에 필요한 패키지를 설치해야 합니다. 아래 명령어를 터미널에서 실행하세요:

npm install sharp fs-extra

5.2. 폴더 구조 준비

아래와 같은 폴더 구조를 만들어주세요:

project-root/
├── icon/
│   └── icon.png  # 원본 이미지
├── public/
│   └── icon/     # 리사이징된 이미지가 저장될 폴더
└── index.js      # 위의 소스 코드 파일

5.3. 스크립트 실행

터미널에서 다음 명령어를 실행하세요:

node index.js

실행 후, 아래와 같은 메시지가 출력됩니다:

Created icon16.png (16x16)
Created icon32.png (32x32)
Created icon48.png (48x48)
Created icon128.png (128x128)
All icons have been created successfully!

public/icon 폴더를 확인하면, 각 크기별로 리사이징된 이미지가 생성된 것을 볼 수 있어요.

6. 활용 예시

이 스크립트는 다음과 같은 경우에 유용하게 사용할 수 있습니다:

웹사이트 파비콘 생성: 다양한 크기의 파비콘을 한 번에 생성.
모바일 앱 아이콘 생성: iOS와 Android에서 요구하는 다양한 해상도의 아이콘을 자동으로 준비.
배치 작업: 대량의 이미지를 일괄 처리해야 할 때 유용.

7. 마무리

이번 포스트에서는 Node.js와 sharp, fs-extra를 활용해 이미지를 자동으로 리사이징하는 방법을 소개했습니다. 이 스크립트는 간단하지만 매우 강력하며, 개발자의 반복 작업을 크게 줄여줍니다. 프로젝트에 맞게 수정해서 사용해보세요! 혹시 궁금한 점이나 피드백이 있다면 댓글로 남겨주세요. 😊