소개
점점 더 우리의 디지털 경험은 컴퓨터와 모바일 화면을 넘어 확장되고 있습니다. 디자인에 물리적 컨트롤을 넣고 싶다고 해봅시다… 버튼… 돌릴 수 있는 노브… 손으로 터치하고 손가락을 쓸어 움직일 수 있는 바. Arduino Uno 같은 저렴한 컴퓨팅 보드는 실험해 보려는 사람들에게 이런 가능성을 점점 더 쉽게 만들어 주고 있습니다.
이 튜토리얼에서는 터치스크린이나 돌리고 클릭할 수 있는 물리적 노브로 조작할 수 있는 기후 제어 프로토타입을 다룹니다. 이런 장치는 로터리 엔코더라고 하며, 용어를 들어본 적이 없더라도 분명 한 번쯤은 사용해 보셨을 것입니다. 노브를 돌릴 때 손끝으로 클릭되는 느낌을 받을 수 있습니다. 노브를 돌릴 때 느껴지는 클릭마다 무언가가 한 단계씩 증가하거나 감소합니다. 예를 들어 자동차 오디오 시스템의 볼륨 조절처럼요.
배울 내용
이 튜토리얼에서는 다음 내용을 다룹니다:
Blokdots란 무엇인가요?
Arduino 회로 배선하기
ProtoPie Connect를 통해 Blokdots로 Pie에 메시지 보내기
**소요 시간: 30~60분
**이 시간은 Arduino 회로 배선 경험에 따라 달라집니다.
Blokdots
보통 Arduino를 사용할 때는 약간의 코딩이 필요합니다. 코드를 조금이라도 쓰는 생각만으로도 산으로 도망가고 싶다면, 대안이 있습니다. Blokdots는 컴퓨터에서 실행되는 프로그램으로, 어떤 코드도 작성할 필요 없이 Arduino를 프로그래밍할 수 있게 해줍니다. 가장 좋은 소식은 무엇일까요? ProtoPie Connect와의 통합이 기본으로 포함되어 있어, 물리적 장치와의 상호작용에 Pie가 아주 빠르게 반응하도록 만들 수 있다는 점입니다.
Blokdots - 코드 없이 Arduino 프로그래밍... 익숙하지 않나요?
이 글을 쓰는 시점에서 Blokdots는 아직 베타 버전이지만, 물리적 장치를 다루는 일이 얼마나 빠르고 쉬운지 이미 충분히 보여주고 있습니다.
필요한 부품
이전까지의 모든 레슨은 ProtoPie 라이선스 외에 추가 구매가 필요하지 않았습니다. 이 튜토리얼을 따라 하려면 여러 부품을 준비해야 합니다:
TL;DR — 저는 완전 초보예요. 쉽게 해주세요.
공식 Arduino 스타터 키트만 사면 이 프로젝트에 필요한 거의 모든 것이 들어 있고, 여기에 이 로터리 엔코더들 한 팩도 함께 필요합니다.
배선해 봅시다!
Blokdots가 코딩 부분은 알아서 처리해 주지만, 배선을 직접 연결하는 일은 여전히 여러분의 몫입니다. 간단한 작업이라면 어렵지 않으며, 작동 원리를 정확히 이해하지 않아도 Arduino 보드에 부품을 어떻게 연결해야 하는지 정확히 보여 주는 회로도를 온라인에서 쉽게 찾을 수 있을 가능성이 큽니다.
아래 도면을 따라 Arduino 회로를 배선하세요.
💡 조금 더 자세한 안내가 필요하다면, 영상 아래에 자세한 설명이 있습니다.
시작해 봅시다!
Blokdots.com을 방문해 오른쪽 상단의 노란색 다운로드 버튼을 클릭하세요. Blokdots는 아직 베타 버전이므로 새 기능과 수정 사항이 포함된 업데이트가 자주 배포됩니다. 업데이트는 자주 확인하세요.
둘째, 완성된 상태의 Pie 파일을 사용합니다. 여기에서 다운로드하세요:
https://cloud.protopie.io/p/35d69ddd96
이제 아래 영상을 따라 해보세요:
시도해 볼 것
Pie는 팬 속도를 높일 때 반시계 방향 회전을 사용하지만, 물리적 컨트롤을 사용할 때는 엔코더를 시계 방향으로 돌리게 됩니다. 팬 속도 조절 노브가 온도 조절과 반대로 작동하도록 만들 수 있는지 확인해 보세요. 즉, 팬 속도를 높일 때는 반시계 방향으로 돌리고, 낮출 때는 시계 방향으로 돌리게 하는 것입니다.
두 번째 버튼이 배선되어 있지만 아직 사용하지 않고 있습니다. 이것으로 무엇을 할 수 있을까요?
도와주세요! 회로를 어떻게 배선하나요?!
회로 배선이 익숙하지 않더라도 걱정하지 마세요! 아래에는 회로에 사용되는 모든 부품에 대한 설명과, 전체를 어떻게 연결하는지에 대한 자세한 안내가 있습니다.
Arduino 알아보기
Arduino는 부품을 쉽게 연결할 수 있도록 설계되었습니다.
상단에는 여러 개의 커넥터가 있습니다. 이것이 디지털 커넥터이며, 번호가 명확하게 표시되어 있습니다. 이 중 여러 개를 사용해 엔코더를 연결할 것입니다.
하단에는 “POWER.”라고 표시된 커넥터 그룹이 있습니다. 여기서는 “5V”와 “GND.”라고 표시된 커넥터를 사용할 것입니다.
브레드보드 설명
모든 것을 연결하기 위해 “브레드보드”라는 것을 사용할 것입니다. 브레드보드는 부품을 납땜하지 않고도 전자 부품을 쉽게 연결할 수 있게 해줍니다.
Arduino Starter Kit에는 아래 이미지와 매우 비슷한 브레드보드가 들어 있습니다. 이는 구멍이 격자 형태로 배열되어 있습니다:
특정 구멍 그룹이 서로 연결되어 있다는 점을 이해하는 것이 중요합니다. 위쪽에는 두 줄의 구멍이 있고, 아래쪽에도 두 줄의 구멍이 있습니다. 양쪽 끝에는 +와 –로 표시되어 있습니다. 이 네 줄 각각의 구멍은 서로 연결되어 있습니다. 일반적으로 이 줄들은 프로젝트에 전원을 연결하는 데 사용합니다. 맨 위 줄의 ANY 구멍에 전원 공급원을 연결하면, 맨 위 줄의 다른 모든 연결된 부분도 그 전원을 사용하게 됩니다.
가운데의 구멍들은 세로로 5개씩 묶인 그룹으로 배열되어 있습니다. 이 5개짜리 그룹들도 서로 연결되어 있습니다. 부품을 이 그룹들에 꽂고, 전선으로 5개 그룹과 전원 레일 사이를 연결합니다.
위쪽 두 줄과 아래쪽 두 줄은 각각 가로로 서로 연결되어 있습니다(파란색 선). 세로로 된 5개 그룹도 각각 서로 연결되어 있습니다(자홍색 선).
로터리 엔코더
로터리 엔코더는 돌릴 때 클릭되는 특별한 종류의 노브입니다. 이 프로젝트에 사용되는 것들은 누를 수도 있습니다.
연결 핀은 모두 5개이며, 각각 명확하게 표시되어 있습니다:
왼쪽에서 오른쪽으로:
GND - 접지 핀입니다. Arduino의 GND 커넥터에 연결합니다
+ - 전압 핀입니다. Arduino의 5V 커넥터에 연결합니다
SW - 노브의 푸시 버튼이 눌렸을 때를 감지하는 핀입니다. Arduino의 디지털 커넥터 중 하나에 연결합니다
DT - 엔코더의 데이터 핀입니다. Arduino의 디지털 커넥터 중 하나에 연결합니다
CLK - 엔코더의 클럭 핀입니다. Arduino의 디지털 커넥터 중 하나에 연결합니다
💡 DT와 CLK가 실제로 어떻게 동작하는지 이해할 필요는 없습니다. 중요한 것은 Blokdots와 엔코더를 사용할 때 DT와 CLK 핀을 Arduino의 연속된 디지털 커넥터에 연결해야 한다는 점입니다. 예를 들어 DT 핀이 Digital 3에 연결되어 있다면, CLK 핀은 Digital 4에 연결되어야 합니다. 이 부분은 모든 배선을 마칠 때 다시 설명하겠습니다.
엔코더의 핀은 브레드보드에 딱 맞게 꽂을 수 있습니다!
이제 두 엔코더를 브레드보드에 꽂으세요. 엔코더의 각 핀이 서로 다른 세로 5개 그룹에 연결되도록 꽂으면 됩니다.
점퍼 와이어
퍼즐의 마지막 조각은 모든 것을 연결해 주는 전선입니다. Arduino Starter Kit에는 다양한 길이의 점퍼 와이어가 들어 있습니다. 어떤 색을 사용하든 상관없습니다. 전선은 전선일 뿐이니까요. 다만 색상은 프로젝트의 각 부분을 식별하는 데 도움이 됩니다. 예를 들어 빨간색 전선은 보통 전원(좀 더 정확히는 전압)을 나타내는 데 사용됩니다. 여러분에게 가장 잘 맞는 색상 체계를 자유롭게 사용하세요.
Arduino Starter Kit에는 다양한 길이와 색상의 점퍼 와이어가 들어 있습니다.
도면을 따라 배선하기
위에서 본 배선도를 기억하시나요? 도면과 동일하게 전선을 연결하세요. 사용하는 전선의 색은 중요하지 않으므로, 아래와 같은 색이 없더라도 다른 색을 사용하면 됩니다.
브레드보드에 전원을 공급하세요:
Arduino의 5V 커넥터에서 전선을 하나 연결해 아래쪽 줄(“+”로 표시된 줄)의 ANY 구멍에 꽂습니다. 이 줄이 전원 레일입니다.
Arduino의 GND 커넥터 중 하나에서 전선을 하나 연결해 아래에서 두 번째 줄(“–”로 표시된 줄)의 ANY 구멍에 꽂습니다. 이 줄이 접지 레일입니다.
프로젝트의 방향이 도면과 동일하다면, 지금 엔코더는 여러분에게서 등을 돌린 상태입니다. 따라서 이 시점에서 왼쪽에서 오른쪽으로 핀 순서는 다음과 같습니다:
CLK
DT
SW
GND
**인코더 1 배선:** **
접지 레일의 ANY 구멍에서 엔코더의 GND 핀이 꽂힌 5개 그룹의 ANY 구멍까지 전선 하나를 연결합니다.
전원 레일의 ANY 구멍에서 엔코더의 + 핀이 꽂힌 5개 그룹의 ANY 구멍까지 전선 하나를 연결합니다.
Arduino의 Digital 2 커넥터에서 엔코더의 SW 핀이 꽂힌 5개 그룹의 ANY 구멍까지 전선 하나를 연결합니다.
Arduino의 Digital 3 커넥터에서 엔코더의 DT 핀이 꽂힌 5개 그룹의 ANY 구멍까지 전선 하나를 연결합니다.
Blokdots는 엔코더가 연속된 커넥터를 사용해야 한다고 했던 것 기억하시나요? DT 핀이 Digital 3에 연결되어 있으므로, CLK 핀은 Digital 4에 연결되어야 합니다. Arduino의 Digital 4 커넥터에서 엔코더의 CLK 핀이 꽂힌 5개 그룹의 ANY 구멍까지 전선 하나를 연결합니다.
**인코더 2 배선:** **
접지 레일의 ANY 구멍에서 엔코더의 GND 핀이 꽂힌 5개 그룹의 ANY 구멍까지 전선 하나를 연결합니다.
전원 레일의 ANY 구멍에서 엔코더의 + 핀이 꽂힌 5개 그룹의 ANY 구멍까지 전선 하나를 연결합니다.
Arduino의 Digital 5 커넥터에서 엔코더의 SW 핀이 꽂힌 5개 그룹의 ANY 구멍까지 전선 하나를 연결합니다.
Arduino의 Digital 6 커넥터에서 엔코더의 DT 핀이 꽂힌 5개 그룹의 ANY 구멍까지 전선 하나를 연결합니다.
이전과 마찬가지로, CLK 핀을 Arduino의 다음 연속 디지털 커넥터에 연결해야 합니다. Arduino의 Digital 7 커넥터에서 엔코더의 CLK 핀이 꽂힌 5개 그룹의 ANY 구멍까지 전선 하나를 연결합니다.
모든 것을 올바르게 했다면 다음과 비슷하게 보일 것입니다:
잘하셨습니다! ProtoPie Connect를 사용해 Blokdots로 첫 번째 Arduino 프로젝트를 연결했습니다. Intro to ProtoPie Connect 4 of 7: Arduino Part 2 - 나만의 스케치 코드 작성하기에서 이걸로 또 무엇을 할 수 있는지 살펴봅시다.
