에셋 패널은 자주 사용되는 색상과 문자 그리고 심볼을 등록 할 수 있는 패널이다. 에셋 패널을 잘 사용하고 활용하여 프로젝트를 더욱 효율적으로 진행 할 수 있으며 더 빠르고 편리하게 관리 할 수 있다. 또한 불 필요한 색상과 문자 그리고 심볼을 관리하여 깔끔한 XD 파일을 만들수도 있다.
에셋 패널에는 총 3가지 속성의 에셋을 등록 할 수 있다. 색상, 문자 스타일, 심볼이 그것이다. 아래 이미지는 에셋이 등록된 모습이다. 에셋패널은 리스트형과 갤러리형 두가지 모습으로 볼 수 있다. 그럼 3가지 속성을 등록하는 방법에 대해 알아보자.
에셋을 등록하는 방법에는 네가지 방법이 있다.
상단 메뉴 바를 이용하는 방법
오브젝트 선택 후 우측 마우스 클릭을 이용하는 방법
단축키를 이용하는 방법
마지막으로 가장 중요한 방법
오브젝트들을 선택해 놓고 좌측 에셋 패널의 각 + 버튼을 누르면 선택된 모든 오브젝트의 색상 또는 문자 가 에셋에 등록 된다.
심볼의 등록
심볼은 직접 등록 하지 않아도 심볼을 만들면 자동으로 에셋에 등록된다.
등록시 주의할 점
색상, 문자의 속성중 하나라도 다르면 다른 에셋으로 인식하고 등록 된다. 예를 들면 나머지 속성이 모두 같아도 색상의 알파값이나 문자의 단락간등 한가지 속성이라도 다르면 다른 에셋으로 등록된다.
에셋 패널에 등록된 색상, 문자 스타일 그리고 심볼은 언제든 워크 스페이스에 적용 또는 꺼내어 쓸 수 있다.
색상의 사용
색상의 사용은 오브젝트 (모양, 문자등) 을 클릭 한 상태에서 에셋의 색상을 클릭하면 오브젝트에 같은 색상의 적용된다.
문자 스타일의 사용
문자 스타일의 사용은 문자를 클릭 한 상태에서 에셋의 문자 스타일을 클릭하면 문자에 같은 문자 스타일로 적용된다. 이때 문자 스타일의 모든 속성이 적용된다.
심볼의 사용
심볼은 마우스로 워크 스페이스에 드래그 앤 드롭 하여 사용하면 된다.
에셋들의 정보는 에셋 자체에 기본으로 보여진다.
하지만 에셋들의 이름을 수정할 수 있기 때문에 이름이 수정 되었을때 간단 정보를 보기 위해서는 마우스를 해당 에셋 위에 위치 시키고 1초 이상 기다리면 해당 에셋의 정보가 뜬다. 이때 색상은 컬러 코드, 문자 스타일은 문자의 자간과 행간이 보이며 심볼은 워크 스페이스에 몇번 쓰였는지를 알려준다.
좀더 자세한 내용을 보기 위해서는 해당 에셋에 마우스 우 클릭을 하면 여러가지 옵션을 볼 수 있다.
옵션창이 뜨면 아래와 같이 옵션들이 보인다.
색상 에셋
문자 스타일
심볼
에셋의 속성을 변경하려면 옵션중 Edit 을 누르면 된다.
Edit 을 클릭하면 관련된 속성을 변경 할 수 있도록 레이어 창이 뜨게 된다. 창에서 해당 에셋의 모든 것을 변경이 가능하다. 다만, 심볼은 이름을 변경하는 정도가 가능하다. 심볼 속성의 변경은 워크 스테이지에서 직접 바꾸어야 한다.
신이 주신 멋진 기능
반복하지만 해당 속성을 변경하면 워크 스페이스에 적용되어 있는 모든 오브젝트의 속성이 변경된다. 100개면 100개 모두!
그래서 주의 하기도 해야 한다. 잘못 바꾸어 놓고 작업을 진행하면 나중에 낭패를 당할 수도 있다.
에셋들 중에 속성이 같아지면?
에셋들이 속성이 같아지면 두개 이상의 에셋은 하나로 통합된다.
에셋들이 위에서 부터 주욱 늘어져 있다. 보기 안 좋고 알아보기 힘들다면 그 순서를 변경할 수 있다. 해당 에셋을 마우스로 클릭한 상태에서 원하는 위치에 놓아 주기만 하면 된다. 다만, 아직 폴더링 이나 정렬등을 제공 되고 있지 않다.
에셋을 등록하여 쓰다보면 생각보다 많은 에셋이 등록되어 있기 마련이다. 이럴때에는 검색 기능을 사용하면 편하다.
에셋의 검색은 기본으로 모든 에셋을 보게 되어 있고 검색창 우측 아래 화살표를 클릭하게 되면 모든 에셋, 색상, 문자 스타일, 심볼, 연결된 심볼을 선택할 수 있다. 그 이후 라인 밑으로 검색했던 단어들을 열거해서 보여 주고 있다.
* 연결된 심볼: 심볼중 다른 문서(워크 스페이스)에서 가져온 심볼은 원본 워크 스페이스에서 변경하면 그 심볼을 쓴 다른 문서에도 업데이트가 가능하다. 이 심볼은 에셋에 링크 표시가 있으므로 따로 관리 할 수 있다.이에 검색 분류에도 이를 분류 해 놓은 것이다.
에셋은 이렇게 분류도 가능 하고 검색도 가능하다. 폴더링이 없어 아쉽긴 하지만 이 것으로 일단은 만족!
위 이미지 처럼 에셋에서 색상의 속성을 변경하면 워크 플레이스에 있는 모든 같은 색상 속성을 가진 오브젝트들이 함께 변경된다. 문자 스타일 속성 또한 마찬가지이다. 에셋은 그 무엇을 대표하는 것이므로 같은 속성을 가지고 있다면 모두 함께 변경되는 것이다.
이 기능으로 우리는 뭘 할 수 있을까?
에셋 패널은 단순히 에셋들을 모아 놓는 것을 넘어서 디자이너들이 협업 할때 필요한 컬러 가이드, 폰트 가이드, 아이콘 가이드를 만들 수 있다.
방법은 간단하다. 에셋 패널을 잘 정리 해 놓는 것이다.
위와 같이 정리 해 둔다면 XD 문서를 공유 하여 협업 할때 함께 프로젝트를 진행하는 디자이너들에게 큰 도움이 될 것이다.
위와 같이 에셋 패널을 잘 사용하면 디자이너들이 협업하는데에 매우 효율적이다. 솔로 작업에도 큰 도움이 되고 말이다. 또한 에셋 패널을 잘 활용하면 손 쉽게 많은 데이터를 변경하거나 바로 잡을 수 있다.
협업시 에셋 패널의 관리는 효율적인 작업에 꼭 필요한 작업이기에 단순히 에셋창고 정도로만 생각하지 말고 잘 관리하도록 하자.
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에셋 패널의 사용법과 활용
Copyright © 2018 AdobeXD.info & Bandy garnet.
All Rights Reserved.
E-mail: bandygarnet@gmail.com
Slack: adobexdclass.slack.com