사용 안내서 취소

구성 요소에 여러 상태 추가

  1. Adobe XD 사용 안내서
  2. 소개
    1. Adobe XD의 새로운 기능
    2. 일반 질문
    3. Adobe XD를 사용하여 디자인, 프로토타이핑 및 공유
    4. 시스템 요구 사항
      1. 하드웨어 및 소프트웨어 요구 사항
      2. Adobe XD, Big Sur 및 Apple silicon | macOS 11
    5. 작업 영역 기본 사항
    6. Adobe XD에서 앱 언어 변경
    7. Access UI 디자인 키트
    8. Adobe XD의 접근성
    9. 키보드 단축키
    10. 팁 및 요령
    11. Adobe XD 구독 옵션
    12. XD 스타터 플랜 변경 사항
  3. 디자인
    1. 아트보드, 안내선 및 레이어
      1. 아트보드 시작하기
      2. 안내선 및 그리드 사용
      3. 스크롤 가능 아트보드 제작
      4. 레이어를 사용하여 작업
      5. 스크롤 그룹 만들기
    2. 모양, 오브젝트 및 패스
      1. 오브젝트 선택, 크기 조정 및 회전
      2. 오브젝트 이동, 정렬, 배치 및 배열
      3. 오브젝트 그룹화, 잠금, 복제, 복사 및 뒤집기
      4. 오브젝트에 대한 선, 채우기 및 그림자 설정
      5. 반복 요소 만들기
      6. 3D 변형으로 원근감 있는 디자인 만들기
      7. 부울 작업을 통해 오브젝트 편집
    3. 텍스트 및 글꼴
      1. 드로잉 및 텍스트 툴을 사용하여 작업
      2. Adobe XD의 글꼴
    4. 구성 요소 및 상태
      1. 구성 요소를 사용하여 작업
      2. 중첩된 구성 요소를 사용하여 작업
      3. 구성 요소에 여러 상태 추가
    5. 마스킹 및 효과
      1. 모양이 적용된 마스크 만들기
      2. 흐림 효과를 사용하여 작업
      3. 그레이디언트 만들기 및 수정
      4. 혼합 효과 적용
    6. 레이아웃
      1. 반응형 크기 조정 및 제한
      2. 구성 요소 및 그룹에 대해 고정된 패딩 설정
      3. 스택을 사용하여 다이내믹한 디자인 제작
    7. 비디오 및 Lottie 애니메이션
      1. 비디오를 사용하여 작업
      2. 비디오를 사용하여 프로토타입 제작
      3. Lottie 애니메이션을 사용하여 작업
  4. 프로토타입
    1. 인터랙티브 프로토타입 제작
    2. 프로토타입 애니메이트
    3. 자동 애니메이트에 대해 지원되는 오브젝트 속성
    4. 키보드 및 게임패드가 포함된 프로토타입 만들기
    5. 음성 명령 및 음성 재생을 사용하여 프로토타입 제작
    6. 시간 경과 전환 만들기
    7. 오버레이 추가
    8. 음성 프로토타입 디자인
    9. 앵커 링크 만들기
    10. 하이퍼링크 만들기
    11. 디자인 및 프로토타입 미리보기
  5. 공유, 내보내기 및 검토
    1. 선택한 아트보드 공유
    2. 디자인 및 프로토타입 공유
    3. 링크 액세스 권한 설정
    4. 프로토타입을 사용하여 작업
    5. 프로토타입 검토
    6. 디자인 사양 작업
    7. 디자인 사양 공유
    8. 디자인 사양 검사
    9. 디자인 사양 탐색
    10. 디자인 사양 검토 및 댓글 달기
    11. 디자인 에셋 내보내기
    12. 디자인 사양에서 에셋 내보내기 및 다운로드
    13. 기업을 위한 그룹 공유
  6. 디자인 시스템
    1. Creative Cloud Library 포함 디자인 시스템
    2. Adobe XD에서 문서 에셋을 사용하여 작업
    3. Adobe XD에서 Creative Cloud Libraries를 사용하여 작업
    4. 연결된 에셋에서 Creative Cloud Libraries로 마이그레이션
    5. 디자인 토큰을 사용하여 작업 
    6. Creative Cloud Libraries의 에셋 사용
  7. 클라우드 문서
    1. Adobe XD의 클라우드 문서
    2. 디자인 공동 작업 및 편집
    3. 나와 공유된 문서 공동 편집
  8. 통합 기능 및 플러그인
    1. 외부 에셋을 사용하여 작업
    2. Photoshop의 디자인 에셋을 사용한 작업
    3. Photoshop에서 에셋 복사 및 붙여넣기
    4. Photoshop 디자인 가져오기 또는 열기
    5. Adobe XD에서 Illustrator 에셋을 사용하여 작업
    6. Illustrator 디자인 열기 또는 가져오기
    7. Illustrator에서 XD로 벡터 복사
    8. Adobe XD용 플러그인
    9. 플러그인 생성 및 관리
    10. XD에 대한 Jira 통합
    11. XD용 Slack 플러그인
    12. XD용 Zoom 플러그인
    13. XD에서 Behance로 디자인 게시
  9. iOS 및 Android용 XD
    1. 모바일 디바이스에서 미리보기
    2. Adobe XD 모바일 FAQ
  10. 문제 해결
    1. 알려진 문제 및 해결된 문제
      1. 알려진 문제
      2. 해결된 문제
    2. 설치 및 업데이트
      1. Windows에서 XD가 호환되지 않음
      2. 오류 코드 191
      3. 오류 코드 183
      4. XD 플러그인 설치 문제
      5.  Windows 10에서 XD를 제거했다가 다시 설치하라는 메시지가 표시됨
      6. 환경 설정 마이그레이션 문제
    3. 실행 및 충돌
      1.  Windows 10에서 실행 시 XD 충돌 문제
      2.  Creative Cloud에서 로그아웃하면 XD가 종료됨
      3. Windows에서의 구독 상태 관련 문제
      4. Windows에서 XD 실행 시 차단된 앱 경고 표시
      5. Windows에서 크래시 덤프 생성
      6. 충돌 로그 수집 및 공유
    4. 클라우드 문서 및 Creative Cloud Libraries
      1. XD 클라우드 문서 관련 문제
      2. 연결된 구성 요소 관련 문제
      3. 라이브러리 및 링크 관련 문제
    5. 프로토타이핑, 게시 및 검토
      1. macOS Catalina에서 프로토타입 인터랙션을 기록할 수 없음
      2. 게시 작업 과정 관련 문제
      3. 게시된 링크가 브라우저에 표시되지 않음
      4. 프로토타입이 브라우저에서 올바르게 렌더링되지 않음
      5. 공유 링크에 댓글 패널이 갑자기 표시됨
      6. 라이브러리를 게시할 수 없음
    6. 다른 앱 가져오기, 내보내기 및 작업
      1. XD에서 가져오기 및 내보내기
      2. XD의 Photoshop 파일
      3. XD의 Illustrator 파일
      4. XD에서 After Effects로 내보내기
      5. XD의 Sketch 파일
      6. 내보내기에 서드파티 앱이 표시되지 않음

