생산적인 XD 프로토타이핑 – Adobe XD 구성 요소 자습서

Adobe XD의 구성 요소 시스템은 디자이너가 디지털 제품을 프로토타이핑할 수 있는 강력한 기능을 제공합니다. 그러나 단점이 없는 것은 아니며 특별한 주의가 필요합니다. 스마트 단축키를 활용하고 모범 사례를 따르면 디자이너는 XD 프로토타이핑 워크플로를 간소화할 수 있습니다.

2017년 말 공식 공개 출시 이후 Adobe XD는 UX 디자이너를 위한 경쟁력 있는 와이어프레임 및 프로토타이핑 도구가 되기 위해 큰 진전을 이루었습니다. 특히 새로운 구성 요소 시스템은 설계자가 실험할 수 있는 상호 작용 유형을 확장합니다. 그러나 구성 요소에 단점과 단점이 없는 것은 아닙니다. XD 구성 요소로 작업할 때는 바쁜 작업을 피하고 시스템의 잠재력을 최대한 활용하기 위해 일련의 워크플로 방식을 채택하는 것이 좋습니다.

Adobe XD 구성 요소란 무엇입니까?

XD 구성 요소는 텍스트, 모양 또는 선과 같은 요소의 재사용 가능한 그룹화입니다. 구성 요소에는 부모 역할을 하는 "주 구성 요소"와 아트보드에 배치되는 "인스턴스" 또는 자식이 있습니다. 기본 구성 요소를 변경하면 변경 사항이 모든 인스턴스에 전파됩니다.

유사한 용도로 사용되었던 XD의 이전 "심볼" 시스템을 대체하는 구성 요소는 주요 차별화 요소 입니다. XD의 프로토타입 모드에 정의된 다양한 입력에 응답하는 여러 상태 를 가질 수 있습니다. 예를 들어 버튼은 기본 상태를 가질 수 있지만 호버 또는 클릭된 상태에 있을 때 모양이 변경됩니다. 클릭 시 소리를 재생하거나 음성 인식 입력에 따라 모양을 변경할 수도 있습니다.

구성 요소 시스템은 시간을 절약해 주지만 특별한 주의가 필요합니다. 시스템의 성능을 활용하려면 사려 깊은 접근 방식과 신중하게 준비된 워크플로가 필요합니다.

Adobe XD에 대해 잘 알고 있는 것이 좋습니다.

Adobe XD에 대해 어느 정도 익숙한 디자이너는 다음 팁과 제안을 통해 가장 큰 이점을 얻을 수 있습니다. 시작하려면 Google의 Material Design 홈페이지에서 Adobe XD Design Kit를 다운로드하십시오. 키트는 실험 및 분해할 Adobe XD 구성 요소 세트를 제공합니다.

팁 #1 – 구성 요소를 생성하기 전에 모든 상태를 고려하십시오

상태가 있는 구성 요소를 처음 생성할 때 설계자는 구성 요소에 대한 잠재적 변경이 다른 인스턴스에 어떤 영향을 미칠 수 있는지 이해해야 합니다. 설명을 위해 여러 상태가 있는 드롭다운 메뉴를 살펴보겠습니다.

• 기본 상태 : 메뉴가 접혀 있음
• 호버 상태 : 커서가 위에 있을 때 윤곽선 색상이 변경될 수 있음
• 확장된 클릭 상태 : 드롭다운 메뉴 옵션이 표시됩니다.

드롭다운의 자식 인스턴스의 기본 상태 를 편집할 때 이러한 변경 사항은 호버 또는 클릭 상태로 전파되지 않습니다 . 모든 인스턴스의 마우스 오버 또는 클릭 상태를 업데이트하려면 기본 구성 요소의 기본 상태를 변경해야 합니다.

Main Components 에 뛰어들어 반복을 시작하고 싶은 마음이 들 수 있지만, 때때로 상위 컴포넌트와 하위 컴포넌트가 작동하는 방식의 차이로 인해 예상치 못한 문제가 발생합니다.

좋은 방법은 다른 상태를 추가하거나 구성 요소를 인스턴스화 하기 전에 기본 구성 요소의 기본 상태에 필요한 모든 것을 고려하고 예상하는 것입니다. 심지어 다른 상태를 나란히 배치하는 경우도 있습니다.

