07

PEN TOOL

PEN TOOL

펜 도구의 이용 및 활용

펜 도구의 사용은 UI 작업에서 많이 쓰이지 않는 것 중에 하나다. 이 글을 쓰고 있는 나 또한 펜 도구의 이용을 많이 하고 있지 않다. 또한 권장 하지도 않는다. 그 이유는 일러스트의 펜툴과 비교했을 때 기능이 제한적이고 사용성이 썩 좋다고 느끼지 못 하기 때문이다. 그래서 아이콘등의 작업이나 디테일한 벡터 작업은 일러스트에서 작업 하기를 권장 한다.
그럼에도 불구하고 펜 도구에 대해 소개하는 것은 어쩔 수 없이 필요 한 경우가 종종 발생하기 때문이다. 도형의 수정이라던가 간단한 모양의 변형등은 AdobeXD 에서 제공하는 펜 도구를 써도 무방 하고 그것이 일러스트에서 다시 작업 하는 것 보다는 심플 할 수 있기 때문이다. 

PEN (P)

펜 도구로 모양 그리기
img_pen_01@2x

 펜 도구로 위와 같이 도형을 그릴 수 있다. 원하는 지점에 클릭 앤 클릭으로 손쉽게 그릴 수 있으며 마그네틱 기능으로 마무리 지점에서는 서로 붙을 수 있게 자동으로 가이드 해준다. 또한 주변 꼭지점들 또는 오브젝트들과 같은 위치점을 스마트 가이드가 표시 해주어 편하다. 때로는 불편하기도 하지만...
첫 지점과 끝 지점이 맞 닿아 도형이 완성되면 우측 Property Inspector 에서 생성된 면의 색을 채울 수 있고 물론 라인 또한 변경 조정 가능하다.
이와 같이 간단하게 도형을 그릴 수 있지만 픽셀 기반으로 그려지기 때문에 생각보다 디테일한 그림을 그리기 쉽지 않다. 디테일한 도형이나 그림을 그릴때에는 정 사이즈 보다 몇배 더 크게 그린 후 작게 조정하는 방법을 써야 한다. 

Shift 키 이용
Shift 키를 누른 상태에서 펜 도구를 사용하면 45도 X 의 각도를 유지 하면서 그릴 수 있다. 

커브로 그리기
마우스로 클릭 후 바로 떼지 않고 마우스를 좌 클릭 한 상태 에서 마우스를 드래그 하면 커브 형태로 그릴 수 있다.

펜 도구를 이용해 모양 변형하기
img_pen_02@2x

기본 도형을 수정 변형할때에도 펜 도구가 쓰이는데 이 때에는 펜 도구가 아닌 기존 도형을 두번 클릭하면 펜 모드로 변하면서 기존 도형의 라인을 클릭하거나 드레그 하여 수정 변형할 수 있다. 라인을 기준으로 어느곳이나 클릭하면 꼭지점이 생기고 이를 이용한 변형이 가능 한데 Delete 키로 꼭지점은 지울 수 있다. 다만 이때 꼭지점이 지워지는 것이지 라인이 없어지는 것이 아니다. 
여러 꼭지점을 동시에 움직이고 싶을때는 Shift 를 누른 상태에서 여러 꼭지점을 선택하고 움직이면 된다. 움직임은 마우스외에 키보드의 방향키로도 1픽셀씩 이동이 가능 하며, Shift 키를 누른 상태에서 방향키를 누르면 10 픽셀 씩 움직이게 된다.

베지어 곡선 활용하기
img_pen_03@2x

꼭지점을 정확하게 두번 클릭하면 꼭지점이 베지어 곡선으로 변한다. 이 베지어 곡선을 클릭 드래그 하면 모양을 변형할 수 있고 베지어 곡선의 한쪽만을 제어 하고 싶다면 Option(alt) 키를 누른 상태에서 드래그 하면 된다.
베지어 곡선 상태인 꼭지점을 다시 두번 클릭하게 되면 원 상태의 꼭지점으로 돌아 온다. 

위에서도 밝혔듯이 펜 도구는 많이 쓰이지 않는다. 생각보다 UI 작업시 많이 활용되지 않기 때문이다. 아이콘을 그리고나 복잡한 모양을 가진 그림들을 그려야 한다면, 일러스트에서 그리기를 추천한다. 일러스트 프로그램이 없거나 꼭 AdobeXD 에서 그려야 겠다고 고집 하겠다면 아래의 방법을 추천한다. 

AdobeXD에서 아이콘을 잘 그리는 방법

  • 아이콘을 10배 이상으로 그린다. ( 디테일한 표현을 위해서 )
  • 그린 아이콘을 SVG 파일로 내 보낸다. 
  • SVG 로 내보낸 파일을 불러온다. 
  • 사이즈에 맞추어서 사용한다.

위와 같이 하는 이유는 AdobeXD 에서는 라인을 Convert to Shape 할 수 없기 때문이다. 크게 그린 아이콘에서 라인을 Convert to Shape 하지 않고 줄일 경우 라인의 굵기가 유지 되기 때문에 SVG 로 내보내는 것으로 이를 대체 하는 것이다.

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