Adobe XD CC의 아트보드를 사용하여 다양한 디바이스 및 화면용 디자인을 배치하는 방법에 대해 학습합니다. 다양한 사전 설정 크기에서 선택하거나 맞춤형 아트보드 크기를 정의할 수 있습니다.
아트보드는 일반적으로 모바일 앱 또는 웹 사이트의 일부로 디자인하려는 각각의 화면을 나타냅니다.
단일 Adobe XD 파일에 여러 아트보드를 포함시킬 수 있습니다. 예를 들어 하나의 파일 내에 모바일, 태블릿 및 데스크탑 기반의 웹 환경에 대한 아트보드를 각각 정의할 수 있습니다. 또는 하나의 파일에 단일 플랫폼용 사용자 플로우에 대해 여러 화면을 디자인할 수도 있습니다.
프로젝트를 시작할 때 시작 화면에서 아트보드에 대해 사전 설정된 크기를 선택할 수 있습니다. 사전 설정을 사용하지 않고 맞춤형 크기의 아트보드를 제작할 수도 있습니다. 선택한 아트보드 크기로 새 파일을 생성하고 나면 아트보드 툴을 사용하여 필요한 만큼 아트보드를 추가할 수 있습니다.
프로젝트의 모든 아트보드를 보려면 툴바에서 
를 클릭하여 레이어 패널을 엽니다.
아트보드 제작
처음으로 프로젝트나 파일을 제작할 때 시작 화면에서 여러 사전 설정 중 하나의 아트보드 크기를 선택할 수 있습니다. 맞춤형 크기를 지정하려면 [사용자 정의]를 선택하고 픽셀 단위로 크기를 지정합니다.
기존 파일에 더 많은 아트보드를 추가하려면 아트보드 툴을 클릭합니다. 그런 다음 오른쪽 패널에 있는 사전 설정 중 하나를 클릭하고 아트보드를 배치하고자 하는 위치를 클릭합니다.
맞춤형 크기의 아트보드를 정의하려면 아트보드 툴을 클릭하고 페이스트보드 영역에 원하는 아트보드를 직접 그립니다.
스크롤 가능 아트보드 제작
세로 스크롤 막대로 스크롤 가능한 아트보드를 만들 수 있습니다.
이번 버전의 Adobe XD는 가로 스크롤 기능을 지원하지 않습니다.
- 사전 설정 크기를 사용하여 제작한 아트보드: 콘텐츠가 미리 정해진 아트보드의 길이를 초과하는 경우 아트보드의 하단을 원하는 길이만큼 간단히 아래로 드래그하고 디자인을 계속할 수 있습니다. 아트보드에 있는 점선은 스크롤 가능 콘텐츠의 시작 위치를 가리킵니다.
스크롤 기능을 비활성화하려면 아트보드를 선택한 다음 속성 관리자의 스크롤 섹션에서 [없음]을 선택합니다.
- 맞춤형 크기가 적용된 아트보드: 맞춤형 아트보드의 스크롤 기능을 활성화하려면 아트보드를 선택한 다음 속성 관리자의 스크롤 섹션에서 [세로]를 선택합니다. 또한 스크롤 후 반드시 표시되어야 하는 아트보드의 길이인 뷰포트 높이를 지정합니다. 뷰포트 높이는 스크롤로 표시되는 아트보드의 높이보다 낮아야 합니다.
스크롤 기능을 비활성화하려면 속성 관리자의 스크롤 섹션에서 [없음]을 선택합니다.
아트보드 선택
아트보드를 선택하려면 선택 툴을 클릭하고 다음 작업 중 하나를 수행합니다.
- 아트보드 제목 클릭
- 아트보드의 배경 더블 클릭
아트보드 복사 및 크기 조정
Mac의 경우 Option 키를 누른 상태로 아트보드를 드래그하여 복사합니다. Windows의 경우 Alt 키를 누른 상태로 아트보드를 드래그합니다.
또는 레이어 패널에서 아트보드의 이름을 마우스 오른쪽 버튼으로 클릭하고 복사를 선택합니다. 그런 다음 다시 마우스 오른쪽 버튼을 클릭하고 붙여넣기를 선택합니다.
아트보드의 크기를 변경하려면 해당 아트보드를 클릭하고 가장자리에 표시되는 원형 핸들을 사용합니다.
아트보드 재배열
아트보드 제목을 클릭하고 이를 새 위치로 드래그합니다.
레이어 패널에서 아트보드를 드래그하여 아트보드 목록의 순서를 변경할 수 있습니다. 단, 이렇게 하면 아트보드의 누적 순서만 변경되고 해당 위치(X 및 Y 좌표)는 바뀌지 않습니다.
아트보드 이름 변경
기본적으로 아트보드는 선택한 사전 설정에 따라 명명되며 순차적으로 번호가 매겨집니다. 내 아트보드에 대해 맞춤형 이름을 지정하려면 기본 이름을 더블 클릭하고 해당 아트보드의 새 이름을 입력합니다.
레이어 패널에서 아트보드의 이름을 변경할 수도 있습니다. 아트보드 이름을 더블 클릭하거나 아트보드 이름을 마우스 오른쪽 버튼으로 클릭하고 [이름 변경]을 선택합니다.
아트보드 정렬 및 배치
여러 아트보드를 윤곽 선택하고 속성 관리자에서 [정렬 및 배치] 옵션을 클릭합니다.
여러 아트보드를 선택하는 경우 아트보드가 완전히 선택되었는지 확인해야 합니다. 아트보드가 부분적으로 선택되면 아트보드 자체가 아닌 해당 아트보드 내의 오브젝트가 선택됩니다.
아트보드 간 요소 복사 및 이동
임의의 아트보드에서 다른 아트보드로 모든 요소를 자유롭게 이동할 수 있습니다. 요소를 간단히 드래그하여 필요한 아트보드 위에 놓습니다.
요소를 복사하려면 Command + C(Mac) 또는 Ctrl + C(Windows) 키를 사용합니다. 요소를 붙여넣으려는 아트보드를 클릭하고 Command + V(Mac) 또는 Ctrl + V(Windows)를 클릭합니다.
Option 키(Mac) 또는 Alt 키(Windows)를 누른 상태로 요소를 드래그하여 아트보드 간 요소를 복사할 수도 있습니다.
오브젝트를 붙여넣을 때 아트보드에 맞지 않는 오브젝트의 컬렉션이 있는 경우 이들 오브젝트는 모두 대상 아트보드의 중앙에 붙여넣어지게 됩니다.
아트보드 주변의 회색 영역을 페이스트보드로 사용할 수 있습니다. 페이스트보드에 모든 요소를 배치하고 필요한 경우 이들 요소를 아트보드로 복사하거나 이동할 수 있습니다.
모든 아트보드를 내보낼 때 어떤 아트보드에도 속하지 않은 페이스트보드의 요소는 내보내지지 않습니다. 요소의 일부가 아트보드에 놓인 경우에는 아트보드에 있는 요소의 부분만 내보내집니다.
여러 아트보드를 동시에 잘라내기, 복사, 이동, 크기 조정, 확대/축소 및 삭제
아트보드를 동시에 편집하려면 여러 아트보드를 윤곽 선택합니다.
선택 툴을 선택하여 선택하려는 여러 아트보드 주위로 선택 윤곽을 드래그합니다.
여러 아트보드를 선택하는 경우 아트보드가 완전히 선택되었는지 확인해야 합니다. 아트보드가 부분적으로 선택되는 경우에는 아트보드 자체가 아닌 해당 아트보드 내의 오브젝트가 선택됩니다.
선택한 아트보드 주위로 테두리 상자가 나타납니다.
- 크기 조정: 테두리 상자의 핸들을 드래그하여 선택한 아트보드의 크기를 조정합니다.
- 잘라내기, 복사 및 붙여넣기: Ctrl 키를 누른 상태로 클릭(Mac)하거나 마우스 오른쪽 버튼을 클릭(Windows)하여 선택한 모든 아트보드에 대해 잘라내기, 복사 및 붙여넣기 작업을 할 수 있는 메뉴를 엽니다.
- 확대/축소: 툴바의 확대/축소 아이콘을 클릭하거나 키보드의 Z 키를 눌러 확대/축소 모드로 들어갑니다. 확대/축소 모드에서 다음과 같은 작업을 할 수 있습니다.
- 확대: Adobe XD 캔버스의 아무 곳을 클릭하거나 필요한 아트보드를 클릭합니다. 또는 확대할 영역을 윤곽 선택합니다.
- 축소: Option(Mac) 또는 Alt(Windows) 키를 누른 상태로 클릭합니다.
다음과 같은 방법으로 확대/축소 모드를 임시로 활성화하여 실제로 확대/축소 모드로 들어가지 않고도 빠르게 확대 또는 축소할 수 있습니다.
- Space + Cmd(Mac) 또는 Space + Ctrl(Windows) 키를 누른 다음 아트보드의 확대할 영역을 클릭하거나 윤곽 선택합니다.
- Mac의 경우 Space + Cmd + Opt 키를 눌러 축소합니다.
Mac의 경우 아트보드의 특정 오브젝트를 확대하려면 오브젝트를 선택한 다음 보기 > 선택 영역 확대/축소 또는 ⌘ 3을 선택합니다. Windows의 경우 Ctrl + 3 키보드 단축키를 사용합니다.
- 삭제: 키보드에서 Delete 키를 누르거나 Ctrl 키를 누른 상태로 클릭(Mac) 또는 마우스 오른쪽 버튼을 클릭(Windows)하여 선택한 모든 아트보드를 삭제할 수 있는 메뉴를 엽니다. 또는 레이어 패널에서 하나 이상의 아트보드를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 [삭제]를 선택할 수 있습니다.