소개
재프로그램 가능하고 특화된 디바이스 기술의 등장으로 소프트웨어와 하드웨어가 함께 작동하는 방식의 경계가 흐려졌습니다. 이는 인터페이스 디자인과 현대 시대에 소비자의 디지털 경험을 재정의하는 방식에 혁신적인 영향을 미쳤습니다.
여기 ProtoPie에서는 제품 디자이너뿐만 아니라 메이커 커뮤니티의 크리에이티브에게도 시간과 비용을 절약할 수 있도록 돕는 것이 우리의 사명 중 하나입니다. 그래서 저희는 blokdots와 힘을 합쳐 새로운 협업 기능을 개발했습니다. 이 가이드는 코드 한 줄 없이 프로토타입에서 첫 소프트웨어 및 하드웨어 구현을 만드는 방법을 시작할 수 있도록 도와드립니다!
ProtoPie와 Blokdots: 같은 철학(하지만 다른 응용 분야)
ProtoPie 는 모바일, 웹, 대시보드, 디지털 화면 등을 위한 하이파이 프로토타이핑 도구입니다. 반면 blokdots는 Arduino로 프로토타입을 만들 수 있는 노코드 도구입니다. 두 도구 모두 짧은 시간 안에 복잡하고 고품질의 하드웨어 상호작용을 프로토타이핑할 때 노코드 접근 방식을 취한다는 점에서 비슷합니다. ProtoPie와 blokdots를 함께 사용하면 두 세계의 장점을 모두 얻을 수 있습니다. ProtoPie는 소프트웨어 상호작용을 담당하고, blokdots는 하드웨어 상호작용을 처리합니다.
이 작업은 혼자서도 쉽게 할 수 있습니다. 하지만 먼저 이 협업에 필요한 핵심 도구들을 간단히 살펴보겠습니다:
ProtoPie Studio는 상호작용을 만드는 데 사용합니다.
ProtoPie Player는 스마트 디바이스에서 프로토타입을 실행하는 데 사용합니다.
blokdots는 하드웨어 프로토타이핑에 사용합니다.
Pie와 blokdots는 socket.IO를 통해 통신합니다.
즉, 아래와 같은 간단한 Arduino 설정만으로도 소프트웨어와 하드웨어의 연결을 쉽고 동적으로 구현할 수 있다는 뜻입니다.
스마트 홈 프로토타입을 사용해 이 설정을 직접 어떻게 만들 수 있는지 계속 읽어 보세요.
이제 마법을 만들어 봅시다
준비물:
💡 팁: 이 연결을 만들기 위해 blokdots에서 권장하는 Arduino Grove 보드를 사용하겠습니다. 사용이 매우 간단하며 부품에 대한 배선이 전혀 필요하지 않습니다. Seeed Studio의 Grove Arduino 보드에는 미리 배선된 10개의 모듈이 있으며, 그중 대부분은 blokdots에서 지원됩니다.
Arduino에서 Blokdots로
blokdots를 열고 Arduino 보드를 노트북/PC에 연결하세요. blokdots의 Live View에서 보드가 준비되었음을 확인할 수 있습니다.
Connect A New Component 버튼을 Live View 상단에서 클릭해 Wizard를 열고, 목록에서 연결하려는 항목을 선택하세요. 이 예제에서 사용할 모듈은 다음과 같습니다:
ProtoPie Player
D4: LED
D5: Buzzer
D6: Button
A0: 회전식 가변저항기
설정이 끝나면 이제 보드에서 몇 가지 컴포넌트를 테스트해 볼 수 있습니다. Line View에서 숫자가 그에 따라 변하는 것을 볼 수 있을 것입니다.
여기서 무슨 일이 일어나고 있을까요
상호작용을 만들고 싶어 설레신다는 것을 알고 있지만, 먼저 한 가지를 더 설명하겠습니다. blokdots가 ProtoPie와 “대화”할 수 있도록 하려면 ProtoPie의 Send / Receive 기능을 사용해야 합니다. 이 기능을 사용하면 서로 다른 프로토타입이 메시지를 보내고 받을 수 있으므로 ProtoPie와 Arduino가 서로 통신할 수 있습니다. 따라서 ProtoPie Studio와 Arduino. 사이에서 직접 메시지를 보내고 받는 실험을 하며 자신만의 상호작용을 만들 수 있습니다.
blokdots는 두 도구가 서로 어떻게 통신해야 하는지에 대한 조건을 설정하는 환경이라고 생각하면 됩니다.
💡 기억하세요:
ProtoPie Studio와 blokdots에서 메시지를
Send하고Receive하도록 설정합니다.하지만 최종 상호작용은 ProtoPie Player와 Arduino 사이에서 일어납니다.
Send와 Receive 설정하기
ProtoPie Studio에서 Receive Trigger와 Send Response가 디바이스 간 통신을 시작합니다. 필요한 것은 Channel을 ProtoPie Studio로 설정하고 Message를 원하는 내용으로 지정하는 것뿐입니다.
💡 팁: 메시지는 짧게 유지하는 것이 가장 좋습니다. 예를 들어 “ToggleLED”가 “LED 조명을 켜거나 끄기”보다 낫습니다.
또한 blokdots의 값을 나중에 사용하고 싶다면 Assign to Variable을 선택하고, 이 값을 저장할 변수를 ProtoPie에서 생성하세요.
변수에 대해 더 알아보기.
채널로 “ProtoPie Studio”를 선택하세요.
첫 번째 상호작용 만들기
사용자는 카드를 추가하고 구성하여 blokdots에서 하드웨어 프로토타입을 만듭니다. blokdots에는 If This Then That 카드와 Mapping 카드, 두 가지 유형의 카드가 있습니다. 이 예제에서는 If This Then That 카드만 사용하면 됩니다.
blokdots에서 ProtoPie로
다음과 같은 조건 카드가 보일 것입니다:
만약
the action of any input hardware component그렇다면
ProtoPie Player는sendmessage를 해야 합니다
아래 예제 카드를 따라 해 보세요. 예를 들어 가변저항기를 회전하고 싶다면, 다음 세부 정보와 함께 blokdots에서 ProtoPie로 메시지를 보내야 합니다:
메시지: degree
값: 1~1023
blokdots에서 ProtoPie로 메시지 보내기
ProtoPie에서 메시지를 받으려면 아래와 같이 Receive 트리거를 사용하세요.
ProtoPie에서 메시지 받기.
채널: ProtoPie Studio
메시지: degree
“degree”라는 변수를 만드세요. 값을 이 degree 변수에 할당하세요.
ProtoPie에서 blokdots로
ProtoPie Studio의 Send 기능을 사용해 메시지를 보내세요.
ProtoPie에서 메시지 보내기
채널: ProtoPie Studio
메시지: power
선택 사항: 값을 함께 보낼 수도 있습니다
메시지를 받으려면, blokdots로 이동해 다른 카드를 추가하세요. If This Then That 카드를 사용합니다. 일반적인 구조는 보통 다음과 같습니다:
만약
ProtoPie Player가receivingmessage를 받고 있다면그렇다면 [출력 하드웨어 컴포넌트의 동작]
ProtoPie의 값과 함께 메시지를 받게 됩니다.
💡 팁: ProtoPie의 값을 사용해 LED를 서서히 밝아지거나 어두워지게 하고 싶다면, Map…onto 카드를 사용해 들어오는 값을 blokdots의 하드웨어 컴포넌트에 매핑할 수 있습니다.
예를 들어 다음 카드를 보세요. blokdots가 ProtoPie에서 “power”라는 메시지를 받으면, 버저 컴포넌트가 300밀리초 동안 삐 소리를 내도록 트리거됩니다.
blokdots가 ProtoPie에서 메시지를 받습니다
원하시면 blokdots와 pie 파일을 다운로드해 직접 수정할 수도 있습니다.
[Pie 파일 다운로드] [blokdots 파일 다운로드]
프로젝트 실행하기
거의 다 왔습니다. QR 코드를 스캔하거나 주소를 수동으로 입력하여 ProtoPie Player를 연결하세요. 이 설정을 마치면 Line View가 아래 이미지처럼 보여야 합니다. ProtoPie 아이콘 왼쪽 아래에 있는 작은 연결 표시등이 초록색으로 바뀌어야 합니다.
QR 코드를 스캔하여 ProtoPie Player 연결하기
💡 팁: 제대로 되었는지 확신이 서지 않는다면 연결을 다시 확인하세요. ProtoPie Player에서 성공 메시지를 볼 수 있어야 합니다.
ProtoPie Player의 성공 메시지
ProtoPie Player에서 프로토타입을 미리 보려면 ProtoPie Studio의 QR 코드를 스캔하세요. Player와 Studio가 모두 같은 네트워크에 연결되어 있는지 확인하세요. 연결되어 있지 않다면 USB를 사용해 연결할 수도 있습니다.
ProtoPie Player를 ProtoPie Studio에 연결하는 방법에 대해 더 알아보기.
이제 모든 것이 연결되었으니, 상호작용이 어떻게 보이는지 확인해 봅시다! blokdots의 Project View 왼쪽 상단에 있는 Run Project 버튼을 누르세요.
해냈습니다
축하합니다! 단계별로 드래그 앤 드롭 문장을 추가하는 것만으로, 첫 번째 하드웨어와 소프트웨어가 통합된 프로토타입을 성공적으로 실행했습니다.
프로젝트에 blokdots와 ProtoPie를 구현하면 코딩 지식과 프로그래밍의 제약에 제한받지 않고 디자인을 빠르게 테스트할 수 있습니다. ProtoPie와 blokdots는 누구나 아이디어를 만들고, 테스트하고, 다듬어 실제 제품과 서비스를 만들 수 있어야 한다는 점을 열정적으로 믿습니다. 또는 상상력 넘치는 메이커들이 자유롭게 실험하며 창의력을 발휘하도록 돕기 위해서이기도 합니다.
이 가이드가 도움이 되었기를 바랍니다! 여러분이 실험하고 프로토타이핑의 경계를 넓혀 가는 모습을 기대하고 있습니다.
ProtoPie에 대해 더 알아보기
ProtoPie가 제공하는 끝없는 프로토타이핑 가능성에 대해 더 알고 싶다면 아래에서 ProtoPie를 무료로 다운로드하고 시작해 보세요.