디자인 시스템의 구성 요소에 여러 상태를 추가하여 인터랙티브 콘텐츠를 손쉽게 개발하는 방법에 대해 알아봅니다.

사용자 인터랙션을 기반으로 모양을 변경하는 구성 요소는 고품질 프로토타입을 만드는 데 매우 중요합니다.

구성 요소를 만들고 여러 변형(상태)을 추가한 다음 구성 요소를 여러 번 복사하지 않고도 실제 사용자 비헤이비어를 모방하도록 와이어 연결할 수 있습니다. 

상태가 있는 구성 요소를 사용하면 에셋을 보다 쉽게 관리하고 인터랙티브 디자인 시스템을 만들 수 있습니다. 

상태가 있는 구성 요소의 일반적인 예로는 버튼, 확인란 및 애니메이션 전환 버튼이 있습니다. 이러한 구성 요소는 사용자가 해당 구성 요소를 탭하거나 마우스로 가리켜서 인터랙션할 때 변경되어야 합니다.

구성 요소 상태 추가

구성 요소를 생성한 후 속성 관리자에는 기본 상태로 구성 요소를 나열하는 새로운 섹션이 있습니다. 이제 구성 요소에 대해 새 상태마우스 오버 상태 또는 토글 상태 이상 세 가지 유형의 상태를 추가할 수 있습니다. 상태를 추가하는 방법에 대해 알아보십시오.

새로운 상태

구성 요소의 변화(구성 요소의 비활성화 또는 클릭 버전 등)를 표시하고자 하는 시나리오에 대한 새로운 상태를 사용합니다.

속성 관리자에서 메인 구성 요소의 기본 상태 옆에 있는 + 버튼을 클릭하고 새로운 상태를 선택합니다.

새로운 상태에는 해당 상태에 반영된 인터랙티비티가 없습니다. 프로토타입 모드에서 인터랙션을 연결해야 합니다. 자세한 내용은 구성 요소에 인터랙티브 요소 추가를 참조하십시오.

마우스 오버 상태

사용자가 구성 요소에 마우스를 가져다 댈 때 구성 요소가 바뀌고 다른 상태를 표시하도록 하려면 마우스 오버 상태를 사용합니다. 

디자인 모드의 속성 관리자에서 메인 구성 요소의 기본 상태 옆에 있는 + 버튼을 클릭하고 마우스 오버 상태를 선택합니다.

마우스 오버 상태를 사용하면 인터랙션을 연결하기 위해 프로토타입 모드로 이동할 필요가 없습니다. 이는 자동으로 완료됩니다.

토글 상태

토글, 라디오 버튼, checkbox 등과 같은 인터랙티브한 토글 동작이 있는 구성 요소를 만들려면 토글 상태를 사용합니다. 

디자인 모드의 속성 관리자에서 메인 구성 요소의 기본 상태 옆에 있는 + 버튼을 클릭하고 토글 상태를 선택합니다.

토글 상태가 생성되면 기본적으로 XD는 기본 상태토글 상태 간의 양방향 탭 인터랙션에서 자동으로 베이킹되어 완전히 인터랙티브해집니다.

구성 요소에 상태 추가
구성 요소에 상태 추가

 메인 구성 요소에만 상태를 추가할 수 있습니다. 구성 요소 인스턴스는 항상 메인 구성 요소로부터 상태를 상속받습니다.

다른 상태의 구성 요소 시각화

구성 요소의 상태를 만든 후 구성 요소의 속성을 편집하고 구성 요소와 인터랙션하는 사용자에게 구성 요소가 어떻게 나타나는지 시각화할 수 있습니다. 

  1. 구성 요소를 선택합니다.
  2. 속성 관리자로 이동하고 다양한 상태를 토글하거나 전환합니다.
속성 관리자를 사용하여 상태 전환
속성 관리자를 사용하여 상태 전환

구성 요소에 인터랙티비티 추가

프로토타입 모드에서 구성 요소 상태 간 인터랙션을 와이어로 연결하기 위해 , 호버키 및 게임패드음성 트리거를 사용할 수 있습니다. 구성 요소 상태 간에 인터랙션 와이어 연결은 아트보드 사이의 인터랙션 와이어 연결과 유사합니다. 주요 차이점은 구성 요소 상태 간에 인터랙션을 와이어 연결할 때 아트보드 대신 대상으로 상태를 선택하는 것입니다.

인터랙티브한 요소 추가
구성 요소 상태를 연결하여 탭 인터랙션 생성

  1. 프로토타입 탭으로 전환합니다.
  2. 인터랙션을 만들 구성 요소 상태를 선택합니다. 
  3. 구성 요소 상태에서 > 아이콘 또는 속성 관리자의 인터랙션 섹션에서 +를 클릭하여 인터랙션을 추가합니다.
  4. 트리거로 (클릭 이벤트의 경우), 마우스 가져다 대기(마우스 오버 액션의 경우), 키 및 게임패드(탐색 및 접근성 사용 사례) 또는 음성(탐색 및 접근성 사용 사례)을 선택합니다.
  5. 작업 유형(예: 자동 애니메이트 또는 전환)을 선택합니다.
  6. 상태를 대상으로 선택합니다.
  7. 미리보기 창으로 전환하고 구성 요소의 인터랙션을 테스트합니다.

 상태는 구분선으로 구분된 드롭다운에서 아트보드 위에 나열됩니다.

 

