CO:BIT TRAINING KIT 기초강좌 2: LED스크린을 활용해 보자.

 LED를 알아보자.

요즘 거실이나 방에 조명으로 많이 사용하는 LED(발광 다이오드)는 전기가 통하면 흰색, 빨간색, 노란색 등 다양한 빛을 낼 수 있습니다. LED는 신호등이나 버스 안내판 같은 곳에 사용되고 있습니다. 또한 광고판으로도 많이 사용하고 있습니다. LED 여러개를 디스플레이처럼 사용하는 것이죠. 상점, 지하철, 버스 등에서 많이 볼 수 있습니다. 이번 클래스에서는 micro:bit의 LED 스크린에 대해서 배워 봅시다. 

micro:bit의 LED 스크린

co:bit training kit의 머리역할을 하는 micro:bit에는, 가로 5줄 세로 5줄 이렇게 5×5 모두 25개의 LED가 micro:bit의 한쪽 면에 붙어 있습니다. 우리는 블럭 에디터를 사용해서 이 5×5 LED 스크린에 다양한 모양의 아이콘, 숫자, 글자 등을 나타낼 수 있습니다.  

준비물

이번 클래스의 준비물은 다음과 같습니다.

  • co:bit training kit 베이스 보드 (micro:bit 장착한 상태)
  • 마이크로 USB 케이블
  • 웹브라우저 연결 가능한 PC (맥북, 리눅스 포함) 혹은 크롬북

하드웨어를 준비해 봅시다. 

제일 먼저 co:bit 베이스 보드에 micro:bit를 장착을 합니다. 장착을 할 때는 micro:bit의 LED와 버튼이 위로가게 장착을 합니다.

그리고 PC와 co:bit 베이스보드를 마이크로 USB 케이블로 연결을 합니다. 그리고 PC에서 웹브라우저를 실행합니다. 웹브라우저는 마이크로소프트의 에지 혹은 익스플로러, 구글의 크롬 등 어떤 브라우저라도 상관이 없습니다.

그리고 웹브라우저에서 블럭코딩을 하기위해 블럭에디터 사이트로 갑니다. 여기까지 했으면 하드웨어 준비가 끝이 났습니다.

마이크로소프트 블럭 에디터 바로가기

 

 

코딩프로젝트 1: 자유낙하 표정 애니메이션   

프로젝트 개요

LED 스크린에는 웃는 얼굴, 하트모양, 화난 얼굴 등 여러가지 아이콘을 디스플레이 할 수 있습니다.  이번에는 co:bit 보드를 자유낙하 시켜서 바닥에 떨어졌을 때, LED 스크린에 “당황” 아이콘과 “화남” 아이콘, 2가지 표정의 아이콘을 이용해서 마치 LED 스크린이 표정을 바꾸는  것 같은 간단한 애니메이션을 코딩해 보겠습니다. 코드의 동작은 다음과 같습니다.

  • 코드가 실행되면 “Smile!”문자열을 스크롤 합니다.
  • 그리고는 “웃음” 아이콘이 표시됩니다. 
  • co:bit 보드를 책상에서 20cm 정도 들었다가 떨어뜨립니다. 
  • 그러면 LED 스크린에  “당황” 아이콘과 “화남” 아이콘이 0.1초 간격으로 4번  번갈아 가면서 디스플레이 됩니다. 
  • 이후에는 다시  “웃음” 아이콘이 표시됩니다.

참고로 블럭 에디터에서 “당화”, “화남”, “웃음” 아이콘은 다음에서 찾을 수 있습니다. 마우스를 아래 블럭의 아이콘 들  위로 가져가면 아이콘의 이름이 나타납니다. 

 

코딩을 완성했으면 아래 동영상과 같이 동작을 하면 됩니다. 

블럭코딩의 흐름도

프로젝트를 코딩하기 위해서 먼저 블럭코드의 흐름도를 봅시다.

블럭코딩 하기

