Layers

프로토파이에서는 다른 디자인 툴을 사용했던 경험 그대로 레이어의 프로퍼티를 조절 할 수 있습니다. 사각형 레이어나 원형 레이어와 같은 벡터레이어를 메뉴바에서 쉽게 추가할 수 있고, 해당 레이어의 사이즈나 위치를 변경하는 방식이 기존 디자인 툴과 동일하기 때문에 빠르게 익힐 수 있습니다.

Layer Property

Position

캔버스상에서 레이어의 좌표를 설정합니다

Size

레이어의 크기를 설정합니다

Rotation

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

Origin

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

Radius

사각형 레이어 모서리의 둥글기를 설정합니다

Opacity

레이어의 투명도를 설정합니다. 레이어의 투명도를 0으로 설정하면 트리거에 반응하지 않습니다

Fill Color

레이어의 컬러와 컬러의 투명도를 설정합니다. 컬러의 투명도를 0으로 설정해도 트리거에 반응합니다

Border

레이어에 보더를 적용합니다.

Shadow

레이어에 쉐도우를 적용합니다.

Hit area

레이어의 터치 영역을 임의로 조절할 수 있습니다

Allow Touch to Affect Lower layers

레이어를 트리거에 반응하지 않도록 설정합니다

Use as Mask

벡터레이어만 가지는 속성으로 다른 레이어들을 벡터레이어 크기 만큼만 보여줄 수 있습니다

SVG Layer

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

  • 그라데이션이나 두 개 이상의 색상이 있는 SVG는 지원되지 않습니다.

  • 아직 ProtoPie에서 지원하지 않는 SVG 파일 경우, ‘Convert to shape’ 버튼이 비활성화될 수 있습니다. (현재는 SVG의 path, ellipse, polyline, polygon, rect, circle, line 속성을 지원합니다.)

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>

Video Layer

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

Play Automatically

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

Looping

동영상을 반복 재생합니다

Lottie Layer

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

Play Automatically

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

Looping

Lottie를 반복 재생합니다

Audio Layer

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

Play Automatically

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

Looping

오디오를 반복 재생합니다

Camera Layer

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

Auto Start

Scene이 시작할 때 Camera를 자동으로 실행합니다

Camera [Front]

전면 camera를 실행합니다

Camera [Rear]

후면 camera를 실행합니다

Text Layer

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

Font

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

Weight

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

Size

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

Alignment

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

Text Resize

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

Letter Spacing

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

Line Height

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

Missing Font

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

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 레이어가 아닌 곳을 터치한다.

iOS Background Blur Layer

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

기본 효과
  • Extra Light

  • Light

  • Dark

Material 효과 (웹 및 iOS 13 이상에서만 활성화 되며, Light와 Dark모드를 각각 지원합니다.)
  • Ultra Thin Material

  • Thin Material

  • Material

  • Thick Material

  • Chrome Material

Constraints

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

  • 왼쪽 영역은 layer의 위치를 정의합니다. 상/하/좌/우 네 면에 대하여 고정 간격을 설정 할 수 있습니다. 즉 부모 layer의 네 면중 원하는 방향으로 layer의 위치를 고정 시킬 수 있습니다.

  • 오른쪽 영역은 layer의 크기를 정의합니다. Fixed Width/Height 를 끄면 margin값과 부모 container의 크기에 비례하여 늘어나거나 줄어들게 됩니다. Fixed 설정을 켤 경우에는 부모의 크기와 관계 없이 크기를 고정합니다

Pin to top right corner

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

Center position

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

Fixed spacing

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