디자이너는 기본 상태에 영향을 주지 않고 기본 구성 요소 또는 자식 인스턴스의 기본이 아닌 상태에서 요소를 추가하고 변경할 수 있지만 그 반대는 사실이 아님을 명심해야 합니다.

Adobe 권장 사항 : 디자이너가 기본이 아닌 상태를 그대로 유지하고 기본 구성 요소의 기본 상태에 대한 변경 사항이 전파되는 것을 방지할 수 있도록 구성 요소 상태에 잠금 기능을 제공합니다.

팁 #2 – 생성 시 구성 요소 이름 지정

구성 요소를 만들면(요소를 마우스 오른쪽 버튼으로 클릭한 다음 메뉴에서 "구성 요소 만들기"를 선택하거나 Mac에서 Cmd-K/PC에서 Ctrl-K 누름) 구성 요소를 왼쪽 사이드바의 자산 패널에 추가합니다. XD는 구성 요소에 "구성 요소 XX"의 기본 이름을 지정합니다(여기서 "XX"는 숫자). 매우 설명적이지 않으므로 고유하고 검색 가능한 이름을 지정하는 것이 가장 좋습니다.

왜 합니까? 구성 요소 목록이 채워지면 구성 요소가 모두 동일한 기본 이름과 의미 없는 숫자로 시작하는 경우 다루기 어려워집니다. "타일 보기" 옵션이 도움이 되지만 텍스트 레이블이 없으므로 시각적 식별이 느리고 어렵습니다. 작은 썸네일이 있는 "목록 보기"도 해독할 수 없는 이름을 가진 구성 요소 간의 차이점을 식별하기 어렵게 만듭니다. 구성 요소는 손실될 수 있으며 손실됩니다. 이름을 지정하여 검색 가능하게 하면 나중에 시간을 절약할 수 있습니다.

Adobe에 대한 권장 사항 : 구성 요소를 만들 때 구성 요소를 자동으로 선택하고 사용자가 Assets->Components 패널에 초점을 맞춰 이름을 바꾸거나 이름 지정 팝업을 불러옵니다. 환경 설정에서 이 기능을 토글할 수 있도록 하는 것도 도움이 될 것입니다.

팁 #3 – 주요 구성 요소를 체계적으로 유지

구성 요소를 만들 때 실수로 메인 구성 요소를 대지에 배치하기 쉽습니다. XD는 기본 구성 요소를 찾는 도구를 제공하지만(에셋 패널을 검색하거나 마우스 오른쪽 버튼을 클릭하고 하위 인스턴스에서 "기본 구성 요소 편집"을 선택) 기본 구성 요소가 인스턴스라고 생각하면서 의도하지 않은 변경을 하기가 너무 쉽습니다. 이렇게 하면 여러 아트보드에서 원하지 않는 변경이 많이 발생할 수 있습니다.

아트보드에 구성 요소 인스턴스가 소수뿐인 경우에도 아트보드가 복제되면 문제가 빠르게 해결될 수 있습니다. 주 구성 요소에 대한 부주의한 변경으로 인해 피할 수 있었던 정리 시간이 추가될 수 있습니다.

메인 컴포넌트를 생성하는 즉시 디자인 아트보드에서 멀리 옮기는 습관을 들이는 것이 가장 좋습니다 . 이를 수행하는 이상적인 방법은 XD 파일의 대지 또는 명확하게 레이블이 지정된 전용 대지에 주요 구성 요소를 배치하는 것입니다. 그렇게 하면 나중에 일을 더 효율적으로 할 수 있습니다.

Adobe에 대한 권장 사항: 기본 구성 요소를 변경할 때 프롬프트를 고려하여 디자이너가 변경 사항이 자식 인스턴스에 전파될 수 있다는 경고를 받습니다.

팁 #4 - 레이어 패널로 정리 유지

