Adobe XD의 2019년 6월 및 7월 릴리스.

Adobe XD의 이전 릴리스에서 소개된 기능 요약은 기능 요약 | 이전 릴리스를 참조하십시오.

xd-mnemonic

Adobe XD는 웹 및 모바일 앱에 대한 사용자 경험을 디자인하고 시험 제작하기 위한 벡터 기반의 툴입니다. 와이어프레임, 시각 디자인, 인터랙션 디자인, 시험 제작, 미리보기 및 공유 기능이 모두 하나의 강력한 툴로 통합되어 이들 작업 간을 간편하게 전환할 수 있습니다.

XD는 UX/UI 디자이너, 인터랙션 디자이너, 경험 디자이너, 제품 디자이너, 웹 디자이너, 앱 디자이너, 시각 디자이너, 기업가 등 모든 유형의 크리에이터를 위해 제작되었습니다.


Overview

Adobe XD 22의 새로운 기능

XD의 2019년 8월 릴리스에는 다음과 같은 향상된 기능이 추가되었습니다. 

Photoshop에서 편집

Photoshop에서 편집

XD는 Photoshop에서 바로 XD 이미지를 열고, 편집하고, 실시간으로 업데이트할 수 있는 기능을 제공함으로써 Adobe Photoshop과 긴밀하게 통합됩니다. Photoshop에서 이미지를 편집하고 저장하면 XD는 병합된 파일을 저장하고 편집된 파일 대신 XD에 비트맵을 배치합니다. 

자세한 내용은 외부 에셋을 사용하여 작업을 참조하십시오

이 비디오를 통해 Photoshop에서의 XD 이미지 편집에 대해 자세히 알아보십시오.

시청 시간: 3분 20초


개선된 플러그인 패널

플러그인 패널

최신 버전의 XD를 사용하면 디자인 캔버스와 함께 XD 사용자 환경에서 바로 XD 플러그인을 실행하고 인터랙션할 수 있습니다. 레이어 및 에셋 패널과 마찬가지로 새로운 플러그인 패널을 통해 XD 내에서 플러그인을 간편하게 조회하고 수정할 수 있습니다. 이는 XD 디자인 작업 시 창의적인 흐름 유지하는 데 도움이 됩니다. 

자세한 내용은 플러그인 보기 및 설치를 참조하십시오.

이 비디오를 통해 개선된 플러그인 패널에 대해 자세히 살펴보십시오.

시청 시간: 4분 30초


디자인 사양의 CSS 스니펫

디자인을 기능적인 웹 사이트로 변환하는 데 도움이 되도록 디자인 사양에서 CSS 코드 스니펫을 복사하여 코드에 붙여넣을 수 있습니다.

CSS 코드는 디자인 사양을 게시할 때 출력 대상으로 개발 목적으로 공유 창에서 을 선택하면 자동으로 생성됩니다. 디자인 사양을 게시하면 XD는 선택한 레이어에 대한 CSS 코드 스니펫을 자동으로 표시합니다. 

CSS 스니펫
CSS 스니펫

자세한 내용은 XD의 디자인 사양 검사를 참조하십시오.

이 비디오를 통해 디자인 사양에서의 CSS 스니펫에 대해 자세히 살펴보십시오.

시청 시간: 2분 58초


구성 요소 경계 개선

구성 요소는 다양한 오버라이드를 지원하고 다양한 화면 크기에 맞도록 완벽하게 크기를 조정할 수 있지만 효과를 적용하거나 오브젝트를 재구성할 때는 사용하기 어려울 수 있습니다. 이전 버전의 XD에서는 원본 마스터 구성 요소의 범위를 벗어나는 오브젝트를 추가하면 내용이 잘렸습니다. 구성 요소 경계와 관련된 문제를 해결하려면 마우스 오른쪽 버튼을 클릭하여 콘텐츠에 경계 맞추기를 사용하십시오.

새로운 구성 요소:

  • 자동으로 적용되는 새로운 경계 정의 
  • 그림자 및 흐림 효과가 구성 요소 테두리 상자 외부에서 렌더링
  • 경계 영역이 구성 요소 내의 모든 콘텐츠에 맞춤
콘텐츠에 경계 맞추기
콘텐츠에 경계 맞추기

이 비디오를 통해 개선된 구성 요소 경계에 대해 자세히 알아보십시오.

시청 시간: 4분


프랙셔널 픽셀 감소

HiDPI 화면을 디자인할 때 프랙셔널 픽셀로 인해 내용이 왜곡될 수 있습니다. XD 22.0부터 디자인 방해 요인과 이미지 왜곡 문제를 없애기 위해 XD는 오브젝트, 구성 요소 및 이미지 마스크의 그룹 크기를 변경할 때 픽셀 값을 반올림합니다. 단, XD는 XD 22.0 이전에 제작된 콘텐츠의 프랙셔널 값은 그대로 유지합니다.  

이 비디오를 통해 프랙셔널 픽셀 개선 사항에 대해 자세히 알아보십시오.

시청 시간: 3분 20초


Adobe XD 21의 새로운 기능

개발 링크에 대한 통합 공유

XD 21.0부터 디자인 사양과 함께 인터랙티브 프로토타입 정보가 포함되어 개발 링크에 대한 공유 기능이 더욱 개선되었습니다. 공유 링크의 사양 보기 토글 아이콘()을 클릭하여 디자인 사양과 프로토타입 보기 사이를 전환할 수 있습니다. 

