Figma 이미지 내보내기 압축

TinyImage에서 내보내기 설정을 선택하고 Figma 이미지 내보내기를 압축하는 방법이에요.

TinyImage는 Figma 페이지의 레이어에 지정한 내보내기 설정과 형식을 감지해, TinyImage 플러그인으로 해당 레이어를 압축된 이미지로 내보낼 수 있게 해 줘요.

페이지를 자동으로 스캔할 때는 숨겨진 컨테이너 안의 레이어를 건너뛰어요. Figma에서 직접 선택한 레이어는 그 레이어 자체의 표시 여부와 내보내기 설정을 기준으로 계속 확인해요. 저장된 내보내기 설정은 바꾸지 않아도 돼요.

Figma 내보내기 설정의 세부 내용과 작동 방식은 Figma 도움말 문서의 공식 Figma 내보내기 가이드를 참고하세요.

압축할 레이어에는 내보내기 설정이 하나 이상 있어야 해요. 레이어에 내보내기 설정이 하나도 없으면 TinyImage는 그 레이어를 압축해 내보내려는지 알 수 없고, 플러그인의 내보낼 수 있는 이미지 목록에도 표시되지 않아요.

내보내기 설정 추가 및 새로고침 ​

Figma에서 압축된 이미지를 내보내려면 먼저 압축할 레이어에 이미지 내보내기 설정이 있는지 확인해야 해요.

Figma 레이어에 내보내기 설정 추가 ​

레이어 하나(또는 여러 레이어)에 내보내기 설정을 추가하려면 Figma에서 레이어를 선택한 다음, Figma 속성 패널에서 Export 옆의 + 아이콘을 클릭하세요. + 를 여러 번 클릭하면 그 레이어에 내보내기 설정을 원하는 만큼 추가할 수 있어요. 즉, 레이어 하나를 여러 형식과 크기(예: SVG, JPG @1x, JPG @2x, PDF 등)로 한 번에 내보낼 수 있어요.

내보내기 설정을 바꾼 뒤 Figma 레이어 새로고침 ​

이미 레이어에 내보내기 설정을 추가했지만 TinyImage 플러그인이 실행 중인 상태에서 설정을 더 추가하거나 제거하고 싶다면, 앞 단계처럼 하면 돼요. 레이어의 새 내보내기 설정이 마음에 들면 TinyImage 툴바의 Refresh 아이콘을 클릭하세요. Figma 레이어가 새로 고쳐지고, 업데이트된 내보내기 옵션이 TinyImage의 내보낼 수 있는 이미지 목록에 표시돼요.

압축 품질 비율 또는 목표 크기 설정 ​

TinyImage에서는 이미지 내보내기의 압축 품질을 1%-100% 로 지정하거나, 최대 파일 크기 목표(킬로바이트 단위)를 설정할 수 있어요. 숫자를 낮게 설정하면 파일 크기는 작아지지만 이미지 품질도 낮아져요. 숫자를 높게 설정하면 파일 크기는 커지지만 이미지 품질도 높아져요.

  • 0%-50% 낮은 품질(PDF는 72dpi)
  • 50%-75% 좋은 품질(PDF는 150dpi)
  • 75%-100% 최고 품질(PDF는 300dpi)

압축 품질 비율 조정 ​

TinyImage 툴바의 압축 슬라이더로 모든 이미지 내보내기의 품질을 1%-100% 사이에서 설정할 수 있어요. 슬라이더를 클릭한 채로 드래그하면 원하는 품질을 지정할 수 있어요. 이 설정은 모든 TinyImage 내보내기에 적용돼요.

최대 파일 크기(KB) 압축 목표 설정 ​

Size Target 토글을 켜고 크기 입력란에 킬로바이트 값을 입력해 최대 목표 파일 크기(킬로바이트 단위)를 설정할 수도 있어요. 그러면 TinyImage가 각 이미지를 그 최대 파일 크기 아래로 맞추려고 시도해요.

참고로 이 방법은 품질 비율 슬라이더를 쓰는 것보다 느린 경우가 많아요. 원하는 크기에 도달할 때까지 각 이미지를 점진적으로 압축해야 하기 때문이에요.

TinyImage 최대 파일 크기를 UI 대신 Figma에서 설정하고 싶나요? 내보낼 수 있는 레이어의 Figma Export 설정 접미사를 사용하면 돼요. 밑줄 뒤에 kb로 끝나는 숫자를 붙이면(예: _250kb) TinyImage가 그 값을 해당 레이어의 최대 크기로 사용해요. 올바른 접미사 예시: _250kb, @2x_500kb, @1x_300kb

목표 크기는 PDF나 GIF 내보내기에는 적용되지 않아요. 파일 크기 목표 압축 옵션은 TinyImage의 PDF나 GIF 내보내기에는 영향을 주지 않으며, JPG, PNG, SVG, AVIF, WebP 이미지에만 적용돼요.

내보내기별 압축 품질·크기 재정의 ​

슬라이더로 품질을 설정하는 것 외에도, TinyImage에서는 이미지 형식마다 다른 품질이나 크기를 지정할 수 있어요. 이 값은 플러그인 헤더의 품질 슬라이더나 목표 크기 입력란에서 설정한 전체 값보다 우선해요.

특정 이미지 형식의 품질을 지정하려면 품질을 바꿀 이미지 옆의 품질 숫자 입력란을 클릭하세요. 1%-100% 사이의 숫자를 입력하면 그 숫자가 이미지를 내보낼 때의 품질 설정이 돼요.

최대 파일 크기를 목표로 한다면, 목표 크기를 바꿀 이미지 옆의 KB 숫자 입력란을 클릭해 재정의 값을 지정할 수 있어요. 1~9999(KB) 사이의 숫자를 입력하면 그 숫자가 이미지를 내보낼 때의 목표 파일 크기 설정이 돼요.

압축할 이미지 선택 ​

압축할 레이어에 내보내기 설정을 추가하면 TinyImage의 내보낼 수 있는 이미지 목록에 표시돼요. 하지만 원하지 않는다면 Figma 페이지의 모든 이미지를 한꺼번에 내보낼 필요는 없어요. TinyImage에서는 체크박스로 압축할 이미지를 선택하거나 선택 해제할 수 있어요.

내보낼 수 있는 이미지 체크 및 체크 해제 ​

내보낼 이미지를 선택하거나 선택 해제하려면 TinyImage의 내보낼 수 있는 이미지 목록에서 이미지 썸네일 옆의 체크박스를 클릭하세요. 이미지를 체크 해제하면 압축과 내보내기에서 제외되고, 반대로 체크하면 내보내기에 포함돼요.

모든 레이어를 빠르게 선택하거나 선택 해제하기. 목록의 모든 이미지를 한 번에 빠르게 선택하거나 선택 해제하려면 내보낼 수 있는 이미지 목록 위, TinyImage 툴바의 체크박스를 클릭하세요.

TinyImage를 열 때 선택한 레이어만 불러오기 ​

TinyImage를 시작할 때 큰 페이지 전체를 스캔하지 않으려면, 플러그인을 열기 전에 Figma에서 필요한 내보낼 수 있는 레이어를 강조해 두세요. TinyImage는 처음에 선택한 레이어 중 이미 내보내기 설정이 있는 레이어만 불러와요.

TinyImage가 열려 있는 동안 Figma 선택 항목을 바꾸면 이미 불러온 레이어를 필터링할 수는 있지만, 다시 스캔하거나 백그라운드에서 새 레이어를 불러오지는 않아요. 새 선택 항목에 처음 불러온 레이어 밖의 레이어가 있으면 TinyImage가 Refresh All Exportable Layers를 클릭하라고 안내해요. 그러면 새로 추가한 레이어와 내보내기 설정을 포함해 현재 페이지의 내보낼 수 있는 레이어를 스캔하며, 숨겨진 컨테이너 안의 레이어는 건너뛰어요.

새로 고친 뒤에도 현재 선택 항목과 일치하는 내보낼 수 있는 레이어가 없으면, 계속 작업할 수 있도록 TinyImage가 페이지 전체 목록을 그대로 보여 줘요. 선택 항목을 바꾸거나 페이지를 전환하면 일반적인 선택 필터링 동작으로 돌아가요.

선택한 이미지의 내보내기 설정 새로고침 ​

선택한 레이어 중 아직 내보내기 설정이 없는 레이어가 있다면, Figma 속성 패널에서 Export 옆의 + 아이콘을 클릭해 필요한 설정을 추가하세요.

새 내보내기 설정이 마음에 들면 TinyImage 툴바의 Refresh 아이콘을 클릭하세요. TinyImage가 현재 페이지를 다시 스캔하고, 업데이트된 내보내기 옵션을 내보낼 수 있는 이미지 목록에 표시해요.

압축된 이미지 내보내기 ​

압축할 이미지를 선택했다면 TinyImage 툴바에서 Export를 클릭하세요. 선택한 이미지가 하나씩 압축되기 시작해요. 지금 압축 중인 이미지를 보여 주는 진행 표시와 함께, 압축이 끝날 때마다 줄어든 파일 크기가 표시돼요. 모든 이미지의 압축이 끝날 때까지 기다려 주세요. 이미지가 많고 각 이미지가 클수록 시간이 더 걸려요.

PNG/PDF 압축 속도. PNG와 PDF 내보내기는 JPG와 SVG 내보내기보다 압축에 시간이 더 걸릴 수 있어요. 특히 아주 세밀하거나 크기가 큰 경우에 그래요. 이미지가 너무 커서 압축할 수 없으면 TinyImage가 알려 줘요.

내보낸 ZIP 파일 저장 ​

모든 이미지 처리가 끝나면 이미지가 압축되었다는 확인 알림이 표시되고, .zip 파일 다운로드가 자동으로 시작돼요.

이미지 하나만 내보낼 때 압축된 이미지를 하나만 내보낸다면 TinyImage는 그 이미지를 .zip 파일로 묶지 않아요. 이미지 파일 하나를 그대로 컴퓨터에 저장할 수 있어요.

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

내보낸 ZIP 파일 열기 ​

Figma에서 .zip 파일을 컴퓨터에 저장했다면, 파일 탐색기에서 저장된 폴더를 여세요. 내보낸 .zip 파일을 더블클릭하면 압축이 풀리고, 압축된 이미지를 모두 사용할 수 있어요.