ProtoPie Connect는 프로토타입을 디지털 화면 너머로 거의 무제한에 가까운 수준까지 확장할 수 있게 해 주며, 진정한 ProtoPie 스타일로 ProtoPie Connect에는 이를 정말 쉽게 만들어 주는 여러 플러그인이 포함되어 있습니다. 그중 하나가 코드를 작성할 필요 없이 일반적인 데이터 서비스에 연결할 수 있게 해 주는 새로운 API 플러그인입니다. 이 글에서는 몇 가지 예제를 통해 프로토타입에서 실제 데이터를 시작하는 것이 얼마나 쉬운지 보여 드리겠습니다.
ProtoPie Connect 다운로드
이 튜토리얼을 따라 하려면 ProtoPie Connect를 다운로드하고 설치해야 합니다. 이미 ProtoPie Connect가 설치되어 있다면, 업데이트해 주세요. 이 튜토리얼의 모든 단계를 완료하려면 최신 버전이 필요합니다. ProtoPie Connect는 유료 플랜에서만 사용할 수 있으므로 Pro 또는 Enterprise 라이선스가 필요합니다.
API란 무엇인가요?
API는 “Application Programming Interface”의 약자로, 원격 시스템이 서로 통신하는 일반적인 방식입니다. 특히 ProtoPie Connect 플러그인은 RESTful APIs와 함께 작동합니다. RESTful의 정확한 의미를 이해할 필요는 없지만, 웹에서 찾을 수 있는 많은 많은 API가 이러한 유형이며, 따라서 플러그인과 함께 사용할 수 있다는 것만 알아도 충분합니다.
RESTful API 트랜잭션은 두 부분으로 이루어집니다:
원격 시스템의 URL에 일부 데이터를 요청합니다. 이 요청에는 보통 찾고 있는 내용을 더 잘 설명하는 몇 가지 매개변수가 함께 포함됩니다.
원격 시스템은 일부 데이터 또는 문제가 생겼을 때의 오류로 응답합니다. 이 응답은 보통 JSON 형식으로 되어 있습니다.
JSON이란 무엇인가요?
JSON은 정보를 형식화하는 표준 방식입니다. JSON은 텍스트 기반이므로 읽기 쉽다는 점에서 편리합니다. 이 형식은 이해하고 사용하기 쉽게 만들어 줍니다. 이 글에서는 이미 JSON에 어느 정도 익숙하다고 가정하지만, 입문이 필요하다면 웹에서 훌륭한 자료를 찾아 금방 따라잡을 수 있습니다. 예를 들어 여기 하나가 있습니다.
API 플러그인을 사용하는 기본 예제
이 예제는 더할 나위 없이 간단합니다. 아래에서 Useless Fact Machine 스타터 Pie를 다운로드하고 따라 해 보세요.
Studio에서 Pie를 엽니다. 이 Pie를 미리 보기로 실행하면 모든 상호작용과 애니메이션이 완성되어 있는 것을 볼 수 있습니다. 동전을 뽑기 기계 손잡이 위로 끌어다 놓은 다음 손을 떼세요.
동전을 뽑기 기계 손잡이 위로 끌어다 놓은 다음 손을 떼세요.
이제 마지막 단계를 완성할 차례입니다. 즉, 우리에게 쓸모없는 사실을 돌려주는 API에 요청을 보내는 것입니다. 그런 다음 그 사실을 가져와 마치 뽑기 기계에 인쇄된 것처럼 표시할 것입니다.
우리가 사용하는 API는 “Useless Facts”라는 이름의 무료 인터넷 API입니다. API에 대한 자세한 내용은 여기에서 확인할 수 있습니다. 사용할 특정 요청 URL(또는 엔드포인트)은 이것입니다.
그냥 클릭해 보세요! 브라우저에서 다음과 비슷한 응답을 보게 될 것입니다:
“Useless Facts” 요청 URL.
이것이 JSON 형식의 응답입니다. 텍스트일 뿐인데도 읽기가 그다지 쉽지 않다는 것을 볼 수 있습니다. 그래서 전문가 팁 하나! Google Chrome용 JSON Formatter 플러그인을 설치해 보세요. 플러그인이 설치되면 Google이 위의 난해한 내용을 자동으로 다음처럼 서식화해 줍니다:
Google Chrome용 JSON Formatter 플러그인.
JSON은 가장 기본적으로 콜론 문자로 구분된 키와 값 쌍의 모음입니다. 콜론의 왼쪽 텍스트가 키이고, 오른쪽 텍스트가 값입니다. 우리의 목적에서는 “text”라는 이름의 키가 중요합니다. 이 키의 값이 바로 우리가 찾는 무작위 쓸모없는 사실입니다!
API 플러그인 설정하기
ProtoPie에서 데이터를 다루는 과정은 세 단계로 이루어집니다:
ProtoPie Connect에서 플러그인을 설정합니다.
Pie에서 API 요청을 트리거하는 Send 메시지와 API 응답이 포함된 Receive 메시지를 작성합니다.
ProtoPie Connect를 통해 Pie를 실행하여 동작을 확인합니다.
먼저 이 첫 번째 단계에 집중해 봅시다.
ProtoPie Connect를 실행합니다
오른쪽 상단의 Plugins를 클릭한 다음 API를 클릭합니다.
오른쪽 상단의 Plugins를 클릭한 다음 API를 클릭합니다.
다음과 같은 화면이 나타납니다:
API 플러그인 설정하기.
다음과 같이 설정합니다:
URL 필드에 API 요청 URL을 입력합니다:
https://uselessfacts.jsph.pl/api/v2/facts/randomConnect API with Pie,라는 섹션 아래쪽의 Message from Pie 필드에
GET_USELESS_FACT를 입력합니다.Message to Pie 필드에
RETURN_USELESS_FACT를 입력합니다.Activate를 클릭합니다.
모든 것이 제대로 작동하는지 확인하려면 Test Request를 클릭합니다. “Test Success.”라는 메시지가 보여야 합니다. 보이지 않는다면, 뒤로 돌아가 위에서 안내한 모든 내용을 정확히 입력했는지 확인하세요.
API 플러그인이 설정되어 사용할 준비가 되었습니다!
이것으로 끝입니다! API 플러그인이 설정되어 사용할 준비가 되었습니다!
참고: 우리가 사용한 메시지 — GET_USELESS_FACT와 RETURN_USELESS_FACT — 는 전부 임의로 만든 것입니다. 여기에는 어떤 메시지든 사용할 수 있습니다. 다만 Pie 파일에서도 같은 메시지를 사용해야 합니다(다음 단계를 참고하세요).
플러그인을 사용하도록 Pie 작성하기
ProtoPie Studio로 돌아갑니다. Touch Up “Nickel.”이라는 이름의 트리거를 확인해 보세요. 이 트리거는 동전을 끌어다 놓은 후 놓을 때 실행됩니다.
동전을 끌어다 놓은 후 놓을 때 Touch Up “Nickel” 트리거가 실행됩니다.
이 트리거 아래에 Send Response를 추가합니다. 다음과 같이 설정합니다:
Channel,은 ProtoPie Studio를 선택합니다. ProtoPie Connect를 통해 통신하려면 항상 이 채널을 사용해야 합니다.
Message에는 플러그인의 Message from Pie 필드에 설정한 것과 같은 값을 사용합니다. 여기서는
GET_USELESS_FACT를 사용했습니다.
Send 응답 설정하기.
이 Send는 동전을 기계에 떨어뜨릴 때 실행되어 API Plugin이 Useless Facts API에 요청을 보내도록 합니다.
이제 API에서 받은 응답을 수신하고 사용하는 메커니즘을 설정해야 합니다. Receive Trigger를 추가합니다. 다음과 같이 설정합니다:
다시 한번 Channel로 ProtoPie Studio를 사용합니다.
Message에는 플러그인의 Message to Pie 필드에 설정한 것과 같은 메시지를 사용합니다. 여기서는
RETURN_USELESS_FACT라는 메시지를 사용했습니다.
실제 JSON 응답은 메시지의 값으로 포함됩니다. 이를 사용하려면 변수에 할당해야 합니다. 아직 변수가 없으니 하나 만들어 봅시다:
ProtoPie Studio의 왼쪽 아래에서 Variables 탭을 클릭하여 변수 패널을 엽니다.
패널 오른쪽 상단의 + 아이콘을 클릭해 새 변수를 만듭니다. Pie에는 장면이 하나뿐이므로 For All Scenes 또는 For This Scene 중 무엇을 선택해도 상관없습니다.
변수 이름을 적절하게 지정합니다. 저는
apiResponse라는 이름을 사용하겠습니다.API는 JSON, 즉 본질적으로 텍스트를 반환하므로 변수 유형이 Text여야 합니다. Studio 오른쪽 상단의 변수 속성에서 Text를 클릭합니다.
Studio 오른쪽 상단의 변수 속성에서 Text를 클릭합니다.
이제 Receive Trigger로 돌아가 Assign to Variable 옆의 확인란을 선택합니다. 새로 나타나는 드롭다운 목록에서 방금 만든 변수를 선택합니다.
Receive Trigger로 돌아가 Assign to Variable 옆의 확인란을 선택합니다.
이제 우리의 Pie에는 API 응답이 Text 변수 apiResponse에 저장됩니다. 이제 이를 사용해 봅시다!
레이어 스택의 맨 위에는 Random Fact라는 이름의 Text 레이어가 있습니다. 이 Text 레이어에 API 응답의 “text” 키 값을 채워 넣을 것입니다.
방금 만든 Receive Trigger 아래에 Text Response를 추가합니다.
드롭다운 목록에서 Text 레이어 Random Fact를 선택합니다.
Content 아래의 드롭다운 목록에서 Formula를 선택합니다.
다음 수식을 사용합니다:
parseJson(apiResponse, \"text\")
다음 수식을 사용합니다: parseJson(apiResponse, \"text\").
무엇을 한 걸까요?
우리는 parseJson() 함수를 사용해 apiResponse 변수에 저장된 JSON 응답에서 데이터를 추출했습니다. 이 함수가 작동하는 모습을 처음 보는 것이라면 문서 여기를 꼭 읽어 보세요. parseJson() 함수는 API Plugin에서 반환된 데이터를 다룰 때 필수이며, 이 시리즈의 2부에서 더 고급 예제를 다룰 때 다시 사용하게 될 것입니다.
컴퓨터에서 편한 위치에 Pie를 저장하세요. 이제 마지막 단계만 남았습니다!
ProtoPie Connect에서 미리 보기
Pie가 데이터를 가져오려면 ProtoPie Connect를 통해 실행되어야 합니다. Studio에서 Pie를 미리 보기로 실행해 보면 아무것도 달라지지 않은 것처럼 보일 수 있습니다. Studio는 ProtoPie Connect나 API Plugin에 대해 알지 못하기 때문입니다.
ProtoPie Connect로 돌아가 저장한 Pie를 ProtoPie Connect 인터페이스의 왼쪽 영역으로 끌어다 놓습니다.
저장한 Pie를 ProtoPie Connect 인터페이스의 왼쪽 영역으로 끌어다 놓습니다.
컴퓨터 모니터처럼 생긴 아이콘을 클릭합니다. 그러면 데스크톱 웹 보기에서 Pie가 열립니다.
동전을 기계 위에 올려놓고 마법이 펼쳐지는 모습을 지켜보세요!
동전을 기계 위에 올려놓고 마법이 펼쳐지는 모습을 지켜보세요!
ProtoPie Connect에서 메시지 흐름이 어떻게 표시되는지 확인해 보세요. 이는 상호작용에서 발생한 버그를 해결할 때 유용합니다.
메시지 흐름은 상호작용에서 발생한 버그를 해결할 때 유용합니다.
일단 여기까지입니다. API Plugin Advanced Tutorial도 확인해 보세요. 더 고급 예제를 몇 가지 보여 드립니다.
ProtoPie의 API 플러그인으로 디자인을 향상시키세요
데이터베이스와 API를 매끄럽게 통합하여 디자인의 잠재력을 최대한 활용하세요. 오늘 무료로 사용해 보기를 통해 ProtoPie의 최첨단 기능을 경험해 보세요.
