[퍼스널 스티커북 사업하다가 node.js에 관심가지기

네. Node.js에서 이미지 편집, 합성, 렌더링, 썸네일링, 텍스트 오버레이, HTML→이미지까지 한 번에 정리하면 아래처럼 보는 게 가장 실무적입니다.

핵심부터 말하면, 보통은 Sharp가 1순위입니다. Sharp는 libvips 기반이라 빠르고 메모리 효율이 좋은 편이고, 리사이즈·크롭·포맷 변환·회전·합성 같은 서버 이미지 처리에 매우 강합니다. 공식 문서에도 합성(composite)과 각종 변형 API가 잘 정리돼 있고, 미리 빌드된 바이너리도 넓게 제공됩니다.

먼저 분류부터

Node.js 쪽 이미지는 대체로 4부류입니다.

고성능 이미지 처리
Sharp
Canvas 스타일 드로잉/합성
node-canvas
@napi-rs/canvas
PureImage
순수 JS 이미지 조작
Jimp
imagejs
외부 렌더러/엔진 활용
Puppeteer
@vercel/og / Satori
ImageMagick/GraphicsMagick 래퍼(gm)
PDF 위에 이미지 그리기(pdf-lib)
1) Sharp

가장 범용적인 선택입니다.
리사이즈, 크롭, 회전, 포맷 변환, 압축, 메타데이터 처리, 알파 포함 합성, 워터마크, 썸네일 서버에 특히 잘 맞습니다. composite()로 여러 이미지를 겹칠 수 있고, 파이프라인 방식으로 처리됩니다. Sharp 설치 문서상 미리 컴파일된 sharp/libvips 바이너리 지원도 꽤 넓습니다.

언제 쓰면 좋냐면:

업로드 이미지 썸네일 생성
배너/포스터 자동 합성
워터마크
이미지 최적화 API
CDN 전처리

예시:

import sharp from 'sharp';

await sharp('background.jpg')
  .resize(1200, 630)
  .composite([
    { input: 'logo.png', top: 40, left: 40 },
    {
      input: Buffer.from(`
        <svg width="1200" height="200">
          <text x="60" y="120"
                font-size="64"
                fill="white"
                font-family="Arial">Hello Node.js</text>
        </svg>
      `),
      top: 380,
      left: 0,
    },
  ])
  .jpeg({ quality: 85 })
  .toFile('output.jpg');

장점:

빠름
메모리 효율 좋음
합성/변환이 매우 강력함

주의:

브라우저 Canvas처럼 자유 드로잉 API는 아님
복잡한 벡터 드로잉/도형/텍스트 레이아웃은 Canvas 계열이 더 편함
2) node-canvas

HTML Canvas 2D API를 Node에서 구현한 쪽입니다. 브라우저에서 Canvas 써봤다면 적응이 쉽습니다. README도 “Web Canvas API를 최대한 가깝게 구현”한다고 설명합니다. 최근 changelog도 계속 갱신되고 있습니다.

언제 좋냐면:

텍스트 배치가 많은 카드 생성
도형, 선, 아이콘, 차트 비슷한 드로잉
브라우저 Canvas 코드 재사용
밈 이미지, 뱃지, 인증서, 티켓 이미지

예시:

import { createCanvas, loadImage } from 'canvas';
import fs from 'node:fs';

const canvas = createCanvas(1200, 630);
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#111';
ctx.fillRect(0, 0, 1200, 630);

const bg = await loadImage('background.jpg');
ctx.drawImage(bg, 0, 0, 1200, 630);

ctx.fillStyle = 'white';
ctx.font = 'bold 64px sans-serif';
ctx.fillText('Hello Canvas', 60, 100);

const logo = await loadImage('logo.png');
ctx.drawImage(logo, 60, 140, 180, 180);

fs.writeFileSync('output.png', canvas.toBuffer('image/png'));

장점:

드로잉 자유도 높음
텍스트, 도형, 레이아웃 유연함

주의:

