---
url: "/ko/hypercrop/batch-cropping.md"
description: "프리셋, 사용자 지정 크기, 스마트 초점, 내보내기 옵션으로 이미지를 일괄 자르고 크기를 조정하세요."
---

# 이미지를 여러 크기로 일괄 자르기 및 크기 조정

> 프리셋, 사용자 지정 크기, 스마트 초점, 내보내기 옵션으로 이미지를 일괄 자르고 크기를 조정하세요.

### 영상 튜토리얼: 이미지 자르기 및 크기 조정(영어)

이 영상에서는 HyperCrop 플러그인으로 Figma에서 이미지를 일괄 자르고 크기를 조정하는 방법을 보여 줘요.
[Embedded media](https://www.youtube-nocookie.com/embed/ysRuuEJvvYE)

Figma 페이지를 바꾸면 해당 페이지에 저장된 자르기 크기와 내보내기 설정을 불러와요. 저장된 자르기 크기가 없는 페이지는 기본 프리셋으로 시작해요.

## 인기 크기 프리셋 선택 {#selecting-popular-size-presets}

[Video](/assets/videos/hypercrop/crop/selecting-presets.mp4)

HyperCrop에는 수십 가지 크기 프리셋이 들어 있어요. 플랫폼과 기기마다 크기를 직접 찾아보고 입력하지 않아도 인기 플랫폼과 기기에 맞게 이미지를 쉽게 일괄 자르고 내보낼 수 있어요.

목록을 스크롤하며 각 항목 옆의 **checkbox**를 클릭하면 원하는 크기를 추가하거나 제거할 수 있어요. 크기를 체크하면 **selected sizes** 목록에 추가되고, 체크를 해제하면 제거돼요.

### 포함된 인기 플랫폼 및 기기 크기 {#popular-platforms-and-device-sizes-included}

아래 카테고리에서 수십 가지 프리셋을 고를 수 있어요.

- Facebook
- Google Ads
- Instagram
- LinkedIn
- 용지(Paper)
- 휴대폰(Phones)
- Pinterest
- 화면(Screens)
- Snapchat
- 태블릿(Tablets)
- Twitch
- Twitter (X)
- YouTube

## 사용자 지정 자르기 크기 프리셋 추가 {#adding-custom-crop-sizes-presets}

[Video](/assets/videos/hypercrop/crop/custom-sizes.mp4)

목록을 스크롤하며 각 항목 옆의 **checkbox**를 클릭하면 원하는 크기를 추가하거나 제거할 수 있어요. 크기를 체크하면 **sizes** 목록에 추가되고, 체크를 해제하면 제거돼요.

### “Auto” 너비 또는 높이 사용 {#using-auto-width-or-height}

너비 *또는* 높이 중 하나만 지정하고 나머지 값은 HyperCrop이 자동으로 계산하게 하려면 **Crop Width** *또는* **Crop Height** 입력란 중 하나만 채우고 다른 하나는 비워 두세요. 그러면 빈 입력란의 플레이스홀더가 **Auto**로 바뀌어 이를 알려 줘요. 고정할 너비나 높이를 정했다면 **Add Custom Crop Size +** 버튼을 클릭해 사용 가능한 사용자 지정 자르기 크기에 추가하세요.

### 사용자 지정 자르기 프리셋 삭제 {#deleting-a-custom-crop-preset}

사용 가능한 자르기 목록에서 사용자 지정 프리셋을 없애려면 사용자 지정 자르기 크기 옆의 **Trash** 아이콘을 클릭한 다음 **Delete**를 클릭해 확인하세요. 해당 크기가 **selected sizes** 목록에서 제거되고, 사용 가능한 자르기 목록에서도 *완전히* 삭제돼요.

## 일괄 자를 이미지 선택 {#selecting-images-for-batch-crop}

[Video](/assets/videos/hypercrop/crop/selecting-layers.mp4)

일괄 자르기에 사용할 수 있는 이미지는 모두 HyperCrop 플러그인 오른쪽에 표시돼요. 목록에서 이미지 옆의 **checkbox**를 클릭하면 해당 이미지를 일괄 자르기에 포함할지 제외할지 정할 수 있어요.

선택한 이미지 수에 선택한 이미지 크기 수를 곱한 값이 HyperCrop에서 내보낼 전체 이미지 수예요.

> **Note:** **HyperCrop에 이미지가 표시되려면 내보내기 설정이 있어야 해요**. Figma의 이미지나 레이어가 HyperCrop 플러그인에 표시되게 하려면, 자를 레이어에 내보내기 설정을 하나 이상 추가했는지 확인하세요. Figma 오른쪽 열의 **Export** 제목 아래에 있는 **+** 아이콘을 클릭하면 추가할 수 있어요.

> **Tip:** **빠르게 선택 및 선택 해제하기**. 모든 이미지를 한 번에 선택 해제(또는 다시 선택)하려면 목록 맨 위 **X of XX Images Selected** 레이블 옆의 체크박스를 클릭하세요.

### 자르기 초점 지정 {#specifying-crop-focal-points}

HyperCrop은 기본적으로 **Center/Center** 이미지 기준점을 사용해 이미지를 일괄 자르고 크기를 조정해요. 즉, 이미지의 초점이 항상 이미지의 정중앙이 돼요.

초점을 이미지의 다른 위치로 바꾸고 싶을 때도 있어요. 예를 들어 **Top/Left**나 **Center/Right**처럼요.

초점을 바꿀 이미지 위로 마우스를 가져간 뒤 세로(↕)와 가로(↔) **select boxes**를 클릭하고 각각 원하는 옵션을 고르면 돼요.

### 스마트 자르기 기능 사용 {#enabling-smart-cropping-features}

세로(↕)와 가로(↔) 선택 상자로 초점을 직접 지정하고 싶지 않다면 **Content Aware**와 **Detect Faces** 토글을 사용할 수 있어요.

두 기능 중 하나(또는 둘 다)를 켜려면, 기능을 켜거나 끌 이미지 위로 마우스를 가져간 뒤 각 기능의 **toggle switch**를 클릭하세요.

#### Content Aware 옵션 {#content-aware}

**Content Aware** 옵션을 켜면 HyperCrop이 스마트 자르기 모델을 사용해 이미지에서 중요하거나 눈에 띄는 초점 부분을 찾아요. 얼굴을 맞춰 자르기 까다로운 크기 묶음이 아니라면 이 설정을 켤 *필요는 없어요*. 이 설정을 켜면 이미지를 자르는 데 시간이 더 걸리기 때문이에요.

#### Detect Faces 옵션 {#detect-faces}

**Detect Faces** 옵션을 켜면 HyperCrop이 얼굴 인식 모델을 사용해 이미지에서 얼굴의 위치를 찾아요. 이미지에 얼굴이 없거나 얼굴을 맞춰 자르기 까다로운 크기 묶음이 아니라면 이 설정을 켤 *필요는 없어요*. 이 설정을 켜면 이미지를 자르는 데 시간이 더 걸리기 때문이에요.

> **Note:** **브라우저 지원**. 브라우저 호환성 문제로 HyperCrop의 **Detect Faces** 기능은 **Safari**에서 *지원되지 않아요*. 다른 브라우저(예: [Chrome](https://www.google.com/intl/en_us/chrome/))나 [Figma 데스크톱 앱](https://www.figma.com/downloads/)에서 플러그인을 실행하세요.

## 일괄 자르기 내보내기 설정 {#configuring-batch-cropping-export-settings}

[Video](/assets/videos/hypercrop/crop/open-settings.mp4)

자르기 크기와 이미지를 선택하고 이미지별 자르기 설정까지 마음에 들게 맞췄다면, 이제 이미지를 일괄 자르고 내보낼 준비가 됐어요.

설정 패널을 열려면 HyperCrop 헤더에서 **Batch Crop** 버튼을 클릭하세요.

일괄 자르기 설정 패널을 열면 **Image Format**(JPG 또는 PNG), **Image Compression**(이미지 품질과 크기 지정), **Image Fill**(스마트 자르기가 아닌 경우에만 적용) 같은 옵션을 선택할 수 있어요.

### 사용자 지정 파일 이름 형식 추가 {#adding-a-custom-filename-format}

일괄 자르기에서는 내보내는 모든 이미지에 적용할 사용자 지정 파일 이름 형식을 지정할 수 있어요. 일관된 이름 규칙을 정하거나 이미지를 알기 쉬운 **하위 폴더** 구조로 묶을 때 아주 유용해요.

이 필드는 선택 사항이며, 비워 두면 기본값으로 **#{collection}/#{name}\_#{width}x#{height}** 형식이 적용돼요.

#### 파일 이름에 사용할 수 있는 변수 {#available-variables-for-your-filenames}

아래 변수를 *원하는 대로* **자유롭게 조합**해 사용자 지정 하위 폴더/파일 이름 패턴을 만들 수 있어요. 일반 텍스트와 문자(밑줄, 영문자, 숫자 등)도 함께 쓸 수 있어요.

- **#{name}** Figma 레이어의 이름(예: “My Figma Layer Name”)
- **#{collection}** 크기 프리셋 컬렉션 이름(예: “facebook”)
- **#{label}** 크기 프리셋 컬렉션 레이블(예: “profile”)
- **#{width}** 크기를 조정한 이미지 너비(예: “1024”)
- **#{height}** 크기를 조정한 이미지 높이(예: “768”)

> **Tip:** **하위 폴더 만들기**. 하위 폴더를 만들려면 사용자 지정 파일 이름 형식 아무 곳에나 “**/**”를 넣으세요. 예를 들어 **#{collection}-crops/#{width}x#{height}/#{name}** 형식을 쓰면 **facebook-crops/1024x768/my_figma_layer_name.jpg** 같은 동적 폴더 구조가 만들어져요(컬렉션과 너비/높이 조합마다 변수가 바뀌어 들어가요).

## 일괄 자른 이미지를 컴퓨터로 다운로드 {#downloading-your-batch-crop-images-to-your-computer}

[Video](/assets/videos/hypercrop/crop/batch-crop-download.mp4)

모든 옵션과 파일 이름 형식을 원하는 대로 설정했다면 **Crop & Download Images** 버튼을 클릭해 “HyperCrop” 일괄 이미지 자르기 및 크기 조정을 시작하세요.

선택한 *모든* 이미지에 대해 선택한 크기를 *전부* 처리하므로, 이미지와 크기가 많을수록 시간이 더 오래 걸려요.

일괄 자르기가 끝나면 이미지를 다운로드할 준비가 됐다는 확인 화면이 나타나요. Figma에서 컴퓨터로 `.zip` 파일을 다운로드하려면 HyperCrop 플러그인에서 **Download your .zip file** 버튼을 클릭하세요.

> **Tip:** **Figma에서 다운로드한 파일 저장하기** Figma **데스크톱 앱**을 사용한다면 파일을 다운로드하라는 창이 나타나요. 하지만 **웹 브라우저**에서 Figma를 사용한다면 기본적으로 파일이 컴퓨터에 자동으로 다운로드돼요(보통 컴퓨터의 **Downloads** 폴더에 저장돼요).

### 내보낸 .zip 파일 열기 {#opening-your-exported-zip-file}

Figma에서 컴퓨터로 `.zip` 파일을 다운로드했다면 파일 탐색기에서 파일이 저장된 위치를 여세요. 내보낸 `.zip` 파일을 **더블 클릭**하면 모든 이미지와 하위 폴더가 담긴 폴더로 압축이 풀려요(HyperCrop 내보내기 설정에서 지정한 하위 폴더/파일 이름 패턴을 따라요).

## 일괄 자른 이미지를 현재 Figma 파일에 삽입 {#inserting-your-batch-crop-images-into-your-current-figma-file}

[Video](/assets/videos/hypercrop/crop/batch-crop-insert.mp4)

또는 모든 옵션과 파일 이름 형식을 원하는 대로 설정한 뒤 **Crop & Insert to Figma** 버튼을 클릭해 잘라낸 이미지를 Figma에 바로 삽입할 수도 있어요. 현재 Figma 파일에 새 페이지가 만들어지고, 잘라낸 이미지 레이어가 모두 그 페이지에 삽입돼요.