메뉴

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

ProtoPie Connect를 사용하면 다양한 스마트 기기 및 데스크톱 브라우저에서 프로토타입을 테스트할 수 있습니다. 다음과 같은 방법으로 ProtoPie Connect를 사용할 수 있습니다.

  • ProtoPie Connect 및 ProtoPie Player를 사용하여 프로토타입 테스트

  • ProtoPie Connect 및 Wear OS용 ProtoPie Player를 사용하여 프로토타입 테스트

  • 웹 브라우저에서 프로토타입 테스트

  • Stage View에서 프로토타입 테스트

여기에서 ProtoPie Connect를 다운로드하세요.

ProtoPie Connect에 프로토타입 추가하기

테스트하기 전에 다음의 간단한 단계를 따라 프로토타입을 ProtoPie Connect에 로드하세요.

  • + New 버튼을 클릭하고 추가하려는 프로토타입을 선택합니다. 또는 프로토타입을 ProtoPie Connect 인터페이스로 드래그 앤 드롭합니다.

  • 엔터프라이즈 사용자는 Cloud Pie를 선택하여 ProtoPie Cloud에서 프로토타입을 직접 열 수 있습니다. Cloud Pie의 최신 버전을 가져오려면 원형 화살표 아이콘(새로고침)을 클릭합니다.

  • Pie 파일을 선택하고 휴지통 아이콘을 클릭하여 레이아웃에서 프로토타입을 제거합니다.

  • 프로토타입을 교체하려면 마우스 커서를 프로토타입 위에 올려두고 양방향 화살표 아이콘을 클릭합니다.

  • 기술 참고 사항: 새로운 Pie 파일을 추가하면 새로운 pieid가 생성됩니다. Pie 파일을 교체하면 이전 프로토타입의 동일한 pieId가 재사용됩니다.


{'_type': 'localeString', 'en': 'managing prototypes'}

Pie를 그룹으로 정렬하기

Pie를 체계적이고 관리하기 쉽게 유지하기 위해 서로 그룹화할 수 있습니다. 새로운 Pie 그룹을 만들려면 그룹 아이콘을 클릭하세요. 그룹에 Pie를 추가하려면 해당 그룹으로 드래그 앤 드롭합니다. 이 작업을 수행하기 전에 그룹을 펼쳐야 합니다.

  • Pie를 한 그룹에서 다른 그룹으로 이동하려면 해당 그룹으로 드래그 앤 드롭합니다.

  • 최소 하나 이상의 Pie가 포함된 그룹만 펼치거나 접을 수 있습니다.

  • 최소 하나 이상의 Pie가 포함된 그룹만 선택하거나 선택 해제할 수.

  • 그룹 이름을 변경하려면 그룹 이름을 더블 클릭하고 새 이름을 입력합니다.

  • 그룹을 삭제하려면 마우스 커서를 그룹 위에 올려놓고 휴지통 아이콘을 클릭합니다.


{'_type': 'localeString', 'en': 'users can now group their pies in Protopie connect with the Group feature'}

ProtoPie Connect 및 ProtoPie Player를 사용하여 프로토타입 테스트하기

ProtoPie Player는 ProtoPie Studio 및 ProtoPie Connect를 위한 무료 동반 앱입니다. iOS, iPadOS 및 Android 기기에서 ProtoPie Connect에 추가된 모든 프로토타입을 확인하고, 경험하고, 테스트할 수 있습니다.

ProtoPie Player를 ProtoPie Connect에 연결하는 방법은 세 가지가 있습니다.

  1. QR 코드 스캔

  2. IP 주소 입력

  3. USB 케이블 사용

QR 코드를 스캔하여 ProtoPie Player를 ProtoPie Connect에 연결하기

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

  2. ProtoPie Connect에서 열려는 프로토타입의 Connect를 클릭합니다.

  3. 목록에서 QR Code를 선택합니다.

  4. ProtoPie Player에서 Scan QR Code 버튼을 누릅니다.

  5. QR 코드를 스캔하여 Player에서 프로토타입을 실행합니다.


{'_type': 'localeString', 'en': 'scan qr code player connect'}

