아트보드에 다양한 디자인 및 화면용 디자인을 배치하는 방법에 대해 학습합니다. 아트보드에서 그리드를 사용하여 디자인 요소를 배치할 수 있습니다.

아트보드는 일반적으로 모바일 앱 또는 웹 사이트의 일부로 디자인하려는 각각의 화면을 나타냅니다.

단일 Adobe XD 파일에 여러 아트보드를 포함시킬 수 있습니다. 예를 들어 하나의 파일 내에 모바일, 태블릿 및 데스크탑 기반의 웹 환경에 대한 아트보드를 각각 정의할 수 있습니다. 또는 하나의 파일에 단일 플랫폼용 사용자 플로우에 대해 여러 화면을 디자인할 수도 있습니다.

프로젝트를 시작할 때 시작 화면에서 아트보드에 대해 사전 설정된 크기를 선택할 수 있습니다. 사전 설정을 사용하지 않고 맞춤형 크기의 아트보드를 제작할 수도 있습니다. 선택한 아트보드 크기로 새 파일을 생성하고 나면 아트보드 툴을 사용하여 원하는 만큼 아트보드를 추가할 수 있습니다.

하나의 XD 파일에 표시되는 다양한 화면에 대한 여러 아트보드
하나의 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)하여 선택한 모든 아트보드에 대해 잘라내기, 복사 및 붙여넣기 작업을 할 수 있는 컨텍스트 메뉴를 엽니다.

삭제

키보드의 Delete 키를 누르거나 Ctrl 키를 누른 상태로 클릭(Mac) 또는 마우스 오른쪽 버튼을 클릭(Windows)하여 선택한 아트보드를 삭제할 수 있는 메뉴를 엽니다. 또는 레이어 패널에서 복수의 아트보드를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 삭제를 선택해도 됩니다.

확대/축소 툴바의 확대/축소 아이콘을 클릭하거나 키보드의 Z 키를 눌러 확대/축소 모드로 들어갑니다. 확대/축소 모드에서 다음과 같은 작업을 할 수 있습니다.

  • 확대: XD 캔버스 상의 임의의 지점을 클릭하거나 필요한 아트보드를 클릭합니다. 또는 확대할 영역을 윤곽 선택합니다.
  • 축소: Option(Mac) 또는 Alt(Windows) 키를 누른 상태로 클릭합니다.

다음과 같은 방법으로 확대/축소 모드를 일시적으로 활성화하여 실제로 확대/축소 모드로 들어가지 않고도 빠르게 확대 또는 축소할 수 있습니다.

  • 확대: Space + Cmd(Mac) 또는 Space + Ctrl(Windows) 키를 누른 다음 아트보드의 영역을 클릭하거나 윤곽 선택합니다.
  • 축소: Space+Cmd+Opt 키를 누릅니다.

Mac의 경우 아트보드의 특정 오브젝트를 확대하려면 오브젝트를 선택한 다음 보기 > 확대/축소를 선택하거나 ⌘ 3을 선택합니다. Windows의 경우 Ctrl + 3 키보드 단축키를 사용합니다.

그리드를 사용하여 아트보드에 요소 배치

XD는 정사각형 그리드와 레이아웃 그리드, 이상 두 가지 유형의 그리드 옵션을 제공합니다. 

정사각형 그리드

정사각형 그리드는 오브젝트 및 텍스트를 정렬하는 데 유용한 가이드입니다. 그리기 작업을 할 때 오브젝트의 가장자리가 그리드의 스냅 영역에 들어오면 오브젝트가 그리드에 자동으로 스냅됩니다.

정사각형 그리드는 또한 아트보드에서 오브젝트나 텍스트를 배치할 때 치수를 빠르게 측정하는 데에도 유용합니다. 

XD의 정사각형 그리드
XD의 정사각형 그리드

레이아웃 그리드

XD에서 레이아웃 그리드를 사용하여 열을 정의할 수 있습니다. 레이아웃 그리드는 디자인의 기본적인 구조를 정의하고 디자인의 각 구성 요소가 다양한 중단점에 대해 반응하는 방식을 정의하는 데 유용합니다.

