Scratch 3.0 확장블럭 추가 (2)

업데이트


본 예제를 실행해서 로봇과 연결하려면 Edubot과 최신 펌웨어가 있어야 한다. Edubot과 펌웨어 관련한 내용은 https://github.com/oroca/OROCA-EduBot/tree/android_app을 참고한다. 펌웨어 개발환경 구축은 https://cafe.naver.com/openrt/19738을 참고한다.


이제 Scratch Link와 확장블럭에 대한 모든 것이 준비되었으니 실제 사용해보록 한다.

지난번 포스팅에서 언급했던 개발환경 (https://ahnbk.com/?p=366)은 모두 갖춰져 있다는 가정하에 진행한다.

scratch 3.0의 원래 소스를 가져와 현재 작업중인 OROCA-EduBot에 대한 확장블럭을 작성하였다. 수정된 소스는 다음의 링크에서 확인 가능하다. 지난번과는 달리 scratch-blocks에 대한 부분은 현재까진 수정할 필요가 없으므로, 이는 사용하지 않는다.

개발환경 구축 포스팅에서 설명했던 것과 같이, 임의의 디렉토리에 위 repository를 클론한다. (윈도우나 macOS나 모두 동일함).

$ git clone https://github.com/byeongkyu/scratch-gui.git
$ git clone https://github.com/byeongkyu/scratch-vm.git

scratch-vm부터 설치한다.

$ cd scratch-vm
$ npm install
$ npm link

다음으로 scratch-gui를 설치한다.

$ cd ../scratch-gui
$ npm install
$ npm link scratch-vm

이제 실행해보면

$ npm start

크롬이나 사파리, 인터넷 익스플로러 등 브라우져를 열고 http://localhost:8601 로 접속하면 다음의 화면을 볼 수 있다.

왼쪽 하단의 확장블럭 추가 버튼을 누른다.

Edubot의 확장카드가 보이고 이를 누르면,

스캔을 자동을 실행하고, 주변의 Edubot을 보여준다. Connect 버튼을 눌러 연결한다.

정상적으로 연결됨을 볼 수 있다. 이제 Go to Editor 버튼을 눌러 메인 화면으로 이동한다.

왼쪽에 Edubot에 대한 블럭들이 생겼음을 볼 수 있다. 이제 이 블럭들을 이용하여 코딩해보면 된다.

Scratch 3.0 스크래치 링크 설치 및 사용

Scratch 3.0에서 외부 기기 및 서비스를 이용하기 위해선 Scratch Link를 사용해야 한다. 물론 확장 프로그램에서 직접 하드웨어에 접속하게 해도 되지만, Scratch 개발자들은 다양한 하드웨어를 같은 프로토콜로 연결하기 위해 Scratch Link를 외부에 실행하고, 이를 통해 하드웨어와 연결한다.

Scratch와 Scratch Link는 websocket을 이용하여 통신한다. 패킷 내용은 까보면 json으로 구성되어 있다. Scratch Link는 시리얼통신 (블루투스 시리얼 포함), Bluetooth LE를 이용해 외부 하드웨어와 연결한다. Linux, macOS의 경우 위 기능을 모두 지원하나, 윈도우의 경우 10버전에서만 Bluetooth LE를 지원한다.

Scratch Link는 아직 소스가 공개되어 있지 않으므로, 설치하기 위해선 다음의 링크를 이용한다.

위 링크에서 파일을 다운로드 한 다음 설치한다.

Scratch Link를 사용하기 위해선 hosts 파일의 수정이 필요하다. 이유는 모르겠지만 Scratch Link의 서버 주소가 Local에서 실행되고 있음에도 불구하고 device-manager.scratch.mit.edu로 되어 있기 때문에 그냥 사용하게 되면 연결이 되지 않는다. 따라서 위 주소를 Local로 접속하도록 만들어야 되는데, 이를 위해 hosts 파일을 수정한다.

macOS

macOS에서 hosts 수정은 아주 간단하다. 터미널을 열고

$ sudo vi /etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
127.0.0.1       device-manager.scratch.mit.edu
255.255.255.255 broadcasthost
::1             localhost

시스템 파일이기 때문에, 계정 암호가 필요하다. 위와 같이 수정하고 저장한다. 그 다음

$ ping device-manager.scratch.mit.edu
PING device-manager.scratch.mit.edu (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.045 ms
64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.053 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.107 ms
...

와 같이 나오면 성공.

Windows 10

윈도우의 hosts 파일은 C:\Windows\System32\drivers\etc에 위치한다. 하지만 직접 수정하는 것을 막아놨기 때문에, 탐색기로 위 위치로 이동한 후 hosts 파일을 임의의 위치로 복사한다.

Notepad나 기타 편집기를 이용하여, 다음과 같이 수정한다.

# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

127.0.0.1	device-manager.scratch.mit.edu

그런 다음 수정된 파일을 C:\Windows\System32\drivers\etc에 복사해 넣는다.

와 같이 나오고, 덮어 씌우겠다고 선택하면,

와 같이 나오는데, Continue를 눌러 진행한다. 그런 다음 코맨드 창을 열고 ping을 테스트해보면,

와 같이 나오면 성공.

설치된 Scratch Link를 실행하면 websocket 서버가 백그라운드에서 실행된다.

이제 사용할 준비 끝.

Scratch 3.0 확장블럭 추가 (1)

Scratch가 3.0으로 버전이 올라가면서 사용자가 확장 블럭 (Extension)을 추가하는 것이 좀더 간단해졌다. 확장 블럭은 Scratch의 기본 기능 외에 다양한 하드웨어나 클라우드 서비스의 기능을 사용할 수 있는 것인데, 메인 화면 왼쪽 하단의 버튼을 눌러 추가한다.

Scratch에 기본적으로 포함되어 있는 확장 블럭은 다음과 같다. 외부 기기나 하드웨어 클라우드 서비스 등이 포함된다.

이제 이것들 이외에 사용자만의 블럭을 추가 할 수 있다. 이 작업은 크게 두가지로 나뉠 수 있는데, 처음은 위 화면에서 본것과 같은 확장 카드를 추가하기, 다음으론 확장 블럭 생성하기이다.

먼저 사용할 이미지를 준비한다. 위 확장 카드에서 가장 크게 보이는 이미지로, 크기는 600×372 이고, png 타입이다.

준비된 이미지를 다음의 경로에 복사한다. (경로는 앞 포스트에서 설명한 경로를 기준으로 설명함).

~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/edubot.png

다음으로 확장카드에 들어갈 작은 이미지와 추후 메인화면의 카테고리에 들어갈 중간 사이즈의 이미지를 준비한다. 이 이미지는 가급적이면 SVG 타입의 벡터 이미지를 사용한다. (벡터 이미지는 Illustrator, Sketch, Affinity Designer 등의 툴을 사용하면 쉽게 생성 가능)

112×92 SVG
39×39 SVG

준비된 이미지를 다음의 경로에 복사한다. (디렉토리를 생성해야함).

~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/peripheral-connection/edubot/edubot-illustration.svg
~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/peripheral-connection/edubot/edubot-small.svg

이제 index.jsx 파일을 수정한다. 파일의 경로는 다음과 같다.

~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/index.jsx

저장된 이미지에 대한 변수 선언

import edubotImage from './edubot.png';
import edubotPeripheralImage from './peripheral-connection/edubot/edubot-illustration.svg';
import edubotMenuImage from './peripheral-connection/edubot/edubot-small.svg';

이제 중간 쯤 적당한 곳에 블럭 생성을 위한 코드 삽입.

    {
        name: 'OROCA_Edubot',
        extensionId: 'edubot',
        collaborator: 'OROCA',
        iconURL: edubotImage,
        insetIconURL: edubotMenuImage,
        description: (
            <FormattedMessage
                defaultMessage="Play with powerful small robot!"
                description="Description for the 'OROCA_Edubot' extension"
                id="gui.extension.oroca_edubot.description"
            />
        ),
        featured: true,
        disabled: false,
        bluetoothRequired: true,
        launchPeripheralConnectionFlow: true,
        useAutoScan: false,
        peripheralImage: edubotPeripheralImage,
        smallPeripheralImage: edubotMenuImage,
        connectingMessage: (
            <FormattedMessage
                defaultMessage="Connecting"
                description="Message to help people connect to their edubot."
                id="gui.extension.edubot.connectingMessage"
            />
        ),
        helpLink: 'https://github.com/oroca/OROCA-EduBot'
    },

각 설정값의 의미는 다음과 같다.

이외에도

  • extensionId: 확장블럭에 대한 고유 이름
  • launchPeripheralConnectionFlow: 선택시 기기를 연결하기 위한 다이얼로그를 실행할 지 여부
  • useAutoScan: 다이얼로그를 띄운 뒤, 자동 스캔 시작 여부

일단 저렇게 수정한 파일을 저장한다. 다음으로 확장블럭에 대한 파일을 작성한다. 해당 경로는 다음과 같다.

~/Developer/scratch/scratch-vm/src/extensions

위 디렉토리에 확장 블럭의 파일을 위한 디렉토리를 생성하고, index.js 파일을 생성한다. index.js 파일의 템플릿은 ~/Developer/scratch/scratch-gui/src/examples/extensions/example-extension.js 를 참고한다.

일단 여기까지!.

Scratch 3.0 개발 환경 구축

우선 Node.js를 설치하여야 한다. macOS의 경우 homebrew를 사용하면 쉽게 설치가 가능하다. 권장 버전은 Node 8이나 현재 LTS 버전은 Node 10이므로, 둘 중 아무거나 사용해도 무방하다. (테스트 해봤는데 별 이상은 없다.)

  • Update: BLE 통신을 위한 noble 모듈은 Node 10을 지원하지 않는다. 따라서 Node 8로 설치해야함.
  • Node10도 상관없음.

homebrew의 설치 방법은 https://brew.sh을 참조하면 된다. 명령 한줄로 쉽게 설치가 가능하다. 설치가 완료되면 Node 10을 설치한다.

$ brew install node@8
or
$ brew install node@10

윈도우10의 경우, 설치파일을 이용하여 설치한다. 또 Git도 설치하여야 한다 (macOS에는 기본 포함). Git (https://git-scm.com/download/win), Node.js (https://nodejs.org/en/)를 설치한다.

Ubuntu or Linux의 경우, 해당되는 패키지 매니저를 사용하여 설치하도록 한다.

아래의 설명에서 디렉토리의 경로는 macOS를 기준으로 설명하나, 다른 OS에서도 유사하므로 감안하여 사용하도록 한다.


Scratch는 크게 세개의 파트로 구성되어 있다. 사용자가 직접 Interaction 할 수 있는 GUI를 제공하는 scratch-gui, Scratch의 실행 (Back-end)을 담당하는 scratch-vm, Scratch의 블럭 디자인 및 블럭간의 연결, 관리 등을 담당하는 scratch-blocks이다.

실제론 위 세개의 Repository를 자신의 Repository로 Fork하여 사용하는 것을 권장하고 있다. 위와 같이 공식 Repository를 Clone하여 사용하는 경우, 개발자가 수정한 다음 commit 및 push가 불가능 하므로 (승인없이는), github의 계정을 생성하고 위 Repository를 Fork하여 사용하도록 한다.

  • scratch-blocks는 사용자가 수정할만한 요소가 없다. 따라서 이 설치 과정에서 scratch-blocks는 건너뛰어도 됨.

이제 https://github.com/llk/scratch-gui, https://github.com/llk/scratch-vm, https://github.com/llk/scratch-blocks를 Fork 하여 자신의 Repository로 가져온다.

이제 Scratch의 소스를 받아온다. 임의의 디렉토리를 생성하고 (여기선 ~/Developer/scratch) 이동한 후 다음과 같이 입력한다.

$ mkdir -p ~/Developer/scratch
$ cd ~/Developer/scratch

$ git clone https://github.com/byeongkyu/scratch-gui
$ git clone https://github.com/byeongkyu/scratch-vm
$ git clone https://github.com/byeongkyu/scratch-blocks (안해도됨)

이제 각각의 프로젝트에 필요한 모듈을 설치한다.

$ cd scratch-vm
$ npm install
$ npm link

--- 이과정은 무시 ---
$ cd ../scratch-blocks
$ npm install
$ npm link
--- 이과정은 무시 ---

$ cd ../scratch-gui
$ npm install
$ npm link scratch-vm

참고로 npm link 명령은 local (현재 PC)에 저장된 모듈을 사용하겠다는 의미이다. 따라서 scratch-gui에서 scratch-blocks와 scratch-vm은 온라인에서 받아오는게 아닌 우리가 받아서 저장한 것을 사용한다. 실제 위 명령을 실행하고 난 다음의 결과 메시지가 다음과 같이 보인다.

$ npm link scratch-vm scratch-blocks
/Users/byeongkyu/Developer/scratch/scratch-gui/node_modules/scratch-blocks -> /usr/local/lib/node_modules/scratch-blocks -> /Users/byeongkyu/Developer/scratch/scratch-blocks
/Users/byeongkyu/Developer/scratch/scratch-gui/node_modules/scratch-vm -> /usr/local/lib/node_modules/scratch-vm -> /Users/byeongkyu/Developer/scratch/scratch-vm

위까지 실행 완료하고 에러가 없다면, 다음과 같이 입력하여 실행해본다.

$ cd ~/Developer/scratch/scratch-gui
$ npm start

이제 사파리나 크롬 등을 실행하여 http://0.0.0.0:8601 으로 접속하면, 다음과 같은 실행 화면을 볼 수 있다.

Scratch 3.0 소개

Scratch (https://scratch.mit.edu)는 전세계적으로 가장 널리 알려진 블럭 코딩 툴이다. 다른 거의 대부분의 블럭 코딩 도구들이 참조를 하고 있고, 거의 유사한 형태로 개발되고 있기도 하다.

MIT 미디어랩의  Lifelong Kindergarten Group에서 프로젝트로 개발되고 있고, 이전 버전은 사용해보지 않아서 모르겠지만 3.0은 오픈소스 형태로 개발중이며, 사용하고 있는 거의 모든 소스를 공개해 놓고 있다.

블럭 관련한 부분은 구글 Blockly를 가져와 디자인, 일부 동작 관련한 부분을 수정하여 사용하고 있으며, 나머지는 그룹에서 자체 개발 중인듯 하다.

사용하고 싶은 기업이나 개발자들은 자유롭게 복사해서 수정, 재배포 등이 가능하다. Scratch의 스크린샷을 책이나 발표자료에 사용하는 것도 가능하며, 브로셔 등에도 삽입이 가능하다. 다만 각 자료에 다음과 같은 내용을 담아주길 권고하고 있다.

“Scratch is a coding language and online community where you can create your own interactive stories, games, and animations — and share your creations with others around the world. As young people create and share Scratch projects, they learn to think creatively, reason systematically, and work collaboratively. Scratch is a project of the Scratch Foundation in collaboration with the Lifelong Kindergarten group at the MIT Media Lab. It is available for free at https://scratch.mit.edu

Scratch를 사업화에 사용하려는 기업에서 소스를 가져와 수정하고 이를 상용화 하여도 문제가 없다. 자세한 라이센스 및 사용 관련한 내용은 https://scratch.mit.edu/info/faq 를 참조하면 된다.

실제 동작하는 데모 버전을 구경하고 싶다면 https://llk.github.io/scratch-gui/develop/ 에서 사용해볼 수 있다.