Figma 와 ProtoPie로 입력 기능 구현하기
Figma와 ProtoPie를 사용하여 입력 기능을 구현하세요.
Figma(영문)는 사용자 흐름을 테스트하거나 개발자에게 마이크로 인터랙션을 전달하는데 좋은 패스트 프로토타이핑 툴입니다. 그러나 현재까지는 Figma에서 variables를 사용하거나 Presestation view에서 작동하는 키프레임 애니메이션을 만드는 기능은 지원되지 않는데요. 이때 ProtoPie를 사용하면 Figma d에서 작업된 디자인에 conditional interaction, multi-touch gestures, camera 및 sensor trigger, media playback, voice control 등이 추가된 hi-fi 프로토타입을 구현하실 수 있습니다.
이번 아티클에서는 ProtoPie에서 입력 기능을 만드는 법에 대해 살펴보겠습니다.
Figma에서 시작하기
1. 디자인 만들기
우선 시작하기 전 작업 가능한 몇가지 디자인이 필요합니다. 이번 예시에서는 계정에 새 프로필을 추가할 수 있는 입력 화면을 디자인하고, 간단한 애니매이션도 추가해 봅시다.
향후 효율적인 작업을 위해, 각 레이어에 적합한 레이어 이름을 지정하세요.
Figma에서 레이어 이름 지정하기2. ProtoPie로 내보내기
이제 Figma에서 디자인을 내보낼 차례입니다.
먼저 ProtoPie plugin(영문)을 설치합니다.
플러그인이 준비되고 ProtoPie 앱이 백그라운드에서 실행중인 경우, 작업하려는 프레임을 선택하고 Export 버튼을 눌러 ProtoPie로 직접 내보내세요. 디자인의 최상단 프레임은 Figma에 설정된 것과 정확히 동일한 레이어 계층 구조, 이름 지정 및 위치가 포함된 scene으로 불러옵니다.
Figma에서 ProtoPie로 디자인 내보내기ProtoPie에서 작업 계속하기
3. Input 레이어 추가
이제 본격적으로 구현 작업을 시작할 차례입니다.
ProtoPie 창으로 전환하면 인터페이스가 Figma와 매우 유사하다는 것을 확인할 수 있을 것입니다.
왼쪽 패널에는 모든 레이어를 확인할 수 있고, 상단 도구 모음에서는 프로토타입에 다양한 유형의 객체를 추가할 수 있습니다. 또한 오른쪽 패널에는 속성, 타임라인 및 인터랙션이 포함됩니다. 미리보기 버튼조차도 비슷한 위치에 있으므로, UI 디자인 소프트웨어에 대한 경험이있는 사람은 앱 탐색이 어렵지 않을 것입니다.
먼저 플레이스 홀더를 인터랙티브한 input 레이어로 교체해야 합니다. 왼쪽 상단 툴바에 Text를 클릭하여 교체하세요. 그 다음, 오른쪽의 속성 패널에서 플레이스 홀더 텍스트 숨기기, 가장자리를 둥글게 하기, 배경 채우기 및 테두리 변경하기, 그리고 글꼴과 텍스트 색상을 디자인에 맞게 조정하기 등 속성 변경 작업을 진행합니다.
ProtoPie에 인터랙티브 input 추가4. Trigger 및 Response를 추가하여 인터랙션 구현하기
인터랙션 구현을 위해서는 trigger, object, 그리고 response 이렇게 세 가지 component가 필요합니다. 이번 예시에서의 object는 input이고, trigger는 하나 이상의 응답을 실행하도록 합니다. Response는 활성화된 object를 수정한 것입니다.
이번 예시에서는 focus trigger를 사용할 것입니다. Input 레이어가 초점을 맞추면, 기본적으로 깜박이는 커서와 기본 스마트 폰 키보드가 나타납니다. 또한 인풋 주위에 녹색 테두리를 추가할 것입니다. Focus out trigger는 focus in trigger와 완전 상반되는 결과를 보여줍니다.
Trigger를 추가하려면 인터랙티브 input 레이어를 선택하고 인터랙션 패널로 이동하세요.
그 다음, "Add Trigger" 버튼을 클릭하여 모든 옵션을 확장하고 "Focus"를 선택하고, focus trigger에서 + 기호를 클릭하여 response를 만듭니다.
"Border"를 선택하고 너비를 2px로 변경하세요.
Input이 더 이상 활성화되지 않을때 발생할 작업을 정의하기 위해 다른 focus trigger를 추가해야 합니다. 다시 input을 선택하고 “Add Trigger” 버튼을 클릭한 다음, “Focus” 버튼을 클릭하세요.
그 후 Properties 패널을 클릭해, "Focus In"에서 "Focus Out"으로 trigger를 전환합니다. 마지막으로 "Border" response를 추가하고 너비를 0으로 변경합니다.
Focus trigger 추가하기5. 프로토타입 미리 보기
도구 모음의 오른쪽 상단 모서리에서 미리보기 창을 열어 프로토타입을 확인해 보세요. 인터랙션 중 하나라도 제대로 작동하지 않으면 미리보기 창에서 테스트중 확인이 가능합니다. 레이어 또는 인터랙션을 변경하면 프로토타입이 자동으로 수정됩니다.
인터랙션 미리 보기6. 일러스트레이션에 애니메이션 추가하기
자, 이제 이 프로젝트의 꽃인 일러스트레이션에 애니메이션을 추가해 볼까요? :)
아바타의 눈이 입력 내부의 커서 위치 따라가도록 설정한다고 가정해 봅시다.
눈 레이어를 선택한 상태에서, Move response을 focus trigger에 추가합니다. 추후 필요한 경우 해당 레이어를 미리 정의된 좌표로 이동할 수 있습니다.
입력에 초점을 맞출 때, 눈이 커서에 고정될 수 있도록 설정해야 하는데, 이를 위해서는 입력한 텍스트의 문자 수를 계산하여 위치를 근사화하면 됩니다. 입력 텍스트를 length() formula에 매개 변수로 전달하세요. x의 포지션을 선택하고 formula 기호를 클릭하세요.
이번 예시에서는 아래 formula가 사용되었습니다.
x: 53+length('input-text'.text)/4,
y: 83+length('input-text'.text)/4,
Formula 설정이 완료되면 focus Out 이벤트에 Move response를 추가하여 (예 : x : 55 및 y : 80) 눈의 포지션을 재설정하세요.
Move response 추가마지막으로, 입력할 때에도 눈이 커서를 따르도록 하려면 Detect trigger를 추가하고, Move response을 Detect trigger 안 focus에 붙여 넣습니다.
Detect trigger 와 Move response 추가결과물 확인하기
완성된 마이크로 인터랙션을 확인해볼 시간입니다! :)
텍스트 input 마이크로 인터랙션요약
마이크로 인터랙션 프로토타이핑은 디자인 결정을 논의하고 테스트하는 데 매우 효과적인 방법입니다. ProtoPie 및 Figma를 동시에 사용하면 매끄러운 워크플로 구축이 가능합니다. 모든 스케치를 Figma에서 준비하고, ProtoPie에서 formulas, variables 및 conditional logic을 사용하여 인터랙티브 프로토타입을 쉽게 만들 수 있습니다. 또한 ProtoPie에서는 Interaction Recordings 라는 기능을 통해, After Effects 애니메이션을 보다 명확하게 구현할 수 있어 개발자가 더 쉽게 명료한 코드를 작성할 수 있습니다.
ProtoPie는 디자이너가 hi-fi 인터랙티브 프로토타입의 형태로 아이디어를 실현할 수 있도록 돕습니다. 지금 바로 한 줄의 코드 없이 독창적인 hi-fi 프로토타입을 구현해 보세요.
