adobe xd 맨땅에 헤딩하기 04. 디자인 - 색상 및 문자 스타일 재사용

adobe xd 맨땅에 헤딩하기 04. 디자인 - 색상 및 문자 스타일 재사용

 

 

좌충우돌 xd 적응기 그 네 번째 시간.

이번에 다룰 내용은 '재사용' 이라는 키워드가 눈에 띄는데요.

작업효율이 굉장히 올라갈 것 같은 뉘앙스인데 얼른 한 번 보도록 할까요? 

 

 

라이브러리

xd 화면의 좌측 하단 중 가장 상단의 라이브러리 버튼을 클릭하여 문서 에셋을 열 수 있다. 라이브러리의 주요 기능은 에셋의 재사용 및 공유입니다.

 

버튼을 눌러 왼쪽의 도구상자를 라이브러리로 변경한다.

처음 라이브러리에 들어가면 아무것도 없습니다. 왜냐면 우리가 등록을 하지 않았기 때문입니다. 

아트보드를 클릭하면 현재 아트보드에 있는 내용들을 라이브러리에 추가할 수 있도록 '+' 버튼이 활성화됩니다.

+버튼을 누르면 현재 아트보드의 내용들이 카테고리(색상, 텍스트스타일 등) 에 맞춰 에셋에 등록됩니다.

 

아트보드 클릭해야 + 버튼이 활성화됨.

+버튼을 클릭하면 이렇게 에셋을 가져온다.

자 여기까지 했을 때 왜 이런 번거로운 일을 하는지 잘 이해가 안가실 수 있어요. 저도 그랬거든요!

우선은 다른 예시도 확인해보며 익숙해져봅시다.

 

Color 아트보드를 클릭하고 +를 눌러주면

Color 아트보드를 클릭하고 + 버튼을 클릭하여 아트보드 내의 색상을 모두 가져왔습니다. 그런데 갯수가 이상하네요?

Color 아트보드 내에는 분명히 6가지의 색상이 존재하는데 다섯가지밖에 추가가 되지 않았네요.

왜냐면 '중복된 값은 합쳐짐' 이기 때문입니다.

이미 첫번째 아트보드 때 주황색에 해당하는 값이 등록되었기때문에 추가되지 않은 것이죠.

 

 

에셋의 재사용

자 좋습니다. 등록하는건 그렇다 치자구요. 그런데 이렇게 등록한걸 어디다 써먹냐. 바로 아래처럼 써먹습니다.

 

현재 선택한 아트보드의 배경색을 바꾸고싶다..

클릭 한번에 완벽히 동일한 색깔로 색이 칠해졌다!

디자인에 대해 잘 알진 못하지만 '통일성'이 굉장히 중요하다고 알고 있습니다.

색도 조합에 맞춰 써야하고 같은 색상이면 가능하면 동일한 색상값을 이용해야하죠.

에셋에 프로젝트에서 사용되는 색상들을 등록해놓으면 이렇게 클릭 한 번으로 간단하게 바로 색을 적용할 수 있는겁니다.

편하겠죠? 

 

그리고 한 가지 더! 에셋에 저장된 색을 변경하면 해당 색을 쓰고있는 모든 아트보드에서 일괄적으로 변경됩니다.

 

색을 변경하면 모두 바뀐다.

원래 주황색이었던 에셋을 파란색으로 변경해보았습니다. 그러니 기존에 주황색이었던 요소들의 색깔이 한 번에 변경되었습니다.

자 만약 프로젝트 마지막쯤 되어 메인 컬러가 마음에 들지 않습니다. 색상을 변경을 하려면 요소 하나하나 다 클릭해서 원하는 값으로 바꿔줘야겠죠? 

에셋에 등록해놓으면 일일이 할 필요 없이 해당 색이 사용된 것들이 한 방에 다 바뀌는 겁니다.

굉장히... 편리하겠죠? 

이 부분은 확실히 xd를 다루며 필수적인 내용은 아니라 생각합니다.

하지만 알아두면 생산성이 굉장히 올라가고, 팀들과의 협업에서 굉장한 이점이 있을 것 같네요!

저도 꼭 기억하고 숙달해 잘 써먹어야겠습니다 :)