블록 코딩 플랫폼 구조

블록 코딩 플랫폼을 개발해야 해서 블록 코딩 플랫폼이 어떻게 동작하는 지 조사하고, 이에 대해 정리해보았다.

전체적인 과정은 다음과 같이 네 단계로 나눌 수 있다.

1. 블록 조합

2. 텍스트 코드로 변환

3. 코드 실행

4. 결과 표시

각 단계에 대해서 조금 더 자세히 알아보도록 하자.

블록 조합

블록 코딩은 블록을 드래그 앤 드롭으로 배치해 연결하고, 블록에 있는 속성을 변경해 코딩하는 방식이다.

우선 배치를 위해 블록을 다른 블록 근처에 가져다 놓으면 이를 인식하고 블록끼리 연결될 수 있게 해야 한다.

이 때 블록의 조합 중에는 올바르지 않은 조합이 있을 수 있으므로, 이런 경우는 서로 연결되지 않도록 처리하는 것이 필요하다.

속성의 경우 드롭다운 리스트 또는 직접 입력하는 칸의 형태로 사용자에게 제공한다.

만약 변수를 속성으로 사용하는 블록의 경우 해당 스코프에서 사용할 수 있는 올바른 변수 목록을 제공해야 한다.

다음 단계에서 텍스트 코드로 변환하기 위해, 이런 블록의 연결 관계나 속성을 잘 저장하는 것이 중요하다.

텍스트 코드로 변환

이 단계에서는 사용자가 블록 코딩한 내용을 텍스트 코드로 변경한다.

이전 단계에서 사용자가 블록 코딩한 블록의 연결 관계 및 속성은 트리 형태를 이루게 된다.

이를 시작 블록으로 부터 순회하며 각 블록마다 정해져 있는 변환 규칙을 적용하면 대응되는 텍스트 코드로 변환할 수 있다.

텍스트 코드는 실행을 위해 내부적으로만 변환해도 되지만 이를 사용자에게 제공하는 경우도 있다.

코드 실행

말 그대로 코드를 실행하는 단계이다.

일반적으로 백엔드로 코드를 전송해 실행하는 방식으로 처리한다.

서버 상에서 실행하는 만큼, 여러가지 보안 및 안정성 문제가 있을 수 있다.

그래서 보통 Docker 상에서 실행하는 방법을 많이 사용하는데, 다음과 같은 장점이 있다.

1. 컨테이너 상에서 실행하므로 서버 자체가 공격당하는 위험 감소

2. 자원 제한(CPU, 메모리, 시간 등)을 이용해 자원을 안정적으로 활용 가능

3. 여러 언어 및 버전을 사용할 경우 각각에 해당하는 Docker 이미지를 만들어 용이한 환경 설정이 가능

결과 표시

최종적으로 사용자에게 실행 결과를 제공해야 한다.

다음 두 가지 경우가 있을 수 있다.

첫 번째로 결과가 문자열 출력으로 제공되는 경우이다.

이런 경우는 코드 실행 결과를 텍스트 형태로 사용자에게 그대로 제공하면 된다.

두 번째는 시뮬레이션을 이용하는 경우이다.

화면 상의 캐릭터를 제어하는 형태 등으로 결과를 표시하는 경우가 이에 해당한다.

이 때는 코드 실행 단계에서 텍스트 코드 내용을 실행하는 것이 아니라 시뮬레이션에 대한 명령어로 바꾸게 된다.

그 후, 시뮬레이터에 해당 명령을 실행하여 결과를 표시한다.

마무리

위 단계들을 쉽게 하기 위한 도구들이 많이 존재한다.

예를 들어 Blockly라는 라이브러리를 이용할 경우 블록에 대한 정의만 하면 블록 조합 및 텍스트 코드로 변환 단계를 별도의 코딩 없이 할 수 있고, Pyodide라는 라이브러리를 이용할 경우 브라우저에서 python 코드를 바로 실행할 수 있다.

이런 도구들을 잘 활용하는 것이 블록 코딩 플랫폼을 빠르게 만드는 데 큰 도움이 될 것이라 생각한다.