프로토타이핑

프로토타이핑이란 무엇인가?

프로토타이핑 도구에서 프로토타이핑은 디자이너가 제품이 구축되기 전에 제품의 동작을 시뮬레이션하는 방법을 정의합니다. 화면 간 탐색, 버튼과의 상호 작용 또는 사용자 인터페이스의 여러 상태 간 전환 등이 이에 해당합니다. 프로토타입을 통해 디자이너는 사용자가 제품과 어떻게 상호 작용할지 테스트하고 개선할 수 있으며, 디자인 프로세스 초기에 사용자 흐름과 인터랙션을 시각화하는 방법을 제공합니다.

Figma와 같은 많은 도구는 기본적인 프레임 간 전환을 허용합니다. 그러나 이는 시각적 프로토타입에 그칩니다. 여러 인터랙션을 동시에 실행하거나 기능적인 코드로 내보낼 수 없습니다.

Phase는 한 단계 더 나아갑니다. 자동 키프레임을 통해 Phase는 디자이너가 코딩 없이 인터랙티브 프로토타입을 만들고 이를 프로덕션 준비가 된 코드로 내보낼 수 있게 합니다. 이는 디자인과 개발 간의 격차를 해소합니다.

Phase는 디자이너에게 간단한 호버 효과부터 다음을 포함한 고급 로직까지 완벽한 제어 기능을 제공합니다.

의사 결정 기반 인터랙션: 사용자 선택에 따라 다른 화면을 표시합니다.
조건부 인터랙션: 규칙에 따라 액션을 트리거합니다 (예: 장바구니 총액 > $50).
반복 인터랙션: 잘못된 답변에 대해 반복하여 학습을 강화합니다.

Phase는 시각적 디자인과 로직을 결합하여 최종 제품처럼 작동하는 인터랙티브 프로토타입을 구축하는 데 도움을 줍니다.

중요 용어

액션 (Action): 액션은 사용자가 하는 일(예: 호버 또는 클릭)과 그 이후에 일어나는 일(예: 애니메이션)입니다. 이는 트리거 (Trigger)를 반응 (Response)에 연결하여 인터랙션 블록을 만듭니다.
- 트리거 (Trigger) (사용자 입력): 트리거는 인터랙션을 시작하는 것입니다. 이는 이벤트 (Event)(클릭 또는 호버 등)와 셀렉터 (Selector)(버튼과 같이 상호 작용하는 항목)의 두 부분으로 구성됩니다.
  - 이벤트 (Event): 클릭, 호버 또는 로드와 같은 트리거 유형입니다.
  - 셀렉터 (Selector): 버튼이나 이미지와 같이 상호 작용하는 요소 (Element)입니다.
- 반응 (Response) (결과): 반응은 셀렉터 (Selector)와 상호 작용 후 캔버스 (Canvas)에서 시각적으로 발생하는 변화로, 요소의 페이드 인, 크기 조정 또는 이동 등이 있습니다.

액션 (인터랙션) 생성 방법

Phase에서 인터랙션을 만드는 것은 쉽습니다! 디자인에 인터랙션을 추가하려면 다음의 간단한 단계를 따르십시오.

Figma에서 Phase로 디자인 가져오기: "Phase로 가져오기" 플러그인을 사용하여 Figma 디자인을 가져옵니다. Phase는 컴포넌트와 해당 인터랙션을 액션으로 자동 구성합니다. 또는 Phase에서 직접 디자인할 수도 있습니다.
액션 추가: 상호 작용하려는 요소를 선택하고 하단 편집기에서 '새 액션' 버튼을 클릭합니다. 그러면 액션바 (Action Bar)가 활성화됩니다. "새 액션" 버튼을 클릭하면 액션 모드 (Action Mode)로 들어갑니다.
트리거 설정 열기: 액션 (Action)을 추가하면 트리거패널 (Triggers Settings Panel)이 나타납니다. 여기서 트리거 (Trigger)와 반응 (Response)을 정의합니다.
- 트리거 (Trigger): 이벤트 (Event)(예: 호버, 클릭)와 셀렉터 (Selector)(대상 요소)로 구성됩니다.
- 반응 (Response): 이벤트에 의해 트리거되는 시각적 변화(예: 강아지 이미지를 150%로 크기 조정).
예시:
- 트리거 (Trigger): 강아지 이미지 위에 호버합니다.
- 이벤트 (Event): 호버
- 셀렉터 (Selector): 강아지
- 반응 (Response): 강아지가 150%로 확대됩니다.
반응 (Response) 설정: 트리거 (Trigger)가 설정되면 캔버스에서 직접 요소를 조정하거나 보다 정확한 편집을 위해 속성 (Property) 패널을 사용하여 반응 (Response)을 만들 수 있습니다. [애니메이션에 대해 자세히 알아보기]
액션 나가기: 액션을 나가려면 액션바 (Action Bar) 오른쪽에 있는 "x" 버튼을 클릭합니다.
프로토타입 모드 (Prototype Mode): 인터랙션이 실제로 작동하는 것을 보려면 오른쪽 상단의 재생 버튼을 클릭하여 프로토타입 모드 (Prototype Mode)로 들어갑니다.
액션 찾기: 특정 액션을 찾으려면 액션이 있는 요소 바로 옆에 있는 액션표시기 (Action Indicator)를 클릭하여 액션목록대화창 (Action List Dialog)을 열거나 전체 액션 목록 (Full Action List)을 클릭합니다.
내보내기: 액션 (Action)을 내보내려면 공유하려는 액션을 선택합니다. GIF, MP4, JSON, DotLottie와 같은 형식의 애니메이션으로 내보내집니다. [내보내기에 대해 자세히 알아보기] 액션은 액션범위 (Action Scope)에 따라 내보내진다는 점에 유의하십시오.
협업: 다른 사람을 초대하여 프로토타입을 검토하도록 합니다.
- 제한된 링크: 다른 사람이 멀티 커서 보기로 사용자와 함께 파일을 편집할 수 있도록 합니다.
- 리믹스 링크: 다른 사람이 원본을 편집하지 않고 사용자의 파일을 자신의 대시보드로 복사할 수 있도록 합니다.
- 프로토타입 링크: 편집 액세스 없이 최종 프로토타입만 공유합니다.

