레이어

ProtoPie를 사용하면 직사각형, 타원, 별, 다각형과 같은 도형뿐만 아니라 이미지, 비디오, Lottie 애니메이션과 같은 미디어를 위한 레이어를 사용할 수 있습니다.

레이어 속성

위치

레이어의 x 및 y 좌표입니다.

크기

레이어의 너비와 높이입니다.

회전

레이어 회전의 각도입니다.

기준점

레이어의 크기, 위치 또는 회전 변화의 기준이 되는 참조 지점입니다.

개수

별 또는 다각형 레이어의 꼭짓점 개수를 설정합니다.

비율

별 레이어의 안쪽 꼭짓점과 중심 사이의 거리를 백분율로 조절합니다.

반경

직사각형 레이어의 네 모서리 또는 각 모서리의 곡률입니다. 각 모서리의 반경을 설정하려면 모서리 아이콘을 클릭하고 각각의 반경 값을 입력하세요.

불투명도

레이어의 투명도를 조절합니다. 불투명도가 0%로 설정되면 레이어가 보이지 않게 되며, 해당 레이어에 할당된 모든 트리거가 비활성화됩니다.

채우기 — 단색

Hex 색상 코드를 사용하여 단색으로 채웁니다. 색상의 채우기 투명도가 0%로 설정되어 있더라도 이 레이어에 할당된 트리거는 계속 작동합니다.

채우기 — 이미지

채우기에 사용할 이미지를 선택합니다. 채우기 유형에는 채우기(fill), 늘리기(stretch), 맞춤(fit)의 세 가지가 있습니다.

테두리

레이어의 시각적 테두리선입니다. 테두리 유형에는 내부, 중앙, 외부의 세 가지가 있습니다.

그림자

레이어에 깊이감과 입체감을 더해주는 드롭 섀도 효과입니다.

터치 영역

실제 레이어 크기보다 더 크게 설정할 수 있는 레이어의 터치 영역입니다.

하위 레이어 처치 가능하게 만들기

레이어 아래에 있는 다른 레이어들을 터치할 수 있도록 만듭니다.

마스크로 사용

도형 레이어에만 해당됩니다. 도형 레이어 바깥쪽에 있는 레이어의 일부 영역을 숨기는 옵션입니다.

위치

레이어의 x 및 y 좌표입니다.

크기

레이어의 너비와 높이입니다.

회전

레이어 회전의 각도입니다.

기준점

레이어의 크기, 위치 또는 회전 변화의 기준이 되는 참조 지점입니다.

개수

별 또는 다각형 레이어의 꼭짓점 개수를 설정합니다.

비율

별 레이어의 안쪽 꼭짓점과 중심 사이의 거리를 백분율로 조절합니다.

반경

직사각형 레이어의 네 모서리 또는 각 모서리의 곡률입니다. 각 모서리의 반경을 설정하려면 모서리 아이콘을 클릭하고 각각의 반경 값을 입력하세요.

불투명도

레이어의 투명도를 조절합니다. 불투명도가 0%로 설정되면 레이어가 보이지 않게 되며, 해당 레이어에 할당된 모든 트리거가 비활성화됩니다.

채우기 — 단색

Hex 색상 코드를 사용하여 단색으로 채웁니다. 색상의 채우기 투명도가 0%로 설정되어 있더라도 이 레이어에 할당된 트리거는 계속 작동합니다.

채우기 — 이미지

채우기에 사용할 이미지를 선택합니다. 채우기 유형에는 채우기(fill), 늘리기(stretch), 맞춤(fit)의 세 가지가 있습니다.

테두리

레이어의 시각적 테두리선입니다. 테두리 유형에는 내부, 중앙, 외부의 세 가지가 있습니다.

그림자

레이어에 깊이감과 입체감을 더해주는 드롭 섀도 효과입니다.

터치 영역

실제 레이어 크기보다 더 크게 설정할 수 있는 레이어의 터치 영역입니다.

하위 레이어 처치 가능하게 만들기

레이어 아래에 있는 다른 레이어들을 터치할 수 있도록 만듭니다.

마스크로 사용

도형 레이어에만 해당됩니다. 도형 레이어 바깥쪽에 있는 레이어의 일부 영역을 숨기는 옵션입니다.

이미지 레이어