제일 먼저 코드가 실행되면 LED 스크린에 “Smile!” 문자열을 스크롤 해야 합니다. 그리고 “웃음” 아이콘을 디스플레이 해야 합니다. 이 두가지를 하려면 다음과 같이 블럭을 사용하면 됩니다.

문자열을 스크롤 하기 위해서는 “문자열 출력” 블럭을 사용합니다. “웃음” 아이콘을 디스플레이 하기 위해서는 “아이콘 출력” 불럭을 사용합니다.  “웃음” 아이콘을 디스플레이 한 다음에는 자유낙하를 감지하는 코딩을 해야 합니다. 자유낙하는 말 그대로 높은 곳에서 물체가 높은 곳에서 떨어지는 것을 말합니다. 여기서는 co:bit 보드를 책상에서 30cm 정도 들었다가 떨어 뜨리면 됩니다. 블럭 에디터는 자유낙하를 감지하는 기능의 블럭을 제공합니다.

블럭영역에서 입력 블럭들 중에서 “움직임 감지하면 실행” 블럭이 이 일을 합니다. “움직임 감지하면 실행” 블럭에서 다음 그림처럼 자유낙하 항목을 선택할 수 있습니다. 

자유낙하 움직임이 감지되면 이 블럭과 이 블럭 내부에 있는 블럭들이 실행이 됩니다.  co:bit 보드를 자유낙하 시킬 때 실행되어야 할 것들은 다음과 같습니다.

  • “당황” 아이콘 디스플레이
  • 0.1초 쉬고
  • “화남” 아이콘 디스플레이
  • 0.1초 쉬고
  • 이것을 4회 반복하고 다시 “웃음” 디스플레이

잠깐 여기서 블럭 에디터에서 사용하는 “반복” 블럭을 알아 봅시다. 다음 블럭은 반복 횟수를 정할 수 있는 “반복” 블럭입니다. 블럭 영역에서 반복 그룹에 있습니다.

위에 말한 4회 반복을 하려면 다음과 같이 코딩하면 됩니다.

이 “반복” 블럭을 이제 “움직임 감지하면 실행” 블럭에 넣어 봅시다. 그리고 마지막에 “웃음” 아이콘 출력 하는 블럭도 넣어 봅시다. 완전히 완성하면 다음과 같은 블럭이 됩니다.

전체 프로젝트

전체 블럭 프로젝트는 아래와 같습니다. 맨 오른쪽 위 모서리에 있는 ‘편집’ 버튼을 클릭하면 자신의 컴퓨터로 전체 블럭 프로젝트가 임포트 됩니다.

따라해보기 
프로젝트를 약간 수정해서 스스로 코딩을 해 봅시다. 이번 프로젝트에서 아래 사항을 스스로 수정해서 코딩해 보기 바랍니다. 
  • 코드가 실행되면 “Shake!” 문자열이 스크롤 되도록 해 봅시다. 
  • 그리고 “하트” 아이콘이 디스플레이 되도록 해 봅시다. 
  • 프로젝트에서는 자유낙하가 감지되면 “당황” 아이콘과 “화남” 아이콘이 번갈아 디스플레이 되었는데, 이번에는 다른 아이콘 두개를 스스로 정해서 번갈아 디스플레이 되도록 코딩 해 봅시다. 
  • 즉 co:bit 보드를 흔들면 아이콘 애니메이션이 발생하는 것 입니다.  
  • 아이콘 애니메이션이 4번 실행되면 다시 “하트” 아이콘이 디스플레이 되도록 코딩 해 봅시다. 

코딩프로젝트 2: 가속도센서로 주사위 게임하기

프로젝트 개요

이번에는 co:bit 베이스 보드를 주사위로 만들어서 주사위 게임을 할 수 있도록 해 봅시다. 실제 주사위를 던지는 대신에 co:bit 베이스 보드를 한번 흔들면 1에서 6가지 숫자 중 임의의 한 숫자가 LED 스크린에 나타 나도록  하면 됩니다.