설치가 Sharp보다 번거로울 수 있음
Cairo/Pango 등 네이티브 의존성 이슈가 종종 거론됩니다. 실제로 최근 jsdom 쪽에서도 @napi-rs/canvas를 대안으로 선호하는 논의가 있습니다.
3) @napi-rs/canvas

Canvas API 쪽인데, 스키아(Skia) 백엔드를 쓰는 대안으로 주목받는 편입니다. npm 설명에는 “Canvas for Node.js with skia backend”라고 되어 있고, 최근에도 배포가 이어졌습니다. jsdom 관련 논의에서도 설치가 쉽고 시스템 의존성이 적다는 이유로 대안으로 언급됩니다.

언제 좋냐면:

canvas 설치 때문에 CI/Docker에서 고생할 때
Canvas API 감성은 유지하고 싶을 때
node-canvas 대체 검토할 때

체감상 포지션:

“Sharp 대체”라기보다 “node-canvas 대체/보완”에 가깝습니다.
사진 변환 파이프라인은 Sharp, 자유 드로잉은 Canvas 계열이 더 자연스럽습니다.
4) Jimp

Jimp는 순수 JavaScript 기반이라 설치가 편합니다. 공식 문서도 “just JavaScript”라고 설명하고, PNG/JPEG/BMP/GIF/TIFF 지원과 리사이즈, 크롭, 필터 등을 안내합니다.

언제 좋냐면:

네이티브 모듈 설치가 어려운 환경
간단한 이미지 조작
학습/프로토타입

예시:

import { Jimp } from 'jimp';

const image = await Jimp.read('input.png');
image
  .resize({ width: 400 })
  .greyscale()
  .write('output.png');

장점:

설치 쉬움
사용법 단순

주의:

대량 처리/성능은 Sharp 쪽이 대체로 더 유리한 편으로 많이 선택됩니다
복잡한 합성/고성능 서버 처리의 주력으로는 요즘 Sharp가 더 흔합니다.
5) PureImage

PureImage는 100% JavaScript로 구현된 Canvas 2D 스타일 라이브러리입니다. 네이티브 의존성이 없고, 리사이즈·텍스트·그레이스케일·PNG/JPEG 저장 등을 지원한다고 README에 나옵니다.

언제 좋냐면:

“Canvas처럼 그리고 싶은데 네이티브 설치는 싫다”
간단한 서버 이미지 생성
교육/샌드박스 환경

단점:

성능과 생태계는 보통 Sharp/node-canvas보다 약한 편으로 봅니다
6) imagejs

imagejs는 순수 JS 이미지 조작 라이브러리로 JPG/PNG 읽기/쓰기와 여러 연산을 제공합니다. README 기준으로 아직 그래픽 객체 쪽은 backlog 언급이 있어, 범용 드로잉 엔진보다는 이미지 조작 라이브러리 쪽에 더 가깝습니다.

언제 고려?

순수 JS가 꼭 필요하고
Jimp 말고 다른 조작 라이브러리도 보고 싶을 때

다만 실무 채택 빈도는 보통 Sharp/Jimp/canvas 쪽이 더 눈에 띕니다.

7) gm (GraphicsMagick / ImageMagick 래퍼)

gm은 Node에서 GraphicsMagick이나 ImageMagick CLI를 감싸는 오래된 선택지입니다. 공식 사이트와 GitHub 모두 외부에 GraphicsMagick/ImageMagick을 먼저 설치하라고 안내합니다.

언제 좋냐면:

이미 시스템에 ImageMagick 파이프라인이 깔려 있고
기존 레거시가 gm 기반일 때
ImageMagick 고급 기능을 그대로 활용해야 할 때

주의:

Node 자체 라이브러리라기보다 “외부 툴 의존”
새 프로젝트면 보통 Sharp부터 검토하는 경우가 많습니다. Sharp는 libvips 기반이고, 별도 CLI 호출이 아닌 라이브러리 파이프라인 형태입니다.
8) Puppeteer

Puppeteer는 본질적으로 브라우저 자동화 도구지만, HTML/CSS로 디자인한 결과를 이미지로 렌더링할 때 아주 강력합니다. 공식 문서에 page.screenshot()이 나와 있습니다.

