Layers

다른 디자인 툴처럼 ProtoPie에서도 레이어를 이용할 수 있습니다. 도형 레이어에는 사각형, 원형, 삼각형 등 다양한 모양이 있습니다. 좌측 상단 Shape 버튼을 클릭한 후 마우스를 원하는 위치에 두고 드래그하면 레이어가 생성됩니다. 해당 레이어를 클릭하여 크기를 조절하거나, 회전시킬 수도 있습니다.

Layer Properties

Position

레이어의 위치를 설정합니다.

Size

레이어의 폭과 높이를 설정합니다.

Rotation

레이어의 각도를 설정합니다.

Origin

레이어의 크기, 위치, 각도를 변경할 때 기준점을 설정합니다.

Count

별모양 혹은 다각형 레이어를 생성할 때 꼭짓점의 갯수를 설정합니다.

Ratio

별모양 레이어에서, 중앙으로부터 꼭짓점까지의 거리를 비율로 설정합니다.

Radius

사각형인 레이어의 모서리를 변형할 수 있습니다. 네 개 모서리를 동시에 변형할 수도 있으며, 각각 한 개씩 변형할 수도 있습니다. Radius 옵션의 아이콘을 클릭한 후, 원하는 값을 설정하십시오.

Opacity

레이어의 투명도를 설정합니다. 투명도를 0으로 설정하면, 레이어에 적용된 인터랙션이 작동하지 않습니다.

Fill — Solid Color

색상 코드를 사용하여 레이어를 채울 수 있습니다. 색상의 투명도를 0으로 설정하더라도, 레이어에 적용된 인터랙션은 작동합니다.

Fill — Image

이미지를 사용하여 레이어를 채울 수 있습니다. 이미지의 비율을 유지하려면 fill이나 fit 옵션을 선택하십시오.

Border

레이어의 윤곽을 설정합니다.

Shadow

레이어의 음영을 설정합니다. 음영의 깊이나 크기를 조절할 수 있습니다.

Touch Area

레이어의 터치 영역을 설정합니다. 레이어의 크기보다 영역을 넓게 설정할 수 있습니다.

Make Lower Layers Touchable

레이어가 중첩됐을 때 밑의 레이어를 터치할 수 있도록 설정합니다.

Use as Mask

도형 레이어의 속성으로, 다른 레이어를 도형 레이어 크기로 설정할 수 있습니다.

layer properties

SVG Layer

벡터 기반 이미지 포맷인 SVG 파일을 임포트하여, 이미지의 손상 없이 확대/축소할 수 있습니다. ‘Shape layer’로 변환하여 color, border, shadow 등의 속성을 변경할 수 있습니다.

  • 그라데이션이나 두 개 이상의 색상이 있는 SVG는 지원되지 않습니다.
  • 아직 ProtoPie에서 지원하지 않는 SVG 파일 경우, ‘Convert to shape’ 버튼이 비활성화될 수 있습니다. (현재는 SVG의 path, ellipse, polyline, polygon, rect, circle, line 속성을 지원합니다.)
[object Object]

Paste SVG codes

Sketch, Figma, Adobe XD, Zeplin 등의 툴에서 SVG 코드를 복사하여 ProtoPie에 붙여넣을 수도 있습니다. 아래는 샘플 SVG 코드입니다

SVG code example

<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>
[object Object]
[object Object]

Video Layer

프로토파이는 동영상 레이어를 지원합니다.
100MB 이하의 mp4(H264) 포맷 비디오를 사용하실 수 있습니다.

Play Automatically

프로토타입이 실행됐을 때 자동으로 동영상을 재생합니다

Looping

동영상을 반복 재생합니다

video lottie audio layer property

Lottie Layer

After Effects에서 Lottie로 제작된 JSON 파일을 사용할 수 있습니다. Lottie에 대한 자세한 정보는 Lottie 웹사이트에서 확인 할 수 있습니다.

Play Automatically

프로토타입이 실행됐을 때 자동으로 Lottie를 재생합니다

Looping

Lottie를 반복 재생합니다

video lottie audio layer property

Audio Layer

Audio 레이어를 지원합니다. wav, mp3, m4a 포맷을 사용할 수 있습니다

Play Automatically

프로토타입이 실행됐을 때 자동으로 동영상을 재생합니다

Looping

오디오를 반복 재생합니다

video lottie audio layer property

Camera Layer

