brunch

매거진 ProtoPie 팁

You can make anything
by writing

C.S.Lewis

by ProtoPie Aug 05. 2022

초보자를 위한 소프트웨어 - 하드웨어 연동 프로토타이핑

아두이노와 ProtoPie를 연동한 프로토타입을 제작해 보세요.



디지털 혁신은 전 세계 포춘 500대 기업부터 작은 소규모 스타트업까지, 모든 기업의 소프트웨어와 하드웨어 간의 경계를 그 어느 때보다 옅게 만들었습니다. 따라서, 소프트웨어 기업이 하드웨어를, 하드웨어 기업이 소프트웨어를 개발 및 출시하는 사례를 자주 접할 수 있습니다.


한 예로, 그동안 전통적인 소프트웨어 회사로 분류되었던 Google 및 Amazon과 같은 IT 대기업은 Google Nest 및 Amazon Alexa와 같은 자체 하드웨어 및 소프트웨어 제품을 개발하기 시작했습니다. 마찬가지로 자동차 및 가전업계같은 하드웨어 업계에서도 자체 소프트웨어 개발에 심혈을 기울이고 있습니다. iPad, iPhone 같은 하드웨어와 자체 소프트웨어인 iOS를 보유한 Apple의 경우, 이미  디지털 혁신의 모범 사례로 꼽혀 왔습니다.

이렇게 IoT가 일상생활에서 점점 더 큰 역할을 수행하게 됨에 따라, 소프트웨어 및 하드웨어간의 연동은 더욱 중요해지고 있습니다. 하지만 소프트웨어와 하드웨어를 연동하는 것은 그렇게 간단하지만은 않은데요.

ProtoPie에서는 소프트웨어- 하드웨어 연동 같은 고차원적인 기능의 진입장벽을 낮추고자 다양한 솔루션을 개발 및 제공하고 있는데요. 이번 아티클에서는 ProtoPie와 아두이노를 사용하여 누구나 쉽게 소프트웨어 및 하드웨어 연동 프로토타입을 제작하는 방법에 대해 알려드리도록 하겠습니다.




아두이노와 ProtoPie로 새로운 세상 창조하기


메이커들은 학습 곡선이 적당하여 코드 작성을 익히는데 어렵지 않고, 영감을 주는 프로덕트들이 정기적으로 공유되는 활성화된 사용자 커뮤니티를 갖춘 아두이노(영문)를 좋아합니다.
그러나 아두이노를 소프트웨어 프로토타입 (사용자가 상호 작용하는 프로토타입을 실행하는 디스플레이) 과 함께 사용하는 것은 복잡하고 부담스러운 프로세스가 될 수 있는데요. ProtoPie를 사용하여 이 작업을 쉽게 수행할 수 있는 방법을 보여 드릴게요.

ProtoPie에는 3개의 핵심 요소 (Studio, Player 및 Cloud) 와 하나의 익스텐션 (Connect) 이 있는데요.

각 요소의 역할은 아래와 같습니다.

ProtoPie Studio: 인터랙션 구현하기
ProtoPie Player: 스마트 디바이스에서 프로토타입 실행하기
ProtoPie Cloud: 프로토타입을 온라인에 저장하고 팀과 협업하기
ProtoPie Connect: 복수의 장치, 디스플레이 및 하드웨어에서 동시에 프로토타입 실행하기

아래 예시에서 보이는 것처럼, ProtoPie Connect를 통해 소프트웨어 프로토타입이 아두이노 셋업과 신호를 주고받을 수 있습니다.



이번 예시에서는, 추억의 게임 중 하나인 갤러가 (Galaga)(영문)의 프로토타입과 DIY 아두이노 게임 패드를 사용하여 위 셋업을 직접 구축하는 방법에 대해 설명해 보겠습니다.

참고: 아두이노는 일반적으로 코딩이 어느 정도 사용되지만, 너무 심층적으로 갈 필요는 없다고 생각합니다. 프로토타입이 의도한 대로 작동하는 것만으로도 충분합니다.

코딩이 필요한 경우, 구글에서 따라서 쓸 수 있는 예시를 찾을 수 있습니다.




아두이노 환경 설정


가장 기본적이고 인기 있는 보드 중 하나인 아두이노 우노 보드를 준비하세요. 아두이노 우노 보드에는 6 개의 아날로그 입력 핀과 14 개의 디지털 입력/출력 핀이 있습니다. 해당 예시에서는 아두이노 우노 보드 외에 아래와 같은 부품을 사용할 예정입니다.

