3.1 Blockly 소개


이 장에서는 Blockly라고 하는 시각 프로그래밍 언어(Visual Programming Language)로 알고리즘을 개발하는 방법을 배울 것이다. 시각 프로그래밍 언어에서 언어의 기본 요소는 시각적 아이콘으로 표현되어진다. 시각적 아이콘들은 완벽한 프로그램을 만들기 위해 작업공간(workspace) 내에서 선택, 복사, 이동을 할 수 있다. 이 강좌에서는 계산적 사고(Computational Thinking)에 대한 학습이 적합하기 때문에 Blockly를 사용한다. Blockly는 시각적 아이콘들이 “block”으로 불려 Blockly라고 부른다.

Blockly는 실제 프로그래밍 언어이다. Blockly에서 작성한 프로그램들은 바로 실행 가능하고, 텍스트 기반의 프로그래밍 언어 코드로 바로 전환할 수 있다. 특히 Blockly 내에서 Python으로 전환되는 것을 볼 수 있을 것이다. 실시간 데이터와 대용량 데이터를 조작하기 위해 허용된 블록들을 사용할 것이다. Blockly에서 프로그래밍 언어의 기본 요소들을 표현하는 방법은 다음 예들에서 찾아볼 수 있을 것이다.

  • 행동
  • 배열
  • 결정
  • 반복
  • 상태

 

Blockly 프로그래밍 환경에서 기능은 이미 정의된 블록들이 있는 팔레트 영역과 블록들을 이용하여 프로그래밍을 할 수 있는 작업 영역으로 구성되어있다. 팔레트에 어떤 블록이든 작업 영역에서 선택되고 떨어뜨릴 수 있다. 이후 예의 구조에서 더 볼 수 있을 것이다. Blockly의 중요한 특징은 블록들이 구문론적으로 일치하는 배열들을 허용하기 위해 “끼워 맞추기”로 디자인되어있다. Blockly의 이 특징은 프로그래밍에서 구문 문제를 일시적으로 피할 수 있게 한다. 그래서 논리적 구조에 초점 맞춰 만드는 것을 시도할 수 있게 한다. 블록들은 어떤 방법에 의해 블록들의 행동을 변화시키고 이를 선택할 수 있는 옵션들 또한 갖고 있을 것이다.

 

Multiple Choice Blockly는 시각 프로그래밍 언어(Visual Programming Language)언어이다.




3.1.1 배열과 행동

Blockly에서 행동에 대한 순서를 표현하기 위해 사용되는 방법 중 하나의 데모는 미로(maze)이다. 미로 문제의 첫 번째 단계는 아래의 그림에서 볼 수 있다. 왼쪽이 미로다. 미로는 아바타와 목표 아바타의 시작 지점에서 강조 표시된 경로로 구성한다. 물론, 그 의도는 그 목표지점까지 경로를 따라 아바타가 움직일 수 있는 Blockly 문제를 고안한 것이다. 이 단계 팔레트에서는 3가지 블록들이 있다. “앞으로 움직이기(move forward)”블록은 미로에서 아바타가 보고 있는 방향으로 움직이도록 한다. 두 가지의 “회전(turn)” 블록들은 아바타가 왼쪽 또는 오른쪽으로 회전하기 위한 초기 설정 블록이다. 우리의 프로그램에서 블록들이 조합되었을 때, “프로그램 실행(Run Program)” 버튼을 누르면 테스트할 수 있다.


그림 3-1. The Blockly Maze (Level 1)

위의 Maze 게임 URL

 

각 블록들은 상단에 오목한 부분과 하단에 볼록한 부분이 있다. 각 볼록의 오목한 부분과 볼록한 부분이 퍼즐처럼 결합하는 것이 가능하다. 이 방법은 Blockly 프로그램을 실행할 때 블록들의 실행 순서대로 블록들을 “쌓아 올릴”수 있도록 한다. 이 간단한 예에서는 아바타를 두 번 앞으로 움직이도록 하는 것이 필요하다. 이 예에서는 두 개의 “앞으로 움직이기” 블록을 쌓아 올리는 것으로 끝낼 수 있다. 이 프로그램이 실행될 때, 아바타는 목표지점까지 움직인다. 이 경우 “회전”블록들이 필요하지 않다.