Smart Device의 camera를 사용할 수 있는 Layer입니다. Camera가 지원되지 않는 기기에서는 Place holder 영상으로 표시됩니다(예. 스튜디오의 프리뷰, 웹)

Text Layer

텍스트를 입력할 수 있는 레이어입니다.

Font

컴퓨터에 설치된 폰트를 선택할 수 있습니다. 만약에 System Default를 선택하면 각 스마트 디바이스의 기본 폰트로 보여집니다.

Weight

폰트의 굵기를 설정할 수 있습니다.

Size

폰트의 크기를 설정할 수 있습니다.

Alignment

폰트의 좌/우 혹은 상/하 정렬을 설정할 수 있습니다.

Text Resize

텍스트 박스는 텍스트의 가로 혹은 세로 길이에 따라 자동으로 맞춰지거나, 가로와 세로 길이를 고정할 수 있습니다.

Letter Spacing

자간을 조절할 수 있습니다.

Line Height

행간을 조절할 수 있습니다.

Text Property

Missing Font

프로토파이에서 사용된 폰트가 설치되어 있지 않을 경우 우하단에 미씽폰트 정보가 표시됩니다. 미씽폰트 패널을 열어서 미씽폰트를 다른 폰트로 대체할 수 있습니다.

[object Object]

Input Layer

Input 레이어는 키보드로 한 줄 혹은 여러 줄의 텍스트를 입력할 수 있게 해줍니다.

1. Text

Input 레이어에 미리 텍스트를 입력해 놓을 수 있습니다.

2. Placeholder

Placeholder 텍스트를 입력할 있으며, 색을 지정할 수 있습니다.

3. Keyboard Type

Single-line의 경우, 다양한 종류의 키보드 타입을 지원합니다.

  • 텍스트
  • URL
  • 이메일
  • 숫자패드
  • 암호: 텍스트
  • 암호: 숫자
4. Return

네이티브 키보드의 리턴 버튼을 아래 중 하나로 설정할 수 있습니다.

  • 이동
  • 다음
  • 보내기
  • 검색
  • 완료
  • 개행 (multi-line만 해당)
5. Keyboard Theme

iOS/iPadOS에 한하여 라이트와 다크 모드로 설정이 가능합니다.

6. Focus Out Options

Input 레이어에서 포커스 아웃(키보드를 사라지게)하는 두 가지 옵션이 있습니다.

  • 리턴 버튼을 누른다.
  • Input 레이어가 아닌 곳을 터치한다.
Input Layer Property

iOS Background Blur Layer

하단 오브젝트에 블러 효과를 줄 수 있는 레이어 입니다. iOS에서 정의된 총 13가지의 효과를 적용할 수 있습니다. (iOS 12 및 이전 버전은 기본 효과 3개만 적용 가능)

Constraints

레이어에 Constraints를 설정할 수 있습니다. 상위 레이어의 크기를 조정할 때 설정한 Constraints에 따라 레이어의 크기와 위치가 자동으로 조정됩니다. Constraints는 response 에 의해서 parent 가 resize 될 때에도 동작합니다.

  • 왼쪽 영역은 layer의 위치를 정의합니다. 상/하/좌/우 네 면에 대하여 고정 간격을 설정 할 수 있습니다. 즉 부모 layer의 네 면중 원하는 방향으로 layer의 위치를 고정 시킬 수 있습니다.
  • 오른쪽 영역은 layer의 크기를 정의합니다. Fixed Width/Height 를 끄면 margin값과 부모 container의 크기에 비례하여 늘어나거나 줄어들게 됩니다. Fixed 설정을 켤 경우에는 부모의 크기와 관계 없이 크기를 고정합니다
constraints

Pin to top right corner

왼쪽 영역의 constraints를 사용해서 파란색 레이어를 부모 레이어의 오른쪽에 고정시킵니다. 부모 layer의 크기가 변경되어도 언제나 오른쪽 간격을 유지한 상태로 위치를 유지하게 됩니다.

[object Object]
pin to top right corner property

Center position

왼쪽 영역의 constraints를 모두 해제하고 고정 너비와 고정 높이만 설정하면 파란색 layer의 사이즈를 유지한채 항상 부모 layer의 상/하, 좌/우 중앙에 위치합니다.

[object Object]
center position property

Fixed spacing

왼쪽 영역에서 좌/우 간격을 고정하면 부모 layer를 가로로 resize 할 때 파란색 layer와 부모 layer 사이의 좌/우 간격을 고정 시킵니다.

[object Object]
fixed spacing property
Back To Top