KR102224785B1 - 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치 - Google Patents

모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치 Download PDF

Info

Publication number
KR102224785B1
KR102224785B1 KR1020190017410A KR20190017410A KR102224785B1 KR 102224785 B1 KR102224785 B1 KR 102224785B1 KR 1020190017410 A KR1020190017410 A KR 1020190017410A KR 20190017410 A KR20190017410 A KR 20190017410A KR 102224785 B1 KR102224785 B1 KR 102224785B1
Authority
KR
South Korea
Prior art keywords
sprite
code
window
coding
screen
Prior art date
Application number
KR1020190017410A
Other languages
English (en)
Other versions
KR20200099428A (ko
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 KR1020190017410A priority Critical patent/KR102224785B1/ko
Publication of KR20200099428A publication Critical patent/KR20200099428A/ko
Application granted granted Critical
Publication of KR102224785B1 publication Critical patent/KR102224785B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q50/00—Information and communication technology [ICT] specially adapted for implementation of business processes of specific business sectors, e.g. utilities or tourism
    • G06Q50/10—Services
    • G06Q50/20—Education
    • G06Q50/205—Education administration or guidance
    • G06Q50/2057—Career enhancement or continuing education service
    • 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
    • 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q50/00—Information and communication technology [ICT] specially adapted for implementation of business processes of specific business sectors, e.g. utilities or tourism
    • G06Q50/10—Services
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Business, Economics & Management (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Tourism & Hospitality (AREA)
  • Educational Administration (AREA)
  • Educational Technology (AREA)
  • Strategic Management (AREA)
  • Human Resources & Organizations (AREA)
  • Human Computer Interaction (AREA)
  • Health & Medical Sciences (AREA)
  • Economics (AREA)
  • General Health & Medical Sciences (AREA)
  • Marketing (AREA)
  • Primary Health Care (AREA)
  • General Business, Economics & Management (AREA)
  • Computer Hardware Design (AREA)
  • Entrepreneurship & Innovation (AREA)
  • Electrically Operated Instructional Devices (AREA)

Abstract

모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치를 개시한다.
본 실시예는 코딩을 학습하고자 하는 학습자 단말기의 일측에 코딩 동영상 학습 강좌를 출력하여, 학습자가 코딩 동영상 학습 강좌를 보면서 따라서 기 설정된 탬플릿 단위로 정적이거나 동적으로 움직이는 객체에 대한 코드를 포함하는 스프라이트를 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 하는 프로젝트를 완성할 수 있도록 하며, 코딩 동영상 학습 강좌와 관련된 코드 문법을 설명하며, 완성된 프로젝트를 PC뿐 아니라 모바일로 동기화하여 모바일에서 확인할 수 있도록 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치를 제공한다.

Description

모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치{Method And Apparatus for Providing Coding Education Service}
본 실시예는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치에 관한 것이다.
이하에 기술되는 내용은 단순히 본 실시예와 관련되는 배경 정보만을 제공할 뿐 종래기술을 구성하는 것이 아니다.
일반적으로 코딩(coding)은 컴퓨터 프로그래밍으로서, C-언어, 자바, 파이썬 등 컴퓨터 언어로 프로그램을 만드는 것을 의미한다. 코딩 교육의 대부분은 현재, 컴퓨터 및 스마트 기기에서 작동하는 소프트웨어 프로그램 중심의 교육이다. 대표적인 코딩 교육 프로그램으로서는 스크래치, 엔트리, 아두이노 등이 존재한다.
코딩 교육 프로그램은 학습자가 구현하고자 하는 기능을 컴퓨터에서 특정한 명령어를 사용하여 구현하도록 한다. 전술한 코딩 교육 방식은 컴퓨터 또는 스마트 기기에서만 동작하여 유아 또는 코딩 교육 입문자들이 사용하기에는 어렵다는 문제가 있다.
코딩 교육은 디지털 시대에 어울리는 창의력 사고, 컴퓨터적 사고를 기르기 위한 중심에 있다. 최근 들어, 글로벌적으로 코딩 교육이 주목받고 있으나, 일부 학습자들이 직접 조작하면서 배우는 코딩 교육 제품은 단순한 동작을 반복적으로 수행하는 정도의 움직임의 기능만 지원하므로 실제 컴퓨터적 사고 기반의 코딩 교육에는 적합하지 않은 문제가 있었다.
일반적인 블럭 코딩으로 창작된 작품들은 모바일과 연동되지 않기 때문에, PC에서만 동작 가능하다. 최근들어, 모바일 디바이스의 증가로 인해 모바일용 애플리케이션, 게임 등을 코딩한 경우, 모바일 디바이스에서 정상 동작하는지 확인할 수 없다. 또한, 일반적인 블럭 코딩은 블럭의 조합만으로 코딩이 이루어지므로, 실제 코딩 문법을 확인하지 못하므로 코딩 실력 향상에 한계가 있다.
미국 특허출원공개공보 US2016/0357432호(2016.12.08.) 공개특허공보 제10-2018-0051925호(2018.05.17.) 등록특허공보 제10-1908939호(2018.10.17.)
본 실시예는 코딩을 학습하고자 하는 학습자 단말기의 일측에 코딩 동영상 학습 강좌를 출력하여, 학습자가 코딩 동영상 학습 강좌를 보면서 따라서 기 설정된 탬플릿 단위로 정적이거나 동적으로 움직이는 객체에 대한 코드를 포함하는 스프라이트를 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 하는 프로젝트를 완성할 수 있도록 하며, 코딩 동영상 학습 강좌와 관련된 코드 문법을 설명하며, 완성된 프로젝트를 PC뿐 아니라 모바일로 동기화하여 모바일에서 확인할 수 있도록 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치를 제공하는 데 목적이 있다.
본 실시예의 일 측면에 의하면, 코딩(Coding)에 관련된 코딩 튜토리얼 동영상을 튜토리얼 동영상창으로 출력하는 튜토리얼 동영상 재생과정; 상기 코딩 튜토리얼 동영상 내에 포함된 코드들을 기 설정된 탬플릿 단위로 포함하는 스프라이트들을 스프라이트창으로 출력하는 스프라이트 제어과정; 상기 스프라이트창 내에 존재하는 씬(Scene)별 기 생성된 복수의 스프라이트 중 선택된 스프라이트에 대응하는 코드들을 코드 에디터창으로 출력되도록 하며, 학습 단말기로부터 입력된 명령에 의해 상기 스프라이트에 대응하는 코드를 에디팅한 에디팅 코드를 상기 코드 에디터창에 반영하는 코드 에디팅 과정; 상기 스프라이트에 대응하는 코드 및 상기 에디팅 코드에 따라 정적이거나 동적으로 움직이는 객체를 반영하여 스크린창 상에 나타나도록 하는 스크린 재생과정; 및 상기 코딩 튜토리얼 동영상 내에 포함된 코드와 관련된 API 및 코드 문법 설명을 API 함수창에 출력되도록 하는 API 함수 제어과정을 포함하는 것을 특징으로 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법을 제공한다.
본 실시예의 다른 측면에 의하면, 코딩(Coding)에 관련된 코딩 튜토리얼 동영상을 튜토리얼 동영상창으로 출력하는 튜토리얼 동영상 재생 제어부; 상기 코딩 튜토리얼 동영상 내에 포함된 코드들을 기 설정된 탬플릿 단위로 포함하는 스프라이트들을 스프라이트창으로 출력하는 스프라이트 제어부; 상기 스프라이트창 내에 존재하는 씬(Scene)별 기 생성된 복수의 스프라이트 중 선택된 스프라이트에 대응하는 코드들을 코드 에디터창으로 출력되도록 하며, 학습 단말기로부터 입력된 명령에 의해가 상기 스프라이트에 대응하는 코드를 에디팅한 에디팅 코드를 상기 코드 에디터창에 반영하는 코드 에디팅부; 상기 스프라이트에 대응하는 코드 및 상기 에디팅 코드에 따라 정적이거나 동적으로 움직이는 객체를 반영하여 스크린창 상에 나타나도록 하는 스크린 재생부; 상기 코딩 튜토리얼 동영상 내에 포함된 코드와 관련된 API 및 코드 문법 설명을 API 함수창에 출력되도록 하는 API 함수 제어부를 포함하는 것을 특징으로 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 장치를 제공한다.
이상에서 설명한 바와 같이 본 실시예에 의하면, 코딩을 학습하고자 하는 학습자 단말기의 일측에 코딩 동영상 학습 강좌를 출력하여, 학습자가 코딩 동영상 학습 강좌를 보면서 따라서 기 설정된 탬플릿 단위로 정적이거나 동적으로 움직이는 객체에 대한 코드를 포함하는 스프라이트(sprite)를 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 하는 프로젝트를 완성할 수 있도록 하는 효과가 있다.
본 실시예에 의하면, 코딩 동영상 학습 강좌와 관련된 코드 문법을 설명하며, 완성된 프로젝트를 PC뿐 아니라 모바일로 동기화하여 모바일에서 확인할 수 있도록 하는 효과가 있다.
도 1은 본 실시예에 따른 코딩 교육 서비스 제공 시스템을 개략적으로 나타낸 블럭 구성도이다.
도 2는 본 실시예에 따른 코딩 교육 서비스 제공 장치를 개략적으로 나타낸 블럭 구성도이다.
도 3은 본 실시예에 따른 코딩 교육에 따른 프로젝트 시작을 설명하기 위한 화면이다.
도 4는 본 실시예에 따른 코딩 교육 서비스 전체 화면을 나타낸 화면이다.
도 5는 본 실시예에 따른 코딩 결과를 실행하는 스크린창 화면을 나타낸 화면이다.
도 6은 본 실시예에 따른 API 함수창을 나타낸 화면이다.
도 7a,7b는 본 실시예에 따른 스프라이트창을 나타낸 화면이다.
도 8은 본 실시예에 따른 특정 씬 내의 특정 객체 스프라이트 선택에 따른 코드 및 화면내 선택을 나타낸 화면이다.
도 9는 본 실시예에 따른 특정 씬 내의 특정 객체 스프라이트 선택에 따른 객체 애니메이션을 나타낸 화면이다.
도 10은 본 실시예에 따른 코딩 교육 서비스를 설명하기 위한 순서도이다.
이하, 본 실시예를 첨부된 도면을 참조하여 상세하게 설명한다.
도 1은 본 실시예에 따른 코딩 교육 서비스 제공 시스템을 개략적으로 나타낸 블럭 구성도이다.
본 실시예에 따른 코딩 교육 서비스 제공 시스템은 텍스트 기반의 코딩 교육을 제공하며, 코딩한 결과물을 학습자 단말기(112) 뿐만 아니라 모바일 디바이스(114)와 연동하여 모바일용으로 코딩된 애플리케이션, 게임 등이 정상동작하는 지를 모바일 디바이스(114)에서 테스트할 수 있도록 한다.
본 실시예에 따른 코딩 교육 서비스 제공 시스템은 학습자 단말기(112), 모바일 디바이스(114), 네트워크(120) 및 코딩 교육 서비스 제공 장치(130)를 포함한다. 코딩 교육 서비스 제공 시스템에 포함된 구성요소는 반드시 이에 한정되는 것은 아니다.
학습자 단말기(112)는 사용자의 키 조작에 따라 네트워크(120)를 경유하여 각종 웹 페이지 데이터를 수신할 수 있는 전자기기를 의미한다. 학습자 단말기(112)는 랩톱(Laptop), 개인용 컴퓨터(PC: Personal Computer) 중 어느 하나일 수 있으며, 네트워크(120)와 연동하여 클라우드 네트워크(120)를 경유하여 코딩 교육 서비스 제공 장치(130)에 접속하기 위한 웹 브라우저와 프로그램을 저장하기 위한 메모리, 프로그램을 실행하여 연산 및 제어하기 위한 마이크로프로세서 등을 구비하고 있는 전자기기를 의미한다.
모바일 디바이스(114)는 사용자의 키 조작에 따라 네트워크(120)를 경유하여 음성 또는 데이터 통신을 수행하는 전자 기기를 의미한다. 모바일 디바이스(114)는 네트워크(120)를 경유하여 코딩 교육 서비스 제공 장치(130)와 통신하기 위한 프로그램 또는 프로토콜을 저장하기 위한 메모리, 해당 프로그램을 실행하여 연산 및 제어하기 위한 마이크로프로세서 등을 구비한다.
모바일 디바이스(114)는 스마트폰(Smart Phone), 태블릿(Tablet), 무선 통신 단말기(Wireless Communication Terminal) 등과 같은 전자 기기일 수 있다.
모바일 디바이스(114)는 (ⅰ) 각종 기기 또는 유무선 네트워크와 통신을 수행하기 위한 통신 모뎀 등의 통신 장치, (ⅱ) 각종 프로그램과 데이터를 저장하기 위한 메모리, (ⅲ) 프로그램을 실행하여 연산 및 제어하기 위한 마이크로프로세서 등을 구비하는 다양한 장치이다. 적어도 일 실시예에 따르면, 메모리는 램(Random Access Memory: RAM), 롬(Read Only Memory: ROM), 플래시 메모리, 광 디스크, 자기 디스크, 솔리드 스테이트 디스크(Solid State Disk: SSD) 등의 컴퓨터로 판독 가능한 기록/저장매체일 수 있다.
네트워크(120)는 인터넷망, 인트라넷망, 이동통신망, 위성 통신망 등 다양한 유무선 통신 기술을 이용하여 인터넷 프로토콜로 데이터를 송수신할 수 있는 망을 의미한다.
네트워크(120)는 인터넷망뿐만 아니라, CDMA(Code Division Multiple Access), WCDMA(Wideband Code Division Multiple Access), GSM(Global System for Mobile Communications), LTE(Long Term Evolution), EPC(Evolved Packet Core), 5G 등의 통신망과 향후 구현될 차세대 이동통신 시스템의 접속망 및 클라우드 컴퓨팅(Cloud Computing) 접속망을 통칭한다
코딩 교육 서비스 제공 장치(130)는 하드웨어적으로 통상적인 웹서버(Web Server) 또는 네트워크 서버와 동일한 하드웨어 모듈을 포함한다. 코딩 교육 서비스 제공 장치(130)는 웹서버 또는 네트워크 서버의 형태로 구현될 수 있다.
코딩 교육 서비스 제공 장치(130)는 일반적으로 인터넷과 같은 개방형 컴퓨터 네트워크를 경유하여 불특정 다수 클라이언트 또는 다른 서버와 통신한다. 코딩 교육 서비스 제공 장치(130)는 클라이언트 또는 다른 웹서버의 작업수행 요청에 대응하는 작업 결과를 도출하여 제공하는 컴퓨터 시스템, 컴퓨터 소프트웨어(웹서버 프로그램)를 의미한다.
코딩 교육 서비스 제공 장치(130)는 전술한 웹서버 프로그램 이외에, 웹서버상에서 동작하는 일련의 응용 프로그램(Application Program) 또는 장치 내부에 구축되어 있는 각종 데이터베이스를 포함하는 넓은 개념으로 이해되어야 할 것이다.
코딩 교육 서비스 제공 장치(130)는 접속한 학습자 단말기(112)로 게임. 애플리케이션 등을 만드는 과정을 녹화한 코딩 튜토리얼 동영상을 튜토리얼 동영상창(310)에서 재생되도록 한다. 학습자가 튜토리얼 동영상창(310)에서 재생되는 코딩 튜토리얼 동영상의 코딩 과정을 동일하게 따라하면 튜토리얼에 포함된 게임, 애플리케이션을 완성할 수 있다.
코딩 교육 서비스 제공 장치(130)는 접속한 학습자 단말기(112)로 튜토리얼 동영상창(310), 스크린창(320), API 함수창(330), 코드 에디터창(340), 스프라이트창(350)을 이용하여 제공한다. 텍스트 기반의 코딩 교육을 제공한다. 코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상창(310), 스크린창(320), API 함수창(330), 코드 에디터창(340), 스프라이트창(350)을 이용하여 텍스트 기반으로 블럭화되어 있는 스프라이트들을 조합하여 게임이나 애플리케이션을 코딩할 수 있도록 한다.
코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상창(310), 스크린창(320), API 함수창(330), 코드 에디터창(340), 스프라이트창(350)을 이용하여 API 튜토리얼, 스프라이트 리스트, 코딩 튜토리얼 동영상을 하나의 세트로 제공한다. 코딩 교육 서비스 제공 장치(130)는 코딩 튜토리얼 동영상을 재생하여 시청하면서 스프라이트들을 조합하고, API 튜토리얼을 확인할 수 있도록 하는 인터페이스를 제공한다.
코딩 교육 서비스 제공 장치(130)는 코딩(Coding)에 관련된 코딩 튜토리얼 동영상을 튜토리얼 동영상창(310)으로 출력한다. 코딩 교육 서비스 제공 장치(130)는 코딩 튜토리얼 동영상 내에 포함된 코드들을 기 설정된 탬플릿 단위로 포함하는 스프라이트들을 스프라이트창(350)으로 출력한다. 코딩 교육 서비스 제공 장치(130)는 스프라이트창(350) 내에 존재하는 씬(Scene)별 기 생성된 복수의 스프라이트 중 선택된 스프라이트에 대응하는 코드들을 코드 에디터창(340)으로 출력되도록 한다. 코딩 교육 서비스 제공 장치(130)는 학습자 단말기(112)로부터 수신된 명령에 의해가 스프라이트에 대응하는 코드를 에디팅한 에디팅 코드를 코드 에디터창(340)에 반영한다. 코딩 교육 서비스 제공 장치(130)는 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 정적이거나 동적으로 움직이는 객체를 반영하여 스크린창(320) 상에 나타나도록 한다. 코딩 교육 서비스 제공 장치(130)는 코딩 튜토리얼 동영상 내에 포함된 코드와 관련된 API 및 코드 문법 설명을 API 함수창(330)에 출력되도록 한다.
코딩 교육 서비스 제공 장치(130)는 모바일 연동에 대한 입력이 있는 경우, 기 설정된 모바일 디바이스(114)와 연동하여 모바일 디바이스(114) 상에서 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있는 동작이 실행되도록 한다.
도 2는 본 실시예에 따른 코딩 교육 서비스 제공 장치를 개략적으로 나타낸 블럭 구성도이다.
본 실시예에 따른 코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상 재생 제어부(210), 스프라이트 제어부(212), 코드 에디팅부(214), 스크린 재생 제어부(216), API 함수 제어부(218), 모바일 연동부(220), 오류 검출부(222), 가이드부(224)를 포함한다. 코딩 교육 서비스 제공 장치(130)에 포함된 구성요소는 반드시 이에 한정되는 것은 아니다.
코딩 교육 서비스 제공 장치(130)에 포함된 각 구성요소는 장치 내부의 소프트웨어적인 모듈 또는 하드웨어적인 모듈을 연결하는 통신 경로에 연결되어 상호 간에 유기적으로 동작할 수 있다. 이러한 구성요소는 하나 이상의 통신 버스 또는 신호선을 이용하여 통신한다.
도 2에 도시된 코딩 교육 서비스 제공 장치(130)의 각 구성요소는 적어도 하나의 기능이나 동작을 처리하는 단위를 의미하며, 소프트웨어적인 모듈, 하드웨어적인 모듈 또는 소프트웨어와 하드웨어의 결합으로 구현될 수 있다.
튜토리얼 동영상 재생 제어부(210)는 코딩(Coding)에 관련된 코딩 튜토리얼 동영상을 튜토리얼 동영상창(310)으로 출력한다.
스프라이트 제어부(212)는 코딩 튜토리얼 동영상 내에 포함된 코드들을 기 설정된 탬플릿 단위로 포함하는 스프라이트들을 스프라이트창(350)으로 출력한다.
스프라이트 제어부(212)는 튜토리얼 동영상 재생 제어부(210)에서 쳅터별로 재생되는 코딩 튜토리얼 동영상의 쳅터별 특정 시점이 도래하는 경우, 스프라이트 제어부(212)에서 씬(Scene)별 기 생성된 복수의 스프라이트 중 쳅터별 특정 시점에 매칭된 스프라이트만을 추출하여 스프라이트창(350)에 출력되도록 한다.
스프라이트 제어부(212)는 하나의 프로젝트에 대해 적어도 하나 이상의 씬을 포함하는 씬그룹(357)이 스프라이트창(350)의 일측에 출력되도록 한다. 스프라이트 제어부(212)는 씬그룹(357)에 포함되는 적어도 하나 이상의 스프라이트를 포함하는 스프라이트 그룹(356)이 스프라이트창(350)의 타측에 출력되도록 한다.
스프라이트 제어부(212)는 씬그룹(357) 중 선택된 특정 씬(예컨대, 씬1, 씬2, 씬3, 씬4 중 어느 하나)에 대응하는 스프라이트만을 추출하여 스프라이트창(350)의 타측에 출력되도록 한다.
코드 에디팅부(214)는 스프라이트창(350) 내에 존재하는 씬(Scene)별 기 생성된 복수의 스프라이트 중 선택된 스프라이트에 대응하는 코드들을 코드 에디터창(340)으로 출력되도록 한다. 코드 에디팅부(214)는 학습자의 명령에 의해가 스프라이트에 대응하는 코드를 에디팅한 에디팅 코드를 코드 에디터창(340)에 반영한다.
코드 에디팅부(214)는 특정 씬(예컨대, 씬1, 씬2, 씬3, 씬4 중 어느 하나)에 대응하는 스프라이트 중 선택된 객체 스프라이트(358)에 대응하는 스프라이트 코드를 코드 에디터창(340)에 출력되도록 한다. 코드 에디팅부(214)는 학습자 단말기(112)로부터 입력된 명령에 의해 객체 스프라이트(358)에 대응하는 스프라이트 코드가 에디팅되면, 스프라이트 코드를 에디팅한 에디팅 코드를 코드 에디터창(340)에 출력한다.
코드 에디팅부(214)는 특정 씬(예컨대, 씬1, 씬2, 씬3, 씬4 중 어느 하나)에 대응하는 스프라이트 그룹(356) 중 선택된 객체 스프라이트(358)에 대응하는 스프라이트 코드를 코드 에디터창(340)의 일측에 출력되도록 한다. 코드 에디팅부(214)는 코드 에디터창(340)의 타측에 스프라이트 코드에 대응하는 애니메이션이 나타나도록 하는 애니메이션 버튼(341)이 나타나도록 한다. 코드 에디팅부(214)는 애니메이션 버튼(341)에 대한 입력이 있는 경우, 스프라이트 코드에 대응하는 객체 애니메이션이 나타나도록 하는 객체 애니메이션 그룹(342)이 코드 에디터창(340) 내에 나타나도록 한다.
코드 에디팅부(214)는 코드 에디터창(340)에 출력된 스프라이트에 대응하는 코드에 입력값이 추가되는 경우, 입력값을 포함하는 함수를 자동완성으로 추출하여 함수자동완성 리스트가 출력되도록 한다. 코드 에디팅부(214)는 함수자동완성 리스트 중 선택된 함수를 스프라이트에 대응하는 코드에 반영하여 에디팅 코드로 처리한다.
스크린 재생 제어부(216)는 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 정적이거나 동적으로 움직이는 객체를 반영하여 스크린창(320) 상에 나타나도록 한다.
스크린 재생 제어부(216)는 스크린창(320)의 일측에 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 정적이거나 동적으로 움직이는 객체가 동작하도록 하는 소프트웨어적인 실행버튼(326)이 나타나도록 한다. 스크린 재생 제어부(216)는 실행버튼(326)에 대한 입력이 있는 경우, 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 한다.
스크린 재생 제어부(216)는 스크린창(320) 타측에 전체화면 버튼(322) 및 가로세로 전환버튼(324)이 나타나도록 한다. 스크린 재생 제어부(216)는 전체화면 버튼(322)에 대한 입력에 따라 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 하는 화면이 전체 화면으로 나타나도록 한다. 스크린 재생 제어부(216)는 가로세로 전환버튼(324)에 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 하는 화면이 가로화면에서 세로화면으로 전환되거나 세로화면에서 가로화면으로 전환되도록 한다.
스크린 재생 제어부(216)는 객체 스프라이트(358)에 대응하는 스프라이트 코드에 따라 정적이거나 동적으로 움직이는 객체에 반영하여 스크린창(320) 상에 나타나도록 한다. 스크린 재생 제어부(216)는 에디팅 코드에 따라 객체의 정적이거나 동적으로 움직임을 반영하여 스크린창(320)에 나타나도록 한다.
API 함수 제어부(218)는 코딩 튜토리얼 동영상 내에 포함된 코드와 관련된 API 및 코드 문법 설명을 API 함수창(330)에 출력되도록 한다.
API 함수 제어부(218)는 코딩과 관련된 움직임, 모양, 이벤트, 제어, 감지, 연산, 물리, 소리, 시간, 데이터 중 어느 하나에 따라 구분된 복수의 API를 포함하는 API 탭이 API 함수창(330)에 나타나도록 제어한다. API 함수 제어부(218)는 복수의 API 중 선택된 API에 매칭된 복수의 코드 그룹이 API 함수창(330)에 나타나도록 제어한다. API 함수 제어부(218)는 코드 그룹 중 선택된 코드에 매칭된 코드 문법이 API 함수창(330)에 설명되도록 한다.
모바일 연동부(220)는 모바일 연동에 대한 입력이 있는 경우, 기 설정된 모바일 디바이스(114)와 연동하여 모바일 디바이스(114) 상에서 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있는 동작이 실행되도록 한다.
모바일 연동부(220)는 스프라이트에 대응하는 코드 및 에디팅 코드에 모바일 디바이스에 특화된 제스쳐(터치 등)가 포함된 경우, 모바일 디바이스(114)의 실행에 의해 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있는 동작에 문제가 없는지를 테스트한다.
오류 검출부(222)는 튜토리얼 동영상창(310)의 일측에 존재하는 네비게이션 박스(메뉴)에 입력이 있는 경우, 스프라이트에 대응하는 코드 및 에디팅 코드를 기 작성된 코드와 비교하여 오류를 검출한 오류 검출 결과를 생성한다. 오류 검출부(222)는 오류 검출 결과를 튜토리얼 동영상창(310) 및 코드 에디터창(340) 중 적어도 하나의 창에 출력되도록 한다.
오류 검출부(222)는 네비게이션 박스(메뉴)에 입력이 있을 때마다 입력중이거나 입력 완료된 스프라이트에 대응하는 코드 및 에디팅 코드를 기 작성된 코드와 비교하여 오류 검출 결과를 생성한다.
오류 검출부(222)는 오류 검출 결과에 포함된 오류 검출률을 산출하고, 오류 검출률에 대응하는 코드를 확인한다. 오류 검출부(222)는 오류 검출률을 분석하여 기 설정된 임계치 이상의 오류 검출률을 갖는 상위 오류 코드들을 선별한다. 오류 검출부(222)는 상위 오류 코드에 대응하는 코드 문법을 설명하는 오류 코드 튜토리얼 동영상을 제작하거나 오류 코드 샘플을 생성한다. 오류 검출부(222)는 오류 코드 튜토리얼 동영상을 코딩 튜토리얼 동영상에 반영하거나 추가 코딩 튜토리얼 동영상을 튜토리얼 동영상창(310)으로 출력한다.
오류 검출부(222)는 오류 코드 샘플을 스프라이트에 대응하는 코드 및 에디팅 코드 중 적어도 하나 이상의 코드에 반영하여 코드 에디터창(340)으로 출력한다.
오류 검출부(222)는 오류 검출률을 기반으로 코딩 난이도를 구분한다. 오류 검출부(222)는 학습자가 선택한 학습 과정을 확인한 후 코딩 난이도와 학습 과정이 매칭되는 경우에만 오류 코드 튜토리얼 동영상 또는 오류 코드 샘플을 출력하도록 한다.
가이드부(224)는 스프라이트에 대응하는 코드 및 에디팅 코드를 분석하여, 스프라이트에 대응하는 코드 및 에디팅 코드를 입력한 코드 입력 시간을 확인한다. 가이드부(224)는 코드 입력 시간이 기 설정된 임계치를 초과하는 경우, 오류 코드 튜토리얼 동영상 또는 오류 코드 샘플을 출력하도록 한다.
가이드부(224)는 오류 코드 샘플을 스프라이트에 대응하는 코드 및 에디팅 코드와 비교하여 차이점이 발생한 부분을 코드 에디터창(340)에 즉시 반영하여 출력되도록 한다.
가이드부(224)는 스프라이트에 대응하는 코드 및 에디팅 코드에 포함된 코드를 한줄씩 분석하는 것이 아니라 코드 전체를 분석하여 루프, 조건문, 동일 코드의 분야에 따른 상이한 적용 여부를 판단하여 학습자가 미입력한 코드를 추출하여 코드 에디터창(340)에 반영하도록 한다.
도 3은 본 실시예에 따른 코딩 교육에 따른 프로젝트 시작을 설명하기 위한 화면이다.
학습자는 학습자 단말기(112)를 이용하여 코딩 교육 서비스 제공 장치(130)에 접속한다. 학습자는 학습자 단말기(112)를 이용하여 코딩 교육 서비스 제공 장치(130)에 자신의 학습자 계정을 로그인한다.
학습자는 코딩 교유 서비스를 이용하기 위해서는 코딩 교육과 관련된 비용을 결제한 후 코딩 교육 서비스 제공 장치(130)로부터 코딩 교육과 관련된 프로젝트 정보를 수신할 수 있다.
코딩 교육 서비스 제공 장치(130)는 학습자 단말기(112)로 학습자 계정에 대응하는 프로젝트창(302)을 출력한다. 코딩 교육 서비스 제공 장치(130)는 프로젝트창(302) 내에서 새프로젝트 버튼(304), 프로젝트 그룹(306)을 출력한다.
코딩 교육 서비스 제공 장치(130)는 새프로젝트 버튼(304)에 대한 입력이 있는 경우, 프로젝트 그룹(306) 내에 새프로젝트를 추가한다. 코딩 교육 서비스 제공 장치(130)는 프로젝트 그룹(306) 내에 존재하는 복수의 프로젝트 중 어느 하나가 선택되면, 해당 프로젝트에 대한 코딩을 수행할 수 있도록 도 4와 같이, 튜토리얼 동영상창(310), 스크린창(320), API 함수창(330), 코드 에디터창(340), 스프라이트창(350)을 출력한다.
도 4는 본 실시예에 따른 코딩 교육 서비스 전체 화면을 나타낸 화면이다.
코딩 교육 서비스 제공 장치(130)는 도 4에 도시된 바와 같이, 접속한 학습자 단말기(112)로 튜토리얼 동영상창(310), 스크린창(320), API 함수창(330), 코드 에디터창(340), 스프라이트창(350)을 이용하여 제공한다.
코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상창(310), 스크린창(320), API 함수창(330), 코드 에디터창(340), 스프라이트창(350)을 이용하여 텍스트 기반으로 블럭화되어 있는 스프라이트들을 조합하여 게임이나 애플리케이션을 코딩할 수 있도록 한다.
코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상창(310), 스크린창(320), API 함수창(330), 코드 에디터창(340), 스프라이트창(350)을 이용하여 API 튜토리얼, 스프라이트 리스트, 코딩 튜토리얼 동영상을 하나의 세트로 제공한다. 코딩 교육 서비스 제공 장치(130)는 코딩 튜토리얼 동영상을 재생하여 시청하면서 스프라이트들을 조합하고, API 튜토리얼을 확인할 수 있도록 하는 인터페이스를 제공한다.
도 5는 본 실시예에 따른 코딩 결과를 실행하는 스크린창 화면을 나타낸 화면이다.
코딩 교육 서비스 제공 장치(130)는 스크린창(320)을 이용하여 학습자가 입력한 코드가 실행되는 동작을 재생시킨다. 코딩 교육 서비스 제공 장치(130)는 스크린창(320)을 이용하여 코드를 실행할 때, 코드를 수정할 수 없다. 코딩 교육 서비스 제공 장치(130)는 스크린창(320)을 이용하여 코딩한 결과를 비주얼적으로 출력한다.
코딩 교육 서비스 제공 장치(130)는 코딩한 결과를 반영하여 객체가 정적 또는 동적으로 동작되도록 하며, 해당 결과가 스크린창(320)에 출력되도록 한다. 학습자는 학습자 단말기(112)를 이용하여 자신이 코딩한 결과가 객체 또는 캐릭터 형태로 나타내며, 객체 또는 캐릭터의 움직임을 직접 확인할 수 있다.
코딩 교육 서비스 제공 장치(130)는 스크린창(320) 내의 실행버튼(326)에 입력이 존재하면 현재까지 입력된 코들이 비주얼 형태로 동작하도록 한다. 코딩 교육 서비스 제공 장치(130)는 스크린창(320)에서 실행되는 코드들을 모바일 디바이스(114)와 동기화한다.
코딩 교육 서비스 제공 장치(130)는 학습자 단말기(112) 내의 스크린창(320)에서 출력되는 실행화면을 모바일 디바이스(114)의 스크린창(320)에서도 동일하게 출력되도록 한다. 스크린창(320) 내에서 실행되는 코드들이 모바일 환경에서 구현되도록 동작하며, 모바일 디바이스(114)에서 코드들이 구현될 때, 모바일에 특화된 동작이나 제스쳐가 적용된 코드들이 모바일에서 정상 동작히는지를 테스트한다. 기본 코드는 모바일용으로 설정되어 있기 때문에, 스크린창에 재생된 게임, 애플리케이션은 모바일 디바이스(114)에서 정상동작한다. 따라서, 모바일 화면에서 학습자는 테스트를 수행할 수 있다.
코딩 교육 서비스 제공 장치(130)는 스크린창(320) 내에 구현된 가로세로 전환버튼(324)에 대한 입력이 있는 경우, 화면을 가로에서 세로로 전환하거나, 세로에서 가로로 전환한다. 코딩 교육 서비스 제공 장치(130)는 스크린창(320) 내에 구현된 전체화면 버튼(322)에 대한 입력이 있는 경우, 화면을 전체화면으로 전환한다.
코딩 교육 서비스 제공 장치(130)는 스크린창(320)에 구현된 객체 중 스프라이트창(350) 내에서 선택된 특정 스프라이트에 대응되는 객체를 인식한다. 코딩 교육 서비스 제공 장치(130)는 스크린창(320)에서 특정 스프라이트에 대응되는 개체의 모서리 부분에 네모형태의 마크(심볼)이 표시되도록 한다.
학습자는 스크린창(320)에서 모서리 부분에 네모형태의 마크(심볼)이 표시된 스프라이트 내부에 커서를 이동시킨 후 드래그앤드랍으로 커서를 이동시키면 스프라이트의 위치가 이동된다. 학습자는 스크린창(320)에서 모서리 부분에 네모형태의 마크(심볼)를 커서로 선택한 후 드래그앤드랍으로 이동시키면서 스프라이트의 크기를 조정할 수 있다.
학습자는 스크린창(320)에서 모서리 부분에 네모형태의 마크(심볼)이 표시된 스프라이트 중앙 상측에 위치한 마크를 드래그앤드랍으로 이동시키면 스프라이트의 각도(기울기)가 조절된다.
코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상창(310)을 이용하여 기 저장된 코딩 튜토리얼 동영상이 재생되도록 한다. 코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상창(310)을 이용하여 다양한 프로젝트에 대응하는 복수의 코딩 튜토리얼 동영상을 재생한다. 코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상창(310)을 이용하여 학습자 단말기(112)가 1:1 화상 채팅으로 궁금한 것으로 바로 질의할 수 있도록 한다.
코딩 튜토리얼 동영상(네비게이션)에는 강사가 나와서 코딩 학습 방법 및 스프라이트들을 조합하여 하나의 프로젝트를 완성할 수 있는 코딩 원리에 대해 설명한다. 코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상창(310)을 이용하여 코딩 튜토리얼 동영상을 챕터별, 프로젝트별, 내용별로 분할하여 재생할 수 있다.
코딩 튜토리얼 동영상은 코딩 내용에 따라 특정 시점별로 구분될 수 있다. 코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상창(310)을 이용하여 코딩 튜토리얼 동영상을 학습자의 선택에 따라 반복재생하거나 특정 챕터, 학습 과정별로 재생할 수 있다.
도 6은 본 실시예에 따른 API 함수창을 나타낸 화면이다.
코딩 교육 서비스 제공 장치(130)는 API 함수창(330)을 이용하여 움직임, 모양, 이벤트, 제어, 감지, 연산, 물리, 소리, 시간, 데이터 등을 선택할 수 있는 API 탭을 출력한다. 코딩 교육 서비스 제공 장치(130)는 API 함수창(330)을 이용하여 API 탭 내에 API 리스트를 제공한다. 코딩 교육 서비스 제공 장치(130)는 API 함수창(330)을 이용하여 API 탭에서 선택된 코드에 대한 코딩 문법을 설명한다.
예컨대, 학습자가 특정 스프라이트에 대한 사운드를 바꾸고자 하는 경우, API 탭 중 '소리'를 선택하면 소리 관련 코드가 API 함수창(330)에 출력된다. 학습자가 소리 관련 코드 중 하나를 선택하면, 소리 관련 코드에 대한 코드 문법 설명이 코드 에디터창(340) 내에 출력된다. 학습자가 특정 스프라이트에 대한 이동을 바꾸고자하는 경우, API 탭 중 '이동'을 선택하면 이동 관련 코드가 API 함수창(330)에 출력된다.
학습자가 이동 관련 코드 중 moveY(steps)을 선택하면, 해당 함수와 관련된 문법 설명이 코드 에디터창(340) 내에 출력되며, 해당 함수와 관련된 코드 설명 동영상이 해당 튜토리얼 동영상창(310)에 재생되도록 한다.
학습자는 API 함수창(330)에 출력된 API 탭 내의 코드를 보고, 코드 에디터창(340)에 소스코드를 입력할 수 있다. API 탭은 API 함수 트리, 파라미터를 포함한다. API 함수 트리, 파라미터는 코드 및 코드 문법 설명과 매칭되어 있다. API 탭 내에는 다양한 함수로 구분되는 API가 존재한다.
도 6의 (a)에 도시된 바와 같이, API 탭 내의 존재하는 다양한 함수(움직임, 모양, 이벤트, 제어, 감지, 연산, 물리, 소리, 시간, 데이터) 중 어느 하나의 함수(움직임)를 선택하면 움직임 관련 코드가 출력된다.
도 6의 (b)에 도시된 바와 같이, API 탭 내의 존재하는 다양한 함수(움직임, 모양, 이벤트, 제어, 감지, 연산, 물리, 소리, 시간, 데이터) 중 어느 하나의 함수(모양)를 선택하면 모양 관련 코드가 출력된다.
도 6의 (c)에 도시된 바와 같이, API 탭 내의 존재하는 다양한 함수(움직임, 모양, 이벤트, 제어, 감지, 연산, 물리, 소리, 시간, 데이터) 중 어느 하나의 함수(이벤트)를 선택하면 이벤트 관련 코드(onFrame(function()), onSignal(name,function()), sendSignal(name), changeScene(name), onClick(function()), onKey(key,function()), onKeyUP(key,function()), onOverlap(name,function()), onOverlanp([name1,name2].function()), onOutStage(function()))가 출력된다.
학습자가 이벤트 함수에 대응하는 코드 중 어느 하나 코드(onFrame(function()))에 커서를 이동시키면, 해당 코드 대한 코드 문법 설명이 출력된다.
도 7a,7b는 본 실시예에 따른 스프라이트창을 나타낸 화면이다.
코딩 교육 서비스 제공 장치(130)는 스프라이트창(350)을 이용하여 씬 추가를 선택하면 해당 프로젝트에 대한 씬이 추가되도록 한다. 코딩 교육 서비스 제공 장치(130)는 유료 탬플릿이 구매되면, 유료 탬플릿에 대응하는 스프라이트를 스프라이트창(350)에 추가한다. 코딩 교육 서비스 제공 장치(130)는 스프라이트창(350)을 이용하여 씬별로 탬플릿 형태로 스프라이트된 애니메이션 이미지가 출력되도록 한다. 애니메이션 이미지는 템플릿 형태로 스프라이트에 저장된다.
도 7a에 도시된 바와 같이, 코딩 교육 서비스 제공 장치(130)는 스프라이트창(350) 내에 존재하는 스프라이트 그룹(356) 중 선택된 스프라이트를 조합해서 게임, 애플리케이션 등을 구현한다.
스프라이트 그룹(356) 내에 존재하는 스프라이트는 객체(애니메이션화되거나 이미지화)를 나타낸다. 스프라이트는 소프트웨어적으로 연결되어 있는 정적 동적 화상(객체, 컨텐츠, 사운드)의 조합을 나타낸다. 스프라이트의 종류는 캐릭터(동물, 식물, 사람), 객체(도구, 열쇠, 책상, 문) 등을 포함한다.
코딩 교육 서비스 제공 장치(130)는 스토리(시나리오)에 따라 복수의 씬(예컨대, 씬1, 씬2, 씬3, 씬4)을 포함하는 씬그룹(357)을 제공하며, 씬별로 캐릭터 또는 객체가 애니메이션화 되어 있는 스프라이트 그룹(356)을 제공한다.
코딩 교육 서비스 제공 장치(130)는 특정 프로젝트 내에는 복수의 스토리(시나리오)에 대응하는 하나 이상의 씬(Scene)을 포함한다. 씬(Scene)별로 캐릭터, 객체, 사운드, 텍스트, 배경 등을 포함하는 복수의 스프라이트가 매칭된다.
코딩 교육 서비스 제공 장치(130)는 스프라이트창(350) 내에서 ‘씬추가’가 선택되면, 스프라이트창(350)에서 씬(scene1) 옆에 씬 펼치기 버튼(>)(355)을 누르면 추가된 씬들과 함께 신규 씬을 추가할 수 있는 신규 추가 버튼(+)이 나타난다. 코딩 교육 서비스 제공 장치(130)는 신규 추가 버튼(+)에 대한 입력이 존재하면, 새로운 씬을 추가한다. 학습자는 스프라이트창(350) 내에서 드래그앤 드랍으로 씬들의 순서를 변경할 수 있다.
학습자는 스프라이트창(350)의 우측 하단에 +버튼을 누르면 씬별 스프라이트 그룹(356) 내에 스프라이트가 추가된다. 학습자는 스프라이트 그룹(356) 내에서 원하는 스프라이트를 선택한 후 적용하기 버튼을 누르면, 해당 스프라이트가 스프라이트 그룹(356) 내에 반영된다. 학습자는 스프라이트 그룹(356) 내에 추가된 스프라이트를 드래그앤 드랍으로 위치를 변경할 수 있다. 학습자는 스프라이트 그룹(356) 내에서 원하지 않는 스프라이트를 한번 선택 후 스프라이트 내의 x 버튼을 눌러서 삭제할 수 있다.
도 7b의 (a)에 도시된 바와 같이, 학습자는 씬그룹(357) 중 씬1(351)을 선택하면, 씬1(351)에 대응하는 스프라이트들을 포함하는 스프라이트 그룹(356)이 스프라이트창(350) 내에 출력된다.
도 7b의 (b)에 도시된 바와 같이, 학습자는 씬그룹(357) 중 씬2(352)을 선택하면, 씬2(352)에 대응하는 스프라이트들을 포함하는 스프라이트 그룹(356)이 스프라이트창(350) 내에 출력된다.
도 7b의 (c)에 도시된 바와 같이, 학습자는 씬그룹(357) 중 씬3(353)을 선택하면, 씬3(353)에 대응하는 스프라이트들을 포함하는 스프라이트 그룹(356)이 스프라이트창(350) 내에 출력된다.
도 7b의 (d)에 도시된 바와 같이, 학습자는 씬그룹(357) 중 씬4(354)을 선택하면, 씬4(354)에 대응하는 스프라이트들을 포함하는 스프라이트 그룹(356)이 스프라이트창(350) 내에 출력된다.
도 8은 본 실시예에 따른 특정 씬 내의 특정 객체 스프라이트 선택에 따른 코드 및 화면내 선택을 나타낸 화면이다.
학습자는 스프라이트창(350) 내에서 먼저 씬그룹(357)에 포함된 복수의 씬 중 씬1(351)을 선택하면, 코딩 교육 서비스 제공 장치(130)는 씬1(351)에 대응하는 스프라이트 그룹(356)을 스프라이트창(350)에 출력한다.
학습자는 도 8에 도시된 바와 같이, 씬1(351)에 대응하는 스프라이트 그룹(356) 중 객체 스프라이트(358)(윈도우)를 선택한다.
코딩 교육 서비스 제공 장치(130)는 객체 스프라이트(358)(윈도우)에 대응하는 코드들 코드 에디터창(340)에 출력하며, 객체 스프라이트(358)(윈도우)에 대응하는 이미지화된 객체를 스크린창(320) 내에 반영한다.
코딩 교육 서비스 제공 장치(130)는 코드 에디터창(340)을 이용하여 에디터탭으로 함수를 입력하면, 해당 함수를 자동완성시킨다. 코딩 교육 서비스 제공 장치(130)는 코드 에디터창(340)을 이용하여 스프라이트창(350)에서 선택된 스프라이트에 대한 애니메이션 버튼(341)이 선택되면, 해당 스프라이트에 대한 애니메이션이 나타나도록 한다.
도 9는 본 실시예에 따른 특정 씬 내의 특정 객체 스프라이트 선택에 따른 객체 애니메이션을 나타낸 화면이다.
도 9에 도시된 바와 같이, 학습자는 먼저, 스프라이트창(350)에서 원하는 스프라이트를 선택하면, 해당 스프라이트에 대한 코드, 함수 등이 코드 에디터창(340)에 출력된다. 학습자는 코드 에디터창(340)에 출력된 코드, 함수를 에디팅할 수 있다.
학습자는 넣고자하는 함수(예컨대, on)를 코드 에디터창(340)에 입력하면, 해당 함수를 포함하는 자동 완성된 코드 리스트(onFrame(function()), onSignal(name,function()), onClick(function()), onKey(key,function()), onKeyUP(key,function()), onOverlap(name,function()), onOverlanp([name1,name2].function()), onOutStage(function()))가 출력된다.
학습자는 코드 리스트 중 원하는 함수(예컨대, onFrame(function()))를 선택하면, 해당 함수(예컨대, onFrame(function()))가 코드 에디터창(340) 내부에 입력되면, 해당 코드가 완성된다.
학습자는 코드 에디터창(340)에 입력값을 입력하거나 코드를 에디팅한 후 스크린창(320) 내의 실행버튼(326)을 눌러서 입력된 코드에 대응하는 게임, 애플리케이션이 정상적으로 동작하는지를 실시간으로 확인해 볼 수 있다.
코드 에디터창(340)의 일측에 애니메이션 버튼(341)이 구비되면, 애니메이션 버튼(341)에 대한 입력이 있는 경우, 스프라이트창(350) 내의 씬1(351)에 대응하는 객체 스프라이트(358)에 대응하는 다양한 애니메이션(창문을 여는 애니메이션, 창문을 닫는 애니메이션)이 출력된다.
다시 말해, 학습자는 스프라이트창(350) 내에서 씬그룹 중 어느 하나의 씬(씬1(351)과 씬1(351)에 대응하는 스프라이트 그룹(356) 중 어느 하나의 스프라이트(객체 스프라이트(358))를 먼저 선택하면, 객체 스프라이트(358)에 대응하는 애니메이션 중 어느 하나에 커서를 이동시키면, 해당 애니메이션을 미리 실행시켜볼 수 있다. 만약, 학습자가 코드 에디터창(340)에 입력값을 입력하거나 코드를 에디팅하면, 해당 스프라이트에 반영된다.
학습자가 코드 에디터창(340)에 특정 알파벳을 입력하면, API 함수창(330)에서 함수 관련 설명을 해주거나 튜토리얼 동영상창(310)에서 관련 동영상을 제안해 줄 수 있다.
코딩 교육 서비스 제공 장치(130)는 코드 에디터창(340)에 입력되는 입력값 또는 코드 에디팅의 입력 시간을 분석하고, 입력 시간이 임계치 이상인 경우, 학습자가 고민중인 것으로 판단하여 관련 동영상을 튜토리얼 동영상창(310)에 재생시키거나 관련 설명을 API 함수창(330)에 출력시킨다.
코딩 교육 서비스 제공 장치(130)는 인터랙티브 관제 시스템으로서, 코드 에디터창(340)에 입력되는 입력값 또는 코드 에디팅을 분석하여 제공하는 구성요소를 바꿀수 있다.
예컨대, 코딩 교육 서비스 제공 장치(130)는 사용자의 입력 상태 등을 확인해서 동영상, 관련 설명, 풀팁 등을 제공할 때, 화면 구성 요소를 바꿀 수 있다. 코딩 교육 서비스 제공 장치(130)는 코드 에디터창(340)에 입력되는 함수에 따라 바뀌는 부분을 바로 바로 화면상에 출력한다.
코딩 교육 서비스 제공 장치(130)는 코드 에디터창(340)에 입력되는 코드 한줄만 보는 것이 아니라 루프, 조건문의 사용 여부를 확인하여 인터랙티브하게 학습자가 미처 입력하지 못한 루프, 조건문, 코드를 종합적으로 판단하여 학습자에게 안내한다.
코딩 교육 서비스 제공 장치(130)는 코드 에디터창(340)에 입력된 동일한 코드라 하더라도 다르게 상황이나 환경에 따라 다르게 적용될 수 있으므로, 입력된 코드를 분석하여 적응적으로 적용 가능하도록 해준다.
도 10은 본 실시예에 따른 코딩 교육 서비스를 설명하기 위한 순서도이다.
코딩 교육 서비스 제공 장치(130)는 코딩(Coding)에 관련된 코딩 튜토리얼 동영상을 튜토리얼 동영상창(310)으로 출력한다(S1010).
코딩 교육 서비스 제공 장치(130)는 코딩 튜토리얼 동영상 내에 포함된 코드들을 기 설정된 탬플릿 단위로 포함하는 스프라이트들을 스프라이트창(350)으로 출력한다(S1020).
단계 S1020에서, 코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상창(310)에서 쳅터별로 재생되는 코딩 튜토리얼 동영상의 쳅터별 특정 시점이 도래하는 경우, 코딩 교육 서비스 제공 장치(130)에서 씬(Scene)별 기 생성된 복수의 스프라이트 중 쳅터별 특정 시점에 매칭된 스프라이트만을 추출하여 스프라이트창(350)에 출력되도록 한다.
코딩 교육 서비스 제공 장치(130)는 하나의 프로젝트에 대해 적어도 하나 이상의 씬을 포함하는 씬그룹(357)이 스프라이트창(350)의 일측에 출력되도록 한다. 코딩 교육 서비스 제공 장치(130)는 씬그룹(357)에 포함되는 적어도 하나 이상의 스프라이트를 포함하는 스프라이트 그룹(356)이 스프라이트창(350)의 타측에 출력되도록 한다.
코딩 교육 서비스 제공 장치(130)는 씬그룹(357) 중 선택된 특정 씬(예컨대, 씬1, 씬2, 씬3, 씬4 중 어느 하나)에 대응하는 스프라이트만을 추출하여 스프라이트창(350)의 타측에 출력되도록 한다.
코딩 교육 서비스 제공 장치(130)는 스프라이트창(350) 내에 존재하는 씬(Scene)별 기 생성된 복수의 스프라이트 중 선택된 스프라이트에 대응하는 코드들을 코드 에디터창(340)으로 출력되도록 한다. 코딩 교육 서비스 제공 장치(130)는 학습자의 명령에 의해가 스프라이트에 대응하는 코드를 에디팅한 에디팅 코드를 코드 에디터창(340)에 반영한다(S1030).
단계 S1030에서, 코딩 교육 서비스 제공 장치(130)는 특정 씬(예컨대, 씬1, 씬2, 씬3, 씬4 중 어느 하나)에 대응하는 스프라이트 중 선택된 객체 스프라이트(358)에 대응하는 스프라이트 코드를 코드 에디터창(340)에 출력되도록 한다. 코딩 교육 서비스 제공 장치(130)는 학습자 단말기(112)로부터 입력된 명령에 의해 객체 스프라이트(358)에 대응하는 스프라이트 코드가 에디팅되면, 스프라이트 코드를 에디팅한 에디팅 코드를 코드 에디터창(340)에 출력한다.
코딩 교육 서비스 제공 장치(130)는 특정 씬(예컨대, 씬1, 씬2, 씬3, 씬4 중 어느 하나)에 대응하는 스프라이트 그룹(356) 중 선택된 객체 스프라이트(358)에 대응하는 스프라이트 코드를 코드 에디터창(340)의 일측에 출력되도록 한다. 코딩 교육 서비스 제공 장치(130)는 코드 에디터창(340)의 타측에 스프라이트 코드에 대응하는 애니메이션이 나타나도록 하는 애니메이션 버튼(341)이 나타나도록 한다. 코딩 교육 서비스 제공 장치(130)는 애니메이션 버튼(341)에 대한 입력이 있는 경우, 스프라이트 코드에 대응하는 객체 애니메이션이 나타나도록 하는 객체 애니메이션 그룹(342)이 코드 에디터창(340) 내에 나타나도록 한다.
코딩 교육 서비스 제공 장치(130)는 코드 에디터창(340)에 출력된 스프라이트에 대응하는 코드에 입력값이 추가되는 경우, 입력값을 포함하는 함수를 자동완성으로 추출하여 함수자동완성 리스트가 출력되도록 한다. 코딩 교육 서비스 제공 장치(130)는 함수자동완성 리스트 중 선택된 함수를 스프라이트에 대응하는 코드에 반영하여 에디팅 코드로 처리한다.
코딩 교육 서비스 제공 장치(130)는 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 정적이거나 동적으로 움직이는 객체를 반영하여 스크린창(320) 상에 나타나도록 한다(S1040).
단계 S1040에서, 코딩 교육 서비스 제공 장치(130)는 스크린창(320)의 일측에 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 정적이거나 동적으로 움직이는 객체가 동작하도록 하는 소프트웨어적인 실행버튼(326)이 나타나도록 한다. 코딩 교육 서비스 제공 장치(130)는 실행버튼(326)에 대한 입력이 있는 경우, 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 한다.
코딩 교육 서비스 제공 장치(130)는 스크린창(320) 타측에 전체화면 버튼(322) 및 가로세로 전환버튼(324)이 나타나도록 한다. 코딩 교육 서비스 제공 장치(130)는 전체화면 버튼(322)에 대한 입력에 따라 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 하는 화면이 전체 화면으로 나타나도록 한다. 코딩 교육 서비스 제공 장치(130)는 가로세로 전환버튼(324)에 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 하는 화면이 가로화면에서 세로화면으로 전환되거나 세로화면에서 가로화면으로 전환되도록 한다.
코딩 교육 서비스 제공 장치(130)는 객체 스프라이트(358)에 대응하는 스프라이트 코드에 따라 정적이거나 동적으로 움직이는 객체에 반영하여 스크린창(320) 상에 나타나도록 한다. 코딩 교육 서비스 제공 장치(130)는 에디팅 코드에 따라 객체의 정적이거나 동적으로 움직임을 반영하여 스크린창(320)에 나타나도록 한다.
코딩 교육 서비스 제공 장치(130)는 코딩 튜토리얼 동영상 내에 포함된 코드와 관련된 API 및 코드 문법 설명을 API 함수창(330)에 출력되도록 한다(S1050). 단계 S1050에서, 코딩 교육 서비스 제공 장치(130)는 코딩과 관련된 움직임, 모양, 이벤트, 제어, 감지, 연산, 물리, 소리, 시간, 데이터 중 어느 하나에 따라 구분된 복수의 API를 포함하는 API 탭이 API 함수창(330)에 나타나도록 제어한다. 코딩 교육 서비스 제공 장치(130)는 복수의 API 중 선택된 API에 매칭된 복수의 코드 그룹이 API 함수창(330)에 나타나도록 제어한다. 코딩 교육 서비스 제공 장치(130)는 코드 그룹 중 선택된 코드에 매칭된 코드 문법이 API 함수창(330)에 설명되도록 한다.
코딩 교육 서비스 제공 장치(130)는 모바일 연동에 대한 입력이 있는 경우, 기 설정된 모바일 디바이스(114)와 연동하여 모바일 디바이스(114) 상에서 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있는 동작이 실행되도록 한다(S1060).
단계 S1060에서, 코딩 교육 서비스 제공 장치(130)는 스프라이트에 대응하는 코드 및 에디팅 코드에 모바일 디바이스에 특화된 제스쳐(터치 등)가 포함된 경우, 모바일 디바이스(114)의 실행에 의해 스프라이트에 대응하는 코드 및 에디팅 코드에 따라 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있는 동작에 문제가 없는지를 테스트한다.
코딩 교육 서비스 제공 장치(130)는 튜토리얼 동영상창(310)의 일측에 존재하는 네비게이션 박스(메뉴)에 입력이 있는 경우, 스프라이트에 대응하는 코드 및 에디팅 코드를 기 작성된 코드와 비교하여 오류를 검출한 오류 검출 결과를 생성한다. 코딩 교육 서비스 제공 장치(130)는 오류 검출 결과를 튜토리얼 동영상창(310) 및 코드 에디터창(340) 중 적어도 하나의 창에 출력되도록 한다(S1070).
단계 S1070에서, 코딩 교육 서비스 제공 장치(130)는 네비게이션 박스(메뉴)에 입력이 있을 때마다 입력중이거나 입력 완료된 스프라이트에 대응하는 코드 및 에디팅 코드를 기 작성된 코드와 비교하여 오류 검출 결과를 생성한다.
코딩 교육 서비스 제공 장치(130)는 오류 검출 결과에 포함된 오류 검출률을 산출하고, 오류 검출률에 대응하는 코드를 확인한다. 코딩 교육 서비스 제공 장치(130)는 오류 검출률을 분석하여 기 설정된 임계치 이상의 오류 검출률을 갖는 상위 오류 코드들을 선별한다. 코딩 교육 서비스 제공 장치(130)는 상위 오류 코드에 대응하는 코드 문법을 설명하는 오류 코드 튜토리얼 동영상을 제작하거나 오류 코드 샘플을 생성한다. 코딩 교육 서비스 제공 장치(130)는 오류 코드 튜토리얼 동영상을 코딩 튜토리얼 동영상에 반영하거나 추가 코딩 튜토리얼 동영상을 튜토리얼 동영상창(310)으로 출력한다.
코딩 교육 서비스 제공 장치(130)는 오류 코드 샘플을 스프라이트에 대응하는 코드 및 에디팅 코드 중 적어도 하나 이상의 코드에 반영하여 코드 에디터창(340)으로 출력한다.
코딩 교육 서비스 제공 장치(130)는 오류 검출률을 기반으로 코딩 난이도를 구분한다. 코딩 교육 서비스 제공 장치(130)는 학습자가 선택한 학습 과정을 확인한 후 코딩 난이도와 학습 과정이 매칭되는 경우에만 오류 코드 튜토리얼 동영상 또는 오류 코드 샘플을 출력하도록 한다.
코딩 교육 서비스 제공 장치(130)는 스프라이트에 대응하는 코드 및 에디팅 코드를 분석하여, 스프라이트에 대응하는 코드 및 에디팅 코드를 입력한 코드 입력 시간을 확인한다. 코딩 교육 서비스 제공 장치(130)는 코드 입력 시간이 기 설정된 임계치를 초과하는 경우, 오류 코드 튜토리얼 동영상 또는 오류 코드 샘플을 출력하도록 한다(S1080).
단계 S1080에서, 코딩 교육 서비스 제공 장치(130)는 오류 코드 샘플을 스프라이트에 대응하는 코드 및 에디팅 코드와 비교하여 차이점이 발생한 부분을 코드 에디터창(340)에 즉시 반영하여 출력되도록 한다.
코딩 교육 서비스 제공 장치(130)는 스프라이트에 대응하는 코드 및 에디팅 코드에 포함된 코드를 한줄씩 분석하는 것이 아니라 코드 전체를 분석하여 루프, 조건문, 동일 코드의 분야에 따른 상이한 적용 여부를 판단하여 학습자가 미입력한 코드를 추출하여 코드 에디터창(340)에 반영하도록 한다.
도 10에서는 단계 S1010 내지 단계 S1080을 순차적으로 실행하는 것으로 기재하고 있으나, 반드시 이에 한정되는 것은 아니다. 다시 말해, 도 10에 기재된 단계를 변경하여 실행하거나 하나 이상의 단계를 병렬적으로 실행하는 것으로 적용 가능할 것이므로, 도 10은 시계열적인 순서로 한정되는 것은 아니다.
전술한 바와 같이 도 10에 기재된 본 실시예에 따른 코딩 교육 서비스 제공 방법은 프로그램으로 구현되고 컴퓨터로 읽을 수 있는 기록매체에 기록될 수 있다. 본 실시예에 따른 코딩 교육 서비스 제공 방법을 구현하기 위한 프로그램이 기록되고 컴퓨터가 읽을 수 있는 기록매체는 컴퓨터 시스템에 의하여 읽혀질 수 있는 데이터가 저장되는 모든 종류의 기록장치를 포함한다.
이상의 설명은 본 실시예의 기술 사상을 예시적으로 설명한 것에 불과한 것으로서, 본 실시예가 속하는 기술 분야에서 통상의 지식을 가진 자라면 본 실시예의 본질적인 특성에서 벗어나지 않는 범위에서 다양한 수정 및 변형이 가능할 것이다. 따라서, 본 실시예들은 본 실시예의 기술 사상을 한정하기 위한 것이 아니라 설명하기 위한 것이고, 이러한 실시예에 의하여 본 실시예의 기술 사상의 범위가 한정되는 것은 아니다. 본 실시예의 보호 범위는 아래의 청구범위에 의하여 해석되어야 하며, 그와 동등한 범위 내에 있는 모든 기술 사상은 본 실시예의 권리범위에 포함되는 것으로 해석되어야 할 것이다.
112: 학습자 단말기 114: 모바일 디바이스
120: 네트워크 130: 코딩 교육 서비스 제공 장치
210: 튜토리얼 동영상 재생 제어부
212: 스프라이트 제어부
214: 코드 에디팅부
216: 스크린 재생 제어부
218: API 함수 제어부
220: 모바일 연동부
222: 오류 검출부 224: 가이드부
302: 프로젝트창
304: 새프로젝트 버튼 306: 프로젝트 그룹
310: 튜토리얼 동영상창
320: 스크린창 330: API 함수창
340: 코드 에디터창 350: 스프라이트 창
322: 전체화면버튼 324: 가로세로 전환버튼
326: 실행버튼
357: 씬그룹 355: 펼치기 버튼
351: 씬1 352: 씬2
353: 씬3 354: 씬4
356: 스프라이트 그룹
358: 객체 스프라이트
341: 애니메이션 버튼
342: 객체 애니메이션 그룹

Claims (19)

  1. 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법에 있어서, 상기 방법은 코딩 교육 서비스 제공 장치에 의해 수행되고, 상기 방법은,
    코딩(Coding)에 관련된 코딩 튜토리얼 동영상을 튜토리얼 동영상창으로 출력하는 튜토리얼 동영상 재생과정;
    상기 코딩 튜토리얼 동영상 내에 포함된 코드들을 기 설정된 탬플릿 단위로 포함하는 스프라이트들을 스프라이트창으로 출력하는 스프라이트 제어과정;
    상기 스프라이트창 내에 존재하는 씬(Scene)별 기 생성된 복수의 스프라이트 중 선택된 스프라이트에 대응하는 코드들을 코드 에디터창으로 출력되도록 하며, 학습 단말기로부터 입력된 명령에 의해 상기 스프라이트에 대응하는 코드를 에디팅한 에디팅 코드를 상기 코드 에디터창에 반영하는 코드 에디팅 과정;
    상기 스프라이트에 대응하는 코드 및 상기 에디팅 코드에 따라 정적이거나 동적으로 움직이는 객체와 캐릭터를 반영하여 스크린창 상에 나타나도록 하는 스크린 재생과정; 및
    상기 코딩 튜토리얼 동영상 내에 포함된 코드와 관련된 API 및 코드 문법 설명을 API 함수창에 출력되도록 하는 API 함수 제어과정을 포함하고,
    상기 코드 에디팅 과정에서,
    상기 정적이거나 동적으로 움직이는 객체와 캐릭터, 사운드, 텍스트, 배경을 포함하는 복수의 스프라이트로 이루어진 스프라이트 그룹을 생성하고, 상기 학습 단말기에 의해 제1 스프라이트를 상기 스프라이트 그룹에 추가하고, 상기 추가된 제1 스프라이트의 위치를 변경하고, 제2 스프라이트를 상기 스프라이트 그룹에서 삭제하고
    상기 API 함수 제어과정은,
    상기 스프라이트 그룹에서 선택된 스프라이트에 대응하는 코드들의 코딩과 관련된 움직임, 모양, 이벤트, 제어, 감지, 연산, 물리, 소리, 시간, 데이터 중 어느 하나에 따라 구분된 복수의 API를 포함하는 API 탭이 상기 API 함수창에 나타나도록 제어하며,
    상기 API 탭 내의 어느 하나의 함수가 선택되면, 이벤트 관련 코드들이 출력되도록 제어하고,
    상기 이벤트 관련 코드들 중 해당 코드로 커서가 이동된 경우, 상기 해당 코드에 대한 코드 문법 설명이 출력되도록 제어하는 것을 특징으로 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법.
  2. 제1항에 있어서,
    상기 스크린 재생과정은,
    상기 스크린창의 일측에 상기 스프라이트에 대응하는 코드 및 상기 에디팅 코드에 따라 정적이거나 동적으로 움직이는 객체가 동작하도록 하는 소프트웨어적인 실행버튼이 나타나도록 하며,
    상기 실행버튼에 대한 입력이 있는 경우, 상기 스프라이트에 대응하는 코드 및 상기 에디팅 코드에 따라 상기 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 하는 것을 특징으로 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법.
  3. 제2항에 있어서,
    상기 스크린 재생과정은,
    상기 스크린창의 타측에 전체화면 버튼 및 가로세로 전환버튼이 나타나도록 하며,
    상기 전체화면 버튼에 대한 입력에 따라 상기 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 하는 화면이 전체 화면으로 나타나도록 하며,
    상기 가로세로 전환버튼에 상기 스프라이트들을 조합하여 소프트웨어적으로 연결되어 있어 동작하도록 하는 화면이 가로화면에서 세로화면으로 전환되거나 상기 세로화면에서 상기 가로화면으로 전환되도록 하는 것을 특징으로 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법.
  4. 삭제
  5. 삭제
  6. 제1항에 있어서,
    상기 스프라이트 제어과정은,
    상기 튜토리얼 동영상 재생과정에서 쳅터별로 재생되는 상기 코딩 튜토리얼 동영상의 쳅터별 특정 시점이 도래하는 경우, 상기 스프라이트 제어과정에서 씬(Scene)별 기 생성된 복수의 스프라이트 중 상기 쳅터별 특정 시점에 매칭된 스프라이트만을 추출하여 상기 스프라이트창에 출력되도록 하는 것을 특징으로 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법.
  7. 제1항에 있어서,
    상기 스프라이트 제어과정은,
    하나의 프로젝트에 대해 적어도 하나 이상의 씬을 포함하는 씬그룹이 상기 스프라이트창의 일측에 출력되도록 하며, 상기 씬그룹에 포함되는 적어도 하나 이상의 스프라이트를 포함하는 스프라이트 그룹이 상기 스프라이트창의 타측에 출력되도록 하는 것을 특징으로 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법.
  8. 제7항에 있어서,
    상기 스프라이트 제어과정은 상기 씬그룹 중 선택된 특정 씬에 대응하는 스프라이트만을 추출하여 상기 스프라이트창의 타측에 출력되도록 하며,
    상기 코드 에디팅 과정은 특정 씬에 대응하는 스프라이트 중 선택된 객체 스프라이트에 대응하는 스프라이트 코드를 상기 코드 에디터창에 출력되도록 하며, 학습 단말기로부터 입력된 명령에 의해 상기 스프라이트 코드가 에디팅되면, 상기 스프라이트 코드를 에디팅한 상기 에디팅 코드를 상기 코드 에디터창에 출력하며,
    상기 스크린 재생과정은 스프라이트 코드에 따라 정적이거나 동적으로 움직이는 객체를 반영하여 상기 스크린창 상에 나타나도록 하며, 상기 에디팅 코드에 따라 상기 객체의 정적이거나 동적으로 움직임을 반영하여 상기 스크린창에 나타나도록 하는 것을 특징으로 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법.
  9. 제8항에 있어서,
    상기 코드 에디팅 과정은
    특정 씬에 대응하는 스프라이트 중 선택된 객체 스프라이트에 대응하는 스프라이트 코드를 상기 코드 에디터창의 일측에 출력되도록 하며, 상기 코드 에디터창의 타측에 상기 스프라이트 코드에 대응하는 애니메이션이 나타나도록 하는 애니메이션 버튼이 나타나도록 하며, 상기 애니메이션 버튼에 대한 입력이 있는 경우, 상기 스프라이트 코드에 대응하는 객체 애니메이션이 나타나도록 하는 객체 애니메이션 그룹이 상기 코드 에디터창 내에 나타나도록 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법.
  10. 삭제
  11. 제1항에 있어서,
    상기 코드 에디팅 과정은
    상기 코드 에디터창에 출력된 상기 스프라이트에 대응하는 코드에 입력값이 추가되는 경우, 상기 입력값을 포함하는 함수를 자동완성으로 추출하여 함수자동완성 리스트가 출력되도록 하며, 상기 함수자동완성 리스트 중 선택된 함수를 상기 스프라이트에 대응하는 코드에 반영하여 상기 에디팅 코드로 처리하는 것을 특징으로 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법.
  12. 삭제
  13. 삭제
  14. 삭제
  15. 삭제
  16. 삭제
  17. 삭제
  18. 삭제
  19. 코딩(Coding)에 관련된 코딩 튜토리얼 동영상을 튜토리얼 동영상창으로 출력하는 튜토리얼 동영상 재생 제어부;
    상기 코딩 튜토리얼 동영상 내에 포함된 코드들을 기 설정된 탬플릿 단위로 포함하는 스프라이트들을 스프라이트창으로 출력하는 스프라이트 제어부;
    상기 스프라이트창 내에 존재하는 씬(Scene)별 기 생성된 복수의 스프라이트 중 선택된 스프라이트에 대응하는 코드들을 코드 에디터창으로 출력되도록 하며, 학습 단말기로부터 입력된 명령에 의해가 상기 스프라이트에 대응하는 코드를 에디팅한 에디팅 코드를 상기 코드 에디터창에 반영하는 코드 에디팅부;
    상기 스프라이트에 대응하는 코드 및 상기 에디팅 코드에 따라 정적이거나 동적으로 움직이는 객체와 캐릭터를 반영하여 스크린창 상에 나타나도록 하는 스크린 재생부; 및
    상기 코딩 튜토리얼 동영상 내에 포함된 코드와 관련된 API 및 코드 문법 설명을 API 함수창에 출력되도록 하는 API 함수 제어부를 포함하고,
    상기 코드 에디팅부는,
    상기 정적이거나 동적으로 움직이는 객체와 캐릭터, 사운드, 텍스트, 배경을 포함하는 복수의 스프라이트로 이루어진 스프라이트 그룹을 생성하고, 상기 학습 단말기에 의해 제1 스프라이트를 상기 스프라이트 그룹에 추가하고, 상기 추가된 제1 스프라이트의 위치를 변경하고, 제2 스프라이트를 상기 스프라이트 그룹에서 삭제하고
    상기 API 함수 제어부는,
    상기 스프라이트 그룹에서 선택된 스프라이트에 대응하는 코드들의 코딩과 관련된 움직임, 모양, 이벤트, 제어, 감지, 연산, 물리, 소리, 시간, 데이터 중 어느 하나에 따라 구분된 복수의 API를 포함하는 API 탭이 상기 API 함수창에 나타나도록 제어하며,
    상기 API 탭 내의 어느 하나의 함수가 선택되면, 이벤트 관련 코드들이 출력되도록 제어하고,
    상기 이벤트 관련 코드들 중 해당 코드로 커서가 이동된 경우, 상기 해당 코드에 대한 코드 문법 설명이 출력되도록 제어하는 것을 특징으로 하는 모바일에서 연동 가능한 코딩 교육 서비스 제공 장치.
KR1020190017410A 2019-02-14 2019-02-14 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치 KR102224785B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020190017410A KR102224785B1 (ko) 2019-02-14 2019-02-14 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020190017410A KR102224785B1 (ko) 2019-02-14 2019-02-14 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치

Publications (2)

Publication Number Publication Date
KR20200099428A KR20200099428A (ko) 2020-08-24
KR102224785B1 true KR102224785B1 (ko) 2021-03-08

Family

ID=72235308

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020190017410A KR102224785B1 (ko) 2019-02-14 2019-02-14 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치

Country Status (1)

Country Link
KR (1) KR102224785B1 (ko)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20220405062A1 (en) * 2021-06-21 2022-12-22 International Business Machines Corporation Software code integration from a media file

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR102284862B1 (ko) * 2020-09-29 2021-08-02 주식회사 로보그램 프로그래밍 교육을 위한 화상 콘텐츠 제공 방법
KR102414065B1 (ko) * 2020-10-07 2022-06-28 주식회사 팔칠구삼 아두이노의 코딩 교육 시스템
KR102547351B1 (ko) * 2020-11-16 2023-06-23 주식회사 비피 Diy 전자 키트를 통한 코딩 소스 교육 플랫폼 시스템
JP7331071B2 (ja) * 2021-12-03 2023-08-22 株式会社バンダイ ゲームプログラムを作成するためのサービスを提供するためのシステム、プログラム、方法及び情報処理装置

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160357432A1 (en) * 2015-06-05 2016-12-08 Apple Inc. Touch-based interactive learning environment
KR101908939B1 (ko) * 2017-08-03 2018-10-17 노상민 코딩 교육 서비스 방법 및 이를 수행하기 위한 장치

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20120003709A (ko) * 2010-07-05 2012-01-11 에스케이 텔레콤주식회사 학습 관리 서비스 시스템 및 방법
KR101639301B1 (ko) * 2013-10-31 2016-07-13 삼성에스디에스 주식회사 온라인 코딩 학습 방법, 서버 및 그 시스템
KR20180051925A (ko) 2016-11-09 2018-05-17 주식회사 코드잇 교육 서버

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160357432A1 (en) * 2015-06-05 2016-12-08 Apple Inc. Touch-based interactive learning environment
KR101908939B1 (ko) * 2017-08-03 2018-10-17 노상민 코딩 교육 서비스 방법 및 이를 수행하기 위한 장치

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20220405062A1 (en) * 2021-06-21 2022-12-22 International Business Machines Corporation Software code integration from a media file
US11714610B2 (en) * 2021-06-21 2023-08-01 International Business Machines Corporation Software code integration from a media file

Also Published As

Publication number Publication date
KR20200099428A (ko) 2020-08-24

Similar Documents

Publication Publication Date Title
KR102224785B1 (ko) 모바일에서 연동 가능한 코딩 교육 서비스 제공 방법 및 장치
US11087134B2 (en) Augmented reality smartglasses for use at cultural sites
US11463611B2 (en) Interactive application adapted for use by multiple users via a distributed computer-based system
US8261177B2 (en) Generating media presentations
US20120107790A1 (en) Apparatus and method for authoring experiential learning content
US11528535B2 (en) Video file playing method and apparatus, and storage medium
CN107423049A (zh) 实现在线编程的方法、浏览器和终端设备
EP4376423A1 (en) Virtual object interaction method and device, and storage medium and computer program product
KR101831802B1 (ko) 적어도 하나의 시퀀스에 대한 가상현실 컨텐츠 제작방법 및 장치
CN109391848B (zh) 一种互动广告系统
WO2023231989A1 (zh) 线上课堂的教学互动方法、装置、设备及介质
JP2022500795A (ja) アバターアニメーション
CN111862280A (zh) 虚拟角色控制方法、系统、介质及电子设备
KR102620284B1 (ko) 메타버스 기반 교육 플랫폼 서비스 제공 시스템
KR101594861B1 (ko) 애니메이션 협업 제작 서비스를 제공하는 웹서버 및 그방법
CN111167119B (zh) 一种游戏开发展示方法、装置、设备及存储介质
Walczak et al. Dynamic creation of interactive mixed reality presentations
CN116719462A (zh) 互动管理装置、互动管理方法及相关装置
CN110604918B (zh) 界面元素调整方法与装置、存储介质、电子设备
KR20200078944A (ko) 게임형 온라인 코딩 교육 제공 방법
KR102584076B1 (ko) 예술과 기술의 융합 교육을 위한 가상 스테이지에서의 아바타 제공 장치 및 방법
KR102265102B1 (ko) 키네틱 타이포그래피가 적용된 자막에 대한 편집방법 및 그 전자장치
Soo Implementation of temporal typography system
JP2001195604A (ja) 動画像情報の編集方法
KR102245064B1 (ko) 교육용 프로그램 코딩 방법

Legal Events

Date Code Title Description
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant