내보내기 형식 및 설정

Figma design은 다양한 내보내기 형식 및 설정을 지원합니다. 이 문서를 활용해 나에게 가장 적합한 형식을 판단하세요. 디자인을 내보낼 준비가 되었다면 Figma에서 내보내기에서 내보내기 설정을 적용하는 방법을 확인하세요.

내보내기 형식

PNG(Portable Network Graphics)

PNG는 무손실 압축, 투명도, 색상 대비를 지원하는 래스터 그래픽 형식입니다. 내보내기 시 무손실 압축 방식을 사용하면 원본 이미지의 품질과 텍스트 가독성이 유지됩니다. PNG로 내보내면 JPG로 내보낼 때보다 파일 크기가 훨씬 늘어날 수 있음에 유의하시기 바랍니다.

PNG는 로고, 차트, 일러스트레이션 등 투명도가 필요하며 이미지와 텍스트가 함께 포함되어 있는 그래픽에 사용할 때 가장 좋습니다.

PNG의 경우 다음의 내보내기 설정을 사용할 수 있습니다.

• 중첩 레이어 무시
• 바운딩 박스 포함(텍스트 레이어만)

JPG(Joint Photographic Group)

JPG(또는 JPEG)는 손실 압축을 지원하는 래스터 이미지 파일 형식입니다. 손실 압축의 경우 파일 데이터를 영구 제거함으로써 파일 크기를 줄입니다. 따라서 파일 크기는 줄어들지만 이미지 품질도 떨어지게 됩니다.

대부분의 경우 JPG는 웹에서 사용하기 적합한 품질이며 크기가 작기 때문에 로딩 시간이 단축됩니다. 인쇄 디자인 및 사진에도 JPG를 사용할 수 있습니다.

JPG는 투명도를 지원하지 않으며 압축으로 인해 텍스트의 가독성이 떨어질 수 있음을 유념하세요. 이미지에 텍스트나 투명도가 포함되어 있다면 PNG나 SVG로 대신 내보내세요.

JPG의 경우 다음의 내보내기 설정을 사용할 수 있습니다.

• 중첩 레이어 무시
• 바운딩 박스 포함(텍스트 레이어만)

SVG(Scalable Vector Graphics)

SVG는 XML 기반의 벡터 그래픽입니다. 숫자 값과 좌표에 기반을 둔 도형이며 어떠한 화면에서도 렌더링할 수 있습니다. SVG는 픽셀에 의존하지 않기 때문에 이미지 품질에 영향을 주지 않고도 다양한 크기로 확대/축소할 수 있습니다. 또한 투명도도 지원합니다.

SVG는 스크립트나 코드로 표현할 수 있기 때문에 디지털 디자인에서 널리 사용되는 형식입니다. 반응형 디자인에 포함하고자 하는 로고나 아이콘, 일러스트레이션에 SVG를 사용해 보세요.

SVG의 경우 다음의 내보내기 설정을 사용할 수 있습니다.

• 중첩 레이어 무시
• 바운딩 박스 포함(텍스트 레이어만)
• “id” 속성 포함
• 텍스트 윤곽
• 선 단순화

PDF(Portable Document Format)

PDF를 사용하면 복잡한 대화형 레이아웃을 공유할 수 있습니다. PDF는 고정된 레이아웃 내에 텍스트, 글꼴, 벡터 그래픽, 이미지를 포함합니다. 또한 PDF를 사용하면 어떤 시스템에서도 디자인의 개별 요소를 렌더링 및 조작할 수 있습니다. 따라서 PDF는 소프트웨어, 하드웨어, 운영체제의 영향을 받지 않으므로 다양한 용도로 사용됩니다.

Apple의 모바일 개발 언어인 Xcode는 PDF를 지원합니다. 따라서 iOS 애플리케이션을 개발할 때 매우 유용한 도구입니다. iOS 개발 시 Figma에서 PDF를 사용하여 슬라이드 덱을 내보내거나 자산을 공유하세요. 또한 인쇄 디자인 목업에도 PDF를 사용할 수 있습니다. Figma에서는 콘텐츠를 PDF 1.7 파일로 내보냅니다.

Figma는 텍스트를 상형문자로 내보내기 때문에 최종 PDF에서는 텍스트를 수정할 수 없습니다. 그러나 브라우저나 다른 호환되는 소프트웨어에서 PDF를 볼 때 텍스트를 선택하고 복사할 수는 있습니다.

내보내기 설정

내보내기 설정을 사용해 Figma에서 디자인을 내보내는 방식을 더욱 세부적으로 제어할 수 있습니다.

확대/축소

기본 확대/축소 옵션을 선택하거나 필드에 맞춤 크기를 입력하세요. 크기를 맞춤설정하려면 다음 중 하나와 함께 숫자를 입력하세요.

• 값 뒤에 x를 추가하여 곱하기 기호로 사용
• 값 뒤에 w를 추가하여 고정 너비 설정
• 값 뒤에 h를 추가하여 고정 높이 설정

레티나 디스플레이와 같은 고밀도 화면에 표시할 콘텐츠를 내보내는 경우, 큰 확대/축소 값을 사용해 내보내면 자산의 해상도를 높일 수 있습니다.

기본적으로 Figma에서 이미지로 내보내진 자산의 DPI는 72입니다. 확대/축소로 내보내진 이미지의 DPI를 계산하려면 72에 선택한 확대/축소 값을 곱하세요. 예를 들어 2x로 내보내진 이미지의 DPI는 144입니다. 3x로 내보내진 이미지의 DPI는 216입니다.

확대/축소에 관한 형식 관련 제한사항이 있습니다.

• Figma는 SVG 내보내기에 1x만 지원합니다. 그러나 코드의 값을 조정하거나 너비 및 높이 변수를 사용해 SVG를 확대/축소할 수 있습니다. 예: <img src=“image.svg” width=“50px”>
• Figma는 PDF 내보내기에 1x만 지원합니다. 다른 확대/축소 값을 사용해 자산을 내보내려면 다른 형식을 선택해야 합니다.

접미사

선택적 설정도 있습니다. 접미사 필드에 값을 입력하면 내보내기가 완료되었을 때 파일 이름에 이 값이 추가됩니다. 이 기능을 사용해 레이어 이름을 수정하지 않고도 내보낸 자산을 정리해 보세요. 예를 들어 “HomePage”라는 프레임을 PNG로 내보낸 후 접미사 필드에 “draft”라고 입력하면 내보내진 파일 이름은 “HomePagedraft.png”가 됩니다.

형식별 내보내기 설정

일부 형식은 추가적인 내보내기 설정을 지원합니다. 속성 패널의 내보내기 섹션에서 를 클릭하고 이러한 추가 설정을 확인 및 조정하세요.

다음의 표는 형식별로 어떠한 설정을 사용할 수 있는지 보여줍니다.

형식	중첩 레이어 무시	바운딩 박스 포함	“id” 속성 포함	텍스트 윤곽	선 단순화
PNG	✓	✓	✕	✕	✕
JPG	✓	✓	✕	✕	✕
SVG	✓	✓	✓	✓	✓
PDF	✕	✕	✕	✕	✕

색상 프로필

기본적으로 Figma에서는 파일의 색상 프로필을 사용해 자산을 내보냅니다. 예를 들어 어떤 파일이 Display P3로 설정되어 있다면 자산도 Display P3로 내보내집니다.

그러나 내보내기를 실행할 때 다음 단계에 따라 다른 색상 프로필을 선택할 수 있습니다.

1. 설정 내보내기를 클릭합니다.
2. 색상 프로필 드롭다운을 열고 색상 프로필을 선택합니다.
   • 파일과 동일(색상 프로필)
   • sRGB
   • Display P3

색상 프로필 및 색상 관리에 관해 자세히 알아보기 →

중첩 레이어 무시

이 설정은 기본적으로 사용하도록 설정됩니다. 이 설정을 사용하도록 설정하면 선택된 레이어만 내보내기에 포함됩니다. 선택된 개체와 교차하거나 중첩되는 다른 모든 개체는 내보내기에 영향을 주지 않습니다. 이 설정을 사용하지 않도록 설정하면 선택된 레이어 또는 그룹과 교차하는 모든 레이어가 내보내기에 포함됩니다.

바운딩 박스 포함

텍스트 레이어에만 사용할 수 있습니다. 이 설정을 사용하도록 설정하면 Figma에서 텍스트 레이어의 바운딩 박스를 기준으로 내보내기 크기를 판단합니다. 바운딩 박스가 텍스트보다 큰 경우 Figma에서 내보내기에 빈 공간을 포함시킵니다. 바운딩 박스가 텍스트보다 작으면 Figma가 텍스트 중에서 바운딩 박스 바깥으로 나온 부분을 잘라낸 후 버립니다.

이 설정을 사용하지 않도록 설정하면 Figma에서 텍스트 자체의 크기를 기준으로 내보내기 크기를 판단합니다. 글자와 바운딩 박스 사이의 모든 공간은 잘라낸 후 버립니다.

“id” 속성 포함

“id” 속성 포함 설정을 사용하도록 설정하면 Figma가 SVG 메타데이터에 “id” 태그를 추가합니다. 이렇게 하면 JavaScript에서 <svg> 요소에 손쉽게 접근할 수 있으며 스타일 시트에서 특정 id 선택기를 가리킬 때 사용할 수도 있습니다. Figma에서 “id”는 레이어 패널의 개체 이름을 기반으로 합니다.

텍스트 윤곽

하나 이상의 텍스트 레이어가 선택되어 있으면 이 설정이 기본적으로 사용하도록 설정됩니다. Figma는 모양을 유지하기 위해 모든 텍스트 레이어를 상형문자로 변환합니다. 이 설정이 사용하도록 설정되어 있으면 내보내기가 완료된 후 텍스트를 편집할 수 없습니다. 편집할 수 있도록 하려면 이 설정을 사용하지 않도록 설정하세요.

선 단순화

선택된 개체가 벡터 네트워크(기본 도형이 아님)이며 내부 또는 외부 선을 포함하고 있는 경우 이 설정이 기본적으로 사용하도록 설정됩니다. Figma에서는 개체에 내부, 가운데, 외부 선을 적용할 수 있습니다. SVG의 경우 가운데 선만 지원합니다. 이 설정을 사용하면 다른 시스템에서 내부 및 외부 선을 올바르게 렌더링할 수 있습니다.