KR102620692B1 - 이러닝 콘텐츠 제작을 위한 html5 자동 변환 방법 - Google Patents

이러닝 콘텐츠 제작을 위한 html5 자동 변환 방법 Download PDF

Info

Publication number
KR102620692B1
KR102620692B1 KR1020230109056A KR20230109056A KR102620692B1 KR 102620692 B1 KR102620692 B1 KR 102620692B1 KR 1020230109056 A KR1020230109056 A KR 1020230109056A KR 20230109056 A KR20230109056 A KR 20230109056A KR 102620692 B1 KR102620692 B1 KR 102620692B1
Authority
KR
South Korea
Prior art keywords
file
html5
content
video
standard document
Prior art date
Application number
KR1020230109056A
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 KR1020230109056A priority Critical patent/KR102620692B1/ko
Application granted granted Critical
Publication of KR102620692B1 publication Critical patent/KR102620692B1/ko

Links

Images

Classifications

    • 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
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/151—Transformation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates
    • 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
    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Business, Economics & Management (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Tourism & Hospitality (AREA)
  • Health & Medical Sciences (AREA)
  • General Health & Medical Sciences (AREA)
  • General Engineering & Computer Science (AREA)
  • Computational Linguistics (AREA)
  • Marketing (AREA)
  • Artificial Intelligence (AREA)
  • General Business, Economics & Management (AREA)
  • Databases & Information Systems (AREA)
  • Economics (AREA)
  • Human Resources & Organizations (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Primary Health Care (AREA)
  • Strategic Management (AREA)
  • Data Mining & Analysis (AREA)
  • Educational Administration (AREA)
  • Educational Technology (AREA)
  • Document Processing Apparatus (AREA)

Abstract

본 발명은 코딩에 대한 전문지식이 없는 콘텐츠 제작자라도 제공되는 콘텐츠 템플릿과 표준문서파일로 작성된 내용을 가지고 HTML5 규격의 이러닝 콘텐츠를 쉽게 제작할 수 있게 하는 이러닝 콘텐츠 제작을 위한 HTML5 자동 변환 방법에 관한 것이다.
상기의 과제를 해결하기 위한 본 발명에 따른 이러닝 콘텐츠 제작을 위한 HTML5 자동 변환 방법은, 메인서버; 및 스마트기기를 포함하고, 상기 메인서버는, 디자인 템플릿 저장부; 디자인 템플릿 출력부; 디자인 템플릿 배치부; 표준문서파일 첨부부; 영상 첨부부; HTML 생성부; 및 저장부를 포함하고, 상기 스마트기기를 통해 출력되는 HTML5 자동 변환용 웹 프로그램 화면을 통해 디자인 템플릿이 선택되고, 상기 표준문서파일 첨부부를 통해 표준문서파일로 작성된 내용이 첨부되며, 상기 영상 첨부부를 통해 미리 촬영된 강의 영상이 첨부되는 것으로 HTML5 파일 형식의 웹 페이지가 생성되도록 구성되는 것을 특징으로 한다.

Description

이러닝 콘텐츠 제작을 위한 HTML5 자동 변환 방법{HTML5 Automatic Conversion Method for E-learning Content Creation}
본 발명은 이러닝 콘텐츠 제작을 위한 HTML5 자동 변환 방법에 관한 것으로, 더욱 상세하게는 콘텐츠 제작자가 별도의 코딩 지식이 없어도 이러닝 콘텐츠를 쉽게 제작할 수 있도록 표준문서파일의 내용을 HTML5로 자동 변환시켜주는 이러닝 콘텐츠 제작을 위한 HTML5 자동 변환 방법에 관한 것이다.
근래에는 효과적인 학습을 위해 사용자와 상호 작용하는 방식의 이러닝 콘텐츠가 제작되고 있는데, 이러한 상호 작용 방식의 이러닝 콘텐츠는 주로 HTML5(Hyper Text Markup Language)로 제작되게 된다.
HTML5는 문서작성 중심으로 구성된 차세대 웹 언어 규격으로 그림, 동영상 및 음악 등을 실행하는 기능을 포함하기 때문에 상호 작용 방식의 이러닝 콘텐츠를 제작하기에 적합하고 있고, 또한 별도의 플러그인 기반의 프로그램을 설치하지 않고도 컴퓨터, 스마트기기 및 운영체제를 가리지 않고 구동이 가능한 장점이 있어 널리 사용되고 있다.
상기와 같이 HTML5를 통해 콘텐츠를 제작하는 종래 기술로는 등록특허공보 제1519381호의 HTML5를 이용하여 웹 어플리케이션을 제작하는 방법 및 장치(이하 '특허문헌'이라 한다)가 개시되어 있다.
상기 특허문헌은 HTML 언어와 자바스크립트가 포함된 HTML5를 이용하여 웹 어플리케이션을 제작하는 장치에 있어서, 뷰 블록 및 컨트롤 블록에 대한 속성을 인지한 사용자로부터 결합될 블록을 입력받는 입력부; 상기 HTML 언어를 통해 생성된 하나 이상의 태그범위를 상기 뷰 블록으로 각각 변환하고, 하나 이상의 명령에 대한 동작을 수행하는 자바스크립트를 컨트롤 블록으로 각각 변환하고, 상기 입력받은 블록을 적층식으로 결합하고, 상기 결합된 블록에 대하여 상기 적층식 구조의 최하단을 루트로 설정하고, 적층된 순서에 따라 상기 루트의 자식 노드를 설정하고, 부모-자식 관계가 성립하는 트리 구조로 치환하며, 상기 트리 구조로 블록을 상기 트리 구조에 따라 순차적으로 검색함으로써, 검색결과 독출된 블록의 소스 코드를 참조하여 HTML 언어로 변환하는 처리부; 및 상기 각각 변환된 뷰 블록 및 컨트롤 블록을 출력하여 상기 사용자로부터 결합에 이용될 블록의 선택을 유도하며, 상기 HTML 언어로 변환되어 제작된 상기 웹 어플리케이션을 출력하는 출력부를 포함하는 것으로 이루어진다.
그러나 상기 특허문헌은 블록 형태로 시각화된 툴을 이용하여 콘텐츠 제작자가 블록을 쌓아 웹 어플리케이션을 쉽게 제작할 수 있도록 한 것이나, 이 경우 시각화되어 제공되는 블록이 HTML 언어의 특정 명령어들로 구성되기 때문에 코딩에 대한 지식이 전혀 없는 콘텐츠 제작자의 경우, 시각화된 블록을 적절하게 배치하고 쌓아 콘텐츠를 제작하기가 쉽지 않은 문제가 있다.
또한, 시각화된 블록과 별개로 이러닝 콘텐츠를 구성하는 많은 양의 지문과 해설 등을 블록의 배치 과정에서 직접 작성해야 하므로 이러닝 콘텐츠를 제작하는 데에 오랜 시간이 소요되는 문제도 있다.
따라서 코딩에 대한 전문 지식이 없어도 콘텐츠 제작자가 원하는 이러닝 콘텐츠를 쉽고 빠르게 제작할 수 있도록 하는 HTML5 자동 변환 방법의 개발이 요구된다.
KR 10-1519381 B1 (2015. 05. 06.) KR 10-2017-0096349 A (2017. 08. 24.) KR 10-1525519 B1 (2015. 05. 28.) KR 10-2015-0079867 A (2015. 07. 08.)
본 발명은 상기와 같은 종래의 이러닝 콘텐츠 제작 장치가 가지는 문제점을 해결하기 위해 안출된 것으로, 본 발명이 해결하고자 하는 과제는 코딩에 대한 전문지식이 없는 콘텐츠 제작자라도 제공되는 콘텐츠 템플릿과 표준문서파일로 작성된 내용을 가지고 HTML5 규격의 이러닝 콘텐츠를 쉽게 제작할 수 있게 하는 이러닝 콘텐츠 제작을 위한 HTML5 자동 변환 방법을 제공하는 것이다.
상기의 과제를 해결하기 위한 본 발명에 따른 이러닝 콘텐츠 제작을 위한 HTML5 자동 변환 방법은, 인터넷을 통해 어디서나 접근 가능하도록 구성되면서 복수의 디자인 템플릿 데이터가 저장되고, 콘텐츠 제작자가 접속하여 콘텐츠를 제작할 수 있도록 HTML5 자동 변환용 웹 프로그램을 제공하는 메인서버; 및 상기 메인서버에서 제공되는 HTML5 자동 변환용 웹 프로그램 화면이 출력되는 디스플레이와, 상기 HTML5 자동 변환용 웹 프로그램에서 제공되는 디자인 템플릿을 선택하거나 필요한 데이터를 첨부하기 위한 입력장치 및 상기 HTML5 자동 변환용 웹 프로그램에 첨부하기 위한 데이터가 저장되는 저장장치를 포함하는 인터넷 접속 가능한 스마트기기를 포함하고, 상기 메인서버는, JPG, JPEG 및 PNG 파일 중에서 선택된 어느 하나의 파일로 생성된 복수 개의 페이지 디자인 템플릿, 복수 개의 프레임 디자인 템플릿 및 복수 개의 버튼 디자인 템플릿을 포함하는 디자인 템플릿 저장부; 상기 디자인 템플릿 저장부에 저장된 상기 복수 개의 페이지 디자인 템플릿, 복수 개의 프레임 디자인 템플릿 및 복수 개의 버튼 디자인 템플릿을 카테고리 별로 분류하여 상기 디스플레이를 통해 순차적으로 출력시키는 디자인 템플릿 출력부; 상기 디자인 템플릿 출력부를 통해 순차적으로 출력되는 상기 복수 개의 페이지 디자인 템플릿, 복수 개의 프레임 디자인 템플릿 및 복수 개의 버튼 디자인 템플릿 중에서 선택된 디자인 템플릿을 콘텐츠 화면부에 배치시키는 디자인 템플릿 배치부; 상기 콘텐츠 화면부에 출력될 내용이 표준문서파일로 첨부되도록 구성되는 표준문서파일 첨부부; 상기 콘텐츠 화면부에 출력될 강의 영상이 동영상 파일로 첨부되도록 구성되는 영상 첨부부; 상기 표준문서파일 첨부부 및 영상 첨부부를 통해 첨부된 파일을 상기 메인서버로 업로드한 다음, 해당 파일이 저장된 경로 정보를 생성하고, 선택된 디자인 템플릿 정보와 생성된 파일 경로 정보를 기초로 HTML5 파일을 생성하는 HTML 생성부; 상기 HTML 생성부를 통해 생성된 HTML 파일을 저장하는 저장부를 포함하고, 상기 스마트기기를 통해 출력되는 HTML5 자동 변환용 웹 프로그램 화면을 통해 디자인 템플릿이 선택되고, 상기 표준문서파일 첨부부를 통해 표준문서파일로 작성된 내용이 첨부되며, 상기 영상 첨부부를 통해 미리 촬영된 강의 영상이 첨부되는 것으로 HTML5 파일 형식의 웹 페이지가 생성되도록 구성되는 것을 특징으로 한다.
그리고 본 발명은 상기 HTML 생성부가 상기 디자인 템플릿 배치부를 통해 배치된 디자인 템플릿의 저장경로, 위치, 색상 및 크기 정보가 HTML5 양식에 맞추어 자동으로 입력되는 것을 또 다른 특징으로 한다.
또한, 본 발명은 상기 HTML 생성부가 상기 표준문서파일 첨부부를 통해 첨부된 문서파일의 폰트 종류, 폰트 크기, 문단 정렬 정보가 HTML5 양식에 맞추어 자동으로 입력되는 것을 또 다른 특징으로 한다.
이에 더해 본 발명은 상기 영상 첨부부가 첨부되는 동영상 파일의 자동 또는 수동 재생 여부, 동영상의 반복 재생 여부 및 오디오 볼륨 정보를 설정하는 옵션 버튼을 포함하고, 상기 HTML 생성부는, 상기 옵션 버튼을 통해 선택된 동영상 파일의 자동 또는 수동 재생 여부, 동영상의 반복 재생 여부 및 오디오 볼륨 정보가 HTML5 양식에 맞추어 자동으로 입력되는 것을 또 다른 특징으로 한다.
그리고 본 발명은 상기 표준문서파일 첨부부를 통해 첨부되는 파일이 워드 파일 또는 Excel 파일인 것을 또 다른 특징으로 한다.
본 발명에 따르면, 텍스트 파일, 워드 파일 및 Excel 파일과 같이 표준문서파일을 단순히 첨부하는 것만으로 HTML5의 파일로 자동 변환되므로 콘텐츠 제작자가 별도의 코딩 지식이 없더라도 이러닝 콘텐츠를 구성하는 지문 및 해설 등의 내용을 쉽게 추가하고 변경하는 것이 가능한 장점이 있다.
또한, 제공되는 템플릿을 이용하여 지문과 해설의 위치를 쉽게 배치하고, 그 색과 모양을 변경할 수 있으며, 강의 영상의 추가 및 상호 작용 콘텐츠를 쉽게 구성할 수 있고, 그 결과 콘텐츠 제작자가 원하는 다양한 이러닝 콘텐츠를 쉽게 제작할 수 있는 장점이 있다.
이에 더해 지원이 중단된 플래시 기반의 기존 이러닝 콘텐츠를 HTML5에 맞추어 빠르게 변환하여 최적화시킬 수 있는 장점이 있다.
도 1은 본 발명의 콘텐츠 제작을 위한 HTML5 자동 변환 방법을 위한 장치의 예를 보인 구성도.
도 2는 본 발명에 따른 메인서버의 예를 보인 구성도.
도 3은 본 발명에 따른 HTML5 자동 변환 방법을 위한 장치가 실행된 화면의 예를 보인 도면.
도 4 내지 도 8은 본 발명에 따른 HTML5 자동 변환 방법을 위한 장치의 실시예를 보인 도면.
이하에서는 본 발명의 바람직한 실시예를 도시한 첨부도면에 따라 상세하게 설명한다.
본 발명은 코딩에 대한 전문지식이 없는 콘텐츠 제작자라도 제공되는 콘텐츠 템플릿과 표준문서파일로 작성된 내용을 가지고 HTML5 규격의 이러닝 콘텐츠를 쉽게 제작할 수 있게 하는 이러닝 콘텐츠 제작을 위한 HTML5 자동 변환 방법을 제공하고자 하는 것으로, 이를 위한 본 발명은 도 1에 도시된 바와 같이 메인서버(1) 및 스마트기기(2)를 포함한다.
메인서버(1)는 인터넷을 통해 어디서나 접근 가능하도록 클라우드서버로 구성되고, 이러한 메인서버(1)에는 복수의 디자인 템플릿 데이터가 저장되며, 콘텐츠 제작자가 저장된 복수의 디자인 템플릿을 선택하여 이러닝 콘텐츠를 제작할 수 있도록 HTML5 자동 변환용 웹 프로그램을 제공하는 구성으로, 이러한 메인서버(1)에는 도 2에 도시된 바와 같이 디자인 템플릿 저장부(10), 디자인 템플릿 출력부(20), 디자인 템플릿 배치부(30), 표준문서파일 첨부부(40), 영상 첨부부(50), HTML 생성부(60) 및 저장부(70)를 포함하고, 이하에서는 위 구성들에 대하여 상세하게 설명한다.
디자인 템플릿 저장부(10)는 콘텐츠 제작자가 미리 제작된 템플릿을 선택하여 이러닝 콘텐츠 화면을 쉽게 구성할 수 있도록 다양한 색과 모양의 디자인 템플릿이 저장되는 구성이다.
이러한 디자인 템플릿 저장부(10)는 일반적으로 널리 사용되는 이미지파일 포맷인 JPG, JPEG 및 PNG 중에서 선택된 어느 하나의 파일 포맷으로 구성된 복수 개의 페이지 디자인 템플릿(P), 복수 개의 프레임 디자인 템플릿(F) 및 복수 개의 버튼 디자인 템플릿(B)을 포함하여 구성될 수 있다.
이때 페이지 디자인 템플릿(P)은 이러닝 콘텐츠 내의 배경색과 배경무늬 등을 다르게 한 템플릿으로 구성될 수 있고, 프레임 디자인 템플릿(F)은 이러닝 콘텐츠 내의 본문, 해설, 강좌 영상 등의 배치 구조를 다르게 한 템플릿으로 구성될 수 있으며, 버튼 디자인 템플릿(B)은 이러닝 콘텐츠 내에 구성되는 각종 버튼의 크기, 버튼의 종류, 모양 및 색상 등으로 다르게 한 템플릿으로 구성될 수 있다.
디자인 템플릿 출력부(20)는 메인서버(1)의 디자인 템플릿 저장부(10)에 저장된 복수 개의 페이지 디자인 템플릿(P), 복수 개의 프레임 디자인 템플릿(F) 및 복수 개의 버튼 디자인 템플릿(B)을 카테고리 별로 분류하여 후술되는 스마트기기(2)의 디스플레이(2A)를 통해 순차적으로 출력시키는 구성이다.
이러한 디자인 템플릿 출력부(20)는 디자인 템플릿 저장부(10)에 저장된 페이지 디자인 템플릿(P), 복수 개의 프레임 디자인 템플릿(F) 및 버튼 디자인 템플릿(B) 데이터를 순차적으로 불러와 스마트기기(2)의 디스플레이(2A)로 전송하고, 이렇게 전송된 템플릿 데이터는 스마트기기(2)의 디스플레이(2A)를 통해 출력되는 HTML5 자동 변환용 웹 프로그램의 실행 화면 중 페이지, 프레임 및 버튼 디자인 항목에 맞추어 미리보기 형식으로 각각 출력되게 된다.
이때 콘텐츠 제작자는 디스플레이(2A)를 통해 출력되는 페이지, 프레임 및 버튼 디자인 항목에서 페이지 디자인 템플릿(P), 프레임 디자인 템플릿(F) 및 버튼 디자인 템플릿(B)을 확인한 다음, 필요한 템플릿을 후술되는 입력장치(2B)를 통해 선택하는 것으로 제작되는 이러닝 콘텐츠의 페이지, 프레임 및 버튼을 쉽고 빠르게 구성할 수 있게 된다.
디자인 템플릿 배치부(30)는 디자인 템플릿 출력부(20)를 통해 콘텐츠 제작자가 선택한 페이지 디자인 템플릿(P), 프레임 디자인 템플릿(F) 및 버튼 디자인 템플릿(B)을 HTML5 자동 변환용 웹 프로그램의 실행 화면 중 콘텐츠 화면부(A)에 배치시키는 구성이다.
이러한 디자인 템플릿 배치부(30)를 통해 콘텐츠 제작자는 배경과 프레임 및 버튼 등의 색상과 디자인을 미리보기 형식으로 쉽게 확인할 수 있게 된다.
또한, 디자인 템플릿 배치부(30)를 통해 콘텐츠 제작자가 이러닝 콘텐츠의 페이지수와 순서 등을 선택 및 변경할 수 있도록 구성될 수 있다.
이때 디자인 템플릿 배치부(30)는 콘텐츠 제작자가 페이지별로 목차, 학습안내, 학습목표, 학습내용, 평가 및 분석 등의 항목으로 설정하고, 템플릿을 통해 예시로 제공되는 테이블을 수정 및 추가할 수 있도록 구성될 수 있다.
표준문서파일 첨부부(40)는 콘텐츠 화면부(A)에 출력될 본문과 해설 등의 내용이 표준문서파일로 첨부되도록 하는 구성으로, 이러한 표준문서파일 첨부부(40)는 도 3에 도시된 바와 같이 스마트기기(2)의 저장장치(2C)에 저장된 파일이 선택되면, 자동으로 해당 파일의 경로가 입력되도록 구성될 수 있다.
또한, 표준문서파일 첨부부(40)에 표준문서파일의 경로가 입력되면, 해당 파일을 메인서버(1)로 전송하기에 앞서 임시 저장하는 업로드 버튼(도시하지 않음)이 노출되도록 구성될 수 있고, 콘텐츠 제작자가 업로드 버튼을 클릭하는 것으로 해당 표준문서파일이 임시 저장되게 됨과 동시에 콘텐츠 화면부(A)에 해당 내용이 미리보기 형식으로 출력되어 콘텐츠 제작자가 해당 내용을 확인할 수 있도록 구성된다.
이때 표준문서파일 첨부부(40)를 통해 첨부되는 파일은 공지된 다양한 확장자의 문서파일 중에 텍스트 파일(txt), 워드 파일(docx, hwp, rtf) 및 Excel 파일(elsx, xls) 중에서 선택되는 어느 하나 이상으로 구성될 수 있다.
또한, 표준문서파일 첨부부(40)는 하나 이상 복수 개로 구성될 수 있고, 이러한 복수 개의 표준문서파일 첨부부(40)는 각각 본문, 해설, 문제 등으로 항목이 표시되어 안내되도록 구성될 수 있다.
이에 의해 콘텐츠 제작자가 이러닝 콘텐츠에 포함될 본문, 해설 및 문제를 HTML5 파일을 생성하는 과정에서 입력하지 않고도 항목에 맞추어 미리 저장된 표준문서파일을 따로 첨부하는 것으로 필요한 내용을 쉽게 업로드 및 업데이트하거나 수정할 수 있게 된다.
영상 첨부부(50)는 콘텐츠 화면부(A)에 출력될 강의 영상이 동영상 파일로 첨부되도록 하는 구성으로, 이러한 영상 첨부부(50)는 표준문서파일 첨부부(40)와 같이 스마트기기(2)의 저장장치(2C)에 저장된 동영상 파일이 선택되면, 자동으로 해당 파일의 경로가 입력되도록 구성될 수 있다.
또한, 영상 첨부부(50)에는 동영상 파일이 선택되어 경로가 입력되면, 첨부되는 동영상 파일의 자동 또는 수동 재생 여부, 동영상의 반복 재생 여부 및 오디오 볼륨 정보를 설정하는 옵션 버튼이 노출되고, 콘텐츠 제작자가 옵션 버튼을 통해 동영상 재생 환경을 추가로 설정하고 나면, 업로드 버튼(도시하지 않음)이 노출되도록 구성될 수 있다.
또한, 콘텐츠 제작자가 추가로 노출되는 업로드 버튼을 클릭하게 되면, 동영상 파일이 임시 저장되게 됨과 동시에 콘텐츠 화면부(A) 중 강의 영상이 출력되는 항목에 맞춰 강의 영상이 미리보기 형식으로 재생되게 되고, 이를 통해 콘텐츠 제작자가 동영상 파일의 정상 첨부 여부를 확인할 수 있게 된다.
HTML 생성부(60)는 디자인 템플릿 배치부(30)를 통해 디자인 템플릿이 선택되고, 표준문서파일 첨부부(40) 및 영상 첨부부(50)를 통해 각각의 파일이 첨부되어 콘텐츠 화면부(A)를 통해 미리보기 형식으로 디자인과 첨부된 파일의 정상 여부가 확인되고 나면, 해당 정보를 기초로 HTML5 형식의 웹페이지를 자동으로 생성(변환)하는 구성이다.
이때 HTML 생성부(60)는 콘텐츠 제작자가 첨부한 표준문서파일과 동영상 파일을 메인서버(1)로 전송하여 저장한 다음, 메인서버(1)에 저장된 파일의 경로가 HTML5 파일 내의 파열 경로로 자동 입력되도록 구성될 수 있다.
또한, HTML 생성부(60)는 콘텐츠 제작자가 선택한 디자인 템플릿의 메인서버(1) 내에 저장된 경로가 자동 입력되고, 이와 동시에 디자인 템플릿이 이러닝 콘텐츠 화면에 배치되는 위치와 크기 및 디자인 템플릿의 색상 등의 정보가 HTML5 양식에 맞추어 코드로 변환되어 자동 입력되도록 구성될 수 있다.
이에 더해 HTML 생성부(60)는 표준문서파일 첨부부(40)를 통해 첨부된 문서파일의 폰트 종류, 폰트 크기, 문단 정렬 정보를 추출하여 HTML5 양식에 맞추어 자동으로 입력되고, 이를 통해 콘텐츠 제작자가 표준문서파일로 작성한 본문, 해설 및 문제의 양식이 그대로 유지되도록 구성될 수 있다.
그리고 HTML 생성부(60)는 콘텐츠 제작자가 영상 첨부부(50)의 옵션 버튼을 통해 선택한 동영상 파일의 자동 또는 수동 재생 여부, 동영상의 반복 재생 여부 및 오디오 볼륨 정보가 HTML5 양식에 맞추어 자동으로 입력되도록 구성될 수 있다.
상기와 같은 HTML 생성부(60)를 통해 HTML 파일이 생성되고 나면, 콘텐츠 제작자는 해당 HTML 파일을 실행하여 이러닝 콘텐츠의 정상 동작 여부를 확인하고, 필요시 뒤로가기 또는 취소 버튼을 선택하여 디자인 템플릿을 다시 선택하거나 또는 표준문서파일 첨부부(40) 및 영상 첨부부(50)에 첨부되는 파일을 변경한 다음, HTML 생성부(60)를 통해 HTML 파일을 재생성하게 된다.
저장부(70)는 HTML 파일로 변환된 이러닝 콘텐츠(웹 페이지)가 최종 확인되고 나면, 해당 HTML 파일을 저장하는 것으로, 이때 HTML 파일은 메인서버(1)에 저장되도록 구성되거나 또는 메인서버(1) 또는 스마트기기(2) 중에서 선택하여 저장되도록 구성될 수 있다.
스마트기기(2)는 메인서버(1)에서 제공되는 HTML5 자동 변환용 웹 프로그램 화면이 출력되는 디스플레이(2A)와, HTML5 자동 변환용 웹 프로그램에서 제공되는 디자인 템플릿을 선택하거나 필요한 데이터를 첨부하기 위한 입력장치(2B) 및 HTML5 자동 변환용 웹 프로그램에 첨부하기 위한 데이터가 저장되는 저장장치(2C)를 포함하여 구성되는 것으로, 공지된 다양한 형태의 스마트폰, 태블릿 및 인터넷 접속이 가능한 노트북 및 컴퓨터 중에서 선택되어 구성될 수 있다.
상기와 같은 스마트기기(2)를 통해 콘텐츠 제작자는 HTML5 자동 변환용 웹 프로그램 화면을 통해 디자인 템플릿을 선택하고, 표준문서파일 첨부부(40)를 통해 미리 작성된 표준문서파일을 첨부하며, 상기 영상 첨부부(50)를 통해 미리 촬영된 강의 영상을 첨부한 다음, HTML 생성부(60)를 통해 HTML 파일을 생성하는 것으로 별도의 전용 뷰어가 없이도 인터넷 접속이 가능한 스마트기기를 통해 접속이 가능한 이러닝 콘텐츠(웹페이지)가 생성되게 된다.
이하에서는 본 발명에 따른 HTML5 자동 변환 장치를 통해 HTML5 양식의 파일로 변환되는 방법을 예로 들어 설명한다.
콘텐츠 제작자가 스마트기기(2)를 통해 인터넷에 접속하여 HTML5 자동 변환 장치를 실행하면, 도 4에 도시된 바와 같이 미리 제작된 템플릿이 안내되고, 콘텐츠 제작자는 이러닝 콘텐츠의 디자인과 페이지 수 등을 선택하게 된다(디자인 및 페이지 설정 단계).
위와 같이 이러닝 콘텐츠의 디자인과 페이지 수가 선택되고 나면, 도 5에 도시된 바와 같이 선택된 페이지 별 유형과 페이지 제목을 입력하는 화면으로 전환되게 된다(페이지 유형 및 제목 입력 단계).
여기서 페이지 별 유형은 과제, 본문, 해설, 강의영상, 퀴즈 및 평가 등으로 구성될 수 있고, 콘텐츠 제작자가 페이지 별로 유형을 선택하게 되면, 선택된 유형에 최적화된 템플릿으로 페이지 디자인이 자동 변경되게 된다.
페이지 별 유형이 선택되고 페이지 제목이 입력되고 나면, 도 6에 도시된 바와 같이 각 페이지를 설명하는 내용을 입력하는 화면으로 전환되고, 콘텐츠 제작자는 각 페이지의 설명을 입력하거나 또는 설명 입력을 생략하고 다음 단계를 진행하게 된다(페이지 설명 입력 단계).
위와 같이 페이지 설명 입력이 완료되거나 생략되고 나면, 도 7에 도시된 바와 같이 각 페이지 별로 입력될 내용과 영상 등을 파일로 첨부할 수 있도록 파일 첨부 화면이 나타나고, 콘텐츠 제작자는 각 페이지별 항목에 맞추어 미리 준비된 표준문서파일과 동영상 파일을 첨부한 다음(파일 첨부 단계), HTML 파일 생성(변환)을 진행하게 된다(HTML 파일 생성 단계).
상기와 같이 HTML 파일 생성이 진행되면, 도 8에 도시된 바와 같이 첨부된 표준문서파일의 내용과 동영상파일의 강좌가 각 페이지에 입력되어 출력되고, 콘텐츠 제작자는 생성된 페이지 별 내용을 확인한 다음(검수 단계), HTML 파일로 저장하여 이러닝 콘텐츠 제작을 완료하거나 이전 단계로 되돌아가 수정 작업을 진행하게 된다(수정 및 저장 단계).
이상 설명한 바와 같이 텍스트 파일, 워드 파일 및 Excel 파일과 같이 표준문서파일을 단순히 첨부하는 것만으로 HTML5의 파일로 자동 변환되므로 콘텐츠 제작자가 별도의 코딩 지식이 없더라도 이러닝 콘텐츠를 구성하는 지문 및 해설 등의 내용을 쉽게 추가하고 변경하는 것이 가능하게 된다.
또한, 제공되는 템플릿을 이용하여 지문과 해설의 위치를 쉽게 배치하고, 그 색과 모양을 변경할 수 있으며, 강의 영상의 추가 및 상호 작용 콘텐츠를 쉽게 구성할 수 있고, 그 결과 콘텐츠 제작자가 원하는 다양한 이러닝 콘텐츠를 쉽게 제작할 수 있게 된다.
위에서는 설명의 편의를 위해 바람직한 실시예를 도시한 도면과 도면에 나타난 구성에 도면부호와 명칭을 부여하여 설명하였으나, 이는 본 발명에 따른 하나의 실시예로서 도면상에 나타난 형상과 부여된 명칭에 국한되어 그 권리범위가 해석되어서는 안 될 것이며, 발명의 설명으로부터 예측 가능한 다양한 형상으로의 변경과 동일한 작용을 하는 구성으로의 단순 치환은 통상의 기술자가 용이하게 실시하기 위해 변경 가능한 범위 내에 있음은 지극히 자명하다고 볼 것이다.
1: 메인서버 2: 스마트기기
2A: 디스플레이 2B: 입력장치
2C: 저장장치 10: 디자인 템플릿 저장부
20: 디자인 템플릿 출력부 30: 디자인 템플릿 배치부
40: 표준문서파일 첨부부 50: 영상 첨부부
60: HTML 생성부 70: 저장부
A: 콘텐츠 화면부 B: 버튼 디자인 템플릿
F: 프레임 디자인 템플릿 P: 페이지 디자인 템플릿

Claims (4)

  1. 인터넷을 통해 어디서나 접근 가능하도록 구성되면서 복수의 디자인 템플릿 데이터가 저장되고, 콘텐츠 제작자가 접속하여 콘텐츠를 제작할 수 있도록 HTML5 자동 변환용 웹 프로그램을 제공하는 메인서버(1); 및
    상기 메인서버(1)에서 제공되는 HTML5 자동 변환용 웹 프로그램 화면이 출력되는 디스플레이(2A)와, 상기 HTML5 자동 변환용 웹 프로그램에서 제공되는 디자인 템플릿을 선택하거나 필요한 데이터를 첨부하기 위한 입력장치(2B) 및 상기 HTML5 자동 변환용 웹 프로그램에 첨부하기 위한 데이터가 저장되는 저장장치(2C)를 포함하는 인터넷 접속 가능한 스마트기기(2);
    를 포함하고,
    상기 메인서버(1)는,
    JPG, JPEG 및 PNG 파일 중에서 선택된 어느 하나의 파일로 생성된 복수 개의 페이지 디자인 템플릿(P), 복수 개의 프레임 디자인 템플릿(F) 및 복수 개의 버튼 디자인 템플릿(B)을 포함하는 디자인 템플릿 저장부(10);
    상기 디자인 템플릿 저장부(10)에 저장된 상기 복수 개의 페이지 디자인 템플릿(P), 복수 개의 프레임 디자인 템플릿(F) 및 복수 개의 버튼 디자인 템플릿(B)을 카테고리 별로 분류하여 상기 디스플레이(2A)를 통해 순차적으로 출력시키는 디자인 템플릿 출력부(20);
    상기 디자인 템플릿 출력부(20)를 통해 순차적으로 출력되는 상기 복수 개의 페이지 디자인 템플릿(P), 복수 개의 프레임 디자인 템플릿(F) 및 복수 개의 버튼 디자인 템플릿(B) 중에서 선택된 디자인 템플릿을 콘텐츠 화면부(A)에 배치시키는 디자인 템플릿 배치부(30);
    상기 콘텐츠 화면부(A)에 출력될 내용이 표준문서파일로 첨부되도록 구성되는 표준문서파일 첨부부(40);
    상기 콘텐츠 화면부(A)에 출력될 강의 영상이 동영상 파일로 첨부되도록 구성되는 영상 첨부부(50);
    상기 표준문서파일 첨부부(40) 및 영상 첨부부(50)를 통해 첨부된 파일을 상기 메인서버(1)로 업로드한 다음, 해당 파일이 저장된 경로 정보를 생성하고, 선택된 디자인 템플릿 정보와 생성된 파일 경로 정보를 기초로 HTML5 파일을 생성하는 HTML 생성부(60);
    상기 HTML 생성부(60)를 통해 생성된 HTML 파일을 저장하는 저장부(70);
    를 포함하고,
    상기 스마트기기(2)를 통해 출력되는 HTML5 자동 변환용 웹 프로그램 화면을 통해 디자인 템플릿이 선택되고, 상기 표준문서파일 첨부부(40)를 통해 표준문서파일로 작성된 내용이 첨부되며, 상기 영상 첨부부(50)를 통해 미리 촬영된 강의 영상이 첨부되는 것으로 HTML5 파일 형식의 웹 페이지가 생성되도록 구성되며,
    상기 표준문서파일 첨부부(40)는,
    상기 스마트기기(2)의 저장장치(2C)에 저장된 파일이 선택되면, 자동으로 해당 파일의 경로가 입력되도록 구성되고, 표준문서파일의 경로가 입력되면, 해당 파일을 메인서버(1)로 전송하기에 앞서 임시 저장하는 업로드 버튼이 노출되도록 구성되며, 업로드시 표준문서파일이 임시 저장됨과 동시에 콘텐츠 화면부(A)에 해당 내용이 미리보기 형식으로 출력되도록 구성되고,
    상기 표준문서파일 첨부부(40)는,
    본문, 해설, 문제의 항목을 포함하는 복수 개의 표준문서파일 첨부부(40)로 구성되며,
    상기 표준문서파일 첨부부(40)를 통해 첨부되는 파일은,
    텍스트 파일(txt), 워드 파일(docx, hwp, rtf) 및 Excel 파일(elsx, xls) 중에서 선택되는 어느 하나 이상으로 구성되고,
    상기 영상 첨부부(50)는,
    첨부되는 동영상 파일의 자동 또는 수동 재생 여부, 동영상의 반복 재생 여부 및 오디오 볼륨 정보를 설정하는 옵션 버튼을 포함하고,
    상기 HTML 생성부(60)는,
    상기 옵션 버튼을 통해 선택된 동영상 파일의 자동 또는 수동 재생 여부, 동영상의 반복 재생 여부 및 오디오 볼륨 정보가 HTML5 양식에 맞추어 자동으로 입력되도록 구성되며,
    상기 HTML 생성부(60)는,
    상기 표준문서파일 첨부부(40)를 통해 첨부된 문서파일의 폰트 종류, 폰트 크기, 문단 정렬 정보가 HTML5 양식에 맞추어 자동으로 입력되도록 구성되고,
    안내되는 미리 제작된 템플릿 중에서 이러닝 콘텐츠의 디자인과 페이지 수 등을 선택하는 디자인 및 페이지 설정 단계;
    상기 디자인 및 페이지 설정 단계에서 선택된 페이지 별 유형과 페이지 제목을 입력하는 페이지 유형 및 제목 입력 단계;
    상기 페이지 유형 및 제목 입력 단계 후, 각 페이지의 설명을 입력하는 페이지 설명 입력 단계;
    상기 페이지 설명 입력 단계 후, 각 페이지 별로 입력될 내용과 영상을 미리 준비된 표준문서파일과 동영상 파일로 첨부하는 파일 첨부 단계;
    상기 파일 첨부 단계 후, HTML 파일 생성(변환)을 진행하는 HTML 파일 생성 단계;
    각 페이지에 입력되어 출력되는 첨부된 표준문서파일의 내용과 동영상파일의 강좌를 확인하는 검수 단계; 및
    상기 검수 단계 후, HTML 파일로 저장하여 이러닝 콘텐츠 제작을 완료하거나 이전 단계로 되돌아가 수정 작업을 진행하는 수정 및 저장 단계로 이루어지는 것을 특징으로 하는 이러닝 콘텐츠 제작을 위한 HTML5 자동 변환 방법.
  2. 청구항 1에 있어서,
    상기 HTML 생성부(60)는,
    상기 디자인 템플릿 배치부(30)를 통해 배치된 디자인 템플릿의 저장경로, 위치, 색상 및 크기 정보가 HTML5 양식에 맞추어 자동으로 입력되는 것을 특징으로 하는 이러닝 콘텐츠 제작을 위한 HTML5 자동 변환 방법.
  3. 삭제
  4. 삭제
KR1020230109056A 2023-08-21 2023-08-21 이러닝 콘텐츠 제작을 위한 html5 자동 변환 방법 KR102620692B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020230109056A KR102620692B1 (ko) 2023-08-21 2023-08-21 이러닝 콘텐츠 제작을 위한 html5 자동 변환 방법

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020230109056A KR102620692B1 (ko) 2023-08-21 2023-08-21 이러닝 콘텐츠 제작을 위한 html5 자동 변환 방법

Publications (1)

Publication Number Publication Date
KR102620692B1 true KR102620692B1 (ko) 2024-01-03

Family

ID=89538719

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020230109056A KR102620692B1 (ko) 2023-08-21 2023-08-21 이러닝 콘텐츠 제작을 위한 html5 자동 변환 방법

Country Status (1)

Country Link
KR (1) KR102620692B1 (ko)

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100808650B1 (ko) * 2006-10-31 2008-02-29 갤럭시게이트(주) 인터넷을 이용한 유언장 기록시스템 및 그 방법
KR20110123334A (ko) * 2010-05-07 2011-11-15 (주)코아블루 가상현실 교육 시스템 제작 도구 및 방법
KR101493835B1 (ko) * 2014-02-04 2015-02-17 주식회사 이디 웹 서버를 기반으로 전자 장치의 교육 컨텐츠 저작 및 장치 제어를 제공하는 교육 장치, 교육 시스템 및 교육 방법
KR101519381B1 (ko) 2013-12-31 2015-05-13 서강대학교산학협력단 Ｈｔｍｌ５를 이용하여 웹 어플리케이션을 제작하는 방법 및 장치
KR101525519B1 (ko) 2013-11-21 2015-06-03 (주)판도라티비 Html5를 기반으로 하는 오프라인상에서의 웹브라우징 방법
KR20150079867A (ko) 2012-11-06 2015-07-08 라야박스 인코포레이티드 Html5-프로토콜 기반 웹페이지 표시 방법 및 장치
KR20170096349A (ko) 2016-02-16 2017-08-24 주식회사 크레넷 전자 출판 조판 문서와 워드프로세서, 프리젠테이션 전자 문서를 html5 문서로 변환 할 때 메타데이터를 전달하는 방법 및 이를 이용한 변환기
KR102081019B1 (ko) * 2019-03-05 2020-02-24 민상일 융합 교육 관리 시스템 및 그 방법

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100808650B1 (ko) * 2006-10-31 2008-02-29 갤럭시게이트(주) 인터넷을 이용한 유언장 기록시스템 및 그 방법
KR20110123334A (ko) * 2010-05-07 2011-11-15 (주)코아블루 가상현실 교육 시스템 제작 도구 및 방법
KR20150079867A (ko) 2012-11-06 2015-07-08 라야박스 인코포레이티드 Html5-프로토콜 기반 웹페이지 표시 방법 및 장치
KR101525519B1 (ko) 2013-11-21 2015-06-03 (주)판도라티비 Html5를 기반으로 하는 오프라인상에서의 웹브라우징 방법
KR101519381B1 (ko) 2013-12-31 2015-05-13 서강대학교산학협력단 Ｈｔｍｌ５를 이용하여 웹 어플리케이션을 제작하는 방법 및 장치
KR101493835B1 (ko) * 2014-02-04 2015-02-17 주식회사 이디 웹 서버를 기반으로 전자 장치의 교육 컨텐츠 저작 및 장치 제어를 제공하는 교육 장치, 교육 시스템 및 교육 방법
KR20170096349A (ko) 2016-02-16 2017-08-24 주식회사 크레넷 전자 출판 조판 문서와 워드프로세서, 프리젠테이션 전자 문서를 html5 문서로 변환 할 때 메타데이터를 전달하는 방법 및 이를 이용한 변환기
KR102081019B1 (ko) * 2019-03-05 2020-02-24 민상일 융합 교육 관리 시스템 및 그 방법

Similar Documents

Publication Publication Date Title
CN114035773B (zh) 一种基于配置的低代码开发表单方法、系统及装置
US11249622B2 (en) Computerized system for creating interactive electronic books
US10534842B2 (en) Systems and methods for creating, editing and publishing cross-platform interactive electronic works
US9880709B2 (en) System and method for creating and displaying previews of content items for electronic works
Dean Web programming with HTML5, CSS, and JavaScript
US20030037076A1 (en) Method, computer program and system for style sheet generation
JP2007104627A (ja) テンプレート式マルチメディア双方向編集器及びその編集方法
CN104317563A (zh) 一种在线课件协作开发系统
CN101714133A (zh) 一种基于web的数学公式编辑系统及方法
US11756528B2 (en) Automatic generation of videos for digital products using instructions of a markup document on web based documents
US20100100807A1 (en) Data processing device, and data processing method
JP4566196B2 (ja) 文書処理方法および装置
KR102620692B1 (ko) 이러닝 콘텐츠 제작을 위한 html5 자동 변환 방법
JP4627530B2 (ja) 文書処理方法および装置
KR20080010614A (ko) 웹브라우저상에서 동작하는 웹 어플리케이션의 제공 방법및 그 기록매체
JP3531579B2 (ja) マルチメディア文書生成装置及び方法、及びこれらをコンピュータに実行させるプログラムを記録した記録媒体
CN115309476A (zh) 一种基于浏览器的ofd文件显示和编辑方法
KR102263458B1 (ko) 전자책 파일 생성 방법 및 장치
JP2007183849A (ja) 文書処理装置
US10915599B2 (en) System and method for producing transferable, modular web pages
JPWO2005098659A1 (ja) 文書処理装置及び文書処理方法
KR101161693B1 (ko) 객체지향이며 ｘｍｌ기반으로 하는 컨텐츠 편집 솔루션을 갖춘 ｃｍｓ
Bittar et al. Accessible organizational elements in wikis with model-driven development
JP6302943B2 (ja) 電子図書の表示用テキストデータの作製方法
JPWO2006137561A1 (ja) グラフ処理装置

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