이미지 레이어를 사용하여 프로토타입 내에서 이미지를 원활하게 통합하고 세부 조정할 수 있습니다. ProtoPie는 PNG, JPG, JPEG, BMP, GIF, SVG, WebP 이미지 형식을 지원합니다.

이미지 레이어를 추가하는 방법

프로젝트에 이미지 레이어를 추가하는 방법에는 두 가지가 있습니다. 첫 번째 방법은 이미지를 씬(Scene) 위로 드래그 앤 드롭하는 것입니다. 두 번째 방법은 이미지 레이어를 생성하고 채우기(Fill) 속성을 설정하여 이미지를 선택하는 것입니다. 이미지의 원래 비율을 유지하려면 속성 패널에서 '원본 비율 적용' 옵션을 클릭합니다.

요금제에 따라 로컬 파일에서 이미지를 가져오거나, Enterprise 사용자의 경우 자체 호스팅 URL에서 이미지를 가져올 수 있습니다.

채우기

배경 채우기로 사용할 이미지를 선택합니다.

이미지가 표시되는 방식을 제어하려면 채우기, 늘이기, 맞춤 중에서 선택하세요.

테두리

이미지 레이어에 테두리를 적용합니다.

이미지를 기준으로 테두리의 위치를 결정하려면 안쪽, 가운데, 바깥쪽 중에서 선택하세요.

그림자

이미지 레이어에 그림자를 추가하여 깊이와 차원을 더합니다.

채우기

배경 채우기로 사용할 이미지를 선택합니다.

이미지가 표시되는 방식을 제어하려면 채우기, 늘이기, 맞춤 중에서 선택하세요.

테두리

이미지 레이어에 테두리를 적용합니다.

이미지를 기준으로 테두리의 위치를 결정하려면 안쪽, 가운데, 바깥쪽 중에서 선택하세요.

그림자

이미지 레이어에 그림자를 추가하여 깊이와 차원을 더합니다.

속성 패널에서 불투명도, 반경, 채우기 등 다양한 요소를 직접 미세 조정하여 원하는 시각 효과를 얻을 수 있습니다.

SVG 레이어

ProtoPie에서는 SVG(Scalable Vector Graphics)를 가져온 다음, '편집 가능하게 만들기(Make Editable)' 옵션을 사용하여 화질 저하 없이 도형으로 변환하여 속성을 편집할 수 있습니다.

• ProtoPie에서 완전히 지원하지 않는 SVG 파일의 경우, '편집 가능하게 만들기' 버튼을 누르면 레이어 모양이 변경될 수 있습니다.

• 그라데이션 색상 및 다중 색상 채우기는 현재 지원되지 않습니다.

• Sketch, Figma, Adobe XD 또는 Zeplin에서 SVG 코드를 복사하여 ProtoPie에 직접 붙여넣을 수 있습니다.

Figma용 ProtoPie 플러그인을 사용하여 벡터 레이어를 SVG로 가져옵니다.

비디오 레이어

씬 위로 드래그 앤 드롭하여 동영상을 추가하거나, 동영상 레이어를 생성하고 연동할 동영상을 선택할 수 있습니다. 동영상의 원래 비율을 유지하려면 속성 패널에서 '원본 비율 적용' 옵션을 클릭하면 됩니다.

요금제에 따라 로컬 파일에서 동영상을 가져오거나, Enterprise 사용자의 경우 자체 호스팅 URL에서 동영상을 가져올 수 있습니다.

소스

기기에서 비디오를 선택하거나 자체 호스팅 URL에서 비디오를 가져옵니다.

터치 영역

설정하면 레이어의 터치 영역이 가시적 범위를 벗어나 확장됩니다.

음량

비디오 레이어의 음량 속성을 조정합니다.

자동 재생

프로토타입을 실행할 때 비디오가 자동으로 재생되도록 합니다.

반복 재생

비디오가 루프로 재생되도록 합니다.

소스

기기에서 비디오를 선택하거나 자체 호스팅 URL에서 비디오를 가져옵니다.

터치 영역

설정하면 레이어의 터치 영역이 가시적 범위를 벗어나 확장됩니다.

음량

비디오 레이어의 음량 속성을 조정합니다.

자동 재생

프로토타입을 실행할 때 비디오가 자동으로 재생되도록 합니다.

