Adobe XD에서 게시된 디자인 사양 보기를 통해 플로우, 치수 및 스타일을 검사하고 댓글을 추가할 수 있습니다.

디자인 사양 기능은 디자이너와 개발자 사이의 커뮤니케이션 방식을 개선하기 위한 초기 단계의 기능입니다. 디자이너는 XD에서 공개 URL을 생성하여 개발자와 공유할 수 있습니다. 개발자는 해당 링크에 액세스하여 플로우, 치수 및 디자인 스타일을 검사하고 댓글을 추가할 수 있습니다.

시작 전 조치 사항

디자인 사양을 조회하기 위해서는 다음과 같은 사항이 필요합니다.

  • 디자인 사양에 대한 링크 (디자이너로부터 수신)
  • 데스크탑 브라우저 및 인터넷 연결. 지원되는 브라우저 버전에 대한 자세한 내용은 시스템 요구 사항을 참조하십시오.

참고: 모바일 브라우저는 디자인 사양 보기를 지원하지 않으며 권장되지 않습니다.

참고:

디자인 사양 링크는 공개용이며 링크를 가지고 있는 누구나 액세스할 수 있습니다. 디자인 사양으로의 보다 원활한 액세스를 위해 2018년 3월 21일부로 게시된 디자인 사양을 조회할 때 더 이상 Adobe ID를 사용하여 로그인하지 않아도 됩니다.

자세한 내용은 Adobe XD용 디자인 사양으로 변경을 참조하십시오.

최종 사용자 경험 워크플로 보기

개발자는 UX 플로우 보기 모드에서 아트보드의 순서와 흐름을 조회할 수 있습니다.

디자인 사양에서의 모든 화면에 대한 이 보기 기능은 매우 유용합니다. 이를 통해 개발자는 다음과 같은 사항을 이해할 수 있습니다.

  • 개발이 필요한 화면의 수 (개발 작업에 대한 계획 수립 시 유용) 
  • 디자인 사양에서의 순서 및 흐름 (최종 사용자 워크플로를 이해하는 데 유용)
  • 디자인 사양이 마지막으로 업데이트된 날짜
디자인 사양 개요
디자인 사양 개요

이 보기 모드에서 다음과 같은 작업을 수행할 수 있습니다. 

  • 이름으로 특정 화면을 검색하고 조회합니다. 화면이 뷰포트 내에 있으면 이 화면은 강조 표시됩니다. 화면이 뷰포트 내에 없으면 디자인 사양이 해당 화면으로 자동 스크롤합니다.
  • 각각의 화면에 마우스를 가져다 대어 이들 화면이 서로 어떻게 연결되는지 확인할 수 있습니다. 
  • 확대/축소 및 팬 기능을 사용하여 특정 부분을 자세히 살펴볼 수 있습니다. UX 플로우 보기 모드에서 디자인 사양의 화면이 뷰포트에 모두 표시되고 나면 더 이상 패닝할 수 없습니다. 
    확대/축소 키보드 단축키:
    • CMD/Ctrl + 마우스 휠
    • CMD/Ctrl + +/- 키로 확대/축소
    • CMD+0으로 확대/축소 재설정

패닝 키보드 단축키:
스페이스바를 누른 상태로 클릭 후 드래그하거나 Shift + 화살표 키 (보다 신속한 패닝)

  • 사용할 수 있는 기타 키보드 단축키:
    • 화면에서 포커스를 설정하고 왼쪽 및 오른쪽 화살표 키를 사용하여 UX 플로우 보기 모드에서 화면 전체를 이동할 수 있습니다.
    • 사양 보기로 이동하려면 Enter를 누릅니다. UX 플로우 보기로 돌아가려면 Esc를 누릅니다.
  • 아트보드를 자세히 살펴보려면 해당 아트보드를 클릭합니다.
  • 댓글 보기를 클릭하여 디자인 사양 화면에서 사용자의 댓글을 조회합니다.

디자인 사양을 사용하는 동안 인앱 도움말이 가이드 역할을 해 줍니다. 팬 및 줌, 클릭하여 복사, 연결 유지 등의 기능과 관련된 힌트를 제공하는 알림이 화면 아래쪽에 표시됩니다. 

디자인 사양 검사

