어도비 XD 2020년 6월 릴리스: 디자인 토큰, 스택, 스크롤 그룹 등
오늘은 어도비 XD의 서른 번째 릴리스를 축하하는 역사적인 날입니다. XD 30에 새로운 방식의 디자인, 프로토타이핑 및 공동 작업 기능이 플랫폼 전반의 새로운 기능과 함께 추가되었습니다. 또한 XD는 현재 지원되는 8개 언어 외에 이탈리아어와 러시아어에 대한 언어 지원이 추가됩니다.
시작부터 2년 반 동안 XD와 함께해 주신 커뮤니티에 깊은 감사의 말씀을 전합니다.
업데이트된 XD를 시작하려면 크리에이티브 클라우드 애플리케이션에서 XD 30으로 업데이트하거나 XD를 다운로드하세요.
얼마 전에 어도비 디자인 기금(Adobe Fund for Design)에서 XD용 플러그인 개발과 같은 위탁 기술 프로젝트에 대해 보조금을 발행하게 되었다는 소식을 전해드린 바 있습니다. 자세한 내용은 발표 소식을 담은 어도비 블로그 게시물을 참조하시고 공개 프로젝트 목록은 여기 트렐로(Trello) 사이트를 확인하시기 바랍니다.
이번에 공개된 XD의 새로운 기능을 살펴보겠습니다.
XD의 새로운 디자인 및 프로토타이핑 방식
우리가 기억할 핵심은, XD는 UI/UX 디자인 작업에서 사용이 간편하고 강력하며 빠르다는 것입니다. 따라서 우리 XD 팀은 디자이너가 최상의 결과물을 만들도록 더욱 편리하고 빠른 작업을 지원하는 기능을 염두에 두고 툴을 설계합니다. XD의 기능은 작업 시간을 절약하고 반복적인 작업을 자동화하여 사용자가 가장 중요한 작업에 집중할 수 있도록 하는 데 있습니다.
스택
스택은 XD에서 그룹 및 구성 요소를 사용하여 작업하는 새로운 방법입니다. CSS의 플렉스박스와 유사한 스택은 일정 간격이 설정되어 있는 오브젝트의 열 또는 행입니다. 작업자가 디자인을 변경하는 과정에서 스택에 오브젝트를 추가 및 제거하고, 순서 또는 크기를 변경하는 경우 모든 다른 오브젝트가 자동 조정되면서 간격은 그대로 유지되는 기능입니다.
스택을 만들면 XD는 스택의 방향(세로 또는 가로)을 감지합니다. 캔버스에서 오브젝트 사이 간격을 일정하게 또는 불규칙하게 조정할 수 있습니다. 카드, 드롭다운, 내비게이션 및 모달과 같이 일반적인 UI 요소를 디자인할 때 번거롭게 일일이 조정할 필요가 없습니다.
디자인 시스템인 스택 기능을 반응형 크기 조정과 패딩과 같은 다른 내용 인식 레이아웃 기능과 함께 사용하면 구성 요소를 유연하고 다이내믹하게 만들 수 있습니다. 매번 구성 요소를 재구성하지 않고도 디자인 시스템에서 구성 요소를 선택한 다음 텍스트를 변경하고 오브젝트를 추가 또는 제거하거나 순서를 바꾸는 등 자유롭게 변경할 수 있습니다.
스크롤 그룹
스크롤 그룹은 프로토타입이 마치 웹 사이트와 앱이 라이브된 것처럼 작동하게 해줍니다. 이제 피드, 목록, 회전식 이미지, 갤러리 등을 디자인하는 경우 디자인의 일부 구성 요소를 스크롤할 수 있습니다. 어도비 XD 유저보이스에서 가장 많은 요청을 받았던 한 기능인 스크롤 그룹을 이번 릴리스를 통해 드디어 출시할 수 있게 되어 매우 기쁩니다.
디자인의 일부를 스크롤 그룹으로 바꾸고 가로, 세로 또는 양방향으로 스크롤되도록 설정할 수 있습니다. 스크롤 그룹을 만들면 캔버스에 표시되는 파란색 핸들을 사용해 스크롤 가시 영역을 조정합니다. 데스크톱에서 프로토타입을 미리 보거나 프로토타입 링크를 공유하면 해당 영역을 스크롤할 수 있습니다.
렛츠엑스디(Let’s XD)에서 스택과 스크롤 그룹을 사용하여 작업하는 방법을 배울 수 있고 임페커블(Impekable) 팀이 만든 데모 파일을 다운로드하면 이 두 기능의 활용 방식을 직접 살펴볼 수 있습니다.
개발자와의 공동 작업 혁신
XD는 단순한 디자인 툴이 아니라 디자인 협업을 위한 플랫폼입니다. 다른 디자이너들과 아이디어를 주고받고, 개발자와 디자인 사양을 공유하고, 클라이언트와도 공유하여 피드백을 구하거나 디자인 시스템을 구축할 때도 XD를 사용하면 원활한 프로젝트 진행과 더불어 모두의 의견을 효과적으로 조율할 수 있습니다.
디자인 토큰
디자인 토큰은 디자이너와 개발자가 XD를 통해 함께 작업할 수 있는 새로운 방법입니다. 이제 에셋 패널에서 색상과 문자 스타일에 이름을 지정할 수 있고, 이러한 색상과 문자 스타일은 개발자가 다운로드 가능한 CSS 파일로 자동 게시됩니다. 개발자는 코드에서 이 CSS 파일을 참조할 수 있고, 디자인의 스타일을 변경하면 수동으로 코드를 업데이트하지 않고도 업데이트된 CSS를 간단하게 이용할 수 있습니다.
디자인 토큰은 지나 앤(Jina Anne)이 라이트닝 디자인 시스템의 일부로 처음 소개한 개념입니다. 디자인 토큰은 색상 또는 본문 텍스트 스타일처럼 코드에서 사용 가능한 시각 디자인 의사 결정을 참조할 수 있는 간단한 방법입니다. 어도비의 경우, 디자인 시스템인 스펙트럼에서 “button-cta-background-color”를 사용하는 것처럼 디자인 토큰을 이용하여 adobe.com 웹 페이지에 사용되는 파란색을 설명합니다.
디자인 토큰을 사용하기 위해 워크플로우를 변경하거나 추가 툴을 사용하지 않아도 됩니다. 에셋 패널에서 색상 또는 문자 스타일을 두 번 클릭하고 이름을 입력하기만 하면 XD가 자동으로 처리합니다. “개발 목적으로 공유” 링크를 생성하거나 업데이트하면 이 링크는 이제 모든 토큰을 대표하는 다운로드 가능한 CSS 파일을 포함하게 됩니다. 그러면 개발자는 이 파일을 애플리케이션에 추가하여 스타일의 일관성을 유지하고 항상 최신 상태로 업데이트할 수 있습니다.
디자인 토큰 사용에 대한 자세한 내용은 도움말 설명서를 참조하세요. 디자인 토큰을 사용하여 다른 스타일을 설정해보고 싶다면 우리 팀의 로드맵을 만들어가는 데 도움이 되도록 유저보이스에 원하는 기능 요청을 제출해 주시기 바랍니다.
슬랙과의 긴밀한 통합
슬랙용 크리에이티브 클라우드 앱은 에셋을 공유하고, 알림 메시지를 수신하고 디자인 프로젝트를 최신 상태로 유지하기 위해 가장 널리 사용되는 통합 앱 중 하나입니다. 최신 릴리스의 크리에이티브 클라우드 + 슬랙 통합은 공유 채널을 지원하고, 프로젝트에 대한 다양한 알림 기능과 업데이트를 위해 활동 스트림을 도입하고, 알림 기능을 관리하고 피드백을 제공하기 위한 일련의 새로운 봇 명령을 제공합니다.
슬랙용 크리에이티브 클라우드 앱은 슬랙 앱 디렉토리에서 설치할 수 있습니다.
링크 기능 강화
디자인 작업이 아이디어 단계에서 최종 경험 단계로 접어들면, 다른 작업 시간에, 다른 이해 관계자와 디자인을 공유해야 할 일이 생깁니다. 피드백 및 빠른 반복 프로세스를 위해 내부의 가까운 팀과 초기 아이디어를 처음으로 공유한 다음, 이후 버전을 다양한 그룹의 이해 관계자 또는 클라이언트와 공유하게 됩니다.
이제 필요할 때마다 새로운 링크를 만들지 않고 공유 링크의 액세스 설정을 변경할 수 있습니다. 도움말 설명서에서 공유 링크에 대한 자세한 내용을 살펴보세요.
XD용 차트를 사용하여 복잡한 데이터를 시각적으로 디자인
새로운 XD용 차트 플러그인을 사용하면 몇 번의 클릭만으로 디자인에 복잡한 데이터를 한눈에 파악할 수 있는 차트로 표현할 수 있습니다. 차트는 실제 데이터 또는 임의 데이터를 바탕으로 꺾은선, 영역, 막대 그래프, 산점도 등 편집 가능한 벡터 차트를 생성합니다. XD 플러그인 관리자에서 무료로 XD용 차트를 설치할 수 있습니다.
차트 플러그인을 실행하면 생성할 차트 유형을 선택하고 사용할 데이터 소스를 선택할 수 있습니다. 차트에서는 데이터를 자동으로 생성하거나 구글 시트(Google Sheets), CSV, JSON 또는 REST API 엔드포인트의 실제 데이터를 사용할 수 있습니다.
템플릿을 사용하는 경우 차트 모양을 자유롭게 변경할 수 있습니다. 브랜드 가이드라인 및 나머지 다자인 요소와 일관되도록 색상, 텍스트 스타일, 선 두께 및 기타 스타일을 수정할 수 있습니다. 차트의 개발자인 파벨 컬리긴(Pavel Kuligin)이 제공하는 유용한 가이드에서 일관된 시각화를 위한 템플릿 사용 방법에 대해 자세히 살펴보시기 바랍니다.