18 ASSETS PANEL

에셋 패널의 사용법과 활용

에셋 패널은 자주 사용되는 색상과 문자 그리고 심볼을 등록 할 수 있는 패널이다. 에셋 패널을 잘 사용하고 활용하여 프로젝트를 더욱 효율적으로 진행 할 수 있으며 더 빠르고 편리하게 관리 할 수 있다. 또한 불 필요한 색상과 문자 그리고 심볼을 관리하여 깔끔한 XD 파일을 만들수도 있다.

에셋의 사용

에셋 패널에는 총 3가지 속성의 에셋을 등록 할 수 있다. 색상, 문자 스타일, 심볼이 그것이다. 아래 이미지는 에셋이 등록된 모습이다. 에셋패널은 리스트형과 갤러리형 두가지 모습으로 볼 수 있다. 그럼 3가지 속성을 등록하는 방법에 대해 알아보자.

에셋 등록

에셋을 등록하는 방법에는 네가지 방법이 있다.

상단 메뉴 바를 이용하는 방법

Object/Add Color to Assets
Object/Add Charcter Style to Assets

오브젝트 선택 후 우측 마우스 클릭을 이용하는 방법

Add Color to Assets ( Cmd+Shift+C )
Add Charcter Style to Assets ( Cmd+Shift+T )

단축키를 이용하는 방법

Cmd+Shift+C - 색상 등록
Cmd+Shift+T - 문자 스타일 등록

마지막으로 가장 중요한 방법
오브젝트들을 선택해 놓고 좌측 에셋 패널의 각 + 버튼을 누르면 선택된 모든 오브젝트의 색상 또는 문자 가 에셋에 등록 된다.

심볼의 등록
심볼은 직접 등록 하지 않아도 심볼을 만들면 자동으로 에셋에 등록된다.

등록시 주의할 점
색상, 문자의 속성중 하나라도 다르면 다른 에셋으로 인식하고 등록 된다. 예를 들면 나머지 속성이 모두 같아도 색상의 알파값이나 문자의 단락간등 한가지 속성이라도 다르면 다른 에셋으로 등록된다.

에셋 패널의 사용

에셋 패널에 등록된 색상, 문자 스타일 그리고 심볼은 언제든 워크 스페이스에 적용 또는 꺼내어 쓸 수 있다.

색상의 사용
색상의 사용은 오브젝트 (모양, 문자등) 을 클릭 한 상태에서 에셋의 색상을 클릭하면 오브젝트에 같은 색상의 적용된다.

문자 스타일의 사용
문자 스타일의 사용은 문자를 클릭 한 상태에서 에셋의 문자 스타일을 클릭하면 문자에 같은 문자 스타일로 적용된다. 이때 문자 스타일의 모든 속성이 적용된다.

심볼의 사용
심볼은 마우스로 워크 스페이스에 드래그 앤 드롭 하여 사용하면 된다.

에셋들의 정보 보기

에셋들의 정보는 에셋 자체에 기본으로 보여진다.
하지만 에셋들의 이름을 수정할 수 있기 때문에 이름이 수정 되었을때 간단 정보를 보기 위해서는 마우스를 해당 에셋 위에 위치 시키고 1초 이상 기다리면 해당 에셋의 정보가 뜬다. 이때 색상은 컬러 코드, 문자 스타일은 문자의 자간과 행간이 보이며 심볼은 워크 스페이스에 몇번 쓰였는지를 알려준다.
좀더 자세한 내용을 보기 위해서는 해당 에셋에 마우스 우 클릭을 하면 여러가지 옵션을 볼 수 있다.

옵션창이 뜨면 아래와 같이 옵션들이 보인다.

색상 에셋

Delete - 해당 에셋을 삭제한다.
Edit - 해당 에셋의 속성을 수정 할 수 있다. 이때 해당 속성을 가지고 있는 모든 워크 스페이스의 색상의 속성이 함께 바뀌게 된다. 매우 멋진 기능이자 무서운 기능이다.
Highlight on Canvas - 워크 스페이스에 있는 해당 색상의 속성을 가지고 있는 모든 오브젝트를 표시 해 준다.
Rename - 이름을 변경할 수 있다. 이름을 더블 클릭해도 변경이 가능하다.
Apply as Fill - 현재 선택되어 있는 오브젝트의 면을 해당 색상으로 적용한다.
Apply as Border - 현재 선택되어 있는 오브젝트의 외곽선을 해당 색상으로 적용한다.
Copy #000000 - 해당 색상의 색상 코드를 복사한다.

문자 스타일

Delete - 해당 에셋을 삭제한다.
Edit - 해당 에셋의 문자 속성을 수정 할 수 있다. 이때 해당 문자 속성을 가지고 있는 모든 워크 스페이스의 문자의 속성이 함께 바뀌게 된다. 다시 말하지만 신이 주신 기능이자 잘못하면 큰 화를 입는다.
Highlight on Canvas - 워크 스페이스에 있는 해당 문자의 속성을 가지고 있는 모든 오브젝트를 표시 해 준다.
Rename - 이름을 변경할 수 있다. 이름을 더블 클릭해도 변경이 가능하다.