코드의 동작은 다음과 같습니다. 

  • 코드가 실행되면 “Dice…”문자열을 스크롤 합니다.
  • 그리고는 “하트” 아이콘이 표시됩니다. 
  • co:bit 보드를 흔들면 LED 스크린에 1~6 사이의 임의의 숫자가 2초간 디스플레이 됩니다.   
  • 이후에는 다시  “하트” 아이콘이 표시됩니다.

코딩이 제대로 되었다면 아래의 영상과 같이 동작을 할 것입니다.

블럭코딩의 흐름도

프로젝트를 코딩하기 위해서 먼저 블럭코드의 흐름도를 봅시다.

블럭코딩 하기

제일 먼저 코드가 실행되면 LED 스크린에 “Dice…” 문자열을 스크롤 해야 합니다. 그리고 “하트” 아이콘을 디스플레이 해야 합니다. 이 두가지를 하려면 다음과 같이 블럭을 사용하면 됩니다.

문자열을 스크롤 하기 위해서는 “문자열 출력” 블럭을 사용합니다. “하트” 아이콘을 디스플레이 하기 위해서는 “아이콘 출력” 불럭을 사용합니다.  “하트” 아이콘을 디스플레이 한 다음에는 흔들기를 감지하는 코딩을 해야 합니다. 블럭 에디터는 자유낙하를 감지하는 것과 같이 흔들기도 감지하는 기능의 블럭을 제공합니다.

블럭영역에서 입력 블럭들 중에서 “움직임 감지하면 실행” 블럭이 이 일을 합니다. “움직임 감지하면 실행” 블럭에서 드롭다운 메뉴를 통해서 흔들림을 선택할 수 있습니다.  

흔들림을 감지하는 블럭을 알아보았으면, 그 다음에는 1~6사이의 임의의 정수를 출력하는 코딩을 해 봅시다. 우선 0~5사이의 임의의 정수를 출력을 해야 합니다. 임의의 정수를 출력하는 블럭은 블럭영역의 “계산” 그룹에 있습니다.

“계산” 그룹에서 “랜덤 선택(정수)” 블럭을 선택합니다. 이 블럭은 실행이 되면 0 ~ 4 사이의 임의의 정수를 출력합니다. 하지만 우리는 주사위를 만들어야 하므로 정수 출력 범위가 0 ~ 4가 아닌 0 ~ 5 이 되어야 합니다. 또한 출력 되어야 하는 숫자는 1 ~ 6  입니다. 그래서 “랜덤 선택(정수)” 블럭의 출력에 1을 더해 주어야 합니다. 이렇게 하려면 아래와 같이 블럭을 구성하면 됩니다.

위와 같이 블럭을 코딩하면 다음과 같이 동작합니다.

  • “랜덤 선택(정수)” 블럭에 의해서 0 ~ 5 사이의 임의의 정수가 출력됩니다.
  • 이 출력된 정수는 “더하기” 블럭에서 1이 더해 집니다.
  • 그리고 이 더해진 정수는 “정수 출력” 블럭에 의해서 LED 스크린에 출력 됩니다.

그리고 위 블럭을 “움직임 감지하면 실행” 블럭안에 넣습니다. 그리고 함께 2초 기다리기 기능의 블럭과 “하트” 아이콘 출력 블럭을 넣으면 코딩이 끝이 납니다. 

전체 코드는 전체 프로젝트에서 확인 할 수 있습니다. 

전체 프로젝트

전체 블럭 프로젝트는 아래와 같습니다. 맨 오른쪽 위 모서리에 있는 ‘편집’ 버튼을 클릭하면 자신의 컴퓨터로 전체 블럭 프로젝트가 임포트 됩니다.

따라해보기

위 주사위 게임을 아래와 같이 약간 변형해 봅시다. 

  • 흔들면 주사위 숫자가 나오는 것이 아니고 버튼 A를 누르면 주사위 숫자가 나오도록 코딩해 봅시다. 
  • 주사위 숫자 범위를 1~9까지로 변경해 봅시다.  
코딩프로젝트 3: 다마고치 게임 만들기
 
