KR102527617B1 - Ｈｔｍｌ５ 기반 이러닝 콘텐츠 제작 서비스 제공 시스템 - Google Patents
Ｈｔｍｌ５ 기반 이러닝 콘텐츠 제작 서비스 제공 시스템 Download PDFInfo
- Publication number
- KR102527617B1 KR102527617B1 KR1020210135065A KR20210135065A KR102527617B1 KR 102527617 B1 KR102527617 B1 KR 102527617B1 KR 1020210135065 A KR1020210135065 A KR 1020210135065A KR 20210135065 A KR20210135065 A KR 20210135065A KR 102527617 B1 KR102527617 B1 KR 102527617B1
- Authority
- KR
- South Korea
- Prior art keywords
- learning
- video
- html5
- content
- service providing
- Prior art date
Links
- 238000004519 manufacturing process Methods 0.000 claims abstract description 62
- 238000007726 management method Methods 0.000 claims description 20
- 230000002452 interceptive effect Effects 0.000 claims description 10
- 238000004458 analytical method Methods 0.000 claims description 3
- 230000008859 change Effects 0.000 claims description 2
- 238000012854 evaluation process Methods 0.000 claims 1
- 238000000926 separation method Methods 0.000 claims 1
- 238000000034 method Methods 0.000 description 24
- 230000006870 function Effects 0.000 description 12
- 238000004891 communication Methods 0.000 description 11
- 230000008569 process Effects 0.000 description 8
- 238000010586 diagram Methods 0.000 description 6
- 230000003993 interaction Effects 0.000 description 6
- 238000011156 evaluation Methods 0.000 description 5
- 238000003860 storage Methods 0.000 description 5
- 238000011161 development Methods 0.000 description 4
- 239000000463 material Substances 0.000 description 3
- 239000000203 mixture Substances 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012549 training Methods 0.000 description 3
- 230000001413 cellular effect Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000013507 mapping Methods 0.000 description 2
- 238000010295 mobile communication Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 230000002194 synthesizing effect Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000004040 coloring Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 238000003384 imaging method Methods 0.000 description 1
- 238000007373 indentation Methods 0.000 description 1
- 238000007689 inspection Methods 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000002250 progressing effect Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000007474 system interaction Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
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
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/34—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment
- G06F11/3438—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment monitoring of user actions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/901—Indexing; Data structures therefor; Storage structures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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
- G06F3/04842—Selection of displayed objects or displayed text elements
-
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/106—Display of layout of documents; Previewing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- 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
- G10—MUSICAL INSTRUMENTS; ACOUSTICS
- G10L—SPEECH ANALYSIS TECHNIQUES OR SPEECH SYNTHESIS; SPEECH RECOGNITION; SPEECH OR VOICE PROCESSING TECHNIQUES; SPEECH OR AUDIO CODING OR DECODING
- G10L13/00—Speech synthesis; Text to speech systems
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Business, Economics & Management (AREA)
- Databases & Information Systems (AREA)
- Tourism & Hospitality (AREA)
- Human Computer Interaction (AREA)
- Software Systems (AREA)
- Health & Medical Sciences (AREA)
- Educational Technology (AREA)
- Strategic Management (AREA)
- General Health & Medical Sciences (AREA)
- Human Resources & Organizations (AREA)
- Educational Administration (AREA)
- Data Mining & Analysis (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- Economics (AREA)
- Marketing (AREA)
- Primary Health Care (AREA)
- General Business, Economics & Management (AREA)
- Multimedia (AREA)
- Acoustics & Sound (AREA)
- Artificial Intelligence (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Electrically Operated Instructional Devices (AREA)
Abstract
HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템이 제공되며, 시작하기, 학습하기, 평가하기 및 정리하기를 포함하는 학습진행단계 메뉴를 선택하고, 텍스트, 이미지 및 동영상 중 적어도 하나를 입력한 후 학습 동영상인 이러닝 콘텐츠를 생성하는 사용자 단말 및 학습진행단계에 따라 이러닝 콘텐츠를 시작하기, 학습하기, 평가하기 및 정리하기의 상위메뉴 및 하위메뉴를 설정하는 설정부, 각 메뉴별 입력되는 텍스트, 이미지 및 동영상이 입력되는 제작 페이지를 제공하는 툴제공부, 사용자 단말에서 각 학습진행단계 메뉴를 선택한 후 텍스트, 이미지 및 동영상 중 적어도 하나를 입력하는 경우, 학습진행단계에 따른 페이지 순번대로 텍스트, 이미지 및 동영상이 적어도 하나의 프레임에 입력되어 생성된 이러닝 콘텐츠를 출력하는 제작부를 포함하는 제작 서비스 제공 서버를 포함한다.
Description
본 발명은 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템에 관한 것으로, 하나의 동영상을 이루는 각 페이지를 순번대로 정해두고 각 페이지에 텍스트, 이미지 및 동영상을 입력하면 하나의 동영상이 완성될 수 있는 시스템을 제공한다.
이러닝(E-Learning)으로 대표되는 상호작용 콘텐츠에서 멀티미디어와 사용자 조작 기능은 범용적으로 사용되는 콘텐츠 구성 요소이다. 이러닝 콘텐츠를 사용자 중심으로 상호작용유형을 구분하면, 상호작용 유형 중 사용자와 콘텐츠 간의 상호작용과 사용자와 시스템 간의 상호작용은 콘텐츠에 포함된 동적 조작 기능과 연관된다. 멀티미디어 플레이어, 퀴즈 및 정오답 확인, 드래그 앤 드랍, 클릭 또는 터치, 텍스트 입력, 선 그리기, 색칠하기 등과 같은 사용자 조작과 이와 연계된 다양한 활동과 게임 등이 활용된다. 사용자 조작 결과에 따라 콘텐츠의 변경, 다음 학습의 연결, 보상 피드백 등은 시스템 상호작용으로 진행될 수 있다. 오락성이 강한 콘텐츠와는 다르게 교육, 설문, 투표, 마케팅과 같은 특정 분야에서는 목적에 부합하는 콘텐츠 제작과 서비스를 위하여 사용자 조작과 같은 직접적인 상호작용이 필요하다. 사용자 조작 과정에서 수집되는 유의미한 사용자 데이터는 다양한 피드백 자료로 활용 가능하다.
이때, HTML5을 이용하여 교육 콘텐츠를 제작하기 위한 툴이 연구 및 개발되었는데, 이와 관련하여, 선행기술인 한국공개특허 제2015-0014720호(2015년02월09일 공개) 및 한국공개특허 제2015-0010284호(2015년01월28일 공개)에는, 교육 동영상 지원을 위하여 사용자 단말에서 HTML5 기반 교육동영상을 요청하면, 브라우저가 지원하는 비디오 포맷을 확인한 후, 확인된 비디오 포맷으로 교육 동영상을 변환하며, 변환된 교육 동영상을 사용자 단말로 전송되도록 제어하는 구성과, 교수자가 선택한 차시별 또는 과정별 템플릿을 기초로 HTML5 기반 이러닝 콘텐츠를, 이미지나 동영상을 포함하는 콘텐츠 리소스 파일을 이용하여 쉽게 저작할 수 있으며, 학습관리시스템에 탑재가능한 콘텐츠를 손 쉽게 제작할 수 있는 구성이 각각 개시되어 있다.
다만, 전자의 구성은 기 제작된 교육동영상을 포맷에 맞게 트랜스코딩하여 보내주는 구성일 뿐 콘텐츠 자체를 제작하는 구성이 아니다. 후자의 경우에도 템플릿을 이용하여 각 리소스 파일을 배치하는 구성일 뿐, 교수자가 원하는 학습자료를 동영상에 합성하여 보여주는 전체 영상유형 콘텐츠나, 녹화된 강의 동영상의 일부에 학습자료나 도표 등을 학습하여 보여주는 부분 영상유형 콘텐츠 또는 PPT 파일과 같은 학습자료를 화면 전체에 띄우고 음성만 합성하는 사운드 유형 콘텐츠를 포함하는 HTML5 상호작용 콘텐츠를 제작하는 구성이 아니다. 또, HTML5 기술 인력 확보와 서비스 시스템 고도화 등에 따른 시간적, 비용적 문제로 단기간 내에 플래시와 유사 수준의 HTML5 상호작용형 콘텐츠의 개발환경의 활성화는 어렵다. 이에, HTML5 기반 콘텐츠를 제작할 수 있는 플랫폼의 연구 및 개발이 요구된다.
본 발명의 일 실시예는, HTML5 기반 이러닝 콘텐츠를 제작할 수 있도록 하나의 동영상 내 포함되는 시작하기, 학습하기, 평가하기 및 정리하기를 페이지 ID에 매핑되도록 페이지 순번 및 페이지 타입을 저장하고, 각 페이지 타입별로 입력되는 구성요소를 미리 정의함으로써 사용자는 사용자 인터페이스를 이용하여 텍스트를 입력하거나 이미지나 동영상의 경우 URL 또는 파일을 업로드하는 방식으로 입력만 하면, 동영상을 합성하거나 랜더링하는 과정을 거치지 않아도 바로 학습을 위한 동영상인 이러닝 콘텐츠가 생성될 수 있으며, 동영상 강의가 시작되기 이전 및 이후의 페이지에 음성을 합성하는 사운드 유형 콘텐츠와 같은 HTML5 상호작용 콘텐츠를 전문가가 아닌 일반인이라도 제작할 수 있도록 하는, HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템을 제공할 수 있다. 다만, 본 실시예가 이루고자 하는 기술적 과제는 상기된 바와 같은 기술적 과제로 한정되지 않으며, 또 다른 기술적 과제들이 존재할 수 있다.
상술한 기술적 과제를 달성하기 위한 기술적 수단으로서, 본 발명의 일 실시예는, 시작하기, 학습하기, 평가하기 및 정리하기를 포함하는 학습진행단계 메뉴를 선택하고, 텍스트, 이미지 및 동영상 중 적어도 하나를 입력한 후 학습 동영상인 이러닝 콘텐츠를 생성하는 사용자 단말 및 학습진행단계에 따라 이러닝 콘텐츠를 시작하기, 학습하기, 평가하기 및 정리하기의 상위메뉴 및 하위메뉴를 설정하는 설정부, 각 메뉴별 입력되는 텍스트, 이미지 및 동영상이 입력되는 제작 페이지를 제공하는 툴제공부, 사용자 단말에서 각 학습진행단계 메뉴를 선택한 후 텍스트, 이미지 및 동영상 중 적어도 하나를 입력하는 경우, 학습진행단계에 따른 페이지 순번대로 텍스트, 이미지 및 동영상이 적어도 하나의 프레임에 입력되어 생성된 이러닝 콘텐츠를 출력하는 제작부를 포함하는 제작 서비스 제공 서버를 포함한다.
전술한 본 발명의 과제 해결 수단 중 어느 하나에 의하면, HTML5 기반 이러닝 콘텐츠를 제작할 수 있도록 하나의 동영상 내 포함되는 시작하기, 학습하기, 평가하기 및 정리하기를 페이지 ID에 매핑되도록 페이지 순번 및 페이지 타입을 저장하고, 각 페이지 타입별로 입력되는 구성요소를 미리 정의함으로써 사용자는 사용자 인터페이스를 이용하여 텍스트를 입력하거나 이미지나 동영상의 경우 URL 또는 파일을 업로드하는 방식으로 입력만 하면, 동영상을 합성하거나 랜더링하는 과정을 거치지 않아도 바로 학습을 위한 동영상인 이러닝 콘텐츠가 생성될 수 있으며, 동영상 강의가 시작되기 이전 및 이후의 페이지에 음성을 합성하는 사운드 유형 콘텐츠와 같은 HTML5 상호작용 콘텐츠를 전문가가 아닌 일반인이라도 제작할 수 있도록 한다.
도 1은 본 발명의 일 실시예에 따른 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템을 설명하기 위한 도면이다.
도 2는 도 1의 시스템에 포함된 제작 서비스 제공 서버를 설명하기 위한 블록 구성도이다.
도 3 및 도 4는 본 발명의 일 실시예에 따른 HTML5 기반 이러닝 콘텐츠 제작 서비스가 구현된 일 실시예를 설명하기 위한 도면이다.
도 5는 본 발명의 일 실시예에 따른 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 방법을 설명하기 위한 동작 흐름도이다.
도 2는 도 1의 시스템에 포함된 제작 서비스 제공 서버를 설명하기 위한 블록 구성도이다.
도 3 및 도 4는 본 발명의 일 실시예에 따른 HTML5 기반 이러닝 콘텐츠 제작 서비스가 구현된 일 실시예를 설명하기 위한 도면이다.
도 5는 본 발명의 일 실시예에 따른 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 방법을 설명하기 위한 동작 흐름도이다.
아래에서는 첨부한 도면을 참조하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 본 발명의 실시예를 상세히 설명한다. 그러나 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 도면 부호를 붙였다.
명세서 전체에서, 어떤 부분이 다른 부분과 "연결"되어 있다고 할 때, 이는 "직접적으로 연결"되어 있는 경우뿐 아니라, 그 중간에 다른 소자를 사이에 두고 "전기적으로 연결"되어 있는 경우도 포함한다. 또한 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있는 것을 의미하며, 하나 또는 그 이상의 다른 특징이나 숫자, 단계, 동작, 구성요소, 부분품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.
명세서 전체에서 사용되는 정도의 용어 "약", "실질적으로" 등은 언급된 의미에 고유한 제조 및 물질 허용오차가 제시될 때 그 수치에서 또는 그 수치에 근접한 의미로 사용되고, 본 발명의 이해를 돕기 위해 정확하거나 절대적인 수치가 언급된 개시 내용을 비양심적인 침해자가 부당하게 이용하는 것을 방지하기 위해 사용된다. 본 발명의 명세서 전체에서 사용되는 정도의 용어 "~(하는) 단계" 또는 "~의 단계"는 "~ 를 위한 단계"를 의미하지 않는다.
본 명세서에 있어서 '부(部)'란, 하드웨어에 의해 실현되는 유닛(unit), 소프트웨어에 의해 실현되는 유닛, 양방을 이용하여 실현되는 유닛을 포함한다. 또한, 1 개의 유닛이 2 개 이상의 하드웨어를 이용하여 실현되어도 되고, 2 개 이상의 유닛이 1 개의 하드웨어에 의해 실현되어도 된다. 한편, '~부'는 소프트웨어 또는 하드웨어에 한정되는 의미는 아니며, '~부'는 어드레싱 할 수 있는 저장 매체에 있도록 구성될 수도 있고 하나 또는 그 이상의 프로세서들을 재생시키도록 구성될 수도 있다. 따라서, 일 예로서 '~부'는 소프트웨어 구성요소들, 객체 지향 소프트웨어 구성요소들, 클래스 구성요소들 및 태스크 구성요소들과 같은 구성요소들과, 프로세스들, 함수들, 속성들, 프로시저들, 서브루틴들, 프로그램 코드의 세그먼트들, 드라이버들, 펌웨어, 마이크로코드, 회로, 데이터, 데이터베이스, 데이터 구조들, 테이블들, 어레이들 및 변수들을 포함한다. 구성요소들과 '~부'들 안에서 제공되는 기능은 더 작은 수의 구성요소들 및 '~부'들로 결합되거나 추가적인 구성요소들과 '~부'들로 더 분리될 수 있다. 뿐만 아니라, 구성요소들 및 '~부'들은 디바이스 또는 보안 멀티미디어카드 내의 하나 또는 그 이상의 CPU들을 재생시키도록 구현될 수도 있다.
본 명세서에 있어서 단말, 장치 또는 디바이스가 수행하는 것으로 기술된 동작이나 기능 중 일부는 해당 단말, 장치 또는 디바이스와 연결된 서버에서 대신 수행될 수도 있다. 이와 마찬가지로, 서버가 수행하는 것으로 기술된 동작이나 기능 중 일부도 해당 서버와 연결된 단말, 장치 또는 디바이스에서 수행될 수도 있다.
본 명세서에서 있어서, 단말과 매핑(Mapping) 또는 매칭(Matching)으로 기술된 동작이나 기능 중 일부는, 단말의 식별 정보(Identifying Data)인 단말기의 고유번호나 개인의 식별정보를 매핑 또는 매칭한다는 의미로 해석될 수 있다.
이하 첨부된 도면을 참고하여 본 발명을 상세히 설명하기로 한다.
도 1은 본 발명의 일 실시예에 따른 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템을 설명하기 위한 도면이다. 도 1을 참조하면, HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템(1)은, 적어도 하나의 사용자 단말(100), 제작 서비스 제공 서버(300) 및 적어도 하나의 학생 단말(400)을 포함할 수 있다. 다만, 이러한 도 1의 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템(1)은, 본 발명의 일 실시예에 불과하므로, 도 1을 통하여 본 발명이 한정 해석되는 것은 아니다.
이때, 도 1의 각 구성요소들은 일반적으로 네트워크(Network, 200)를 통해 연결된다. 예를 들어, 도 1에 도시된 바와 같이, 적어도 하나의 사용자 단말(100)은 네트워크(200)를 통하여 제작 서비스 제공 서버(300)와 연결될 수 있다. 그리고, 제작 서비스 제공 서버(300)는, 네트워크(200)를 통하여 적어도 하나의 사용자 단말(100), 적어도 하나의 학생 단말(400)과 연결될 수 있다. 또한, 적어도 하나의 학생 단말(400)은, 네트워크(200)를 통하여 제작 서비스 제공 서버(300)와 연결될 수 있다.
여기서, 네트워크는, 복수의 단말 및 서버들과 같은 각각의 노드 상호 간에 정보 교환이 가능한 연결 구조를 의미하는 것으로, 이러한 네트워크의 일 예에는 근거리 통신망(LAN: Local Area Network), 광역 통신망(WAN: Wide Area Network), 인터넷(WWW: World Wide Web), 유무선 데이터 통신망, 전화망, 유무선 텔레비전 통신망 등을 포함한다. 무선 데이터 통신망의 일례에는 3G, 4G, 5G, 3GPP(3rd Generation Partnership Project), 5GPP(5th Generation Partnership Project), LTE(Long Term Evolution), WIMAX(World Interoperability for Microwave Access), 와이파이(Wi-Fi), 인터넷(Internet), LAN(Local Area Network), Wireless LAN(Wireless Local Area Network), WAN(Wide Area Network), PAN(Personal Area Network), RF(Radio Frequency), 블루투스(Bluetooth) 네트워크, NFC(Near-Field Communication) 네트워크, 위성 방송 네트워크, 아날로그 방송 네트워크, DMB(Digital Multimedia Broadcasting) 네트워크 등이 포함되나 이에 한정되지는 않는다.
하기에서, 적어도 하나의 라는 용어는 단수 및 복수를 포함하는 용어로 정의되고, 적어도 하나의 라는 용어가 존재하지 않더라도 각 구성요소가 단수 또는 복수로 존재할 수 있고, 단수 또는 복수를 의미할 수 있음은 자명하다 할 것이다. 또한, 각 구성요소가 단수 또는 복수로 구비되는 것은, 실시예에 따라 변경가능하다 할 것이다.
적어도 하나의 사용자 단말(100)은, HTML5 기반 이러닝 콘텐츠 제작 서비스 관련 웹 페이지, 앱 페이지, 프로그램 또는 애플리케이션을 이용하여 이러닝 콘텐츠를 제작하는 관리자, 교수자, 제작자 등의 단말일 수 있다.
여기서, 적어도 하나의 사용자 단말(100)은, 네트워크를 통하여 원격지의 서버나 단말에 접속할 수 있는 컴퓨터로 구현될 수 있다. 여기서, 컴퓨터는 예를 들어, 네비게이션, 웹 브라우저(WEB Browser)가 탑재된 노트북, 데스크톱(Desktop), 랩톱(Laptop) 등을 포함할 수 있다. 이때, 적어도 하나의 사용자 단말(100)은, 네트워크를 통해 원격지의 서버나 단말에 접속할 수 있는 단말로 구현될 수 있다. 적어도 하나의 사용자 단말(100)은, 예를 들어, 휴대성과 이동성이 보장되는 무선 통신 장치로서, 네비게이션, PCS(Personal Communication System), GSM(Global System for Mobile communications), PDC(Personal Digital Cellular), PHS(Personal Handyphone System), PDA(Personal Digital Assistant), IMT(International Mobile Telecommunication)-2000, CDMA(Code Division Multiple Access)-2000, W-CDMA(W-Code Division Multiple Access), Wibro(Wireless Broadband Internet) 단말, 스마트폰(Smartphone), 스마트 패드(Smartpad), 타블렛 PC(Tablet PC) 등과 같은 모든 종류의 핸드헬드(Handheld) 기반의 무선 통신 장치를 포함할 수 있다.
제작 서비스 제공 서버(300)는, HTML5 기반 이러닝 콘텐츠 제작 서비스 웹 페이지, 앱 페이지, 프로그램 또는 애플리케이션을 제공하는 서버일 수 있다. 그리고, 제작 서비스 제공 서버(300)는, 하나의 동영상을 이루는 적어도 하나의 페이지를 설정한 후 각 페이지별 입력되는 텍스트, 이미지 및 동영상이 배치 및 재생되어야 할 위치 등을 데이터베이스화하여 저장하는 서버일 수 있다. 제작 서비스 제공 서버(300)는, 사용자 단말(100)에서 각 페이지별 텍스트, 이미지 및 동영상을 입력하면 이를 이용하여 동영상, 즉 이러닝 콘텐츠를 생성하는 서버일 수 있다.
여기서, 제작 서비스 제공 서버(300)는, 네트워크를 통하여 원격지의 서버나 단말에 접속할 수 있는 컴퓨터로 구현될 수 있다. 여기서, 컴퓨터는 예를 들어, 네비게이션, 웹 브라우저(WEB Browser)가 탑재된 노트북, 데스크톱(Desktop), 랩톱(Laptop) 등을 포함할 수 있다.
적어도 하나의 학생 단말(400)은, HTML5 기반 이러닝 콘텐츠 제작 서비스 관련 웹 페이지, 앱 페이지, 프로그램 또는 애플리케이션을 이용하여 이러닝 콘텐츠를 재생하는 학생의 단말일 수 있다.
여기서, 적어도 하나의 학생 단말(400)은, 네트워크를 통하여 원격지의 서버나 단말에 접속할 수 있는 컴퓨터로 구현될 수 있다. 여기서, 컴퓨터는 예를 들어, 네비게이션, 웹 브라우저(WEB Browser)가 탑재된 노트북, 데스크톱(Desktop), 랩톱(Laptop) 등을 포함할 수 있다. 이때, 적어도 하나의 학생 단말(400)은, 네트워크를 통해 원격지의 서버나 단말에 접속할 수 있는 단말로 구현될 수 있다. 적어도 하나의 학생 단말(400)은, 예를 들어, 휴대성과 이동성이 보장되는 무선 통신 장치로서, 네비게이션, PCS(Personal Communication System), GSM(Global System for Mobile communications), PDC(Personal Digital Cellular), PHS(Personal Handyphone System), PDA(Personal Digital Assistant), IMT(International Mobile Telecommunication)-2000, CDMA(Code Division Multiple Access)-2000, W-CDMA(W-Code Division Multiple Access), Wibro(Wireless Broadband Internet) 단말, 스마트폰(Smartphone), 스마트 패드(Smartpad), 타블렛 PC(Tablet PC) 등과 같은 모든 종류의 핸드헬드(Handheld) 기반의 무선 통신 장치를 포함할 수 있다.
도 2는 도 1의 시스템에 포함된 제작 서비스 제공 서버를 설명하기 위한 블록 구성도이고, 도 3 및 도 4는 본 발명의 일 실시예에 따른 HTML5 기반 이러닝 콘텐츠 제작 서비스가 구현된 일 실시예를 설명하기 위한 도면이다.
도 2를 참조하면, 제작 서비스 제공 서버(300)는, 설정부(310), 툴제공부(320), 제작부(330), 업로드부(340), 문제관리부(350), 편집부(360), 음성관리부(370), UI제공부(380), 학습분석부(390)를 포함할 수 있다.
본 발명의 일 실시예에 따른 제작 서비스 제공 서버(300)나 연동되어 동작하는 다른 서버(미도시)가 적어도 하나의 사용자 단말(100) 및 적어도 하나의 학생 단말(400)로 HTML5 기반 이러닝 콘텐츠 제작 서비스 애플리케이션, 프로그램, 앱 페이지, 웹 페이지 등을 전송하는 경우, 적어도 하나의 사용자 단말(100) 및 적어도 하나의 학생 단말(400)은, HTML5 기반 이러닝 콘텐츠 제작 서비스 애플리케이션, 프로그램, 앱 페이지, 웹 페이지 등을 설치하거나 열 수 있다. 또한, 웹 브라우저에서 실행되는 스크립트를 이용하여 서비스 프로그램이 적어도 하나의 사용자 단말(100) 및 적어도 하나의 학생 단말(400)에서 구동될 수도 있다. 여기서, 웹 브라우저는 웹(WWW: World Wide Web) 서비스를 이용할 수 있게 하는 프로그램으로 HTML(Hyper Text Mark-up Language)로 서술된 하이퍼 텍스트를 받아서 보여주는 프로그램을 의미하며, 예를 들어 넷스케이프(Netscape), 익스플로러(Explorer), 크롬(Chrome) 등을 포함한다. 또한, 애플리케이션은 단말 상의 응용 프로그램(Application)을 의미하며, 예를 들어, 모바일 단말(스마트폰)에서 실행되는 앱(App)을 포함한다.
도 2를 참조하면, 설정부(310)는, 학습진행단계에 따라 이러닝 콘텐츠를 시작하기, 학습하기, 평가하기 및 정리하기의 상위메뉴 및 하위메뉴를 설정할 수 있다. 이때, 이러닝 콘텐츠는, 시간값을 가지는 멀티미디어 콘텐츠, HTML5의 iFrame을 통하여 이러닝 콘텐츠 내 기 설정된 시점과 연계되는 HTML5 문서 및 통합 제어 플레이어가 탑재된 HTML5 컨테이너 레이아웃을 포함할 수 있다. 도 3의 (a)를 참조하면, 멀티미디와 iFrame의 영역을 구분 배치한 화면에 통합 플레이어가 포함된 HTML5 상호작용 콘텐츠의 화면 구성 예시이다. 콘텐츠 화면은 내용과 목적에 맞게 다양한 구성이 가능하다. 콘텐츠 제어 플레이어 역시 가로 형으로 화면하단에 배치하는 것이 일반적이긴 하나 정해진 규격이 있는 것은 아니다. 자유로운 화면 구성이 가능하도록 콘텐츠를 구성하는 요소를 구분할 수 있다. 이때, 구성 요소는 콘텐츠의 기능과 역할, 파일 포맷 등을 고려하여 상술한 3 가지로 구분할 수 있으며 이는 도 3의 (b)와 같다.
<시간값을 가지는 멀티미디어 콘텐츠>
콘텐츠의 중심 내용을 시각적, 청각적 경험을 중심으로 이끄는 요소이다. 멀티미디어는 콘텐츠 전체 시간값의 기준이 된다. HTML5의 <video>, <audio> 태그 기반의 전용 플레이어를 이용하여 사용자 상호작용 및 콘텐츠 제어 경험을 제공한다. 일반적으로 멀티미디어 콘텐츠는 전문 영상 장비나 영상 촬영이 가능한 스마트 기기를 이용하여 제작한다. 제작한 원본 영상은 별도 프로그램을 이용하여 편집하고 HTML5 표준 포맷인 MP4와 MP3 파일 포맷으로 인코딩하여 적용한다. 멀티미디어 콘텐츠의 제작과 편집은 웹 퍼블리싱과는 완전히 독립된 업무이다. 멀티미디어 콘텐츠가 HTML5 화면에 탑재되거나 링크된 이후 발생하는 수정은 원본 영상이나 음원을 별도 수정한 후 파일 자체를 교체한다.
<iFrame을 통해 제시되는 HTML5 문서>
콘텐츠 내 멀티미디어의 특정 시점과 연계되는 부가정보들은 노출되는 화면의 페이지 단위로 문서를 구분한다. 단위 페이지별로 나누어진 HTML5 문서는 분할파일로 작성하여 정해진 시간값에 따라 iFrame으로 호출된다. 분할된 HTML5 단위페이지 문서들은 문서 구조가 비교적 단순하고 작성 분량이 작기 때문에 제작과 수정, 삭제와 같은 유지보수가 용이하다. 또한 개별 페이지 내에서 HTML5와 CSS, JS를 적용하여 다양한 사용자 조작 기능을 구현 하거나 그래픽 애니메이션을 이용하여 유려한 퍼포먼스를 독립적으로 구현하는 것도 가능하다. iFrame 안의 단위 페이지를 분할하여 구성함으로써 콘텐츠 기획 의도와 구현 수준을 고려하여 웹퍼블리싱 기술 인력을 차등 배치하거나 다수의 인력들이 나누어 개발하는 등 개발 운영상의 효율을 높일 수 있다.
<통합 제어 플레이어가 탑재된 HTML5 컨테이너 레이아웃>
콘텐츠의 기본 레이아웃이 되는 HTML5 컨테이너 페이지에는 콘텐츠 공통 기능인 HTML5 플레이어가 포함된다. 또 멀티미디어와 iFrame의 배치 영역과 크기를 지정하고 병합하는 역할을 수행한다. 컨테이너 페이지의 플레이어를 통하여 멀티미디어의 시간값을 변경하고 변경된 시간값을 컨테이너 HTML5 문서에 전달할 수 있다. 플레이어는 사용자 조작으로 변경되는 특정 시점에 필요한 HTML5 단위 문서를 연동하여 iFrame으로 호출할 수 있도록 동기화한다. 공통 기능인 컨테이너의 통합 제어 플레이어는 기능요구에 따라 수정하고 변형하는 것이 가능하다. HTML5 플레이어 관련 자료가 웹상에 오픈소스로 공유되고 있으므로 이를 활용하는 것도 가능하다. 다만, HTML5 콘텐츠 컨테이너 구조를 활용한 콘텐츠는 웹 표준을 준수하여 제작하고 구동되므로 일반적인 영상 편집 저작도구와 구분되며, 영상 플랫폼 서비스와는 달리 일반 웹사이트에서도 독립적으로 서비스 제공이 가능하다.
<멀티미디어와 HTML5 문서의 융합>
시간의 연속성을 가지는 멀티미디어 콘텐츠와 정지상태의 부가 정보 콘텐츠는 제작과 편집부터 콘텐츠 출력 및 제어 방식이 모두 상이하다. 따라서 이 두 가지 요소를 하나의 콘텐츠로 융합할 수 있는 통합 제어 기능은 상호작용 HTML5 멀티미디어 융합 콘텐츠의 필수 구성 요소이다. 멀티미디어 상호작용 콘텐츠에서 사용자 직접 조작을 지원하는 플레이어는 HTML5 태그를 기본으로 구현하며, 멀티미디어의 재생, 정지, 타임 라인, 자막, 음성 조절, 배속 및 구간 이동 등의 기능도 필요하면 추가하여 연동 할 수 있다. 상술한 바와 같이 멀티미디어 재생 시간은 모든 콘텐츠 시간값 정보의 기준이 된다. 멀티미디어 재생 시작 시점부터 순차적으로 흘러가는 시간값 정보는 통합 플레이어에 주기적으로 입력된다. 입력된 정보는 다시 HTML5 컨테이너로 전달된다. 사전에 HTML5 컨테이너에 입력된 시간값 정보와 멀티미디어에서 발생된 시간값 정보가 동일한 경우 iFrame으로 그에 해당하는 HTML5 단위 페이지 문서를 호출한다.
사용자의 플레이어 조작으로 임의의 시간 값 정보가 발생될 경우 플레이어는 변경된 시간값 정보를 멀티미디어 콘텐츠와 HTML5 컨테이너로 전달한다. 멀티미디어로 전달된 시간값은 해당 시점부터 영상이 재생되도록 동기화 한다. HTML5 컨테이너로 전달된 시간값은 순차 재생 시와 동일한 방법으로 HTML5 단위페이지를 호출한다. 분리된 구조에서 동일한 시간값 정보를 공유하는 방식으로 여러 포맷의 콘텐츠들의 개발 특성과 원형을 유지하면서도 일괄 제어 하고 동기화하여 융합된 하나의 콘텐츠로 구동될 수 있다.
도 2로 돌아와서, 툴제공부(320)는, 각 메뉴별 입력되는 텍스트, 이미지 및 동영상이 입력되는 제작 페이지를 제공할 수 있다. 이러닝 콘텐츠는, 지정된 화면 전체에 영상 영역을 배치하고 화면 레이아웃 상에 동영상 영역과 동일한 사이즈의 iFrame을 배치하며, HTML5 단위 페이지는 투명 배경을 설정하여 하위에서 재생되는 영상 화면이 함께 노출되도록 하는 전체 영상 유형과, 화면을 분할하여 일측에는 iFrame을, 타측에는 동영상을 배치하며, 영상의 시간값에 따라 iFrame의 부가 정보가 노출되는 부분 영상 유형 및 음성 시간값을 이용하며 HTML5 iFrame만으로 전체 화면을 구성하는 사운드 영상 유형을 포함할 수 있다.
HTML5 iFrame과 멀티미디어의 구분 설계 방식을 이용하여 콘텐츠를 제작하면 서비스 목적과 대상, 내용에 따라 다양한 화면 구성이 가능하다. 이에 멀티미디어와 HTML5 단위 페이지의 배치에 따라 개발 활용성이 높은 상술한 유형 3가지를 구현할 수도 있지만 그 외 다른 유형이 추가되거나 상술한 유형이 삭제될 수도 있다. 상술한 3 가지 유형은 영상 또는 음성 강의형 이러닝은 물론 멀티미디어를 융합하여 제작하고자 하는 모든 콘텐츠에 적용 가능하다. 편의상 유형은 멀티미디어의 종류와 화면 배치를 기준으로 명명하여 구분한다.
<전체 영상 유형>
전체 영상 유형은, 지정된 화면 전체에 영상 영역을 배치하고 화면 레이아웃 상위에 동영상 영역과 동일한 사이즈의 iFrame을 배치한 형태이다. HTML5 단위 페이지는 투명 배경을 설정하여 하위에서 재생되고 있는 영상 화면이 함께 노출되도록 한다. 전체 영상 유형은 영상의 내용에 따라 화면에 제시되는 부가 정보를 다양한 그래픽 효과와 함께 제시할 수 있다. 영상 편집과 유사한 수준의 그래픽 퍼포먼스를 구현할 때 효과적이다. 전체 영상 유형은 부가 정보 내용의 수정 및 보완이 발생해도 별도의 영상 편집을 거치지 않고 HTML5 문서 코딩만으로 수정이 가능하다. 기존의 영상 편집물에서 편집 수정과 인코딩에 소요되는 작업 공수를 분산시켜 그에 따른 시간을 줄일 뿐 아니라 부가 정보의 수정과 업데이트가 매우 용이하다. 특히 영상과 부가 콘텐츠 간의 이질감이 없어 시각효과를 줄 수 있다.
<부분 영상 유형>
부분 영상 유형은, 화면을 분할하여 왼쪽에 iFrame, 오른쪽에 동영상을 배치하는 방식이다. 배치 방식이나 크기는 자유롭게 조정할 수 있다. 예를 들어, 영상은 크로마키로 촬영하여 iFrame의 HTML5 단위 페이지의 배경과 동일배경으로 영상을 편집하여 시각적으로 하나의 콘텐츠로 보이게 할 수 있다. 영상의 크로마키 촬영이 어려울 경우 iFrame과 영상 영역이 분리된 형태로 구성하여도 무방하다. 영상의 시간값에 따라 iFrame의 부가 정보가 상시 노출되는 형식이다.
<사운드 유형>
사운드 유형은, 사운드를 활용한 콘텐츠 구성 화면 예시이다. 음성 시간값을 이용하고 HTML5 iFrame 만으로 전체 화면을 구성하는 방식이다. 이는 본 발명의 일 실시예에 따른 시작하기, 평가하기 및 정리하기를 주로 이루는 방식이다. 영상 유형과 다르게 대부분 이미지와 텍스트 중심의 정적인 화면으로 구성되며, 영상 유형과 같이 HTML5 단위 페이지의 수정과 업데이트가 용이하다. HTML5 멀티미디어 융합 콘텐츠의 유형을 선정함에 있어 구성방식은 전적으로 화면 설계의 외형적인 기준을 따를 수 있다. 이때, 이전의 플래시를 기반으로 개발되었던 콘텐츠 모형에 근거하여 멀티미디어를 활용한 상호작용 콘텐츠 유형은 대부분 적용이 가능하도록 구성할 수 있다.
제작부(330)는, 사용자 단말(100)에서 각 학습진행단계 메뉴를 선택한 후 텍스트, 이미지 및 동영상 중 적어도 하나를 입력하는 경우, 학습진행단계에 따른 페이지 순번대로 텍스트, 이미지 및 동영상이 적어도 하나의 프레임에 입력되어 생성된 이러닝 콘텐츠를 출력할 수 있다. 사용자 단말(100)은, 시작하기, 학습하기, 평가하기 및 정리하기를 포함하는 학습진행단계 메뉴를 선택하고, 텍스트, 이미지 및 동영상 중 적어도 하나를 입력한 후 학습 동영상인 이러닝 콘텐츠를 생성할 수 있다.
업로드부(340)는, 이미지 또는 동영상을 업로드받을 때 URL로 경로를 입력받거나 이미지 파일 또는 동영상 파일을 사용자 단말(100)에서 선택하여 파일첨부를 하는 방식으로 입력받고, 동영상에 대한 자막은 자막파일을 URL 또는 동영상 파일과 함께 입력받을 수 있다.
문제관리부(350)는, 평가하기 내 문제생성을 위한 사용자 인터페이스를 제공하고, 문제풀(Pool)을 제공하기 위하여 문제은행 데이터베이스를 구축할 수 있다. 이때, 문제은행은 번호, 문항구분, 주차(Weeks), 과목명, 문제유형, 난이도, 문제명, 문항상태, 검수상태, 출제자, 문항코드, 출제횟수, 등록일의 데이터가 저장되는 데이터베이스일 수 있다. 문제유형은, 단답형, 다항단답형 등이 있고, 난이도는, 중하, 중, 중상 등으로 부여될 수 있다.
편집부(360)는, 사용자 단말(100)에서 입력하는 텍스트 내 포함된 적어도 하나의 키(Key) 값을 추출하고, 키 값에 기 매핑되어 저장된 명령에 따라 텍스트의 폰트 변경, 줄바꿈, 분리 및 결합을 포함하는 편집을 수행한 후 이러닝 콘텐츠의 화면을 이루도록 출력할 수 있다. 예를 들어, 들여쓰기(Tab)을 눌렀다면 그 다음 칸으로, 엔터를 눌렀다면 그 다음 블록으로 자동으로 이동하여 삽입되는 식이다. 예를 들어, 도 4p를 보면, 하위 Depth가 있을 시 무조건 탭(Tab)과 숫자로 각 Depth 분기를 지정한다고 기재되어 있다. 이때, 각종 특수 문자 및 숫자로 시작하지 않는다. 예를 들어, 이하 표 1과 같다. 그리고, 하위 내용이 하나인 경우 Tab을 하나만 사용하고 예를 들어, 표 2와 같다.
| 1.(space)1depth내용 (tab)1.(space)2depth내용 (tab)2.(space)2depth내용 (tab)(tab)1.(space)3depth내용 (tab)(tab)2.(space)3depth내용 |
| 1.(space)1depth내용 (tab)2depth내용 |
음성관리부(370)는, 시작하기, 평가하기 및 정리하기 내 포함되어야 할 음성을 텍스트로 입력받고, 텍스트를 TTS(Text To Speech)로 변환하여 음성을 생성할 수 있다. 또는 각 단계 즉 [시작하기→학습하기→평가하기→정리하기]의 각 단계를 시작할 때의 인스트럭션은 동일하므로 이는 미리 성우가 녹음을 해 둔 후, 이를 합성하는 방법도 가능하다.UI제공부(380)는, 학습하기에 대응하는 이러닝 콘텐츠를 출력할 때, 학습진행단계를 표시해주는 네비게이션 UI(User Interface)와, 교수소개, 학습목차 및 사용방법을 안내하는 학습지원메뉴 UI를 이러닝 콘텐츠가 출력되는 양측에 부가하고, 사용자 단말(100) 내의 터치 또는 마우스 오버(Mouse Over)가 존재하는 경우 네비게이션 UI 및 학습지원메뉴 UI를 디스플레이할 수 있다. 또한, 시작하기, 학습하기, 평가하기 및 정리하기는 사용자 단말(100)에서 이전 페이지 버튼 또는 다음 페이지 버튼을 입력해야 이전 또는 다음으로 진행하는 메뉴일 수 있다. 예를 들어, 본 발명의 일 실시예에 따른 사이트 내에서 하나의 강의를 선택하여 출력하는 경우(https://www.joongangcyber.com/PrevContentsView/?lectureSubSchId=399483), 양측에 네비게이션 UI와 학습지원메뉴 UI가 플레이어 내에 히든(Hidden) 상태로 존재하고, 이를 마우스오버하거나 화면을 터치하면 UI가 양단중앙부에서 나오면서 현재 어떠한 과목의 몇 주차 강의를 듣고 있는 것인지, 강의가 [시작하기→학습하기→평가하기→정리하기] 순으로 진행되고 있는데 현재 학습하기 단계인지 평가하기 단계인지 등을 파악할 수 있게 해주고, 현재 강의하시는 강사 또는 교수자가 누구이며 어떠한 커리큘럼을 가지고 강의를 하는 것인지, 현재 커리큘럼은 책의 어느 부분이나 단원을 공부하고 있는 것 등을 안내할 수 있다.
학습분석부(390)는, 시작하기, 학습하기, 평가하기 및 정리하기에서 학생 단말(400)이 이러닝 콘텐츠를 멈추거나 시작하는 시각 및 페이지 버튼을 누르는 시각을 포함하는 적어도 하나의 이벤트를 수집할 수 있다. 상술한 페이지(https://www.joongangcyber.com/PrevContentsView/?lectureSubSchId=399483) 내에서 [시작하기→학습하기→평가하기→정리하기]의 각 단계를 실행하기 위해서는 버튼을 눌러야 한다. 이를 통하여 학습자가 단순히 강의수강이 학점에 포함되어 틀어놓는 있지만 게임을 하는지 또는 취침 중인지 등을 구분할 수 있도록 한다. 사이버대학이나 각종 온라인스쿨의 경우 4.5 만점을 100 점 기준으로 정하는데 이 중 20%, 즉 20점을 강의를 들었는지 또는 안들었는지로 평가한다. 대부분 대학강의의 경우 15주, 즉 2 내지 3 개월 간 강의를 하는데, 15 주 강의(15 개 동영상)를 80% 이상 보면 20점을 주는 방식이다. 이에 따라, 최근에는 매크로 봇(MacroBot)을 이용하여 버튼을 누를 지점을 정확히 찾고 이를 눌러주는 프로그램을 이용하므로 이러한 매크로 봇이 걸려있지는 않은지를 확인하는 단계를 더 거칠 수도 있다.
이하, 상술한 도 2의 제작 서비스 제공 서버의 구성에 따른 동작 과정을 도 3 및 도 4를 예로 들어 상세히 설명하기로 한다. 다만, 실시예는 본 발명의 다양한 실시예 중 어느 하나일 뿐, 이에 한정되지 않음은 자명하다 할 것이다.
도 3a 및 도 3b는 상술한 내용과 동일하므로 중복하여 설명하지 않는다. 도 4a 및 도 4q는 본 발명의 일 실시예에 따른 HTML5 등록 가이드이다. 이 페이지는 본 발명의 일 실시예에 따른 서비스를 제공하는 홈페이지에 관리자로 로그인을 하면 보이는 페이지인데, 이는 LMS(Learning Management System) 내의 각 메뉴 또는 각 메뉴의 하위메뉴를 클릭하면 출력되는 페이지이다. 관리자 툴(Tool) 메뉴는 강좌관리, 대면강좌관리, 콘텐츠관리, 학습지원관리, 증명서관리, 공지사항, 문제은행, 토론관리, 과제관리 및 기타 등의 메뉴를 포함할 수 있다. 본 발명의 일 실시예에 따른 도 4에 도시된 페이지들은, [관리자툴메뉴→콘텐츠관리→스킨관리→과목관리→챕터관리→페이지관리]와 같은 경로에서 확인할 수 있고 설정할 수 있다.
각각의 경로는 도 4a 내지 도 4q에 걸쳐 가장 상단에 표시되어 있으므로 각 페이지의 경로는 설명하지 않기로 한다. 도 4a를 보면, 과목관리 페이지에서 스킨선택 후 참고사이트 등을 넣을 것인지 참고도서를 넣을 것인지 등을 선택하고 입력하는 페이지이고 도 4b와 같이 강사이름, 강사이력, 출연챕터범위, 강사프로필 이미지 등을 등록할 수 있는 화면이다. 도 4c는 페이지 순번, 페이지 이름, 페이지 타입, 페이지 내용을 넣는 화면인데, 페이지 순번이란 본 발명의 일 실시예에 따른 강의는 큰 틀에서 보면 [시작하기→학습하기→평가하기→정리하기]와 같이 각 단계를 나누어 진행되는데, 예를 들어, 강의 구성이 [시작하기→학습개요→동영상강의→평가하기→정리하기]와 같다면, 페이지 순번은 시작하기는 1 번, 학습개요는 2 번, 동영상강의는 3 번, 평가하기는 4 번, 정리하기는 5 번으로 설정될 수 있다.
도 4d는 과목 개요의 내용을 상단의 박스 내에 입력하면 하단의 동영상(이러닝 콘텐츠) 내에서 상술한 사운드 유형의 콘텐츠로 화면에는 글자가 출력되고 음성이 합성되는 방식으로 생성된 이러닝 콘텐츠를 볼 수 있다. 페이지를 수정할 때에는 도 4e와 같이 수정을 할 수 있고, 도 4f와 같이 이미지 경로를 지정하면 바로 사용자 단말(100)의 저장소에서 본 발명의 플랫폼으로 업로드되어 플레이되는 것을 바로 확인할 수 있다. 도 4g와 같이 데이터를 추가할 수도 있고, 도 4h와 같이 각 텍스트는 스페이스(Space), 엔터(Enter), 탭(Tab)으로 상하가 분리되거나 칸 띄우기를 하거나 문단이 분리되는 등으로 자동편집되어 동영상(이러닝 콘텐츠) 내 삽입될 수 있다. 도 4i와 같이 내용을 텍스트로 기재할 때 URL을 삽입할 수도 있고, 도 4j와 같이 학습개요 내 학습내용, 학습목표 등과 같은 폰트, 포맷, 형식 등 텍스트 작성 문서에서 적용되는 명령을 실행하지 않아도 하단과 같이 자동으로 단락이나 제목이 구분되고 폰트나 크기, 진하기 등도 자동적용되어 출력된다.
도 4k와 같이 [시작하기→학습하기→평가하기→정리하기] 중 학습하기 단계에서는 녹화된 강의가 존재하는 URL 또는 파일을 직접 업로드하고 자막 파일을 함께 업로드함으로써 이후 학생 단말(400)에서 자막켜기를 했을 때 동기화된 자막이 나올 수 있도록 한다. 도 4l은 생각해보기 단계에서 페이지 내용, 상위 메뉴 그룹, 데이터 항목 등을 입력할 수 있는 화면이고 상단과 같이 입력하면 하단과 같이 동영상 내 삽입된다. 도 4m은 평가하기 단계에서 난이도, 문항, 정답, 설명, 보기항목 등을 추가할 수 있는 페이지이고 상단과 같이 입력하면 동영상 내 하단과 같이 출력된다. 도 4n은 정리하기 단계에서 표 1 및 표 2와 같은 규칙으로 텍스트를 상단과 같이 작성하면 하단과 같이 출력되며, 도 4o와 같이 텍스트로 정리한 경우, 도 4p에서 내용을 작성할 수 있다. 도 4q와 같이 양단에 네비게이션 UI나 학습진행단계 UI는 존재하며 학습진행단계별로 노출되거나 선택되었을 때 노출될 수 있다.
이와 같은 도 2 내지 도 4의 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 방법에 대해서 설명되지 아니한 사항은 앞서 도 1을 통해 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 방법에 대하여 설명된 내용과 동일하거나 설명된 내용으로부터 용이하게 유추 가능하므로 이하 설명을 생략하도록 한다.
도 5는 본 발명의 일 실시예에 따른 도 1의 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템에 포함된 각 구성들 상호 간에 데이터가 송수신되는 과정을 나타낸 도면이다. 이하, 도 5를 통해 각 구성들 상호간에 데이터가 송수신되는 과정의 일 예를 설명할 것이나, 이와 같은 실시예로 본원이 한정 해석되는 것은 아니며, 앞서 설명한 다양한 실시예들에 따라 도 5에 도시된 데이터가 송수신되는 과정이 변경될 수 있음은 기술분야에 속하는 당업자에게 자명하다.
도 5를 참조하면, 제작 서비스 제공 서버는, 학습진행단계에 따라 이러닝 콘텐츠를 시작하기, 학습하기, 평가하기 및 정리하기의 상위메뉴 및 하위메뉴를 설정한다(S5100).
그리고, 제작 서비스 제공 서버는, 각 메뉴별 입력되는 텍스트, 이미지 및 동영상이 입력되는 제작 페이지를 제공한다(S5200).
또, 제작 서비스 제공 서버는, 사용자 단말에서 각 학습진행단계 메뉴를 선택한 후 텍스트, 이미지 및 동영상 중 적어도 하나를 입력하는 경우, 학습진행단계에 따른 페이지 순번대로 텍스트, 이미지 및 동영상이 적어도 하나의 프레임에 입력되어 생성된 이러닝 콘텐츠를 출력한다(S5300).
상술한 단계들(S5100~S5300)간의 순서는 예시일 뿐, 이에 한정되지 않는다. 즉, 상술한 단계들(S5100~S5300)간의 순서는 상호 변동될 수 있으며, 이중 일부 단계들은 동시에 실행되거나 삭제될 수도 있다.
이와 같은 도 5의 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 방법에 대해서 설명되지 아니한 사항은 앞서 도 1 내지 도 4를 통해 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 방법에 대하여 설명된 내용과 동일하거나 설명된 내용으로부터 용이하게 유추 가능하므로 이하 설명을 생략하도록 한다.
도 5를 통해 설명된 일 실시예에 따른 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 방법은, 컴퓨터에 의해 실행되는 애플리케이션이나 프로그램 모듈과 같은 컴퓨터에 의해 실행가능한 명령어를 포함하는 기록 매체의 형태로도 구현될 수 있다. 컴퓨터 판독 가능 매체는 컴퓨터에 의해 액세스될 수 있는 임의의 가용 매체일 수 있고, 휘발성 및 비휘발성 매체, 분리형 및 비분리형 매체를 모두 포함한다. 또한, 컴퓨터 판독가능 매체는 컴퓨터 저장 매체를 모두 포함할 수 있다. 컴퓨터 저장 매체는 컴퓨터 판독가능 명령어, 데이터 구조, 프로그램 모듈 또는 기타 데이터와 같은 정보의 저장을 위한 임의의 방법 또는 기술로 구현된 휘발성 및 비휘발성, 분리형 및 비분리형 매체를 모두 포함한다.
전술한 본 발명의 일 실시예에 따른 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 방법은, 단말기에 기본적으로 설치된 애플리케이션(이는 단말기에 기본적으로 탑재된 플랫폼이나 운영체제 등에 포함된 프로그램을 포함할 수 있음)에 의해 실행될 수 있고, 사용자가 애플리케이션 스토어 서버, 애플리케이션 또는 해당 서비스와 관련된 웹 서버 등의 애플리케이션 제공 서버를 통해 마스터 단말기에 직접 설치한 애플리케이션(즉, 프로그램)에 의해 실행될 수도 있다. 이러한 의미에서, 전술한 본 발명의 일 실시예에 따른 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 방법은 단말기에 기본적으로 설치되거나 사용자에 의해 직접 설치된 애플리케이션(즉, 프로그램)으로 구현되고 단말기에 등의 컴퓨터로 읽을 수 있는 기록매체에 기록될 수 있다.
전술한 본 발명의 설명은 예시를 위한 것이며, 본 발명이 속하는 기술분야의 통상의 지식을 가진 자는 본 발명의 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 쉽게 변형이 가능하다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한다. 예를 들어, 단일형으로 설명되어 있는 각 구성 요소는 분산되어 실시될 수도 있으며, 마찬가지로 분산된 것으로 설명되어 있는 구성 요소들도 결합된 형태로 실시될 수 있다.
본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 균등 개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.
Claims (10)
- 시작하기, 학습하기, 평가하기 및 정리하기를 포함하는 학습진행단계 메뉴를 선택하고, 텍스트, 이미지 및 동영상 중 적어도 하나를 입력한 후 학습 동영상인 이러닝 콘텐츠를 생성하는 사용자 단말; 및
학습진행단계에 따라 이러닝 콘텐츠를 시작하기, 학습하기, 평가하기 및 정리하기의 상위메뉴 및 하위메뉴를 설정하는 설정부, 각 메뉴별 입력되는 텍스트, 이미지 및 동영상이 입력되는 제작 페이지를 제공하는 툴제공부, 상기 사용자 단말에서 각 학습진행단계 메뉴를 선택한 후 상기 텍스트, 이미지 및 동영상 중 적어도 하나를 입력하는 경우, 상기 학습진행단계에 따른 페이지 순번대로 상기 텍스트, 이미지 및 동영상이 적어도 하나의 프레임에 입력되어 생성된 이러닝 콘텐츠를 출력하는 제작부, 상기 학습하기에 대응하는 이러닝 콘텐츠를 출력할 때, 학습진행단계를 표시해주는 네비게이션 UI(User Interface)와, 교수소개, 학습목차 및 사용방법을 안내하는 학습지원메뉴 UI를 상기 이러닝 콘텐츠가 출력되는 양측에 부가하고, 상기 사용자 단말 내의 마우스 오버(Mouse Over)가 존재하는 경우 상기 네비게이션 UI 및 학습지원메뉴 UI를 디스플레이하는 UI제공부, 상기 시작하기, 학습하기, 평가하기 및 정리하기에서 학생 단말이 이러닝 콘텐츠를 멈추거나 시작하는 시각 및 페이지 버튼을 누르는 시각을 포함하는 적어도 하나의 이벤트를 수집하는 학습분석부를 포함하는 제작 서비스 제공 서버;를 포함하며,
상기 이러닝 콘텐츠는,
시간값을 가지는 멀티미디어 콘텐츠;
HTML5의 iFrame을 통하여 상기 이러닝 콘텐츠 내 기 설정된 시점과 연계되는 HTML5 문서; 및
통합 제어 플레이어가 탑재된 HTML5 컨테이너 레이아웃을 포함하는 것을 특징으로 하는 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템.
- 삭제
- 제 1 항에 있어서,
상기 이러닝 콘텐츠는,
지정된 화면 전체에 영상 영역을 배치하고 화면 레이아웃 상에 동영상 영역과 동일한 사이즈의 iFrame을 배치하며, HTML5 단위 페이지는 투명 배경을 설정하여 하위에서 재생되는 영상 화면이 함께 노출되도록 하는 전체 영상 유형;
화면을 분할하여 일측에는 iFrame을, 타측에는 동영상을 배치하며, 영상의 시간값에 따라 iFrame의 부가 정보가 노출되는 부분 영상 유형; 및
음성 시간값을 이용하며 HTML5 iFrame만으로 전체 화면을 구성하는 사운드 영상 유형;
을 포함하는 상호작용형 콘텐츠인 것을 특징으로 하는 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템.
- 제 1 항에 있어서,
상기 제작 서비스 제공 서버는,
상기 이미지 또는 동영상을 업로드받을 때 URL로 경로를 입력받거나 이미지 파일 또는 동영상 파일을 사용자 단말에서 선택하여 파일첨부를 하는 방식으로 입력받고, 상기 동영상에 대한 자막은 자막파일을 상기 URL 또는 동영상 파일과 함께 입력받는 업로드부;
를 더 포함하는 것을 특징으로 하는 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템.
- 제 1 항에 있어서,
상기 제작 서비스 제공 서버는,
상기 평가하기 내 문제생성을 위한 사용자 인터페이스를 제공하고, 문제풀(Pool)을 제공하기 위하여 문제은행 데이터베이스를 구축하는 문제관리부;
를 더 포함하는 것을 특징으로 하는 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템.
- 제 1 항에 있어서,
상기 제작 서비스 제공 서버는,
상기 사용자 단말에서 입력하는 텍스트 내 포함된 적어도 하나의 키(Key) 값을 추출하고, 상기 키 값에 기 매핑되어 저장된 명령에 따라 상기 텍스트의 폰트 변경, 줄바꿈, 분리 및 결합을 포함하는 편집을 수행한 후 상기 이러닝 콘텐츠의 화면을 이루도록 출력하는 편집부;
를 더 포함하는 것을 특징으로 하는 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템.
- 제 1 항에 있어서,
상기 제작 서비스 제공 서버는,
상기 시작하기, 평가하기 및 정리하기 내 포함되어야 할 음성을 텍스트로 입력받고, 상기 텍스트를 TTS(Text To Speech)로 변환하여 음성을 생성하는 음성관리부;
를 더 포함하는 것을 특징으로 하는 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템.
- 삭제
- 제 1 항에 있어서,
상기 시작하기, 학습하기, 평가하기 및 정리하기는 상기 사용자 단말에서 이전 페이지 버튼 또는 다음 페이지 버튼을 입력해야 이전 또는 다음으로 진행하는 메뉴인 것을 특징으로 하는 HTML5 기반 이러닝 콘텐츠 제작 서비스 제공 시스템.
- 삭제
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| KR1020210135065A KR102527617B1 (ko) | 2021-10-12 | 2021-10-12 | Ｈｔｍｌ５ 기반 이러닝 콘텐츠 제작 서비스 제공 시스템 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| KR1020210135065A KR102527617B1 (ko) | 2021-10-12 | 2021-10-12 | Ｈｔｍｌ５ 기반 이러닝 콘텐츠 제작 서비스 제공 시스템 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| KR20230051998A KR20230051998A (ko) | 2023-04-19 |
| KR102527617B1 true KR102527617B1 (ko) | 2023-05-02 |
Family
ID=86142082
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| KR1020210135065A KR102527617B1 (ko) | 2021-10-12 | 2021-10-12 | Ｈｔｍｌ５ 기반 이러닝 콘텐츠 제작 서비스 제공 시스템 |
Country Status (1)
| Country | Link |
|---|---|
| KR (1) | KR102527617B1 (ko) |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR102248960B1 (ko) * | 2020-08-19 | 2021-05-07 | 주식회사 아이스크림에듀 | 인공지능 학습 플랫폼을 이용한 비즈니스 방법 및 시스템 |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR101198091B1 (ko) * | 2009-10-30 | 2012-11-09 | 숙명여자대학교산학협력단 | 학습 콘텐츠 서비스 제공 방법 및 시스템 |
| KR20150010284A (ko) * | 2013-07-19 | 2015-01-28 | 테크빌닷컴 주식회사 | 템플릿을 이용한 이러닝 콘텐츠 저작 장치 및 그 방법 |
| KR102021284B1 (ko) * | 2017-05-30 | 2019-09-16 | 주식회사 레이팝 | 모바일 단말에서 ｈｔｍｌ５를 이용하여 학습 영역과 동영상 영역의 상호 작용이 가능하게 하는 학습 장치 및 방법 |
| KR102414966B1 (ko) * | 2019-11-29 | 2022-07-04 | 주식회사 플랙스 | 스마트 디바이스 기반 단위영역별 콘텐츠 제작이 가능한 디지털 학습 서비스 제공 방법 |
-
2021
- 2021-10-12 KR KR1020210135065A patent/KR102527617B1/ko active IP Right Grant
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR102248960B1 (ko) * | 2020-08-19 | 2021-05-07 | 주식회사 아이스크림에듀 | 인공지능 학습 플랫폼을 이용한 비즈니스 방법 및 시스템 |
Also Published As
| Publication number | Publication date |
|---|---|
| KR20230051998A (ko) | 2023-04-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11145216B2 (en) | Methods and systems for dynamically generating a training program | |
| CN104183166B (zh) | 一种融合电子备课系统及方法 | |
| KR20150080556A (ko) | 통합된 가르침과 학습의 생성, 전달, 사용 및 활용을 위한 방법 및 시스템 | |
| CN104317563A (zh) | 一种在线课件协作开发系统 | |
| KR102414966B1 (ko) | 스마트 디바이스 기반 단위영역별 콘텐츠 제작이 가능한 디지털 학습 서비스 제공 방법 | |
| Dooley et al. | Immersive media practices in the classroom: models of the teaching research nexus in an Australian context | |
| KR102527617B1 (ko) | Ｈｔｍｌ５ 기반 이러닝 콘텐츠 제작 서비스 제공 시스템 | |
| CN107016631A (zh) | 跨平台课件智能合成方法 | |
| Engel et al. | Textual Artifacts and their Digital Representations: Teaching Graduate Students to Build Online Archives. | |
| Heins et al. | Creating learning objects with Macromedia Flash MX | |
| López-Pernas et al. | Ediphy: A modular and extensible open-source web authoring tool for the creation of interactive learning resources | |
| Onita et al. | Review of Interactive Video--Romanian Project Proposal. | |
| Swerzenski | Producing professionalization: analyzing the discourse of Adobe Premiere’s Learn More tools in shaping student practices | |
| KR101161693B1 (ko) | 객체지향이며 ｘｍｌ기반으로 하는 컨텐츠 편집 솔루션을 갖춘 ｃｍｓ | |
| Rehatschek et al. | Successful embedding of virtual lectures in medical psychology education in order to improve teacher-student interactivity and collaboration | |
| CONCEIÇÃO et al. | HYBRID GENDER IN METAMORPHOSIS: analysis of literary journalism characteristics in online editions of the UOL TAB platform (2014–2018) | |
| Kaden et al. | E-Learning Applications for Urban Modelling and OGC Standards using HTML5 Capabilities | |
| Teixeira et al. | Teaching and Learning with Digital Media | |
| Fu | Micro-video Production and Its Application in English Teaching | |
| Bold et al. | Using online asynchronous audio communication in higher education | |
| Bagnoli et al. | Detachable learning environments for T-learning | |
| Casar et al. | VIRTUALIZATION OF A THERMODYNAMIC COURSE IN A RENEWABLE ENERGY MASTER’S DEGREE | |
| MSIT et al. | Molly Open Source Online Lecture System | |
| Stoyanova et al. | Output 4 Integrating E-Learning and Open Educational Resources into Classroom”–iOERc | |
| Lauer et al. | Flexible creation, annotation, and web-based delivery of instructional animations |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| GRNT | Written decision to grant |