언제 좋냐면:

HTML/CSS 기반 카드 이미지 생성
실제 브라우저 렌더링 그대로 캡처
복잡한 한글 폰트/줄바꿈/레이아웃
이메일/웹 카드/리포트 미리보기 이미지

예시:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.setViewport({ width: 1200, height: 630 });
await page.setContent(`
  <html>
    <body style="margin:0;background:#111;color:white;
                 width:1200px;height:630px;
                 display:flex;align-items:center;justify-content:center;
                 font-size:64px;">
      Hello from HTML
    </body>
  </html>
`);

await page.screenshot({ path: 'card.png' });
await browser.close();

장점:

웹 디자이너 친화적
CSS 레이아웃 그대로 활용 가능

주의:

가벼운 썸네일 생성에는 과할 수 있음
브라우저 런타임 비용 있음
9) @vercel/og / Satori

이건 “이미지 편집기”보다는 OG 카드 자동 생성 쪽에 특화됩니다. Vercel 문서에 따르면 @vercel/og는 Node.js 런타임에서 동적 소셜 카드 이미지를 만들 수 있고, CSS 레이아웃과 이미지/폰트 로딩을 지원합니다. Satori는 HTML/CSS 비슷한 입력을 SVG로 렌더링합니다. 그리고 예전 og-image 저장소는 새 프로젝트엔 @vercel/og를 쓰라고 안내합니다.

언제 좋냐면:

블로그/문서/뉴스 카드 자동 생성
Open Graph 이미지
텍스트 중심 카드

포지션:

“포토샵 같은 편집”보다 “템플릿 기반 이미지 생성”에 특화
10) pdf-lib

엄밀히는 이미지 편집 라이브러리는 아니지만, PDF 위에 이미지를 그리거나 합성 결과를 PDF에 삽입할 때 유용합니다. 공식 설명에 이미지/텍스트/벡터를 그릴 수 있다고 나옵니다.

언제 좋냐면:

이미지 합성 후 PDF 리포트 만들기
증명서/송장/티켓 PDF 생성
도장/서명/로고 삽입
어떤 걸 고르면 되냐

가장 실전적인 선택은 이렇습니다.

사진/썸네일/워터마크/배치 변환

Sharp

도형/텍스트/스티커/자유 드로잉

node-canvas
설치 스트레스 줄이고 싶으면 @napi-rs/canvas

네이티브 설치 없는 간단 조작

Jimp
PureImage

HTML/CSS로 예쁜 카드 만들기

Puppeteer
OG 카드면 @vercel/og

레거시 ImageMagick 파이프라인

gm
실무 추천 조합

많이 쓰는 조합은 보통 이렇습니다.

조합 A

레이아웃/텍스트: Canvas 또는 Puppeteer
최종 압축/리사이즈/WebP 변환: Sharp
이 조합이 제일 안정적입니다. Sharp는 고성능 후처리, Canvas/Puppeteer는 표현력 담당이 잘 맞습니다.

조합 B

간단한 카드 생성만 필요: node-canvas 단독

조합 C

블로그/문서 OG 이미지: @vercel/og 또는 Puppeteer
입문 기준 추천

처음 시작이면 이렇게 가면 됩니다.

서버 이미지 API 만들 거다 → Sharp
문구 넣은 배너/썸네일 만들 거다 → node-canvas + Sharp
HTML/CSS로 그대로 이미지 만들고 싶다 → Puppeteer
설치 귀찮고 작은 프로젝트다 → Jimp
node-canvas 설치가 자꾸 깨진다 → @napi-rs/canvas 검토
한 줄 결론

대부분의 Node.js 이미지 편집/합성은
**“Sharp를 기본으로 잡고, 드로잉이 필요하면 Canvas 계열을 얹는 구조”**가 제일 좋습니다.

원하면 다음 답변에서 바로
“Sharp / node-canvas / Jimp / Puppeteer 비교표 + 예제 코드” 형태로 더 깔끔하게 정리해드릴게요.