KR102529627B1 - 코딩 방법 및 코딩 교육 시스템 - Google Patents

코딩 방법 및 코딩 교육 시스템 Download PDF

Info

Publication number
KR102529627B1
KR102529627B1 KR1020220168517A KR20220168517A KR102529627B1 KR 102529627 B1 KR102529627 B1 KR 102529627B1 KR 1020220168517 A KR1020220168517 A KR 1020220168517A KR 20220168517 A KR20220168517 A KR 20220168517A KR 102529627 B1 KR102529627 B1 KR 102529627B1
Authority
KR
South Korea
Prior art keywords
block
code
coding
area
providing unit
Prior art date
Application number
KR1020220168517A
Other languages
English (en)
Inventor
윤재광
Original Assignee
(주)에이아이웍스
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by (주)에이아이웍스 filed Critical (주)에이아이웍스
Priority to KR1020220168517A priority Critical patent/KR102529627B1/ko
Application granted granted Critical
Publication of KR102529627B1 publication Critical patent/KR102529627B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09B—EDUCATIONAL OR DEMONSTRATION APPLIANCES; APPLIANCES FOR TEACHING, OR COMMUNICATING WITH, THE BLIND, DEAF OR MUTE; MODELS; PLANETARIA; GLOBES; MAPS; DIAGRAMS
    • G09B19/00—Teaching not covered by other main groups of this subclass
    • G09B19/0053—Computers, e.g. programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09B—EDUCATIONAL OR DEMONSTRATION APPLIANCES; APPLIANCES FOR TEACHING, OR COMMUNICATING WITH, THE BLIND, DEAF OR MUTE; MODELS; PLANETARIA; GLOBES; MAPS; DIAGRAMS
    • G09B5/00—Electrically-operated educational appliances
    • G09B5/02—Electrically-operated educational appliances with visual presentation of the material to be studied, e.g. using film strip

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Business, Economics & Management (AREA)
  • Educational Administration (AREA)
  • Educational Technology (AREA)
  • Computer Hardware Design (AREA)
  • Entrepreneurship & Innovation (AREA)
  • Electrically Operated Instructional Devices (AREA)

Abstract

본 발명은 (a) 코딩 언어에서 제공하는 명령어 및 라이브러리 함수를 개시하는 각각의 코드를 시각적으로 구별 가능한 블록 형태로 제공하는 단계; (b) 여러 종류의 상기 블록을 메뉴화 하는 단계; 및 (c) 메뉴화된 블록들 가운데 특정 블록이 이용자로부터 사용 선택된 경우 해당 블록의 사용 방법을 설명하는 화면을 팝업 또는 오버레이 형태로 코딩을 진행하는 인터페이스 화면상에 표시하는 단계; 및 (d) 표시된 화면에서 이용자가 라이브러리 함수를 선택하면 해당 함수의 블록과 텍스트 코드를 생성해 화면상에 표시하는 단계; (e) 사용자가 원하는 시점에 생성된 블록과 텍스트 코드가 실행되어 실행 결과를 화면에 표시하는 단계를 포함하는 코딩 방법 및 코딩 교육 방법을 제공한다. 또한, 함수 또는 데이터 세트를 개시하는 각각의 코드를 시각적으로 구별 가능한 블록 형태로 제공하되, 여러 종류의 블록을 메뉴화 하여 유사한 종류별로 묶어 트리 구조의 메뉴로 제공하는 블록 제공부; 및 메뉴화된 블록들 가운데 특정 블록이 이용자로부터 사용 선택된 경우 해당 블록의 사용 방법을 설명하는 화면을 팝업 또는 오버레이 형태로 코딩이 수행되 인터페이스 화면상에 표시하는 설명 제공부; 및 상기 설명 제공부에서 특정 함수를 선택하면 블록과 텍스트코드가 생성되는 코드 생성부; 및 상기 코드 생성부에서 생성된 코드를 실행할 수 있는 코드 실행부를 포함하는 코딩 교육 시스템을 제공한다.

Description