반복 재생

비디오가 루프로 재생되도록 합니다.

ProtoPie는 최대 100MB 크기의 MP4(H.264), WebM 및 MOV 비디오 파일을 지원합니다. 그러나 비디오 파일을 ProtoPie Studio로 가져오기 전에 모바일 기기의 ProtoPie Player에서 원활하게 테스트할 수 있도록 비디오가 다음 세부 기준을 충족하는지 확인하는 것이 중요합니다.

iOS의 경우:

• 지원되는 포맷으로는 MP4 (H.264) 및 MOV가 있습니다.

  • H.265/H.264 비디오로 인코딩된 M4V, MP4, MOV 파일 포맷으로, 최대 4K/60 fps, High Profile 레벨 4.2 및 최대 160 Kbps, 48kHz, 스테레오 오디오의 AAC-LC 오디오 사양입니다.

  • MPEG-4 비디오로 인코딩된 M4V, MP4, MOV 파일 포맷으로, 최대 2.5 Mbps, 480p/30 fps, Simple Profile 및 최대 160 Kbps, 48kHz, 스테레오 오디오의 AAC-LC 오디오 사양입니다.

  • Motion JPEG(M-JPEG)으로 인코딩된 AVI 파일 포맷으로, 최대 35 Mbps, 1280 x 720 픽셀, 초당 30프레임, ulaw 오디오, PCM 스테레오 오디오 사양입니다.

  
  

• 참고 문서:

  • Apple AVFoundation AVFileType 문서

  • Apple AVFoundation AVVideoCodecType 문서

Android의 경우:

• 지원되는 포맷으로는 MP4 (H.264) 및 WebM이 있습니다.

• 참고 문서:

  • Android 지원 미디어 포맷

배경이 투명한 비디오

ProtoPie는 투명 배경 비디오를 지원함으로써 프로토타입의 성능을 향상시키는 동시에 3D를 향한 선구적인 발걸음을 내딛고 있습니다.

ProtoPie Studio 씬에 비디오를 가져오기 전에, 미리보기 창, ProtoPie Player 또는 ProtoPie Cloud 등 지정된 플랫폼 내에서 최적의 성능을 보장할 수 있도록 비디오 코덱과 포맷이 아래 기준을 충족하는지 확인하세요.

투명 배경 비디오는 다음과 같은 조건에서 가장 원활하게 작동합니다.

• 웹의 경우: Chrome은 알파 채널이 포함된 VP9(.webm)를 지원하고, Safari는 알파 채널이 포함된 HEVC(.mov, *.mp4)를 지원합니다.

• iOS의 경우: 알파 채널이 포함된 HEVC를 사용하는 것을 권장합니다. iOS에서 부적합한 코덱/포맷을 사용할 경우, 지정된 영역 내에서 콘텐츠가 제대로 표시되지 않을 수 있습니다.

• Android의 경우: Android는 알파 채널이 포함된 비디오 파일을 기본적으로 지원하지 않습니다.

Lottie 레이어

Lottie 미디어 레이어는 Bodymovin으로 내보낸 후 파싱된 Adobe After Effects 애니메이션이 포함된 JSON 파일을 로드합니다. LottieFiles에 대해 자세히 알아보세요.

씬 위로 드래그 앤 드롭하여 Lottie 파일을 추가하거나, Lottie 레이어를 생성하고 연동할 Lottie 파일을 선택할 수 있습니다. Lottie 파일의 원래 비율을 유지하려면 속성 패널에서 '원본 비율 적용' 옵션을 클릭하면 됩니다.

요금제에 따라 로컬 파일에서 Lottie 파일을 가져오거나, Enterprise 사용자의 경우 자체 호스팅 URL에서 Lottie 파일을 가져올 수 있습니다.

소스

기기에서 Lottie 파일을 선택하거나 자체 호스팅된 URL에서 가져옵니다

터치 영역

활성화되면 레이어의 터치 영역이 표시되는 범위를 넘어 확장됩니다

자동 재생

프로토타입을 실행할 때 Lottie JSON 파일이 자동으로 재생되도록 설정합니다

루프

Lottie JSON 파일이 반복 재생되도록 설정합니다

소스

기기에서 Lottie 파일을 선택하거나 자체 호스팅된 URL에서 가져옵니다