아트보드에 레이아웃 그리드를 적용하고 나면 요소를 여기에 스냅할 수 있습니다(정사각형 그리드와 유사). 단, 아트보드의 크기를 변경하거나 그리드를 조정할 때 고정된 항목도 함께 크기가 바뀌거나 리플로우되지는 않습니다.

XD의 레이아웃 그리드
XD의 레이아웃 그리드

그리드 표시 또는 숨기기

아트보드를 선택하고 다음 중 하나를 수행합니다.

  • Mac: 보기 > 레이아웃 그리드 표시 또는 보기 > 정사각형 그리드 표시를 선택합니다.
  • Mac 또는 Windows: 속성 관리자의 그리드 드롭다운 목록에서 그리드 유형을 선택하고 해당 그리드 유형 옆에 있는 확인란을 선택합니다.
  • 키보드 단축키: 
    • 정사각형 그리드 표시: 
      • Mac - ⌘ '  
      • Windows - Ctrl + '
    • 레이아웃 격자 표시:
      • Mac - ⇧ ⌘ '
      • Windows - Ctrl + Tab
XD에서 정사각형 또는 레이아웃 그리드 설정
XD에서 정사각형 또는 레이아웃 그리드 설정

그리드를 숨기려면 그리드 확인란을 선택 해제합니다.

정사각형 그리드 환경 설정

정사각형 그리드 옵션을 통해 그리드의 간격이나 색상을 변경할 수 있습니다. 그리드 옵션의 조합을 기본값으로 저장하여 나중에 빠르게 사용할 수 있습니다. 자세한 내용은 기본 정사각형 또는 레이아웃 그리드 환경 설정을 참조하십시오.

참고:

XD는 대부분의 측정치 및 글꼴 크기에 대해 CSS 픽셀의 측정 단위나 iOS의 측정치와 동일한 가상 픽셀을 사용합니다. 가상 픽셀은 72dpi 모니터에서 실제 하나의 픽셀 규격과 거의 동일합니다. 현재 XD의 측정 단위는 변경할 수 없습니다.

그리드 크기 변경

그리드의 크기를 변경하려면 속성 관리자에서 간격 값을 편집합니다. 작은 숫자를 입력할수록 그리드의 밀도가 증가합니다. 

오브젝트를 정사각형 그리드에 스냅

그리드에 오브젝트를 스냅하려면 오브젝트의 가장자리 중 하나가 그리드의 스냅 영역에 들어올 때까지 오브젝트를 그리드 쪽으로 드래그합니다.

오브젝트를 그리는 동안 그리드에 스냅
오브젝트를 그리는 동안 그리드에 스냅

그리드에 스냅되지 않도록 하려면 마우스를 드래그하여 오브젝트를 그리는 동안 Cmd 키(Mac) 또는 Ctrl 키(Windows)를 누른 상태를 유지합니다.

레이아웃 그리드 환경 설정

레이아웃 그리드를 활성화하면 XD는 해당 아트보드에 맞는 열을 알아서 표시해 줍니다. 예를 들어 휴대폰용 아트보드는 태블릿용 기본 레이아웃 그리드보다 더 적고 좁은 열을 가지게 됩니다.

아트보드의 크기를 조정하면 레이아웃 그리드의 열 폭이 새로운 아트보드 크기에 맞게 변경됩니다. 아트보드 상의 오브젝트는 그대로 남게 되며 해당 열과의 관계가 유지되지 않습니다.

아트보드 크기를 변경하는 경우의 레이아웃 그리드 비헤이비어
아트보드 크기를 변경하는 경우의 레이아웃 그리드 비헤이비어

속성 관리자에서 열의 수, 열의 폭, 열 색상, 간격 폭 및 여백 크기에 대한 환경 설정을 조정할 수 있습니다.

