메뉴 건너뛰기

공지 사항

주요 업데이트 사항 정리

관리자 2025.10.18 20:02 조회 수 2

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

1. 블록 코딩 이미지 저장

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

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

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

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

2. 주석 블록 추가

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

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

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

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

3. 입력 만능 블록 추가

블록 코딩이더라도 기본적인 입출력은 쉽지 않다. 특히, 입력 값이 공백으로 구분된 2개 이상의 값이라면 더더욱 그렇다. 하나의 구분자로 구성된 2개 이상의 값을 입력받는 블록을 <그림5>와 같이 개발했다. 타입은 integer, float, text 타입 중 하나를 선택할 수 있다. 이제는 어떤 형식이든 한 라인으로 입력되는 여러 개의 값을 쉽게 입력 처리할 수 있다.

<그림5> 입력 만능 블록

예를 들어, <그림6>과 같이 한 줄에 정수 2개를 입력받아 덧셈한 결과를 출력하는 문제의 경우, <그림7>, 또는 <그림8>과 같은 복잡한 과정을 거쳐야 한다. 즉, 1개 라인에 2개 이상의 값이 공백을 사이에 두고 있을 경우, 공백을 구분자로 값을 분리하여 그것을 다시 리스트로 변환하고, 각 리스트 원소를 참조하여 값을 계산하는 과정을 거쳐야 한다.

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

그런데, <그림5>의 블록을 활용하면 <그림9>처럼 직관적이고 간편하게 코딩할 수 있다.

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

4. 형 변환 통합 블록 

형 변환은 프로그래밍 언어에서 매우 중요한 요소이지만, 코딩을 처음 배우는 사람에게는 매우 어려운 개념이다. 더군다가, 리스트 변환은 더욱 그렇다. 왜 이런 과정이 필요한지에 대한 개념도 처음에는 쉽지 않다. 어째든 codingfun.net에서는 <그림10>과 같은 블록들을 제공했는데, <그림 11>과 같이 이를 통합하여 사용의 편리성을 더했다.

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

 

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

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

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

위로