디자인 자산 내보내기

XD에서 비트맵 이미지, 아이콘 및 배경 패턴, 텍스트, 아트보드 등의 자산을 PNG, SVG, JPG 및 PDF로 내보낼 수 있습니다. 이렇게 내보내진 자산은 iOS, Android 또는 웹 앱에서의 배포에 최적화됩니다.

macOS에서 XD를 사용하고 있다면 디자인을 서드파티 통합(예: Zeplin, Avocode, Sympli, Kite Compositor 및 Protopie)으로 가져올 수도 있습니다.

• 일괄 처리: 속성 관리자의 내보내기용으로 표시 옵션을 사용하여 표시된 자산을 일괄적으로 내보낼 수 있습니다. 여러 오브젝트를 단일 자산으로 내보내려면 이들 오브젝트를 내보내기 전에 그룹화해야 합니다.
• 선택됨: 특정 자산을 선택하고 내보낼 수 있습니다.
• 모든 아트보드: 디자인 프로젝트의 모든 아트보드를 선택하여 내보낼 수 있습니다.
• After Effects: 자산을 After Effects로 내보낼 수 있습니다.

내보내기용으로 레이어 표시

내보내기용으로 표시된 레이어는 디자인 사양의 자산으로 포함됩니다. 자산을 내보내기용으로 표시하려면 캔버스에서 레이어를 선택하고 다음 옵션 중 하나를 사용하십시오. 

• 캔버스에서 레이어를 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 내보내기용으로 표시를 선택합니다. 
• 레이어 패널을 열고 레이어 이름 옆에 있는 내보내기용으로 표시 아이콘()을 클릭합니다. 

다양한 파일 포맷으로 자산 내보내기

자산은 웹 사이트에서 HTML/CSS/JS를 사용하거나 iOS 및 Android 앱의 Swift 또는 Java와 같은 기본 언어를 사용하여 디자인한 것을 개발자가 다시 만드는 데 필요한 디자인 파일입니다.

가장 일반적인 자산은 다음 포맷으로 내보낼 수 있는 비트맵 이미지, 아이콘 및 배경 패턴입니다. PNG, SVG, PDF 및 JPG. 

XD 57 이상을 통해 일관된 색상 렌디션으로 JPG, PNG 및 PDF 자산을 내보낼 수 있습니다. 이를 위해 문서의 색상 프로필을 sRGB로 전환합니다. 관리되지 않는 색상 프로필이 있는 문서에서 자산을 내보내려고 하면 내보낸 자산에서 가능한 색상 차이에 대해 알려 주는 메시지가 표시됩니다. 자세한 내용은 색상 관리를 참조하십시오.

PNG로 내보내기

일반 또는 플랫폼 전용 내보내기 크기를 선택하거나 사용자 정의 내보내기 크기를 설정합니다.

• 내보내기 크기 사전 설정 또는 사용자 정의 - 사전 설정된 내보내기 크기 0.5 x, 1 x, 1.5 x, 2 x, 3 x, 4x 중 하나를 선택합니다. 0.1x-10x로 시작되는 사용자 정의 내보내기 크기를 입력할 수도 있습니다.
• 웹 - 자산은 1x 및 2x 해상도로 내보내집니다.
• iOS - 자산은 1x, 2x 및 3x 해상도로 내보내집니다.
  
• Android - 디자인 자산은 아래의 Android 화면 밀도에 대해 최적화되어 내보내집니다.
  • ldpi - 저밀도 (75%)
  • mdpi - 중간 밀도 (100%)
  • hdpi - 고밀도 (150%)
  • xhdpi - 초고밀도 (200%)
  • xxhdpi - 초초고밀도 (300%)
  • xxxhdpi - 초초초고밀도 (400%)

SVG로 내보내기

오브젝트 또는 아트보드를 SVG로 내보낼 때 다음 옵션을 설정할 수 있습니다.

시각적 스타일링:

• 프레젠테이션 속성: 각 SVG 태그에서 각 스타일 속성에 대해 별도의 XML 속성을 사용합니다. 이 포맷은 SVG 자산을 Android Studio와 함께 사용해야 합니다.
• 내부 CSS: CSS 클래스와 함께 단일 스타일 태그를 사용하고 오브젝트 사이의 스타일링 설정을 동일한 스타일과 공유하여 파일 크기를 줄입니다.

임베드 또는 연결된 이미지:

• 임베드: 비트맵 이미지가 SVG 파일로 인코딩됩니다.
• 링크: 비트맵 이미지가 SVG 파일에 대한 참조와 별개로 저장됩니다.

PDF로 내보내기

다음과 같은 방법으로 자산을 PDF로 내보낼 수 있습니다.

• 단일 PDF 파일: 여러 아트보드 또는 자산을 선택하고 이들을 단일 PDF 파일로 내보낼 수 있습니다. 
• 여러 PDF 파일: 여러 아트보드 또는 자산을 선택하고 이들 각각에 대한 개별 PDF 파일로 내보낼 수 있습니다. 선택한 자산 또는 아트보드 각각에 대해 별도의 PDF 파일이 생성됩니다.

JPG로 내보내기

자산을 JPG로 내보낼 때 다음 옵션을 설정할 수 있습니다.

품질: 20%, 40%, 60%, 80% 또는 100%를 선택합니다.

내보내기 크기:

• 내 보내기 크기 사전 설정 또는 사용자 정의 - 사전 설정된 내보내기 크기 0.5 x, 1 x, 1.5 x, 2 x, 3 x, 4x 중 하나를 선택합니다. 0.1x-10x로 시작되는 사용자 정의 내보내기 크기를 입력할 수도 있습니다.
• 웹 - 자산은 1x 및 2x 해상도로 내보내집니다.

JPG는 PDF로 변환되지 않습니다. 래스터 이미지는 이미지로 가져오기 때문에 PDF로 변환될 수 있습니다.

서드파티 애플리케이션으로 자산 내보내기

또한 내 디자인을 XD에서 Zeplin, Avocode, Sympli, Kite Compositor, Protopie와 같은 애플리케이션으로 가져올 수 있습니다. 

다음은 Zeplin이 설치되어 있는 macOS에서의 XD 워크플로 샘플입니다.

문제 해결

자산 내보내기와 관련하여 문제가 있습니까? 내보내기와 관련된 문제를 해결하려면 Adobe XD에서 파일을 가져오거나 내보낼 수 없는 이유는 무엇입니까?
를 참조하십시오.

질문이나 아이디어가 있습니까?