XD 왕초보 가이드_ 컴포넌트 사용법

 

어도비 XD에서 컴포넌트는 디자인 작업을 보다 빠르고 효율적인 수행이 가능하게 해 주는 기능입니다.

 

 

컴포넌트를 라이브러리로 저장하면, 다른 프로젝트에서도 쉽게 불러와 재사용할 수 있어 그 쓰임새가 아주 유용합니다.

UI/UX 디자이너라면 자주 쓰는 아이콘의 디자인이 어느 정도는 갖춰져 있을 텐데요.

물론 브랜드에 따라 아이콘의 형태 또한 변하겠지만, 저의 경우 불렛 디자인 등은 여기저기 돌려막기(?) 를 많이 하는 편이라 컴포넌트의 기능이 가히 혁명적이라고 까지 느껴지는 부분입니다.😇

 

그럼 컴포넌트에 대해 함께 알아볼까요?

 

 

컴포넌트를 만드는 방법

위와 같이 문서 에셋 탭에서, 구성 요소(컴포넌트) 탭에 자신이 추가한 아이콘 등의 요소들을 확인해 볼 수 있는데요,

컴포넌트를 만드는 방법은 다음과 같습니다.

1. 아트보드에서 컴포넌트로 만들고 싶은 디자인 요소를 선택한 후 컴포넌트 탭 상단의 "+" 버튼을 클릭합니다.

2. 컴포넌트가 생성되면 이름을 지정해 줍니다.

몹시 간단하죠??

 

컴포넌트를 만들었다면, 이제 이를 다른 아트보드에서도 사용 가능합니다.

컴포넌트를 사용할 다른 아트보드로 이동한 후, 컴포넌트 탭에서 원하는 컴포넌트를 드래그하여 아트보드에 추가해주기만 하면 됩니다.

컴포넌트를 사용하면, 이전에 만든 디자인 요소를 복사 붙여넣기 등을 할 필요 없이, 컴포넌트를 추가해서 아주 간편하게 사용할 수 있습니다. 또한 컴포넌트를 수정하면, 해당 컴포넌트가 사용된 모든 곳에서 수정된 디자인으로 일괄 적용이 가능하기 때문에 여러 번 다시 복사 붙여넣기해야 하는 수고로움을 덜 수 있습니다. 이를 통해 디자인 작업의 생산성을 높일 수 있습니다.

 

UI/UX 디자이너에게 있어 컴포넌트 기능의 장점

1. 반복 작업을 줄여 시간의 효율성을 높여줍니다.

2. 디자인의 일관성을 유지하는 게 더욱 쉬워집니다.

3. 다른 프로젝트에 있어서도 쉽게 재사용이 가능합니다. 컴포넌트를 라이브러리로 저장해 사용하면 다른 프로젝트에서 쉽게 재사용이 가능해, 하나의 디자인 시스템으로 여러 프로젝트를 관리하는 데 용이합니다.

(한 프로젝트를 여러 가지로 배리에이션해야 할 때 더욱 유용함)

 

 

XD에서 UI Kit의 사용

XD에서 UI Kit를 사용하면 좀 더 편의성이 높아집니다.(물론 고유의 브랜딩을 유지하기 위해서는 이에 너무 의존하는 건 금물입니다.)

UI 키트는 이미지, 아이콘, 폰트 등의 디자인 요소들을 모아 놓은 것으로, 이를 사용하면 직접 디자인 요소들을 하나씩 만들 필요 없이, 이미 만들어진 요소들을 사용하여 디자인 작업에 임할 수 있습니다.

UI 키트는 디자인 작업을 빠르고 쉽게 수행할 수 있도록 도와주는 필수적인 요소입니다.

 

아래의 이미지는 구글에서 배포하는 XD UI Kit입니다.

 

 

어도비 XD 공식 사이트 등에서 아래 이미지의 경로를 통해 다운받을 수 있다 안내해 주고 있는데,

저는 이상하게 프로그램 내에서 링크가 뜨지 않더라구요...😢

위의 경로를 누르면, 어도비 XD 공식 사이트에서 UI 키트 사용법을 안내해주는 페이지로만 넘어가고 다운로드는 찾을 수 없길래 

웹 서치를 통해 구글 UI Kit 다운받는 링크를 가져왔습니다.

 

https://m1.material.io/resources/sticker-sheets-icons.html#sticker-sheets-icons-components

Sticker sheets & icons - Resources - Material Design

혹시 저처럼 XD 프로그램 자체에서 다운이 안되는 경우 위의 링크에서 받아서 사용하시면 됩니다.

 

 

 

구글 머티리얼 디자인 사용하기 

 

https://fonts.google.com/icons

구글 아이콘은 사용자에게 무려 4,000개가 넘는 아이콘을 라이센스 무료로 제공합니다.

심지어 커스터마이징까지 가능합니다.

customization 박스를 통해

Fill: 아이콘 내부를 채우거나 비우는 기능

Weight: 아이콘의 라인 두께를 조정할 수 있음

Grade: 아이콘의 라인을 변화시킬 수 있음

Optical size: 아이콘의 크기 조절

위와 같은 다양한 옵션이 가능합니다.

 

구글에서 제공하는 아이콘은 아주 직관적이고 심플한 형태여서 그 쓰임새가 무궁무진합니다.

여기서 다운받은 아이콘들을 나의 컴포넌트에 등록하면 아주 유용하겠죠?

 

다음 시간엔 XD의 꽃이라 할 수 있는 반복그리드에 대해 알아보도록 하겠습니다.

읽어주셔서 감사합니다.