명심해야할 중요한 것은 하나의 블록 하단에 다른 블록의 상단을 맞춰서 배치하는 것이다. 이것은 Blockly에서 행동들의 순서를 표현하기 위한 방법이다.

미로 2단계는 유사하지만 “회전”블록들의 사용이 포함된다.

 

3.1.2 반복문

반복문은 프로그래머가 몇 번이고 반복되는 행동을 할 수 있다. 각 반복문은 동일하지 않도록 약간 변경해 놓았다. 미로 예에서 레벨 3은 반복문의 사용을 소개한다. 아래 그림은 Blockly 미로에 대한 레벨 3 그림이다.


그림 3-2. The Blockly Maze (level 3)

 

이 예에서 소개된 새로운 블록은 “~할 때까지 반복(repeat until do)”블록이다. 이 블록은 조건 반복의 한 형태이다. 조건 반복은 조건을 달성할 때 까지(until) 계속 반복(repeats)하는 것을 의미한다. 예제에서 블록의 경우, 조건은 목적지에 도착하는 것이다(목적지 아이콘로 표시). “~할 때까지 반복”블록은 다른 블록을 넣을 수 있는 공간을 가지고 있다. “~할 때까지 반복” 블록의 의미는 어떤 블록을 넣던 간에 조건을 만족할 때 까지 반복적으로 실행된다는 것이다.

미로에서의 이 단계를 해결하는 것에서 배열을 사용할 수 있으며, 목표 상태에 도달하는데 필요한 많은 “앞으로 이동”블록을 쌓아올리는 것에 사용할 수 있다. 이 방법은 하나의 단계가 수백 배, 수천 배, 수백만 배 반복할 필요가 있는 과제에서 잘 동작하는 방법이 아니기 때문에 만족할 만한 해결 방법이 아니다. 게다가 미로는 해결에 필요한 블록의 개수가 제한되어 있다. 이 미로의 경우 하나의 추가 블록을 작업 공간에서 사용할 수 있다. 블록의 제한은 인위적이지만 이 단계에서의 초점은 반복문을 강제적으로 사용하는 것에 있다.

일반적으로 반복문 안에 하나 이상의 블록이 반복되어질 것이다. 다음 단계의 미로에서 몇몇 블록이 이 경우에 해당한다. “~할 때까지 반복” 블록에 두 개의 블록들을 끼워 넣기 위해서 먼저 한꺼번에 두 개의 블록을 순서대로 만들어야 한다. 이 두 블록들은 “~할 때까지 반복” 블록에 구성 요소 같이 이동할 수 있다. 유사한 방법으로 많은 블록들이 “~할 때까지 반복” 블록에 끼워지기 전에 만들어지는 것을 요구한다.
예제 - level 3, 예제 - level 4, 예제 - level 5

 

 

Multiple Choice '~할 때까지 반복(repeat until do)'블록 안에는 반복대상으로 하나의 다른 블록만 넣을 수 있다.


 

Multiple Choice 'if do'블록은 주어진 조건이 참일 때만 do부분이 실행된다.


 

Multiple Choice 'if do else'블록은 조건이 참일 경우 else부분이 실행된다.




3.1.3 의사결정

지금까지의 퍼즐은 아바타가 목적지까지 길을 찾아 가기 위해 반복적인 행동을 하는 고정적인 패턴을 가진 비교적 간단한 미로였다. 더 복잡한 미로는 아바타의 현재 상황과 행동에 적절하게 평가되는 추가적 능력이 요구된다. 이 같은 프로그래밍은 의사 결정을 하기 위해 “이해력”이 요구된다.

