08-Practice-3.md

8. 실습 3: 컴포넌트 상태와 인터랙션 추가하기

Note

이 실습에서는 Figma의 컴포넌트 기능을 활용하여 버튼의 여러 상태(Default, Hover, Pressed)를 만들고, 프로토타입에서 인터랙션을 추가하는 방법을 배웁니다.

8.1. 컴포넌트 세트(Component Set) 만들기

1. 기본 버튼 디자인: Default 상태의 버튼을 만듭니다.
2. 컴포넌트 생성: 버튼을 선택하고 상단의 Create Component 아이콘(◆)을 클릭합니다.
3. 상태 추가 (Variants):
   • 컴포넌트를 선택한 상태에서 오른쪽 패널의 Properties → + → **Variant**를 클릭합니다.
   • 새로운 Variant를 추가하고, 이름을 Hover로 변경합니다.
   • Hover 상태의 버튼 디자인을 수정합니다 (예: 색상 변경).
   • 같은 방식으로 Pressed 상태를 추가하고 디자인을 수정합니다.

8.2. 프로토타입 인터랙션 설정

1. Prototype 탭으로 전환합니다.
2. Default 상태의 버튼을 선택하고, 오른쪽 핸들을 드래그하여 Hover 상태의 버튼에 연결합니다.
3. Interaction details를 다음과 같이 설정합니다:
   • Trigger: While Hovering (마우스를 올리고 있는 동안)
   • Action: Change to (Hover 상태로 변경)
4. Default 상태의 버튼을 다시 선택하고, 이번에는 Pressed 상태의 버튼에 연결합니다.
5. Interaction details를 다음과 같이 설정합니다:
   • Trigger: While Pressing (클릭하고 있는 동안)
   • Action: Change to (Pressed 상태로 변경)

8.3. 에셋(Assets)에서 컴포넌트 사용하기

1. 왼쪽 패널의 Assets 탭으로 이동합니다.
2. 방금 만든 버튼 컴포넌트를 디자인 프레임으로 드래그하여 가져옵니다.

8.4. 프로토타입 실행 및 확인

1. Present 모드(▶️)로 프로토타입을 실행합니다.
2. 버튼에 마우스를 올렸을 때 Hover 상태로 바뀌는지 확인합니다.
3. 버튼을 클릭하고 있을 때 Pressed 상태로 바뀌는지 확인합니다.

✅ 요약

기능	설명
Component Set	하나의 컴포넌트에 여러 상태(Variant)를 만들어 관리
While Hovering	마우스를 올렸을 때의 인터랙션 설정
While Pressing	클릭하는 동안의 인터랙션 설정
Assets	만들어진 컴포넌트를 재사용하기 위해 가져오는 패널

Tip

이 기능을 활용하면 버튼뿐만 아니라 토글 스위치, 체크박스, 드롭다운 메뉴 등 다양한 인터랙티브 UI 요소를 효율적으로 만들 수 있습니다.