MenuToggle Menu

프로토타입 관리 및 테스트하기

ProtoPie Studio에서 프로토타입을 제작한 다음, ProtoPie Connect를 사용해 스마트 기기 또는 데스크톱 브라우저에서 테스트를 할 수 있습니다. 다음 페이지에서 ProtoPie Connect를 다운로드 하십시오.

ProtoPie Connect에서 프로토타입 테스트하기

ProtoPie Connect에서 프로토타입을 테스트하려면 다음 두 단계를 거쳐야 합니다.

  • 1단계: ProtoPie Connect에 프로토타입 로드하기
  • 2단계: 로드한 프로토타입 테스트하기

1. 프로토타입 로드하기

먼저 ProtoPie Connect에 프로토타입을 로드해야 합니다. ProtoPie Connect에서는 하나 또는 여러 개의 Pie 파일을 동시에 실행할 수 있습니다.

  • 프로토타입을 추가하려면 + New 버튼을 클릭한 뒤 추가할 프로토타입을 선택합니다. 또는 프로토타입을 ProtoPie Connect 인터페이스에 드래그해 추가할 수 있습니다.
  • 목록에서 프로토타입을 제거하려면 Pie 파일을 선택한 뒤 휴지통 아이콘을 클릭합니다.
  • 프로토타입을 교체하려면 프로토타입에 커서를 올리고 양방향 화살표 아이콘을 클릭합니다.

새 pie 파일을 추가하면 새 pieId가 생성됩니다. pie 파일을 교체하면 이전 프로토타입의 동일한 pieId를 다시 사용합니다.

ProtoPie Connect에 이미 로드한 프로토타입이 ProtoPie Studio에서 변경되는 경우, 변경 사항은 자동으로 반영됩니다.

[object Object]

2. 프로토타입 테스트하기

ProtoPie Connect를 사용해 프로토타입을 테스트하는 방법은 세 가지입니다.

ProtoPie Connect 및 ProtoPie Player로 프로토타입 테스트하기

ProtoPie Player는 ProtoPie Studio뿐만 아니라 ProtoPie Connect와도 호환되는 무료 컴패니언 앱입니다. ProtoPie Connect에 추가된 모든 프로토타입을 iOS, iPadOS, Android 기기에서 보고, 경험하고, 테스트할 수 있습니다.

ProtoPie Player와 ProtoPie Connect를 연결하는 방법은 세 가지입니다.

  1. QR 코드 스캔하기
  2. IP 주소 입력하기
  3. USB 케이블 사용하기

ProtoPie Player 앱에 대해 자세히 알아보세요.

QR 코드 스캔하기

  1. 컴퓨터 및 스마트 기기가 같은 WiFi 네트워크에 연결되어 있는지 확인합니다.
  2. ProtoPie Connect에서 열고자 하는 프로토타입의 QR 코드 아이콘을 클릭합니다.
  3. ProtoPie Player에서 Scan QR Code 버튼을 탭합니다.
  4. QR 코드를 스캔해 Player에서 프로토타입을 실행합니다.
[object Object]

IP 주소 입력하기

  1. 컴퓨터 및 스마트 기기가 동일한 WiFi 네트워크에 연결되어 있는지 확인합니다.
  2. ProtoPie Player의 드롭다운 메뉴에서 Type IP Address를 탭합니다.
  3. ProtoPie Connect에 표시되는 IP 주소를 입력합니다.
  4. Connect 버튼을 탭해 스마트 기기에서 프로토타입을 실행합니다.
[object Object]

ProtoPie Connect 및 ProtoPie Player for Wear OS로 프로토타입 테스트하기

ProtoPie Player for Wear OS는 일반 ProtoPie Player 앱과는 달리, Enterprise 플랜에서 제공되며 ProtoPie Connect와 함께 사용해야 합니다. 두 앱 모두 ProtoPie Smartwatch Solution의 일부입니다.

  1. ProtoPie Player for Wear OS 및 ProtoPie Connect가 동일한 인터넷 네트워크에 연결되어 있는지 확인합니다.
  2. ProtoPie Player for Wear OS와 ProtoPie Connect를 엽니다. 두 앱은 서로 자동으로 인식합니다.
  3. ProtoPie Player for Wear OS에서 Tap to connect를 클릭해 ProtoPie Connect와 페어링합니다.
  4. 스마트워치 프로토타입을 ProtoPie Connect에 추가합니다.
  5. ProtoPie Connect 인터페이스 상단의 Run 버튼을 클릭해 Player for Wear OS에서 프로토타입을 엽니다.
  6. 프로토타입을 재시작하거나 종료하려면 스마트워치 화면을 두 번 탭합니다.

웹 브라우저에서 ProtoPie Connect로 프로토타입 테스트하기

이 작업은 주요 브라우저들에서 사용 가능합니다. 데스크톱 웹브라우저에서 ProtoPie Connect를 통해 프로토타입을 여는 방법은 두 가지입니다.

  • ProtoPie Connect가 실행 중인 동일한 장치에서 열기
  • 서로 다른 장치에서 열기

동일한 장치에서 열기

  1. 열고자 하는 프로토타입의 웹 브라우저 아이콘을 클릭합니다.
  2. 브라우저에서 URL의 형식은 다음과 같습니다: http://localhost:9981
[object Object]

서로 다른 장치에서 열기

  1. ProtoPie Connect가 실행되는 장치와 두 번째 장치가 동일한 WiFi 네트워크에 연결되어 있는지 확인합니다.
  2. 다른 장치에서 웹 브라우저를 엽니다.
  3. ProtoPie Connect IP 주소를 입력합니다. ProtoPie Connect 인터페이스가 표시됩니다.
  4. 열고자 하는 프로토타입의 웹 브라우저 아이콘을 클릭합니다.
  5. 브라우저에서 URL 형식은 다음과 같습니다: http://protopie.connect.ip.address:9981/

동일한 브라우저 탭에서 여러 개의 프로토타입 열기

  1. New button을 클릭하고 Group을 선택합니다.
  2. 새로운 멀티뷰(Multiview) 그룹에 프로토타입을 드래그 앤 드롭합니다.
  3. 멀티뷰 아이콘을 클릭해 단일 브라우저 내에서 여러 개의 프로토타입을 함께 엽니다.
[object Object]

화면을 우클릭해 컨트롤 메뉴를 엽니다. 설정(Settings)을 클릭해 배경색을 커스터마이징하고, 프로토타입의 크기를 변경 및 재정렬할 수 있습니다.

[object Object]

뷰 옵션 커스터마이징하기

ProtoPie Cloud를 사용하면 URL 매개 변수를 사용해 웹 브라우저에 프로토타입이 표시되는 방식을 커스터마이징할 수 있습니다.

  • 이러한 매개 변수가 있는 URL의 형식은 다음과 같습니다. http://localhost:9981/pie?pieid= [ number]&name=[pie name]…
  • URL에서 매개 변수를 구분하는 데는 '&' 기호를 사용합니다.
  • 서로 다른 장치에서 브라우저를 사용하는 경우 localhost를 ProtoPie Connect에 표시되는 IP 주소로 변경합니다. 예를 들어 http://192.168.123.101:9981/pie?pieid=23.

pieid: Pie ID

  • Values: number
  • Default Value: (required)
  • Example: http://localhost:9981/pie?pieid=1

fullscreen: 전체 화면 설정 버튼 표시 여부

  • Values: true | false
  • Default Value: false
  • Example: http://localhost:9981/pie?pieid=1&fullscreen=true

bg: 배경색

  • Values:
    - CSS color, e.g., red, black, transparent
    - HEX, e.g., #ffffff
    - rgb, e.g., rgb(255,255,0)
    - rgba, e.g., rgba(200,100,20,0.4)
  • Default Value: transparent
  • Example: http://localhost:9981/pie?pieid=1&bg=#000000

hotspotHints: 핫스팟 힌트 표시 여부

  • Values: true | false
  • Default Value: Default set in ProtoPie Connect
  • Example: http://localhost:9981/pie?pieid=1&hotspotHints=true

cursorHide: 커서 숨김 여부

  • Values: true | false
  • Default Value: false
  • Example: http://localhost:9981/pie?pieid=1&cursorHide=true

scaleToFit: 화면에 맞게 프로토타입 크기 조정 여부

  • Values: true | false
  • Default Value: true
  • Example: http://localhost:9981/pie?pieid=1&scaleToFit=false

매개 변수가 있는 URL의 예:

  • 전체 화면 모드로 표시, 배경색을 rgba(0,0,255,0.8)로 변경, 핫스팟 힌트 표시, 프로토타입 크기를 화면에 맞추지 않음
    • http://localhost:9981/pie?pieid=1&fullscreen=true&bg=rgba(0,0,255,0.8)&touchHint=true&scaleToFit=false
  • 배경색을 흰색으로 변경, 핫스팟 힌트 표시, 프로토타입 크기를 화면에 맞춤
    • http://localhost:9981/pie?pieid=1&bg=white&touchHint=true&scaleToFit=true
  • 배경색을 노란색으로 변경, 커서 숨김
    • http://localhost:9981/pie?pieid=1&bg=yellow&cursorHide=true

ProtoPie Connect에서 디버깅 메시지 사용하기

모든 연결된 프로토타입, 커스텀 플러그인, 하드웨어 장치와 주고받은 모든 메시지를 ProtoPie Connect 인터페이스 우측에서 볼 수 있습니다. 디버깅 용도로 대시보드에서 메시지를 전송해 본 뒤 프로토타입에서 올바르게 수신했는지 확인할 수 있습니다.

[object Object]
Back To Top