ProtoPie 업데이트
친근한 기능으로 생산성 올리기
ProtoPie, 프로토파이, 프로토타이핑툴
Free Your Ideas, ProtoPie
이번 ProtoPie 업데이트에서 기존의 다른 디자인툴에서 사용하던 방식을 ProtoPie에서도 쉽게 사용할 수 있는 새로운 기능들이 추가됐습니다. 뿐만 아니라 많은 유저분들이 기다리던 완벽한 미디어 플레이어 프로토타입도 함께 소개합니다.
프로토타입 5.5 업데이트 주요 내용
· 유저가 익숙한 디자인툴과의 격차 감소를 통한 생산 향상
· Formula를 사용한 표현력 향상
Playback response의 Formula 서포트
미디어 플레이어 또는 스트리밍 앱의 사실적인 프로토 타입 구현을 위해서는 scrubber의 작동이 필수적이죠. Playback response의 formula support을 사용하면 오디오, 비디오 또는 Lottie 파일에서 재생을 시작할 특정 타임 스탬프를 찾을 수 있습니다.
Playback response에서 선택할 수 있는 작업은 재생, 일시 중지, 검색 기능이 있습니다. 특히 검색은 formula를 통해 사용할 수 있고 scrubber의 x 좌표를 해당 타임 스탬프와 "연동"하여 간단하게 scrubber를 작동할 수 있습니다.
위와 같이 비디오 플레이어 프로토타입을 만드는 방법이 궁금하다면 이곳에서 확인해보세요.
Playback response와 formula에 대해 더 알아보세요.
Image fill
Figma나 Sketch 또는 Adobe XD와 같은 툴에서 디자인을 임포트할 때 크기가 늘어나거나 레이어가 공백으로 나타나는 경우가 있었습니다. 이제 새로 업데이트된 Image fill 기능으로 문제를 해결할 수 있습니다.
ProtoPie에서 shape layer를 만들고 fill 기능을 사용해 채워넣을 이미지를 선택해보세요. Image fill의 옵션 중 fill 또는 fit을 선택하여 변형없이 기존 이미지의 비율을 유지할 수 있습니다.
Image fill에 대해 더 자세히 알아보세요.
Click & Drag로 레이어 만들기
이전에는 레이어를 만들 때마다 일일이 크기나 위치를 변경해줘야 했습니다. 이제는 클릭과 드래그로 레이어를 더 쉽고 편하게 만들 수 있습니다. 마우스 커서가 위치한 곳을 기준으로 원하는 형태의 레이어를 만들어보세요.
단축키 Modal
단축키가 있더라도 실제로 사용하지 않는다면 아무런 의미가 없을겁니다. 지금까지 ProtoPie의 단축키를 찾기 어려웠다면 아래 단축키를 통해 모든 shortcuts을 한번에 볼 수 있는 Modal 기능을 확인해 보세요.
· macOS: ⌃ + ⇧ + /
· Windows: Ctrl + ⇧ + /
이곳에서 모든 키보드 단축키를 확인할 수 있습니다.
더 다양해진 단축키
ProtoPie는 유저의 생산성 향상을 위해 다양한 단축키를 지속적으로 업데이트하고 있습니다.
레이어 정렬 단축키
이제 레이어 정렬이 필요할 때 단축키를 사용하면 보다 쉽게 적용할 수 있습니다. 아래 단축키를 사용하여 Shortcuts 패널을 열거나 정렬 Shortcut을 확인해 보세요.
· macOS: ⌃ + ⇧ + /
· Windows: Ctrl + ⇧ + /
단축키로 색상 선택하기
레이어를 선택하고 아래 단축키를 사용하면 스포이드로 쉽게 색상을 선택할 수 있습니다.
· macOS & Windows: I
· macOS: ⌃ + C
이곳에서 색상 선택 단축키에 대해 자세히 알아보세요.
Variable을 위한 Formula support
특정 Formula를 여러번 반복 사용하는 과정이 길고 지루하게 느껴질 수 있습니다. 하지만 이제 formula를 외우고 다시 찾아보거나 복사 및 붙여넣기할 필요가 없습니다.
Variable을 만들고 데이터 타입을 선택한 후 Use Formula를 통해 원하는 formula를 사용해보세요. variable 이름만 적어주면 같은 formula를 사용할 수 있습니다.
Variable과 formula에 대해 자세히 알아보세요.
새로운 Formula 기능
효율적인 formula 사용을 위한 새로운 기능을 소개합니다.
Formula 기능: Parent
지금까지는 formula에 사용된 parent 레이어가 변경될 경우(예: 이름을 바꾸거나 다른 레이어가 parent 레이어로 변경되는 경우) formula에도 동일한 변화를 적용해야 했습니다. 하지만 이제 parent 기능을 통해 상위 레이어가 무엇이든 변경 사항에 관계없이 parent레이어가 자동으로 변경됩니다.
Parents 레이어(컨테이너 또는 컴포넌트)를 formula에 적용하거나 레이어 속성을 활용해서 쓸 수 있습니다. 예를 들어, 빨간색 또는 파란색(각각 내부에 텍스트 레이어가 있는 컨테이너)을 탭할 때 타원을 움직이면 parent 기능으로 인해 타원은 parent 텍스트 레이어의 y 좌표로 이동합니다.
위 예시와 같이 카드 2장이 아니라 20장이 넘는 모든 카드로 이러한 인터랙션을 확장할 수 있습니다.
예제를 직접 테스트해보고 parent 기능에 대해 자세히 알아보세요.
Formula 기능: Initial
레이어 속성의 초기 값을 기억하거나 계산하여 사용해야 하는 기존의 Formula 불편함을 개선했습니다. Initial 속성을 사용하면 값을 기억하거나 property 패널로 돌아가서 실제 값이 무엇인지 확인하지 않고도 특정 레이어 속성의 초기 값을 불러올 수 있습니다.
인터랙션 이전의 레이어 속성값을 불러옵니다. 예를 들어, 타원의 초기 x 좌표를 얻으려면 initial (Oval, "x")를 사용하여 초기 x 좌표를 찾을 수 있습니다.
위 예제를 직접 테스트해보고 initial 기능에 대해 자세히 알아보세요.
ProtoPie 5.5 - 그외 기능과 개선사항
· Dropdown에서 마지막 선택 항목 기억
· 레이어 및 인터랙션 패널 렌더링 향상
· 색상 선택 도구에서의 지연 제거
· 오디오, 비디오 및 Lottie 파일 길이의 property 패널 표시