미로의 6번째 단계에서는 의사 결정 없이 합리적으로 해결될 수 없을 만큼 복잡하다. 이 미로는 아래 그림에서 볼 수 있다. 이 단계는 “왼쪽으로만 회전” 미로이다. 물론 이와 같은 미로는 많이 있다. 6단계 미로에서는 아바타가 목적지에 도달하기 위해 4번 왼쪽으로 회전하게 만들어야하기 때문에 의사 결정이 필요하다. 그러나 회전 간의 거리는 각 경우마다 다르다. 그래서 아바타를 이끌기 위해 간단한 반복에 의존할 수 없다. 물론 특정한 퍼즐에 대해 “이동” 그리고 “회전” 블록들의 순서를 간단하게 배열할 수 있다. 그러나 다른 퍼즐에서 동작하지 않기 때문에 흥미로운 해결책이 아니다. 실제로 현실적이지 않기 때문에 하나의 경우가 아닌 모든 경우에 대해 프로그램을 작성할 수 있기를 원한다.


그림 3-3. Blockly 미로 (level 6)

 

6단계를 위한 새로운 블록은 “if do” 블록이다. 이 블록의 의미는 아바타 바로 앞의 “경로”를 옵션 설정에 따라 테스트 된다. 이 블록에 추가적 설정은 3가지 다른 가능성(앞으로, 왼쪽으로, 오른쪽으로)들을 평가하기 위해 검사를 허용한다. 각 검사의 결과는 참 또는 거짓이다. 예를 들어 초기 상태의 조건 “앞에 통로”는 참이다. 그리고 다른 두 번째 조건들은 거짓이다. 아바타가 첫 번째 회전을 할 때, “앞에 통로” 조건은 거짓인 반면, “왼쪽에 통로” 조건은 참이다. 이 미로에서 “오른쪽에 통로” 조건은 절대 참이 아니다. 검사 결과가 참이라면 “do” 부분의 표현법이 수행된다. 검사 결과가 거짓이라면 수행되어지지 않는다.

아바타 로직에 대해 생각하는 한 가지 방법은 아바타가 아래 두 규칙에 따라 행동하는 것이다.

  • 만약 앞에 통로가 있다가 참이면 앞으로 이동
  • 만약 왼쪽에 통로가 있다가 참이면 왼쪽으로 회전

 

오른쪽 통로에 있으면 왼쪽으로만 회전하기 때문에 3번째 규칙이 필요하다. 아바타는 목표에 도달할 동안 두 가지 규칙을 반복적으로 적용한다. 다음 그림에서 볼 수 있듯이 Blockly에서 이 로직을 프로그래밍 할 수 있다.


../_images/Blockly-Maze-Level6-Solution1.png
그림 3-4. 미로의 첫 해결방안 (Level 6)

 

스스로 해결방법을 깨닫기 위해 시도해보자.

아바타를 위한 코드가 일치하는지 논의할 수 있다. 각 단계에서 아바타 앞의 다음 위치는 직선 또는 모퉁이이다. 이 퍼즐에서는 두 가능성만 가지고 있다. 다음 위치가 직선이면, 아바타는 앞으로 이동한다. 모퉁이가 아니기 때문에 회전하지 않는다. 만약 다음 위치가 모퉁이이면, 아바타는 모퉁이로 이동하여 회전을 한다. 이러한 경우 각각에서 아바타의 행동들은 일치한다. 아바타의 코드는 그 두 가능성이 모두 정확하기 때문에 종합적으로 일치한다.

 

연습문제 : 코드의 두 표현법 순서를 바꿔보아라. 이 또한 작동하는 것을 볼 수 있다. 아바타의 코드가 정확한지 위의 논의한 논증과 유사하게 밝혀내라.
아바타의 로직에 대해 생각하는 다른 방법은 아래 규칙들에 따라 아바타가 행동하는 것이다.

  • 앞으로 이동
  • 왼쪽에 통로가 참이면 왼쪽으로 회전

 

아바타가 목표에 도달할 때 까지 두 규칙을 반복적으로 적용한다. 아바타를 위한 이 로직은 다음 그림에서 볼 수 있는 것처럼 Blockly에서 프로그래밍 될 수 있다. 아바타에 대한 코드의 버전이 옳바른지에 대해 논의할 수 있다. 각 단계에서 아바타 앞의 다음 위치는 직선 또는 모퉁이이다. 다음 위치가 직선이라면 아바타는 앞으로 이동하고 회전하지 않는다. 다음 위치가 모퉁이라면 아바타는 코너에서 회전하고 이동한다. 이번에도 두 경우에만 해당하고, 아바타가 두 경우에 완벽하게 행동한다.


