CO:BIT TRAINING KIT 기초강좌 1. LED, 블럭, 핀, 버튼

블럭 에디터 사용해 보기

co:bit Training Kit를 시작해 봅시다. co:bit Training Kit에 내장된 micro:bit는 마이크로소프트가 제공하는 블럭 에디터를 사용하여 코딩을 합니다. 이번 클래스에서는 블럭 에디터를  사용하는 방법을 배워보도록 하겠습니다. 블럭 에디터는 웹에서 동작하는, 스크래치와 비슷한 블럭 코딩 환경입니다. co:bit Training Kit에서 가장 간단한 코딩이 LED 코딩입니다. 그래서 제일 먼저 LED 를 이용한 코딩을 해 보면서 블럭 에디터 사용법을 학습 합니다. 

준비물

이번 프로젝트의 준비물은 다음과 같습니다.

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

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

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

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

그리고 웹브라우저에서 블럭코딩을 하기위해 블럭에디터 사이트로 갑니다. 마이크로소프트의 블럭 에디터는 아래를 클릭해서 들어갈 수 있습니다. 

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

블럭 에디터에 제대로 접속을 했으면 아래와 같은 화면이 뜨게 됩니다.

코딩 프로젝트 1: 블럭 에디터 알아보기  

프로젝트 개요

블럭 에디터를 처음 접속해서 들어가면 아래 그림처럼 블럭 에디터 화면이 보일 것입니다. 이 화면에서 각 화면의 기능에 대해서 설명하도록 하겠습니다. 우선은 이번 코딩과제에서 필요한 부분만 설명하겠습니다.

  1. 프로젝트 찾아보기: 새로운 프로젝트를 시작하거나 이전에 만들었던 프로젝트를 열고자 할 때, 여기를 클릭합니다.
  2. micro:bit 시뮬레이터: 블럭으로 코드를 만들고, 실제 micro:bit에서 실행해 보기전에 시뮬레이션을 할 수 있는 micro:bit 시물레이터입니다. 
  3. 블럭 영역:  micro:bit 코딩에 사용할 수 있는 다양한 블럭들이 있는 곳입니다. 여기서 필요한 블럭을 가져다가 4번 코딩 영역에 가져다 놓고 코딩을 합니다. 
  4. 코딩 영역: 블럭영역에서 블럭을 가져다가 여기서 블럭을 조합해서 코딩을 합니다. 
  5. 다운로딩: 코딩이 완성되면 이 버튼을 클릭하면 코드가 만들어져서 PC의 다운로드 플더에 저장이 됩니다. 
  6. 프로젝트이름: 프로젝트의 이름을 정할 수 있습니다.  

팁

만약 블럭 에디터의 언어가 한글이 아니고 영어로 되어 있다면, 언어를 한글로 바꿀 수 있습니다. 언어를 한글로 바꾸려면 다음과 같이 하면 됩니다. 우선 화면 위쪽의 오른쪽에 보면 셋팅 버튼이 있습니다.

셋팅 버튼을 클릭하면 다음 메뉴가 나옵니다. 여기서 “Language(언어)” 항목을 클릭합니다. 그러면 블럭 에디터에서 지원이 되는 여러 언어들의 리스트가 나옵니다.

여기서 “한국어”를 선택하면 블럭 에디터의 기본 언어가 한글로 정해지고 모든 메뉴, 블럭 등의 글자들이 한글로 표시가 됩니다.

 

블럭 에디터를 처음 열거나, 새로운 프로젝트를 실행하면 4번 코딩 영역에서 미리 두개의 블럭이 있는 것을 볼수 있습니다. 

왼쪽의 “시작하면 실행” 블럭은 코드가 시작할 때 실행이 됩니다. 오른쪽에 “무한 반복 실행” 블럭은 “시작하면 실행” 블럭이 실행된 후 실행이 됩니다. “시작하면 실행” 블럭이 한번 만 실행이 되는 반면, “무한 반복 실행” 블럭은 무한히 반복 실행이 됩니다.

이제 블럭을 사용해서  micro:bit의 LED 스크린에 숫자를 디스플레이를 해 봅시다 (micro:bit의 LED 스크린에 대해서는 2 클래스에서 상세히 배웁니다). LED 스크린에 숫자 0 -> 1 -> 2 -> 0 차례대로 디스플레이 되도록 코딩을 합니다. 숫자가 2가 디스플레이 된후에는 숫자 0이 다시 디스플레이 됩니다. 그리고 이것이 계속 반복되도록 코딩을 합니다. 코딩을 잘 했다면 co:bit이 아래  동영상 처럼 동작이 될 것 입니다.    

 

블럭코딩의 흐름도

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

블럭코딩 하기 

