S4A 스크래치로 아두이노 제어(아두이노)

온라인 가상시뮬레이터 : https://www.tinkercad.com

오늘은 여러 종류의 스크래치가 있으며 그 중에 S4A 스크래치를 이용하여 아두이노를 제어하는 방법을 간단히 살펴보는 시간을 갖도록 하겠습니다. 집에 S4A가 설치되어 있어서 그냥 이 S4A 스크래치 프로그램으로 아두이노를 제어했네요. 다른 스크래치 프로그램으로도 아두이노를 제어를 할 수 있으니 다른 스크래치 프로그램으로 제어하고 싶다면 해당 아두이노 펌웨어 소스로 아두이노에 프로그램을 이식 시키면 됩니다.

그러면 S4A 스크래치로 간단히 아두이노를 제어를 해봅시다.

1. S4A 스크래치

스크래치 프로그램은 아이들에게 그래픽 환경에서 코딩을 배우는 목적으로 설계된 교육용 소프트웨어입니다. 스크래치는 배경 이미지 위에 다수의 스프라이트라는 창에 있는 이미지를 겹쳐 쌓는 형태로 해서 한장의 이미지가 완성 됩니다. 여기서 개별 이미지는 움직이는 동작을 부여 할 수 있는데 이때 블록 코딩을 통해 이미지에 살아 움직이는 효과를 표현합니다. 쉽게말하면, 애니메이션과 같은 작업을 블록 코딩으로 한다고 생각하시면 됩니다. 애니메이션에서 각 장면 장면들을 그리면서 그림에 움직이는 효과를 표현하잖아요. 그와 마찬가지로 스크래치도 각 장면 장면들을 블록 코딩으로 통해 이미지를 그리거나 이동시켜서 애니메이션과 같은 움직이는 효과를 표현 한다고 생각하시면 됩니다.

alt

위 그림처럼 배경 이미지 위에 개별 스프라이트 창에 고양이와 곤충 이미지 그림이 있습니다. 배경이 이미지 위에 고양이와 곤충이 배치 된 한장의 그림입니다. 여기서 고양이와 곤충을 개별적으로 블록 코딩이 하여 움직임을 부여 하여 애니메이션 효과로 표현 할 수 있습니다. 보면 이미지가 무대창, 스프라이트창으로 이미지가 개별적으로 나뉩니다. 그 이유는 각 창마다 블록 코딩을 개별적으로 하기 위해서 입니다. 진짜 이 프로그램이 대단한 것은 각 창마다 개별 코딩을 하는데 독립적인 동작을 개별적으로 처리 합니다. 우리가 프로그램 언어로 사용하여 이 개념을 코딩하려면 동시에 작업을 처리하는 코딩은 복잡해 지는데 이 복잡한 코딩을 스크래치는 내부에서 기본 바탕으로 세팅 되어 있어 동시 작업 처리에 대한 복잡한 생각을 할 필요가 없습니다. 각 이미지 별로 독립적인 개별 동작 코딩만 하면 되기 때문에 쉽게 코딩을 할 수 있습니다. 단점은 동시에 처리 시 우선 순위를 정하는 작업이 어렵습니다. 즉, 고양이와 곤충이 서로 충돌하는 장면을 연출한다고 해봅시다. 여기서 고양이와 곤충이 충돌 처리 동작 코딩이 복잡해 지는데 고양이가 곤충 충돌이 먼저 일어 났는지 곤충이 고양이와 충돌이 먼저 일어 났는지에 따라 결과가 달라지기 때문에 이 부분은 좀 복잡해 집니다. 스크래치도 동시 처리라고 하지만 실제 실행시키면 고양이와 곤충의 충돌 이벤트 시간이 다릅니다. 먼저 시작하는 쪽이 고양이 일지 곤충일지는 상황마다 다릅니다. 단지 인간이 감지했을 때 동시처리 되는 것처럼 보일 뿐이죠. 이게 왜! 단점이냐면요. 예를 들어 우주선 게임이 있는데 우주선에서 총알이 발사 됩니다 여기서 총알이미지가 몬스터와의 충돌 이벤트 처리가 어렵고 문제가 발생 할 수 있습니다. 총알은 몬스터에 충돌하면 사라지는 코딩을 넣고 몬스터는 총알과 총돌하면 피가 깍이거나 죽는 코딩을 넣는다고 상상해 봅시다. 이때 총알이 먼저 몬스터에 충돌하는 이벤트가 실행하면 총알이 사라질 때 몬스터 코딩에서는 총알이 충돌을 감지 못 할 수 있습니다. 총알은 몬스터에 공격하는데 몬스터는 총알이 총돌했는지 감지하기 전에 총알이 먼저 사라지기 때문에 몬스터 입장에서는 충돌 이벤트가 발생하지 않게 됩니다. 스크래치는 개별 코딩으로 동시처리 하지만 개별 코딩에서 서로 영향을 미치는 코딩에서는 처리하기가 복잡해 집니다.