IP 주소를 입력하여 ProtoPie Player를 ProtoPie Connect에 연결하기

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

  2. ProtoPie Player의 드롭다운 메뉴에서 Type IP Address를 누릅니다.

  3. ProtoPie Connect에 표시된 IP 주소를 입력합니다.

  4. Connect 버튼을 눌러 스마트 기기에서 프로토타입을 실행합니다.


{'_type': 'localeString', 'en': 'entering ip address connect'}

ProtoPie Connect 및 Wear OS용 ProtoPie Player를 사용하여 프로토타입 테스트하기

Wear OS용 ProtoPie Player는 일반 ProtoPie Player와 달리 Connect Enterprise와 호환되는 경우에만 작동합니다.

  1. Wear OS용 ProtoPie Player와 ProtoPie Connect가 모두 동일한 인터넷 네트워크에 연결되어 있는지 확인합니다.

  2. 해당 앱들을 엽니다. Wear OS용 ProtoPie Player와 ProtoPie Connect가 서로를 자동으로 감지합니다.

  3. Wear OS용 ProtoPie Player에서 Tap to connect를 클릭하여 ProtoPie Connect와 페어링합니다.

  4. 스마트워치 프로토타입을 ProtoPie Connect에 추가합니다.

  5. ProtoPie Connect 인터페이스 상단의 Run 버튼을 클릭하여 Wear OS용 Player에서 프로토타입을 엽니다.

  6. 프로토타입을 다시 시작하거나 종료하려면 스마트워치 화면을 더블 탭합니다.

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

브라우저에서 프로토타입을 볼 때는 최적의 성능을 위해 Chromium 브라우저를 사용하는 것을 권장합니다. ProtoPie Connect에서 데스크톱 웹 브라우저로 프로토타입을 여는 방법은 두 가지가 있습니다.

  • ProtoPie Connect가 실행 중인 동일한 기기에서 수행

  • 다른 기기에서 수행

동일한 기기에서 프로토타입 테스트하기

  1. 열려는 프로토타입 옆의 Web Browser 아이콘을 클릭합니다.

  2. 브라우저에서 URL의 형식은 http://localhost:9981/가 됩니다.


{'_type': 'localeString', 'en': 'ProtoPie Connect IP address '}

다른 기기에서 프로토타입 테스트하기

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

  2. 다른 기기에서 웹 브라우저를 엽니다.

  3. 주소창에 ProtoPie Connect IP 주소를 입력합니다. ProtoPie Connect 인터페이스가 표시됩니다.

  4. 열려는 프로토타입 옆의 Web Browser 아이콘을 클릭합니다.

  5. 브라우저에서 URL의 형식은 http://protopie.connect.ip.address:9981/이 됩니다.

웹 브라우저에서 음성 프로토타이핑 기능 사용하기

ProtoPie Connect 1.8.0 버전부터는 iOS/Android용 ProtoPie Player 앱 및 ProtoPie Studio의 Preview 창에서와 동일하게 Web Player에서도 음성 프로토타이핑 기능이 지원됩니다. 현재 지원되는 기능은 다음과 같습니다.

호환 웹 브라우저

마이크 권한을 처리할 때 브라우저마다 다르게 작동합니다. Voice Command Trigger와 Listen Response를 사용하려면 사용자가 브라우저에 마이크 권한을 허용해야 합니다. 아래 스크린샷과 같이 프로토타입에서 마이크 활성화가 필요할 때 브라우저가 마이크 권한을 요청합니다. 마이크 접근을 허용하려면 '허용'을 클릭하십시오.


{'_type': 'localeString', 'en': 'Enabling microphone access'}

ProtoPie Connect Web Player의 음성 프로토타이핑 기능은 Google ChromeMicrosoft Edge와 같은 Chromium 브라우저에서 가장 잘 작동합니다. 음성 인터랙션을 올바르게 재생하려면 사용하는 브라우저와 프로토타입이 로드되는 방식에 따라 브라우저 측에서 일부 설정이 필요할 수 있습니다.

웹 브라우저 설정

웹 브라우저에서 프로토타입을 실행하는 방법은 두 가지가 있습니다.

  1. IP 주소 사용

  2. http://localhost:9981/ 사용

http://localhost:9981/에서 프로토타입을 재생하는 것은 별도의 설정이 필요하지 않으며 여러 브라우저에서 바로 작동합니다.

