Blockly도 그동안 계속 버전 패치를 해왔는데, 이번 2019 Q4 릴리즈에선 약간 더 큰 변화를 가지고 릴리즈 되었습니다.
https://groups.google.com/forum/#!searchin/blockly/npm%7Csort:date/blockly/cOxLdS7vX-c/bq-KIyBXAAAJ
Zelos라는 렌더링 엔진을 사용하는 것인데, 기존 렌더링 엔진인 Geras를 보완하여 개발하였습니다. 블럭들의 모습이 Scratch의 그것들과 상당히 유사해졌고, 실시간으로 블럭을 그려서 사용하다보니 좀더 예쁜? 모습을 보여줍니다.
각 렌더링 엔진에 대한 설명은 다음의 슬라이드에서 참고.
여하튼 기존 개발 환경 구축과 마찬가지로 소스를 가지고와 옵션을 살짝 건드려주면? 다음과 같은 모습을 보여줍니다.
![](https://i0.wp.com/ahnbk.com/wp-content/uploads/2020/01/image-1.png?resize=525%2C448&ssl=1)
렌더링 엔진을 선택하는 부분은 Blockly를 인젝션하는 부분에 옵션을 다음과 같이 추가해주면 됩니다.
var workspacePlayground = Blockly.inject('blocklyDiv', {
toolbox: BLOCKLY_TOOLBOX_XML['standard'],
media: '/blockly/media/',
trashcan: true,
zoom: {
controls: true,
wheel: true,
startScale: 0.7,
maxScale: 3,
minScale: 0.3,
scaleSpeed: 1.2
},
renderer : "zelos"
});
끝.