터치 영역

활성화되면 레이어의 터치 영역이 표시되는 범위를 넘어 확장됩니다

자동 재생

프로토타입을 실행할 때 Lottie JSON 파일이 자동으로 재생되도록 설정합니다

루프

Lottie JSON 파일이 반복 재생되도록 설정합니다

오디오 레이어

ProtoPie는 WAV, MP3, M4A 오디오 파일을 지원합니다.

볼륨

오디오 레이어의 볼륨 속성을 조절합니다

자동 재생

프로토타입이 실행될 때 오디오 파일이 자동으로 재생되도록 합니다

루프

오디오 파일이 반복해서 재생되도록 합니다

볼륨

오디오 레이어의 볼륨 속성을 조절합니다

자동 재생

프로토타입이 실행될 때 오디오 파일이 자동으로 재생되도록 합니다

루프

오디오 파일이 반복해서 재생되도록 합니다

카메라 레이어

스마트 기기의 기본 카메라 출력을 프로토타입의 레이어로 사용할 수 있으며, QR 코드 및 바코드를 스캔할 수도 있습니다. 이 기능은 ProtoPie Player를 사용하여 프로토타입을 테스트할 때만 작동합니다. 미리보기 창이나 웹 브라우저에서 프로토타입을 실행하면 대신 플레이스홀더 이미지가 표시됩니다.

자동 시작

씬이 시작될 때 카메라가 자동으로 시작되도록 합니다.

카메라 [전면]

전면 카메라를 사용합니다.

카메라 [후면]

후면 카메라를 사용합니다.

QR 및 바코드 스캐너

프로토타입 내에서 QR 및 바코드 스캔을 활성화합니다. 지원되는 형식에는 QR 코드와 CODE39, CODE128, EAN13_UPCA, EAN8, UPCE와 같은 바코드 하위 유형이 포함됩니다.

즉시 URL 열기

QR 코드를 스캔하여 웹 브라우저에서 링크를 엽니다. 바코드를 스캔하려면 계속 추적 옵션을 활용하세요.

계속 추적

QR 및 바코드에 저장된 값을 모니터링합니다.

자동 시작

씬이 시작될 때 카메라가 자동으로 시작되도록 합니다.

카메라 [전면]

전면 카메라를 사용합니다.

카메라 [후면]

후면 카메라를 사용합니다.

QR 및 바코드 스캐너

프로토타입 내에서 QR 및 바코드 스캔을 활성화합니다. 지원되는 형식에는 QR 코드와 CODE39, CODE128, EAN13_UPCA, EAN8, UPCE와 같은 바코드 하위 유형이 포함됩니다.

즉시 URL 열기

QR 코드를 스캔하여 웹 브라우저에서 링크를 엽니다. 바코드를 스캔하려면 계속 추적 옵션을 활용하세요.

계속 추적

QR 및 바코드에 저장된 값을 모니터링합니다.

텍스트 레이어

텍스트 레이어는 화면에 텍스트를 표시하는 레이어입니다.

글꼴

컴퓨터에 설치된 모든 글꼴을 선택할 수 있습니다. 시스템 기본 글꼴을 선택하면 프로토타입에서 디바이스의 기본 글꼴이 사용됩니다.

두께

글꼴의 두께를 조정할 수 있습니다.

크기

글꼴 크기를 조정할 수 있습니다.

정렬

가로 및 세로 정렬을 모두 조정할 수 있습니다.

텍스트 크기 조정

텍스트 레이어는 너비나 높이에 따라 자동으로 크기가 조정되거나 고정된 크기일 수 있습니다.

자간

글자 사이의 간격을 조정할 수 있습니다.

행간

줄 사이의 간격을 조정할 수 있습니다.

글꼴

컴퓨터에 설치된 모든 글꼴을 선택할 수 있습니다. 시스템 기본 글꼴을 선택하면 프로토타입에서 디바이스의 기본 글꼴이 사용됩니다.

두께

글꼴의 두께를 조정할 수 있습니다.

크기

글꼴 크기를 조정할 수 있습니다.

정렬

가로 및 세로 정렬을 모두 조정할 수 있습니다.

텍스트 크기 조정

텍스트 레이어는 너비나 높이에 따라 자동으로 크기가 조정되거나 고정된 크기일 수 있습니다.

