15

SYMBOLS

SYMBOLS

심볼 만들기와 응용

심볼은 AdobeXD에서 매우 중요한 요소이다. 심볼을 어떻게 활용하느냐에 따라서 작업을 원할하게 할 수도 또는 그렇지 않을 수도 있다. 심볼을 만드는 방법과 사용하는 방법 그리고 그 심볼을 활용하는 것 까지 중요하지 않은 것이 없다. 심볼의 개념을 제대로 알고 사용해야 공동 작업은 물론 개인 작업에도 큰 도움이 될 것이다. 

심볼의 개념

심볼을 처음 접하는 사람들은 심볼의 개념을 잘 이해 하기 힘들 수도 있다. 또한 쓰고 있던 사람도 맹목적인 교육을 통해서 쓰고 있다면 아마도 잘 모를 수도 있을 것이다. 
심볼은 하나 이상의 객체가 모여 하나의 상징적 존재가 되는 것이다. 그 상징적인 존재가 되는 순간 이 것을 복제하여도 같은 존재로 간주되어 진다. AdobeXD 에서 오리지널 심볼의 개념은 없다. 모두가 진짜이고 모두가 가짜이기도 하다. 지금부터 우리가 만들어 사용할 심볼은 아래와 같은 의미를 가진다.

  • 재사용 가능: 하나의 심볼로 여러번 반복해서 사용할 수 있다.
  • 속성 공유: 심볼은 상징적 의미를 가지므로 여러번 사용해도 같은 심볼끼리는 속성(모양, 색상, 크기, 심볼내에서의 각 객체의 위치값) 을 공유한다.
  • 유연한 대응: 예외로 이미지와 텍스트 내용은 각 심볼(레이어)마다 변경이 가능하다.
  • 속성 변경 용이: 심볼이 여러번 사용되었을 때 한번에 모든 심볼의 속성을 변경 할 수 있다.
  • 심볼 공유: 심볼을 공유하여 서로 다른 파일에서도 사용하고 수정 내용의 자동 업데이트가 가능하다.

심볼 만들기

심볼 만들기 ( Cmd + K )

심볼을 만드는 것은 간단한 작업이다. 위와 같이 단축키를 사용하는 것이 일반적이니 꼭 외워 두기를 바란다. 물론 상단 메뉴바 Object/Make Symbol 에서 실행이 가능하고 객체를 선택하고 마우스 우클릭후 심볼 만들기를 선택해도 된다.
심볼 만들기를 실행하면 한개 이상의 객체는 심볼화 된다. 그리고 자동으로 좌측 에셋 패널에 등록된다. 언제든 드래그 앤 드롭 방식으로 언제든 꺼내어 쓸 수 있다. 심볼 자체를 복사 붙여넣기 등의 여러가지 복제 방법으로 사용이 가능하다.

심볼 해체하기 ( Cmd + Shift + G )

심볼을 해체하는 방법은 앞서 다룬 그룹과 같은 방법을 해체하면 된다. 지금의 심볼을 해체 한다고 해서 그 심볼이 사라지는 것은 아니다. 좌측 에셋 패널에 아직 등록이 되어 있고, 언제든지 꺼내어 쓸 수 있다. 심볼을 해체 하는 행위는 지금의 심볼을 해체 하여 사용하는 것이지 심볼 자체를 지우는 것이 아니다. 

심볼 지우기

심볼을 지우려면 좌측 에셋 패널에서 심볼에 우측 클릭하여 지우면 된다.
다만, 심볼이 사용되어 있는지 확인 해야 한다. 만약 심볼로 사용되어 지고 있는 것을 지우면 낭패이기 때문이다. 다행인것은 심볼을 지워도 워크 스페이스에 존재하는 심볼은 그대로 객체로 변환 되어 남아 있다. 아래 옵션으로 심볼을 체크 해 볼 수 있다.

  • 심볼의 사용 유무: 심볼위에 마우스를 잠시 위치 시키고 기다리면 몇번 심볼이 사용되었는지 알려준다.
  • 심볼의 사용처: 심볼이 어디에 사용되었는지 알아볼 수 있다. 심볼에 대고 우측 마우스를 클릭하고 Highlight On Canvas 를 선택하면 워크 스페이스에 사용된 심볼을 블루 라인으로 표시 해 준다. 만약 사용한 곳이 없다면 하단에 사용된 적이 없다고 메시지를 보여준다. 
  • 사용된 심볼 찾기: 지금 사용하고 있는 심볼이 어떤 심볼인지 찾을 수 있다. 워크 스페이스에서 심볼을 선택하고 우측 마우스를 클릭하고 Reveal Symbol in Assets 를 선택하면 좌측 에셋 패널에 블루 라인으로 지금 사용하고 있는 심볼을 표시 해 준다. 
심볼의 수정 ( 두번 클릭 )

