codingfun.net 주요 업데이트 (2025.10.18.)

codingfun.net의 기능 중에서 최근에 의미있는 진전이 있었다. 자체 개발한 코딩 블록에 대한 나만의 breakthrough(돌파구)라고 해도 과언이 아니다. 10년 동안 해결하지 못하고 난감해 했던 문제를 최근에 연쇄적으로 해결되었다. 잠깐 그 기능들을 소개한다. 

1. 블록 코딩 이미지 저장

블록 코딩 결과를 고해상도의 이미지로 다운로드할 수 있다. <그림1>과 같이 좌측 상단의 '카메라' 모양을 클릭하면 현재 시점의 Blockly Workspace에 있는 블록을 이미지로 저장하여 다운로드한다. 이미지는 투명 배경의 PNG 형식이다.

<그림 1> 코딩 블록의 이미지 다운로드 버튼

<그림2>는 <그림1>의 코딩 결과를 이미지로 캡처하여 다운로드한 결과다. 상당히 고해상도에 배경은 투명 이미지다.

<그림2> 다운로드한 블록 이미지

2. 주석 블록 추가

Blockly에서는 <그림3>과 같은 주석 기능을 제공한다. 그러나, 이러한 주석은 다운로드되는 이미지에 포함되지 않는다.

<그림3> Blockly의 기본적인 주석 기능

다운로드되는 이미지에도 주석이 표시될 수 있도록 <그림4>와 같이 별도의 '주석 블록'을 개발하여 추가하였다. 나의 블록 코딩에 대한 설명을 친절하게 주석을 달아 이미지로 배포하고 싶다면 이 블록을 활용하면 된다.

<그림4> 새로 추가된 주석 블록

3. 입력 만능 블록 추가

블록 코딩이더라도 기본적인 입출력은 쉽지 않다. '입력', '처리', '출력'이라고 하는 알고리즘의 기본적인 3단계에서 '입력'을 제대로 받지 못하면 그 다음의 처리와 출력은 불가능하다. 특히, 입력값이 공백으로 구분된 2개 이상의 값이라면 더더욱 그렇다. 하나의 구분자로 구성된 2개 이상의 값을 입력받는 블록을 <그림5>와 같이 개발했다. 타입은 integer, float, text 타입 중 하나를 선택할 수 있다. 이제는 어떤 형식이든 한 라인으로 입력되는 여러 개의 값을 쉽게 입력 처리할 수 있다. 즉,  구분자로 분리되는 2개의 값을 특정 형식으로 변환하여 지정한 변수들에 저장하는 역할을 수행한다.  단, 입력되는 값이 2개 이상이어야 한다.

<그림5> 입력 만능 블록

예를 들어, <그림6>과 같이 한 줄에 정수 2개를 입력받아 덧셈한 결과를 출력하는 문제의 경우, <그림5>와 같은 블록이 없다면 <그림7>, 또는 <그림8>과 같은 복잡한 과정을 거쳐야 한다. 즉, 1개 라인에 2개 이상의 값이 공백을 사이에 두고 주어질 경우, 공백을 구분자로 값을 분리하여 그것을 리스트에 저장하고, 각 리스트 원소를 참조하여 값을 계산하는 과정을 거쳐야 한다. Blockly에서는 기본적으로 text 형식으로 입력되므로, '처리'를 위해 적절하게 형변환해야 하는 게 필수다.

<그림6> 문제 예시

<그림7> <그림6>의 문제를 해결하는 블록 코딩 결과 1

<그림8> <그림6>의 문제를 해결하는 블록 코딩 결과 2

그런데, <그림5>의 블록을 활용하면 <그림9>처럼 직관적이고 간편하게 코딩할 수 있다. 즉, <그림9>는 공백 1개를 구분자로 하여 한 줄로 입력되는 2개의 값을 integer 형식으로 변환하여 순서대로 변수 a와 b에 각각 저장한다. 그리고  a와 b를 덧셈한 결과를 출력하는 프로그램이다. 

<그림9> <그림6>의 문제를 해결하는 블록 코딩 결과 3

4. 형 변환 통합 블록 

형 변환은 프로그래밍 언어에서 매우 중요한 요소이지만, 코딩을 처음 배우는 사람에게는 매우 어려운 개념이다. 더군다가, 리스트 변환은 더욱 그렇다. 왜 이런 과정이 필요한지에 대한 개념도 처음에는 쉽지 않다. 예를 들어 숫자를 그냥 눈으로 보기에는 integer든, float든, 텍스트이든지 구분되지 않는다. 그냥 숫자들의 나열일 뿐... 그러나 이것을 입력받아 컴퓨터 내부에서 처리하기 위해서는 정수인지, 실수인지, 그냥 텍스트인지에 따라 처리되는 방식이 다르기 때문에 적절하게 형변환해야 한다. 즉, 텍스트 형식의 숫자들을 산술 연산하기 위해서는 그 값들을 정수나 실수로 형변환 해야 한다. 그래서 codingfun.net에서는 <그림10>과 같은 블록들을 제공했는데, <그림 11>과 같이 이를 통합하여 사용의 편리성을 더했다.

<그림10> 기존 형 변환 블록

<그림11>처럼 단일값, 또는 리스트 형식을 처리하는 블록들을 크게 2가지로 구분하고, 각각에서 integer, float, text 형을 선택하도록 했다. 단순함을 통해 편리함을 최대한 확보하기 위함이다.

<그림11> 형 변환 통합 블록

자~ 이제 재미있는 코딩의 세계로 빠져 들어 보자 ^^