../_images/Blockly-Maze-Level6-Solution2.png
그림 3-5. 미로의 두 번째 해결방안 (Level 6)

 

연습문제 : 문법의 순서와 코드의 이동 상태를 변경해보아라. 이 또한 동작하는 것을 볼 수 있다. 아바타의 코드가 정확한지 위의 논의한 논증과 유사하게 밝혀내라.

연습문제 : 7단계 퍼즐을 해라
연습문제 : 8단계 퍼즐을 해라

 

더 복잡한 퍼즐에서 아바타의 프로그래밍은 아바타가 하나 또는 다른 두 개의 행동을 필요로 하는 로직에 의존한다. 이 종류의 로직은 아래 그림에서 볼 수 있듯이 9 단계에서 표현된 미로에서 필요하다. 이 단계에서는 “if do else” 블록이 추가되었다. 이 블록의 의미는 조건을 검사하고, 참인지 거짓인지가 찾는다. 만약 조건이 참이면, 블록의 “do” 부분이 수행된다. 만약 조건이 거짓이면, 블록의 “else” 부분이 수행되어진다. 어떠한 경우에도 블록 내에 두 부분이 수행되어진다.


그림 3-6. Blockly 미로 (level 9)

 

3.1.4 상태

이전 장에서는 미로에서 목표로 아바타가 이동할 수 있는 알고리즘을 개발했다. 그렇게 하면서 알고리즘 단계들에 대해 주목하였었다. 미로와 아바타의 시각적 표현을 생성하는 프로그래밍에 의해 내부적으로 생성되고 조작되었기 때문에 문제의 “상태” 측면에 대해 걱정하지 않아도 된다. 그러나 상태 표현을 인식해야 한다. 더 배워야할 것으로는 만들고 있는 해결방법의 상태를 명시적으로 생성과 조작하는 것이 코딩하는 사람의 책임이 될 것이다.

미로 예의 상태는 아바타의 속성과 미로의 속성들을 포함한다. 아바타의 속성은 아래와 같다.

  • 위치 : 아바타가 미로에서 어디에 있는가?
  • 방향 : 아바타가 어느 방향을 보고 있는가?

 

이 속성들은 모두 명백하게 필요하다. 아바타의 위치 없이는 아바타가 목적지에 도착했는지 도착하지 못했는지 알 수 없다. 아바타의 방향 없이는 “왼쪽 회전” 또는 “오른쪽 회전” 명령이 의미가 없는 것이다.
미로의 속성은 아래와 같다.

  • 배치 : 미로의 모양
  • 목적지 위치 : 아바타가 도달해야할 미로의 장소

 

이 속성들 둘 다 명백하게 필요하다. 배치 없이 벽이 어디에 있는지, 통로가 어디에 있는지 알지 못한다. 그래서 아바타를 어떻게 이끌어야 하는지 알 수 없다. 건물 또는 거리가 어디에 있는지 알지 못하는 도시에서 무인 자동차를 안내하는 것을 상상해보아라. 목표의 위치를 모른 채, 목표에 있었거나 있지 않았다면 결코 알 수가 없다. 골을 어디에 넣어야 할지 모르는 축구 경기를 상상해보아라.

 

아바타가 표현하는 상태와 미로가 표현하는 상태의 일부 사이에 중요한 차이를 알 수 있다. 미로가 표현하는 상태의 일부는 변하지 않는다. 미로의 배치와 목표의 위치는 알고리즘이 실행되는 동안 같다. 물론 목적지를 찾기 더 어렵게 미로의 모양이 변하거나 목적지가 이동하는 더 도전적인 게임을 상상할 수 있다. 하지만 여기서 다루는 미로의 상태는 고정되어있다.

 

그러나 아바타가 표현하는 상태의 일부는 알고리즘에 각 단계에서 변경된다. 알고리즘의 한 단계에서 아바타가 앞으로 이동하면 위치가 변하고, 아바타가 왼쪽이나 오른쪽으로 회전하면, 방향이 변하기 때문이다. 어느 한 단계에서 아바타는 한 위치 그리고 특정 방향으로만 향한다. 하지만 시간이 지남에 따라 단계적으로 변화한다.

 

