블록 디자인

지난 수년간 Blockly팀은 자체 블록을 많이 설계하고 다른 사용자가 블록을 설계하도록 도왔습니다. 다음은 그들이 얻은 교훈 중 일부입니다.

상위 블록을 선호합니다.

실행 성능이나 유연성이 저하되더라도 가능한 한 상위 수준의 접근 방식을 취해야 합니다. 다음 Apps Script 표현식을 생각해 보세요.

SpreadsheetApp.getActiveSheet().getDataRange().getValues()

모든 잠재적 기능을 보존하는 1:1 매핑에서는 위 표현식이 4개의 블록을 사용하여 빌드됩니다. 하지만 Blockly는 더 높은 수준을 목표로 하며 전체 표현식을 캡슐화하는 하나의 블록을 제공합니다. 목표는 나머지 5% 의 경우를 더 어렵게 만들더라도 95% 의 사례에 맞게 최적화하는 것입니다. Blockly는 텍스트 기반 언어를 대체하기 위한 것이 아니라 사용자가 텍스트 기반 언어를 사용할 수 있도록 초기 학습 곡선을 극복하는 데 도움이 되도록 고안되었습니다.

권장사항: 전체 API를 무작위로 블록으로 변환하지 마세요.

사용자 입력 선택 고려

숫자를 입력하는 다양한 방법(드롭다운, 숫자 필드, 값 입력)을 보여주는 세 개의 반복 블록

사용자로부터 매개변수를 가져오는 방법에는 세 가지가 있습니다. 드롭다운은 가장 제한적이며 간단한 튜토리얼과 연습에 적합합니다. 입력란은 더 많은 자유를 허용하며 더 창의적인 활동에 적합합니다. 값 블록 입력 (일반적으로 섀도 블록 포함)은 단순히 정적 값이 되는 대신 값(예: 랜덤 생성기)을 계산할 수 있는 기회를 제공합니다.

권장사항: 사용자에게 적합한 입력 방법을 선택하세요.

별도의 조건부 및 루프 블록 사용

동일한 카테고리의 if/then 및 while 블록을 보여주는 반례

신규 사용자에게 가장 어려운 블록은 조건문과 루프입니다. 많은 블록 기반 환경에서는 이러한 두 블록을 모두 동일한 '컨트롤' 카테고리로 그룹화하며, 두 블록 모두 모양과 색상이 동일합니다. 이로 인해 신규 사용자가 두 블록을 혼동하여 불만을 느끼는 경우가 많습니다. Blockly에서는 조건문과 루프를 각각 다른 색상으로 '로직' 및 '루프' 카테고리로 옮기는 것이 좋습니다. 따라서 이러한 아이디어는 모양이 비슷하지만 다르게 작동하는 고유한 아이디어임을 알 수 있습니다.

권장사항: 조건문과 루프를 별도로 유지합니다.

가변 입력 수 처리

특정 블록에는 가변 입력 수가 필요할 수 있습니다. 예를 들어 임의의 숫자 집합의 합계를 구하는 더하기 블록, 임의의 elseif 절 집합이 있는 if/elseif/else 블록, 초기화된 요소가 임의 개수인 목록 생성자가 있습니다. 여러 가지 전략이 있으며 각각 장단점이 있습니다.

a) 가장 간단한 방법은 사용자가 더 작은 블록으로 블록을 구성하도록 하는 것입니다. 예를 들어 2개의 숫자 덧셈 블록을 중첩하여 3개의 숫자를 더하는 경우가 있습니다. 또 다른 예는 if/else 블록만 제공하고 사용자가 이를 중첩하여 elseif 조건을 만드는 것입니다.

중첩된 더하기 블록: 1 + (2 + 3)

이 접근 방식의 장점은 사용자와 개발자 모두에게 초기 단순성이 있다는 점입니다. 단점은 중첩이 많은 경우 코드가 매우 번거로워지고 사용자가 읽고 유지하기가 어렵다는 점입니다.

b) 다른 방법으로는 항상 끝에 하나의 무료 입력이 있도록 블록을 동적으로 확장하는 것입니다. 마찬가지로 블록은 끝에 여유 입력이 두 개 있는 경우 마지막 입력을 삭제합니다. 이는 App Inventor의 첫 번째 버전에서 사용한 접근 방식입니다.

값 입력 4개를 추가하는 블록으로, 마지막 입력은 비어 있습니다.

자동으로 늘어나는 블록은 몇 가지 이유로 App Inventor 사용자에게 인기가 없었습니다. 첫째, 항상 무료 입력이 있었고 프로그램은 '완료'되지 않았습니다. 두 번째로, 스택 중간에 요소를 삽입하는 것은 수정 아래의 모든 요소를 연결 해제하고 다시 연결해야 하므로 불편했습니다. 하지만 순서가 중요하지 않고 사용자가 프로그램의 공백을 편안하게 받아들일 수 있다면 이는 매우 편리한 옵션입니다.

c) 일부 개발자는 구멍 문제를 해결하기 위해 입력을 수동으로 추가하거나 삭제하는 블록에 +/- 버튼을 추가합니다. Open Roberta는 이러한 버튼 두 개를 사용하여 하단에서 입력을 추가하거나 삭제합니다. 다른 개발자는 스택의 중간에서 삽입 및 삭제를 수용할 수 있도록 각 행에 버튼 2개를 추가합니다. 다른 앱은 비슷한 항목의 재정렬을 수용할 수 있도록 각 행에 위/아래 버튼 2개를 추가합니다.

외부 값 입력 3개를 추가하고 입력을 추가하거나 삭제하는 더하기 및 빼기 버튼이 있는 블록입니다.

이 전략은 블록당 2개에서 행당 4개에 이르는 다양한 옵션을 제공합니다. 한쪽 끝에는 사용자가 필요한 작업을 수행할 수 없는 위험이 있고, 다른 쪽 끝에는 UI가 버튼으로 가득 차 우주선 엔터프라이즈의 브리지처럼 보이는 위험이 있습니다.

d) 가장 유연한 접근 방식은 블록에 변형자 버블을 추가하는 것입니다. 이는 해당 블록의 구성 대화상자를 여는 단일 버튼으로 표시됩니다. 요소는 원하는 대로 추가, 삭제 또는 재정렬할 수 있습니다.

값 입력 3개를 추가하고 값 입력 추가 또는 삭제를 위한 변환자가 있는 블록입니다.

이 접근 방식의 단점은 변환자가 초보 사용자에게 직관적이지 않다는 점입니다. 뮤테이터를 도입하려면 어떤 형태로든 안내가 필요합니다. 어린 아동을 타겟팅하는 Blockly 기반 애플리케이션은 변환자를 사용해서는 안 됩니다. 한 번 익히면 고급 사용자에게 매우 유용합니다.

권장사항: 각 전략에는 장단점이 있으므로 사용자에게 적합한 전략을 선택하세요.