blokdots와 함께하는 아두이노 프로토타이핑
blokdots를 사용해 아두이노 프로토타입을 구현해 보세요.
소개
프로그램 개작이 가능하고 특화된 디바이스 기술은 소프트웨어와 하드웨어가 (영문) 함께 작동하는 방식의 경계를 허물며, 인터페이스 디자인과 현대 시대에 소비자의 디지털 경험을 재정의하는 데 혁신을 불러일으켰습니다.
ProtoPie의 미션 중 하나는 제품 디자이너뿐만 아니라 메이커 커뮤니티 내 크리에이티브의 시간과 비용을 절감하는 것인데요. 이를 실현하기 위해, blokdots와 함께 새로운 협업 기능을 개발했습니다. 이번 가이드를 통해, 단 한 줄의 코드 없이 소프트웨어와 하드웨어가 접목된 첫 번째 프로토타입을 구현하는 방법을 배워보세요.
ProtoPie와 blokdot의 공통 철학
ProtoPie는 모바일, 웹, 대시보드, 디지털 스크린 등을 위한 노코드 hi-fi 프로토타이핑 툴입니다. 반면, blokdots(영문)는 아두이노 프로토타이핑(영문)을 위한 노코드 툴입니다. ProtoPie와 blokdot 둘 다 코딩을 하지 않고도 짧은 시간내에 복합적인 고품질 하드웨어 인터랙션을 프로토타이핑할 수 있다는 공통점이 있습니다. ProtoPie는 소프트웨어 인터랙션을, blokdots는 하드웨어 인터랙션을 처리합니다. 그래서 프로토타이핑 시, 두 툴을 같이 사용하면 각 툴의 장점을 동시에 누릴 수 있습니다.
ProtoPie와 blokdots 연동을 통한 프로토타이핑은 혼자서도 쉽게 가능한데요. 시작에 앞서, 필요한 주요 툴에 대해 알아보겠습니다.
▶ ProtoPie Studio: 인터랙션을 만들기 위해 사용됩니다.
▶ ProtoPie Player: 스마트 디바이스에서 프로토타입을 실행하기 위해 사용됩니다.
▶ blokdots: 하드웨어 프로토타이핑에 사용됩니다.
▶ Socket.io(영문): Pie와 blokdots가 통신할 때 사용됩니다.
아래 영상에서 보이는 것과 같이, ProtoPie와 blokdots를 사용하여 쉽고 다이나믹하게 소프트웨어-하드웨어 연결을 수행할 수 있습니다.
이제 스마트 홈 프로토타입을 사용하여 해당 셋업을 직접 제작하는 방법에 대해 알아보겠습니다.
프로젝트 시작
준비물:
▶ 아두이노: 지원되는 보드 목록은 여기(영문)에서 확인 가능합니다.
▶ USB 케이블: 보드를 디바이스에 연결할 때 사용됩니다.
▶ blokdots: 여기(영문)를 클릭하여 설치하세요.
▶ 팁
이번 가이드에서는 blokdots(영문)에서 권장하는 아두이노 Grove 보드를 사용합니다. 아두이노 Grove 보드는 사용이 매우 간단하며 구성 요소에 와이어링이 별도로 필요하지 않습니다. Seeed Studio의 Grove 아두이노 보드에는 10개의 사전 와이어링 모듈이 있으며, 대부분은 blokdots에서 지원됩니다.
아두이노 - blokdots 연결
blokdots를 열고 아두이노 보드를 노트북/PC에 연결하면, blokdots의 Live View를 통해 보드가 준비되었음을 알 수 있습니다.
Live View 상단의 Connect A New Component 버튼을 클릭하여 마법사를 열고, 목록에서 연결할 마법사를 선택합니다. 이 예제에서 사용할 모듈은 다음과 같습니다.
▶ ProtoPie Player
▶ D4: LED
▶ D5: Buzzdr
▶ D6: 버튼
▶ A0: 로터리 포텐셔미터
셋업 완료 후 보드의 일부 구성 요소를 테스트할 수 있으며, Line View에서 테스트 결과에 따라 번호가 변경되는 것을 확인할 수 있습니다.
ProtoPie - blokdots 연동에 대해 더 알아보기
본격적인 프로세스 시작 전 추가로 하나 더 설명하면, ProtoPie의 Send/Receive 기능을 활용해야 blokdots가 ProtoPie와 소통할 수 있으며, 이를 통해 ProtoPie Studio와 아두이노(영문) 사이의 메시지 송, 수신을 테스트할 수 있습니다.
blokdots는 서로 통신하는 방법에 대한 조건을 설정하는 환경이라고 생각하면 됩니다.
기억할 점:
▶ ProtoPie Studio 및 blokdots에서 메시지를 보내고 받는 방법을 설정합니다.
▶ 그러나 최종 인터랙션은 ProtoPie Player와 아두이노 사이에서 발생합니다.
Send/Receive 설정
ProtoPie Studio에서 Receive Trigger와 Send Response은 장치 간의 통신을 시작합니다. 채널을 ProtoPie Studio로 설정하고 메시지를 원하는 대로 설정하기만 하면 됩니다.
▶ 팁
메시지는 짧게 유지하는 것이 가장 좋습니다. 예를 들어, “Toggle the LED light on or off”보다 “ToggleLED”가 더 좋습니다.
blokdots의 값을 나중에 사용할 수 있도록 유지하려면 Assign to Variable을 선택하고, ProtoPie에서 variables를 생성하여 이 값을 저장합니다.
링크를 클릭하여 variables에 대해 자세히 알아보세요.
“ProtoPie Studio”를 채널로 선택합니다.첫 인터랙션 만들기
카드를 추가하고 구성하여 blokdots에서 하드웨어를 프로토타이핑 할 수 있습니다. blokdots에는 If This Then That 그리고 Mapping 두 가지 유형의 카드가 있습니다. 해당 예시에서는 If This Then This 카드만 사용하면 됩니다.
blokdots에서 ProtoPie로
blokdots에서는 아래와 같은 condition 카드를 확인할 수 있습니다.
아래 예시 카드를 따라해 보세요.
예를 들어, 포텐셔미터를 회전하려면 다음 세부 정보와 함께 blokdots에서 ProtoPie로 메시지를 보내야 합니다.
▶ Message: degree
▶ Value: 1~1023
blokdots에서 ProtoPie로 메시지 보내기Protopie에서 메시지를 수신하려면 아래 이미지와 같이 Receive trigger를 사용하세요.
사용 시, 아래 옵션으로 설정이 되어야 합니다.
▶ Channel: ProtoPie Studio
▶ Message: degree
“Degree”라는 variable을 만들고, 값을 할당합니다.
ProtoPie Receive 창ProtoPie에서 blokdots로
ProtoPie Studio의 Send 기능을 사용하여 메시지를 보냅니다.
ProtoPie Send 창▶ Channel: ProtoPie Studio
▶ Message: power
▶ Optional: You can send a value together
메시지를 수신하려면, blokdots에서 If This Then That 카드를 추가하세요.
일반적인 구조는 다음과 같습니다.
위 카드를 설정한 경우, ProtoPie에서 할당된 값과 함께 메시지를 받게 됩니다.
▶ 팁
ProtoPie의 값을 사용하여 LED를 페이드인 및 페이드아웃하려면, blokdots의 Map... onto 카드를 사용하여 ProtoPie의 값을 하드웨어 구성 요소에 매핑할 수 있습니다.
아래 예시 카드의 경우, blokdots가 ProtoPie로부터 “power”라는 메시지를 수신하면 버저 구성 요소가 300밀리초 동안 경고음을 울리도록 설정되어 있습니다.
ProtoPie - blokdots 메세지 송수신혹은 아래 blokdot 및 pie 파일을 다운로드하여 직접 조정해 보세요.
Pie 파일 다운로드
blokdots 파일 다운로드
본격적인 프로젝트 실행
이제 거의 다 완료되었습니다.
QR을 스캔하거나 주소를 수동으로 입력하여 ProtoPie Player를 연결합니다. 이 설정을 마치면 라인 뷰가 아래와 같아야 하며, 정상적으로 작동하는 경우 아이콘의 왼쪽 하단에 있는 작은 연결 표시기가 녹색으로 바뀝니다.
QR 코드를 스캔하여 프로토파이 플레이어 연결▶ 팁:
ProtoPie Player에서 Success 메시지가 표시되지 않은 경우, blokdots와 ProtoPie 간의 연결 상태를 다시 한번 확인하세요.
ProtoPie Player의 Success 메시지ProtoPie Player에서 프로토타입을 미리 보려면, ProtoPie Studio에서 QR 코드를 스캔하세요. Player와 Studio가 모두 동일한 네트워크를 통해 연결되어 있는지 확인합니다. 그렇지 않은 경우, USB를 사용하여 연결할 수도 있습니다.
ProtoPie Player를 ProtoPie Studio에 연결하는 방법에 대해 자세히 알아보세요.
모든 연결이 완료되면, 이제 인터랙션 결과를 확인할 차례입니다. blokdots에서 프로젝트 뷰의 왼쪽 상단 모서리에 있는 Run Project 버튼을 누릅니다.
프로젝트 완료!
프로젝트 완료를 진심으로 축하드립니다! :D
이번 예시에서 경험했듯, 단계별 드래그 앤 드롭 문장을 추가를 통해 하드웨어 및 소프트웨어 통합 프로토타입을 성공적으로 시작하고 실행할 수 있습니다.
프로젝트에 blokdot 및 ProtoPie를 도입하면 코딩 지식과 프로그래밍 관련 제한 없이 빠른 디자인 테스팅이 가능합니다. ProtoPie와 blokdots는 공통적으로 누구나 실제 제품과 서비스를 만들기 위해 아이디어를 구축, 테스트 및 개선하고, 각자의 창의력을 마음껏 발산할 수 있어야 함을 굳게 믿습니다.
이 가이드가 도움이 되었기를 바라며, 앞으로도 blokdots와 ProtoPie를 통해 더욱 창의적이고 뛰어난 프로토타입이 많이 구현될 수 있었으면 좋겠습니다.
ProtoPie에 대해 더 알아보기
ProtoPie의 무한한 가능성에 대해 더 알아보고 싶으신가요?
아래 링크를 통해 ProtoPie를 무료로 사용해 보세요!
