1. ScratchX 시작하기

by 이서희 | 2017-07-18 16:17
blink 아두이노 코딩


준비물
아두이노 우노 보드, 케이블


ScratchX 시작하기!

ScratchX가 처음이라면 저와 함께 이번 스토리에서 ScratchX.org 의 Getting started 매뉴얼을 따라가봅시다.





0. 아두이노 IDE 설치

아두이노 IDE를 아직 설치하지 않으신 분들은 먼저 arduino.cc에서 설치해줍니다.


1. 아두이노 IDE 실행

아두이노 IDE의 설치가 되었다면 아두이노를 PC의 USB포트에 연결하고 아두이노 IDE를 실행합니다. 저의 경우 가장 기본 보드인 아두이노 우노 보드를 사용했습니다. 다음 과정을 Follow-up 합니다.


1) 아두이노IDE에서 파일>>예제>>Firmata>>StandardFirmata를 선택합니다.



그러면 StardardFirmata 예제 창이 열립니다.


2) 툴에서 board를 Arduino Uno 로 설정합니다.



3) 툴에서 포트를 자신의 우노 보드에 맞게 선택합니다.

윈도우의 경우 'COM#'과 같은 이름으로 나타납니다.

Mac에서는 '/dev/tty.usbmodem-1511'와 같은 이름을 띕니다. 포트를 뽑았다가 다시 꽂으면서 새롭게 나타난 포트이름을 확인하세요.




혹시나 PC에서 포트가 인식되지 않는 경우) 아두이노IDE의 설치시 드라이버가 적용되지 않아서일 수 있습니다. 자신의 아두이노가 사용하는 시리얼 통신 칩이 무엇인지 알아내서 관련 드라이버를 설치해주어야 합니다. 저는 다음 드라이버를 사용했습니다.

http://www.wch.cn/download/CH341SER_ZIP.html



4) 업로드 버튼을 클릭해봅시다.

아두이노IDE에서 StandardFirmata 소스를 업로드 해 줍니다. StandardFirmata는 아두이노가 부라우저 플러그인(ScratchX)과 통신할 수 있도록 해주는 일종의 프로토콜이라고 할 수 있습니다.

     -> 화살표 버튼 클릭!

업로드하면 다음의 과정을 거치게 됩니다.


브라우저(ScratchX 사이트) -> 브라우저 확장 플러그인 -> USB 시리얼 통신 -> StandardFirmata가 번역(아두이노) -> 실행


업로드가 정상적으로 완료되었다면 Firmata를 설치하는 과정이 끝났습니다!


2. Scratch Extensions Browser Plugin 설치

1) 파이어폭스 설치하기

 최적화된 브라우저는 파이어폭스입니다. 기존에 파이어폭스를 갖고 있지 않다면 새로 다운로드 받을 수 있습니다. Firefox ESR 다운로드 링크를 클릭하세요.


Firefox ESR을 사용하는 이유


주의할 점은 가장 최신 버전인 Firefox 52을 다운받으시면 안된다는 점입니다.
저의 경우 Firefox 52 버전을 설치하였는데 Scratch Device Plugin이 작동하지 않아서 이유를 찾아보니 다음과 같은 원인을 찾을 수 있었는데요.





즉 Firefox 최신 버전에서 NPAPI plugins에 대한 support가 삭제되어서 Scratch 플러그인 역시 사용할 수 없게 되었습니다. 대체적인 방안은 현재까지론 Firefox ESR을 사용하는 것 입니다.


cf )  Internet Explorer에서도 제대로 작동한다고 하는데, 저는 윈도우10에 Internet Explorer 11 (최신 버전)을 사용했더니 제대로 되지 않았습니다. 아무래도 현재 나온 Scratch x beta 버전에서는 파이어폭스를 사용하는 것이 좋을 것 같습니다.


2) Adobe 플래시 플레이어 설치하기

Scratch와 ScratchX는 모두 플래시 기반으로 만들어져 있습니다. 그래서 플래시를 실행할 수 있는 플레이어가 필요합니다.

