Figma는 빠른 프로토타이핑을 위한 훌륭한 도구입니다. 디자인을 클라이언트에게 보여주거나, 사용자와 가장 중요한 플로우를 테스트하거나, 개발자에게 마이크로인터랙션을 인계하고 싶을 때 유용합니다. 하지만 현재 Figma에서는 변수를 사용하거나 Presentation 보기에서 작동할 키프레임 애니메이션을 만드는 것이 불가능합니다.
이럴 때 ProtoPie가 나섭니다. 이를 통해 Figma 디자인을 조건부 상호작용, 멀티터치 제스처, 카메라, 디바이스 센서 접근, 미디어 재생, 음성 제어 등 훨씬 더 많은 기능을 갖춘 고충실도 프로토타입으로 바꿀 수 있습니다. 오늘은 ProtoPie에서 입력을 사용하는 방법을 보여드리겠습니다.
Figma에서 시작하기
1. 디자인 만들기
먼저, 작업할 디자인이 필요합니다. 사용자가 계정에 새 프로필을 추가할 수 있는 입력이 포함된 화면을 디자인한다고 해봅시다. 조금 더 멋지게 보이도록 간단한 일러스트레이션도 추가하고, 이것도 애니메이션할 예정입니다. 나중에 모든 것을 깔끔하게 유지하고 작업을 더 쉽게 하려면 모든 레이어 이름을 올바르게 지정하는 것을 잊지 마세요.
Figma의 레이어 이름 지정.
2. ProtoPie로 내보내기
Figma에서 디자인을 내보내야 합니다. 먼저 ProtoPie 플러그인을 설치하세요.
플러그인이 준비되고 ProtoPie 앱이 백그라운드에서 실행 중이면, 작업할 프레임을 선택한 뒤 내보내기 버튼을 눌러 ProtoPie로 바로 보낼 수 있습니다. 최상위 프레임은 Figma에서 설정한 것과 정확히 같은 레이어 계층, 이름, 위치를 가진 장면으로 가져와집니다.
Figma에서 ProtoPie로 디자인 내보내기.
ProtoPie에서 계속하기
3. 인터랙티브 입력 레이어 추가하기
이제 재미있는 부분이 시작됩니다! ProtoPie 창으로 전환하면 인터페이스가 Figma와 꽤 비슷하다는 것을 알 수 있습니다. 왼쪽 패널에는 모든 레이어가 있고, 상단 툴바에서는 프로토타입에 다양한 유형의 오브젝트를 추가할 수 있으며, 오른쪽 패널에는 속성, 타임라인, 상호작용이 포함되어 있습니다. 미리보기 버튼의 위치도 비슷해서, UI 디자인 소프트웨어를 조금이라도 다뤄본 사람이라면 이 앱 안을 탐색하는 것이 아주 쉽습니다.
먼저 자리표시자를 인터랙티브 입력 레이어로 바꿉니다. 상단 왼쪽 툴바의 Text 아래에 있습니다. 그런 다음 오른쪽의 Property 패널에서 속성을 조정합니다. 자리표시자 텍스트를 숨기고, 모서리를 둥글게 하고, 배경 채움과 테두리를 바꾸고, 마지막으로 글꼴과 텍스트 색상을 디자인에 맞게 조정할 수 있습니다.
ProtoPie에서 인터랙티브 입력 추가하기.
4. 트리거와 응답을 추가해 상호작용 만들기
상호작용을 만들려면 객체, 트리거, 응답의 세 가지 구성 요소가 필요합니다. 우리의 객체는 입력입니다. 트리거는 하나 이상의 응답이 실행되도록 합니다. 응답은 활성화된 객체의 수정입니다.
우리는 포커스 트리거를 사용할 것입니다. 입력 레이어가 포커스되면 기본적으로 깜박이는 커서와 스마트폰 기본 키보드가 표시됩니다. 또한 입력 주위에 초록색 테두리를 추가하고 싶습니다. 포커스 아웃 트리거는 그 반대 역할을 합니다.
트리거를 추가하려면 인터랙티브 입력 레이어를 선택하고 Interaction 패널로 이동한 다음, “Add Trigger” 버튼을 클릭해 모든 옵션을 펼친 후 “Focus”를 선택합니다. 그런 다음 Focus 트리거 아래에서 플러스 기호를 클릭해 응답을 만듭니다. “Border”를 선택하고 너비를 2px로 변경합니다.
입력이 더 이상 활성화되지 않을 때 어떤 일이 일어나는지 정의하려면 또 다른 포커스 트리거를 추가해야 합니다. 다시 입력을 선택하고 “Add Trigger” → “Focus”를 클릭합니다. 그런 다음 Properties 패널에서 “Focus In”에서 “Focus Out”으로 전환합니다. 그 후 “Border” 응답을 추가하고 너비를 0으로 변경할 수 있습니다.
포커스 트리거 추가하기.
5. 프로토타입 미리보기
미리보기 창에서 프로토타입을 확인할 수 있습니다. 이 창은 툴바의 오른쪽 상단 모서리에서 열 수 있습니다. 상호작용에 문제가 있다면 미리보기 창에서 테스트하는 동안 발견할 수 있습니다. 레이어나 상호작용을 변경하면 기본적으로 프로토타입이 자동으로 새로고침됩니다.
상호작용 미리보기.
6. 일러스트레이션 애니메이션하기
마지막으로 설탕을 더하듯, 입력에서 일어나는 일에 따라 일러스트레이션을 애니메이션해 봅시다 :) 아바타의 눈이 입력 내부의 커서 위치를 따라가게 하고 싶다고 해봅시다.
눈 레이어를 선택한 상태에서 Move 응답을 포커스 트리거에 추가할 수 있습니다. 이렇게 하면 이 레이어를 미리 정의한 좌표로 이동시킬 수 있습니다. 입력이 포커스되면 눈이 커서에 고정되길 원합니다. 입력한 텍스트의 문자 수를 세어 위치를 대략 추정할 수 있습니다. 입력 텍스트를 length() 수식의 매개변수로 전달하면 됩니다. x 위치를 선택하고 수식 기호를 클릭하세요. 제 일러스트레이션에서는 x에 53+length(‘input-text’.text)/4, y에 83 공식을 사용합니다. 그런 다음 focus out 이벤트에 Move 응답을 추가하여 눈의 위치를 초기화합니다(제 예시에서는 x:55, y:80).
Move 응답 추가하기.
마지막으로 타이핑할 때도 눈이 커서를 따라가게 하려면 Detect 트리거를 추가하세요. 그런 다음 focus in 트리거에서 Move 응답을 붙여넣습니다.
Move 응답과 함께 Detect 트리거 추가하기.
최종 결과
완성된 마이크로인터랙션을 미리보기할 시간입니다 :)
텍스트 입력 마이크로인터랙션.
결론
마이크로인터랙션 프로토타이핑은 디자인 결정을 논의하고 테스트하는 매우 효과적인 방법입니다. ProtoPie와 Figma 워크플로는 거의 끊김이 없습니다. 모든 스케치는 Figma에서 준비할 수 있습니다. ProtoPie에서는 디자이너가 수식, 변수, 조건부 로직을 사용해 인터랙티브 프로토타입을 쉽게 만들 수 있습니다. 이렇게 하면 개발자도 After Effects 애니메이션을 재현하는 데 필요한 모든 추측을 없애 주는 상호작용 기록 덕분에 코드로 마법을 부리기가 더 쉬워집니다.
ProtoPie는 디자이너가 고충실도 인터랙티브 프로토타입 형태로 아이디어를 현실로 만들 수 있도록 도와줍니다. 오늘부터 코드 한 줄 작성하지 않고도 자신만의 초고충실도 프로토타입을 만들어 보세요.
