Adobe XD에서 제작 준비가 완료된 에셋을 PNG, SVG, JPG 및 PDF 파일로 내보내는 방법에 대해 학습합니다.

웹 사이트 또는 모바일 애플리케이션에서 사용하기 위한 목적으로 제작 준비가 완료된 에셋을 개발자와 공유할 수 있습니다. XD에서 디자인 에셋을 iOS, Android 또는 웹에서의 개발에 최적화된 PNG, SVG, JPG 및 PDF로 내보낼 수 있습니다.

프로젝트의 특정 에셋이나 텍스트, 특정 아트보드 또는 모든 아트보드를 내보낼 수 있습니다. Mac에서 XD를 사용 중인 경우 에셋을 다른 애플리케이션으로 내보낼 수도 있습니다. 자세한 내용은 서드 파티 통합을 참조하십시오.

에셋 또는 아트보드 내보내기

  1. 모든 아트보드를 내보내려면: 

    아트보드나 에셋이 선택되어 있지 않아야 합니다. 페이스트보드(아트보드 주변의 회색 영역)를 클릭하여 오브젝트 또는 아트보드를 선택 해제할 수 있습니다.

    특정 에셋 또는 아트보드를 내보내려면:

    내보내려는 에셋 또는 아트보드를 선택하면 됩니다. 아트보드를 선택하려면 아트보드 제목을 클릭합니다(Cmd/Ctrl + 클릭). 또는 레이어 패널을 열고 내보내려는 아트보드를 선택합니다. 

    나중에 내보낼 에셋 또는 아트보드를 표시한 다음 XD에서 지원하는 모든 종류의 포맷으로 일괄 내보내기할 수도 있습니다. 내보낼 아트보드를 표시하려면 레이어 패널을 열고 일괄 내보내기에 대해 표시 아이콘()을 클릭합니다. 또는 레이어 패널에서 에셋을 마우스 오른쪽 버튼으로 클릭한 다음 일괄 내보내기에 대해 표시를 선택합니다.

    참고:

    여러 오브젝트를 단일 에셋으로 내보내려면 이들 오브젝트를 내보내기 전에 우선 그룹화해야 합니다.

  2. Mac의 경우 파일 > 내보내기를 선택합니다. Windows의 경우 햄버거 메뉴를 클릭하고 내보내기를 클릭합니다. 

    레이어 패널에서 아트보드를 이미 선택했다면 마우스 오른쪽 버튼을 클릭하고 내보내기를 선택합니다.

    다음과 같은 내보내기 옵션을 사용할 수 있습니다.

    • 일괄 처리: 내보내기에 대해 표시 옵션을 사용하여 표시한 에셋을 내보냅니다.
    • 선택됨: 선택한 에셋을 내보냅니다.
    • 모든 아트보드:내 디자인의 모든 아트보드를 내보내려면 모든 아트보드를 선택합니다.
    에셋 및 아트보드 내보내기 옵션
  3. 대상 플랫폼(웹, iOS 또는 Android)과 파일 포맷(PNG, SVG, JPG 또는 PDF)을 선택합니다.

    내보내기 옵션에 대한 자세한 내용은 다음 리소스를 참조하십시오.

  4. 출력 파일을 저장하려면 디렉터리를 지정합니다.

  5. 메시지가 표시되는 경우 에셋의 요구 조건에 맞춰 해상도를 지정합니다. 해상도를 얼마로 해야 할지 확실치 않은 경우에는 기본 설정(1x)으로 남겨 두십시오.

  6. 내보내기를 클릭합니다.

PNG로 내보내기

PNG로 내보내는 경우 XD는 해당 오브젝트와 관련된 모든 해상도를 내보냅니다. 내보내려는 크기와 디자인, 웹, iOS 또는 Android 등 내보내려는 대상 플랫폼을 선택합니다.

예를 들어 1x로 지정하면 10 x 10 사각형이 10px x 10px, 20px x 20px 및 30px x 30px로 내보내집니다. 2x로 지정하면 10 x 10 사각형이 5px x 5px 및 15px x 15px로 내보내집니다. 

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

디자인

디자인은 기본 옵션으로, 에셋은 1x 해상도의 PNG로 내보내집니다.

에셋은 1x 및 2x 해상도로 내보내집니다.

iOS

iOS의 경우 세 개의 내보내기 크기를 갖습니다. 에셋이 1x, 2x 및 3x 해상도로 내보내집니다. 

다양한 iOS 디바이스에 대한 기본 아트보드 크기는 1x로 지정되는 것으로 간주되므로 기본값을 사용한 경우에는 내보내기를 1x로 남겨 두십시오. 그러나 아트보드의 폭과 높이를 두 배로 하여 2x로 지정할 수도 있습니다.

