05

SHAPES

SHAPES

도형 그리기와 활용

AdobeXD 에는 몇가지 UI 디자인을 위한 도형 그리기 도구가 있다. 사각형 그리기와 원형 그리기 그리고 선 그리기가 그것이다. 이 세가지로 어떻게 UI 디자인을 하고 활용하는지 확인 해 보자

Rectangle (R)

사각형 그리기 툴로 직사각형 그리기

좌측 Left Tool Bar 에서 사각형을 클릭하거나 단축기 R 을 누르면 사각형 그리기를 할 수 있다. 아트보드 또는 워크 스페이스에서 드래그 하여 그릴 수 있고 그려진 사각형의 정확한 사이즈를 우측 Property Inspector 에서 조정 할 수 있다. 처음 그리면 기본으로 면과 선의 색이 채워져 있으니 면만 쓰거나 선만 쓰려면 우측 Property Inspector 에서 체크 박스를 제거하거나 다시 체크 하면 된다. 아래와 같이 Property Inspector 에서 설정이 가능하다.

img_shapes_01
  • 정렬및 분배 ( 2, 3개의 오브젝트 선택시 )
    아트보드 상에서는 1개만 선택에서 정렬이 활성화 되는데 이때에는 아트보드가 정렬의 기준이 된다. 
  • 반복 그리드 설정
  • 집합 설정 ( 2개 이상의 오브젝트 선택시 )
  • 크기 및 위치 그리고 각도
  • 화면 스크롤시 위치 고정
  • 반응형 디자인을 위한 설정
    수동으로 설정시 상하좌우 거리 유지 및 가로 세로 길이 고정 등 옵션을 선택할 수 있다.
  • 투명도 조정
  • 사각형 모서리를 둥굴게 할 수 있는 설정 (모서리를 같은 수치로 또는 각각의 모서리를 다른 수치로 설정 가능)
  • 면의 색 변경 (면 숨김 가능)
  • 선의 색 변경 (선 숨김 가능)
  • 선의 굵기, 점선, 점선일 때 간격 설정
  • 선을 도형 크기의 안쪽, 바깥쪽, 중앙에 그려지도록 설정
  • 선의 캡 설정
  • 선의 모서리의 다른 표현
  • 그림자 설정
  • 배경 흐림 효과 또는 오브젝트 자신의 흐림 효과 설정

주의.
다른 툴을 선택하기 전까지 계속 사각형 그리기 모드이다. 한번 그리면 끝이 아니고 계속 반복에서 그려질 수 있으니 사각형 그리기가 완료 되었다면 V 단축키를 눌러 선택 대기 상태로 돌려놓자.

정사각형 그리기
shapes_ex04@2x
shapes_ex03@2x

정사각형은 Shift 키를 누른 상태에서 드래그 하면 정사각형을 그릴 수 있다.

Redius handle
각 모서리의 안쪽 핸들을 드래그 하면 정원형으로 변형이 가능하다. 이때 Option 키를 누른 상태에서 드래그 하면 선택한 모서리만 제어할 수도 있다.

비율잠금
크기의 비율을 유지 하고 싶다면 Property Inspector 에서 자물쇠 모양의 Lock Aspect를 활성화 해 놓으면 같은 비율로 크기가 조정된다. 

핸들로 크기 조정

모든 도형은 핸들이 존재 하고 이 핸들로 크기를 조정할 수 있다. 상하 좌우 에 있는 8개의 핸들이 존재 하는데 원하는 방향으로 드래그 하면 크기가 조정된다. 물론 우측 Property Inspector 에서 미세하고 정확한 크기를 조정 할 수 있지만 핸들로 조정하면 더 빠르게 크기를 가늠해 볼 수 있으니 많이 사용된다. 포토샵의 크기 조정과는 다르게 오브젝트를 클릭하는 순간 핸들을 이용해 크기 조정이 가능 하니 한결 더 편하다. 