액션범위 (Action Scope)

액션범위 (Action Scope)는 액션 (Action) 내에서 트리거 (Trigger)와 반응 (Response)이 적용되는 위치(즉, 액션이 활성화되고 보이는 위치)를 정의합니다. 모든 액션을 화면에서 직접 만드는 대신, 액션은 특정 요소로 범위가 지정됩니다. 이 접근 방식은 복잡한 디자인 관리를 더 쉽고 체계적으로 만듭니다.

예를 들어, 트리거 (Trigger)와 반응 (Response)이 모두 요소 1에 적용되면 액션범위 (Action Scope)는 요소 1로 설정됩니다.

동일한 수준에 두 개의 요소가 있고, 셀렉터 (Selector)가 요소 1에 있고 반응 (Response)이 요소 2에 있는 경우, 액션범위 (Action Scope)는 자동으로 가장 낮은 공통 부모(이 경우 컨테이너 1)로 확장됩니다. 이는 부모(컨테이너 1)만이 두 자식(요소 1과 요소 2)을 모두 제어할 수 있기 때문입니다. 이 예에서 액션범위 (Action Scope)는 해당 범위 내에서 트리거 (Trigger)와 반응 (Response)이 모두 활성화된 영역을 나타냅니다.

액션 (Action)을 내보낼 때, 액션범위 (Action Scope)에 따라 애니메이션으로 내보내집니다. 예를 들어, 액션범위 (Action Scope)가 요소 1과 요소 2를 포함하는 컨테이너 1로 설정된 경우, 액션은 컨테이너 1만 애니메이션된 요소로 내보내집니다. 범위를 벗어난 요소는 컨테이너 1과 함께 내보내지는 애니메이션에 포함되지 않습니다.

기타 용어

액션바 (Action Bar): 디자인 모드 또는 액션 모드 (Action Mode)일 때 다양한 모드와 액션을 빠르게 제어할 수 있는 캔버스 (Canvas) 하단의 플로팅 UI입니다.
트리거패널 (Triggers Settings Panel): 콘텐츠 패널 하단에 나타나는 패널로, 사용자가 선택한 액션 (Action)에 대한 트리거 (Trigger) 및 반응 (Response)을 관리할 수 있습니다.
전체 액션 목록 (Full Action List): 파일의 모든 요소와 해당 계층 구조, 그리고 각 요소에 생성된 액션 (Action)을 표시하는 목록입니다.
액션표시기 (Action Indicator): 요소 옆의 번개 아이콘은 해당 요소에 어떤 액션 (Action)이 생성되었는지 나타냅니다. 액션표시기 (Action Indicator)를 클릭하여 액션목록대화창 (Action List Dialog)을 확장할 수 있습니다.
액션목록대화창 (Action List Dialog): 액션 목록은 요소에 대해 생성된 액션 (Action)을 보고, 선택하고, 관리할 수 있는 플로팅 패널입니다. 액션 (Action)을 새로운 범위 (Scopes)로 이동할 수도 있습니다.
- 액션범위 (Action Scope): 액션범위 (Action Scope)는 액션 (Action)이 사용되고 보이는 위치를 정의합니다. 요소를 이동하면 Phase는 범위에 따라 액션 (Action)의 위치를 자동으로 업데이트하여 프로토타입을 체계적으로 유지하는 데 도움이 됩니다. [액션범위 (Action Scope)에 대해 자세히 알아보기]
지속시간 (Duration): 애니메이션의 시작부터 끝까지의 총 시간(마지막 키프레임 (Keyframe) 시간에서 종료).

자주 묻는 질문 (FAQ)

하나의 요소에 몇 개의 트리거 (Triggers)를 추가할 수 있습니까?
- 필요에 따라 하나의 요소에 원하는 만큼의 트리거 (Triggers)를 추가할 수 있습니다.
조건부 인터랙션 (Conditional Interactions)을 만들 수 있습니까?
- 예, 이 기능은 현재 개발 중이며 곧 제공될 예정입니다.
내 인터랙션이 모바일에서 잘 작동하는지 확인하려면 어떻게 해야 합니까?
- 모바일에서 프로토타입을 미리 볼 수 있습니다. 모바일 인터랙션의 경우, 더 나은 반응성을 위해 누르기 또는 탭 트리거 (Triggers)를 사용하십시오.

프로토타이핑