Google Material 아이콘 및 화면을 Adobe XD로 가져오는 방법

검색

마지막 업데이트 날짜

Adobe XD는 UI 키트 가져오기 기능을 통해 인터페이스를 제작하기 위한 작업 과정을 개선하고 단순화합니다. Google의 디자인 시스템에 속해 있는 요소를 가져와 UI 제작을 빠르게 시작하는 방법에 대해 알아봅니다.

Italo Sannino는 나폴리 미술대학교를 졸업한 후 20년 이상 디지털 창작 부문에 종사하고 있으며, 현재 나폴리 미술대학교에서 UI 디자인을 가르칩니다. 그는 1997년 소규모 뉴미디어 대행사인 “Geko”를 설립하여 개인적인 실험 분야로 활용하고 있습니다. 현재 Adobe 커뮤니티 전문가인 그는 Adobe Guru Project를 통해 유용한 인터페이스 및 관련 Adobe 툴에 대한 방법론, 디자인 및 기획에 밀접하게 관련되어 있으며, 최근에는 Wacom Ambassador 멤버 중 하나가 되었습니다.

여기에서 그의 창의성에 대해 확인할 수 있습니다.

사전 요구 사항: 적합한 글꼴 활성화

Google Material은 주로 Android OS용으로 Google에서 개발한 디자인 시스템입니다. 디자인 시스템을 사용하는 데 있어 타이포그래피는 중요한 역할을 합니다. 그에 따라 디자인이 제대로 작동하도록 하려면 Adobe Fonts 라이브러리에서 참조 글꼴을 활성화하십시오.

참고:

Google Material은 버튼 아이콘 및 스타일의 집합 그 이상입니다. 이는 디자인 시스템으로서 UI/UX에 대한 일반적인 모범 사례뿐만 아니라 가져온 인터페이스 요소의 사용에 대해서도 다룹니다. 자세한 내용은 Material Design에서 확인하십시오.

적합한 글꼴을 활성화하려면 다음 단계를 따르십시오.

Adobe Fonts의 Roboto 페이지를 방문합니다.
오른쪽 상단의 모든 글꼴 활성화 슬라이더를 사용하여 글꼴 패밀리를 활성화합니다.

fonts.adobe.com의 Roboto 페이지

UI 키트 가져오기 준비

Adobe XD를 실행합니다. 다양한 옵션을 제공하는 스플래시 페이지가 표시됩니다. iPhone 6/7/8과 같은 일반적인 사전 설정을 선택하여 시작합니다.
사전 설정을 선택한 후 문서를 만들고 파일 > UI 키트 받기 > Google Material 메뉴 항목을 선택합니다.

UI 키트 받기 메뉴
Google Material 다운로드 페이지로 리디렉션됩니다. Adobe XD 포맷의 UI 키트에 대한 다운로드 링크를 클릭합니다.

Adobe XD 파일 포맷에 대한 다운로드 페이지
새로 다운로드한 Adobe XD 파일을 엽니다.

Google Material UI 키트가 포함된 파일

Google Material UI 요소가 있는 파일을 구한 후 특정 요구 사항에 따라 두 가지 방법으로 디자인이나 새 파일로 효율적으로 가져올 수 있습니다. 한 번에 하나의 항목을 가져오거나 모든 요소(구성 요소 포함)를 포함하는 모든 아트보드를 가져올 수 있습니다.

디자인으로 개별 항목 가져오기

이 방법은 파일을 가볍게 유지하고 에셋을 완벽하게 제어할 수 있다는 확실한 이점이 있습니다.

UI 요소(또는 관심 있는 인터페이스 요소)를 파악합니다.
선택 도구(V 키 누름)로 UI 요소를 선택합니다.
Command + C(Mac) 또는 Ctrl + C(Windows)를 눌러 선택한 항목을 복사하고 Command + V(Mac) 또는 Ctrl + V(Win)를 눌러 붙여넣습니다.

Command + V(Mac) 또는 Ctrl + V(Win)을 눌러 붙여넣습니다.

아래 예에서는 메일 아이콘을 디자인에 통합하는 경우를 보여 줍니다.

Google Material과 디자인의 파일 간 복사 및 붙여넣기 작업

참고:

Google UI 키트의 모든 요소는 벡터 그래픽으로 되어 있으므로 원하는 대로 편집할 수 있습니다.

개별 요소가 많은 경우 Google UI가 포함된 파일에서 한 번에 하나씩 가져오는 것은 시간 소모적이며 지루한 과정이 될 수 있습니다. 따라서 하나 이상의 아트보드를 복사하여 붙여넣을 수 있는 기능은 Adobe XD의 장점을 엿볼 수 있는 흥미로운 기능 중 하나입니다.

여러 아트보드를 내 디자인으로 가져오기

Google UI가 포함된 Adobe XD 파일을 다시 열거나 다시 가져옵니다.
모든 아트보드를 선택하려면 Cmd + A(Mac) 또는 Ctrl + A(Windows)를 누릅니다.
Command + C(Mac) 또는 Ctrl + C(Windows)를 눌러 복사하고 Command + V(Mac) 또는 Ctrl + V(Win)를 눌러 붙여넣습니다.

구성 요소를 사용하여 여러 아트보드 가져오기

여러 아트보드를 붙여넣는 과정은 편리하고 강력하지만, 마지막 릴리스 이후 Adobe XD는 연결된 구성 요소의 모델을 사용합니다. 소스에서 구성 요소의 링크를 해제하거나 소스 파일에서 구성 요소를 편집하지 않는 한 Google 파일에서 구성 요소로 변환된 UI 부분을 편집할 수 없습니다. 이 경우에는 소스에서 구성 요소의 연결을 해제해 보십시오.

오늘날 많은 사람들이 동일한 프로젝트를 진행하고 해당 파일을 공유하는 것은 드문 일이 아닙니다. 이는 물론 Google UI 키트 XD 파일에도 적용됩니다. 이렇게 연결된 구성 요소와 같은 상황에서는 진정한 장점이 부각되기 마련입니다.

연결된 구성 요소를 사용하면 프로젝트의 UI에 있는 모든 요소가 포함된 소스 파일(이 경우 스타일 가이드 또는 디자인 시스템)을 하나만 가질 수 있으며 이를 다른 Adobe XD 파일에서 사용할 수 있습니다.

소스 파일에서 제공되는 XD 파일에서 연결된 구성 요소를 사용하면 이러한 구성 요소 중 하나가 변경될 때 항상 알림을 수신하게 되며, 해당 변경 내용을 미리 보고 이를 수락할지 거부할지를 결정할 수 있습니다.

이 강력한 기능은 작업 과정을 간소화할 뿐만 아니라 이러한 종류의 작업에서 가장 중요하게 여겨지는 UI/UX의 일관성을 보장해 줍니다.

로컬 구성 요소 만들기 명령 사용

Command + Shift + Y(Mac) 또는 Ctrl + Shift + Y(Windows)를 눌러 에셋 패널을 활성화합니다.
Control + 클릭(Mac) 또는 마우스 오른쪽 클릭(Windows)으로 변환하고자 하는 구성 요소를 선택하고 팝업 창에서 로컬 구성 요소 만들기를 선택합니다.

내 계정 로그인