기본 용어 정리

1. (프레임)은 피그람의 기본 단위를 의미한다. (  )은 문자, 도형, 이미지등의 요소를 담는 컨테이너로 사용된다.
2. (캐러셀 carousel) 회전목마가 돌아가는 것처럼 여러 콘텐츠가 슬라이드 방식으로 보여주는 UI

---

프로퍼티의 형태

• boolean : 토글
• text : 텍스트 재정의
• instance swap : 인스턴트 교체
• variant : 색상, 크기, 상태 등 속성 정의

I

---

• 프로토타이핑은 완성 전 실제 서비스가 원하는 방식으로 작동되는지 테스트하고 기능을 추가, 변경하는 과정이다.
• 트리거는 특정한 동작을 실행하는 것을 의미 - 액선의 유형을 살펴보자
• 핫스파 : 인터랙션이 일어나는 지점 (버트, 아이콘, 가드에 핫스팟을 만들 수 있다.)
• 커넥션 : 연결 , 파란색 선
• flow : 시나리오에 맞게 장면의 흐름, 사용자의 여정을 생성
• start point : start point of flow
• destination : 목적지, (from A to B -> A is hotspot, B is destination
• action : 진행 형태
• animation : 유형, 속도, 방향 등 설정
• easing : 가속형태
• overlays : 현재 화면위에 나타나는 프레임. 툴팁, 메뉴, 경고창, 확인창 등
• scroll behavior : 스크롤 시 방향과 포지션 설정
• preview : 프로토타입의 interation과 design을 미리 봄.

---

프로토타입 액션 유형

 

피그마(Figma)에서 프로토타입을 만들 때 사용할 수 있는 여러 액션 유형이 있습니다. 이 액션들은 사용자 인터페이스 디자인을 실제와 같은 상호작용을 할 수 있게 도와줍니다. 주요 액션 유형은 다음과 같습니다:

1. 탐색 (Navigate): 사용자가 특정 오브젝트를 클릭하거나 탭했을 때, 다른 프레임이나 페이지로 이동하게 합니다. 이는 링크나 버튼 클릭 시 페이지 전환을 시뮬레이션할 때 사용됩니다.
2. 오버레이 (Overlay): 다이얼로그 박스, 메뉴, 기타 요소들을 오버레이 형태로 나타나게 합니다. 이 액션은 모달 창이나 팝업 메뉴가 필요할 때 유용합니다.
3. 스크롤 (Scroll to): 특정 위치로 자동 스크롤합니다. 이는 긴 페이지에서 특정 섹션으로 직접 이동하고 싶을 때 사용할 수 있습니다.
4. 스왑 (Swap): 컴포넌트나 엘리먼트를 교체합니다. 예를 들어, 버튼을 누르면 아이콘 또는 이미지가 변경되는 상호작용을 만들 때 사용됩니다.
5. 게임 패드/키보드 (Gamepad/Keyboard): 키보드 또는 게임 패드 입력을 사용해 상호작용을 설정할 수 있습니다. 예를 들어, 키보드의 특정 키를 눌러 액션을 활성화하는 경우가 여기에 해당합니다.
6. 스마트 애니메이션 (Smart Animate): 두 프레임 간의 객체를 부드럽게 애니메이션화합니다. 예를 들어, 요소의 위치나 크기가 변화할 때 이를 자연스럽게 보여줄 수 있습니다.
7. 백 (Back): 사용자가 이전 화면으로 돌아갈 수 있도록 합니다. 일종의 '뒤로 가기' 버튼처럼 작동합니다.

---

피그마(Figma)는 디자이너가 인터페이스 및 경험을 시각적으로 표현할 수 있게 다양한 애니메이션 옵션을 제공

 

• 인스턴트 (Instant): 변경 사항이 즉시 발생하며, 애니메이션 없이 프레임이 바로 전환됩니다. 이는 빠른 상호작용을 필요로 할 때 유용합니다.
• 디졸브 (Dissolve): 한 화면에서 다른 화면으로 부드럽게 페이드인, 페이드아웃되는 효과입니다. 이는 일반적으로 정보의 변경이나 업데이트를 표시할 때 사용됩니다.
• 스마트 애니메이션 (Smart Animate): 같은 오브젝트가 다른 프레임에도 존재할 경우, 피그마는 이를 인식하고 부드럽게 위치, 크기, 회전 등을 애니메이션화합니다. 이는 더 자연스럽고 동적인 전환 효과를 만들어냅니다.
• 슬라이드 (Slide in / Slide out): 요소가 슬라이드 형태로 들어오거나 나가면서 화면에 나타나거나 사라지는 애니메이션입니다. 방향은 위, 아래, 좌, 우로 설정할 수 있습니다.
• 푸시 (Push): 새 프레임이 이전 프레임을 밀어내는 형식으로 전환되는 애니메이션입니다. 이는 슬라이드와 유사하지만, 밀려나는 감각이 더욱 강조됩니다.
• 모달 & 팝업 (Modal & Popup): 오버레이 애니메이션으로, 특정 요소가 화면 위에 떠서 나타나는 형태입니다. 일반적으로 모달 창이나 팝업 메뉴에 사용됩니다.

 

Duration : 애니메이션 지속시간. 1/1000초 
100ms = 0.1초