구성 요소 상태에 대한 여러 인터랙션
구성 요소 상태에 대한 여러 인터랙션

동일한 구성 요소 상태에 대해 여러 인터랙션을 정의할 수 있습니다. 예를 들어 기본 켜기 상태, 끄기 상태 및 호버 상태가 있는 토글 스위치가 있는 경우 기본 상태에서 별도의 인터랙션을 정의할 수 있습니다. 4-7 단계를 반복하여 추가 상태와의 인터랙션을 정의합니다. 여러 인터랙션을 만든 후 정의된 인터랙션을 표시하는 인터랙션 섹션을 볼 수 있습니다. 이들 인터랙션 사이를 전환하고 요구 사항에 맞게 인터랙션 특성을 수정합니다.

구성 요소 상태 편집

메인 구성 요소 상태에서 인터랙션을 정의하면 해당 구성 요소의 모든 인스턴스가 해당 인터랙션을 자동으로 상속합니다. 즉, 구성 요소를 특정 아트보드나 상태에 연결하면 해당 구성 요소의 모든 인스턴스에도 해당 인터랙션이 포함됩니다. 

캔버스에서 인스턴스를 선택하고 기존 상태를 편집하거나 메인 구성 요소에 새 상태를 추가하려는 경우 다음 옵션 중 하나를 통해 수행할 수 있습니다.

옵션 2

편집을 클릭하여 선택을 메인 구성 요소로 전환하여 상태를 추가하거나 편집합니다.

편집을 클릭하여 선택을 마스터 구성 요소로 전환하여 상태를 추가하거나 편집합니다.

옵션 1

구성 요소 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 메인 구성 요소 편집을 선택합니다.

구성 요소 인스턴스는 메인 구성 요소와 연결됩니다. 메인 구성 요소 겹쳐 놓기를 인스턴스로 변경합니다. 자세한 내용은 단일 소스가 있는 구성 요소 관리를 참조하십시오.

구성 요소 상태 이름 바꾸기, 순서 바꾸기 및 삭제

구성 요소 상태 이름 바꾸기: 속성 관리자에서 구성 요소 상태 이름을 더블 클릭하고 새 이름을 입력합니다.

메인 구성 요소 상태 순서 바꾸기: 속성 관리자에서 메인 구성 요소의 상태를 드래그하여 순서를 변경합니다.

메인 구성 요소에서 구성 요소 상태 삭제: 구성 요소 상태를 마우스 오른쪽 버튼으로 클릭하고 삭제를 선택합니다. 메인 구성 요소에서 구성 요소 상태를 삭제하면 캔버스에서 해당 상태가 활성인 구성 요소 인스턴스가 기본 상태로 다시 전환됩니다.

 메인 구성 요소의 이름만 변경하고 상태를 삭제할 수 있습니다. 기본 상태 이름을 바꿀 수 없습니다.

구성 요소 상태 게시 및 공유

구성 요소 및 관련 상태를 라이브러리 패널에서 Creative Cloud 라이브러리에 게시하고 디자인 시스템에 포함하여 배포할 수 있습니다. 자세한 내용은 XD에서 Creative Cloud Libraries를 사용하여 작업을 참조하십시오.

단일 소스가 있는 구성 요소 관리

구성 요소 상태 관리를 간소화하기 위한 목적으로, 메인 구성 요소에서는 상태를 추가, 이름 변경 및 삭제만 할 수 있습니다. 해당 구성 요소의 인스턴스는 메인 구성 요소의 상태 변경 사항을 자동으로 상속합니다. 캔버스의 녹색으로 채워진 다이아몬드 또는 속성 관리자의 구성 요소 섹션에서 메인 구성 요소를 쉽게 식별할 수 있습니다. 인스턴스에는 빈 녹색 다이아몬드가 있습니다. 

구성 요소 상태의 상속

