피그마 초보 강좌 4편: 프로토타이핑과 인터랙션 설정하기

이번 강좌에서는 프로토타입(Prototype) 기능을 통해 디자인 화면 간의 전환을 설정하고, **인터랙션(Interaction)**을 추가해 실제 앱처럼 작동하는 인터페이스를 만들어보겠습니다. 피그마의 프로토타입 기능을 통해 사용자의 흐름을 미리 시뮬레이션할 수 있어 UX 테스트나 디자인 리뷰 시 유용합니다.

---

1. 프로토타입 모드 이해하기

피그마에서 프로토타입 모드로 전환하면 각 화면을 연결하고 전환 효과를 설정할 수 있습니다. 상단 Prototype 탭을 선택하여 프로토타입 모드로 전환하면 설정 옵션이 오른쪽 패널에 표시됩니다.

• Trigger(트리거): 사용자가 인터랙션을 시작하는 동작으로, 클릭, 드래그, 호버 등이 있습니다.
• Action(액션): 트리거에 의해 실행되는 동작으로, 예를 들어 다른 화면으로 전환(Navigate To)하거나 오버레이(Overlay)를 여는 등의 액션을 설정할 수 있습니다.
• Animation(애니메이션): 화면 전환 시 적용할 애니메이션 효과로, Dissolve(페이드 인/아웃), Slide In(슬라이드 인) 등을 선택할 수 있습니다.

---

2. 기본 프로토타입 설정하기

1) 화면 간 연결 설정

1. 프로토타입 모드에서 이동할 대상 요소(예: 로그인 버튼)를 선택합니다.
2. 요소에 나타나는 파란 핸들을 드래그하여 연결할 다른 화면으로 끌어다 놓습니다.
3. 오른쪽 패널에서 Trigger를 On Click으로 설정하고, Action을 Navigate To로 선택합니다.
   • 이렇게 하면, 사용자가 해당 버튼을 클릭했을 때 지정된 화면으로 이동하도록 설정됩니다.

2) 애니메이션 효과 추가

1. 연결 설정 후, Animation 옵션에서 애니메이션 효과를 선택합니다.
   • Dissolve: 페이드 인/아웃 효과로 화면이 자연스럽게 전환됩니다.
   • Slide In: 화면이 옆에서 밀려 들어오며 전환되는 효과입니다.
2. 애니메이션 효과의 속도(Duration)도 설정할 수 있습니다. 기본값은 300ms로, 더 길게 하거나 짧게 설정 가능합니다.

---

3. 다양한 인터랙션 설정하기

피그마에서는 클릭 외에도 다양한 사용자 동작을 기반으로 인터랙션을 설정할 수 있습니다.

1) 호버 효과 설정

• **호버 상태(While Hovering)**는 마우스를 올려놓았을 때 실행되는 동작입니다. Variants를 사용해 기본 상태와 호버 상태가 다른 컴포넌트를 설정할 수 있습니다.

1. 호버 상태 버튼과 기본 상태 버튼을 각각 Variants로 설정해 둡니다.
2. 기본 상태 버튼을 선택하고, 프로토타입 연결 핸들을 호버 상태 버튼으로 드래그합니다.
3. Trigger를 While Hovering으로 설정합니다.
   • 이렇게 설정하면 마우스를 올려놓을 때 호버 상태로 변하고, 마우스를 떼면 기본 상태로 돌아옵니다.

2) 드래그 인터랙션 설정

• 드래그 기능을 통해 스와이프 또는 슬라이드 방식의 UI를 구현할 수 있습니다. 예를 들어, 이미지 슬라이더를 만들 수 있습니다.

1. 드래그할 첫 번째 요소를 선택하고, 연결 핸들을 드래그하여 다음 요소로 연결합니다.
2. Trigger를 On Drag로 설정합니다.
   • 이렇게 하면 사용자가 요소를 드래그할 때 다음 화면으로 슬라이드됩니다.

---

4. 오버레이(Overlay) 설정하기

오버레이는 전체 화면 전환이 아닌 특정 화면 위에 추가 화면을 띄울 때 사용됩니다. 팝업, 모달 창, 드롭다운 메뉴 등 다양한 UI에 활용할 수 있습니다.

예제: 설정 메뉴 오버레이 만들기

1. 오버레이로 사용할 화면(예: 설정 메뉴)을 디자인합니다.
2. 프로토타입 모드에서 오버레이를 열 요소(예: 설정 아이콘)를 선택한 후, 핸들을 오버레이 화면으로 연결합니다.
3. 오른쪽 패널의 Action을 Open Overlay로 설정합니다.
4. Overlay Position을 설정하여 오버레이 창이 뜨는 위치(중앙, 왼쪽, 오른쪽 등)와 애니메이션 효과를 선택할 수 있습니다.

오버레이 닫기 설정

1. 오버레이 화면에 닫기 버튼을 추가합니다.
2. 닫기 버튼을 선택한 후, Action을 Close Overlay로 설정합니다.
   • 이렇게 하면 닫기 버튼을 클릭할 때 오버레이가 닫히도록 설정됩니다.

---

5. 프로토타입 미리보기 및 공유

1) 프로토타입 미리보기

• 상단 Present 버튼을 클릭하여 실제 사용자와 같은 시각으로 프로토타입을 미리 볼 수 있습니다. 이 모드에서 각 인터랙션이 잘 작동하는지 확인해봅니다.

2) 공유 및 피드백 받기

• Share 버튼을 클릭해 생성된 링크를 복사하여 팀원과 공유할 수 있습니다.
• 팀원들이 코멘트 기능을 통해 피드백을 남기도록 설정할 수 있으며, 피드백을 통해 디자인을 개선할 수 있습니다.

---

결론

이번 강좌에서는 피그마의 프로토타입 기능과 다양한 인터랙션 설정 방법을 배워보았습니다. 프로토타입과 인터랙션을 통해 디자인이 실제로 작동하는 듯한 느낌을 줄 수 있어, UX를 미리 테스트할 수 있습니다. 다음 강좌에서는 팀 협업 및 피드백 관리 방법을 배워보겠습니다.