프로젝트 개요
이번 프로젝트에서는 아주 단순한 다마고치 게임을 만들어 봅시다. 다마고치는 1990년대 일본 반다이사에서 만든 디지털 애완동물 키우기 게임기입니다. 다마고치는 작은 LCD가 달려있고 , 여기에서 작은  디지털 캐릭터인 다마고치가 생활합니다. 사용자가 이 다마고치에게 밥을 주고, 만져주면 다마고치가 계속 성장합니다. 사용자가 일정시간 다마고치에게 밥을 주지 않고, 만져주지 않으면 다마고치가 병이 나고 성장하지 않습니다.
이번 프로젝트에서는 micro:bit와 LED 스크린을 이용해서 초간단 다마고치를 만들어 보겠습니다.  코드의 동작은 다음과 같습니다.
  • 먼저 코드가 실행이 되면 “Tamagochi!” 문자열을 스크롤 합니다.
  • 그리고 나서 아래와 같이 생긴 다마고치가 계속 움직입니다.

  • 다마고치는 0.5초 간격으로 한번씩 움직입니다. 따라서 완전히 움직이는 데는 2초가 걸리도록 합니다.
  • 시작할 때, 다마고치는 5개의 밥을 가지고 있습니다. 완전히 한번 움직이면 밥이 하나씩 줄어듭니다. 밥 5개가 다 떨어지면 다마고치는 “화남” 아이콘으로 변경됩니다.
  • 사용자가 버튼 A를 누르면 밥 5개가  다마고치에게 주어집니다. 밥이 다시 생기면 다마고치는 다시 움직이기 시작합니다.

 

코드가 제대로 완성이 되었으면 다음 비디오처럼 동작하게 됩니다.

블럭코딩의 흐름도
프로젝트를 코딩하기 위해서 먼저 블럭코드의 흐름도를 봅시다.
 
 
블럭코딩 하기
제일 먼저 코드가 실행되면 다음 동작이 실행이 되어야 합니다.
  • LED스크린에 “Tamagochi!” 문자열을 스크롤 해야 합니다.
  • 다마고치가 LED 스크린에 나타나기 (다마고치 애니메이션 그림 1을 디스플레이)
  • 다마고치에게 5개의 밥을 주기(“밥” 변수를 만들고 변수에 5를 저장하기)

“Tamagochi” 문자열 스크롤 이후에는 다마고치 애니메이션 그림 1을 LED스크린에 디스플레이 합니다.

그 다음에 “밥” 이라는 이름의 변수를 만들어서 “밥”에 숫자 5를 저장합니다. 저장하기 위해서는 아래의 ” ~ 값 ~ 저장” 블럭을 사용하면 됩니다. “밥”이라는 이름의 변수를 만드는 방법은 아래 팁을 보시면 됩니다. 
따라서 코드가 시작할 때, 즉 “시작하면 실행” 블럭안에 들어갈 블럭들은 다음과 같이 만들 수 있습니다.
팁: micro:bit 블럭 에디터에서 변수 만들기 

이미 스크래치를 공부한 사용자들은 변수(Variables)에 대해서 알고 있을 것입니다. 변수는 숫자, 문자, 문자열을 저장하는 공간입니다. 블럭 에디터에서 변수를 만들려면 블럭 영역에서 변수 그룹을 클릭하면 됩니다. 변수 그룹을 클릭하면 위 그림의 오른쪽 같은 화면이 나옵니다. 여기서 위쪽에 보면 “변수 만들기” 버튼이 있습니다. 이것을 클릭하면 변수의 이름을 물어보는 팝업창이 뜹니다. 

여기에 변수이름을 입력하고 “확인”을 클릭하면 새로운 변수가 생성됩니다. 우리는 “밥”이라는 이름을 입력합니다.  그리고 “확인”을 클릭하면 “밥”이라는 변수가 생긴 것을 확인 할 수 있습니다. 
“무한 반복 실행” 블럭의 코딩에 앞서, 버튼 A를 코딩해 보겠습니다. 버튼 A가 눌러지면 다음 동작이 실행되어야 합니다.
  • 다마코치에게 밥주기 (“밥” 변수에 5 저장)
  • 다마고치가 밥을 받아서 웃음 (LED 스크린에 “웃음” 아이콘)
  • 0.1초 동안 웃고있기 (0.1초 쉬기)