자간

글자 사이의 간격을 조정할 수 있습니다.

행간

줄 사이의 간격을 조정할 수 있습니다.

누락된 폰트

폰트가 누락된 경우, 누락된 폰트 경고가 표시됩니다. 누락된 폰트를 대체할 대체 폰트를 선택하십시오.

텍스트 레이어에 사용자 지정 폰트 적용하기

Enterprise 요금제에서만 사용 가능합니다.

에디터는 다음의 간단한 단계를 수행하여 ProtoPie Studio의 텍스트 레이어에 사용자 지정 폰트를 쉽게 적용할 수 있습니다.

1. 편집 가능한 텍스트 레이어를 선택합니다.

2. 텍스트 레이어의 속성 패널에 있는 폰트(Font) 메뉴로 들어갑니다.

3. 폰트 목록을 검토하고 “Custom” 카테고리 내에서 사용 가능한 사용자 지정 폰트 중 하나를 선택합니다. 이 목록에는 엔터프라이즈 팀 및/또는 조직 내에서 액세스 권한이 있는 사용자 지정 폰트만 전용으로 표시됩니다.

4. 선택한 텍스트 레이어가 이제 선택한 사용자 지정 폰트로 표시됩니다.

참고: 팀 소유자(team owner), 팀 관리자(team admins) 및 서비스 관리자(service admins)만 사용자 지정 폰트를 업로드할 수 있습니다.

동일한 폰트를 사용하는 모든 텍스트 레이어에 사용자 지정 폰트 일괄 적용하기

Enterprise 요금제에서만 사용 가능합니다.

에디터는 다음 단계를 수행하여 프로토타입 내의 모든 씬에서 동일한 폰트를 공유하는 모든 텍스트 레이어에 사용자 지정 폰트를 손쉽게 일괄 적용할 수 있습니다.

1. 상단 내비게이션 메뉴에서 "Edit"을 클릭합니다.

2. 옵션 중에서 "Replace Fonts"를 선택합니다.

3. Replace Fonts 모달 웹 페이지에서 사용자 지정 폰트로 교체하고자 하는 폰트들을 선택합니다.

4. “Replace” 버튼을 클릭합니다.

5. 선택한 폰트들이 프로토타입 전체에서 선택한 사용자 지정 폰트로 교체됩니다.

입력 레이어

입력 레이어는 스마트 디바이스의 기본 키보드나 물리 키보드를 통해 연동하여 한 줄 또는 여러 줄의 텍스트를 입력하는 데 사용됩니다.

1. 텍스트

입력 레이어에 미리 입력된 것처럼 표시되는 텍스트를 추가할 수 있습니다.

2. 플레이스홀더

입력 레이어에 플레이스홀더를 적용할 수 있습니다. 플레이스홀더의 색상은 입력 레이어에 입력한 텍스트의 색상과 다르게 설정할 수 있습니다.

3. 키패드 유형

한 줄 입력 레이어의 경우 스마트 기기용으로 선택할 수 있는 다양한 키보드 유형이 있습니다:

• 텍스트

• URL

• 이메일

• 숫자

• 텍스트 비밀번호

• 숫자 비밀번호

4. 리턴 키

스마트 기기용 네이티브 키보드의 리턴 키를 다음 중 하나로 수정할 수 있습니다:

• 이동 (Go)

• 다음 (Next)

• 전송 (Send)

• 검색 (Search)

• 완료 (Done)

• 줄바꿈 (New Line, 여러 줄 입력만 가능)

5. 키보드 테마

iOS/iPadOS에서는 키보드 테마를 어둡게(Dark) 또는 밝게(Light)로 설정할 수 있습니다.

6. 포커스 아웃 옵션

입력 레이어에서 포커스를 해제하는 두 가지 옵션이 있습니다:

• 리턴 키 누르기

• 입력 레이어 외부 터치하기

1. 텍스트

입력 레이어에 미리 입력된 것처럼 표시되는 텍스트를 추가할 수 있습니다.

2. 플레이스홀더

입력 레이어에 플레이스홀더를 적용할 수 있습니다. 플레이스홀더의 색상은 입력 레이어에 입력한 텍스트의 색상과 다르게 설정할 수 있습니다.

3. 키패드 유형

한 줄 입력 레이어의 경우 스마트 기기용으로 선택할 수 있는 다양한 키보드 유형이 있습니다:

• 텍스트

• URL

• 이메일

• 숫자

• 텍스트 비밀번호

• 숫자 비밀번호

4. 리턴 키

스마트 기기용 네이티브 키보드의 리턴 키를 다음 중 하나로 수정할 수 있습니다:

• 이동 (Go)

• 다음 (Next)

• 전송 (Send)

• 검색 (Search)

• 완료 (Done)

• 줄바꿈 (New Line, 여러 줄 입력만 가능)

5. 키보드 테마

iOS/iPadOS에서는 키보드 테마를 어둡게(Dark) 또는 밝게(Light)로 설정할 수 있습니다.

6. 포커스 아웃 옵션

입력 레이어에서 포커스를 해제하는 두 가지 옵션이 있습니다:

• 리턴 키 누르기

• 입력 레이어 외부 터치하기

배경 흐림(Background Blur) 레이어

다음과 같은 흐림 효과가 지원됩니다: Android 및 iOS용의 기본 효과 3가지(Dark, Light 및 Extra Light)와 웹 및 iOS 13 이상을 위한 10가지 흐림 효과가 추가로 지원됩니다.

기본 효과

• 매우 밝게

• 밝게

• 어둡게

머티리얼 효과 (라이트 및 다크 테마)

• 울트라 씬 머티리얼

• 씬 머티리얼

• 머티리얼

• 틱 머티리얼

• 크롬 머티리얼

기본 효과

• 매우 밝게

• 밝게

• 어둡게

머티리얼 효과 (라이트 및 다크 테마)

• 울트라 씬 머티리얼

• 씬 머티리얼

• 머티리얼

• 틱 머티리얼

• 크롬 머티리얼

제약 조건 (Constraints)

레이어에 대한 제약 조건을 설정할 수 있습니다. 상위 레이어의 크기가 수동으로 조정되거나 반응(Response)을 통해 조정될 때 하위 레이어의 크기와 위치는 설정된 제약 조건에 따라 자동으로 조정됩니다.

1: Position Constraints (위치 제약 조건)

Left (왼쪽), Right (오른쪽), L+R (Left + Right, 좌우), Top (위), Bottom (아래), T+B (Top + Bottom, 상하), Center (가운데) 또는 Scale (비율)에 고정 간격을 설정하여 상위 레이어에 대한 레이어의 상대적 위치를 유지합니다.

2: Size Constraints (크기 제약 조건)

L+R, T+B 및 Scale만 상위 레이어 크기 변화에 비례하여 레이어 크기를 조정하고, 다른 제약 조건은 크기에 영향을 주지 않고 위치를 유지합니다.

1: Position Constraints (위치 제약 조건)

Left (왼쪽), Right (오른쪽), L+R (Left + Right, 좌우), Top (위), Bottom (아래), T+B (Top + Bottom, 상하), Center (가운데) 또는 Scale (비율)에 고정 간격을 설정하여 상위 레이어에 대한 레이어의 상대적 위치를 유지합니다.

2: Size Constraints (크기 제약 조건)

L+R, T+B 및 Scale만 상위 레이어 크기 변화에 비례하여 레이어 크기를 조정하고, 다른 제약 조건은 크기에 영향을 주지 않고 위치를 유지합니다.

우측 상단 모서리에 고정

오른쪽(Right) 및 위쪽(Top) 제약 조건을 설정하면, 회색 레이어는 상위 레이어의 오른쪽 및 위쪽 가장자리를 기준으로 해당 위치를 유지합니다. 또한 상위 레이어의 크기가 조정되더라도 회색 레이어는 원래 크기를 유지합니다.

크기 조절 비율(Scale Spacing)

너비(width)와 높이(height) 모두에 대해 배율(Scale) 옵션을 설정하면, 상위 레이어 크기 변화에 비례하여 회색 레이어의 크기와 위치가 조정되어 상위 레이어와 동일한 배율을 유지하게 됩니다.

고정 간격(Fixed Spacing)

너비에서 L+R을 설정하고 높이에서 T+B를 설정하면, 상위 레이어의 너비가 변경될 때 회색 레이어는 좌우 간격을 원래대로 유지하면서 크기가 조정됩니다.

자주 묻는 질문(FAQ)