XD 이미지 추출 방법 5가지

Adobe XD에서 이미지를 추출하는 방법은 총 5가지가 대표적입니다.

디자인 소스를 이미지로 저장하거나, 개발자와 협업할 때 필요한 포맷으로 내보낼 수 있는 다양한 기능이 제공됩니다.

하지만 추출 방식마다 화질, 배경 여부, 포맷 지원이 달라 혼란을 겪는 사용자도 많습니다.

XD 이미지 추출 방법 5가지

• 아트보드 단위, 객체 단위 등 목적별 추출 가능
• JPG, PNG, SVG, PDF 등 다양한 포맷 지원
• 내보내기 설정에 따라 배경 포함·제외 가능

1. 내보내기(Export) 기능으로 이미지 저장

Adobe XD에서 가장 기본적인 추출 방법은 내보내기 기능을 이용하는 것입니다. 디자인 완성 후 아트보드나 개별 요소를 선택해 JPG, PNG, SVG, PDF 등으로 저장할 수 있습니다.

1) 단축키: Ctrl+E (Mac은 Cmd+E)

저장할 객체 또는 아트보드를 선택한 뒤, 단축키를 누르면 바로 내보내기 창이 열립니다. 원하는 포맷과 해상도를 선택해 추출할 수 있습니다.

2) 포맷별 특성

JPG는 배경이 포함되며, PNG는 투명 배경 설정이 가능합니다. SVG는 벡터 기반이라 확대 시에도 깨지지 않으며, PDF는 고해상도 출력용으로 적합합니다.

3) 2x, 3x 해상도 설정

‘Web’, ‘iOS’, ‘Android’ 플랫폼별로 1x~3x까지 배수 설정 가능하며, 고해상도 이미지가 필요한 경우 매우 유용합니다.

2. 디자인 스펙 공유로 개발자 추출

XD에서는 개발자와 협업 시 ‘디자인 스펙 공유’ 기능을 통해 이미지, 아이콘 등을 직접 추출할 수 있도록 설정할 수 있습니다.

1) 링크 생성 → 개발자 모드

상단의 ‘공유 → 개발’ 메뉴에서 링크 생성 후, 개발자는 브라우저 상에서 다운로드가 가능합니다. PNG, SVG 포맷으로 자동 정리되어 제공됩니다.

2) 특정 요소 다운로드 지정

디자이너가 Exportable 설정을 해야 개발자가 추출 가능합니다. 속성 창에서 체크박스를 활성화하여 이미지, 아이콘을 내보낼 수 있습니다.

3) 협업 중 자동 업데이트

XD 클라우드 기반 프로젝트는 업데이트 시 실시간 반영되기 때문에 협업에 효율적입니다. 공유 링크만으로도 최신 상태를 유지할 수 있습니다.

 

미리캔버스 사용법 기초 가이드

미리캔버스 사용법 기초 가이드

3. 드래그앤드롭으로 직접 추출

XD는 일부 오브젝트에 한해, 작업창에서 데스크탑으로 바로 끌어다 놓는 방식으로 이미지 저장이 가능합니다. SVG 포맷으로 저장되며, 웹 퍼블리싱에 적합합니다.

1) SVG 지원 요소만 가능

아이콘, 벡터 기반 도형 등 벡터 구조를 가진 객체만 SVG로 추출 가능합니다. 비트맵 이미지는 이 방식으로 추출되지 않습니다.

2) 단일 요소에만 적용

여러 요소를 그룹 지정한 경우 이 기능이 비활성화될 수 있으므로, 단일 아이콘이나 도형 중심으로 활용하는 것이 좋습니다.

3) 이름 자동 지정

객체명에 따라 자동으로 파일명이 지정되며, 작업 파일 정리에 유리합니다. 이름 정리를 사전에 해두면 생산성이 높아집니다.

4. 플러그인 이용한 일괄 이미지 추출

XD에서는 다양한 플러그인을 설치해 기능을 확장할 수 있으며, 이미지 추출을 자동화하는 플러그인도 다수 존재합니다.

1) 대표 플러그인: ‘Batch Export’, ‘Photopea Export’

Batch Export는 한 번에 여러 객체를 PNG 또는 SVG로 추출할 수 있어 효율적입니다. UI 아이콘 세트 등을 만들 때 유용합니다.

2) 플러그인 설치 방법

메뉴에서 ‘플러그인 → 플러그인 찾아보기’로 이동한 후, 검색창에서 원하는 플러그인을 설치하면 됩니다. 로그인 상태 유지 필요합니다.

3) 일괄 추출 시 주의사항

파일명이 동일할 경우 자동 덮어쓰기가 되므로, 객체 이름을 명확히 정리한 후 실행하는 것이 중요합니다.

 

한전 가전 환급 신청 방법 안내

한전 가전 환급 신청 방법 안내

5. 캡처 도구 활용한 이미지 저장

간단하게 XD 화면을 이미지로 저장하고 싶다면, 윈도우 캡처 도구나 맥의 스크린샷 기능을 사용하는 방법도 있습니다. 단, 해상도 손실이 발생할 수 있습니다.

1) 윈도우: Win+Shift+S / 맥: Cmd+Shift+4

화면의 일부를 선택해 캡처할 수 있으며, PNG 포맷으로 저장됩니다. 빠르게 공유하거나 참고용 이미지 저장 시 유용합니다.

2) 해상도 및 품질 한계

실제 디자인 소스를 추출하는 방식이 아니기 때문에 인쇄나 웹 제작에는 부적합합니다. 프리뷰 또는 회의 자료용으로만 사용하는 것이 좋습니다.

3) 포토샵 등으로 보정 가능

간단한 후처리를 원할 경우 포토샵 등으로 해상도와 색감을 조정할 수 있습니다. 그러나 원본 이미지와는 차이가 있을 수 있습니다.

6. 자주 묻는 질문

Q. PNG와 SVG 중 어떤 형식을 선택해야 하나요?

웹 아이콘이나 벡터 도형은 SVG, 이미지 기반 콘텐츠는 PNG가 적합합니다.

Q. XD에서 이미지를 JPG로 저장할 수 있나요?

내보내기 시 포맷을 JPG로 선택하면 배경 포함 이미지로 저장됩니다.

Q. 캡처 방식은 정식 추출 방법인가요?

아니요, 참고용으로만 사용하는 것이며 정식 출력에는 내보내기를 사용하는 것이 좋습니다.

Q. XD 공유 링크에서 사용자도 이미지 저장이 가능한가요?

디자인 스펙 모드에서는 지정된 요소에 한해 PNG 또는 SVG 저장이 가능합니다.

Q. 내보내기 시 투명 배경으로 저장할 수 있나요?

PNG 포맷 선택 시, 배경을 제거한 상태로 추출이 가능합니다.