보조키의 활용
모든 오브젝트들의 크기 조정시 드래그 와 함께 아래와 같은 보조키를 이용할 수 있으니 참고하자.

  • Shift + : 정사이즈로 크기 변환
  • Option(alt) + : 상하, 좌우 대칭으로 크기 변환
  • Shift + Option + : 정 가운데를 중심으로 정사이즈 크기 변환
사각형의 활용
shapes_ex01@2x

위 그림 처럼 사각형으로 활용이 가능 하다. 예를 들면 버튼의 모양을 옵션만으로 다르게 표현 할 수 있고 정사각형 그리고 정원형 또한 표현이 가능하다. 후에 작업을 하다보면 타원형 그리기는 생각보다 많이 쓰이지 않는다. 사각형으로 그린 원형이 이후 크기나 모양의 변형이 용이 하기 때문에 UI 디자인에 타원형 보다 더 활용도가 높은 것을 알게 될 것이다.
선 또한 사각형으로 그릴 수 있고 더 명확하게 UI 디자인을 할 수 있다. 이유는 라인 그리기에서 언급할 것이다.

Ellipse (E)

타원 그리기

좌측 Left Tool Bar 에서 타원 그리기 툴을 선택하거나 단축기 E 를 누르면 타원을 그릴 수 있다. 아트보드나 워크 스페이스에 드래그 하면 그릴 수 있다. 역시 한번 그리면 끝이 아니고 계속 반복에서 그릴 수 있으니 타원 그리기가 완료 되었다면 V 단축키를 눌러 선택 대기 상태로 돌려놓자. 사각형 그리기와 마찬가지로 여러 옵션들을 우측 Property Inspector 에서 조정 가능하다. 타원은 모서리가 없으니 모서리를 둥굴게 할 수 있는 설정은 옵션에 없다. 

Circle 이 아닌 Ellipse.
원형 그리기를 생각할때 Circle 이라고 생각 했을텐데 Circle 이 아닌 Ellipse로 표현 하고 있다. 물론 포토샵이나 일러스트 또한 Ellipse로 표현 되어 있다.그런데 AdobeXD 에서는 더욱 그 의미가 중요하다. 위에서도 언급 했지만 타원 그리기로 정원을 그릴일이 거의 없다는 것이다. UI 작업시에는 정원을 많이 쓰게 되는데 거의 대부분 아이콘 박스나 버튼, 프로필 이미지 등이다. 그런데 해당 내용들은 언제든지 정원에서 사각형이나 둥근 사각형으로 수정될 수 있기 때문에 변형이 불가능한 타원형 그리기 보다는 사각형 그리기가 더 유용하게 쓰이게 된다.

Line (L)

선 그리기

좌측 Left Tool Bar 에서 선 그리기 툴을 선택하거나 단축기 L 을 선택하고 드래그 하면 선을 그릴 수 있다. 선을 그린 후 우측 Property Inspector 에서 옵션 값을 조정 할 수 있다. 선의 굵기는 0.01에서 999999 까지 조정할 수 있다. 물론 선의 끝을 둥글게도 할 수 있고 사각형이나 타원형 에서 처럼 선의 여러가지 옵션을 조정할 수 있다. 

기억해야 할 중요내용.
사각형의 면으로 라인을 그렸을때와 위치값이 다르다. 예를 들면 1픽셀의 두께로 라인을 만든다면 사각형 면과 선의 위치 값은 다르게 된다. 면은 위치값이 좌상단이 기준이 된다면 선은 선의 중심이 기준이 되므로 0.5 의 위치 값 차이가 나게 된다. 이 부분은 작업시 꼭 참고 해야 할 내용이므로 꼭 기억하자.

위와 같이 3가지 도형 그리기를 알아 보았다. 단순 도형을 그리는 것을 떠나 어떻게 활용하면 좋을지 생각을 하면 좋겠다. 사각형, 타원형, 선, 3가지 모두 각기 다른 특징을 가지고 있다. 하지만 UI 디자인에서는 아무래도 단연 사각형 그리기를 수정이 용이하기 때문에 가장 많이 사용하게 되고 활용도가 높다. 그리고 사각형 그리기는 자주 쓰이기 때문에 꼭 단축키 (R) 를 숙지 하는 것을 권장한다.

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