Learning
레슨 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는 클래식 스타일입니다. 대상 사용자에 맞는 렌더러를 선택하세요.