▶ 브레드보드 1개
▶ 푸시버튼 2개
▶ 저항기 2개 (10kΩ): 푸시버튼용
▶ 조이스틱 모듈 1개
▶ 저항기 1개 (1kΩ): 조이스틱용
▶ USB 케이블 (B 타입 ->A 타입 변환용): 노트북 연결용
▶ USB 어댑터 (A 타입 -> C 타입/마이크로 변환용): 안드로이드 장치 연결용
▶ 점퍼 와이어

전자 부품을 조립하려면 기본적으로 핀홀이 많은 플라스틱 보드인 브레드보드가 필요합니다. 핀은 수직 및 수평으로 연결되므로, 회로를 만들기 위해 각 전자 부품을 종단 간 와이어링이 필요하지 않습니다.


브레드보드: 노란색 점은 핀홀이 서로 어떻게 연결되어 있는지 보여줍니다.


푸시버튼, 조이스틱 또는 LED와 같은 전자 부품을 사용할 때마다 각 회로의 중간에 저항기를 배치해야 합니다. 이는 과전류로 인해 전자 부품이 손상되는 되는 것을 방지하기 위함입니다.


이제 아래 다이어그램을 사용하여 부품을 연결하고, 점퍼 와이어를 사용하여 하나씩 배선해 보겠습니다. 마치 전기 엔지니어처럼요.

브레드보드 다이어그램: 전자 부품 조립 방법
조립 후 셋업 조립이 완료되면 위와 같은 셋업이 나와야 합니다.


조립이 완료되면 위와 같은 셋업이 나와야 합니다.

이제 전기 엔지니어에서 소프트웨어 엔지니어로 변신할 차례입니다. 우선 코드를 작성하고 조정하려면 컴퓨터에 아두이노 IDE(영문)를 설치하세요.

설치가 완료되면, 필요한 코드를 복사하여 붙여 넣으세요. (아래 코드 참조)




#include <PinChangeInterrupt.h>

//Define pins
const int pinA = 2; //A button
const int pinB = 3; //B button

const int X = A0; //Joystick X
const int Y = A1; //Joystic Y
const int Key = 8; //Joystic key button

void  sendA( )  {
   delayMicroseconds(10000); //to avoid chattering effect
   int buttonA = digitalRead(pinA);
   if  (buttonA == 1)  {
     Serial.println("a"); //Send "a" to ProtoPie
   }
}