심볼은 기본적으로 크기나 속성을 변경 할 수 없다. 
그래서 심볼의 수정은 정확히 얘기 하면 심볼 안의 객체들을 수정하는 것이다. 두번클릭하여 심볼 안에 들어가서 객체들을 수정하면 심볼이 수정된다. 다만, 주의 해야 할 점은 같은 심볼을 사용했을 경우 모두 연결 되어 있기 때문에 하나의 심볼을 수정하면 여러번 쓰인 같은 심볼들도 한꺼번에 수정된다는 점이다. 이 점은 최대의 장점이자 단점이 될 수 있다. 그래서 AdobeXD에서는 가장 변화가 많은 이미지의 내용과 텍스트의 내용은 각각 따로 지정할 수 있게 하였다.

심볼의 사용 및 응용

심볼의 사용

심볼은 여러분들이 AdobeXD를 사용하는 동안 가장 중요한 요소라고 꼭 말하고 싶다. 그 만큼 많이 사용하기도 하지만 심볼을 어떻게 사용하느냐가 프로젝트에 매우 중요한 영향을 끼치기 때문이다. 그럼 심볼은 어떻게 사용하고 어떠한 경우에 사용할까?

  • 기본 레이아웃, 객체를 모듈로 준비할때
  • 여러번 반복해서 같은 요소, 객체를 사용할때
  • 프로젝트 진행중 한꺼번에 수정해야 할일이 생기는 객체를 사용할때
  • 아이콘
  • 글로벌 메뉴
  • 푸터
  • 반복되어 사용되는 타이틀

위와 같이 여러군데 사용되고 동시에 수정이 필요한 객체들을 심볼로 만들어 사용하면 편리하다.

심볼의 응용

심볼은 여러군데 반복해서 사용이 가능 하고 이를 동시에 수정도 가능 하기 때문에 매우 편리하다. 또한 심볼을 여러방면에서 응용할 수도 있을 것이다.

  • 심볼의 모듈화: 여러 심볼을 조합하여 또 다른 심볼을 생성하면 유연한 수정 및 대응이 가능하다.
  • UI kits: 심볼을 통해 자주 쓰이는 자신만의 UI kits 을 만들어 사용 할 수 있다.
  • 객체구조화: 그룹과 마찬가지로 심볼을 이용하여 여러 객체의 구조를 모자 관계로 종속 할 수 있다. 이를 통해 여러 심볼들의 조합을 넘어 구성원들 간의 협업에서도 더 나은 작업을 할 수도 있을 것이다. 예를 들면 나의 심볼안에 A군은 A군의 심볼을 쓰고 B양은 B양의 심볼을 쓰게 한다던지... 나중에 응용편에서 깊이 다뤄 보겠다.

심볼의 공유

심볼의 공유와 협업

심볼은 공동작업에서 공유하여 협업에 매우 큰 도움을 줄 수도 있다. 예를 들면 여러분의 심볼이 담긴 XD 파일을 공동 작업자에게 공유 하게 되면 공동 작업자는 공유 받은 XD 파일에서 심볼을 가져다 쓸 수 있다. 이후 여러분의 XD 파일에서 심볼을 수정하면 공동 작업자는 업데이트 메시지를 받게 되고 클릭 한번으로 수정된 심볼을 자동 업데이트 할 수 있다. 이 기능을 사용하려면 아래 순서와 같이 하면 된다.

  • 공유하고자 하는 심볼이 들어 있는 XD 파일을 Cloud Documents 에 저장한다. 
  • 저장한 파일을 공동 작업자에게 공유 한다. (Top Horizontal Panel) 우측  Share 에서 공유 가능)
  • 공동 작업자는 공유된 파일을 열어 필요한 심볼을 자신의 XD 파일로 복사해 온다. 
  • 사용한다. 
  • 심볼을 수정할 경우 심볼이 최초 만들어진 XD 문서에서 심볼을 수정하고 저장한다. 
  • 공동 작업자는 심볼이 수정되었음을 공지 받는다.
  • 공동 작업자는 심볼을 업데이트 할 수도 있고(이때 미리 적용해 볼 수 있음) 무시하고 그대로 사용할 수도 있다.
  • WOW! Simple & Easy!
  • 단, 모든 업데이트는 최초 공유 XD 파일에서 이루어져야 한다. 

이제 여러분은 심볼을 자유롭게 사용할 수 있게 되었다. 심볼을 자유롭게 사용할 수 있다는 것은 작업을 무척 효율적으로 할 수 있다는 것을 뜻한다. 물론 잘 운용하는 이슈가 남아 있지만 심볼의 개념을 잘 이해하고 잘 사용, 응용한다면 여러분과 여러분의 공동 작업자들은 점점 즐거워질 것이다. 재차 강조하지만 UX/UI 프로젝트 는 잦은 수정과 변경 추가 등이 발생한다. 그런 이슈를 빠르게 대응하고 지속적으로 업데이트하는 것이 매우 중요하다는 이야기이다. 심볼은 그 작업의 중심에 있으니 꼭 알아두고 잘 사용하기를 바란다. 

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