심볼

Delete - 해당 에셋을 삭제한다.
Highlight on Canvas - 워크 스페이스에 있는 모든 해당 심볼을 표시 해 준다.
Rename - 이름을 변경할 수 있다. 이름을 더블 클릭해도 변경이 가능하다.

에셋 속성의 변경

에셋의 속성을 변경하려면 옵션중 Edit 을 누르면 된다.

Edit 을 클릭하면 관련된 속성을 변경 할 수 있도록 레이어 창이 뜨게 된다. 창에서 해당 에셋의 모든 것을 변경이 가능하다. 다만, 심볼은 이름을 변경하는 정도가 가능하다. 심볼 속성의 변경은 워크 스테이지에서 직접 바꾸어야 한다.

신이 주신 멋진 기능
반복하지만 해당 속성을 변경하면 워크 스페이스에 적용되어 있는 모든 오브젝트의 속성이 변경된다. 100개면 100개 모두!
그래서 주의 하기도 해야 한다. 잘못 바꾸어 놓고 작업을 진행하면 나중에 낭패를 당할 수도 있다.

에셋들 중에 속성이 같아지면?
에셋들이 속성이 같아지면 두개 이상의 에셋은 하나로 통합된다.

에셋들의 순서 바꾸기

에셋들이 위에서 부터 주욱 늘어져 있다. 보기 안 좋고 알아보기 힘들다면 그 순서를 변경할 수 있다. 해당 에셋을 마우스로 클릭한 상태에서 원하는 위치에 놓아 주기만 하면 된다. 다만, 아직 폴더링 이나 정렬등을 제공 되고 있지 않다.

에셋 찾기

에셋을 등록하여 쓰다보면 생각보다 많은 에셋이 등록되어 있기 마련이다. 이럴때에는 검색 기능을 사용하면 편하다.

에셋의 검색은 기본으로 모든 에셋을 보게 되어 있고 검색창 우측 아래 화살표를 클릭하게 되면 모든 에셋, 색상, 문자 스타일, 심볼, 연결된 심볼을 선택할 수 있다. 그 이후 라인 밑으로 검색했던 단어들을 열거해서 보여 주고 있다.

* 연결된 심볼: 심볼중 다른 문서(워크 스페이스)에서 가져온 심볼은 원본 워크 스페이스에서 변경하면 그 심볼을 쓴 다른 문서에도 업데이트가 가능하다. 이 심볼은 에셋에 링크 표시가 있으므로 따로 관리 할 수 있다.이에 검색 분류에도 이를 분류 해 놓은 것이다.

에셋은 이렇게 분류도 가능 하고 검색도 가능하다. 폴더링이 없어 아쉽긴 하지만 이 것으로 일단은 만족!

에셋 패널의 활용

에셋 변경으로 전체 속성 변경하기

위 이미지 처럼 에셋에서 색상의 속성을 변경하면 워크 플레이스에 있는 모든 같은 색상 속성을 가진 오브젝트들이 함께 변경된다. 문자 스타일 속성 또한 마찬가지이다. 에셋은 그 무엇을 대표하는 것이므로 같은 속성을 가지고 있다면 모두 함께 변경되는 것이다.
이 기능으로 우리는 뭘 할 수 있을까?

키 컬러 한번에 변경하기
색상 값 미세한 조정 한꺼번에 하기
문자의 크기 한꺼번에 조정하기
문자의 색상 한꺼번에 조정하기
미세하게 차이나는 에셋 통합하기
타입 페이스 간소화 하기

XD 문서로 디자인 가이드 만들기

에셋 패널은 단순히 에셋들을 모아 놓는 것을 넘어서 디자이너들이 협업 할때 필요한 컬러 가이드, 폰트 가이드, 아이콘 가이드를 만들 수 있다.
방법은 간단하다. 에셋 패널을 잘 정리 해 놓는 것이다.

꼭 필요한 컬러만 정리해 둔다.
문자들을 크기대로 정리해 둔다.
아이콘들을 심볼화 하여 정리해 둔다.
버튼들을 심볼화 하여 정리해 둔다.
자주 쓰이는 이미지 박스를 심볼화 하여 둔다.

위와 같이 정리 해 둔다면 XD 문서를 공유 하여 협업 할때 함께 프로젝트를 진행하는 디자이너들에게 큰 도움이 될 것이다.

위와 같이 에셋 패널을 잘 사용하면 디자이너들이 협업하는데에 매우 효율적이다. 솔로 작업에도 큰 도움이 되고 말이다. 또한 에셋 패널을 잘 활용하면 손 쉽게 많은 데이터를 변경하거나 바로 잡을 수 있다.
협업시 에셋 패널의 관리는 효율적인 작업에 꼭 필요한 작업이기에 단순히 에셋창고 정도로만 생각하지 말고 잘 관리하도록 하자.