04

PANNING & ZOOMING

PANNING & ZOOMING

화면 움직이기와 화면 확대 축소

디자인을 하려면 여러 아트보드가 필요하고 그 아트보드들 사이를 오가며 여러 작업을 해야 한다. 그러기 위해서는 화면을 움직여야 하고 확대나 축소도 필요하다. 어떻게 화면을 움직이고 확대, 축소하는 지 알아보자. 

화면 움직이기

Space Bar + 마우스 드래그

가장 대표적으로 많이 쓰일 것으로 예상되는 방법이다. 또한 가장 명확하게 사용자가 움직이고 싶은 만큼 움직일 수 있다. 스페이스 바를 누른 상태에서 마우스로 원하는 만큼 드래그 하면 된다. 

매직 마우스 스크롤

매직 마우스를 사용중이라면 상하 좌우 자유롭게 마우스 만으로도 화면을 움직일 수 있다. 그냥 터치 스크롤을 이용하면 된다. 다만, 단점은 정확하게 내가 원하는 만큼 이동하거나 원하는 곳에 멈추기 싶지 않다는 점이다. 두선을 모두 컴퓨터 위에 놓기 싫거나 한손으로 햄버거를 먹고 있거나 양손 잡이어서 한손으로는 숙제를 하고 있다면 이 방법을 추천한다.

화면 확대 및 축소

Cmd + +, Cmd + -

커멘드를 누른 상태에서 +, - 를 누르면 확대, 축소가 이루어 진다. 누를때 마다. 2.5%, 5%, 10%, 15%, 25%, 33%, 50%, 75%, 100%, 200%, 300%, 400%, 500%, 600%, 700%, 800%, 1200%, 1600%, 3200%, 6400% 까지 20개의 화면으로 확대 되거나 축소된다. 물론 꼭 이 백분율을 기억할 필요는 없지만 그래도 어느정도 알아두면 편하겠다. 

Cmd + 마우스 스크롤, Option + 마우스 스크롤

커멘트를 누른 상태로 마우스를 위 아래로 스크롤 해 보자 매우 빠르게 확대, 축소가 되는 것을 알 수 있다. 키보드 단축키 보다 더 빠른 움직임으로 작업 할수 있는 장점과 동시에 익숙하지 않으면 아트보드를 자주 놓치게 될 것이다. 익숙해 지면 매우 빠른 속도로 작업에 임할 수 있으니 연습해 놓는게 좋겠다. 

Top Horizontal Panel 에서 조정하기

프로그램의 우측 상단을 보면 현재 화면의 백분율이 표시 되어 있을 것이다. 그곳을 클릭하면 자신이 원하는 만큼의 백분율로 화면을 표시할 수 있다. 우측 화살표를 누르면 25%, 50%, 100%, 150%, 200%, 300%, 400% 로 선택도 가능 하다. 다만, 프로그램에 익숙해 지게 되면 대부분 마우스 스크롤이나 단축키를 이용하기 때문에 이 곳은 현재 화면의 백분율을 확인 하는 곳으로 기억하면 되겠다. 

사용성을 높이는 핫키

AdobeXD는 확대 축소 기능에 사용성을 높이는 핫키를 제공한다. 아래와 같이 편리한 핫키가 있으니 꼭 기억해야 한다. 

  • Cmd + 1 : 화면을 100%로 보여준다.
  • Cmd + 2 : 화면을 200%로 보여준다.
  • Cmd + 3 : 지금 선택한 오브젝트 사이즈에 맞게 화면을 확대하거나 축소 하여 준다. 매우 유용하고 자주 사용해야 하니 꼭 기억해야 하는 키다. 
  • Cmd + 0 : 사용하고 있는 화면의 전체를 보여준다.

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