다음 인포그래픽을 통해 1x 및 2x로 지정할 때 디자인 에셋이 iOS용으로 내보내지는 방식에 대해 살펴보십시오.

iOS용 PNG로 에셋 내보내기
iOS용 PNG로 에셋 내보내기

Android

에셋은 아래의 Android 화면 밀도에 대해 최적화되어 내보내집니다.

  • ldpi - 저밀도 (75%)
  • mdpi - 중간 밀도 (100%)
  • hdpi - 고밀도 (150%)
  • xhdpi - 초고밀도 (200%)
  • xxhdpi - 초초고밀도 (300%)
  • xxxhdpi - 초초초고밀도 (400%)

다음 인포그래픽을 통해 서로 다른 해상도로 지정할 때 Android용으로 디자인 에셋이 내보내지는 방식에 대해 살펴보십시오.

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

SVG로 내보내기

SVG 포맷으로 내보내고, 스타일링 옵션을 설정하고, 임베디드 또는 연결된 이미지로 저장할 수도 있습니다.

스타일링: 스타일링을 프레젠테이션 속성 또는 내부 CSS 중 하나로 선택할 수 있습니다. SVG에 대한 기본 스타일링은 SVG를 Android Studio로 내보내는 경우와 같은 일반적인 개발 시나리오에서의 호환성을 개선하기 위해 프레젠테이션 속성으로 설정됩니다.

이미지 저장: 임베디드 또는 링크된 이미지로 저장할 수 있습니다.

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

에셋을 최적화하려면 파일 크기에 대해 Mac의 경우 파일 크기 최적화(작게)를, Windows의 경우 최적화(축소)를 선택하십시오.

SVG로 내보내는 경우의 내보내기 옵션
SVG 내보내기 옵션

JPG로 내보내기

사진 등의 에셋을 JPG로 내보낼 때 이 JPG의 품질을 원하는 대로 설정할 수 있습니다. 품질 드롭다운 목록에서 원하는 백분율 옵션을 선택하고 내보내기 대상으로 디자인 또는 을 선택합니다.

JPG로 내보내는 경우의 내보내기 옵션
JPG로 내보내는 경우의 내보내기 옵션

PDF로 내보내기

PDF로 내보내는 경우 단일 PDF 파일로 내보낼지 또는 개별 PDF 파일로 내보낼지 선택할 수 있습니다.

PDF로 내보내는 경우의 내보내기 옵션
PDF로 내보내는 경우의 내보내기 옵션

단일 PDF 파일

여러 아트보드 또는 에셋을 선택하고 이들을 단일 PDF 파일로 내보낼 수 있습니다. 여러 아트보드 또는 에셋은 별도의 페이지에 배치되고 단일 PDF가 생성됩니다.

개별 PDF 파일

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

서드 파티 통합

Zeplin, Avocode, Sympli(MAC만 해당), Kite Compositor, ProtoPie 등 XD와 통합된 다른 애플리케이션으로 내 디자인을 가져올 수 있습니다. 

이 섹션에서는 Mac에서 실행 중인 XD와 Zeplin을 예로 들어 작업 과정에 대한 고급 개요를 다룹니다.

이 절차는 Windows에서 실행되는 XD에 대해서도 동일한 방식으로 적용됩니다.

참고:

이 절차는 사용 중인 애플리케이션에 따라 약간의 차이가 있습니다. 자세한 내용은 해당 애플리케이션의 설명서를 참조하십시오.

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

    Zeplin으로 에셋 내보내기
    Zeplin으로 에셋 내보내기

    참고:

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

  2. 표시되는 대화 상자에서 가져오기를 클릭합니다.

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

    Zeplin에서의 가져오기 화면
    Zeplin에서의 가져오기 화면

    아트보드를 Zeplin으로 가져옵니다.

    Zeplin에서의 아트보드
    Zeplin에서의 아트보드

디자인 사양용 에셋 내보내기

작업 시간을 단축할 수 있으며 개발자에게 디자인 사양에서 에셋을 추출하고 다운로드할 수 있는 기능을 제공할 수 있습니다. 이 기능을 사용하여 레이어를 내보내기용 에셋으로 표시하고 디자인 사양 링크로 전송할 수 있습니다. 개발자는 모든 벡터 에셋을 SVG, PNG 및 PDF로, 비트맵 에셋을 PNG 및 PDF로 다운로드할 수 있습니다.

자세한 내용은 디자인 사양용 에셋 추출을 참조하십시오.

XD에서 내보내기 옵션이 표시되지 않는 이유는 무엇입니까?

파일 > 내보내기 옵션에 서드 파티 애플리케이션이 표시되지 않는 경우에는 내보내기 옵션에 지원되는 서드 파티 앱이 표시되지 않음을 참조하십시오.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책