기본 보기 모드에서는 화면에서 사용된 화면 세부 정보, 색상, 문자 스타일 및 대상이 표시됩니다. 접이식 화살표를 사용하여 개별 섹션을 펼치거나 접을 수 있습니다.

아트보드를 클릭하여 해당 아트보드의 치수를 조회할 수도 있습니다. 

화면 오른쪽의 속성 창에서 다음과 같은 작업을 수행할 수 있습니다.

  • 화면 세부 정보와 해당 화면에서 사용된 고유 색상과 문자 스타일, 연결된 대상 아트보드를 조회합니다.
  • 속성 패널에 표시되는 옵션을 펼치거나 접습니다. 
  • 오른쪽 창에서 색상이나 문자 스타일에 마우스를 가져다 대면 화면의 어느 위치에서 이들 인스턴스가 사용되는지 확인할 수 있습니다. 색상 또는 문자 스타일을 복사하려면 해당 색상이나 문자 스타일을 클릭합니다. 
  • 화면에서 사용된 색상에 대한 16진수 색상 코드 및 맞춤 라벨을 조회합니다.
  • 화면에서의 전환, 오버레이, 음성 및 자동 애니메이트와 같은 다양한 인터랙션의 세부 정보를 조회합니다.
  • 아트보드와 관련된 댓글을 조회합니다. 댓글을 확인하려면 댓글 보기 아이콘을 클릭하여 댓글 패널을 엽니다. 이 댓글 보기 아이콘에는 해당 아트보드에서 해결되지 않은 댓글의 수를 나타내는 마커와 숫자도 함께 표시됩니다.

참고:

디자이너가 에셋 패널에서 색상 라벨 이름을 변경한 경우에만 맞춤 라벨을 볼 수 있습니다.

텍스트 속성 검사, 문자 스타일 및 내용 복사, 치수 보기
텍스트 속성 검사, 문자 스타일 및 내용 복사, 치수 보기

디자인 사양 검토 및 댓글 달기

XD 10.0 릴리스부터 디자인 사양에 프로토타입과 동일한 댓글 기능이 추가됩니다. 디자인 사양에 댓글을 달고, 댓글 핀을 사용하여 정확한 위치에 댓글을 고정하고, 필요한 경우 핀을 옮길 수 있습니다. 링크를 탐색할 때 해당 댓글과 관련 답글이 문맥상 그대로 유지됩니다. 제작자에게 전송되는 댓글 알림 이메일에 해당 아트보드로 직접 연결되는 문맥 링크가 제공됩니다. 개발자가 자신의 브라우저를 새로 고침하면 내가 응답한 내용이 반영됩니다. 

자신의 댓글을 고정하거나 이동하여 아트보드의 특정 영역을 가리키도록 할 수도 있습니다. 댓글을 고정하려면 핀 배치를 클릭한 다음 아트보드의 특정 위치를 클릭합니다. 그런 다음 댓글을 입력하고 제출을 클릭하여 댓글을 제출합니다.

 취소 버튼을 사용하여 댓글 필드에 입력한 댓글을 취소할 수도 있습니다.

일반 댓글에서 고정된 댓글로 전환할 수도 있습니다. 댓글 알림 이메일은 홈 아트보드뿐만 아니라 댓글이 작성되는 아트보드로 직접 연결되는 링크도 제공합니다. XD는 고정된 모든 댓글에 번호를 할당합니다. 이들 번호는 댓글 패널의 각 댓글에도 반영되어 디자이너가 해당 댓글의 맥락을 쉽게 파악할 수 있습니다.

댓글 옵션
댓글 옵션
댓글 작성
댓글 옵션

제작자는 댓글을 확인하고 관련 조치를 취한 후 이를 “해결됨”으로 표시할 수 있습니다. 해결된 댓글 보기를 클릭하여 해결된 댓글을 확인할 수 있습니다. 댓글이 “해결됨”으로 잘못 표시되었다고 판단되는 경우에는 미해결 항목으로 이동을 클릭하여 해당 댓글을 계속 열어 둘 수 있습니다.

색상 포맷 변경

색상 형식을 변경할 수 있습니다. 예를 들어 주로 HSLA에서 작업하는 경우 드롭다운 목록을 사용하여 색상 형식을 HSLA로 변환할 수 있습니다. 이 변경 내용은 전체 세션에 걸쳐 영구적으로 적용되며, 다른 화면을 조회할 때에도 동일한 색상 형식이 사용됩니다.

