MenuToggle Menu

Managing & Using Prototypes

ProtoPie로 프로토타입을 제작한 후, ProtoPie Connect를 사용해 스마트 기기 및 데스크탑 브라우저에서 테스트하실 수 있습니다.

Managing Prototypes in ProtoPie Connect

ProtoPie Connect로 프로토타입을 관리하거나 실행시킬 수 있습니다. 이를 위해서는 먼저 프로토타입을 ProtoPie Connect 앱에 추가해야 합니다.

  • 프로토타입을 추가하려면, + New 버튼을 클릭한 후 원하는 프로토타입을 선택합니다. 해당 파일을 ProtoPie Connect로 드래그하여 추가할 수도 있습니다.
  • 리스트에서 프로토타입을 제거하려면, 파일을 선택한 후 휴지통 아이콘을 클릭하십시오. 우측 상단 메뉴에서 Remove All을 클릭하면 모든 파일을 한번에 제거할 수 있습니다.
  • 프로토타입을 교체하려면, 해당 파일에 커서를 놓고 화살표 아이콘을 클릭합니다.

프로토타입에 변경 사항이 있을 경우, ProtoPie Connect에서 최신 버전의 파일로 자동 반영됩니다.

[object Object]

Using Prototypes Added to ProtoPie Connect

ProtoPie Connect에 추가된 프로토타입을 실행하는 여러 방법이 있습니다.

Connecting ProtoPie Player to ProtoPie Connect

ProtoPie Player은 ProtoPie Studio 뿐만 아니라 ProtoPie Connect와도 호환되는 앱입니다. ProtoPie Connect에 추가된 프로토타입을 iOS, iPadOS, Android 환경에서 실행할 수 있습니다.

다음의 방법으로 ProtoPie Player와 ProtoPie Connect를 연결시킬 수 있습니다.

  • QR 코드 스캔
  • IP 주소 입력
  • USB 케이블 사용

ProtoPie Player와 관련한 자세한 사항은 다음 페이지를 참고해주시기 바랍니다.

Scanning the QR Code

컴퓨터와 스마트 기기가 동일한 WiFi 네트워크에 연결되어 있는지 확인합니다.

  1. 원하는 프로토타입의 Device 아이콘을 클릭합니다.
  2. ProtoPie Player에서 Scan QR Code 버튼을 클릭합니다.
  3. QR 코드를 스캔합니다.
  4. ProtoPie Connect에서 Run 버튼을 클릭하면, 스마트 기기에서 프로토타입이 실행됩니다.
[object Object]

Entering the IP Address

컴퓨터와 스마트 기기가 동일한 WiFi 네트워크에 연결되어 있는지 확인합니다.

  1. ProtoPie Player의 메뉴에서 Type IP Address를 클릭합니다.
  2. ProtoPie Connect에 표시된 IP 주소를 입력합니다.
  3. ProtoPie Connect에서 Run 버튼을 클릭하면, 스마트 기기에서 프로토타입이 실행됩니다.
[object Object]

In the Browser

다양한 브라우저에서 프로토타입을 실행할 수 있습니다. 다음 두 가지 방법으로 프로토타입을 실행하십시오.

  • ProtoPie Connect가 설치된 동일 기기 내 브라우저
  • 태블릿이나 외부 컴퓨터 등 다른 기기 내 브라우저

On the Same Machine

  1. 실행하려는 프로토타입의 Web Browser 아이콘을 클릭합니다.
  2. 브라우저 내 URL은 다음의 형식을 갖습니다: http://localhost:9981/
[object Object]

On a Different Machine

  1. 컴퓨터와 기기가 동일한 WiFi 네트워크에 연결되어 있는지 확인합니다.
  2. 기기에서 브라우저를 엽니다.
  3. ProtoPie Connect의 IP 주소를 입력하면, ProtoPie Connect의 인터페이스가 나타납니다.
  4. 실행하려는 프로토타입의 Web Browser 아이콘을 클릭합니다.
  5. 브라우저 내 URL은 다음의 형식을 갖습니다: http://protopie.connect.ip.address:9981/
[object Object]

Opening All Prototypes

업로드한 모든 프로토타입을 브라우저에서 한번에 실행시킬 수 있습니다. 우측 상단 메뉴에서 View All을 클릭하면 모든 파일이 로딩되는 것을 확인할 수 있습니다.

[object Object]

프로토타입이 실행된 브라우저의 우측 상단 메뉴에서, 배경색을 변경하거나 프로토타입의 위치 및 크기를 조절할 수 있습니다.

[object Object]

Managing Display Options

ProtoPie Cloud의 디스플레이 옵션과 마찬가지로, URL 매개 변수를 사용하면 프로토타입을 브라우저에서 열 때의 옵션을 설정할 수 있습니다.

  • URL 매개변수는 다음의 형식을 갖습니다: http://localhost:9981/pie?pieid=1&param1=value1&param2=value2&...
  • pieid는 실행할 프로토타입을 표시하는 필수 매개변수입니다.
  • 매개변수와 &을 연결합니다.
  • 다른 기기에서 브라우저를 사용하는 경우, 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=black&touchHint=true&scaleToFit=true
  • 배경색은 노랑으로 설정/ 커서 숨김
    • http://localhost:9981/pie?pieid=1&bg=yellow&cursorHide=true
Back To Top