구글 블록클리(Google Blockly)에 대해 알아보자

교육용 프로그래밍 언어로 대표적인 것이 스크래치나 엔트리 등의 블록 코딩이 있습니다. 블록 코딩은 블록을 레고를 조립하듯이 코드를 짜는 방식을 뜻하며, 특정 프로그래밍 언어를 몰라도 직관적으로 프로그램을 만들 수 있습니다. 

Blockly란?

구글 블록클리(Google Blockly)는 블록 코딩을 위한 에디터를 만들 수 있도록 도와주는 자바스크립트 라이브러리입니다.

유명한 구글 앱 인벤터(App Inventor)나 Code.org(코드오알지) 사이트에서도 구글 블록클리를 활용한 곳들입니다. 구글 블록클리에서는 코당에서 자주 사용하는 블록들을 제공하며, 이렇게 제공된 블록은 JavaScript, Python, PHP, Dart 등의 프로그래밍 언어로 변환될 수 있습니다. 또한 응용을 한다면 새로운 커스텀 블록도 만들 수 있습니다. 

Blockly 특징

블록클리의 특징은 다음과 같습니다.

• 순수한 자바스크립트 라이브러리.
• 100% 클라이언트 사이드. 서버 의존도 없음.
• 모든 주요 브라우저와 호환됨. (크롬, 파이어폭스, 사파리, 오페라. 익스플로러)
• 높은 커스터마이징 기능과 확장성.

유저는 블록클리의 코드 블록을 자유롭게 조립할 수 있고, 이렇게 조립된 블록들이 프로그래밍 코드로써 실행이 됩니다. 점점 어린이 대상의 코딩 교육에 대한 관심이 높아지는 요즘 이와 같이 블록클리를 활용하면, 효과적인 블록코딩 에디터를 만드는데 도움이 됩니다.

Blockly 설치하기

npm으로 블록클리를 설치할 수 있습니다.

npm install blockly

google/blockly

Blockly 가이드북 둘러보기

구글 블록클리에 대한 자세한 가이드북은 아래 구글 개발자 사이트에서 확인해볼 수 있습니다.

developers.google.com/blockly/guides/get-started/web

Get Started  |  Blockly  |  Google Developers

코드 제너레이터 Code Generators

어플리케이션 관점에서 보면 조립된 블록은 단순한 textarea와 동일합니다. 블록클리는 실제 프로그래밍 언어가 아니지만, 아래와 같은 제네리어터 클래스를 통해 프로그래밍 코드로 변환됩니다.

• javascript_compressed.js
• python_compressed.js
• php_compressed.js
• lua_compressed.js
• dart_compressed.js

이때 제너레이터 클래스는 blockly_compressed.js 바로 직후에 include 되어야 합니다.

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>

다음과 같이 유저가 만든 블록을 코드로 번역할 수 있습니다.

var code = Blockly.JavaScript.workspaceToCode(workspace);

만약 JavaScript 외 다른 언어로 바꾸고 싶다면 JavaScript 부분을 다른 언어를 바꿔줍니다. Python, PHP, Lua, 혹은 Dart 등 번역하고자 하는 해당 언어로 바꿔줍니다.

function myUpdateFunction(event) {
  var code = Blockly.JavaScript.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(myUpdateFunction);

이 블록을 코드로 번역해주는 함수는 매우 빠르게 동작하기 때문에 빈번하게 호출해도 됩니다. 위의 예시와 같이 이벤트 리스너를 등록하여, 블록의 변화가 있을 때 리얼타임으로 코드를 갱신하는 방법으로 사용할 수 있습니다

고정 크키의 워크스페이스 Fixed-sized Workspace

블록클리를 웹페이지에 배치하는 가장 심플한 방법은 비어있는 div 태그 안에 넣는 것입니다. (블록클리 설치 위치에 따라 위의 경로를 적절히 바꿔줍니다)

<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>

그 다음은 사용자 언어에 해당하는 메시지를 include합니다. (위 경우는 영어)

<script src="msg/js/en.js"></script>

비어있는 div를 페이지의 body 안에 넣고 사이즈를 설정합니다.

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

페이지의 아무 곳에 위와 같이 툴 박스의 구조를 추가합니다. 

<xml id="toolbox" style="display: none">
  <block type="controls_if"></block>
  <block type="controls_repeat_ext"></block>
  <block type="logic_compare"></block>
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="text"></block>
  <block type="text_print"></block>
</xml>

마지막으로 비어 있는 div에 블록클리를 삽입하기 위해 위와 같이 호출합니다. 이 스크립트는 페이지의 맨 아래에 위치해야 하며, 그렇지 않다면 onload 이벤트로 호출해야 합니다.

<script>
  var workspace = Blockly.inject('blocklyDiv',
      {toolbox: document.getElementById('toolbox')});
</script>

현재 workspace 변수는 사용되지 않습니다. 하지만 이것은 나중에 블록을 저장하고 싶거나, 코드로 변환할 때 중요해질 겁니다. 만약 동일한 페이지에서 하나 이상의 블록클리 인스턴스를 사용해야 한다면, 각각의 반환된 workspace 값이 서로 다른 변수로 저장되어야 합니다.

실행결과가 위와 같은 화면이 나타난다면 제대로 성공한 것입니다.

데모 : Blockly Demo : Fixed Blockly

Blockly Demo: Fixed Blockly