색상 형식을 다른 형식으로 변환
색상 형식을 다른 형식으로 변환

치수 검사

화면에 표시되는 요소의 치수를 검사할 수 있습니다. 화면에서 요소를 선택하고 높이 및 폭 좌표를 조회합니다.

오브젝트 사이의 간격을 살펴보려면 요소를 선택한 다음 화면 상의 다른 요소에 마우스를 가져다 대고 상대 거리를 확인합니다.

오브젝트의 치수 검사
오브젝트의 치수 검사

텍스트 속성 검사

화면에 표시되는 텍스트의 속성을 검사할 수도 있습니다. 텍스트의 라인을 선택하고 해당 문자 스타일을 확인합니다. 디자인 사양에서 문자 스타일, 색상 값 및 내용을 복사할 수도 있습니다.

Adobe XD는 단위 기반이 아니라 요소 사이의 관계에 중점을 둡니다. 예를 들어 375x667 단위에서 iPhone 6/7 아트보드를 디자인 중이라면 10 단위 글꼴 크기의 입력 방식을 사용하게 되며, 디자인의 실제 크기가 어떻게 설정되었는지에 상관없이 해당 관계는 동일하게 유지됩니다.

단, 디자인 사양은 플랫폼에 따라 px, pt 및 dp와 같은 기본 단위를 단위가 없는 기준 치수에 추가하므로 현재 개발 건에 대한 대상 플랫폼에서의 치수를 보다 수월하게 이해할 수 있습니다. 디자인 사양에서 치수 단위를 다른 단위로 변경할 수도 있습니다.

치수 단위 변경
치수 단위 변경

그리드 속성 보기 및 검사

디자이너가 디자인에 레이아웃 그리드를 사용했다면 디자인 사양에서 화면을 조회할 때 이를 보고 검사할 수 있습니다. 

나열되는 값은 디자이너가 설정한 값입니다. 속성 라벨에 마우스를 가져다 대면 이들이 표시되는 화면에서 강조 표시됩니다. 열 또는 정사각형의 수를 설정할 수 있습니다. 레이아웃 그리드를 끄려면 그리드 확인란을 선택 해제합니다.

디자인 사양 링크를 게시하기에 앞서 개발자가 조회하도록 하려는 아트보드의 레이아웃 그리드 기능을 활성화 상태로 두어야 합니다. 기본적으로 디자인에서 사용되지 않는 레이아웃 그리드는 디자인 사양 링크에 표시되지 않습니다.

레이아웃 그리드
레이아웃 그리드
정사각형 그리드
정사각형 그리드

오버레이 검사

디자인 사양 보기에서 개발자는 UX 플로우 화면에서의 오버레이 연결을 검사하고 소스 화면이나 아트보드 위로 오버레이를 호출할 수 있습니다.

아트보드 위로 마우스를 가져다 대거나 아트보드 또는 화면을 Shift 키를 누른 상태로 클릭하면 UX 플로우에 해당 오버레이가 적용되었음을 나타내는 점선 연결이 표시됩니다.

오버레이 검사
오버레이 검사
오버레이 식별을 위한 점선 연결
오버레이 식별을 위한 점선 연결

적용된 오버레이를 검사하려면 속성 패널의 오버레이 섹션으로 이동한 다음 오버레이 섹션에 있는 썸네일을 클릭하거나 디자인 사양에서 핫스팟을 Shift 키를 누른 상태로 클릭합니다. 

인터랙션
인터랙션

적용된 특정 오버레이에 대해 다음과 같은 화면 세부 정보, 스타일 및 대상 정보를 검사하고 추정할 수 있습니다.

  • 뷰포트 크기: 페이지에 액세스하는 데 사용되는 디바이스의 크기에 따라 바뀌는, 보이는 영역의 크기를 표시합니다.
  • 디자인 크기: 화면의 디자인 크기를 표시합니다.
  • 오버레이 위치: 베이스 아트보드에서의 소스 화면에 대한 참조와 함께 px, pt 및 dp 형식으로 오버레이의 위치를 표시합니다. 
  • 색상: 사용된 색상을 RGBA, 16진수 및 HSLA 형식으로 표시합니다.
  • 문자 스타일: 문자 스타일을 px, pt 및 dp 치수로 표시합니다. 오버레이 위치에 대한 형식은 설정한 문자 스타일에 따라 바뀝니다.
  • 대상: 대상 아트보드에 대한 정보를 표시합니다.