레이아웃 그리드를 변경한 후 해당 변경 내용을 기본 값으로 설정하거나 XD의 기본 레이아웃 그리드로 되돌릴 수 있습니다. 자세한 내용은 기본 정사각형 또는 레이아웃 그리드 환경 설정을 참조하십시오.

열 및 간격 속성 변경

필요에 따라 레이아웃 열 속성을 변경할 수 있습니다.

레이아웃 그리드에 포함되는 열의 수를 설정하려면 속성 관리자에서 값을 편집합니다. 열의 수를 변경하면 XD는 자동으로 해당 열의 폭을 다시 계산합니다. 

아트보드의 열 사이의 공간을 간격 폭이라고 합니다. 이 간격 폭은 기본 간격 폭 값을 편집함으로써 정의할 수 있습니다. 

열의 너비를 변경하려면 기본 열 폭 값을 편집합니다.

XD의 레이아웃 그리드 설정
XD의 레이아웃 그리드 설정

여백 변경

레이아웃 그리드 설정 시 여백의 크기를 바꿀 수 있습니다. 

왼쪽과 오른쪽의 여백을 동일하게 조정하려면 [연결된 왼쪽/오른쪽 여백] 아이콘을 클릭하고 여백의 값을 편집합니다.

모두 네 곳의 여백을 각각 개별적으로 조정하려면 [각 측면에 대해 다른 여백] 아이콘을 클릭한 다음 각 여백의 값을 편집합니다.

왼쪽 및 오른쪽 여백의 크기를 동일하게 편집
왼쪽 및 오른쪽 여백의 크기를 동일하게 편집
여백의 크기를 개별적으로 편집
여백의 크기를 개별적으로 편집

정사각형 또는 레이아웃 그리드 색상 변경

정사각형 또는 레이아웃 그리드의 색상을 변경하려면 다음 절차를 수행하십시오.

  1. 정사각형 그리드의 경우 정사각형 크기, 레이아웃 그리드의 경우 옆에 있는 상자를 클릭합니다. 

    색상 피커가 나타납니다.

    그리드에서 편집
    그리드에서 편집
  2. 다음과 같은 옵션을 선택할 수 있습니다.

    • 정확한 값을 알고 있는 경우에는 HSBA 또는 16진수 필드에서 HSBA 또는 16진수 값을 지정합니다.
    • 색상 필드 및 색상 슬라이더를 사용하여 색상을 조정합니다. 이렇게 하면 숫자로 표시되는 HSBA 및 16진수 값이 해당 값으로 조정됩니다.  
    • 색상 슬라이더를 사용하거나 퍼센트 단위로 값을 입력하여 채우기의 불투명도를 설정합니다. 알파를 0으로 설정하면 레이아웃 그리드가 윤곽선 보기로 전환됩니다.
    • 스포이드를 사용하여 아트보드에서 색상을 선택합니다.

    참고:

    Adobe XD는 16진수에 대한 단축 코드도 지원합니다. 예를 들어 0을 입력하고 Return 키를 누르면 XD는 자동으로 #000000 코드에 해당하는 색상을 표시합니다. 마찬가지로 #0A0A0A에 대해 0A를, #00AAFF에 대해 0AF를 입력할 수 있습니다.

    색상 대화 상자에서 옵션을 수정하면 그리드 색상이 변경되는 것을 확인할 수 있습니다.

  3. 색상을 결정하고 나면 보다 간편한 액세스를 위해 색상 피커의 아래쪽에 있는 + 아이콘을 클릭하여 저장할 수 있습니다.

기본 정사각형 또는 레이아웃 그리드 환경 설정

속성 관리자의 그리드 섹션에서 기본값 사용을 클릭하여 기본 정사각형 또는 레이아웃 그리드 모양으로 되돌릴 수 있습니다.

기본값으로 설정을 클릭하여 맞춤화된 그리드 환경 설정을 기본값으로 설정할 수 있습니다. 이렇게 하면 내 계정에 대한 기본 그리드 옵션이 설정됩니다. 이후 XD로 여는 모든 새 파일에 이 새로운 기본값이 적용됩니다.

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

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