레슨 6 / 8·20분
툴박스와 워크스페이스 커스터마이징
툴박스(Toolbox) 구성
툴박스는 사용자가 드래그할 수 있는 블록들의 목록입니다. 카테고리로 블록을 분류하고, 각 카테고리에 색상을 지정하여 직관적인 인터페이스를 만들 수 있습니다. XML 또는 JSON 형식으로 정의합니다.
JSON 형식 툴박스 정의
javascript
// 툴박스 정의 (JSON 형식)
var toolbox = {
kind: "categoryToolbox",
contents: [
{
kind: "category",
name: "논리",
colour: "#5C81A6",
contents: [
{ kind: "block", type: "controls_if" },
{ kind: "block", type: "logic_compare" },
{ kind: "block", type: "logic_operation" },
{ kind: "block", type: "logic_negate" },
{ kind: "block", type: "logic_boolean" }
]
},
{
kind: "category",
name: "반복",
colour: "#5CA65C",
contents: [
{ kind: "block", type: "controls_repeat_ext" },
{ kind: "block", type: "controls_whileUntil" },
{ kind: "block", type: "controls_for" },
{ kind: "block", type: "controls_forEach" }
]
},
{
kind: "category",
name: "수학",
colour: "#5C68A6",
contents: [
{ kind: "block", type: "math_number" },
{ kind: "block", type: "math_arithmetic" },
{ kind: "block", type: "math_random_int" }
]
},
{
kind: "category",
name: "변수",
colour: "#A65C81",
custom: "VARIABLE" // 동적 변수 카테고리
},
{
kind: "category",
name: "함수",
colour: "#9A5CA6",
custom: "PROCEDURE" // 동적 함수 카테고리
}
]
};워크스페이스 초기화와 설정
javascript
// 워크스페이스 생성
// var workspace = Blockly.inject("blocklyDiv", {
// toolbox: toolbox,
// grid: {
// spacing: 20,
// length: 3,
// colour: "#ccc",
// snap: true // 그리드에 스냅
// },
// zoom: {
// controls: true, // 줌 컨트롤 표시
// wheel: true, // 마우스 휠 줌
// startScale: 1.0, // 초기 줌 레벨
// maxScale: 3, // 최대 줌
// minScale: 0.3 // 최소 줌
// },
// trashcan: true, // 휴지통 표시
// move: {
// scrollbars: true, // 스크롤바
// drag: true, // 드래그 이동
// wheel: true // 휠 스크롤
// },
// renderer: "zelos" // 렌더러 (geras, zelos, thrasos)
// });
// 워크스페이스 옵션 객체
var workspaceOptions = {
toolbox: toolbox,
grid: { spacing: 20, length: 3, colour: "#ccc", snap: true },
zoom: { controls: true, wheel: true, startScale: 1.0 },
trashcan: true,
renderer: "zelos"
};
window.alert("워크스페이스 설정 완료: " + JSON.stringify(Object.keys(workspaceOptions)));테마 커스터마이징
javascript
// 커스텀 테마 정의
// var customTheme = Blockly.Theme.defineTheme("myTheme", {
// base: Blockly.Themes.Classic,
// blockStyles: {
// logic_blocks: {
// colourPrimary: "#4C97AF",
// colourSecondary: "#3B7D95",
// colourTertiary: "#2A5F73"
// },
// loop_blocks: {
// colourPrimary: "#5BA55B",
// colourSecondary: "#4A8E4A",
// colourTertiary: "#377237"
// },
// math_blocks: {
// colourPrimary: "#5B67A5",
// colourSecondary: "#4A5489",
// colourTertiary: "#374066"
// }
// },
// categoryStyles: {
// logic_category: { colour: "#4C97AF" },
// loop_category: { colour: "#5BA55B" },
// math_category: { colour: "#5B67A5" }
// },
// componentStyles: {
// workspaceBackgroundColour: "#1e1e1e",
// toolboxBackgroundColour: "#333",
// toolboxForegroundColour: "#fff",
// flyoutBackgroundColour: "#252526",
// flyoutForegroundColour: "#ccc"
// }
// });
// 테마 설정 예시 구조
var themeConfig = {
blockStyles: ["logic_blocks", "loop_blocks", "math_blocks"],
categoryStyles: ["logic_category", "loop_category", "math_category"],
componentStyles: ["workspace", "toolbox", "flyout"]
};
window.alert("테마 구성 요소: " + JSON.stringify(themeConfig));- •
Blockly.inject()— DOM 요소에 워크스페이스 주입 - •
toolbox— 카테고리/블록 목록 정의 (JSON 또는 XML) - •
grid— 그리드 표시 및 스냅 설정 - •
zoom— 줌 컨트롤 및 범위 설정 - •
renderer— 블록 렌더러 선택 (geras, zelos, thrasos) - •
Theme.defineTheme()— 커스텀 테마 생성
💡
zelos 렌더러는 Scratch 스타일의 둥근 블록을 제공하여 초보자에게 친숙합니다. geras는 클래식 스타일입니다. 대상 사용자에 맞는 렌더러를 선택하세요.