[AdobeXD] 3강 그리드 설정

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 그리드의 종류 

	정사각형 그리드	레이아웃 그리드
설명	정사각형 그리드는 오브젝트 및 텍스트를 정렬하는 데 유용한 가이드	XD에서 레이아웃 그리드를 사용하여 열을 정의

- 사진 출처 : https://helpx.adobe.com/kr/xd/help/artboards-grids.html

 

 

 

 

 

 

 

 

 

 

 

 

​

​

​

​

​

​ 

 

 

2. 정사각형 그리드

★ 정사각형 그리드 단축키

기능		단축키
정사각형 그리드  보이기/숨기기		[Ctrl] + ['](따옴표)

 

 

 

 

 

★ 정사각형 그리드 보이기 

 

- 위에 작성한 단축키를 누르거나, 옵션패널에 있는 [그리드]-[정사각형]을 체크

 

 

 

 

 

★ 정사각형 그리드 사이즈 변경 

- 정사각형 크기를 조절하여 그리드 사이즈 변경 가능

 

 

 

 

 

 

 

★ 정사각형 그리드 색상 변경

​

- 앞에 체크된 색상 박스를 누르고 색상을 변경

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

​

​ 

 

 

 

 

 

 

3. 레이아웃 그리드

★ 레이아웃 그리드 단축키

기능		단축키
레이아웃그리드   보이기/숨기기		[Ctrl] + [Shift] + ['](따옴표)

 ​

​

​

  

★ Grid Calculator : 웹 컨텐츠의 컬럼을 계산하기 쉽게 해주는 사이트

http://gridcalculator.dk/

 

 

 

 

 

** 숫자 계산이 맞지 않을 시 빨간색으로 표시해줘서 오류를 표시함

 

 

 

 

 

 

 

 

 

 

 

 

​

★ PC웹에 맞는  그리드 시스템으로 [레이아웃 그리드]

- PC최적해상도 : 1920px

- 웹컨텐츠사이즈 : 1180px

- Gutter(열간의 여백) : 20px

​- Margin(컨텐츠사이즈 양쪽 여백) : 370px

​

- 예시 삼성화재 사이트 : https://www.samsungfire.com/

 

​- 삼성화재 그리드 예시  

 

- 위는 삼성화재 사이트에 맞는 그리드 예시 일뿐 사이즈나 여백들은 사이트마다 다름

 

 

 

 

 

 

 

★ XD로 PC웹에 맞는 그리드 시스템 적용

- 홈화면에서 웹 아트보드를 선택

 

 

 

 

- 그리드를 레이아웃으로 체크하고 수치를 조절한다.

- 수치 조절시 자동으로 바꾸므로 아래서 부터 수정하고 맞지 않으면 다시 수정

** 열 => 간격 => 좌우마진을 처리하면 잘 됩니다. 열폭은 자동으로 처리되므로 쓰지 마세요!

 

 

 

 

 

 

 

★ 모바일웹에 맞는  그리드 시스템

- 기기장치 별 컬럼(열) : PC웹(12컬럼), 태블릿(8컬럼), 모바일(4컬럼)을 권장

- 모바일, 태블릿의 구성요소는 8dp를 기본 그리드로 맞춰 구성요소를 제작하는 것이 좋다.

- 보통 모바일은 4컬럼, 마진과 거터는 16dp를 기준으로 잡는다.

- 왜 8dp인가?

http://styleguide.co.kr/content/resolution-grid/ratio-design.php

자세한 설명은 스타일가이드 사이트에서 확인

 

- 하지만 사이트별로 다르고 기기장치별로 다르기 때문에 정답은 없다. 

​

​

​

​

​★ XD로 모바일웹에 그리드 시스템 적용

​ - 홈화면에서 [Android Mobile]을 선택

 

 

 

 

 

- 4컬럼을 기준으로 모바일웹에서 CSS코딩으로 계산이 편하도록 마진을 15px, 거터를 10px로 처리

** 사이트별로 마진/거터의 기준을 다를 수 있다.