Blockly 소개

 Blockly는 구글에서 만든 블록 코딩 오픈소스 라이브러리입니다. 스크래치의 코드 편집기 등 많은 블록코딩 콘텐츠들이 Blockly를 사용하여 개발되고 있습니다. 우리가 만들 블록코딩 콘텐츠에도 Blockly를 사용하면 기존 블록코딩 유저들에게 더 쉽게 다가갈 수 있을 거라 생각합니다.

시작하기

 블록리 개발자 문서의 가이드 페이지를 보면 node.js 환경에서 기본 샘플 프로젝트를 설치하는 방법을 제공합니다.

npx @blockly/create-package app hello-world

//타입스크립트 환경으로 설치
npx @blockly/create-package app hello-world --typescript

시작 프로젝트를 설치하면 다음과 같은 파일들을 볼 수 있습니다.

/src/blocks/text.js
/src/generators/javascript.js
/src/index.css
/src/index.html
/src/index.js
/src/serialization.js
/src/toolbox.js

DIY 에디터에 설치

위 프로젝트를 DIY 에디터에서 사용할 수 있게 CDN 설치를 활용해서 프로젝트를 구성해 보겠습니다.

<!-- Load Blockly core -->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="https://unpkg.com/blockly/msg/ko.js"></script>

각각의 파일들을 import 문법 사용을 제외하고 구성 그대로 복사하였습니다. src 폴더는 제외하였습니다.

node.js 개발 환경을 설치하기 번거로운 분들은 아래 에디터 페이지 링크로 이동하면 프로젝트를 살펴보고 

DIY 에디터의 Blockly 시작 샘플 프로젝트 바로 가기

샘플 프로젝트 살펴보기

프로젝트를 실행하면 위와 같은 화면들 만나보실 수 있습니다.

화면 오른쪽에 보이는 공간이 Blockly 의 핵심인 코드 편집기이며 워크스페이스(workspace) 라고 부릅니다. 우리가 만든 콘텐츠에 블록코딩을 적용할 때에도 위 편집기를 그대로 활용하실 수 있습니다.

워크스페이스의 왼쪽에 보이는 리스트들을 클릭하면 해당 항목에 맞는 다양한 블록들을 보실 수 있습니다. 이 리스트와 블록 부분은 툴박스(toolbox) 라고 부릅니다. Logic, Loops, Math 와 같은 항목들은 공통된 속성을 가지는 블록들을 모아 놓는 카테고리 역할을 합니다. 카테고리에서 블록을 선택 후 드래그해서 오른쪽 편집 영역으로 끌어다 놓으면 블록들을 추가하거나 배치할 수 있습니다.

Blockly의 핵심인 코드 편집기의 화면 구성은 모두 살펴보았습니다.

프로젝트 화면의 왼쪽의 살구색 네모 영역과 아래 흰 바탕 영역은 샘플 프로젝트만의 기능을 위한 영역입니다.

워크스페이스에 블록을 배치하면 해당 블록 조합들의 자바스크립트 코드를 살구색 네모 영역에 표시하고, 커스텀으로 만들어진 텍스트 추가 블록을 사용했을 때 해당 하는 문자열이 네모 아래 흰 바탕 영역에 출력 되는 형태로 보이는 군요.

다음으로 샘플 프로젝트의 파일들을 살펴보면서 Blockly의 사용 방법에 대해서 더 알아보겠습니다.

파일 살펴보기

blocks/text.js
generators/javascript.js
index.css
index.html
index.js
serialization.js
toolbox.js

1. index.html, index.css, index.js

샘플 프로젝트의 중심이 되는 파일들 입니다. index.html 이나 index.css 에서는 화면 구성과 스타일을 정의했습니다. index.js 파일에서는 프로그램의 기본 동작에 대해서 구현하고 Blockly와 프로그램을 이어주는 역할을 합니다.

2. blocks/text.js, generators/javascript.js

 이 파일들은 프로그램의 기능들을 사용하기 위해 커스텀 블록 제작이 필요할 경우 사용되는 파일들입니다. 이 프로젝트에서는 문자열을 출력할 수 있는 텍스트 추가 버튼을 만들기 위해 사용되었습니다. blocks/text.js 파일에서는 블록의 모양을 정의하였고, generators/javascript.js 파일에서는 위 블록을 자바스크립트 코드로 어떻게 변환할지 정의하였습니다.

3. toolbox.js

 이 파일은 워크스페이스에서 사용 가능한 툴 박스의 블록들을 카테고리화 하여 정의하는 파일입니다. 많은 내장 블록들을 사용할 수 있도록 정의 한걸로 보이네요. blocks/text.ts 파일이나 generators/javascript.js 파일에서 블록의 추가하였어도 여기에 해당 블록을 추가하지 않으면 워크스페이스의 툴박스에는 블록이 표시되지 않습니다. 또한 블록에 디폴트로 값을 할당 싶으면 쉐도우 블록을 정의해서 디폴트 값으로 사용할 수 있습니다.

4. serialization.js

 이 파일에서는 워크스페이스에 배치된 블록들을 localStorage에 저장하고 불러오는 기능을 정의해 놓은 파일입니다.  워크스페이스에 배치된 블록들은 기본적으로 json 형태를 가지고 있어 쉽게 입출력 할 수 있습니다.

Blockly 콘텐츠 개발 순서 정리

살펴본 내용을 기반으로 블록 코딩 콘텐츠를 Blockly 를 사용해서 제작할 때의 개발 흐름을 정리해보겠습니다.

1. 블록 코딩을 사용해서 제어할 기본 프로그램 제작

2. 블록 코딩에서 제어할 수 있도록 기능을 API 제공

3. API를 사용할 수 있도록 커스텀 블록 정의

4. 블록 코딩으로 작성된 코드를 프로그램에 주입

 샘플 프로젝트의 각 파일마다 핵심 역할과 사용법만 간결하게 작성되어 있어 생각했던거 보다 전반적인 사용법의 흐름을 파악하는데 많이 어렵지는 않았습니다. 좀 더 자세한 사용 방법은 추후에 직접 간단한 블록코딩 콘텐츠를 만들어 보며 알아 보면 좋을 것 같습니다.

에디터 바로가기

https://diyplay.co.kr/editor/edit/10