아트보드에서 아이디어를 시도하고 구성 요소 그룹화/그룹 해제 및 구성 요소 상태 속성 변경의 흐름을 이해하는 것은 쉽습니다. 더 많은 작업 공간을 확보하기 위해 왼쪽 사이드바를 최소화하려는 강한 유혹이 있을 수 있습니다. 그러나 구성 요소 상태 및 전환이 반복되는 무리에서 예상대로 작동하지 않을 가능성이 높습니다. 이는 하위 요소(예: 모양, 벡터 또는 텍스트)의 구성 및 그룹화가 전환이 올바르게 작동하는 데 필요한 것에서 멀어졌기 때문에 발생할 수 있습니다.

레이어 보기는 계층 구조 및 요소 이름 지정에 대한 100% 투명성을 제공하며 완벽한 구성이 중요합니다. 상태 간에 XD의 강력한 Auto-Animate 전환을 사용하려면 구성 요소의 레이어 계층에서 요소의 이름과 위치가 동일해야 합니다 . 그렇지 않으면 전환이 매력적인 자동 애니메이션 대신 페이드로 기본 설정됩니다.

때때로 자동 애니메이션 전환 시 보간에서 속성을 억제하는 것이 바람직할 수 있습니다. 이를 위해 디자이너는 다른 구성 요소 상태 또는 아트보드의 요소 이름을 변경하여 이름 기반 링크를 끊을 수 있습니다.

두 경우 모두 레이어 보기를 사용하여 예기치 않은 문제가 발생할 때 문제를 해결할 수 있습니다 . 구성 요소 상태 간 전환이든 아트보드 간 전환이든 프로토타이핑 문제를 디버깅할 때 첫 번째 단계여야 합니다.

팁 #5 - 알파 페이딩을 사용하여 색상 보간

Auto-Animate는 XD에 대한 훌륭한 추가 기능이지만 제한 사항과 특이 사항이 있습니다. 자동 애니메이트를 사용하여 두 구성 요소 상태 또는 아트보드 간에 요소의 색상을 변경할 때 이러한 단점 중 하나가 분명해집니다. 두 색상 사이의 부드러운 보간 대신 테스트 시 갑자기 변경됩니다.

현재 해결 방법은 약간 어색하며 주 구성 요소 상태를 구성하는 방법에 대한 결과가 있습니다. 여기에는 하나가 아닌 다른 색상의 두 개체를 추가한 다음 두 상태 모두에서 두 개체의 알파를 크로스페이드하여 부드러운 전환을 달성하는 작업이 포함됩니다. 기본 페이드 전환이 작동할 수 있지만 자동 애니메이트로 모양과 크기를 보간하는 경우 페이드가 충분하지 않을 수 있습니다.

팁 #6 - 반복 그리드의 구성 요소 활용

반복 그리드는 유사한 요소의 배열을 쉽게 구성하고 유지 관리할 수 있게 해주는 XD의 또 다른 탁월한 시간 절약 기능입니다 . 구성 요소와 마찬가지로 반복 그리드에는 그리드의 왼쪽 상단 모서리에 있는 첫 번째 요소가 "하위" 요소의 속성을 정의하는 "상위" 요소인 계층적 관계가 있습니다. (예외가 있습니다. 비트맵은 텍스트 문자열과 마찬가지로 자식 요소에 대해 고유할 수 있지만 텍스트 속성은 그렇지 않습니다.)

그러나 반복 그리드 내에서 구성 요소를 사용하면 상황이 바뀝니다.

반복 그리드로 정상적으로 작업할 때 상위 항목에 대한 변경 사항은 즉시 하위 항목에 전파됩니다. 그러나 기본 구성 요소 변경 사항은 로컬 속성 재정의가 없는 경우에만 반복 그리드의 자식으로 전파됩니다 . 즉, 그리드에서 구성 요소의 속성을 변경하면 기본 구성 요소에서 전파되는 변경 사항에서 구성 요소가 "잠깁니다".

반복 격자의 구성 요소이기도 한 상위 항목에서 변경 사항을 전파하려면 격자 크기를 상위 항목까지만 아래로 조정합니다. 그러면 자식이 제거됩니다. 그런 다음 핸들을 원하는 치수로 다시 끌어 자식을 업데이트합니다.

디자이너가 구성 요소 및 반복 그리드의 특성을 해결할 수 있게 되면 이를 결합하는 것이 강력할 수 있습니다.