코딩 방법 및 코딩 교육 시스템{Coding methods and coding educational system}
코딩 방법 및 코딩 교육 시스템에 관한 것으로서, 구체적으로는 블록과 텍스트 형태로 하이브리드 코딩을 수행하는 방법 및 그 시스템에 관한 것이다.
4차 산업 혁명의 핵심 분야인 인공지능, 로봇공학, 사물인터넷, 무인 비행기, 3차원 인쇄, 나노 기술 등에서 소프트웨어의 역할이 전반적으로 증대하고 있다. 각 분야의 기술에서 사람이 구현하는 소프트웨어에 따라 산업혁명의 발전속도와 퀄리티가 크게 좌우된다. 이러한 소프트웨어를 구현하기 위해서는 컴퓨터적 사고능력(Computational Thinking)을 이해하며 프로그래밍 언어를 학습하는 것이 필요하다. 컴퓨터적 사고능력에 대해 학습자별 각기 다르게 사고하는 방법을 평가할 수 있는 기준이 없고, 자신의 관심사에 따라 개인별 맞춤형 교육이 어느 과목보다 효율적으로 작용할 수 있으므로, 이에 대한 교육 서비스가 요구된다.
본 발명은 블록과 텍스트 형태로 하이브리드 코딩을 수행하는 방법 및 그 시스템의 제공을 목적으로 한다.
상기 과제를 해결하기 위해 개시된 본 발명의 일 실시예에 따른 코딩 방법은, (a) 코딩 언어의 명령어 및 라이브러리를 개시하는 각각의 코드를 시각적으로 구별 가능한 블록 형태로 제공하는 단계; (b) 여러 종류의 상기 라이브러리 블록을 메뉴화 하는 단계; 및 (c) 메뉴화된 라이브러리 블록들 가운데 특정 블록이 이용자로부터 사용 선택된 경우 해당 블록의 사용 방법을 설명하는 화면을 팝업 또는 오버레이 형태로 코딩을 진행하는 인터페이스 화면상에 표시하는 단계; (d) 표시된 화면에서 이용자가 라이브러리 함수를 선택하면 해당 함수의 블록과 텍스트 코드를 생성해 화면상에 표시하는 단계; (e) 사용자가 원하는 시점에 생성된 블록과 텍스트 코드가 실행되어 실행 결과를 화면에 표시하는 단계를 포함한다.
상기 과제를 해결하기 위해 개시된 본 발명의 일 실시예에 따른 코딩 교육 시스템은, 전산 장치에서 소프트웨어적으로 구현되는 것으로서, C, C++, JAVA, Javscript, Python 등 프로그래밍 언어에서 제공되는 명령어와 라이브러리 함수를 개시하는 각각의 코드를 시각적으로 구별 가능한 블록 형태의 이미지(이하, 블록)로 제공하는 블록 제공부; 및 상기 블록 제공부에서 제공되는 다수의 블록들 가운데 특정 블록이 사용 선택된 경우 해당 블록의 사용 방법을 제공하는 설명 제공부; 및 상기 설명 제공부에서 특정 함수를 선택하면 블록과 텍스트코드가 생성되는 코드 생성부; 및 상기 코드 생성부에서 생성된 코드를 실행할 수 있는 코드 실행부를 포함한다.
이때, 상기 블록 제공부, 상기 설명 제공부, 코드 생성부, 코드 실행부 및 프로그래밍이 이루어지는 영역을 디스플레이 화면에 표시되는 형태로 제공하는 인터페이스부를 더 포함할 수 있다.
이때, 상기 블록 제공부는, 여러 종류의 블록을 메뉴화 하여 유사한 종류별로 묶어 트리 구조의 메뉴로 제공할 수 있다.
이때, 상기 인터페이스부는, 상기 블록 제공부에서 제공되는 블록 메뉴가 표시되는 메뉴 영역; 상기 메뉴 영역에서 선택된 블록이 배치되어 프로그래밍이 작성되는 필드 영역; 상기 필드 영역에서 수행되는 프로그래밍을 텍스트 형태로 표시하는 코드 영역; 및 작성된 프로그래밍의 실행 결과를 표시하는 콘솔 영역을 포함할 수 있다.
또한, 상기 인터페이스부는, 상기 메뉴 영역에서 특정 블록이 선택되면, 선택된 블록을 상기 필드 영역에 위치시키고, 상기 필드 영역에 위치된 블록에 미리 정의된 조작을 수행하면, 상기 설명 제공부로부터 해당 블록의 설명, 예제 코드 및 결과 중 적어도 하나를 호출하여 상기 필드 영역에 중첩하여 표시할 수 있다.
한편, 상기 인터페이스부는, 상기 필드 영역에 해당 블록의 설명, 예제 코드 및 결과 중 적어도 하나가 호출되어 표시될 때, 해당 블록과 기능적으로 유사도가 있는 타 블록을 유사도 순으로 함께 표시할 수 있다.
아울러, 상기 인터페이스부는, 타 블록이 선택된 경우 상기 필드 영역에 미리 위치된 블록을 삭제하고 새롭게 선택된 블록을 상기 필드 영역에 위치시킬 수 있다.
또한, 상기 인터페이스부는, 선택된 특정 블록이 내부에 또 다른 블럭이 삽입되는 형태의 블럭일 경우, 삽입 가능한 블록의 종류와 삽입 가능한 블록 각각에 대한 설명, 예제 코드 및 결과 중 적어도 하나를 함께 표시할 수 있다.
본 발명에 따른 코딩 방법 및 코딩 교육 시스템에 의하면,
1. 텍스트 코딩 언어의 문법적 에러 및 명령어, 라이브러리 함수를 외워서 타이핑해야 하는 부담을 줄일 수 있다.
2. 비주얼 블록 코딩에서의 현장성, 실용성, 활용성, 확장성 문제를 해결할 수 있다.
3. 컴퓨터 소프트웨어 코딩 입문자의 진입 장벽 낮추어 중도 포기 방지 효과를 얻을 수 있다.
4. 원하는 기능의 모든 라이브러리를 일관된 형식의 하이브리드 코딩 방식으로 코딩함으로써 직무 전환 및 종합적 디지털 인재 양성을 효과적으로 이룰 수 있다.
5. 현장에서 실제 사용되는 코딩 언어 및 라이브러리 학습으로 현장 적응성 높일 수 있다.
6. 라이브러리 설명창 부분을 초중등, 대학, 일반, 코딩경험 등 수준에 따라 다르게 제공함으로써 개별화 서비스가 가능한 코딩 플랫폼이 가능하다.
7. 라이브러리 설명창 부분을 전 세계 다양한 언어로 제공함으로써 언어 장벽이 없는 글로벌 코딩 플랫폼이 가능하다.
8. 누구나 쉽게 원하는 코딩 언어로 원하는 분야의 라이브러리를 사용해 코딩을 할 수 있는 LCNC(로우코드(Low-Code) 노코드(No-Code)) 플랫폼으로 활용이 가능하다.
도 1은 본 발명에 따른 코딩 교육 시스템의 블록도이다.
도 2는 코딩 교육 시스템에서 제공하는 인터페이스를 설명한다.
도 3은 선택된 블록의 사용 방법이 인터페이스부에 의해 표시된 실시 예이다.
도 4는 선택된 블록의 사용 방법이 인터페이스부에 의해 표시된 다른 실시 예이다.
도 5는 설명표시부에서 함수 선택에 따른 블록 및 텍스트 코드 생성 및 코드가 실행한 결과 예이다.
도 6은 주택 가격 데이터를 기반으로 시각화와 예측을 하는 인공지능 머신러닝 텍스트 코드 예이다.
도 7은 도 6의 주택 가격 예측 인공지능 코드 작성을 위한 블록 골격 예이다.
도 8은 인공지능 라이브러리에 내장 데이터셋 설명 제공부 예이다.
도 9는 시각화를 위한 라이브러리의 그래프 스타일 함수와 그래프 종류 함수의 설명 제공부 화면 예이다.
도 10은 인공지능 머신러닝 회귀(예측) 모델 함수의 설명 제공부 화면 예이다.
도 11은 인공지능 머신러닝 회귀(예측) 모델의 평가를 위한 함수의 설명 제공부 화면 예이다.
도 12는 주택 가격 예측 인공지능 프로그램을 설명 제공부를 통해 코딩 완료하고 실행한 화면 예이다.
도 13은 본 발명의 다른 실시예에 따른 코딩 교육 시스템의 블록도이다.
이하, 첨부된 도면을 참조하여 본 발명의 바람직한 실시예들을 상세히 설명한다. 이때, 첨부된 도면에서 동일한 구성 요소는 가능한 동일한 부호로 나타내고 있음에 유의한다. 또한, 본 발명의 요지를 흐리게 할 수 있는 공지 기능 및 구성에 대한 상세한 설명은 생략할 것이다. 마찬가지 이유로 첨부 도면에 있어서 일부 구성요소는 과장되거나 생략되거나 개략적으로 도시되었다.
도 1은 본 발명에 따른 코딩 교육 시스템의 블록도이고, 도 2는 코딩 교육 시스템에서 제공하는 인터페이스를 설명하는 도면이고, 도 3은 선택된 블록의 사용 방법이 인터페이스부에 의해 표시된 예를 설명하는 도면이고, 도 4는 선택된 블록의 사용 방법이 인터페이스부에 의해 표시된 다른 실시 형태를 설명하는 도면이다.
프로그램 코딩은 사용자가 내장함수, 내장모듈, 외부라이브러리의 이름과 전달 인자 구조에 대해 알고 있어야 가능하다.
특히, 데이터 분석, 인공지능과 같은 고급 레벨의 코딩의 경우는 복잡하고 긴 이름의 함수와, 전달 인자의 구성을 숙지해야 코딩이 가능하다.
코딩 입문자의 경우, 프로그램의 기초적인 로직 구성을 이해하는 데에도 어려움이 발생하는 관계로 고급 레벨 코딩에서 사용하고자 하는 함수명과 인자 구조까지 숙지하기 어려운 문제가 있다. 특히 텍스트 입력 코딩 방식은 사소한 오기로도 동작하지 않으므로 입문자가 이를 극복하지 못하고 코딩 교육을 중도에서 포기하는 경우도 있다.
이러한 문제를 해결하기 위해, 본 발명에 따른 코딩 교육 시스템(1000)은 사용자에게 텍스트 입력 방식이 아닌 마우스 조작으로 코딩이 이루어지는 비주얼한 방식의 코딩 환경을 제공한다.
특히, 함수를 비주얼한 형태로 제공하는 것 뿐만 아니라 프로그래밍 언어의 내장함수, 내장모듈, 외부라이브러리 등에 대한 이름과 전달 인자 구조, 사용 방법까지를 제공하는 윈도우로 부터 함수 선택을 하는 것으로, 비주얼 블록과 코드가 자동 생성되는 코딩 환경을 제공한다.
도 1 내지 도 4를 참조하면 본 발명에 따른 코딩 교육 시스템(1000)은 전산 장치에서 소프트웨어적으로 구현되는 것으로서, 블록 제공부(100), 설명 제공부(200) 및 인터페이스부(300)를 포함한다.
소프트웨어를 구현하는데 사용되는 컴퓨터 프로그래밍 언어에는 다양한 종류가 있다. C, C++, JAVA, Javscript, Python 등을 예로 들 수 있다. 언어별로 구현하는 문법에서 차이는 있으나 구성 요소는 비슷한 점이 있으며, 언어별로 내장함수, 내장모듈, 외부라이브러리가 다르다는 차이가 있다.
프로그래밍 언어의 코드 구성 요소는 데이터, 명령어, 내장함수, 내장모듈, 외부라이브러리, 직무특화라이브러리 등을 포함한다.
데이터는 단일값, 묶음데이터, 파일, 데이터베이스 등을 포함하고,
명령어는 연산자, 판단문(if), 반복문(for while), 함수 정의, 클래스 정의들을 포함한다.
내장함수는 입출력함수, 데이터처리함수, 수학함수, 파일 함수 등을 포함한다.
내장모듈은 프로그래밍 언어에 기본으로 포함되는 것으로서, 수학통계, 시스템, 날자와 같은 표준 라이브러리를 포함한다.
외부라이브러리는 소프트웨어에서 필요하는 목적에 추가로 설치하여 사용하는 것으로서, 표준 라이브러리에서 지원하지 않는 기능, 예를 들어 데이터분석용, 인공지능 머신러닝용, 딥러닝용, 사물인터넷용 등과 같이 목적하는 기능을 구현하는 모듈이다.
직무특화라이브러리는 특정한 업무 구현을 위해 개발된 것으로서 기계 고장 진단용, 바이오DNA분석용과 같은 전문분야용 모듈이다.
블록 제공부(100)는 프그래밍 언어에서 함수, 데이터 세트, 라이브러리 또는 템플릿 등을 구현하는 여러 코드를 시각적으로 구별 가능한 블록 형태의 이미지로 제공한다. 블록 제공부(100)는 데이터, 명령어, 내장함수, 내장모듈, 외부라이브러리, 직무특화라이브러리 등을 구현하는 여러 코드를 블록 형태의 이미지로 제공한다.
블록 제공부(100)는 '함수A를 이루는 코드 : 함수 이미지 A', '함수B를 이루는 코드 : 함수 이미지 B' , '데이터세트 A를 이루(또는 호출하는)는 코드 : 데이터세트 A 이미지' 등과 같은 형태로 이미지를 제공한다. 간결한 설명을 위해 어떠한 코드에 대응되는 이미지를 '블록'이라고 부르기로 한다.
설명 제공부(200)는 블록 제공부(100)에서 제공되는 다수의 블록들 가운데 어떠한 특정 블록이 사용 선택된 경우 해당 블록의 사용 방법을 제공한다.
여기서 '사용 방법'은 해당 블록의 쓰임새, 사용 예제, 응용, 해당 블록이 사용된 간단한 프로그램 등을 의미한다. 블록의 특징에 따라 텍스트 형태의 간결한 설명만 제공될 수 도 있으며, 난이도에 따라 예제, 응용 등과 같은 추가적인 정보가 더 제공될 수 있다.
설명 제공부(200)에서 제공되는 내용은 코딩 교육 시스템(1000)을 사용하는 유저가 참여하여 업데이트 될 수 있다. 예를 들어 위키(Wiki) 방식의 편집 방식으로 설명 제공부(200)의 자료를 업데이트할 수 있다.
다만, 이는 실시 가능한 방식 중의 하나일 뿐이며, 구현 방식에 따라서는 AI 엔진을 이용하여 설명 제공부(200)의 내용을 업데이트할 수도 있다.
이해를 돕기 위해 블록 제공부(100)와 설명 제공부(200)로 구분하여 설명하였으나, 블록 제공부(100)와 설명 제공부(200)는 데이터 베이스 형태로 구현되는 것으로서 물리적인 구분을 가지는 것은 아니다.
본 실시 형태에 따르면, 코딩 교육 시스템(1000)은 브라우저를 통해 제공되는 웹서비스 방식으로 실시될 수 있다. 이러한 경우 인터페이스부(300)는 웹 서버를 포함하는 형태로 구현된다. 사용자는 범용 웹 브라우저(ex. Chrome, Edge, firefox 등)를 통해 인터페이스부(300)에 접속하여 사용자 인터페이스 화면을 제공받을수 있다.
다만, 웹서비스 방식은 실시가능한 하나의 예일 뿐이며, 사용자의 컴퓨에서 독립적인 방식으로 구동되는 형태로 코딩 교육 시스템(1000)을 구현하는 것도 가능하다. 웹서비스 방식인 경우에도 범용 웹 브라우져 방식이 아닌 전용 접속 프로그램 형태로 코딩 교육 시스템(1000)을 구현할 수도 있다.
인터페이스부(300)는 블록 제공부(100), 설명 제공부(200) 및 프로그래밍이 이루어지는 영역을 디스플레이 화면에 표시되는 형태로 제공한다.
쉽게 설명하면 인터페이스부(300)는 사용자에게 GUI 방식 (Graphical User Interface, UGI)의 사용 환경을 제공한다.
도 2를 참조하면, 인터페이스부(300)는 메뉴 영역(I), 필드 영역(II), 코드 영역(III) 및 콘솔 영역(IV)를 포함하는 사용자 인터페이스 화면을 제공한다. 도 2는 본 발명을 구현하는 하나의 실시 형태일 뿐으로서, 각 영역의 배치 위치 및 배치 관계는 적절하게 변경될 수 있다. 예를 들어 다중 모니터 환경일 경우 메뉴 영역(I), 필드 영역(II), 코드 영역(III) 및 콘솔 영역(IV)의 배치를 사용자의 지정에 따라 별도의 모니터 화면으로 분산 구현하는 것도 본 발명의 실시 가능한 형태에 포함된다.
블록 제공부(100)는 여러 종류의 블록을 메뉴화 하여 유사한 종류별로 묶어 트리 구조의 메뉴로 제공할 수 있는데, 메뉴 영역(I)은 블록 제공부(100)에서 제공되는 블록 메뉴가 표시되는 영역이다. 본 실시 형태에서는 메뉴의 카테고리는 색상별로 구분한 형태로 블록의 메뉴를 구현하였다.
필드 영역(II)은 메뉴 영역에서 선택된 블록이 배치되어 프로그래밍이 작성되는 영역이다. 사용자는 메뉴 영역(I)에서 사용하고자 하는 블록을 선택하여 드래그 앤 드롭(Drag &drop) 방식 또는 더블 클릭 방식 등의 미리 정의된 조작을 통해 사용하고자 하는 블록을 필드 영역(II)에 위치시킨다. 이후, 마우스 드래그 등의 조작을 통해 여러 블록들의 배치 관계를 조절 할 수 있다.
코드 영역(III)은 필드 영역(II)에서 수행되는 블록 조작에 의해 이루어지는 프로그래밍을 텍스트 형태로 표시하는 영역이다.
예를 들어 사용자가 메뉴 영역(I)에서 입출력 함수들 중에서 "printf" 블록을 호출하여 '헬로월드'를 출력 메시지로 입력한 경우, 코드 영역(III)에는 텍스트 형태로 print(f"헬로월드") 가 표시된다.
콘솔 영역(IV)은 작성된 프로그래밍의 실행 결과를 표시하는 영역이다. 콘솔 영역(IV) '헬로월드'가 출력된다.
설명한 바와 같이, 인터페이스부(300)는 메뉴 영역(I)에 특정 블록이 사용자로부터 선택되면, 선택된 블록을 필드 영역에 위치시키는데, 사용자의 필요에 따라 해당 블록의 사용 방법을 제공받을 수 있다.
필드 영역(II)에 위치된 블록에 미리 정의된 조작을 수행하면, 설명 제공부(200)로부터 해당 블록의 설명, 예제 코드 및 결과 중 적어도 하나를 호출하여 필드 영역(II)에 중첩하여 표시한다.
즉, 사용자에게 해당 블록의 사용 방법을 설명하는 별도의 화면을 제공한다. 다중 모니터 환경일 경우 필드 영역(II)에 중첩하는 것이 아닌 사용자로부터 지정받은 별도의 모니터 화면에 해당 블록의 사용 방법을 설명하는 창을 제공할 수 있다.
설명 화면은 블록(B)의 종류에 따라 다른 내용이 제공된다. 설명 화면은 설명 제공부(200)로부터 제공되는 것으로서, 블록(B)의 특성에 따라 제공되는 내용이 상이하다. 도 2 내지 도 4와 같이 블록(B)이 기본 함수인 경우에는 변수 설정등과 같은 내용만이 제공되나, 사용자가 선택한 블록이 복잡한 기능을 구현하는 라이브러리인 경우 해당 라이브러리의 사용 예시, 예제 코드, 예제 코드에 의한 결과 및 해당 라이브리와 유사도가 있는 타 라이브러리(연계하여 사용가능한 라이브러리)에 대한 블록을 유사도 순으로 함께 표시할 수도 있다.
이러한 실시 형태에서 인터페이스부(300)는 간편한 사용 환경 구현을 위해, 사용자가 설명화면에서 타 블록과 연계되는 내용을 선택한 경우 해당 블록을 필드 영역(II)에 바로 위치시킬 수 있다. 이 경우, 기존에 선택되었던 블록은 새로 선택된 블록과 치환된다. 즉, 새로운 블록을 선택하면 필드 영역(II)에 배치된 기존 블록은 삭제된다.
보다 용이한 프로그래밍을 위해 인터페이스부(300)는 선택된 특정 블록이 내부에 또 다른 블럭이 삽입되는 형태의 블럭일 경우, 삽입 가능한 블록의 종류와 삽입 가능한 블록 각각에 대한 설명, 예제 코드 및 결과 중 적어도 하나를 설명화면에 표시할 수 있다.
예를 들어 어떤 라이브러리(-를 호출하는 블럭)가 특정 데이터셋을 하나 또는 복수개 호출하여 포함하는 경우, 호출 가능한 블럭들 및 그 예제가 설명화면에 더 포함되는 형태를 가질 수 있다.
상술한 바에 따르면, 본 발명의 코딩 교육 시스템(1000)은 모달창 방식으로 각 블록에 대한 설명화면을 제공하고 모달창에서 직접 블록의 함수값 지정 또는 데이터셋의 지정이 가능하므로 택스트 코딩 방식에 비해 보다 직관적으로 프로그램을 작성할 수 있다. 즉, 마우스 만으로 고수준의 코딩이 가능한 효과를 얻을 수 있다.
특히 인공지능 코딩과 같이 다수의 복잡한 함수 및 데이터를 다뤄야 하는 경우 사용자가 코딩에 앞서 많은 양의 학습을 수행해야 하는데 본 코딩 교육 시스템(1000) 방식을 사용할 경우 함수 및 라이브러리 사용 방법을 코딩과 동시에 익힐 수 있으므로 초보자도 쉽게 고급 코드의 작성이 가능하다.
이어서, 본 발명의 실시 가능한 다른 형태를 설명하기로 한다.
도 13은 본 발명의 다른 실시예에 따른 코딩 교육 시스템(1000')의 블록도이다. 본 실시 형태는 코드 실행부(400) 및 코드 생성부(500)을 더 포함한다. 도 2 내지 도 4에 도시된 예는 본 실시형태에서도 동일하게 적용된다. 도 5는 설명표시부에서 함수 선택에 따른 블록 및 텍스트 코드 생성 및 코드가 실행한 도면이다.
소프트웨어 코딩은 사용자가 명령어 뿐만 아니라 내장함수, 내장모듈, 외부라이브러리의 이름과 전달 인자 구조에 대해 알고 있어야 가능하다.
특히, 데이터사이언스, 인공지능(AI), 컴퓨터비전과 같은 고급 레벨의 코딩의 경우는 복잡하고 긴 이름의 함수와, 전달 인자의 구성을 숙지해야 코딩이 가능하다.
코딩 입문자의 경우, 프로그램의 기초적인 로직 구성을 이해하는 데에도 어려움이 발생하는 관계로 고급 레벨 코딩에서 사용하고자 하는 함수명과 인자 구조까지 숙지하기 어려운 문제가 있다. 특히 텍스트 입력 코딩 방식은 사소한 오기로도 동작하지 않으므로 입문자가 이를 극복하지 못하고 코딩 교육을 중도에서 포기하는 경우도 있다.
이러한 문제를 해결하기 위해, 본 발명에 따른 코딩 교육 시스템(1000')은 사용자에게 텍스트 입력 방식이 아닌 마우스 조작으로 코딩이 이루어지는 비주얼한 방식의 코딩 환경을 제공한다.
특히, 함수를 비주얼한 형태로 제공하는 것 뿐만 아니라 프로그래밍 언어의 내장함수, 내장모듈, 외부라이브러리 등에 대한 이름과 전달 인자 구조, 사용 방법까지를 제공하는 설명제공부(윈도우)로 부터 함수를 선택을 하는 것으로, 비주얼 블록과 텍스트 코드가 자동 생성되는 코딩 환경을 제공한다.
도 13 및 도 2 내지 도 5를 참조하면 본 발명에 따른 코딩 교육 시스템(1000')은 전산 장치에서 소프트웨어적으로 구현되는 것으로서, 블록 제공부(100), 설명 제공부(200), 코드 생성부(500), 코드 실행부(400) 및 인터페이스부(300)를 포함한다.
소프트웨어를 구현하는데 사용되는 컴퓨터 프로그래밍 언어에는 다양한 종류가 있다. C, C++, JAVA, Javscript, Python 등을 예로 들 수 있다. 언어별로 구현하는 문법에서 차이는 있으나 구성 요소는 비슷한 점이 있으며, 명령어, 내장함수, 내장모듈, 외부라이브러리가 다르다는 차이가 있다.
프로그래밍 언어의 코드 구성 요소는 데이터, 명령어, 내장함수, 내장모듈, 외부라이브러리, 직무특화라이브러리, 사용자정의라이브러리 등을 포함한다.
데이터는 단일값, 묶음데이터, 파일, 데이터베이스 등을 포함하고,
명령어는 연산자(=, +, -, *, / 등), 판단문(if, else), 반복문(for, while), 함수 , 클래스들을 포함한다.
내장함수는 프로그래밍 언어에 기본으로 포함되는 것으로서, 입출력함수, 데이터처리함수, 수학함수, 파일 함수 등을 포함한다.
내장모듈은 수학통계, 시스템, 날자와 같은 표준 라이브러리를 포함한다.
외부라이브러리는 소프트웨어에서 필요하는 목적에 추가로 설치하여 사용하는 것으로서, 표준 라이브러리에서 지원하지 않는 기능, 예를 들어 데이터분석용, 인공지능 머신러닝용, 딥러닝용, 컴퓨터비전용, 사물인터넷(IoT)용 등과 같이 목적하는 기능을 구현하는 모듈이다.
직무특화라이브러리는 특정한 업무 구현을 위해 개발된 것으로서 인공지능 기계고장진단(PHM)용, 바이오DNA분석용과 같은 전문분야용 모듈이다.
사용자정의라이브러리는 사용자가 직접 구현해서 사용하는 모듈이다,
블록 제공부(100)는 프그래밍 언어에서 함수, 데이터 세트, 라이브러리 또는 템플릿 등을 구현하는 여러 코드를 시각적으로 구별 가능한 블록 형태의 이미지로 제공한다. 블록 제공부(100)는 데이터, 명령어, 내장함수, 내장모듈, 외부라이브러리, 직무특화라이브러리, 사용자정의라이브러리 등을 구현하는 여러 코드를 블록 형태의 이미지로 제공한다.
블록 제공부(100)는 '함수A를 이루는 코드 : 함수 이미지 A', '함수B를 이루는 코드 : 함수 이미지 B' , '데이터세트 A를 이루(또는 호출하는)는 코드 : 데이터세트 A 이미지' 등과 같은 형태로 이미지를 제공한다. 간결한 설명을 위해 어떠한 코드에 대응되는 이미지를 '블록'이라고 부르기로 한다.
설명 제공부(200)는 블록 제공부(100)에서 제공되는 다수의 블록들 가운데 어떠한 특정 블록이 사용 선택된 경우 해당 블록의 사용 방법을 제공한다.
여기서 '사용 방법'은 해당 블록의 쓰임새, 사용 예제, 응용, 해당 블록이 사용된 간단한 프로그램 등을 의미한다. 블록의 특징에 따라 텍스트 형태의 간결한 설명만 제공될 수 도 있으며, 난이도에 따라 예제, 응용 등과 같은 추가적인 정보가 더 제공될 수 있다.
설명 제공부(200)에서 제공되는 내용은 코딩 교육 시스템(1000)을 사용하는 사용자가 참여하여 업데이트 될 수 있다. 예를 들어 위키(Wiki) 방식의 편집 방식으로 설명 제공부(200)의 자료를 업데이트할 수 있다.
다만, 이는 실시 가능한 방식 중의 하나일 뿐이며, 구현 방식에 따라서는 인공지능(AI) 엔진을 이용하여 설명 제공부(200)의 내용을 업데이트할 수도 있다.
이해를 돕기 위해 블록 제공부(100)와 설명 제공부(200)로 구분하여 설명하였으나, 블록 제공부(100)와 설명 제공부(200)는 데이터베이스나 파일 형태로 구현되는 것으로서 물리적인 구분을 가지는 것은 아니다.
코드 생성부(500)는 설명 제공부(200)에서 사용자가 선택한 라이브러리 함수에 맞는 블록 및 텍스트 코드를 자동 생성한다. 블록은 함수 형태에 맞는 구조로 생성이 된다.
코드 실행부(400)는 코드 생성부(500)에서 생성된 코드를 실행시킨다. 코드 실행부는 프로그램 소스 코드에 따라서 인터프리터나 컴파일러일 수 있다. 코드 실행부는 사용자가 웹 서버에 접속시에 다운로드되거나 로컬 컴퓨터에 설치되어 있을 수 있다. 실행에 결과는 화면에 표시될 수 있는 형태로 출력을 한다.
본 실시 형태에 따르면, 코딩 교육 시스템(1000)은 브라우저를 통해 제공되는 웹서비스 방식으로 실시될 수 있다. 이러한 경우 인터페이스부(300)는 웹 서버를 포함하는 형태로 구현된다. 사용자는 범용 웹 브라우저(ex. 크롬, 파이어폭스, 사파리 등)를 통해 인터페이스부(300)에 접속하여 사용자 인터페이스 화면을 제공받을 수 있다.
다만, 웹서비스 방식은 실시가능한 하나의 예일 뿐이며, 사용자의 컴퓨터에서 독립적인 방식으로 구동되는 형태로 코딩 교육 시스템(1000)을 구현하는 것도 가능하다. 웹서비스 방식인 경우에도 범용 웹 브라우저 방식이 아닌 전용 접속 프로그램 형태로 코딩 교육 시스템(1000)을 구현할 수도 있다.
인터페이스부(300)는 블록 제공부(100), 설명 제공부(200), 코드 생성부(500), 코드 실행부(400) 및 프로그래밍이 이루어지는 영역을 디스플레이 화면에 표시되는 형태로 제공한다.
쉽게 설명하면 인터페이스부(300)는 사용자에게 GUI(Graphical User Interface) 방식의 사용 환경을 제공한다.
도 2를 참조하면, 인터페이스부(300)는 메뉴 영역(I), 필드 영역(II), 코드 영역(III) 및 콘솔 영역(IV)를 포함하는 사용자 인터페이스 화면을 제공한다. 도 2는 본 발명을 구현하는 하나의 실시 형태일 뿐으로서, 각 영역의 배치 위치 및 배치 관계는 적절하게 변경될 수 있다. 예를 들어 다중 모니터 환경일 경우 메뉴 영역(I), 필드 영역(II), 코드 영역(III) 및 콘솔 영역(IV)의 배치를 사용자의 지정에 따라 별도의 모니터 화면으로 분산 구현하는 것도 본 발명의 실시 가능한 형태에 포함된다.
블록 제공부(100)는 여러 종류의 블록을 메뉴화 하여 유사한 종류별로 묶어 트리 구조의 메뉴로 제공할 수 있는데, 메뉴 영역(I)은 블록 제공부(100)에서 제공되는 블록 메뉴가 표시되는 영역이다. 본 실시 형태에서는 메뉴의 카테고리는 색상별로 구분한 형태로 블록의 메뉴를 구현하였다.
필드 영역(II)은 메뉴 영역에서 선택된 블록이 배치되어 프로그래밍이 작성되는 영역이다. 사용자는 메뉴 영역(I)에서 사용하고자 하는 블록을 선택하여 드래그 앤 드롭(Drag & drop) 방식 또는 더블 클릭 방식 등의 미리 정의된 조작을 통해 사용하고자 하는 블록을 필드 영역(II)에 위치시킨다. 이후, 마우스 드래그 등의 조작을 통해 여러 블록들의 배치 관계를 조절 할 수 있다.
코드 영역(III)은 필드 영역(II)에서 수행되는 블록 조작에 의해 이루어지는 프로그래밍을 텍스트 형태로 표시하는 영역이다. 예를 들어 사용자가 메뉴 영역(I)에서 입출력 함수들 중에서 "print(f"안녕 {hello} 하세요")" 블록을 선택하여 hello 변수에 저장되어 있는 'Hello World!' 문자열을 출력 메시지로 입력한 경우, 코드 영역(III)에는 텍스트 형태로 print(f"안녕 Hello World! 하세요") 가 표시된다.
콘솔 영역(IV)은 작성된 프로그래밍의 실행 결과를 표시하는 영역이다. 콘솔 영역(IV) '안녕 Hello World! 하세요'가 출력된다.
설명한 바와 같이, 인터페이스부(300)는 메뉴 영역(I)에 특정 블록이 사용자로부터 선택되면, 선택된 블록을 필드 영역에 위치시키는데, 사용자의 필요에 따라 해당 블록의 사용 방법을 제공받을 수 있다.
필드 영역(II)에 위치된 블록에 미리 정의된 조작을 수행하면, 설명 제공부(200)로부터 해당 블록의 설명, 예제 코드 및 결과 중 적어도 하나를 호출하여 필드 영역(II)에 중첩하여 표시한다.
즉, 사용자에게 해당 블록의 사용 방법을 설명하는 별도의 화면을 제공한다. 다중 모니터 환경일 경우 필드 영역(II)에 중첩하는 것이 아닌 사용자로부터 지정받은 별도의 모니터 화면에 해당 블록의 사용 방법을 설명하는 창을 제공할 수 있다.
설명 화면은 블록(B)의 종류에 따라 다른 내용이 제공된다. 설명 화면은 설명 제공부(200)로부터 제공되는 것으로서, 블록(B)의 특성에 따라 제공되는 내용이 상이하다. 도 2 내지 도 4와 같이 블록(B)이 기본 함수인 경우에는 변수 설정등과 같은 내용만이 제공되나, 사용자가 선택한 블록이 복잡한 기능을 구현하는 라이브러리인 경우 해당 라이브러리의 사용 예시, 예제 코드, 예제 코드에 의한 결과 및 해당 라이브리와 유사도가 있는 타 라이브러리(연계하여 사용가능한 라이브러리)에 대한 블록을 유사도 순으로 함께 표시할 수도 있다.
이러한 실시 형태에서 인터페이스부(300)는 간편한 사용 환경 구현을 위해, 사용자가 설명화면에서 타 블록과 연계되는 내용을 선택한 경우 해당 블록을 필드 영역(II)에 바로 위치시킬 수 있다. 이 경우, 기존에 선택되었던 블록은 새로 선택된 블록과 치환된다. 즉, 새로운 블록을 선택하면 필드 영역(II)에 배치된 기존 블록은 삭제된다.
보다 용이한 코딩을 위해 인터페이스부(300)는 선택된 특정 블록이 내부에 또 다른 블럭이 삽입되는 형태의 블럭일 경우, 삽입 가능한 블록의 종류와 삽입 가능한 블록 각각에 대한 설명, 예제 코드 및 결과 중 적어도 하나를 설명화면에 표시할 수 있다.
예를 들어 어떤 라이브러리(-를 호출하는 블럭)가 특정 데이터셋을 하나 또는 복수개 호출하여 포함하는 경우, 호출 가능한 블럭들 및 그 예제가 설명화면에 더 포함되는 형태를 가질 수 있다.
상술한 바에 따르면, 본 발명의 코딩 교육 시스템(1000)은 모달창 방식으로 각 블록에 대한 설명화면을 제공하고 모달창에서 직접 블록의 함수값 지정 또는 데이터셋의 지정이 가능하므로 택스트 코딩 방식에 비해 보다 직관적으로 프로그램을 작성할 수 있다. 즉, 마우스 만으로 고수준의 코딩이 가능한 효과를 얻을 수 있다.
특히 인공지능(AI) 코딩과 같이 다수의 복잡한 함수 및 데이터를 다뤄야 하는 경우 사용자가 코딩에 앞서 많은 양의 학습을 수행해야 하는데 본 코딩 교육 시스템(1000) 방식을 사용할 경우 함수 및 라이브러리 사용 방법을 코딩과 동시에 익힐 수 있으므로 입문자도 쉽게 고급 코드의 작성이 가능하다.
본 발명의 이해를 보다 명확하게 돕기위해 파이썬 언어를 예를 들어, 실제 구현 가능한 실시예로 설명하기로 한다.
파이썬은 비교적 쉬운 문법적 구조로 입문자가 가장 많이 배우는 언어 가운데 하나이다. 다른 언어들과 비교하여 풍부한 내부, 외부 라이브러리를 제공하므로 다양한 분야에 활용할 수 있다.
특히, 데이터사이언스를 위해, 넘파이(Numpy), 판다스(Pandas), 맷플롭립(Matplotlib) 라이브러리를 이용할 수 있고, 과학계산을 위해 사이파이(Scipy), 인공지능 머신러닝을 위해 시이킷런(Scikit-learn), 엑스지부스트(XGBoost), 딥러닝을 위해 케라스(Keras), 텐서플로우(Tensorflow), 컴퓨터비전을 위해 오픈컴퓨터비전(OpenCV), 자연어 처리를 위해 NLTK, 바이오생물학을 위해 Biopython 등 수많은 라이브러리를 이용할 수 있다.
인공지능(AI) 프로그램을 코딩하는 경우, 사용자가 직접 함수명과 인자를 지해야하는 어려움이 있다. 도 6은 주택 가격 예측을 위한 파이썬으로 작성한 텍스트 코드의 일부를 보여준다. 입문자의 경우 이러한 명령어와 라이브러리 함수로 이루어진 텍스트 코드를 외우거나 책을 보고 일일이 타이핑을 해야하는 어려움이 발생한다.
도 7은 본 발명에 따라 인공지능 프로그램을 코딩하는 예시이다.
본 실시형태에서 블록 제공부(100)는 블록을 제1 블록유형 및 제2 블록유형의 2가지 유형으로 제공할 수 있다. 제1 블록 유형은 코딩에 자주 사용되는 함수의 것으로서 메뉴 영역에서 필드 영역으로 드래그하여 바로 사용할 수 있는 유형의 것이다.
제2 블록 유형은, '데이터 세트', '그래프 스타일', '머신 러닝 예측 모델', '모델 평가' 등과 같이 함수 내에서 선택 요소를 선택받는 유형의 것이다. 본 실시 형태에서는 블록 형태의 이미지에 채워 넣(fill)는 요소가 있다는 의미에서 " 제2 블록 유형을 나타나는 블록의 이미지에 특정 문자" (F) "표시를 부가 하였다. 즉, (F) 표시가 있는 블록이 제2 블록 유형의 것이다.
도 7은 제2 블록 유형의 블록에서 선택 요소 지정이 이루어지지 않은 상태로서 지정(즉, 요소 선택이) 필요한 부분이 공백의미하는 특정 색상(흰색)으로 표시되어 있다.
도 8 내지 도 11은 각각의 제2 블록 유형에서 요소가 자동으로 채워지는 것을 설명하는 것을 도시한다.
필드 영역(II)에서 두번째 줄에 배치된 블록은 '사이킷런 내장 데이터'의 종류를 선택 받아야 하는 블록이다. 즉, 제2 블록 유형의 것으로서, 해당 블록에 더블클릭하는 것과 같은 미리 설정된 특정 조작을 수행하면, 설명 제공부(200)로부터 해당 블록에서 제공하는(즉, '사이킷런 내장 데이터'에서 제공하는) 데이터 세트가 필드 영역(II)에 모달 창 방식으로 표시된다. 사용자는 모달 창에서 사용하고자 하는 데이터 세트를 선택할 수 있다. 본 실시예에서는 '보스톤주택가격'을 선택하였고 선택 결과는 도 11에 도시된 바와 같이 해당 블록에 채워진 형태로 나타난다.
필드 영역(II)에서 네 번째 줄에 배치된 블록은 '맷플롭림 스타일'의 종류를 선택 받아야 하는 블록이다.
해당 블록또한 제2 블록 유형의 것으로서, 해당 블록을 더블클릭하면 사용 가능한 그래프 스타일이 필드 영역(II)에 모달 창 방식으로 표시된다. 사용자는 모달 창에서 사용하고자 하는 스타일 종류 선택할 수 있다. 본 실시예에서는 'bmh'스타일 시트을 선택하였고 선택 결과는 도 11에 도시된 바와 같이 해당 블록에 채워진 형태로 나타난다.
필드 영역(II)에서 여덟 번째 줄에 배치된 블록은 '머신러닝 예측모델'의 종류를 선택 받아야 하는 블록이고, 마지막 줄에 배치된 블록은 '머신러닝 모델평가'의 종류를 선택 받아야 하는 블록으로서 각각 제2 블록 유형의 것이다. 도 9 및 도 10에서 각각의 모달창을 통해 함수를 선택할 수 있다.
도 12는 제2 블록 유형의 것에서 선택 요소 지정이 완료된 것을 설명한다. 설명된 바와 같이 사용자는 마우스 조작만으로 고급 라이브러리를 사용할 수 있다.
모달창은 데이터베이스화된 설명 제공부(200)를 통해 제공되는 것이므로, 설명 제공부(200)에 설명 데이터를 추가하는 방식으로 다양한 설명을 제공할 수 있다.
예를 들어, 본 발명의 코딩 교육 시스템(1000)을 고급 프로그램 개발용으로 사용하는 경우는 전문적인 데이터 분석, 인공지능 구현을 위한 AI 라이브러리 등을 제공할 수 있다. 예를 들어 유료 라이브러리인 경우, 비용 결제를 통해 라이브러리 제공 및 그에 따른 설명 화면이 제공되도록 구현할 수 있다.
한편, 코딩 교육 시스템(1000)을 입문자 학습용으로 사용하는 경우에는 입문자의 연령 및 수준에 따라 차등적인 형태로 설명 제공부(200)를 구현할 수 있다.
예를 들어 초등학생이 본 코딩 교육 시스템(1000)을 사용하는 경우, 시작 단계에서 사용자 수준 선택 항목에서 초등학생을 선택하면, 블록 제공부(100)는 입문자 수준에서 사용 가능한 함수 및 그에 따른 블록을 제공하며, 설명 제공부(200) 또한 초등학생 입문자 수준으로 제작된 설명을 제공한다.
시작 단계에서 사용자 수준 선택 항목에서 대학생을 선택하면, 블록 제공부(100)는 대학생 수준(즉, 중급자)에서 사용 가능한 함수 및 그에 따른 블록을 제공하며, 설명 제공부(200) 또한 중급자 수준으로 제작된 설명을 제공할 수 있다.
본 발명의 다양한 실시 형태에 따르면, 메뉴 영역(I), 필드 영역(II) 또는 필드 영역(II)에 모달창으로 표시된 설명 화면 등 적절한 위치에 함수 검색 기능이 배치될 수 있다. 사용자가 원하는 함수명이나 기능을 입력하면 관련성이 있는 함수 및 함수와 연관된 블록을 검색할 수 있다.
본 발명에 따른 코딩 방법은 도 1 내지 도 13에서 설명된 코딩 교육 시스템(1000, 1000')을 시계열적으로 구현한 것으로서, (a) 함수 또는 데이터 세트를 개시하는 각각의 코드를 시각적으로 구별 가능한 블록 형태로 제공하는 단계, (b) 여러 종류의 상기 블록을 메뉴화 하는 단계, 및 (c) 메뉴화된 블록들 가운데 특정 블록이 이용자로부터 사용 선택된 경우 해당 블록의 사용 방법을 설명하는 화면을 팝업 또는 오버레이 형태로 코딩을 진행하는 인터페이스 화면상에 표시하는 단계를 포함한다.
(a) 단계 및 (b)는 블록 제공부(100)에 의해 수행된다. (c) 단계는 설명 제공부(200) 및 인터페이스부(300)에 의해 수행된다.
블록 제공부(100), 설명 제공부(200) 및 인터페이스부(300)에서 설명된 부분은 본 실시 형태에서 그대로 적용되므로 중복되는 설명은 생략하기로 한다.
본 명세서와 도면에 개시된 본 발명의 실시예들은 본 발명의 기술 내용을 쉽게 설명하고 본 발명의 이해를 돕기 위해 특정 예를 제시한 것일 뿐이며, 본 발명의 범위를 한정하고자 하는 것은 아니다. 여기에 개시된 실시예들 이외에도 본 발명의 기술적 사상에 바탕을 둔 다른 변형 예들이 실시 가능하다는 것은 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 자명한 것이다.
1000, 1000' : 코딩 교육 시스템
100 : 블록 제공부
200 : 설명 제공부
300 : 인터페이스부
400: 코드 실행부
500 : 코드 생성부
B, B1, B2, B3 : 블록

Claims (9)

  1. 전산 장치에서 소프트웨어적으로 구현되는 것으로서,
    프로그래밍 언어에서 함수 또는 데이터 세트를 개시하는 각각의 코드를 시각적으로 구별 가능한 블록 형태의 이미지(이하, 블록)로 제공하는 블록 제공부; 및
    상기 블록 제공부에서 제공되는 다수의 블록들 가운데 특정 블록이 사용 선택된 경우 해당 블록의 사용 방법을 제공하는 설명 제공부를 포함하고,
    상기 블록 제공부, 상기 설명 제공부 및 프로그래밍이 이루어지는 영역을 디스플레이 화면에 표시되는 형태로 제공하는 인터페이스부를 더 포함하고,
    상기 블록 제공부는,
    여러 종류의 블록을 메뉴화 하여 유사한 종류별로 묶어 트리 구조의 메뉴로 제공하고,
    상기 인터페이스부는,
    상기 블록 제공부에서 제공되는 블록 메뉴가 표시되는 메뉴 영역;
    상기 메뉴 영역에서 선택된 블록이 배치되어 프로그래밍이 작성되는 필드 영역;
    상기 필드 영역에서 수행되는 프로그래밍을 텍스트 형태로 표시하는 코드 영역; 및
    작성된 프로그래밍의 실행 결과를 표시하는 콘솔 영역을 포함하고,
    상기 인터페이스부는,
    상기 메뉴 영역에서 특정 블록이 선택되면, 선택된 블록을 상기 필드 영역에 위치시키고,
    상기 필드 영역에 위치된 블록에 미리 정의된 조작을 수행하면, 상기 설명 제공부로부터 해당 블록의 설명, 예제 코드 및 결과 중 적어도 하나를 호출하여 상기 필드 영역에 중첩하여 표시하고,
    상기 인터페이스부는,
    상기 필드 영역에 해당 블록의 설명, 예제 코드 및 결과 중 적어도 하나가 호출되어 표시될 때, 해당 블록과 기능적으로 유사도가 있는 타 블록을 유사도 순으로 함께 표시하는 것을 특징으로 하는 코딩 교육 시스템.
  2. 삭제
  3. 삭제
  4. 삭제
  5. 삭제
  6. 삭제
  7. 청구항 1에 있어서,
    상기 인터페이스부는,
    타 블록이 선택된 경우 상기 필드 영역에 미리 위치된 블록을 삭제하고 새롭게 선택된 블록을 상기 필드 영역에 위치시키는 것을 특징으로 하는 코딩 교육 시스템.
  8. 청구항 1에 있어서,
    상기 인터페이스부는,
    선택된 특정 블록이 내부에 또 다른 블럭이 삽입되는 형태의 블럭일 경우,
    삽입 가능한 블록의 종류와 삽입 가능한 블록 각각에 대한 설명, 예제 코드 및 결과 중 적어도 하나를 함께 표시하는 것을 특징으로 하는 코딩 교육 시스템.
  9. 삭제
KR1020220168517A 2022-12-06 2022-12-06 코딩 방법 및 코딩 교육 시스템 KR102529627B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020220168517A KR102529627B1 (ko) 2022-12-06 2022-12-06 코딩 방법 및 코딩 교육 시스템

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020220168517A KR102529627B1 (ko) 2022-12-06 2022-12-06 코딩 방법 및 코딩 교육 시스템

Publications (1)

Publication Number Publication Date
KR102529627B1 true KR102529627B1 (ko) 2023-05-08

Family

ID=86381278

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020220168517A KR102529627B1 (ko) 2022-12-06 2022-12-06 코딩 방법 및 코딩 교육 시스템

Country Status (1)

Country Link
KR (1) KR102529627B1 (ko)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR102736050B1 (ko) 2023-08-10 2024-11-28 이승현 이미지 기반의 가로수 정보 관리 시스템과 방법 및 이를 위한 컴퓨터 프로그램

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR102039296B1 (ko) * 2019-04-17 2019-10-31 박덕수 프로그래밍 교육 시스템 및 방법
KR20200033637A (ko) * 2018-09-20 2020-03-30 이진식 주행 로봇을 이용한 코딩 교육 제공 시스템
KR20210023476A (ko) * 2019-08-23 2021-03-04 주식회사 로지브라더스 확률 계산 기반 블록 코딩 교육 서비스 방법 및 그 시스템

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20200033637A (ko) * 2018-09-20 2020-03-30 이진식 주행 로봇을 이용한 코딩 교육 제공 시스템
KR102039296B1 (ko) * 2019-04-17 2019-10-31 박덕수 프로그래밍 교육 시스템 및 방법
KR20210023476A (ko) * 2019-08-23 2021-03-04 주식회사 로지브라더스 확률 계산 기반 블록 코딩 교육 서비스 방법 및 그 시스템

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
공개특허공보 제10-2021-0023476호(2021.3.4. 공개) 1부.*
등록특허공보 제10-2039296호(2019.10.31. 공고) 1부.*

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR102736050B1 (ko) 2023-08-10 2024-11-28 이승현 이미지 기반의 가로수 정보 관리 시스템과 방법 및 이를 위한 컴퓨터 프로그램

Similar Documents

Publication Publication Date Title
Chi et al. MixT: automatic generation of step-by-step mixed media tutorials
Celani et al. CAD scripting and visual programming languages for implementing computational design concepts: A comparison from a pedagogical point of view
US10691303B2 (en) Immersive virtual environment (IVE) tools and architecture
CN109284473A (zh) 在线教学课件的编辑和生成方法以及系统
US20150206447A1 (en) System and method for authoring content for web viewable textbook data object
EP1791612A2 (en) Object oriented mixed reality and video game authoring tool system and method background of the invention
US20200357301A1 (en) Interactive Learning Tool
Mumtaz et al. Exploranative code quality documents
Berry et al. The state of play: A notional machine for learning programming
Bouwer et al. VisiGarp: Graphical representation of qualitative simulation models
White et al. jfast: A java finite automata simulator
KR102529627B1 (ko) 코딩 방법 및 코딩 교육 시스템
KR102198322B1 (ko) 기계 학습을 이용한 지능형 데이터 시각화 시스템
Krosnick et al. Expresso: Building responsive interfaces with keyframes
Blouin et al. Assessing the use of slicing-based visualizing techniques on the understanding of large metamodels
Hernández‐Abad et al. Educational software to learn the essentials of engineering graphics
Kapler et al. CauseWorks: A Framework for Transforming User Hypotheses into a Computational Causal Model.
Marcopoulos et al. OnlineSPARC: A programming environment for answer set programming
Potter Pixel data access: interprocess communication in the user interface for end-user programming and graphical macros
Scarr Understanding and Exploiting Spatial Memory in the Design of Efficient Command Selection Interfaces
Feeley et al. Teaching Programming to Novices Using the codeBoot Online Environment
CN113485714B (zh) 数据处理方法、装置、计算机设备以及存储介质
ECE Automated Design Tool for Arduino Circuits
Yang JavelinaCode: A Web-Based Object-Oriented Programming Environment with Static and Dynamic Visualization
Uhlár Visualization of a run of a security game

Legal Events

Date Code Title Description
PA0109 Patent application

Patent event code: PA01091R01D

Comment text: Patent Application

Patent event date: 20221206

PA0201 Request for examination
PA0302 Request for accelerated examination

Patent event date: 20221220

Patent event code: PA03022R01D

Comment text: Request for Accelerated Examination

Patent event date: 20221206

Patent event code: PA03021R01I

Comment text: Patent Application

E902 Notification of reason for refusal
PE0902 Notice of grounds for rejection

Comment text: Notification of reason for refusal

Patent event date: 20230330

Patent event code: PE09021S01D

E701 Decision to grant or registration of patent right
PE0701 Decision of registration

Patent event code: PE07011S01D

Comment text: Decision to Grant Registration

Patent event date: 20230428

GRNT Written decision to grant
PR0701 Registration of establishment

Comment text: Registration of Establishment

Patent event date: 20230502

Patent event code: PR07011E01D

PR1002 Payment of registration fee

Payment date: 20230502

End annual number: 3

Start annual number: 1

PG1601 Publication of registration