void sendB() {
   delayMicroseconds(10000); //to avoid chattering effect
   int buttonB = digitalRead(pinB);
   if (buttonB == 1) { Serial.println("b"); //Send "b" to ProtoPie } }

void setup() {
   Serial.begin(9600);

   pinMode(pinA, INPUT);
   pinMode(pinB, INPUT);

   pinMode(Key, INPUT);
   
   attachInterrupt(digitalPinToInterrupt(pinA), sendA, RISING); //Send a signal once
   attachInterrupt(digitalPinToInterrupt(pinB), sendB, RISING); //Send a signal once

}

void loop( ) {

   int xVal = analogRead (X);
   int yVal = analogRead (Y);
   int buttonVal = digitalRead (Key);
   
if (xVal < 300)  {
   Serial.println("left"); //Send "left" to ProtoPie
   delay(500); //Send a signal per 500ms to avoid chatting effect
}

if (xVal > 723) {
  Serial.println("right"); //Send "right" to ProtoPie
  delay(500); //Send a signal per 500ms to avoid chatting effect
}

if (yVal < 300) {
  Serial.println("up"); //Send "up" to ProtoPie
  delay(500); //Send a signal per 500ms to avoid chatting effect
}

if (yVal > 723) {
   Serial.println("down"); //Send "down" to ProtoPie
   delay(500); //Send a signal per 500ms to avoid chatting effect
}

if (buttonVal == LOW) {
  Serial.println ("press"); //Send "press" to ProtoPie
  delay(500); //Send a signal per 500ms to avoid chatting effect
  }
}




USB 케이블을 통해 아두이노 보드를 컴퓨터에 연결한 후, 이 스케치 (아두이노 보드에서 실행되는 코드)를 보드에 업로드합니다. 시작하기 전, 먼저 아두이노를 더 잘 이해하고 싶다면  아두이노 우노(영문)에 대해 자세히 알아보세요.

▶ “Sketch > Verify/Compile”으로 이동하여 스케치를 확인합니다.
▶ “Sketch > Upload”로 이동하여 스케치를 업로드합니다.
업로드 후, “Tools > Serial Monitor”로 이동하여 하드웨어가 Serial Monitor에서 제대로 작동하는지 테스트합니다.
푸시버튼을 누른 상태에서, 조이스틱을 움직여 모니터 창에 신호가 들어오는지 확인합니다.




소프트웨어 셋업


이제 거의 다 완료되었습니다. 이제 모바일에 ProtoPie Player(영문)를, 데스크톱에 ProtoPie Connect를 설치해야 합니다(ProtoPie Connect를 사용하려면 직접 연락 주세요). 이 예시는 안드로이드 및 iOS 디바이스에서 작동 가능합니다. 

여기(영문)를 클릭하여 Protopie Connect에서 ProtoPie 와 아두이노를 연결하는 법에 대해 더 알아보세요.

또한, ProtoPie Studio를 사용하여 파이 파일 자체를 다운로드하고 원하는 대로 조정할 수 있습니다.

ProtoPie 다운로드
갤러가(Galaga) 프로토타입 다운로드




ProtoPie Connect를 통해 아두이노와 ProtoPie Player 연결


1. USB 케이블을 사용하여 노트북, 아두이노 우노 및 모바일 장치를 연결하세요.


ProtoPie Player, 아두이노, 노트북 연결하기


 2. 아두이노 스케치 (아두이노 IDE)에서 아두이노 우노로 아두이노 코드를 보냅니다.
 3. “...”를 클릭하여 아두이노를 ProtoPie Connect와 연결 후, PortBaud rate를 아래와 같이 선택하세요.

아두이노 IDE에서 시리얼 모니터가 켜져 있으면 연결이 되지 않으므로, 먼저 시리얼 모니터를 꺼주세요.


아두이노를 ProtoPie Connect와 연결하기


 4. New 버튼을 클릭하여 Pie 파일을 ProtoPie Connect에 업로드합니다.
 5. 마지막 단계는 모바일에서 ProtoPie Player를 열고 ProtoPie Connect에서 장치 USB 버튼을 클릭하여, 프로토타입이 Connect에서 Player에 동기화되었음을 확인합니다.

동일한 Wi-Fi 네트워크를 통해 ProtoPie PlayerProtoPie Connect와 연결할 수도 있습니다.


ProtoPie Connect의 프로토타입을 Player에 동기화하기


다 끝나셨나요? 이제 모든 준비가 완료되었습니다!




프로젝트 완료를 축하드립니다!


첫 번째 하드웨어 및 소프트웨어 연동 프로토타입을 성공적으로 실행한 것을 축하합니다. 이제 
ProtoPie와 아두이노를 사용하여 다양한 프로토타입을 구현할 수 있게 되었습니다. 

코딩 기술이 디자이너가 아이디어를 탐구하고 검증하는 데 방해가 되는 장벽이 되어서는 안 됩니다. 
ProtoPie에서는 엔지니어가 아니어도 얼마든지 프로토타이핑을 할 수 있습니다. 자신의 기술과 역량, 그리고 다른 사람들로부터 얻을 수 인사이트를 조합해 보세요. ProtoPie
와 아두이노를 작동시키는 프로세스에 익숙해지면, 더 고도화된 프로토타입을 더 빠르게 구현할 수 있습니다.




아두이노에 대해 더 알아보고 싶다면?


아두이노 프로젝트 허브(영문): 다양한 프로젝트 탐색 및 기존 스케치 사용하기
아두이노 포럼(영문): 전문가에게 물어보기
Fritzing(영문): 아두이노 보드 시뮬레이션 및 회로도 그리기
Arduino Prototyping with ProtoPie(영문): 아두이노에 대한 다른 블로그 아티클 읽어보기




ProtoPie 도입에 대해 더 알고 싶다면?


ProtoPie는 다양한 업계의 프로토타이핑 요구를 해결하고 싶습니다.
자동차 혹은 커넥티드 가전제품처럼 IoT가 많이 사용되는 업계의 API, 하드웨어, 그리고 소프트웨어를 통합하기 위한 프로토타이핑 솔루션이 필요한 경우, 언제든지 여기를 통해 문의사항을 남겨주세요.




The ProtoPie Automotive Solution


ProtoPie Automotive Solution은 자동차 산업의 요구에 맞게 조정된 프로토타이핑 솔루션으로, 모든 하드웨어 및 API와 통합한 상태로 복수의 디스플레이에서 프로토타입을 제작하고 테스트할 수 있습니다.


ProtoPie Automotive Solution을 통해, 자동차 관련 기업들은 고도화된 기능들을 더 빠르게 테스트하고 시장에 출시할 수 있게 되었습니다.


ProtoPie Automotive Solution에 대해 자세히 알아보기



ProtoPie 평생 무료로 사용하기

매거진의 이전글 ProtoPie에서 타이핑 효과 제작하는 법
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari