사용 안내서 취소

디자인 자산 내보내기

Adobe XD에서 제작 준비가 완료된 자산을 PNG, SVG, JPG 및 PDF 파일 포맷으로 내보내는 방법에 대해 알아봅니다.

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

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

자산 및 아트보드를 선택하여 내보내기

macOS

오브젝트 또는 아트보드를 선택하고 파일 > 내보내기로 이동하거나 Cmd + E를 누릅니다.    

Windows

오브젝트 또는 아트보드를 선택하고 파일 > 내보내기로 이동합니다.  

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

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

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

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

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

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

가장 일반적인 자산은 다음 포맷으로 내보낼 수 있는 비트맵 이미지, 아이콘 및 배경 패턴입니다. PNGSVGPDF 및 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 워크플로 샘플입니다.

  1. XD 파일에서 아트보드 또는 레이어를 선택하고 파일 > 내보내기 > Zeplin을 클릭합니다.

    XD와 통합된 다수의 애플리케이션을 보유하고 있는 경우, 키보드 단축키(⌥⌘E)를 사용하여 최근에 사용한 통합 애플리케이션을 실행할 수 있습니다.

    Zeplin으로 자산 내보내기
    Zeplin으로 자산 내보내기

  2. 가져오기 를 클릭합니다. Zeplin의 기존 화면을 동일한 이름으로 대체하려면 동일한 이름으로 화면 대체를 선택합니다. Zeplin이 메모를 그대로 유지한 상태로 동일한 화면의 새로운 버전으로 이를 추가합니다.

    XD에서 Zeplin으로 작업할 때 문제가 발생하면 내보내기 옵션에서 지원되는 서드파티 앱이 표시되지 않음에서 해결책을 찾아보십시오.

Android용 PNG로 내보내는 경우의 내보내기 옵션
Android용 PNG로 내보내는 경우의 내보내기 옵션

문제 해결

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

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

커뮤니티에 질문

자주 사용하는 디자인 툴에 내보내기 워크플로가 추가적으로 필요하십니까? XD UserVoice
에서 요청을 추천하거나 제시해 주십시오.

질문이 있거나 아이디어를 공유하고 싶다면 Adobe XD 커뮤니티에 참여하십시오. 소중한 의견과 다양한 작품 활동을 기대하겠습니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?