12

ALIGN & DISTRIBUTE

ALIGN & DISTRIBUTE

객체의 정렬과 각 객체들간의 공간 분배

여러 객체들을 다루다 보면 각 객체 상호간의 정렬과 공간의 간격을 분배 해야 할 일이 많이 생긴다. 이를 따로 계산하지 않고 한번의 기능으로 정렬이나 분배를 할 수 있으니 이를 알아보고 잘 활용하자.

Align

우측 Property Inspector 이용하기

객체를 하나 이상 선택하면 우측에 Property inspector 가 나타난다. 정렬을 손 쉽게 할 수 있는 버튼이 최상단에 위치해 있다. 아래와 같은 순서로 위치해 있으니 그 들중 선택하면 된다. 

  • 가로의 상단으로 정렬
  • 가로의 중단으로 정렬
  • 가로의 하단으로 정렬
  • 세로의 좌측으로 정렬
  • 세로의 중앙으로 정렬
  • 세로의 우측으로 정렬
단축키를 이용한 정렬

단축키를 이용하여 쉽고 빠르게 정렬도 가능하다. 

  • 가로의 상단으로 정렬 ( Cmd + Ctrl + top arrow )
  • 가로의 중단으로 정렬 ( Cmd + Ctrl + M )
  • 가로의 하단으로 정렬 ( Cmd + Ctrl + bottom arrow )
  • 세로의 좌측으로 정렬 ( Cmd + Ctrl + left arrow )
  • 세로의 중앙으로 정렬 ( Cmd + Ctrl + C )
  • 세로의 우측으로 정렬 ( Cmd + Ctrl + right arrow )

허나 우린 이것 말고도 외워야 하는 단축키가 너무 많다. 그냥 이런 단축키도 있구나 정도로 알고 지나가도 된다. 

상단 메뉴바 이용

거의 모든 기능은 상단 메뉴바에 존재하고 있다. 이 기능 또한 상단 메뉴바의 Object / Align 에서 같은 기능을 수행 할 수 있다. 하지만 역시 여기에 있다 라고만 알아도 될일... 거의 메뉴에서 쓸일을 없을 것이다.

한개의 객체 정렬은 아트보드가 기준

아트보드 안에서는 한개의 객체를 선택해도 정렬 아이콘이 활성화 되는 것을 알 수 있을 것이다. 한개의 객체를 선택했을 때에는 자동으로 아트보드가 그 정렬의 기준으로 동작한다. 이점을 알아두면 아트보드의 중앙에 정렬하려고 할때에나 상하좌우 의 간격을 유지 할때에도 유용하게 쓰일 것이니 잘 기억 하자.

Distribute

우측 Property Inspector 이용하기

2개 이상의 객체를 선택하고 정렬의 우측 끝에 존재하고 있는 분배 아이콘을 클릭하면 간격의 분배가 이루어 진다.

  • 가로 간격의 분배
  • 세로 간격의 분배

잠깐! 짚고 넘어가야 할 내용이 있다. AdobeXD 의 분배는 포토샵의 분배와 그 기능이 다르다. 포토샵은 분배의 기준을 객체의 좌측 상단으로 하고 있지만 AdobeXD 는 객체의 끝과 끝을 기준으로 하고 있다. 이것은 매우 편리하게 쓰인다. 가령 메뉴바를 만들때에 각기 다른 길이의 메뉴들을 분배 하려면 포토샵은 분배 기능을 사용할 수 없었다. 하지만 AdobeXD 는 이 분배 기능으로 길이가 다른 메뉴들의 사이를 잘 분배해 줄 수 있다.

단축키를 이용한 분배

단축키를 이용하여 쉽고 빠르게 분배도 가능하다. 

  • 가로 간격의 분배 ( Cmd + Ctrl + H )
  • 세로 간격의 분배 ( Cmd + Ctrl + V )
상단 메뉴 사용

거의 모든 기능은 상단 메뉴바에 존재하고 있다. 이 기능 또한 상단 메뉴바의 Object / Ditribute 에서 같은 기능을 수행 할 수 있다. 

객체 또는 객체들의 정렬과 간격의 분배를 알아보았다. UI 디자인을 하다보면 많은 객체들을 만들고 사용하게 된다. 그 들을 알맞게 정렬하고 분배하는 일은 꽤 중요한 일이다. 잘 사용하여 다 만들고 나서 이쪽 저쩍으로 삐져나오는 객체가 없도록 말이다.

AdobeXD Classes

01 . INTROAdobeXD의 대한 소개

02 . INTERFACEAdobeXD의 인터페이스 소개

03 . ARTBOARDSArtboards 에 대한 이해

04 . PANNING & ZOOMING화면 움직이기와 화면 확대 축소

05 . SHAPES도형 그리기와 활용

06 . TEXT문자 쓰기와 활용

07 . PEN TOOL펜 도구의 이용 및 활용

08 . SELECT MOVE RESIZE오브젝트 선택하기, 움직이기, 크기변경하기

09 . STYLING APPEARANCE오브젝트의 면과 선의 색상, 그림자, 흐림 효과

10 . LAYERS레이어 패널의 사용과 관리

11 . DUPLICATE오브젝트 복제의 여러가지 방법

12 . ALIGN & DISTRIBUTE객체의 정렬과 각 객체들간의 공간 분배

13 . UNION두개 이상 객체의 조합 만들기

14 . GROUPAdobeXD 에서의 그룹의 의미와 활용

15 . SYMBOLS심볼 만들기와 응용

16 . REPEAT GRID반복 그리드 사용법과 활용

17 . MASK마스크의 여러가지 사용법

18 . ASSETS PANEL에셋 패널의 사용법과 활용

logo_basic@2x

Copyright © 2018 AdobeXD.info & Bandy garnet.
All Rights Reserved.

E-mail: bandygarnet@gmail.com
Slack: adobexdclass.slack.com