[내일배움캠프] 강의미션

👩‍💻 해당글은 내일배움 사전캠프 작성글 입니다.

 

피그마 프로토타입

화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 (ex. 클릭, 드레그, 스크롤..) 스타일로 이동할 것인지 목업으로 보여주는 것

 

[피그마 프로토타입]

(* 실습예제 시안)

1. 프로토타입을 시작하기 위해서는 피그마 상단 우측의 메뉴창에서 ‘Prototype’을 선택한다.

(* 실습예제 시안)

2. 상단 예시의 원리로 프로토타입을 실행한다.

1️⃣ 핫스팟 (Hot Spot) : 파란색 기준이 되는 점, 인터랙션이 시작하는 위치
2️⃣ 커넥션(connection) 라인 : 핫스팟과 이어지는 두개의 요소 사이의 연결 선. 이 선을 클릭하면 프로토타입의 세부적 설정 가능.
3️⃣ 데스티네이션(Destination) : 핫스팟에서 커넥션으로 연결한 도착점이 되는 요소를 의미

 

 

트리거

Trigger → 어느 특정한 동작에 반응해 자동으로 필요한 동작을 실행하는 것을 뜻한다. (* 이벤트라고 생각하면 쉽다.)

 

[✅ 트리거의 종류]

On click - 요소를 클릭했을 때
On drag - 요소를 가로, 세로 방향으로 드래그 했을 때

while hovering : 요소에 마우스를 올리고 있는 동안.. ⇒ mouseenter와 mouseleave를 번갈아 실행
while Pressing : 요소에 마우스를 꾹누르고 있는 동안.. ⇒ mouse down과 mouse up을 번갈아 실행

Mouse enter : 마우스가 영역에 들어가는 순간의 액션처리
Mouse leave : 마우스가 영역을 벗어나는 순간의 액션처리
Mouse down : 마우스를 누르는 순간의 액션처리
Mouse up : 마우스에서 손을 때는 순간의 액션처리

After delay : 일정 시간이 지난 뒤 화면이 넘어감

 

실습 Tip

강의에서 나오지 않았지만 사용 후 알게 된 팁을 정리하고자 한다.

Preview 바로 확인

프로토타입을 실행할 경우 ‘Flow 19’ 옆의 아이콘을 클릭하면 ‘Preview’를 바로 확인할 수 있다.

Flow 순서 변경

‘Flow 19’버튼을 클릭한 상태에서 드레그해 원하는 시안에 붙이면 프로토타입을 실행할때 첫 번쨰로 노출이 된다.