버튼 A를 누를 때 반응하는 블럭을 다음과 같습니다. 
“버튼 A 누르면 실행” 블럭은 버튼 A가 눌러지면 실행이 됩니다. 이 블럭의 안에 들어 있는 블럭도 모두 실행이 됩니다. 버튼 A가 눌러지면 “밥” 변수에 5를 저장하는 것은 아까 사용했던 블럭을 다시 사용합니다.
0.1초 쉬기 및 “웃음” 아이콘 출력 블럭은 이미 학습했으니 생략 하겠습니다. 버튼 A가 눌러졌을 때 실행될 블럭들은 다음과 같습니다.
버튼 A 코딩이 마무리 되었으면 “무한 반복 실행” 블럭안에 들어갈 블럭들을 코딩해 봅시다. “무한 반복 실행” 블럭 안에서는 다음과 같은 일을 해야 합니다.
  • 다마코치의 밥이 다 떨어졌는지 확인(“밥” 변수가 0보다 작은 지 확인)
  • 밥이 남았으면 다마고치를 한번 움직이게 하기 (다마코치 아이콘을 이동시키기)
  • 한번 움직이면 밥하나를 먹기(“밥” 변수에서 1 빼기)
  • 그 다음에 다시 밥이 다 떨어졌는지 확인하고, 밥이 다 떨어졌으면 다마고치가 화를 낸다(LED 스크린에 “화남” 아이콘 디스플레이)

다마고치의 밥이 남아있는지 확인(“밥”변수가 0보다 작은지 확인)은 다음과 같이 if문을 사용하면 됩니다. “밥” 변수가 0보다 작으면 “이면(then) 실행” 안에 다마고치가 화를 내는 블럭을 넣고, “밥” 변수가 0보다 크면 “아니면(else) 실행” 안에 다마고치가 움직이는 블럭을 넣으면 됩니다.

위 블럭을 구성하려면 다음과 같이 하면됩니다.

“밥” 변수는 변수블럭 그룹에서 가져오고, 부등호는 논리 블럭에서 가져오고, if문은 역시 논리 불럭에서 가져옵니다.

그 다음에는 다마코치가 LED스크린을 한바퀴 움직이는 것과 한바퀴 움직인 후 밥이 하나 줄어드는 것을 코딩해야 합니다. 이 코딩은 아래와 같이 코딩하면 됩니다. 그리고 이것을 if문에 넣습니다. 주의 할 것은 이 블럭들은 if문의 “아니면(else) 실행”에 들어가야 합니다.

 

이제 마지막으로  “이면(then) 실행”에 “화남” 아이콘을 디스플레이 하는 블럭을 넣습니다. “무한 반복 실행” 부분의 완성된 코드는 아래와 같습니다.

전체 프로젝트
전체 블럭 프로젝트는 아래와 같습니다. 맨 오른쪽 위 모서리에 있는 ‘편집’ 버튼을 클릭하면 자신의 컴퓨터로 전체 블럭 프로젝트가 임포트 됩니다.
 
따라해보기
다마고치 게임을 아래와 같이 약간 변형해 봅시다.
  • 다마코치의 움직임을 스스로 한번 만들어서 적용해 보세요. 다마고치의 모양과 움직임을 변경하거나 추가하면 됩니다.
  • 버튼 A를 누르면 밥을 5개 주는 것이 아니라 3개만 주도록 코딩해 봅시다.

응용해보기

  • 다마고치 게임에서 버튼 B를 누르면 다마고치가 잠이 들도록 코딩해 봅시다.
  • 버튼 B가 눌러지면 LED 스크린에 잠자는 모양의 아이콘을 디스플레이 합니다. 아이콘은 스스로 만들어야 합니다.
  • 그리고 micro:bit를 세게 흔들어 깨우면 다마고치가 깨어나서 다시 움직이기 시작합니다.
  • 나머지는 위 프로젝트와 동일하게 코딩해 봅시다.