질문이 있거나 아이디어를 공유하고 싶다면 Adobe XD 커뮤니티에 참여하십시오. 소중한 의견과 다양한 작품 활동을 기대하겠습니다.
마지막 업데이트 날짜
2022년 11월 28일
- Adobe XD 사용 안내서
- 소개
- 디자인
- 아트보드, 안내선 및 레이어
- 모양, 오브젝트 및 패스
- 텍스트 및 글꼴
- 구성 요소 및 상태
- 마스킹 및 효과
- 레이아웃
- 비디오 및 Lottie 애니메이션
- 프로토타입
- 공유, 내보내기 및 검토
- 디자인 시스템
- 클라우드 문서
- 통합 기능 및 플러그인
- iOS 및 Android용 XD
- 문제 해결
- 알려진 문제 및 해결된 문제
- 설치 및 업데이트
- 실행 및 충돌
- 클라우드 문서 및 Creative Cloud Libraries
- 프로토타이핑, 게시 및 검토
- 다른 앱 가져오기, 내보내기 및 작업
디자인 시스템의 구성 요소에 여러 상태를 추가하여 인터랙티브 콘텐츠를 손쉽게 개발하는 방법에 대해 알아봅니다.
사용자 인터랙션을 기반으로 모양을 변경하는 구성 요소는 고품질 프로토타입을 만드는 데 매우 중요합니다.
구성 요소를 만들고 여러 변형(상태)을 추가한 다음 구성 요소를 여러 번 복사하지 않고도 실제 사용자 비헤이비어를 모방하도록 와이어 연결할 수 있습니다.
상태가 있는 구성 요소를 사용하면 에셋을 보다 쉽게 관리하고 인터랙티브 디자인 시스템을 만들 수 있습니다.
구성 요소 상태 추가
구성 요소를 생성한 후 속성 관리자에는 기본 상태로 구성 요소를 나열하는 새로운 섹션이 있습니다. 이제 구성 요소에 대해 새 상태, 마우스 오버 상태 또는 토글 상태 이상 세 가지 유형의 상태를 추가할 수 있습니다. 상태를 추가하는 방법에 대해 알아보십시오.
새로운 상태
구성 요소의 변화(구성 요소의 비활성화 또는 클릭 버전 등)를 표시하고자 하는 시나리오에 대한 새로운 상태를 사용합니다.
속성 관리자에서 메인 구성 요소의 기본 상태 옆에 있는 + 버튼을 클릭하고 새로운 상태를 선택합니다.
새로운 상태에는 해당 상태에 반영된 인터랙티비티가 없습니다. 프로토타입 모드에서 인터랙션을 연결해야 합니다. 자세한 내용은 구성 요소에 인터랙티브 요소 추가를 참조하십시오.
마우스 오버 상태
사용자가 구성 요소에 마우스를 가져다 댈 때 구성 요소가 바뀌고 다른 상태를 표시하도록 하려면 마우스 오버 상태를 사용합니다.
디자인 모드의 속성 관리자에서 메인 구성 요소의 기본 상태 옆에 있는 + 버튼을 클릭하고 마우스 오버 상태를 선택합니다.
마우스 오버 상태를 사용하면 인터랙션을 연결하기 위해 프로토타입 모드로 이동할 필요가 없습니다. 이는 자동으로 완료됩니다.
토글 상태
토글, 라디오 버튼, checkbox 등과 같은 인터랙티브한 토글 동작이 있는 구성 요소를 만들려면 토글 상태를 사용합니다.
디자인 모드의 속성 관리자에서 메인 구성 요소의 기본 상태 옆에 있는 + 버튼을 클릭하고 토글 상태를 선택합니다.
토글 상태가 생성되면 기본적으로 XD는 기본 상태와 토글 상태 간의 양방향 탭 인터랙션에서 자동으로 베이킹되어 완전히 인터랙티브해집니다.
메인 구성 요소에만 상태를 추가할 수 있습니다. 구성 요소 인스턴스는 항상 메인 구성 요소로부터 상태를 상속받습니다.
다른 상태의 구성 요소 시각화
구성 요소의 상태를 만든 후 구성 요소의 속성을 편집하고 구성 요소와 인터랙션하는 사용자에게 구성 요소가 어떻게 나타나는지 시각화할 수 있습니다.
- 구성 요소를 선택합니다.
- 속성 관리자로 이동하고 다양한 상태를 토글하거나 전환합니다.
구성 요소에 인터랙티비티 추가
프로토타입 모드에서 구성 요소 상태 간 인터랙션을 와이어로 연결하기 위해 탭, 호버, 키 및 게임패드 및 음성 트리거를 사용할 수 있습니다. 구성 요소 상태 간에 인터랙션 와이어 연결은 아트보드 사이의 인터랙션 와이어 연결과 유사합니다. 주요 차이점은 구성 요소 상태 간에 인터랙션을 와이어 연결할 때 아트보드 대신 대상으로 상태를 선택하는 것입니다.
- 프로토타입 탭으로 전환합니다.
- 인터랙션을 만들 구성 요소 상태를 선택합니다.
- 구성 요소 상태에서 > 아이콘 또는 속성 관리자의 인터랙션 섹션에서 +를 클릭하여 인터랙션을 추가합니다.
- 트리거로 탭(클릭 이벤트의 경우), 마우스 가져다 대기(마우스 오버 액션의 경우), 키 및 게임패드(탐색 및 접근성 사용 사례) 또는 음성(탐색 및 접근성 사용 사례)을 선택합니다.
- 작업 유형(예: 자동 애니메이트 또는 전환)을 선택합니다.
- 상태를 대상으로 선택합니다.
- 미리보기 창으로 전환하고 구성 요소의 인터랙션을 테스트합니다.
상태는 구분선으로 구분된 드롭다운에서 아트보드 위에 나열됩니다.
동일한 구성 요소 상태에 대해 여러 인터랙션을 정의할 수 있습니다. 예를 들어 기본 켜기 상태, 끄기 상태 및 호버 상태가 있는 토글 스위치가 있는 경우 기본 상태에서 별도의 인터랙션을 정의할 수 있습니다. 4-7 단계를 반복하여 추가 상태와의 인터랙션을 정의합니다. 여러 인터랙션을 만든 후 정의된 인터랙션을 표시하는 인터랙션 섹션을 볼 수 있습니다. 이들 인터랙션 사이를 전환하고 요구 사항에 맞게 인터랙션 특성을 수정합니다.
구성 요소 상태 편집
메인 구성 요소 상태에서 인터랙션을 정의하면 해당 구성 요소의 모든 인스턴스가 해당 인터랙션을 자동으로 상속합니다. 즉, 구성 요소를 특정 아트보드나 상태에 연결하면 해당 구성 요소의 모든 인스턴스에도 해당 인터랙션이 포함됩니다.
캔버스에서 인스턴스를 선택하고 기존 상태를 편집하거나 메인 구성 요소에 새 상태를 추가하려는 경우 다음 옵션 중 하나를 통해 수행할 수 있습니다.
옵션 2
편집을 클릭하여 선택을 메인 구성 요소로 전환하여 상태를 추가하거나 편집합니다.
옵션 1
구성 요소 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 메인 구성 요소 편집을 선택합니다.
구성 요소 인스턴스는 메인 구성 요소와 연결됩니다. 메인 구성 요소 겹쳐 놓기를 인스턴스로 변경합니다. 자세한 내용은 단일 소스가 있는 구성 요소 관리를 참조하십시오.
구성 요소 상태 이름 바꾸기, 순서 바꾸기 및 삭제
구성 요소 상태 이름 바꾸기: 속성 관리자에서 구성 요소 상태 이름을 더블 클릭하고 새 이름을 입력합니다.
메인 구성 요소 상태 순서 바꾸기: 속성 관리자에서 메인 구성 요소의 상태를 드래그하여 순서를 변경합니다.
메인 구성 요소에서 구성 요소 상태 삭제: 구성 요소 상태를 마우스 오른쪽 버튼으로 클릭하고 삭제를 선택합니다. 메인 구성 요소에서 구성 요소 상태를 삭제하면 캔버스에서 해당 상태가 활성인 구성 요소 인스턴스가 기본 상태로 다시 전환됩니다.
메인 구성 요소의 이름만 변경하고 상태를 삭제할 수 있습니다. 기본 상태 이름을 바꿀 수 없습니다.
구성 요소 상태 게시 및 공유
구성 요소 및 관련 상태를 라이브러리 패널에서 Creative Cloud 라이브러리에 게시하고 디자인 시스템에 포함하여 배포할 수 있습니다. 자세한 내용은 XD에서 Creative Cloud Libraries를 사용하여 작업을 참조하십시오.
단일 소스가 있는 구성 요소 관리
구성 요소 상태 관리를 간소화하기 위한 목적으로, 메인 구성 요소에서는 상태를 추가, 이름 변경 및 삭제만 할 수 있습니다. 해당 구성 요소의 인스턴스는 메인 구성 요소의 상태 변경 사항을 자동으로 상속합니다. 캔버스의 녹색으로 채워진 다이아몬드 또는 속성 관리자의 구성 요소 섹션에서 메인 구성 요소를 쉽게 식별할 수 있습니다. 인스턴스에는 빈 녹색 다이아몬드가 있습니다.
구성 요소 상태의 상속
메인 구성 요소 및 인스턴스에서 상태를 편집하는 동안 다음 원칙을 따르십시오.
- 구성 요소 인스턴스를 재정의하는 것처럼 상태에 대한 속성(텍스트, 비트맵, 크기, 모양 또는 구조 변경)을 재정의할 수 있습니다.
- 메인 구성 요소에서 상태를 편집하면 해당 상태가 모든 인스턴스에서 업데이트됩니다.
- 인스턴스에서 상태를 편집하면 해당 인스턴스는 고유한 재정의로 취급되며 더 이상 해당 속성을 메인 상태의 변경 사항과 동기화하지 않습니다.
오버라이드 결과가 만족스럽지 않은 경우에는 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 메인 상태로 재설정을 선택하여 원본 메인 구성 요소로 다시 설정하십시오. 이렇게 하면 인스턴스에서 모든 오버라이드가 지워지고 다시 메인 구성 요소로 재설정됩니다.
구성 요소 오버라이드 작동 방식에 대한 자세한 내용은 XD에서 구성 요소 작업을 참조하십시오.
문서 전체에 걸쳐 구성 요소 상태 연결
상태 및 정의된 인터랙션과 함께 재사용 가능한 모든 구성 요소에 대한 단일 소스를 만들고 유지할 수 있습니다. 예를 들어 1차, 2차, 호버, 탭 및 비활성화 상태의 5가지 상태가 정의된 버튼 구성 요소가 있는 경우 해당 구성 요소를 여러 문서에 복사하여 붙여넣을 때 XD는 모든 정의된 구성 요소 상태를 상태 인터랙션과 함께 유지하는 연결된 구성 요소를 생성합니다.
소스 문서에서 연결된 구성 요소 속성(스타일, 인터랙션 등)을 변경하면 XD는 해당 업데이트가 있는 연결된 구성 요소의 인스턴스가 있는 문서에 알립니다. 여기에서 변경 내용을 미리 살펴보고 이를 수락하거나 무시할 수 있습니다.
연결된 구성 요소는 아트보드가 아닌 상태간에 정의된 인터랙션만 지원합니다.
예제 및 샘플 파일
사용자가 탭하여 켜고 끌 수 있는 토글 스위치를 만들고자 하십니까?
- 토글 버튼 샘플 파일을 다운로드하고 XD에서 엽니다.
- 전체 오브젝트(원이 선택되어 있는지 확인)를 선택하고 Cmd + K(macOS) 또는 Ctrl + K(Win)를 누릅니다.
- 새로운 상태를 추가하고 이름을 비활성화(Disabled)로 지정합니다.
- 비활성화됨 상태에서 둥근 사각형을 선택하고 채우기를 회색으로 변경합니다. 원을 선택하고 왼쪽으로 이동합니다.
- 프로토타입 모드에서 다음 인터랙션을 연결합니다.
- 기본 상태: 트리거를 탭으로, 액션을 자동 애니메이트로 설정하고 대상을 비활성화로 설정합니다.
- 비활성화 상태: 트리거를 탭으로, 액션을 자동 애니메이트로 설정하고 대상을 기본 상태로 설정합니다.
- (선택 사항): 버튼 토글이 마우스 오버 시 빛나게 하려면 구성 요소를 선택하고 마우스 오버 상태를 추가한 다음 구성 요소를 편집하여 광선 효과를 적용합니다.
자세히 알아보기
이 비디오를 통해 상태가 있는 구성 요소를 사용하여 대화형 기능을 구축하는 방법에 대해 자세히 알아보십시오.
시청 시간: 7분
다음 단계
지금까지 상태가 있는 구성 요소의 사용 방법에 대해 알아보았습니다. 이 커뮤니티 게시물을 통해 확인란을 만드는 방법을 살펴보십시오.
질문이나 아이디어가 있습니까?