3.1.5 추가적 Blockly 미로 예제

미로를 다니기 위한 일반적인 전략은 항상 동일한 벽에 손을 올리고 유지하는 것이다. “오른손” 전략은 항상 벽에 오른손을 올리고 유지하는 것이다. “왼손” 전략은 항상 벽에 왼손을 올리고 유지하는 것이다. 이러한 전략은 모든 미로에서는 아니지만 많은 미로에 사용된다. 이 전략들을 사용할 때 한 가지 문제점은 막다른 곳에 도달 할 수 있다는 것이다(9 단계 미로에서 몇몇 곳이 있다.). 아바타가 막다른 골목에 걸리지 않도록 되돌릴 수 있어야 한다. 미로에서 막다른 골목을 제대로 다루기 위해서는 이전 미로보다 더 정교한 로직이 필요하다.

“오른손” 방법론을 사용한 9단계 미로를 위한 해결책은 다음 그림에서 볼 수 있다.


../_images/Blockly-Maze-Level9-Solution.png
그림 3-7. 미로의 두 번째 해결방안 (Level 9)

 

다음과 같이 이 프로그램을 분석할 수 있다. 각 단계에서 아바타는 4가지 가능한 조건들 중 하나에 있다.

  • 우회전이 가능하다.
  • 앞으로 가는 것이 가능하다.
  • 좌회전으로 모서리에 있다.
  • 막다른 곳에 있다.

오른손 규칙에 따라야 하기 때문에 이 조건들 중 하나를 선호할 것이다. 예를 들어, 아바타가 앞으로 가거나 오른쪽으로 회전할 수 있다면, 오른손 규칙은 오른쪽 회전하는 것을 더 선호한다. 그렇기 때문에 첫째, 두 조건들은 순서를 정해야한다. 둘째 조건은 첫 번째 조건이 거짓인지 알 때만 검사한다. 프로그래밍에 관해서 앞으로 가는 것을 검사하는 것은 우회전이 가능한 것에 대해 검사한 이후 “else”부분에서 검사 한다.

마찬가지로, 마지막 두 가지 조건은 오른쪽 회전을 사용할 수 없다는 것을 알고, 직선 경로를 사용할 수 없다는 것을 알 때만 관련이 있다. 어느 경우에도, 할 수 있는 유일한 작업은 좌회전이다. 좌회전으로 구석에 있다면, 올바른 방향으로 향해야 한다. 막다른 골목에 있는 경우, 다음 반복은 아바타가 다른쪽으로 좌회전하게 만들어 막다른 골목에서 뒤로 빠져나온다.

이 예로부터 방법을 얻기 위한 중요한 점은 가능한 행동들 중 선호도를 전달하는 “if then else” 상태의 역할이다. 어떤 조건들이 거짓 또는 사실을 알고 있다면 검사하는 것을 보장한다.

연습문제 : 위에 해결방법을 위한 로직의 흐름도를 그려라.
연습문제 : 왼손 규칙을 사용하여 9단계의 해결방법을 개발해라.
연습문제 : 10단계의 Blocky 해결방법을 개발해라.

 

3.1.6 계산

일반적인 컴퓨터의 모든 동작(전화, 타블렛, 랩탑, 슈퍼컴퓨터)은 어떤 수학적(+,-,*,/) 또는 논리적(and, or, not) 연산에 의해 궁극적으로 현실화 되어진다. 따라서 수학적 연산을 사용하여 계산을 수행 할 수 있는 방법을 여기에서 설명할 것이다.

Blockly에서 간단한 계산을 구성하여 사용하는 방법을 참조하기 위해, 아래 그림에서 간단한 비행 좌석 계산 문제를 볼 수 있다. 그림의 윗쪽에서 이 문제의 3 단계 중 첫 번째 최근 동작을 볼 수 있다. 목표는 그림에서 볼 수 있는 항공기의 좌석 수를 Blockly 프로그램으로 계산하여 만드는 것이다. 비행기 동체 아래 슬라이더는 비행기 좌석 추가하는 것을 제어하는 것이다. 그림에서 슬라이더는 5개의 행을 설정한다. 각 행은 4개의 좌석으로 구성된다. 이 문제는 간단한 문제이지만 간단한 프로그램으로 만들기 위해 Blockly 블록 메커니즘을 설명하는 예로 유용하다. 이 경우에는 간단한 계산 수행하는 프로그램이다.