사설은 이만하고, 이제 애니메이션 처럼 그림을 움직이게 해봅시다.

alt

위 그림에서 보는 것 처럼 스크립트라는 창에다 왼쪽 블록들을 배치하여 고양이 스프라이트가 움직이게 합니다.

[블록 코딩]

블록 내용은 클릭이 되면 실행아래 블록들이 실행 됩니다. 여기서 제일 먼저 무한반복 블록이 실행된는데 무한 반복 블록 안에 잇는 동작을 순차적으로 실행하고 그 과정을 무한 반복하게 됩니다. 어떤 동작을 무한 반복하는지 볼까요. 현재 스프라이트를 x좌표로 20만큼 이동한 후 0.5초 후 다시 x좌표로 -20만큼 이동하고 0.5초 대기합니다. 이 과정을 무한 반복하라는 블록 코딩입니다. 그러면 배경이미지 기준으로 고양이 스프라이트 이미지가 x축으로 +20, -20으로 왔다 갔다하게 됨으로 고양이가 움직이는 애니메이션처럼 움직이게 됩니다. 여기서, 좀 더 디테일적으로 표현하면 고양이를 길이미지를 만들어 놓고 그 위에서 걸어가게도 할 수 있으며 고양이가 걷거, 뛰기, 점프(중력), 소리 효과도 부여할 수 있는데 그걸 넣으면 복잡해 보일 수 있기 때문에 단순히 좌/우로 움직이는 간단한 표현만 코딩했네요. 지금 스크래치 post가 아니고 아두이노를 제어하는 것이 목적임으로 이 내용은 생략합니다.

공부를 하고 싶으신 분들은 MIT 공대에서 만든 아래 스크래치 사이트에 가셔서 온라인 상에서 연습 해보세요. 튜토리얼이 잘 나와 있기 때문에 여러분들이 이곳에서 따라 연습해 보시면 이해하실 수 있을 꺼에요. 스크래치에 대해 post 한 것 같은데 기억이 잘 안나서 다시 이야기 합니다.

온라인 스크래치 : https://scratch.mit.edu/
강좌 생활코딩 : https://opentutorials.org/course/1415

생활코딩 강좌에 가시면 이 강좌를 만드신 분이 아주 자세히 영상물로 설명하고 있어서 성인 기준 반나절이면 충분히 마스터 할 거라 생각됩니다.

추가로,

스크래치 COS 자격증 : https://www.ybmit.com
샘풀 문제 : https://www.ybmit.com/cos_pro/cos_pro_r_test.jsp

자격증 문제인데 샘풀문제를 한번 풀어보세요. 주기적으로 이전 시험 출제 문제들을 공개하는데 한번 문제를 풀어보는 것도 재밌을 꺼에요. 1급은 좀 난이도가 있더군요. 초등학생 수준은 3급 자격증이고 1~2급은 어느정도 연습과 코딩 능력을 갖춰야 할 수준이고요.

2. S4A 스크래치 설치 및 아두이노 펌웨어

S4A 스크래치 공식 사이트 : http://s4a.cat/

위 사이트에 가셔서 다운로드 페이지로 넘어가시면 아래와 같은 창이 뜹니다.

alt

설치 운영체제를 선택하는데 전 윈도우라서 윈도우 설치 프로그램 다운 받았으며 아두이노우노에 펌웨어 소스는 아래 표시된 곳에서 다운로드 받으시면 됩니다. 아두이노 소스가 다운로드 됩니다.

1) 아두이노우노에 펌웨어 시키기

alt

위 S4A 공식 사이트에서 다운 받은 소스를 아두이노 IDE에서 위 그림처럼 S4AFirmware16이라는 소스를 업로드 시키면 됩니다. 이렇게 하면 아두이노우노 세팅은 끝납니다. 아주 간단하지요. 참고로 S4A 스크래치 프로그램을 실행 시킨 상태에서는 하지 마세요. 아두이노 IDE에서 먼저 세팅 해 놓고 나서 펌웨어가 성공하면 그다음에 S4A 스크래치 실행 시키기 바랍니다.

2) S4A 스크래치 실행