제일 먼저 할 일은 ‘시작하면 실행’ 블럭에 ‘LED 스크린 지우기’ 블럭을 가져와서 LED 스크린을 모두 off 시키는 것입니다.  

LED 스크린을 모두 지운 후에는 ‘무한 반복 실행’ 블럭에 숫자를 변경하는 블럭을 넣으면 됩니다. 우선 LED 스크린에 숫자를 표시하려면 다음의 ‘정수 출력’ 블럭을 사용합니다. 또한 0.1초 지연을 시키려면 ‘ 일시 중지(ms)’ 블럭을 사용합니다. 참고로 0.1초는 100ms 입니다 (mili second)

 

 

LED 스크린에 숫자를 ‘0’ -> ‘1’ -> ‘2’ -> ‘0’ 이런식으로 나타내려면 ‘무한 반복 실행’ 블럭 안에 ‘정수 출력’ 블럭과 ‘일시 중지(ms)’ 블럭을 번갈아 넣으면 됩니다.

 

‘무한 반복 실행’ 블럭 안에 있는 블럭들은 순서대로 무한하게 반복실행 됩니다. 따라서 제일 먼저 정수 ‘0’이 LED 스크린에 표시됩니다. 그리고 0.1초를 쉬고 정수 ‘1’이 LED스크린에 표시됩니다. 역시 0.1초를 쉬고 정수 ‘2’가 LED스크린에 표시됩니다. 이렇게 한번의 순서가 끝이나면 ‘무한 반복 실행’ 블럭 때문에 처음부터 다시 실행이 반복됩니다.

전체 프로젝트

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

 

micro:bit 보드로 코드를 다운로드 하기 

코드를 다 완성 했다면 이번에는 코드를 co:bit Training Kit(micro:bit)로 다운로드 해야 합니다. 다운로드를 위해서는 아래 버튼을 클릭하면 PC의 “다운로드” 폴더에 완성된 코드가 다운로드 됩니다.

다운로드 된 코드는 다음 형태의 이름을 가집니다. 

microbit-이름없음.hex

코드를 다운로드 하기전에 이름을 바꾸고 싶다면 “다운로드” 버튼 옆에 “이름없음”을 원하는 이름으로 변경하면, 다운로드 되는 코드의 이름도 바뀝니다.  다운로드 되는 코드 파일의 확장자는 “.hex” 입니다.  이미 만들어진 프로젝트를 편집 버튼을 눌러서 블럭 에디터를 열었다면 그 프로젝트의 이름은 아래와 같을 것입니다. 이 이름 역시 동일한 방법으로 변경이 가능합니다.

microbit-cobit_tr_ba_1_led_number.hex

지금 다운로드 한 것은 코드를 PC로 다운로드 한 것이지, 코드가 다운로드가 되면 아래의 방법으로 다운로드된 코드를 micro:bit로 보낸 것은 아닙니다. 코드를 micro:bit로 보내려면 아래의 그림을 참조합니다.  micro:bit가 PC에 연결되어 있으면, PC의 경우 윈도 탐색기에 micro:bit가 USB메모리 처럼 자리잡고 있습니다. 다운로드 된 코드를 드래그 앤 드롭으로 탐색기의 micro:bit로 복사하면 자동으로 코드가 micro:bit로 복사 됩니다. 복사 되는 동안 micro:bit의 뒷면의 노란색 LED가 계속 깜빡입니다. 복사가 끝이나면 자동으로 복사가 된 코드가 실행이 됩니다. 

 

따라해보기

LED 스크린에  9 -> 8 -> 7 -> … -> 1 -> 0 -> 9… 순서로 숫자를 표시해 봅시다. 숫자 표시되는 간격은 역시 0.1초로 합니다. 

코딩프로젝트 2: 버튼을 사용해 보자 
 
과제 개요
 
micro:bit에는 A/B 이렇게 2개의 버튼이 있습니다. 이 버튼이 눌러질 때 어떤 일이 실행이 되도록 코딩을 할 수 있습니다. 이번 코딩과제에서는 버튼이 눌러지면 LED에 문자열이 스크롤 되도록 코딩을 해 봅시다. 우리가 만들려는 코드의 동작은 아래와 같습니다. 
 
  • 코드가 시작되면 하트모양의 아이콘을 LED 스크린에 디스플레이 합니다.
  • 그러다가 버튼 A가 눌러지면 LED 스크린에 “Just Do It!”이라는 광고 문구를 스크롤 합니다.
  • 이 문구의 스크롤이 끝이나면 다시 LED 스크린에 하트모양의 아이콘이 표시되면 됩니다. 

코딩이 잘 되었다면 아래 동영상  처럼 동작이 될 것 입니다.

