더 나은 인프라 선택을 위한 독립 가이드 THE INFRASTRUCTURE EDIT
HOSTING / NODEPICK GUIDE

이미지 변환을 어디서 할까, 빌드와 요청 시점

빌드 시 변환과 요청 시 변환을 비교해 이미지 처리 위치를 정합니다.

노드픽 에디토리얼작성·업데이트 2026-10-19
이미지 변환을 어디서 할까, 빌드와 요청 시점의 주제를 표현한 AI 콘셉트 이미지
AI 제작 콘셉트 이미지입니다. 특정 시설·제품의 실사진이 아닙니다.
먼저 기억할 핵심
  • 표시 크기를 수집해 구간으로 묶었다
  • 구간별 대표 폭만 생성 대상으로 남겼다
  • 두 방식의 월 금액을 2개월째까지 계산했다

변환 시점은 빌드와 요청 중 하나입니다

이미지를 여러 크기로 제공할 때 변환을 어디서 할지는 두 가지 선택입니다. 빌드할 때 미리 만들어 두는 방식과, 요청이 올 때 만들어 캐시하는 방식입니다. 빌드 시 변환은 결과가 정적 파일이어서 배포 뒤에는 추가 계산이 없습니다. 대신 이미지가 많으면 빌드 시간이 길어지고, 새 크기를 추가할 때마다 전체를 다시 만들어야 합니다. 요청 시 변환은 빌드가 빠르고 크기 추가가 쉽지만, 처음 요청하는 크기마다 계산이 발생하고 그만큼 요금이 생깁니다. 그래서 선택 기준은 이미지 개수와 크기 조합 수, 그리고 배포 빈도입니다.

표시 크기 수집 → 조합 수 축소 → 변환 시점 결정
가운데 축소를 먼저 합니다. 조합이 많은 상태로 방식만 바꾸면 비용이 남습니다.

크기 조합 수를 먼저 줄입니다

어느 방식을 쓰더라도 먼저 할 일은 필요한 크기 조합을 줄이는 것입니다. 화면 폭마다 다른 크기를 만들면 조합이 금방 늘어나는데, 실제로는 몇 개 구간만 있어도 충분합니다. 1단계로 사용 중인 표시 크기를 모두 수집합니다. 2단계로 비슷한 값을 묶어 구간을 정합니다. 3단계로 각 구간의 대표 폭만 생성 대상으로 남깁니다. 4단계로 고해상도 화면을 위한 배수 버전을 필요한 구간에만 추가합니다. 이렇게 하면 조합 수가 크게 줄어 변환 비용과 빌드 시간이 함께 내려갑니다. 조합을 줄이지 않고 방식만 바꾸면 어느 쪽에서도 비용이 남습니다.

두 방식의 월 금액을 계산합니다

학습용 가정으로 계산합니다. 가정값은 이미지 2,000개에 크기 5종이 필요해 조합이 10,000개이고, 요청 시 변환 단가가 1,000건당 60원이라고 두겠습니다. 첫 달에 모든 조합이 한 번씩 요청되면 1,000건 단위로 10이므로 600원입니다. 빌드 시 변환 방식에서는 조합 생성에 빌드마다 20분이 더 걸리고 월 60회 배포하면 1,200분이며, 빌드 단가를 분당 1.4원으로 가정하면 1,680원입니다. 중간 계산값인 차액은 1,080원으로 요청 시 변환이 적습니다. 최종 금액은 2개월째부터 달라집니다. 요청 시 변환은 캐시가 남아 거의 0에 가까워지고, 빌드 시 변환은 매달 1,680원이 계속 발생합니다.

빌드 시 변환: 배포마다 비용이 반복되는가; 요청 시 변환: 첫 요청에만 비용이 생기는가; 원본 접근: 권한과 허용 목록이 설정됐는가
위 두 줄로 금액 구조를, 아래 줄로 가능 여부를 봅니다. 단가는 가정값입니다.

원본 보관 위치가 제약을 만듭니다

결론을 뒤집는 조건은 원본의 위치와 권한입니다. 요청 시 변환은 변환기가 원본을 읽을 수 있어야 하므로, 원본이 비공개 저장소에 있으면 접근 권한을 따로 열어야 합니다. 외부 주소의 이미지를 변환하려면 허용 목록에 등록하는 설정이 필요하고, 등록하지 않은 주소는 변환되지 않습니다. 두 번째 조건은 즉시성입니다. 이미지를 교체했을 때 캐시에 남은 예전 변환 결과가 계속 보일 수 있으므로, 원본 파일 이름에 식별자를 넣어 교체 시 주소가 바뀌게 합니다. 그래서 운영 규칙에는 원본 위치, 허용 목록, 이름 규칙 세 항목을 적습니다.

웹호스팅 실행 전 점검표

  • 표시 크기를 수집해 구간으로 묶었다
  • 구간별 대표 폭만 생성 대상으로 남겼다
  • 두 방식의 월 금액을 2개월째까지 계산했다
  • 원본 위치·허용 목록·이름 규칙을 정했다
조건을 넣어 직접 계산하기 →

이 가이드의 근거 문서

출처 확인일: 2026-10-19. 공식 문서에 기반한 편집 가이드이며 직접 수행한 벤치마크가 아닙니다. 비용 사례는 명시된 가정에 한합니다.

  1. Next.js Image 컴포넌트 ↗
  2. Cloudflare 이미지 변환 개요 ↗
  3. 반응형 이미지 제공 ↗
오류 제보 방법

함께 읽으면 좋은 가이드