디자인 사양에서 에셋을 내보내고 다운로드하는 방법에 대해 학습합니다.

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

레이어를 내보내기용으로 표시하고 디자인 사양을 게시할 때 에셋을 포함시킨 경우, 게시된 디자인 사양 링크에서 이들 에셋을 다운로드할 수 있습니다. 벡터 에셋은 SVG, PNG 및 PDF에서 사용할 수 있으며 비트맵 에셋은 PNG 및 PDF에서 사용할 수 있습니다.

이 비디오를 통해 디자인 사양용으로 에셋을 내보내고 다운로드하는 방법을 자세히 살펴보십시오.


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

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

  • 아트보드 레이어를 클릭하고 팝업 메뉴에서 내보내기용으로 표시 확인란을 클릭합니다. 
  • 캔버스에서 레이어를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 내보내기용으로 표시를 선택합니다. 
  • macOS에서 키보드단축키 및Windows OS에서  키보드단축키를 사용합니다.
  • 레이어 패널을 열고 레이어 이름옆에 있는  내보내기용으로표시 아이콘을 클릭합니다. 

여러 에셋을 내보내려면 아트보드 내에서 여러 레이어를 선택하고 내보내기용으로 표시를 클릭합니다.

이미지가 포함된 Illustrator 또는 Photoshop 문서를 가져오거나 열면 XD는 자동으로 모든 비트맵 이미지를 내보내기용으로 표시합니다. 

내보내기용으로 에셋 표시
내보내기용으로 에셋 표시

에셋을 포함하여 디자인 사양 게시

디자인 사양을 게시할 때 에셋을 포함시키고 게시된 링크를 개발자와 공유하면 개발자는 이들 에셋을 한 곳에서 다운로드할 수 있습니다.

  1. XD에서 레이어를 내보내기용으로 표시합니다.

  2. 화면 오른쪽 상단에 있는 공유 버튼을 클릭하고 개발 목적으로 공유를 선택합니다. 디자인 사양에서는 해당 디자인이 1x 해상도라고 가정합니다.

    개발 목적으로 공유
    개발 목적으로 공유
  3. 내보내기 대상 드롭다운 메뉴에서 디자인을 내보내려는 대상 플랫폼을 선택합니다. 다운로드할 에셋 포함 옵션을 선택하고 링크 만들기를 클릭합니다.

    프로토타입의 에셋 포함
    프로토타입의 에셋 포함

    제작하는 디자인의 대상 플랫폼을 기준으로 각 플랫폼마다 다음과 같은 별도의 해상도 설정 세트가 있습니다.

    • 웹: 에셋은 1x 2x 해상도로 내보내집니다.
    • iOS: 에셋은 1x, 2x3x 해상도로 내보내집니다.
    • Android: 에셋은 아래의 Android 화면 밀도에 대해 최적화되어 내보내집니다.
      • ldpi - 저밀도 (75%)
      • mdpi - 중간 밀도 (100%)
      • hdpi - 고밀도 (150%)
      • xhdpi - 초고밀도 (200%)
      • xxhdpi - 초초고밀도 (300%)
      • xxxhdpi - 초초초고밀도 (400%)
  4. 게시된 디자인 사양을 브라우저에서 열려면 브라우저에서 열기 아이콘을 클릭하고 에셋을 조회할 아트보드를 선택합니다. 선택한 에셋과 함께 기타 아트보드 세부 정보가 브라우저에 표시됩니다. 

    에셋 위로 포인터를 가져다 대면 상황에 맞는 선택 항목이 선택한 에셋을 파란색으로 강조 표시합니다.

    웹에서의 에셋
    웹에서의 에셋

디자인 사양에서 에셋 다운로드

게시된 디자인 사양을 개발자와 공유하면 개발자는 여기에서 에셋을 다운로드할 수 있습니다. 개발자는 개별적으로 또는 동시에 에셋을 다운로드할 수 있습니다.

Cmd+ A 또는 Ctrl+A 단축키를 사용하여 에셋을 모두 선택하거나 Shift 키를 사용하여 여러 에셋을 선택할 수 있습니다. 에셋은 내 컴퓨터의 다운로드 폴더에 .zip 파일로 다운로드됩니다. 벡터 에셋의 포맷을 SVG, PDFPNG로, 비트맵 에셋의 포맷을 PNG PDF로 변경할 수 있습니다.

에셋 다운로드
에셋 다운로드

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

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