팁
블럭 에디터에서 새로운 프로젝트를 시작하려면 다음과 같이 하면 됩니다. 화면 위쪽에서 왼쪽에 보면 “프로젝트 찾아보기” 가 있습니다. 이 “프로젝트 찾아보기”를 클릭하면 아래 화면이 나옵니다. 이 중에서 “새 프로젝트”를 클릭하면 블럭 에디터 화면이 새로운 프로젝트 화면으로 업데이트 됩니다. 기존에 작성한 프로젝트 코드는 자동으로 마이크로소프트의 서버에 저장됩니다. 이 저장된 프로젝트들 역시 이 “프로젝트 찾아보기” 화면에서 찾을 수 있습니다.  
 
블럭코딩의 흐름도
 
프로젝트를 코딩하기 위해서 먼저 블럭코드의 흐름도를 봅시다.
 
블럭코딩 하기
 
우선 하트모양의 아이콘을 LED 스크린에 디스플레이 하려면 다음과 같이 블럭 코딩을 하면 됩니다. “시작하면 실행”에는 아무 블럭을 넣지 않아도 됩니다.
 
micro:bit의 버튼은 A와 B두개가 있고, 이 버튼은 LED 스크린의 좌우에 있습니다. 
A 버튼이 눌러지면 이것을 알 수 있는 방법이 있을까요? 지금까지 우리가 사용한 기본 블럭들 밑에 입력 블럭들이 있습니다. 이중에서 A 혹은 B버튼이 눌러졌을 때 응답을 하는 블럭이 있습니다. 이 블럭은 “버튼 A 누르면 실행” 입니다. 말 그대로 버튼 A가 눌러지면 이 ‘버튼A를 누르면 실행” 블럭과 이 블럭안에 포함된 블럭들이 실행이 됩니다.
 
 
이 블럭 안에 다른 블럭들을 넣을 수 있는데, 버튼 A가 눌러지면 ‘버튼 A를 누르면 실행 ‘ 블럭 안에 있는 모든 블럭이 실행이 됩니다. 이 블럭의 실행이 끝이나면 보통은 ‘무한 반복 실행’ 블럭으로 돌아가서 ‘무한 반복 실행’ 안에 있는 블럭들이 실행이 됩니다.  아래 블럭은 버튼 A가 눌러지면 LED 디스플레이에 “Just Do It!” 글자가 스크롤 됩니다.
 
 
스크롤이 끝이나면 다시 ‘무한 반복 실행’블럭으로 돌아가서 하트모양의 아이콘이 LED 스크린에 표시됩니다.  
 
전체 프로젝트
 
전체 블럭 프로젝트는 아래와 같습니다. 맨 오른쪽 위 모서리에 있는 ‘편집’ 버튼을 클릭하면 자신의 컴퓨터로 전체 블럭 프로젝트가 임포트 됩니다.

micro:bit 보드로 코드를 다운로드 하기 

코드를 다 완성 했다면 이번에는 코드를 코딩과제 1에서 한 것처럼 micro:bit로 다운로드해서 실행해 봅시다. 

따라해보기
다음과 같이 코딩을 해 봅시다. 
  • 블럭 에디터에서 새로운 프로젝트를 엽니다. 이름은 적당히 짓습니다. 
  • 코드가 시작되면 웃는 얼굴 아이콘이 LED스크린에 디스플레이 되도록 합시다. 
  • 버튼 A를 누르면 “OK let’s go”문구가 스크롤 되도록 합시다. 
  • 문구가 다 스크롤이 되면 다시 웃는 얼굴 이이콘이 LED스크린에 디스플레이 되도록 합시다. 
코딩과제 3: 핀을 사용해서 과일 키보드 만들기 
 
과제 개요
이번 과제에서는 co:bit Traning Kit의 핀 기능을 이용해서 과일 키보드를 만들어 봅시다. micro:bit에는 3개의 동그란 핀이 있습니다. 이 핀은 각각 P0, P1, P2 입니다. 아래 그림에서 0, 1, 2라고 표시되어 있습니다. 
사람의 몸은 전기가 흐르기 때문에  P0/P1/P2와 GND를 서로 잡으면 전기가 흐르게 됩니다. GND는 그라운드(땅)이라는 뜻으로 건전지의 (-)극과 같은 의미 입니다. 3V가 건전지의 (+)극에 해당합니다. 만약 아래 그림과 같이 연결을 한다고 가정해 봅시다. 
위 그림은 사람의 한쪽 손가락을 GND에 두고 P1에 당근, P2에 바나나를 연결합니다. 그리고 P0와 GND에 버저를 연결합니다. 이렇게 연결하고 사람의 다른 손가락으로 바나나나 당근을 터치하면 전기가 흐르게 됩니다. 과일이나 채소도 전기가 흐르기 때문입니다.  과일 피아노는 이런 원리를 이용해서 과일(채소)를 터치하면 소리가 나도록 한 장치 입니다. 이번 프로젝트에서는 이런 원리를 이용해서 co:bit 기반으로 과일 피아노 장치를 만들어 봅니다. 제대로 코딩을 했다면 아래 동영상처럼 동작을 하게 됩니다.
 

 
 