../_images/Blockly-Plane-Seat-Calculator-Problem.png
그림 3-8. Blockly를 이용한 비행기 좌석 계산 

이 문제에 대한 Blockly 프로그래밍 환경은 다음 그림에서 볼 수 있다. 사용 가능한 블록들의 팔렛트는 왼쪽 회색 영역이다. 그리고 작업 영역은 오른쪽이다. 현재 작업 영역에 있는 블록 이름은 “seats=”이다. 목표는 비행기 좌석의 수를 올바르게 결정하는 계산을 만들기 위해 팔렛트에서 블록을 사용하는 것이다.


../_images/Blockly-Plane-Seat-Work-Space.png
그림 3-9. Blockly를 이용한 비행기 좌석 작업

 

팔렛트에 4가지 블록들이 있다. 가장 상위의 블록은 숫자를 표현할 수 있다. 현재 표현된 수는 0이다. 하지만 팔렛트나 작업 영역에서 클릭하여, 어떤 정수로 바꿀 수 있다. 중간 두 블록은 간단한 산술 연산을 수행한다. 이 두 블록들은 현재 덧셈과 곱셈을 수행하도록 설정되어있다. “+” 또는 “x” 표시 옆에 있는 옵션 아이콘을 클릭하여 블록이 수행하는 연산을 변경할 수 있다. 산술 연산 블록에서 두 개의 “구멍”이 있다는 것을 볼 수 있다. 두 구멍은 산술 연산에 사용되는 두 값을 저장할 곳이다.

“열”이라 불리는 가장 아래 블록은 현재 슬라이더 제어에 의해 현재 가리키는 값을 갖게 된다. 초기 슬라이더는 5행을 선택하고, 그 블록 라벨은 “rows (5)”이다. 슬라이더를 이동하면 블록의 라벨 괄호에 있는 수가 변경되는 것을 볼 수 있다.

계산을 형성하기 위해, 팔레트의 블록들은 작업 공간에 복사되고, 구성된다. 좌석의 수를 계산하는 것은 “4 x rows”이다. (예. 5개의 행이 있으면, 20개의 좌석이 있다.) 정확한 계산을 생성하기 위한 한 가지 방법은 다음과 같다. 각 단계 이후 작업 공간은 아래 그림에서 볼 수 있다.

 

  1. 작업 공간에 곱셈 블록을 끌어서 “seats=” 블록에 연결시킨다.
  2. 작업 공간에 “rows”블록을 끌어서 곱셈 블록에 있는 구멍에 삽입한다.
  3. 작업공간에 숫자 블록을 끌어서 4로 수를 변경한다.
  4. 곱셈 블록의 나머지 구멍에 숫자 블록을 삽입한다.

../_images/Blockly-Plane-Seat-Level1-Steps.png
그림 3-10. 1 단계 계산을 만드는 방법

 

이 Blockly 계산은 남아있는 구멍이 없기 때문에 완벽하다. 슬라이더를 이동하여 이 프로그램을 실행할 수 있다(역할 블록의 값을 변경). 그리고 비행기 화면이 정확한 좌석의 숫자로 업데이트 되는 것을 볼 수 있다.

이 간단한 계산에서 단지 한 단계의 중첩이 있었다. 블록의 각 구멍이 구멍을 가지고 있지 않은 블록에 의해 채워졌다. 더 복잡한 계산을 위해 더 높은 수준의 중첩을 사용해야 할 필요가 있다. 예를 들어 다음 계산 결과를 고려해야 한다.

4개의 행을 제외한 모든 행이 4개의 좌석을 가지고 있고, 4개의 행은 2개의 좌석만 있는 비행기의 경우 3단계의 중첩이 필요하다.

연습문제 - “^” 연산이 무엇인지 이해하기
연습문제 – 비행기 좌석 계산기의 2단계 하기
연습문제 – 비행기 좌석 계산기의 3단계 하기

Leave a Reply

Your email address will not be published. Required fields are marked *

*