ProtoPie Connect의 흥미로운 새 기능을 소개하게 되어 매우 기쁩니다: API 플러그인이 이제 출시되었습니다!
이제 프로토타입을 데이터베이스와 API에 손쉽게 연결하여 실제 데이터를 ProtoPie 프로젝트로 가져오고, 반대로도 보낼 수 있습니다.
가장 좋은 점은? 코딩에 대해 걱정할 필요가 없다는 것입니다. API 플러그인이 모든 작업을 대신해 줍니다—API로 데이터를 보내든, API에서 데이터를 가져오든, 프로토타입에 자연스럽게 연결해 줍니다.
새로운 API 플러그인은 Pro 및 Enterprise 플랜 사용자 모두 이용할 수 있습니다. Enterprise 플랜 팀에는 추가 혜택이 있습니다. 여러 API에 동시에 연결할 수 있습니다.
라이브 웨비나: ProtoPie에서 실제 데이터로 디자인하기 - API 플러그인 심층 탐구.
📣 9월 19일 화요일에 열리는 특별 웨비나에 참여하세요. 프로토타입을 데이터베이스와 API에 연결하는 간단한 과정을 안내해 드립니다.
다양한 실제 사례를 통해 API 플러그인이 디자인 프로세스를 어떻게 한층 높이고 활력을 불어넣는지 보여 드리겠습니다.
API 플러그인이 워크플로를 향상시키는 방법
API 플러그인은 디자인 팀이 GET 또는 POST 방식으로 API 요청을 쉽게 시작하고, 모든 종류의 API와 양방향 연결을 설정할 수 있게 해 줍니다:
공개 API: Spotify, OpenWeatherMap, YouTube, ChatGPT, 실시간 점수 등 다양한 인기 서비스가 이에 해당하며, 그 외에도 많습니다.
내부 API: 조직의 내부 시스템 및 서비스와 매끄럽게 연결할 수 있습니다.
예를 들어, 이제 ProtoPie 프로토타입을 어떤 날씨 API와도 연결하여 특정 위치에 기반한 정확한 실시간 날씨 업데이트를 동적으로 표시할 수 있습니다.
ProtoPie Connect의 API 플러그인을 사용하여 OpenWeather One Call API에 연결하기.
ProtoPie에서 API 요청을 시작하는 방법
API에 연결하는 일이 ProtoPie Connect에서 Enterprise 플랜으로 제한되고 코드 작성과 사용자 지정 플러그인이 필요하던 시대는 끝났습니다. 이제 API 플러그인을 사용하면 Pro 또는 Enterprise 플랜 사용자는 누구나 손쉽게 API 요청을 시작할 수 있습니다!
API 설정 구성
API 플러그인을 통해 API에 연결하려면 유효한 API URL을 입력해야 합니다. 이 URL은 API 서비스로 향하는 관문 역할을 합니다.
API가 요청을 처리하는 데 더 많은 정보가 필요하다면 API URL과 함께 Header와 Body를 포함할 수 있습니다. 이는 요청과 함께 보내는 추가 메모라고 생각하면 됩니다.
Header는 JSON {} 형식이어야 하지만,Body는 항상 JSON {} 형식을 따를 필요는 없습니다. API가 요구하는 경우Body를 JSON {} 형식으로 입력할 수 있습니다.
선택한 API의 온라인 문서를 참고하면 올바른 API URL과 필요한 매개변수를 찾을 수 있습니다. 성공적인 통신을 위해 올바르게 설정하는 방법을 안내해 줍니다.
ProtoPie Connect의 API 플러그인에서 API 설정 구성하기.
Send 및 Receive 메시지를 통한 연결
ProtoPie에서 API 요청은 ProtoPie Studio에서 설정하는 Send 메시지를 통해 시작됩니다.
ProtoPie Connect에서 프로토타입을 열면 API 플러그인이 프로토타입 안의 메시지를 자동으로 감지합니다. 이러한 메시지는 “Message from Pie” 메뉴에 표시되며, API 플러그인에서 쉽게 선택할 수 있습니다.
프로토타입 내 메시지를 자동으로 감지하기.
ProtoPie Connect에서 Send & Receive 메시지를 설정하는 방법은 ProtoPie Connect 완전 가이드를 통해 자세히 알아보세요.
활성화된 API는 응답을 반환하며, 이 응답은 프로토타입으로 다시 전송되어 동작을 트리거하는 데 사용될 수 있습니다. 프로토타입에서 API의 출력을 활용하려면 Receive 트리거를 사용하고 해당 값을 ProtoPie Studio의 텍스트 변수에 할당해야 합니다.
API 데이터를 ProtoPie Studio의 텍스트 변수에 할당하기.
API에서 얻은 정보는 변수에 저장되어 ProtoPie Studio의 응답을 통해 다시 활용할 수 있습니다. Text 응답은 parseJson 수식과 함께 사용하면, 흔히 JSON 형식인 API 출력을 처리하는 데 유용합니다. 많은 API가 JSON으로 응답하지만, 모두가 그런 것은 아니라는 점도 기억할 만합니다. API 플러그인은 받은 응답을 그대로 전달할 뿐이며—요즘 대부분의 API는 우연히 JSON으로 응답합니다.
예를 들어, ProtoPie Connect에서 이 프로토타입을 열고 정보 섹션에 설명된 대로 API 플러그인을 설정하면, 토글 스위치를 사용해 옵션을 선택할 때 프로토타입이 Useless Facts에 API 요청을 보낸다는 것을 확인할 수 있습니다. 그 결과 프로토타입은 화면에 Useless Facts API에서 가져온 정보를 표시합니다.
Useless Facts API에서 가져온 데이터를 표시하는 프로토타입.
ProtoPie Connect의 API 플러그인을 사용해 API 요청을 시작하는 단계별 가이드를 확인해 보세요.
메시지 값으로 매개변수 덮어쓰기
“override API URL/Header/Body with message value” 옵션을 사용하면 프로토타입에서 보낸 메시지의 값으로 API의 URL 또는 Header/Body 매개변수를 동적으로 덮어쓸 수 있습니다.
이 기능은 동일한 API에 여러 번 호출해야 하지만 URL이나 Header/Body 값이 달라지는 경우에 유용합니다.
이 예제 프로토타입에서는 Pie 파일에서 보낸 메시지의 값으로 API URL을 덮어쓰도록 이 기능을 사용했습니다. 그 결과 검색 상자에 도시를 입력하면 해당 도시의 정확한 날씨 정보를 볼 수 있습니다.
Send 메시지 값으로 API URL 덮어쓰기.
여러 API 요청을 동시에 실행하기
Enterprise 전용 기능
Enterprise 플랜 팀은 API 플러그인 내에서 여러 API 요청을 동시에 실행할 수 있는 유연성을 갖습니다. 이 기능을 통해 프로토타입을 여러 API에 한 번에 연결하여 실제 데이터 프로토타이핑을 한층 강화할 수 있습니다.
ProtoPie Connect 내에서 여러 API 요청을 동시에 실행하기.
ProtoPie API 플러그인은 실제의 동적인 데이터를 디자인에 불어넣어 프로토타입의 사실감과 기능성을 한 단계 끌어올릴 수 있게 해 줍니다. 당신의 비전을 가장 진정한 형태로 보여 주는 인터랙티브하고 데이터 기반의 프로토타입을 만들어 보세요.
ProtoPie의 강력한 프로토타이핑 기능으로 디자인의 수준을 높이세요
ProtoPie는 프로토타입을 새로운 차원으로 끌어올릴 궁극의 도구입니다. 이해관계자와 보는 이들을 놀라게 할 실제 상호작용을 더해 디자인의 잠재력을 마음껏 펼쳐 보세요.
지금 무료로 체험하고 ProtoPie의 최첨단 기능을 경험해 보세요.