아두이노우노가 PC에 연결된 상태이면 아래 왼쪽 그림처럼 보드 검색 중인 상태 표시가 처음 표시 됩니다 그리고 자체적으로 인식 작업을 수행하고 아두이노우노가 인식을 하게 되면 오른쪽 그림처럼 아두이노우노가 일부 핀값들의 값들이 읽어와 표시 됩니다. 수치 변화가 실시간으로 이루어지면 정상적으로 아두이노우노가 인식했다고 보시면 됩니다. 이 수치는 아두이노칩 자체에 전류가 공급되면 각 핀마다 미세하지만 전류가 흐르게 됩니다. 일종의 노이즈가라고 생각하시면 돼요. 노이즈 값들이 실시간으로 읽어온다고 생각하시면 될 듯 싶네요.

alt

3. S4A 스크래치에서 아두이노 우노 동작시키기

간단히 Blink 예제를 실행 시켜 볼까요.

[Blink 예제]

void setup() { 
  pinMode(13, OUTPUT);
}

void loop() {
  digitalWrite(13, HIGH);  
  delay(1000);               
  digitalWrite(13, LOW);  
  delay(1000);               
}

[S4A 스크래치 블록 Blink 예제]

두 코딩을 비교하면 아래 블록 코딩이 쉬워 보일꺼에요. 하지만 전 블록 코딩을 싫어 합니다. 제가 원하는 위치에 원하는 선언과 코딩을 하는데 약간 제약이 따르고 정해진 블록으로만 상상코딩을 해야 하기 때문에 상상코딩에 장애요인으로 저에게 오더군요. 익숙치 않는 원인도 있겠지만 왠지 이런식으로 코딩하면 뭔가 막힌 것 같은 코딩이 되어서 블록 코딩은 싫어 합니다. 하지만 비전공자나 아이들의 경우는 이런 코딩이 더 쉽고 편할 수 있습니다.

아무튼 스크래치로 아두이노를 제어 할 경우 실시간으로 반응을 체크 할 수 있는 장점이 있습니다. 방금 블록 코딩한 13번핀에 LED을 깜박이게 하는 동작을 수행 할 때 아두이노에 다시 프로그램을 이식할 필요 없이 바로 제어가 됩니다. A0핀에 센서를 읽고 싶다면 아날로그 읽기블록을 배치하면 바로 A0에 연결된 센서값을 읽어오게 됩니다. 실시간 코딩으로 실시간 반응을 확인할 수 있어 스크래치로 아두이노를 제어가 더 재밌을 수 있습니다. 실시간 처리가 가능한 이유는 이미 아두이노우노를 펌웨어 할 때 각 핀의 역할을 사전에 지정해 놓았기 때문입니다. 이미 디지털핀과 아날로그 핀 동작을 스크래치 블록에 맞게 세팅되어 활성화 된 상태이기 때문에 해당 블록을 사용하면 해당 핀 동작을 실시간으로 결과를 얻게되는 구조이지요. 문제는 특정 핀을 특정 동작만 하고 다른 동작을 수행할 수 없어 강제성을 갖고 있다는 점이 단점이라고 할 수 있습니다.

[결과]
alt

추가로, tinkercad 가상시뮬레이터 실험

alt

tinkercad 에서도 아두이노 우노를 위 그림처럼 블록 코딩이 가능합니다. 예전에 tinkecad 가상시뮬레이터를 소개 할때 이 부분을 설명했지만 이번 post내용에 연결되는 부분이라 다시 거론합니다.

[결과]

가상시뮬레이터에서도 연습이 되니깐 혹시 아두이노우노가 없으시다면 가싱시뮬레이터에서 블록 코딩을 해보세요.

마무리

스크래치에 그려진 이미지와 아두이노를 연동하여 재밌는 간단한 표현까지 post 하려고 했더니 잡이야기를 하다보니 post가 길어졌네요. 다음 post에서는 간단히 고양이 이미지를 만들고 고양이를 아두이노로 조정해보는 내용으로 post 하겠습니다. 고양이 움직임에 대해 간단히 상황을 설정하고 아두이노에서 조정하려면 몇가지 아두이노에서도 설정해야 하기 때문에 좀 내용이 애매하게 길어질 것 같아서 오늘 내용은 여기서 멈추겠습니다. 사실 하루치 post로 간단히 소개만 하고 넘어 가려고 했는데 좀 길어졌네요.

S4A와 연동한 아두이노는 스프라이트 이미지로 아두이노우노를 제어 할 수 있고 반대로 아두이노우노에서 스프라이트 이미지를 제어 할 수 있습니다. 쌍방 통신이 가능하여 상상하는 목적에 따라서 다양한 결과물을 얻을 수 있기 때문에 한번 사용해 보셨으면 합니다.