IP 주소(예: http://192.168.0.40:9981/)에서 프로토타입을 재생하려면 마이크 사용을 승인하기 위해 일회성 브라우저 설정이 필요하며, 이는 Google ChromeMicrosoft Edge에서 지원됩니다.

Chromium 브라우저는 사이트가 안전한 출처(예: https 또는 localhost)에서 제공될 때만 기기의 마이크 권한을 허용합니다.

ProtoPie Connect Web Player에서 마이크를 사용하려면 다음의 일회성 설정이 필요합니다.

  1. Chrome/Edge 브라우저에서 flags 주소로 이동합니다.

chrome://flags/#unsafely-treat-insecure-origin-as-secure

edge://flags/#unsafely-treat-insecure-origin-as-secure

  1. Insecure origins treated as secure 옵션을 Enable로 변경합니다.


{'_type': 'localeString', 'en': 'Adding the ProtoPie Connect server details.'}
  1. 포트 번호 9981이 포함된 ProtoPie Connect 서버 주소를 추가합니다.

참고: 서버 주소는 ProtoPie Connect의 왼쪽 아래 모서리에서 찾을 수 있습니다.


{'_type': 'localeString', 'en': 'ProtoPie Connect server address'}
  1. Chrome/Edge 브라우저를 재실행(다시 시작)합니다.


{'_type': 'localeString', 'en': 'Relaunch Google Chrome.'}

보기 옵션 사용자 정의하기

ProtoPie Cloud에서와 마찬가지로, URL 매개변수(parameter)를 사용하여 웹 브라우저에 프로토타입이 표시되는 방식을 맞춤 설정할 수 있습니다.

  • 이러한 매개변수가 포함된 URL은 http://localhost:9981/pie?pieid=[번호]&name=[pie 이름]… 과 같은 형식을 가집니다.

  • URL에서 매개변수를 구분하려면 "&" 기호를 사용하세요.

  • 다른 기기에서 브라우저를 사용하는 경우 localhost를 ProtoPie Connect에 표시된 IP 주소로 대체하세요. 예: http://192.168.123.101:9981/pie?pieid=23.

pieid: Pie ID

  • 값: 숫자

  • 기본값: (필수)

  • 예시: http://localhost:9981/pie?pieid=1

bg: 배경색

  • 값:

    - CSS 색상, 예: red, black, transparent

    - HEX, 예: #ffffff

    - rgb, 예: rgb(255,255,0)

    - rgba, 예: rgba(200,100,20,0.4)

  • 기본값: black

  • 예시: http://localhost:9981/pie?pieid=1&bg=#000000

hotspotHints: 프로토타입에서 핫스팟 힌트 표시하기

  • 값: true | false

  • 기본값: true

  • 예시: http://localhost:9981/pie?pieid=1&hotspotHints=true

cursorHide: 프로토타입에서 커서 숨기기

  • 값: true | false

  • 기본값: false

  • 예시: http://localhost:9981/pie?pieid=1&cursorHide=true

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

  • 값: true | false

  • 기본값: true

  • 예시: http://localhost:9981/pie?pieid=1&scaleToFit=false

매개변수가 포함된 URL 예시:

  • 배경색을 흰색으로 변경하고, 핫스팟 힌트를 표시하며, 화면에 맞춰 프로토타입의 크기를 조정합니다.

  • http://localhost:9981/pie?pieid=1&bg=white&touchHint=true&scaleToFit=true

  • 배경색을 노란색으로 변경하고, 커서를 숨깁니다.

  • http://localhost:9981/pie?pieid=1&bg=yellow&cursorHide=true

자주 묻는 질문(FAQ)

debug-messages-protopie-connect

ProtoPie Connect에서 메시지를 디버깅하는 방법은 무엇인가요?

ProtoPie Connect 인터페이스 우측에서 연결된 모든 프로토타입, 커스텀 플러그인, 하드웨어 기기가 보내고 받은 모든 메시지를 확인할 수 있습니다. 디버깅을 위해 대시보드에서 테스트 메시지를 전송하고 프로토타입에서 올바르게 수신되는지 확인할 수 있습니다.


connect debug window