연구 설문조사: Blockly 사용 경험을 알려주세요
설문조사 시작
렌더기
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
블록의 모양은 블록 정의 (즉, 필드 및 연결)를 기반으로 렌더러에 의해 결정됩니다.
내장 렌더러
Blockly는 세 가지 기본 제공 렌더러를 제공하며, 각 렌더러는 프로그램에 약간 다른 느낌을 줍니다.
| 렌더기 |
설명 |
이미지 |
| Thrasos
|
권장 렌더러 더 균일한 간격과 단색 테두리가 있는, 보다 현대적인 geras 렌더러입니다. |
|
| Geras
|
기본 렌더러입니다. Blockly가 빌드된 원래 렌더러입니다. |
|
| Zelos |
Scratch-3.0 블록 디자인을 기반으로 하는 렌더기입니다. |
 |
이러한 렌더러 중 하나를 사용하려면 이름을 구성 옵션에 전달합니다.
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
맞춤 렌더러
프로그램에 내장 렌더러와 다른 모양과 느낌을 제공하려면 맞춤 렌더러를 만들 수도 있습니다. 시작하려면 Blockly팀에서 권장하는 다음 단계를 따르세요.
- 렌더러 개념 문서를 읽고 렌더러의 모든 구성요소가 어떻게 조합되는지 알아봅니다.
- 커스텀 렌더러 Codelab을 완료하여 커스텀 렌더링을 직접 연습해 보세요.
- 프로젝트에 디버그 렌더러를 추가합니다.
- 렌더러를 맞춤설정합니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-07-25(UTC)
[null,null,["최종 업데이트: 2025-07-25(UTC)"],[[["\u003cp\u003eBlock shape is determined by a renderer based on the block's definition, including fields and connections.\u003c/p\u003e\n"],["\u003cp\u003eBlockly offers three built-in renderers: Thrasos (recommended), Geras (default), and Zelos (Scratch-3.0 based).\u003c/p\u003e\n"],["\u003cp\u003eCustom renderers can be created for unique program aesthetics by following documentation and tutorials.\u003c/p\u003e\n"]]],[],null,["# Renderers\n\nThe shape of a block is determined by a renderer, based on the\n[block's definition](/blockly/guides/create-custom-blocks/define/block-definitions) (that is, its fields and connections).\n\nBuilt-in renderers\n------------------\n\nBlockly provides three built-in renderers, each of which give a slightly\ndifferent feel to the program.\n\n| Renderer | Description | Image |\n|----------|---------------------------------------------------------------------------------------------------------------------|-------|\n| Thrasos | The recommended renderer. It is a more modern take on the geras renderer, with more even spacing and solid borders. | |\n| Geras | The default renderer. It is the original renderer that Blockly was built with. | |\n| Zelos | A renderer based on Scratch-3.0 block design. | |\n\nTo use one of these renderers, pass the name into the configuration options: \n\n Blockly.inject('blocklyDiv', {\n renderer: 'thrasos'\n });\n\nCustom renderers\n----------------\n\nIf you want to give your program a different look and feel than any of the\nbuilt-in renderers, you can also create a custom renderer. To get started the\nBlockly team recommends you:\n\n1. Read through the [renderer concept docs](/blockly/guides/create-custom-blocks/renderers/concepts/overview) to learn how all of the components of a renderer fit together.\n2. Complete the [custom renderer codelab](https://blocklycodelabs.dev/codelabs/custom-renderer/index.html) to get hands-on practice with custom rendering.\n3. Add the [debug renderer](https://www.npmjs.com/package/@blockly/dev-tools#debug-renderer) to your project.\n4. Customize your renderer."]]