이전 버전의 XD에서는 디자이너가 프로토타입 및 디자인 사양에 대해 서로 다른 두 링크를 공유해야 했으며, 이로 인해 개발자는 디자이너의 의도를 해석하기 위해 두 링크 사이를 번갈아 이동하며 비효율적인 공동 작업을 수행해야 했습니다.

이제 디자이너는 단일 공유 링크를 통해 자신의 디자인에 대한 의도를 보다 효율적으로 전달할 수 있으며 개발자가 필요로 하는 모든 리소스를 제공할 수 있습니다. 개발자는 인터랙션과 지향하는 비헤이비어를 보다 깊이 이해할 수 있으며, 별도의 프로토타입 및 여러 디자인 사양 링크를 전환하지 않아도 되므로 작업 시간을 단축할 수 있습니다. 

단일 링크에서 디자인 사양과 프로토타입 간 전환
단일 링크에서 디자인 사양과 프로토타입 간 전환

A. 사양 보기 토글 아이콘 

이 비디오를 통해 개발 링크에 대한 통합 공유에 대해 자세히 알아보십시오.

시청 시간: 2분 55초


자세한 내용은 XD에서 디자인 사양 탐색을 참조하십시오.

공유 링크에서의 격자 보기 모드

XD 21.0부터 Adobe XD에서 디자인 사양 보기 UX 플로우가 완전히 새롭고 효율적이며 탐색 가능한 격자 보기로 대체되었습니다. 프로토타입 및 디자인 사양에서의 격자 보기는 관련자 또는 개발자가 가장 관련성이 높은 아트보드로 빠르게 이동할 수 있도록 해 줍니다.

이전 버전의 XD에서는 프로토타입을 조회하는 모든 사용자가 자신에게 필요한 아트보드를 찾기 위해 각각의 아트보드를 모두 클릭해 보아야 했습니다. 

공유 링크에서의 격자 보기 모드
디자인 사양 링크에 대한 UX의 플로우와 격자 보기 비교

격자 보기 모드에서 리뷰어는 다음과 같은 작업을 수행할 수 있습니다.

  • 모든 화면에 대한 썸네일 이미지 보기
  • 해당 아트보드에 달린 댓글 수 확인
  • 이름으로 아트보드 검색
  • 연결된 화면 아이콘을 클릭하여 해당 아트보드에 연결된 모든 화면 조회

이러한 변경 사항은 다음과 같은 방식으로 개발자뿐만 아니라 관련자에게도 도움이 됩니다.

  • 개발자: UX 플로우를 간소화되고 통합된 모든 아트보드 보기로 대체합니다.
  • 관련자: 여러 화면에서 XD 프로토타입을 탐색하고 관련성이 가장 높은 프로토타입으로 바로 이동합니다.
격자 보기
격자 보기

A. 아트보드에 달린 댓글 수 B. 연결된 화면 아이콘을 클릭하여 연결된 화면 보기 C. 아트보드 첫 번째 카드의 연결된 화면 

이 비디오를 통해 공유된 링크의 격자 보기에 대해 자세히 알아보십시오.

시청 시간: 2분 13초


문서 참여

클라우드 문서에서의 편집 내용 충돌과 작업이 중복되는 문제를 방지하기 위해 다른 디자이너가 동일한 클라우드 문서에서 공동 작업을 수행할 때 이를 시작적으로 표시해 주는 인디케이터가 XD에 도입되었습니다. 다른 디자이너가 동일한 클라우드 문서에서 공동 작업을 수행하고 있다면 이 디자이너의 프로필 아바타가 표시됩니다.

클라우드 문서 참여
문서 참여

문서 참여에 대한 자세한 내용은 XD의 클라우드 문서를 참조하십시오.

모바일 웹 프로토타입에 댓글 달기

리뷰어는 종종 이동 중에 모바일 디바이스에서 프로토타입에 액세스하여 댓글을 달거나 다른 사람들이 입력한 내용을 조회하곤 합니다. 

XD의 이번 최신 릴리스를 통해 이제 데스크탑 웹 브라우저뿐만 아니라 모바일 디바이스에서도 웹 프로토타입을 조회하고 댓글을 달 수 있습니다. 이는 검토 주기를 가속화하고 관련자들이 더욱 쉽고 빠르게 피드백을 제공하는 데 유용합니다. 

자세한 내용은 Adobe XD에서 프로토타입을 사용하여 작업을 참조하십시오. 

모바일 웹 프로토타입에 댓글 달기

이 비디오를 통해 모바일 웹 프로토타입에 댓글을 다는 방법에 대해 살펴보십시오.

시청 시간: 3분


하위 범위 텍스트 보기 및 검사

XD 21.0부터 다양한 스타일의 텍스트가 있는 경우 텍스트 요소 내에서 하위 범위에 대한 마우스 오버 기능을 사용할 수 있습니다. 이렇게 하면 디자인 사양이 동일한 스타일의 텍스트 요소 내에서 유사한 하위 범위를 강조 표시하며, 사용자는 각각의 속성에 빠르게 액세스할 수 있습니다. 이전에는 텍스트 요소 내에서 여러 텍스트 스타일을 사용하는 경우 해당 스타일을 분리할 수 없었으며, 동일한 스타일을 사용하는 하위 범위를 파악하기가 어려웠습니다.

자세한 내용은 XD의 디자인 사양 검사를 참조하십시오. 

대량 텍스트 내의 하위 범위 속성
대량 텍스트 내의 하위 범위 속성

다각형 도구

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

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