[Day42] 사용자 경험(CX)디자인 - 실습(2)

컴포넌트와 인스턴스

• 컴포넌트 : 재사용 가능한 UI 요소

• 인스턴스 : 원본 컴포넌트 복제한 오브젝트

• 컴포넌트가 바뀌면
  • 인스턴스도 함께 바뀜
• 인스턴스가 변경되면
  • 컴포넌트와 다른 인스턴스에 영향 없음
  • 원본 컴포넌트의 속성을 변경해도 이미 수정된 속성은 영향 없음

---

베리언트 (Variants)

유사한 종류의 컴포넌트를 묶어놓은 세트

• 컴포넌트를 만들 때 [Create component set] 선택
• [Properties]에서 메뉴 우측의 +를 눌러 [Variant] 생성

베리언트의 사용

1. 컴포넌트 버튼을 클릭 > Create component set 선택

2. Properties에서 메뉴 우측의 +를 눌러 Variant 생성

3. 속성 지정 & 값 설정

🔹 속성 값 설정된 모습

1. 이후 필요할 마다 Assets패널에서 갖다 쓰기

---

인터랙션

프레임 인터렉션

같은 오브젝트가 다른 프레임에서 색상이나 그림자와 같은 변화로 페이지가 전환되는 인터랙션

베리언트 스위치 인터랙션

버튼 형태에 인터랙션을 적용해야 할 때, 버튼을 제작하는 베리언트 단계에서 인터랙션 지정하여 사용하는 것이 효율적

1️⃣ 스위치 두 개를 베리언트로 만들기 2️⃣ 프로토타입으로 양쪽 모두 연결

버튼 인터랙션

• 버튼 ⇒ 사용자와 서비스가 상호작용할 때 가장 많이 사용하는 컴포넌트 중 하나
• 버튼을 다양한 형태와 색상을 설정하여 사용하면 사용자의 주목과 시선을 유도할 수 있다.

1️⃣ 프로토타입으로 hover, pressed 모두 연결

2️⃣ hover, pressed 속성 변경

3️⃣ 버튼으로 프레임 전환 인터랙션 설정

---

END