생산성과 표현력은 ProtoPie가 중요하게 생각하는 두 가지 핵심 축입니다. 많은 디자이너들이 이미 자신만의 워크플로 습관을 가지고 있기 때문에, 우리는 더 익숙한 방식을 도입해 불편함을 줄이려 했습니다. 동시에, 오랫동안 많은 요청을 받아온 사용 사례인 완전한 미디어 플레이어 프로토타입 제작을 돕고자 합니다.
그래서 ProtoPie 5.5에는 모두를 위한 무언가가 조금씩 담겨 있습니다.
생산성을 높이고, 이미 익숙한 디자인 도구와의 간극을 좁혀 주는 기능 및 개선 사항입니다.
수식의 기술을 익힌 마법사들을 위해 표현력을 높여 주는 기능입니다.
이 새로운 기능과 개선 사항을 자세히 살펴보겠습니다.
Playback 응답에서의 수식 지원
미디어 플레이어나 스트리밍 앱 프로토타입을 만들 때, 작동하는 스크러버는 프로토타입이 현실적으로 느껴지기 위해 필수적입니다. Playback 응답에서 수식을 지원하면 오디오, 비디오 또는 Lottie 파일에서 특정 시점으로 이동해 그 지점부터 재생을 시작할 수 있습니다.
Playback 응답에서 선택할 수 있는 작업은 세 가지입니다—재생, 일시 정지, 탐색. 탐색 작업에서는 수식을 사용할 수 있습니다. 스크러버를 작동시키려면 스크러버의 x 좌표를 해당 시점과 "연결"하기만 하면 됩니다.
[IMG url="https://cdn.sanity.io/images/qyzm5ged/blog/1b7073baa8e586aa74ea5a62e6f2ebbc69a9fb9a-1634x1272.gif"]
우리는 여러분이 직접 완전한 비디오 플레이어 프로토타입을 만드는 방법에 대한 별도의 글도 작성했습니다.
Playback 응답과 수식에 대해 더 알아보세요.
이미지 채우기
Figma, Sketch 또는 Adobe XD에서 디자인을 가져올 때, 가져온 크기에서 이미지가 늘어나 보이거나 이미지 채우기가 적용된 레이어가 비어 보이는 경험을 하셨을 수 있습니다. 하지만 이제 ProtoPie와 세 가지 플러그인이 이미지 채우기를 지원하므로, 이런 문제를 걱정할 필요가 없습니다.
ProtoPie에서 도형 레이어를 만든 뒤, 채우기로 사용할 이미지를 선택할 수도 있습니다. 이미지 채우기에는 세 가지 유형이 있습니다—채우기, 맞춤, 늘이기. 채우기 또는 맞춤 옵션을 선택하면 왜곡 없이 원래 비율을 유지할 수 있습니다.
자세히 알아보기 이미지 채우기에 대해.
클릭 & 드래그로 레이어 만들기
많은 디자이너들이 클릭하고 드래그해서 도형 레이어를 만드는 동작에 익숙합니다. 이제 ProtoPie가 바로 이 방식을 지원합니다.
캔버스 어디에서든 커서가 있는 위치에 도형 레이어를 만들 수 있습니다. 이제 레이어의 크기를 조절하거나 이동하는 데 시간을 낭비할 필요가 없습니다.
단축키 모달
유용한 키보드 단축키를 아는 것과, 그것을 찾아내는 것은 또 다른 문제입니다. 그래서 우리는 모든 키보드 단축키를 한곳에서 볼 수 있는 단축키 모달을 소개합니다.
생산성을 높이거나 워크플로를 더 쉽게 만들어 줄 모든 단축키를 한눈에 확인해 보세요. 단축키 모달을 열려면 ⌃ + ⇧ + / (macOS) 또는 Ctrl + ⇧ + / (Windows)을 사용하세요.
문서에서도 단축키 목록을 확인할 수 있습니다. 모든 키보드 단축키에 대해 자세히 알아보기.
새로운 단축키 더보기
우리는 몇 달 전 생산성을 높여 주는 몇 가지 새로운 단축키를 소개했습니다. 이번 출시에서도 그 흐름을 이어갑니다.
왼쪽, 오른쪽, 위, 아래, 가운데, 중앙 정렬 단축키
많은 디자이너들은 단축키로 레이어를 정렬하는 데 익숙합니다. 이제 속성 패널에서 올바른 정렬 아이콘을 찾지 않고도 레이어를 정렬할 수 있습니다.
자세히 알아보기 정렬 단축키에 대해. 또는 ⌃ + ⇧ + / (macOS) 또는 Ctrl + ⇧ + /(Windows)로 단축키 패널을 여세요.
색상을 선택하는 단축키
먼저 속성 패널로 이동하지 않고도 스포이드로 손쉽게 색상을 선택할 수 있습니다. 레이어를 선택한 다음 다음 단축키를 사용하세요: I (macOS & Windows) 또는 ⌃ + C (macOS).
자세히 알아보기 색상 선택 단축키에 대해.
변수에 대한 수식 지원
수식 마법사 여러분은 수식이 때때로 길고 번거로워질 수 있다는 것을 잘 아실 겁니다. 특정 수식을 여러 번 재사용해야 하는 경우도 많습니다. 이제는 다시 사용하고 싶을 때마다 그 수식을 기억하거나, 찾아보거나, 복사해서 붙여 넣을 필요가 없습니다.
변수(이 씬용)를 만들고 데이터 유형을 선택한 다음 수식 사용을 체크하세요. 사용하려는 수식을 입력합니다. 이 수식을 실제로 재사용하려면 변수 이름만 사용하면 됩니다.
새로운 수식 함수
수식의 진정한 힘을 발휘하려면 다른 레이어와 해당 레이어 속성을 참조해야 합니다. 그래서 수식을 더 효율적으로 사용할 수 있도록, 도움이 되는 두 가지 새로운 함수를 소개합니다.
수식 함수: parent
지금까지는 수식에서 사용하는 부모 레이어를 변경하면, 예를 들어 이름이 바뀌거나 다른 레이어가 부모 레이어가 되면 수식을 수정해야 했습니다. 하지만 이제는 아닙니다. parent 함수를 사용하면 부모 레이어가 무엇이든, 또는 부모 레이어에 어떤 변경이 생기든 상관없이 부모 레이어를 참조할 수 있습니다.
부모 레이어, 예를 들어 컨테이너나 컴포넌트를 참조하거나, 해당 레이어 속성을 반환할 수 있습니다. 예를 들어, Red 또는 Blue를 탭할 때 타원이 움직이게 해 봅시다(각각은 내부에 텍스트 레이어가 있는 컨테이너입니다). parent 함수 덕분에, 타원은 텍스트 레이어의 부모가 되는 레이어의 y 좌표로 이동합니다.
장점은 이것이 확장 가능하다는 점입니다. 예시처럼 2개가 아니라 10개 또는 20개의 카드가 있다고 상상해 보세요. 모든 카드에 대해 상호작용을 만드는 방식은 동일합니다.
이 예제를 직접 사용해 보기. parent 함수에 대해 자세히 알아보기.
수식 함수: initial
수식에서 문제 중 하나는 레이어 속성의 초기값을 기억하거나 계산해야 한다는 것이었습니다. 이제는 그럴 필요가 없습니다. initial 함수를 사용하면 특정 레이어 속성의 초기값을 가져올 수 있습니다—값을 기억할 필요도 없고, 속성 패널로 돌아가 실제 값이 무엇이었는지 확인할 필요도 없습니다.
특정 레이어 속성의 초기값(상호작용 전)을 반환합니다. 예를 들어 Oval의 초기 x 좌표를 얻고 싶다면 initial(Oval, "x")를 사용해 초기 x 좌표를 찾을 수 있습니다.
이 예제를 직접 사용해 보기. initial 함수에 대해 자세히 알아보기.
ProtoPie 5.5—기타 기능 및 개선 사항
드롭다운에서 마지막으로 선택한 항목 기억
레이어 및 상호작용 패널 렌더링 개선
색상 선택기 지연 현상 제거
속성 패널에 오디오, 비디오 및 Lottie 파일 길이 표시
출시 이벤트에 함께하세요
더 잘 이해하려면 5.5 출시 이벤트를 시청해 보세요. ProtoPie는 새로운 기능을 실제로 시연했을 뿐 아니라, 우리가 기능을 선정하는 방식에 대해서도 더 깊이 있게 설명했습니다.
주제 1 — 더 나은 ProtoPie를 만들기 위해 기능을 선택하는 방법.
주제 2 — 비디오 플레이어 프로토타입: ProtoPie의 새 기능 실제 적용.