팁 #7 – 시간 기반 구성 요소 상태 전환이 존재하지 않는다고 가정합니다(현재).

시간 기반 지연(입력 기반 아님)을 사용하여 아트보드 간에 전환을 적용할 때 구성 요소 상태 간에 동일한 것을 사용할 수 있다고 가정하는 것은 당연합니다. 불행히도 이것은 사실이 아닙니다. 모든 구성 요소 기반 상태 변경은 시간이 아니라 프로토타입 모드에서 사용자 입력 또는 상호 작용을 기반으로 해야 합니다.

Adobe 권장 사항: 구성 요소에 시간 기반 전환 옵션을 추가하여 해당 상태가 사용자 입력과 독립적으로 애니메이션될 수 있도록 합니다.

팁 #8 – 주요 구성 요소 계층을 복제할 때 철저해야 합니다.

이 마지막 팁은 XD 디자이너가 자주 접하지 않을 수 있지만 알고 있어야 하는 경우에 더 가깝습니다.

Main Component가 속성을 상속하는 자식의 "일대다" 품질을 여전히 유지하지만 기존 자식 구성 요소에는 영향을 주지 않는 변형이 필요한 시나리오를 가정해 봅시다. 새 상위 구성 요소 계층을 생성하려면 인스턴스화된 구성 요소를 그룹 해제하고 처음부터 다시 작성해야 합니다. 구성 요소를 그룹 해제하면 프로토타입 모드에서 설정된 모든 상태 및 전환 속성도 손실됩니다. 해결 방법은 다음과 같습니다.

• 구성 요소의 각 상태에 대한 구성 요소의 인스턴스를 복제합니다.
• 각 인스턴스의 상태를 다른 상태로 설정합니다.
• 각 구성 요소 인스턴스를 살펴보고 그룹을 해제합니다.
• 각 구성요소 인스턴스를 원하는 대로 조정하고 변경하기 시작합니다.
• 새 주 구성 요소를 다시 만듭니다.
• 프로토타입 모드로 이동하여 이전에 설정한 상호 작용 및 전환 유형을 다시 만듭니다.

Adobe 권장 사항: 자산 패널에서 기본 구성 요소를 마우스 오른쪽 버튼으로 클릭할 때 "복제" 메뉴 옵션을 제공하십시오.

Adobe XD 구성 요소를 사용한 프로토타이핑: 성공을 위한 정보

Adobe XD는 지난 몇 년 동안 기능과 유틸리티를 크게 개선했습니다. Sketch 및 기타 기존 프로토타이핑 도구에 대한 가치 있고 경쟁력 있는 대안으로 성장했습니다. 도구가 출시된 이후로 어떻게 발전해 왔는지에 따라 더 많은 개선 사항이 있을 것입니다.

특히 Adobe XD 구성 요소 시스템은 디자이너가 만들 수 있는 상호 작용 유형을 개선하고 확장할 수 있는 뛰어난 잠재력을 가지고 있습니다.

다음은 염두에 두어야 할 몇 가지 핵심 사항입니다.

• 주요 구성 요소와 하위 인스턴스 간에 변경 사항이 전파되는 방식을 이해합니다.
• 구성 요소가 자동 애니메이션 및 반복 격자와 같은 Adobe XD의 다른 기능과 상호 작용하는 방식에 유의하십시오.
• 구성 요소의 이름을 지정하고 XD 파일에서 별도의 기본 구성 요소 대지 영역을 유지 관리하는 것과 같이 일관된 워크플로 방식을 채택하여 시간을 절약하십시오.

엄격한 워크플로를 유지하면서 Adobe XD 구성 요소 작업의 특성을 염두에 두면 디자인 생산성이 극대화됩니다. 불필요한 정리 및 유지 관리를 방지하고 XD 디자이너가 디지털 제품을 프로토타이핑할 때 효율성을 높일 수 있습니다.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 어도비 XD 대 스케치 – 쇼다운 2020
• 정밀한 디자인 – Adobe XD 검토
• 다중 모드 디자인 탐색 – Adobe XD 자습서
• UX 신화 – 프로토타이핑, 사용자 테스트 및 UX 결과물
• 완벽한 UX 디자인 프로세스 – 프로토타입 디자인 가이드