08

SELECT MOVE RESIZE

SELECT MOVE RESIZE

오브젝트 선택하기, 움직이기, 크기 변경하기

앞서 도형 그리기와 문자 쓰기에서 다소 언급한 내용이지만 오브젝트들을 어떻게 선택하고 어떻게 움직이며 크기를 어떻게 조정하는지 전체적으로 살펴보기로 하자. 이 내용은 쉬운 내용이지만 매우 많이 사용하고 프로그램을 다루는 기본이기 때문에 비교적 자세하게 다룰 것이다. 타 프로그램과 조금 다른 부분들도 있을 수 있으니 쭉 보고 놓친 부분이 있으면 챙기기 바란다.

오브젝트 선택하기

하나의 오브젝트 선택

단순하다. 하나의 오브젝트를 선택하는 방법은 거의 반사 신경에 가깝게 그냥 오브젝트를 한번 클릭하면 된다. 허나 포토샵에 익숙한 디자이너라면 습관을 바꿔야 할 것이다. 포토샵은 Cmd 버튼을 누른 상태에서 오브젝트를 클릭해야 선택이 가능하였기 때문에 AdobeXD 와 조금 다르게 느껴질 것이다. 물론 최근 포토샵에는 자동 선택 기능이 추가 되어 마우스 클릭만으로 선택이 가능하게 되어 있다. 그 기능을 사용하던 디자이너라면 두 프로그램의 선택 방법이 같다 라고 생각하면 되겠다. 
선택된 오브젝트는 포토샵에서는 레이어에 선택 표시가 된 것 이외에 별 반응이 없지만 AdobeXD 에서는 '나 선택 됬어요' 라는 표시를 해준다. 어떤 오브젝트가 선택 되어 있는지 명확하게 알수가 있다. 그리고 선택된 오브젝트를 자세히 보자. 무슨 소리가 들리지 않는가? 오브젝트가 속삭인다. "자 날 움직여 줘~ 날 키워줘~ 날 줄여줘~~~"

두개 이상의 오브젝트 선택

두개 이상의 오브젝트를 선택하는 방법은 두가지 이다. 

마우스 드래그
원하는 오브젝트들을 마우스 클릭앤 드래그 방식으로 모두 선택이 가능하다.

Shift + 마우스 클릭
원하는 오브젝트들이 오브젝트들 사이에 듬성 등성 있거나 멀리 떨어져 있을때에는 Shift 키를 누른 상태에서 다른 오브젝트를 선택하면 여러개의 오브젝트들을 선택할 수 있다.

오브젝트 움직이기

마우스를 이용해서 움직이기

마우스로 클릭한 후 마우스 좌 클릭 상태에서 움직이면 된다. 원하는 위치에 도착했을때 마우스 좌 클릭을 놓으면 오브젝트는 그 곳으로 이동한 것이다. 마우스로 이동하는 방법은 멀리 이동할때 좋다.

직각으로 움직이기
Shift 키를 누른 상태로 움직이면 직각으로 움직이게 되니 X축이나 Y축으로 만 이동을 원하면 Shift 키를 누른 상태에서 움직이면 된다.

키보드를 이용해서 움직이기

키보드를 이용하면 정확한 수치 만큼 이동이 가능하다. 오브젝트 선택 후 방향키를 누르면 1픽셀씩 상하 좌우 움직일 수 있다. 가까운 거리나 정확한 거리 이동을 위해 쓰이는 방법이다.

10픽셀씩 움직이기
Shift 키를 누른 상태로 방향키를 누르면 10픽셀 씩 움직이게 된다. 

오브젝트 크기 변경하기

마우스 사용 크기 변경

오브젝트를 클릭하면 오브젝트에 상하 좌우 핸들이 생긴다. 이 핸들로 원하는 크기를 변경 할 수 있다. 핸들을 마우스로 클릭 한 상태에서 원하는 만큼 움직이면 된다. 이때 상하 좌우 중앙 핸들들은 한쪽 방향으로 크기를 변경할 수 있고 4개의 모서리 핸들은 각 모서리와 맞닿은 변의 크기를 변경 할 수 있다. 

크기 변경시 보조 키 이용

  • 고정 비율 크기 변경 : Shift +
  • 상하 또는 좌우 대칭 크기 변경 : Option(alt) +
  • 오브젝트 중앙을 기준으로 고정 비율 크기 변경 : Shift + Option(alt) +
Property Inspector 를 이용한 크기 변경

모든 오브젝트는 우측에 Property Inspector 를 이용하여 크기를 변경할 수 있다. 소숫점 두자리까지 표현이 가능하다. 하지만 소숫점을 사용하지 않는 것이 좋다. 만약 비율 때문에 어떨 수 없는 상황이라면 가로 또는 세로 둘중에 한 크기는 정수로 두자.

수치 연산
크기 변경시 정확한 사이즈 변경을 위해 수치 연산 ( +, -, * , / )을 사용할 수 있다.

심볼은 크기를 변경할 수 없다.
심볼은 크기의 속성을 공유 하므로 크기를 변경 할 수 없다. 심볼 크기를 변경하려면 심볼을 두번 클릭하여 심볼안으로 들어가면 크기를 변경 가능 하다. 이때 주의 해야 할 점은 워크 스페이스에 있는 모든 같은 심볼의 크기가 한꺼번에 바뀐다는 것이다. 기억해 두어야 한다. 

작업을 하면서 가장 많이 하는 행동. 선택하고 움직이고 크기를 변경하는 것. 심플하고 쉽지만 다른 프로그램과 약간의 다른점과 편리한 점을 살펴 보았다. 느꼈는지 모르겠지만 AdobeXD 는 매우 직관적인 프로그램이다. 초보자들도 사용하는 데에 아무런 문제가 없을 것이다.

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