디자인 에셋 내보내기

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

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

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

에셋 및 아트보드 내보내기

Mac

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

Windows

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

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

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

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

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

다양한 파일 포맷으로 에셋 내보내기

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

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

단일 PDF 파일: 여러 아트보드 또는 에셋을 선택하고 이들을 단일 PDF 파일로 내보낼 수 있습니다. 

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

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

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

오브젝트나 아트보드를 SVG로 내보낼 때 비주얼 스타일링을 프레젠테이션 속성 또는 내부 CSS로 설정할 수 있습니다. 

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

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

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

PNG를 선택하면 다음 플랫폼에서 에셋을 내보내도록 선택할 수 있습니다.

  • 디자인 - 기본 옵션으로, 에셋은 1x 해상도의 PNG로 내보내집니다.
  • 웹 - 에셋은 1x 및 2x 해상도로 내보내집니다.
  • iOS - 에셋은 1x, 2x 및 3x 해상도로 내보내집니다.
    다양한 iOS 디바이스에 대한 기본 아트보드 크기는 1x로 지정되는 것으로 간주되므로 기본값을 사용한 경우에는 내보내기를 1x로 남겨 두십시오. 그러나 아트보드의 폭과 높이를 두 배로 하여 2x로 지정할 수도 있습니다.

  • Android - 디자인 에셋은 아래의 Android 화면 밀도에 대해 최적화되어 내보내집니다.
    • ldpi - 저밀도 (75%)
    • mdpi - 중간 밀도 (100%)
    • hdpi - 고밀도 (150%)
    • xhdpi - 초고밀도 (200%)
    • xxhdpi - 초초고밀도 (300%)
    • xxxhdpi - 초초초고밀도 (400%)

서드파티 애플리케이션으로 에셋 내보내기

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

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

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

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

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

    XD에서 Zeplin을 사용하여 작업하는 데 문제가 있는 경우 이 문서에서 해결책을 찾아보십시오.

자세히 알아보기

이 튜토리얼을 통해 XD에서 에셋을 내보내는 방법에 자세히 알아보십시오.

시청 시간: 2분

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

문제 해결

에셋 내보내기와 관련하여 문제가 있습니까? 이 문서를 참조하여 내보내기 관련 문제를 해결하십시오.

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

커뮤니티에 질문

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

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

Adobe 로고

내 계정 로그인