다른 디자인 툴처럼 ProtoPie에서도 레이어를 이용할 수 있습니다. 도형 레이어에는 사각형, 원형, 삼각형 등 다양한 모양이 있습니다. 좌측 상단 Shape 버튼을 클릭한 후 마우스를 원하는 위치에 두고 드래그하면 레이어가 생성됩니다. 해당 레이어를 클릭하여 크기를 조절하거나, 회전시킬 수도 있습니다.
레이어의 위치를 설정합니다.
레이어의 폭과 높이를 설정합니다.
레이어의 각도를 설정합니다.
레이어의 크기, 위치, 각도를 변경할 때 기준점을 설정합니다.
별모양 혹은 다각형 레이어를 생성할 때 꼭짓점의 갯수를 설정합니다.
별모양 레이어에서, 중앙으로부터 꼭짓점까지의 거리를 비율로 설정합니다.
사각형인 레이어의 모서리를 변형할 수 있습니다. 네 개 모서리를 동시에 변형할 수도 있으며, 각각 한 개씩 변형할 수도 있습니다. Radius 옵션의 아이콘을 클릭한 후, 원하는 값을 설정하십시오.
레이어의 투명도를 설정합니다. 투명도를 0으로 설정하면, 레이어에 적용된 인터랙션이 작동하지 않습니다.
색상 코드를 사용하여 레이어를 채울 수 있습니다. 색상의 투명도를 0으로 설정하더라도, 레이어에 적용된 인터랙션은 작동합니다.
이미지를 사용하여 레이어를 채울 수 있습니다. 이미지의 비율을 유지하려면 fill이나 fit 옵션을 선택하십시오.
레이어의 윤곽을 설정합니다.
레이어의 음영을 설정합니다. 음영의 깊이나 크기를 조절할 수 있습니다.
레이어의 터치 영역을 설정합니다. 레이어의 크기보다 영역을 넓게 설정할 수 있습니다.
레이어가 중첩됐을 때 밑의 레이어를 터치할 수 있도록 설정합니다.
도형 레이어의 속성으로, 다른 레이어를 도형 레이어 크기로 설정할 수 있습니다.
벡터 기반 이미지 포맷인 SVG 파일을 임포트하여, 이미지의 손상 없이 확대/축소할 수 있습니다. ‘Shape layer’로 변환하여 color, border, shadow 등의 속성을 변경할 수 있습니다.
- 그라데이션이나 두 개 이상의 색상이 있는 SVG는 지원되지 않습니다.
- 아직 ProtoPie에서 지원하지 않는 SVG 파일 경우, ‘Convert to shape’ 버튼이 비활성화될 수 있습니다. (현재는 SVG의 path, ellipse, polyline, polygon, rect, circle, line 속성을 지원합니다.)
Sketch, Figma, Adobe XD, Zeplin 등의 툴에서 SVG 코드를 복사하여 ProtoPie에 붙여넣을 수도 있습니다. 아래는 샘플 SVG 코드입니다
<svg width="175px" height="166px" viewBox="0 0 175 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<polygon id="Star" fill="#2212D4" points="87.5 137.25 33.7176494 165.525055 43.9891644 105.637527 0.478328759 63.224945 60.6088247 54.4874725 87.5 0 114.391175 54.4874725 174.521671 63.224945 131.010836 105.637527 141.282351 165.525055"></polygon>
</g>
</svg>
프로토파이는 동영상 레이어를 지원합니다.
100MB 이하의 mp4(H264) 포맷 비디오를 사용하실 수 있습니다.
영상 레이어의 볼륨 속성을 조정합니다.
프로토타입이 실행됐을 때 자동으로 동영상을 재생합니다
동영상을 반복 재생합니다
After Effects에서 Lottie로 제작된 JSON 파일을 사용할 수 있습니다. Lottie에 대한 자세한 정보는 LottieFiles 웹사이트에서 확인 할 수 있습니다.
프로토타입이 실행됐을 때 자동으로 Lottie를 재생합니다
Lottie를 반복 재생합니다
Audio 레이어를 지원합니다. wav, mp3, m4a 포맷을 사용할 수 있습니다
오디오 레이어의 볼륨 속성을 조정합니다
프로토타입이 실행됐을 때 자동으로 동영상을 재생합니다
오디오를 반복 재생합니다
스마트 기기의 카메라 아웃풋을 프로토타입의 레이어로 활용할 수 있으며, 이를 통해 QR 코드를 스캔할 수도 있습니다(자세히 보기). Smart Device의 camera를 사용할 수 있는 Layer입니다. Camera가 지원되지 않는 기기에서는 Place holder 영상으로 표시됩니다(예. 스튜디오의 프리뷰, 웹).
Scene이 시작할 때 Camera를 자동으로 실행합니다
전면 camera를 실행합니다
후면 camera를 실행합니다
프로토타입 내에서 QR 코드를 스캔할 수 있습니다
QR 코드를 스캔하여 웹 브라우저에서 링크를 실행할 수 있습니다
QR 코드 내에 저장된 값을 모니터링하세요
텍스트를 입력할 수 있는 레이어입니다.
컴퓨터에 설치된 폰트를 선택할 수 있습니다. 만약에 System Default를 선택하면 각 스마트 디바이스의 기본 폰트로 보여집니다.
폰트의 굵기를 설정할 수 있습니다.
폰트의 크기를 설정할 수 있습니다.
폰트의 좌/우 혹은 상/하 정렬을 설정할 수 있습니다.
텍스트 박스는 텍스트의 가로 혹은 세로 길이에 따라 자동으로 맞춰지거나, 가로와 세로 길이를 고정할 수 있습니다.
자간을 조절할 수 있습니다.
행간을 조절할 수 있습니다.
프로토파이에서 사용된 폰트가 설치되어 있지 않을 경우 우하단에 미씽폰트 정보가 표시됩니다. 미씽폰트 패널을 열어서 미씽폰트를 다른 폰트로 대체할 수 있습니다.
Input 레이어는 키보드로 한 줄 혹은 여러 줄의 텍스트를 입력할 수 있게 해줍니다.
Input 레이어에 미리 텍스트를 입력해 놓을 수 있습니다.
Placeholder 텍스트를 입력할 있으며, 색을 지정할 수 있습니다.
Single-line의 경우, 다양한 종류의 키보드 타입을 지원합니다.
- 텍스트
- URL
- 이메일
- 숫자패드
- 암호: 텍스트
- 암호: 숫자
네이티브 키보드의 리턴 버튼을 아래 중 하나로 설정할 수 있습니다.
- 이동
- 다음
- 보내기
- 검색
- 완료
- 개행 (multi-line만 해당)
iOS/iPadOS에 한하여 라이트와 다크 모드로 설정이 가능합니다.
Input 레이어에서 포커스 아웃(키보드를 사라지게)하는 두 가지 옵션이 있습니다.
- 리턴 버튼을 누른다.
- Input 레이어가 아닌 곳을 터치한다.
지원되는 블러 효과: 안드로이드 및 iOS에 3가지 기본 효과(다크, 라이트, 엑스트라 라이트) 적용, 웹 및 iOS 13 이상인 경우 10가지 블러 효과 추가 적용.
- Ultra Thin Material
- Thin Material
- Material
- Thick Material
- Chrome Material
레이어에 Constraints를 설정할 수 있습니다. 상위 레이어의 크기를 조정할 때 설정한 Constraints에 따라 레이어의 크기와 위치가 자동으로 조정됩니다. Constraints는 response 에 의해서 parent 가 resize 될 때에도 동작합니다.
- 왼쪽 영역은 layer의 위치를 정의합니다. 상/하/좌/우 네 면에 대하여 고정 간격을 설정 할 수 있습니다. 즉 부모 layer의 네 면중 원하는 방향으로 layer의 위치를 고정 시킬 수 있습니다.
- 오른쪽 영역은 layer의 크기를 정의합니다. Fixed Width/Height 를 끄면 margin값과 부모 container의 크기에 비례하여 늘어나거나 줄어들게 됩니다. Fixed 설정을 켤 경우에는 부모의 크기와 관계 없이 크기를 고정합니다
왼쪽 영역의 constraints를 사용해서 파란색 레이어를 부모 레이어의 오른쪽에 고정시킵니다. 부모 layer의 크기가 변경되어도 언제나 오른쪽 간격을 유지한 상태로 위치를 유지하게 됩니다.
왼쪽 영역의 constraints를 모두 해제하고 고정 너비와 고정 높이만 설정하면 파란색 layer의 사이즈를 유지한채 항상 부모 layer의 상/하, 좌/우 중앙에 위치합니다.
왼쪽 영역에서 좌/우 간격을 고정하면 부모 layer를 가로로 resize 할 때 파란색 layer와 부모 layer 사이의 좌/우 간격을 고정 시킵니다.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/b7b316d712d8572d1853d7c652715321260a8c62-1580x870.png/image.png?fm=webp)
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/cfc1d2606f5aa93c985784156a5841b284b38813-1580x870.png/image.png?fm=webp)
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/1f4280b4a9b67b649a1398937d2e001e8240416a-1580x870.png/image.png?fm=webp)
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/7349203da8b42c524fb67bb4a5a69f0e097a9c51-1054x920.png/image.png?fm=webp)
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/a20372f626ed783826de725682a35587efec6e05-1076x500.gif/pin-to-right.gif)
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/5312f7a2e3453fb34046c8b86f749090b5690faf-1076x500.gif/positioning-to-center.gif)
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/e01ce6351ab34240c621a875ac49d7dafbebb722-1076x500.gif/fix-padding.gif)