베이스 아트보드로 돌아가려면 Esc 또는 오버레이 닫기를 누릅니다.

고정된 요소 검사

디자인에서 고정된 요소를 검사하려면 디자인 사양의 왼쪽 위에 있는 핀 아이콘을 클릭합니다. 이 아이콘은 디자인 요소가 아트보드에서 고정되었음을 나타냅니다. 

고정된 요소 검사
고정된 요소 검사
고정 위치
고정 위치

핫스팟 보기 및 검사

디자인 사양의 핫스팟을 검사하려면 오버레이 또는 대상 섹션에 표시되는 아티팩트를 클릭하거나 디자인 사양에서 Shift 키를 누른 상태로 핫스팟을 클릭합니다. 

화면 간 이동

UX 플로우 보기 모드에서 해당 사양의 모든 화면에 대한 개요를 확인할 수 있습니다. 이 모드에서 개별 화면을 클릭하고 각각의 화면 사이를 이동할 수 있습니다.

화면 간 이동
화면 간 이동

화면의 아래쪽에서 홈 아이콘을 클릭하여 홈 화면으로 이동합니다. 왼쪽과 오른쪽 화살표를 클릭하여 하나의 화면에서 다른 화면으로 이동할 수 있습니다. 

화면에서 연결된 오브젝트를 클릭하면 오른쪽에 대상 화면이 표시됩니다. 이동하려면 대상 화면을 클릭합니다.

디자인 사양 보기에서 UX 플로우 보기로 돌아가려면 키보드 상의 Esc 키를 누릅니다.

디자인 사양용 에셋 추출

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

디자인 사양의 에셋 표시

레이어 패널을 열고 아트보드를 선택합니다. 레이어 위로 마우스를 가져다 대고 일괄 내보내기로 표시 아이콘을 클릭합니다. 

일괄 내보내기로 표시
일괄 내보내기로 표시

참고:

그룹에서 특정 에셋을 선택하려면 그룹 아이콘을 클릭하여 그룹 콘텐츠를 펼친 다음 에셋을 선택합니다.

웹에서 에셋 공유 및 다운로드

디자인 사양에서 선택한 모든 에셋과 내 아트보드의 기타 세부 정보를 한 곳에서 다운로드할 수 있는 옵션을 개발자에게 제공할 수 있습니다. 에셋을 고르고 선택할 수 있습니다. 개발자와 디자인 사양 링크를 공유하면 개발자는 웹에서 내보내기로 표시한 모든 에셋을 사용할 수 있습니다. 디자인 사양에는 비트맵과 벡터 에셋이 모두 포함됩니다.

  1. 디자인 사양의 에셋 표시 섹션에 있는 지침을 따르십시오.

  2. 화면 오른쪽 상단에 있는 공유 아이콘을 클릭하고 개발 목적으로 공유를 선택합니다.

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

    공개 링크 만들기 설정
    공개 링크 만들기 설정

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

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

    브라우저에 표시되는 선택한 에셋
    브라우저에 표시되는 선택한 에셋

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

  5. 다운로드하려면 에셋을 개별적으로 또는 여러 에셋을 동시에 선택합니다. Cmd/Ctrl+A 키를 사용하여 모든 에셋을 선택하거나 Shift 키를 사용하여 다중 선택할 수 있습니다. 화면 아래쪽에 에셋이 벡터와 비트맵으로 범주화되어 표시됩니다.

    선택한 에셋 다운로드
    선택한 에셋 다운로드
  6. 벡터 에셋의 포맷을 SVG, PDF 및 PNG로, 비트맵 에셋의 포맷을 PNG 및 PDF로 변경할 수 있습니다. 에셋은 다운로드 폴더에 .zip 파일로 다운로드됩니다.

  7. 개별 에셋을 다운로드하려면 에셋으로 표시된 레이어를 선택할 때 웹의 디자인 사양 패널에 있는 에셋 섹션에서 다운로드 옵션을 선택합니다.

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

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