제대로 동작을 시키려면 한쪽 손가락을 co:bit 베이스 보드의 GND에 대고 다른 손가락으로 과일을 천천히 터치하면 됩니다. 

 
 
과일키보드 회로구성하기
 
먼저 LED를 코딩하기 위해 구성한 하드웨어에 아래와 같이 차례로 회로를 추가합니다.  co:bit 과일 키보드의 구성은 아래와 같습니다. 
 
먼저 Kit에 내장된 전선 2개가 하나로 묶인 전선뭉치를 준비합니다.
 
그 다음에 이 전선 뭉치를 다음과 같이 co:bit 베이스 보드와 연결을 합니다.
 
그 다음에는 이 전선뭉치의 한쪽 끝을 과일(혹은 당근 같은 채소)에 아래와 같이 연결합니다. 연결하는 방법은 그냥 과일에 전선끝에 달린 철심을 꼽으면 됩니다.
 
자 이제 하드웨어 준비가 끝이 났습니다. 이제 코딩을 할 차례입니다. 먼저 흐름도를 봅시다. 
 
블럭코딩의 흐름도
프로젝트를 코딩하기 위해서 먼저 블럭코드의 흐름도를 봅시다.
 
 
블럭코딩 하기
제일 먼저 “Fruit piano” 문구를 LED 스크린에 스크롤 하는 코딩을 해 봅시다. 코드가 처음 실행될 때, 스크롤을 해야 하므로 “시작하면 실행” 블럭을 사용합니다. 
그 다음에는 하트 아이콘을 계속 디스플레이 하는 코딩을 해 봅시다. 하트 아이콘을 계속 디스플레이 해야 하니까 “무한 실행” 블럭을 사용합니다. 
 이번에는 핀 P1이나 P2가 터치되면 버저의 소리를 내는 코딩을 해 봅시다. P1과 P2가 터치되면 응답을 하는 블럭이 있습니다. 이 블럭은 “핀 P1 연결(on)되면 실행” 입니다.  말  P1혹은 P2 핀이 터치되면(연결되면) ‘핀 P1 연결(on)되면 실행” 블럭과 이 블럭안에 포함된 블럭들이 실행이 됩니다.
co:bit 베이스 보드에 내장된 버저에 소리를 내려면 다음 블럭을 사용하면 됩니다. 이 블럭은 “도(middle C)”음을 1박자 동안 버저를 통해서 냅니다. 
위 두가지 코드를 합쳐서 P1이 터치되면 “도(middle C)”음을 1박자 동안 내고, “웃음” 아이콘을 LED 스크린에 디스플레이 하는 코드는 아래와 같습니다. 
P1이 터치되면 “솔(middle G)”음을 1박자 동안 내고, “화남” 아이콘을 LED스크린에 디스플레이 하는 코드는 아래와 같습니다. 
코드를 제대로 동작 시키려면, co:bit 베이스 보드의 GND에 한쪽 손가락을 대고, 다른 손가락으로 과일 천천히 터치하면 됩니다. 
 
전체 프로젝트
전체 블럭 프로젝트는 아래와 같습니다. 맨 오른쪽 위 모서리에 있는 ‘편집’ 버튼을 클릭하면 자신의 컴퓨터로 전체 블럭 프로젝트가 임포트 됩니다. 
 
 
따라해보기
 블럭 에디터에서 새로운 프로젝트를 열고, 이번 프로젝트와 유사하게 코딩을 해 봅시다.
  • P1과 P2에 과일혹은 (채소)를 연결하고,
  • “Fruit piano” 문자열을 스크롤 합니다.
  • 항상 웃음 아이콘을 디스플레이 합니다.
  • P1이 터치되면 정수 “1”을 디스플레이 하고 “미(middle E)” 2박자 울리고,
  • P2가 터치되면 정수 “2”를 디스플레이 하고 “라(middle A)”  2박자 울리도록 코딩을 해 봅시다. 
  • 코딩 후 제대로 동작을 시키려면 co:bit 베이스 보드 GND에 손가락을 대고 다른 손가락으로 과일이나 채소를 천천히 터치하면 됩니다. 

응용해보기

  • 버튼 A를 누르면 “도(middle C)”음이 1박자 울리도록 코딩해 봅시다.
  • 동시에 LED 스크린에는 “C”를 출력해 봅시다.
  • 버튼 B를 누르면 “솔(middle G)”음이 1박자 울리도록 코딩해 봅시다.
  • 동시에 LED 스크린에는 “G”를 출력해 봅시다.