피그마 기초 완전 정복 - 프로토타이핑 (화면 연결 및 동작 구현 2편)

1. 오늘 학습 키워드

- 화면 디자인 연결하기

- 트리거와 액션

- 애니메이션

- 애니메이트

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

 

<트리거와 액션>

플로우 (Flow)

- 프로토타입에서 사용자가 이동하는 화면 흐름을 의미

연결선 하나가 하나의 플로우임

 

- 핫스팟을 종착점 화면으로 드래그하면 커넥션이 생성됨

 

 

플로우 구성

- 트리거, 애니메이션, 액션으로 구성

 

1. 트리거 (Trigger)

- 액션을 시작하는 조건이나 계기

- 사용자의 행동 또는 특정 상황이 발생했을 때 실행됨

- 이벤트(Event)라고도 부름

 

2. 액션 (Action)

- 트리거로 인해 만들어지는 결과

 

3. 애니메이션 (Animation)

- 트리거로 실행된 액션이 어떤 방식으로 동작할지 정하는 요소

- 화면 전환이나 요소 변화의 움직임을 정의함

- 인터랙션 형태를 결정함

 

 

프로토 타입 설계 방식

- 프로토타입은 '~하면, ~하게 ~한다' 형태로 이해할 수 있음

- 트리거 → 애니메이션 → 액션 순으로 구성됨

 

- 예시

ex 1)
버튼을 누르면(트리거), 색상이 천천히(애니메이션) 바뀜(액션)

ex 2)
카드를 클릭하면(트리거), 화면이 슬라이드되며(애니메이션) 상세 화면으로 이동함(액션)

 

 

 

트리거의 종류

- 프로토타입의 플로우를 실행하는 조건

- 어떤 이벤트(사건)가 발생하면 실행할 건지를 설정함

- 피그마 프로토타입 트리거는 현재 10가지가 존재함

피그마 프로토타입 트리거 10가지

트리거	설명	트리거	설명
On Click	클릭/터치 시 실행	On Drag	드래그 시 실행
While Hovering	호버 중 실행	While Pressing	누르는 동안 실행
Mouse Enter	영역 진입 시 실행	Mouse Leave	영역 이탈 시 실행
Mouse Down	누르는 순간 실행	Mouse Up	떼는 순간 실행
Key / Gamepad	키 입력 시 실행	After Delay	일정 시간 후 실행

 

 

 

액션의 종류

- 프로토타입 플로우의 목적지

- 트리거로 인해 만들어지는 결과

- 어떤 이벤트가 발생했을 때 실행될 동작을 설정함

- 피그마 프로토타입 액션은 현재 11가지가 존재함

 

피그마 프로토타입 액션 11가지

액션	설명	액션	설명
Navigate to	다른 화면으로 이동	Change to	다른 배리언트로 변경
Back	이전 화면으로 이동	Set Variable	변수를 특정 값으로 설정
Set Variable Mode	변수를 특정 모드로 설정	Conditional	조건에 따라 분기 실행
Scroll to	특정 위치로 스크롤 이동	Open Link	URL 또는 특정 위치 열기
Open Overlay	오버레이 표시	Swap Overlay	오버레이 유지 후 교체
Close Overlay	오버레이 닫기	-	-

 

 

 

프로토타입 만들기

1. 화면 연결하기

 

 

2. 특정 영역 연결하기

 

 

3. 프로토타입 테스트하기

 

 

 

<애니메이션>

- 액션을 어떻게 실행할지를 결정함

- 화면의 전환을 어떻게 처리할 건지도 정함

 

- 예시
버튼을 누르면, 다음 화면으로 넘어감
→ 버튼을 누르면, 천천히 오른쪽에서 왼쪽으로 화면이 밀려 들어옴

 

피그마 애니메이션 종류

애니메이션	설명
Instant	애니메이션 없이 즉시 전환함
Dissolve	화면이 천천히 흐려지며 전환됨 (페이드 인/아웃)
Smart Animate	이름이 같은 요소를 자연스럽게 연결하여 움직임
Move In / Out	화면이 덮이거나 벗겨지듯 전환됨
Push	현재 화면을 밀어내며 다음 화면이 등장함
Slide In / Out	현재 화면이 밀려 사라지며 다음 화면이 등장함

 

 

 

<스마트 애니메이트 (Smart Animate)>

- 이름이 같은 요소의 변화를 자연스럽게 연결해주는 애니메이션 기능

- 피그마 프로토타입에서 가장 많이 사용되는 애니메이션 기능

- 다양한 UI 동작 구현에 활용 가능함

 

스마트 애니메이트 사용 조건

- 움직일 요소의 이름이 동일해야 함

- 두 프레임의 레이어 구조가 동일해야 함

→ 두 조건 중 하나라도 맞지 않으면 정상 동작하지 않을 수 있음

 

스마트 애니메이트로 변경 가능한 속성

• 크기(Scale)
  - 요소를 확대하거나 축소함
  

  

• 위치(Position)
  - 요소를 자연스럽게 이동시킴
  

  

• 투명도(Opacity)
  - 요소를 자연스럽게 나타나거나 사라지게 함
  

  

• 회전(Rotation)
  - 요소를 자연스럽게 회전시킴
  

  

• 배경색(Fill)
  - 배경색을 자연스럽게 변경함
  

  

 

 

 

스마트 애니메이트 활용하기

1. 자연스럽게 상세페이지 이동하기

- 모바일 기기 - On tap = 노트북, 데스크탑 - On click

 

 

2. 메뉴 이동 애니메이션 만들기

 

3. 리스트 삭제하기

---

3. 학습하며 겪었던 문제점 & 에러

1)

 학습 과정 도중 스마트 애니메이트 외에 실무에서 자주 사용하는 애니메이션이 무엇인지 궁금했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 스마트 애니메이트가 가장 많이 사용되지만 화면 전환 시에는 Dissolve가 많이 활용되며, 모바일 앱의 페이지 이동에서는 Push와 Slide In/Out도 자주 사용된다는 점을 알게 되었다.

2)

 학습 과정 도중 프리뷰가 의도한 대로 작동하지 않을 때 원인을 찾는 방법이 궁금했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 시작 화면 설정 여부, 핫스팟 연결 상태, 트리거·액션 설정, 연결 대상 프레임 존재 여부를 순서대로 확인하면 대부분의 문제를 해결할 수 있다는 점을 이해했다.

3)

 학습 과정 도중 스마트 애니메이트를 사용할 때 어떤 상황에서 활용하면 효과적인지 궁금했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 상세 페이지 진입 애니메이션, 탭 인디케이터 이동, 리스트 추가 또는 삭제, 카드 확장 등 요소의 상태 변화가 있는 화면에서 자연스러운 전환 효과를 만들 때 특히 유용하다는 점을 이해했다.