플레이 2.0: 모바일 앱을 위한 상호 작용 설계의 새로운 방식


플레이 2.0: 모바일 앱 상호 작용 설계 혁신

프리팹: 빠르고 쉽게 놀라운 상호 작용 추가

플레이 2.0의 하이라이트는 프리팹입니다. 프리팹은 프로젝트에 바로 사용할 수 있는 사전 제작된 상호 작용입니다. 검색하여 페이지로 드래그 앤드 드롭하면 마법처럼 작동합니다. 프리팹의 전체 아이디어는 멋진 상호 작용을 처음부터 만들 필요 없이 쉽고 빠르게 디자인에 추가할 수 있도록 하는 것입니다. 동적 헤더를 만들거나 페이지 주변에 객체를 드래그 앤드 드롭하는 등 모든 것을 몇 초 이내에 완료할 수 있습니다. 프리팹이 추가되면 상호 작용 제어가 표시된 파란색 노드로 나타납니다. 프리팹 제어를 사용하여 상호 작용의 다양한 속성을 쉽게 사용자 지정하고 느낌을 테스트할 수 있습니다. 내부를 살펴보고 싶다면 프리팹을 잠금 해제하면 전체 상호 작용이 공개됩니다.

조건: 상호 작용에 논리를 통합

조건은 플레이에서 논리를 사용하는 주요 방법입니다. 트리거를 사용하여 다른 상황에서 다른 작업을 실행할 수 있습니다. 예를 들어 if 문을 사용하는 경우 사용자가 최소 4명의 아티스트를 선택했는지 확인하여 계속 버튼을 활성화하고 다음 단계로 이동할 수 있습니다. 또한 스크롤하는 사용자에게 헤더를 변경하는 데 조건에 트리거 속성을 사용할 수도 있습니다.

변수: 맞춤 상호 작용을 위한 데이터 저장

플레이 2.0에서는 이제 부울, 문자열, 숫자 변수를 만들 수 있습니다. 변수는 많은 용도로 사용될 수 있습니다. 이 예에서는 사용자가 스테퍼를 사용하여 장바구니에 항목을 추가합니다. 세 개 이상 추가하면 각 항목 가격에 할인이 적용됩니다. 이는 값 변경을 수신 대기하는 변수 이벤트, 조건, 특정 시점에 변수 값을 업데이트할 수 있도록 해주는 변수 설정 작업을 결합하여 이루어집니다. 또한 사용자에게 세부 정보를 요청한 다음 환경의 다른 지점에서 해당 정보를 표시하려면 프로젝트 전체에 걸쳐 변수 값을 표시할 수 있습니다.

식 편집기: 고급 맞춤 상호 작용 생성

플레이의 식 편집기는 더욱 고급 맞춤 상호 작용을 만들 수 있는 입력 방법입니다. 모든 상호 작용 노드의 모든 속성에 있는 더하기 단추를 클릭하여 액세스할 수 있습니다. 식 편집기에 추가된 가장 강력한 기능 중 하나는 스케일, 불투명도, 레이어, 진행적 블러, 패딩 비율, 스크롤, 변환 등 50개 이상의 객체 속성에 액세스할 수 있는 것입니다. 또한 트리거 속성에 액세스할 수 있습니다. 예를 들어 네이티브 팬 트리거에서는 위치, 속도, 변환, Delta 등의 항목에 액세스할 수 있습니다. 식 편집기는 플레이에서 많은 새로운 기능을 가능하게 하며, 이를 사용하여 어떤 것을 만들 수 있는지 기대가 됩니다.

애니메이션 및 지연 블록: 다중 작업 동시 실행 및 애니메이션 제어

애니메이션 및 지연 블록은 여러 작업에 동시에 애니메이션 설정 또는 지연을 적용합니다. 지속 시간과 애니메이션 블록의 이징 커브를 사용자 지정할 수 있습니다. 초기 애니메이션 블록이 완료된 후 작업 세트를 실행하는 옵션인 완료 시도 있습니다.

루프: 페이지 또는 스택 내의 모든 요소에 동일한 작업 적용

플레이의 루프를 사용하면 페이지 또는 스택의 모든 요소에 하나의 작업을 적용할 수 있습니다. 이 예에서는 카드의 회전 위치와 스케일을 변경합니다. 식과 함수를 루프와 함께 사용하여 애니메이션을 스태거링할 수 있으며 페이지에 카드를 추가하면 모든 애니메이션 설정이 자동으로 적용됩니다.

사용자 인터페이스 향상: 더 편리한 상호 작용 설계

플레이 2.0에서는 사용자 인터페이스에 여러 가지 업데이트를 적용했습니다. 더하기 기호를 탭하면 트리거, 작업, 프리팹을 쉽게 검색하고 추가할 수 있는 새로운 애드 패널이 나타납니다. 또한 편집기 오른쪽에 새로운 패널을 만들어 상호 작용을 쉽게 추가하고 볼 수 있습니다. 이제 상호 작용 캔버스를 확대 및 축소하고 노드를 쉽게 드래그 앤드 드롭하여 물체를 손쉽게 이동할 수 있습니다. 상호 작용을 설계하는 동안 화살표 키로 노드를 선택하고 리턴 키로 각 노드를 확장 및 축소할 수 있습니다. 이러한 UI 업데이트는 2.0에서 적용된 몇 가지 예이며, 사용자 마음에 들기를 바랍니다.

트리거 및 작업 업데이트: 더 많은 옵션과 유연성

플레이 2.0에서는 트리거와 작업에 여러 가지 업데이트를 적용했습니다. 트리거의 경우 제스처의 모든 상태를 단일 트리거로 병합했습니다. 예를 들어 팬 트리거에서는 팬 중, 팬 시작, 팬 종료 사이를 쉽게 전환할 수 있습니다. 이를 통해 단일 트리거 내에서 제스처의 다양한 변형을 더 쉽게 전환할 수 있습니다. 또한 원하는 간격을 설정하고 타이머를 자동으로 시작하거나 지속적으로 반복하거나 특정 시간 동안 타이머를 실행할 수 있는 새로운 타이머 트리거를 추가했습니다. 이를 통해 카운트다운과 같은 시간 기반 상호 작용을 프로토타입하고 타이머가 끝날 때 작업을 실행할 수 있습니다. 복제 및 제거와 같은 새로운 작업도 추가되어 프로토타입에서 객체를 쉽게 추가 또는 제거할 수 있습니다. 복제하려는 객체의 유형과 애니메이션 설정에서 위치를 선택하면 됩니다. 이러한 새로운 작업을 사용하여 사용자가 동적으로 요소를 추가하거나 제거할 수 있는 일부 목록과 같은 것을 만들 수 있습니다. 또한 이전의 set width나 set scale과 같은 개별 속성 작업을 대체하는 새로운 set property 작업을 추가하여 속성 값을 더 효율적으로 조정할 수 있습니다. 이는 플레이 2.0에 추가된 새로운 트리거 및 작업 중 일부에 불과하며, 사용자 마음에 들기를 바랍니다.


Leave a Reply

Your email address will not be published. Required fields are marked *