Blockly 애플리케이션은 Blockly 편집기(작업 영역)가 포함된 웹 애플리케이션입니다. 이 문서에서는 Blockly 애플리케이션의 사용 사례를 살펴보고 일반적인 UI 기능을 살펴봅니다.
아직 읽어보지 않았다면 이 문서를 계속하기 전에 시각적 용어집과 기본 애플리케이션 단계를 읽어 보세요.
Blockly 애플리케이션은 어떤 역할을 하나요?
Blockly 애플리케이션은 사용자가 비디오 게임에서 로봇 공학, 데이터 분석에 이르기까지 다양한 분야에서 프로그램을 작성할 수 있도록 지원합니다. 사용자는 블록을 사용하여 프로그램을 작성하고 애플리케이션은 이를 사용하여 JavaScript나 Python과 같은 텍스트 기반 코드를 생성합니다. 그러면 애플리케이션이 생성된 코드를 직접 실행하거나 사용자가 로봇이나 휴대용 비디오 게임 컨트롤러와 같은 다른 플랫폼에서 다운로드하여 실행합니다.
다음은 사용자가 Blockly 애플리케이션으로 작성하는 프로그램의 몇 가지 예입니다.
퍼즐 풀이, 애니메이션 또는 음악: 생성된 코드는 퍼즐 (예: 미로)을 풀거나 애니메이션을 표시하거나 음악을 재생합니다. 예를 보려면 Code.org의 Music Lab을 참고하세요.
비디오 게임: 생성된 코드는 비디오 게임을 실행합니다. 예를 들어 MakeCode Arcade에서 '두더지 잡기'의 처음 두 레벨을 만들고 게임을 컨트롤러에 다운로드하거나 시뮬레이터에서 플레이합니다.
로봇 공학: 생성된 코드가 로봇을 제어합니다. 예를 들어 Ozoblockly로 로봇을 프로그래밍하고 실제 로봇에 다운로드하거나 시뮬레이터에서 실행합니다.
그리기: 생성된 코드는 2D 또는 3D 그림을 그립니다. 예를 보려면 BlocksCAD를 참고하세요.
데이터 분석: 생성된 코드는 데이터를 분석하고 그래프를 만듭니다. 예를 보려면 Dialogic 플랫폼 데모를 참고하세요.
애플리케이션별 코드: 생성된 코드는 특정 애플리케이션에 특정한 작업을 실행합니다. 예를 들어 Blockly 개발자 도구는 새로운 Blockly 블록을 설계하는 도구입니다. 사용자가 자체 Blockly 애플리케이션에 복사하여 붙여넣는 블록 정의 코드를 생성합니다.
사용자 인터페이스
Blockly 애플리케이션의 일반적인 구성요소를 이해하는 좋은 방법은 사용자 인터페이스를 살펴보는 것입니다.
기본 UI 구성요소
거의 모든 Blockly 애플리케이션은 Blockly 편집기(작업 공간), 출력 패널, '실행' 버튼과 같은 몇 가지 기본 구성요소를 공유합니다. 예를 들어 Blockly Games의 미로 UI는 다음과 같습니다.
일부 Blockly 애플리케이션에서는 '실행' 버튼을 생략하고 사용자가 변경할 때마다 출력 패널을 업데이트합니다. 예를 들어 Blockly 샘플의 그래프 애플리케이션에는 변경될 때마다 업데이트되는 두 개의 출력 패널 (그래프용 하나, 방정식용 하나)이 있습니다.
일부 애플리케이션에는 출력 패널이 없습니다. 이는 로봇 프로그래밍과 같은 하드웨어 애플리케이션에서 가장 일반적입니다. 이러한 애플리케이션 중 일부에는 하드웨어 시뮬레이터가 포함되어 있지만, 대부분은 사용자가 생성된 코드를 타겟 기기에 직접 다운로드하고 실행할 수 있도록 합니다.
추가 UI 구성요소
대부분의 애플리케이션에는 추가 UI 구성요소가 있습니다. 이러한 라이브러리 중 일부는 사용자의 작업을 저장하는 것과 같은 일반적인 요구사항을 충족하는 반면, GUI를 설계하는 것과 같은 애플리케이션별 요구사항을 충족하는 라이브러리도 있습니다. 예를 들면 다음과 같습니다.
애니메이션과 비디오 게임을 만드는 애플리케이션인 Scratch에는 그래픽 및 사운드 편집기, 새 스프라이트와 배경을 만드는 패널, 파일, 편집, 설정 메뉴가 있습니다.
동영상 게임을 만드는 애플리케이션인 MakeCode Arcade에는 출력 컨트롤, 코드 및 그래픽 편집기, 설정 메뉴, 다운로드 및 저장 버튼이 있습니다. 출력 패널은 휴대용 게임 컨트롤러를 시뮬레이션합니다.
MIT App Inventor는 휴대전화 앱을 만드는 애플리케이션으로, GUI 디자이너와 Blockly 편집기, 파일, 연결, 빌드, 설정 메뉴를 위한 별도의 화면이 있습니다. 출력 패널 대신 사용자는 휴대전화에서 생성된 코드를 테스트합니다.
포함해야 하는 추가 구성요소는 애플리케이션의 목표와 사용자의 능력에 따라 달라집니다. 일반적인 구성요소는 다음과 같습니다.
관리:
- 파일 관리 (새로 만들기, 열기, 저장, 다른 이름으로 저장, 삭제)
- 계정 관리 (만들기, 로그인, 로그아웃)
- 설정 (언어, UI 구성)
프로그래밍:
- 명령어 수정 (실행취소, 다시 실행, 복사, 잘라내기, 붙여넣기, 복제)
- GUI 디자이너
- 그래픽 및 사운드 편집기
- 코드 편집기 또는 읽기 전용 코드 표시
테스트
- 출력 구성 (시작/중지, 재생 속도, 볼륨, 스크린샷 등)
- 디버거 (중단점, 실행, 단계, 블록 강조 표시)
- 테스트 매개변수 설정
하드웨어
- 연결 (USB, 블루투스, QR 코드)
- 구성 (모델 선택, 액세서리 선택, 구성요소 이름 할당)
- 제어 (로봇 수동 제어, 로봇 위치 기록)
- 코드 다운로드
도움말
- 문서
- 대화형 가이드
- 컨텍스트에 민감한 도움말
어떻게 해야 하나요?
아직 애플리케이션에 대해 고민 중이라면 설계 고려사항에 대해 계속 읽어보세요.
간단한 애플리케이션을 빌드하는 방법을 알아보려면 Blockly 시작하기 Codelab을 참고하세요.
애플리케이션을 작성할 준비가 되었다면 다음 단계를 따르세요.