파이어폭스에서Adobe Flash Player 설치 페이지로 이동하여 설치해줍니다.



2) Scratch Extenstions Brower Plugin 설치하기

Scratch Extenstions Browser Plugin 을 다운로드 받아 설치합니다.

링크로 들어가면 다음 사진과 같은 화면이 뜹니다. 자신에게 맞는 플러그인을 다운받아서 PC에 설치합니다.

저의 경우 윈도우의 파이어폭스를 사용하므로 가장 마지막에 있는 윈도우(다른 웹브라우저)을 선택했습니다.





다운로드 된 파일을 클릭합니다.




아무런 메세지 없이 설치창이 닫혀도 당황하지 마세요! 정상적으로 설치가 완료된 것입니다. 

Firefox을 켜서 Scratch Device Plugin에 제대로 들어가 있는지 확인해보세요.



3. ScratchX 실행해보기

이제 프로그래밍을 하기 위해 다음 URL을 파이어폭스에서 열어봅시다.

http://scratchx.org/


다음과 같은 페이지나 나타나면 좌측 상단의 블록처럼 생긴 아이콘을 클릭하여 계속 허가(C) 버튼을 눌러줍니다.



고양이가 그려진 네번째 박스를 클릭하면 blink 예제가 나타납니다.

그 밑의 하늘색의  See all Extensions  버튼을 클릭하면 다른 여러가지 예제를 구경할 수 있습니다.

저는 blink 예제를 열어보았습니다.


다음과 같은 화면이 나타나면서 Warning 창이 뜨게 됩니다.  I understand, continue  버튼을 눌러줍니다.



좌측 상단의 지구모양 아이콘을 클릭하면 언어 설정을 한국어로 바꿀 수 있습니다.



파이어폭스 창 상단의 Scratch Device를 실행하는 것을 허가하시겠습니까? 의 메세지에 허용 버튼을 클릭합니다.



그럼 다시 scratch.org에서 플러그인을 실행하는 것을 허가하시겠습니까? 의 메세지가 나타나는데 모두 '허가하고 기억'으로 세팅하고 확인을 눌러줍니다.




이제 Scratch x 를 좀 더 살펴볼까요?

중간에 있는 블록에 Arduino▼ 하고 동그란 초록색 원이 보이실 것입니다. 빨간 점선으로 표시되어 있는 원입니다.



아두이노의 연결상태

이 원의 색깔은 아두이노 보드의 연결상태를 나타냅니다.
다음과 같은 세가지 경우가 있습니다.


1) 위와 같이 아두이노를 연결하여 정상적으로 통신이 되면 초록색 원이 된다.



2) 아두이노에 StandardFirmata가 정상적으로 업로드 되어있지 않거나, 아두이노 보드가 케이블로 연결되어 있지 않으면 노란 색 원이 된다.



3) 플러그인 등에 문제가 있는 경우는 빨간 색 원이 된다.



4. Blink 실행하기

이제 업로드 해볼까요?

상단에 있는 초록색 깃발 아이콘을 누르면 아두이노 보드에 프로그래밍된 내용을 업로드 할 수 있습니다. 빨간 동그라미를 누르면 아두이노가 실행하고 있는 동작을 멈추게 합니다.




초록색 버튼을 눌러봅시다. 다음과 같이 밑에 있는 그림에서 LED가 반짝반짝 빛나며 아두이노 보드에 연결한 LED도 깜박이게 됩니다.





저의 경우는 미니빵판 위에 LED를 만들어 보았는데요, 만약 우노보드만 있고 빵판이 없더라도 우도보드의 13번 핀을 가지고 실행해볼 수 있습니다! 블로그 포스팅을 참조하여보세요~


이제 본격적인 ScratchX 실습을 시작해보겠습니다




댓글 0

MADE BY

2. 빙글빙글 서보모터 다음글 1. ScratchX 시작하기현재글