정사각형 옆에 있는 상자를 클릭합니다.
마지막 업데이트 날짜
2022년 11월 28일
Adobe XD CC에서 정사각형 그리드를 사용하여 이미지 또는 요소를 정확하게 배치하고 정렬하는 방법에 대해 학습합니다.
정사각형 그리드는 오브젝트 및 텍스트를 정렬하는 데 유용한 가이드입니다. 그리기 작업을 할 때 오브젝트의 가장자리가 그리드의 스냅 영역에 들어오면 오브젝트가 그리드에 자동으로 스냅됩니다. 그리드는 또한 아트보드에서 오브젝트나 텍스트를 배치할 때 치수를 빠르게 측정하는 데에도 유용합니다.
Adobe XD CC에서 아트보드를 선택하고 속성 관리자의 확인란을 선택하거나 선택 해제함으로써 그리드를 표시하거나 숨길 수 있습니다. 그리드 옵션을 통해 그리드의 간격이나 색상을 변경할 수도 있습니다. 그리드 옵션의 조합을 기본값으로 저장하여 나중에 이를 빠르게 사용할 수 있습니다.
참고:
Adobe XD는 대부분의 측정치 및 글꼴 크기에 대해 CSS 픽셀의 측정 단위나 iOS의 측정치와 동일한 가상 픽셀을 사용합니다. 가상 픽셀은 72dpi 모니터에서 실제 하나의 픽셀 (또는 포인트) 규격과 거의 동일합니다. 현재 Adobe XD의 측정 단위는 변경할 수 없습니다.
그리드 표시 또는 숨기기
아트보드를 선택하고 다음 중 하나를 수행합니다.
- Mac: 보기 > 아트보드 그리드 표시를 선택하거나 키보드 단축키(⌘)를 사용합니다.
- Mac 또는 Windows: 속성 관리자에서 그리드 확인란을 선택합니다.
그리드 환경 설정
속성 관리자의 그리드 패널을 사용하여 그리드의 색상 및 밀도를 맞춤 설정할 수 있습니다.
그리드 색상 변경
그리드의 색상을 변경하려면 다음 단계를 따르십시오.
-
색상 피커가 나타납니다.
색상 피커
색상 피커 -
다음과 같은 옵션을 선택할 수 있습니다.
- 정확한 값을 알고 있는 경우에는 HSBA 또는 16진수 필드에서 HSBA 또는 16진수 값을 지정합니다.
- 색상 필드 및 색상 슬라이더를 사용하여 색상을 조정합니다. 이렇게 하면 숫자로 표시되는 HSBA 및 16진수 값이 해당 값으로 조정됩니다.
- 색상 슬라이더를 사용하거나 퍼센트 단위로 값을 입력하여 채우기의 불투명도를 설정합니다.
참고:Adobe XD는 16진수에 대한 단축 코드도 지원합니다. 예를 들어 0을 입력하고 Return 키를 누르면 Adobe XD는 자동적으로 #000000 코드에 해당하는 색상을 표시합니다. 마찬가지로 #OAOAOA에 대해 OA를, #OOAAFF에 대해 OAF를 입력할 수 있습니다.
색상 대화 상자에서 옵션을 수정하면 그리드 색상이 변경되는 것을 확인할 수 있습니다.
-
색상을 결정하고 나면 보다 간편한 액세스를 위해 색상 피커의 아래쪽에 있는 + 아이콘을 클릭하여 저장할 수 있습니다.
그리드 크기 변경
그리드의 크기를 변경하려면 속성 관리자에서 간격 값을 편집합니다. 작은 숫자를 입력할수록 그리드의 밀도가 증가합니다.
기본 그리드 환경 설정
속성 관리자의 그리드 섹션에서 기본값 사용을 클릭하여 기본 그리드 모양으로 되돌릴 수 있습니다.
기본값으로 설정을 클릭하여 맞춤화된 그리드 환경 설정을 기본값으로 설정할 수 있습니다. 이렇게 하면 해당 파일에 대한 기본 그리드 옵션이 설정됩니다.
그리드에 오브젝트 스냅
그리드에 오브젝트를 스냅하려면 오브젝트의 가장자리 중 하나가 그리드의 스냅 영역에 들어올 때까지 오브젝트를 그리드 쪽으로 드래그합니다.
그리드에 스냅되지 않도록 하려면 마우스를 드래그하여 오브젝트를 그리는 동안 Cmd 키(Mac) 또는 Ctrl 키(Windows)를 누른 상태를 유지합니다.
