13

UNION

UNION

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

UI 디자인을 하다 보면 두 객체를 조합하고 싶거나 꼭 필요할 때가 있다. 최근 UI툴로 아이콘도 많이 그리는 추세여서 더더욱 그렇다. 물론 난 UI 툴로 아이콘을 그리는 것을 추천하지 않지만 심플한 도형을 그리는 것에는 동의 한다. 이번 시간에는 두개 이상의 객체를 조합하는 방법과 그 옵션을 알아보기로 한다.

Add 

객체 합치기 ( Cmd + Option + U )
img_union_01

두개 이상의 객체를 합치고 싶을 때 사용한다. 각 객체마다 아래와 같은 결과물을 가져온다.

  • Shape: 가능
  • Line: 가능하지만 라인이 면으로 변하거나 하지는 않는다. 라인을 그룹으로 만들어 사용하는 것과 같은 기능을 한다.
  • Text: 가능
  • Group: 가능
  • Symbol: 불가능
  • Repeat Grid: 가능

각 오브젝트들과도 교차하여 사용할 수도 있다.
다만, 색과 선의 굵기등의 속성은 제일 밑의 객체의 것을 따른다.

Subtract

객체만큼 빼기 ( Cmd + Option + S )
img_union_02

두개 이상의 객체에서 제일 하단 레이어에서 나머지 객체 만큼을 빼고 싶을때 사용하게 된다. 

  • Shape: 가능
  • Line: 불가능
  • Text: 가능
  • Group: 가능
  • Symbol: 불가능
  • Repeat Grid: 가능

Intersect

객체들의 공통 부분 남겨두기 ( Cmd + Option + I )
img_union_03

교집합에 해당하는 것으로 두개 이상의 객체들의 겹쳐지는 부분만 남기고 없앤고 싶을 때 사용한다.

  • Shape: 가능
  • Line: 불가능
  • Text: 가능
  • Group: 가능
  • Symbol: 불가능
  • Repeat Grid: 가능

 

Exclude Overlap 

객체들의 공통 부분을 삭제 ( Cmd + Option + X )
img_union_04

객체들의 공통 부분을 제외한 나머지만 남기고 싶을 때 사용한다.

  • Shape: 가능
  • Line: 불가능
  • Text: 가능
  • Group: 가능
  • Symbol: 불가능
  • Repeat Grid: 가능

Adobe XD 의 Union 기능의 장점

언제든 수정이 가능하다

포토샵이나 일러스트에서 Union 기능을 사용해 봤던 사람은 한번 더하거나 뺏을 때 그것을 되돌릴 수 없는 것에 두려울 수 있다. 하지만 AdobeXD 는 언제든지 지금의 Union 을 수정할 수 있다. 사실 AdobeXD 는 여러분을 속이고 있기 때문이다. 합쳐진 듯 보이고 뺀 것 처럼 보일 뿐 그 속성을 그대로 가지고 있기 때문에 해당 Union 을 두번 클릭하면 언제든 수정 할 수 있다. AdobeXD 는 이처럼 눈에 보이는 것과 그 속성이 다른 것들이 꽤 있다. 이 덕분에 수정에 용이 하고 빠른 속도를 유지 할 수도 있게 해준다. 이미지의 표현 또한 비슷한 경우 인데 이 부분은 이미지에 대한 내용을 다룰때 다시 설명할 것이다.

라인의 옵션을 그대로 사용할 수 있다

AdobeXD 의  Union 은 위에서 말했듯이 두 객체의 속성을 그대로 가지고 있다. 그래서 라인의 옵션 (라인을 안쪽으로 바깥쪽으로 또는 중앙으로 표현해 주는 옵션) 등을 그대로 사용할 수 있다. 물론 Union을 실행했을 때 같은 옵션으로 변경되는 것을 원할때에는 일일이 바꾸어 줘야 하는 수고가 있을 수 있겠지만 이때는 그냥 Union 을 클릭하여 한번에 옵션을 바꾸면 될일이니 매우 좋은 장접이라고 생각이 된다. 아이콘 그릴때에 유용하게 쓰일 수 있으니 알고 있기를 바란다.
다만, 선의 굵기와 색등은 제일 하단의 레이어의 속성을 따른다.

위 모든 기능은 상단 메뉴바 Object/Path 에서도 사용할 수 있다.

Union 기능은 많이 쓰이는 기능은 아니다. 하지만 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