모든 디바이스 크기에 맞게 콘텐츠를 정렬하고 디자인을 향상시키기 위해 프로젝트에 레이아웃 그리드를 설정하는 방법을 살펴봅니다.

필요 항목

샘플 파일은 튜토리얼의 학습 내용을 연습하기 위해 사용할 수 있는 Adobe Stock 에셋입니다. 이 튜토리얼이 아닌 실제 프로젝트에 이 샘플 파일을 사용하려면 Adobe Stock에서 라이선스를 구매해야 합니다. 샘플 파일의 사용 약관을 살펴보려면 폴더에 있는 ReadMe 파일을 참조하십시오.

학습한 내용: 아트보드에서 레이아웃 그리드 적용 및 편집

Adobe XD CC의 레이아웃 그리드는 디자인 콘텐츠를 정렬하고 다양한 디바이스 크기에 맞게 디자인할 때 매우 유용한 열 그리드입니다. 요구에 맞게 빠르고 손쉽게 조정할 수 있습니다.

레이아웃 그리드 적용

  • 하나 이상의 아트보드가 선택된 상태에서 속성 관리자의 그리드 섹션으로 이동하여 메뉴에서 레이아웃을 선택하고 해당 옵션을 선택합니다. 기본 레이아웃 그리드가 적용됩니다.

레이아웃 그리드 편집 옵션

레이아웃 그리드가 아트보드에 적용되면 속성 관리자의 그리드 섹션에서 설정을 조정할 수 있습니다.

열 수: 웹 디자인의 경우 일반적으로 12개 또는 16개의 열 그리드로 디자인합니다. 요구에 맞게 열 수를 변경할 수 있습니다.

색상: 색상 옵션을 클릭하여 레이아웃 그리드 열의 색상을 조정할 수 있습니다. 불투명도를 0으로 설정하면 열의 채우기 색상을 제거하고 윤곽선을 표시할 수 있습니다.

간격 폭: 간격 폭은 각 열 사이의 거리입니다. 기본적으로 열 수, 여백, 아트보드의 전체 폭에 따라 자동으로 값이 계산됩니다.

여백: 여백은 레이아웃 그리드와 네 개의 측면에 있는 아트보드 가장자리 사이의 거리입니다. 기본적으로 함께 편집할 수도 있고 속성 관리자의 그리드 섹션에서 각 측면에 대해 다른 여백 아이콘을 클릭하여 개별적으로 편집할 수도 있습니다.

팁: 속성 관리자의 그리드 섹션에서 기본값 사용 버튼을 클릭하여 레이아웃 그리드 옵션을 기본 설정으로 초기화할 수 있습니다.

사용자 정의 레이아웃 그리드 저장 및 적용

  • 현재 레이아웃 그리드를 새로운 기본값으로 저장하여 다른 아트보드에 적용하려면 속성 관리자의 그리드 섹션에서 기본값 설정 버튼을 클릭합니다. 선택한 아트보드의 레이아웃 그리드 옵션이 기본 설정으로 저장됩니다.
  • 레이아웃 그리드가 적용되어 있는 아트보드를 선택하고 속성 관리자의 그리드 섹션에서 기본값 사용 버튼을 클릭하여 새 기본 설정을 적용할 수 있습니다.

 

이전 튜토리얼: 아트보드 추가 및 편집 | 다음 튜토리얼: 콘텐츠 정렬

 

이 페이지가 도움이 되었습니까?