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

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에서 변경되는 경우, 변경 사항은 자동으로 반영됩니다.

Pie를 그룹으로 배치하여 더 깔끔하게 정렬할 수 있습니다. Group 아이콘을 클릭하여 새로운 Pie 그룹을 생성합니다. Pie를 그룹에 추가하려면, 해당 Pie를 그룹에 드래그 앤 드롭하면 됩니다. 그룹은 반드시 펼친 상태여야 합니다.

• Pie를 한 그룹에서 다른 그룹으로 이동하려면 해당 Pie를 드래그 앤 드롭하여 다른 그룹에 넣으면 됩니다.
• 그룹을 펼치거나 생략하려면 1개 이상의 Pie가 포함되어 있어야 합니다.
• 그룹을 선택하거나 선택을 해제하려면 1개 이상의 Pie가 포함되어 있어야 합니다.
• 새롭게 생성된 그룹은 그룹 목록의 최상단에 추가됩니다.
• 새롭게 불러온 Pie는 그룹의 하단에 추가됩니다.
• 그룹의 이름을 변경하려면 그룹 이름을 더블 클릭한 다음 새로운 이름을 입력합니다.
• 그룹을 삭제하려면 그룹 위로 커서를 가져간 다음 휴지통 아이콘을 클릭합니다.

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

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

• ProtoPie Player(iOS, iPadOS 또는 Android)
• 데스크톱 웹 브라우저
• ProtoPie Player for Wear OS(Enterprise 플랜 사용자 한정)

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에서 열고자 하는 프로토타입의 Connect 버튼을 클릭합니다.
3. 목록에서 QR 코드를 선택합니다.
4. ProtoPie Player에서 Scan QR Code 버튼을 탭합니다.
5. QR 코드를 스캔해 Player에서 프로토타입을 실행합니다.

IP 주소 입력하기

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

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

서로 다른 장치에서 열기

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

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

1. 같은 그룹에 프로토타입을 추가합니다
2. 프로토타입을 선택합니다(그룹 이름 옆에 있는 체크박스를 클릭하여 그룹 내 프로토타입 전체를 선택할 수 있습니다)
3. MultiView 아이콘을 클릭해 단일 브라우저 내에서 여러 개의 프로토타입을 함께 엽니다.

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

이후 MultiView로 프로토타입을 다시 실행하는 경우, 새로운 레이아웃 설정에 따라 표시됩니다. 그룹 내 Pie를 삭제하거나 순서를 변경하는 경우 레이아웃 설정이 초기화됩니다.

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

ProtoPie Connect 1.8.0부터 iOS/Android용 ProtoPie Player 앱이나 ProtoPie Studio의 미리보기 창과 마찬가지로 Web Player에서도 음성 프로토타이핑 기능을 사용할 수 있습니다. 현재 지원되는 기능은 다음과 같습니다.

• Voice Command Trigger
• Speak Response
• Listen Response

호환 가능한 웹 브라우저

각 브라우저는 마이크 권한 처리에 있어 서로 다르게 동작합니다. 브라우저가 Voice Command Trigger 및 Listen Response를 사용하려면 사용자로부터 마이크 권한을 부여받아야 합니다. 프로토타입에서 마이크 활성화가 필요한 경우 브라우저는 아래 스크린샷처럼 마이크 권한 부여 여부를 묻는 메시지를 표시합니다. 마이크 액세스를 활성화하려면 Allow를 클릭합니다.

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

웹 브라우저 설정

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

1. IP 주소로 재생
2. http://localhost:9981/로 재생

http://localhost:9981/에서 프로토타입을 재생하는 경우 브라우저에서의 설정 및 작업이 필요하지 않습니다.

IP 주소(예: http://192.168.0.40:9981/)를 사용하여 프로토타입을 재생하려면 마이크 사용을 활성화하기 위한 일회성 브라우저 설정이 필요하며, Google Chrome 및 Microsoft 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

2. Insecure origins treated as secure를 활성화합니다.

3. ProtoPie Connect 서버 주소(포트 번호: 9981)를 추가합니다.

참고: 서버 주소는 ProtoPie Connect의 좌측 하단에 있습니다.

4. Chrome/Edge 브라우저를 재시작합니다.

뷰 옵션 커스터마이징하기

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.

매개 변수가 있는 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 인터페이스 우측에서 볼 수 있습니다. 디버깅 용도로 대시보드에서 메시지를 전송해 본 뒤 프로토타입에서 올바르게 수신했는지 확인할 수 있습니다.