메인 구성 요소 및 인스턴스에서 상태를 편집하는 동안 다음 원칙을 따르십시오.

  • 구성 요소 인스턴스를 재정의하는 것처럼 상태에 대한 속성(텍스트, 비트맵, 크기, 모양 또는 구조 변경)을 재정의할 수 있습니다. 
  • 메인 구성 요소에서 상태를 편집하면 해당 상태가 모든 인스턴스에서 업데이트됩니다.
  • 인스턴스에서 상태를 편집하면 해당 인스턴스는 고유한 재정의로 취급되며 더 이상 해당 속성을 메인 상태의 변경 사항과 동기화하지 않습니다.

오버라이드 결과가 만족스럽지 않은 경우에는 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 메인 상태로 재설정을 선택하여 원본 메인 구성 요소로 다시 설정하십시오. 이렇게 하면 인스턴스에서 모든 오버라이드가 지워지고 다시 메인 구성 요소로 재설정됩니다.

상태 오버라이드를 원래 메인 구성 요소로 재설정
상태 오버라이드를 원래 메인 구성 요소로 재설정

구성 요소 오버라이드 작동 방식에 대한 자세한 내용은 XD에서 구성 요소 작업을 참조하십시오.

문서 전체에 걸쳐 구성 요소 상태 연결

상태 및 정의된 인터랙션과 함께 재사용 가능한 모든 구성 요소에 대한 단일 소스를 만들고 유지할 수 있습니다. 예를 들어 1차, 2차, 호버, 탭 및 비활성화 상태의 5가지 상태가 정의된 버튼 구성 요소가 있는 경우 해당 구성 요소를 여러 문서에 복사하여 붙여넣을 때 XD는 모든 정의된 구성 요소 상태를 상태 인터랙션과 함께 유지하는 연결된 구성 요소를 생성합니다. 

소스 문서에서 연결된 구성 요소 속성(스타일, 인터랙션 등)을 변경하면 XD는 해당 업데이트가 있는 연결된 구성 요소의 인스턴스가 있는 문서에 알립니다. 여기에서 변경 내용을 미리 살펴보고 이를 수락하거나 무시할 수 있습니다. 

연결된 구성 요소는 아트보드가 아닌 상태간에 정의된 인터랙션만 지원합니다.

예제 및 샘플 파일

사용자가 탭하여 켜고 끌 수 있는 토글 스위치를 만들고자 하십니까? 

샘플 에셋을 사용하여 애니메이션 토글 버튼 만들기
샘플 에셋을 사용하여 애니메이션 토글 버튼 만들기

  1. 토글 버튼 샘플 파일을 다운로드하고 XD에서 엽니다.
  2. 전체 오브젝트(원이 선택되어 있는지 확인)를 선택하고 Cmd + K(macOS) 또는 Ctrl + K(Win)를 누릅니다.
  3. 새로운 상태를 추가하고 이름을 비활성화(Disabled)로 지정합니다.
  4. 비활성화됨 상태에서 둥근 사각형을 선택하고 채우기를 회색으로 변경합니다. 원을 선택하고 왼쪽으로 이동합니다.
  5. 프로토타입 모드에서 다음 인터랙션을 연결합니다.
    • 기본 상태: 트리거으로, 액션자동 애니메이트로 설정하고 대상비활성화로 설정합니다.
    • 비활성화 상태: 트리거를 으로, 액션을 자동 애니메이트로 설정하고 대상을 기본 상태로 설정합니다.
  6. (선택 사항): 버튼 토글이 마우스 오버 시 빛나게 하려면 구성 요소를 선택하고 마우스 오버 상태를 추가한 다음 구성 요소를 편집하여 광선 효과를 적용합니다.

자세히 알아보기

이 비디오를 통해 상태가 있는 구성 요소를 사용하여 대화형 기능을 구축하는 방법에 대해 자세히 알아보십시오. 

시청 시간: 7분

다음 단계

지금까지 상태가 있는 구성 요소의 사용 방법에 대해 알아보았습니다. 이 커뮤니티 게시물을 통해 확인란을 만드는 방법을 살펴보십시오. 

질문이나 아이디어가 있습니까?

커뮤니티에 질문

질문이 있거나 아이디어를 공유하고 싶다면 Adobe XD 커뮤니티에 참여하십시오. 소중한 의견과 다양한 작품 활동을 기대하겠습니다.

Adobe 로고

내 계정 로그인