[Figma] 피그마 활용_프로토타입

#1 Goals

 ▼ 학습 목표

• 프로토타입의 개념과 용도를 이해
• 피그마 프로토타입 기능의 구성
• 피그마 프로토타입 기능을 활용해 기본적인 인터랙션과 프로토타입 제작

 

#2 Learning Content

 1. 프로토타입의 개념

  ❑ 프로토타입의 뜻

• 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해 볼 수 있는 것을 뜻함
• 프로토타입을 만들거나 사용해 테스트하는 것을 프로토타이핑이라고 함

  ❑ 프로토타입을 만드는 이유

• 실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있다
• 팀 구성원들과 시각적인 결과물로 소통할 수 있다.
• 부족하거나 놓친 부분을 확인할 수 있다.

 

 2. 피그마 프로토타입

  ❑ 장점

• 직관적이다
• 빠르게 만들 수 있다

 

  ❑ 단점

• 실제 제품처럼 동작하는 걸 만들기 어렵다
• 효율성을 떨어트린다

 

  ❑ 피그마 프로토타입의 구성

• 핫스팟(Hot Spot) : 프로토타입을 시작하는 지점
• 커넥션(Connection) : 화면을 서로 이어주는 연결선
• 종착점(Destination) : 도착하는 지점

 

  ❑ 트리거와 액션

• 프로토타입의 흐름 하나하나는 플로우라고 부름
• 플로우는 트리거, 애니메이션, 액션으로 구성
  • 트리거(Trigger) : 액션을 시작하는 조건이나 계기. 이벤트라고도 부름
  • 액션(Action) : 트리거로 인해 만들어지는 결과
  • 애니메이션(Animation) : 트리거를 통해 액션을 실행할 때 어떻게 할건지를 표현
• 애니메이션의 종류
  • 스마트 애니메이트
    -> 이름이 같은 요소가 있다면, 화면을 이동할 때 그 요소의 변화를 자연스럽게 만들어 주는 기능
    -> 다양한 UI 인터랙션을 구현할 수 있다.

 

 3. 프로토타입 응용

  ❑ 스크롤 컨테이너

• 프레임보다 큰 컨테이너를 프로토타이핑에서 스크롤을 진행할 때 많이 쓰는 기본적인 프로토타입 기능
  • No scrolling : 스크롤하지 않는다. (기본값)
  • Horizontal : 가로 방향으로 스크롤.
  • Vertical : 세로 방향으로 스크롤.
  • Both directions : 가로 및 세로 방향으로 모두 스크롤.

  ❑ 포지션

• 스크롤하게 될 때 각 요소들이 따라 움직이는 설정값을 정할 수 있는 기능
  • 스태틱(Static) : 대부분의 요소들이 가지고 있는 포지션. 스크롤 따라 같이 움직인다.(기본값)
  • 픽스트(Fixed) : 화면이 바뀌거나 스크롤하더라도 항상 고정된 위치
  • 앱솔루트(Absolute) : Fixed와 유사하지만, 고정되는 기준이 컨테이너 안이라는 점이 다름
  • 스티키(Sticky) : 스크롤에 따라 기본값과 Fixed를 전환하는 포지션
    -> 스크롤을 따라 움직이다가 특정 위치부터는 상단에 고정되는 것을 뜻함