본 논문에서는 Html, CSS, JavaScript, Dhtml 등의 웹 언어를 자기주도적으로 학습할 수 있는 웹-기반 코스웨어를 설계하고 구현하였다. 각 단원별로 이론 학습 및 동영상 학습, 실습, 형성평가, 과제실과 자유 게시판으로 이루어져 있으며, 교수자가 그러한 학습내용을 토대로 평가가 가능하도록 하여 웹상에서 교육, 평가, 성적을 처리할 수 있도록 구현하였다. 특히, 한 화면에서 동영상을 보면서 화면의 이동 없이 따라하며 실습하고 결과보기를 할 수 있어, 웹 언어 학습 내용을 학습자 스스로 충분히 숙지하고 실습할 수 있는 웹-기반 학습 환경을 제공한다. 이를 통하여 학습자는 텍스트로 즉각적으로 이해하기 어려운 웹 언어를 효율적으로 실습해 볼 수 있어 학습 이해도를 높일 수 있고 학습자가 주도적으로 학습에 참여하여 흥미를 높일 수 있게 하였다.
본 논문에서는 Html, CSS, JavaScript, Dhtml 등의 웹 언어를 자기주도적으로 학습할 수 있는 웹-기반 코스웨어를 설계하고 구현하였다. 각 단원별로 이론 학습 및 동영상 학습, 실습, 형성평가, 과제실과 자유 게시판으로 이루어져 있으며, 교수자가 그러한 학습내용을 토대로 평가가 가능하도록 하여 웹상에서 교육, 평가, 성적을 처리할 수 있도록 구현하였다. 특히, 한 화면에서 동영상을 보면서 화면의 이동 없이 따라하며 실습하고 결과보기를 할 수 있어, 웹 언어 학습 내용을 학습자 스스로 충분히 숙지하고 실습할 수 있는 웹-기반 학습 환경을 제공한다. 이를 통하여 학습자는 텍스트로 즉각적으로 이해하기 어려운 웹 언어를 효율적으로 실습해 볼 수 있어 학습 이해도를 높일 수 있고 학습자가 주도적으로 학습에 참여하여 흥미를 높일 수 있게 하였다.
In this paper, we design and implement a web-based courseware where learners can do self-directed learning to study Web programming languages such as Html, CSS, JavaScript and Dhtml. Each section consists of text class, movie class, practice class, formative assessment, laboratory and bulletin board...
In this paper, we design and implement a web-based courseware where learners can do self-directed learning to study Web programming languages such as Html, CSS, JavaScript and Dhtml. Each section consists of text class, movie class, practice class, formative assessment, laboratory and bulletin board. And our courseware makes teachers to teach, assess and give scores to learners on Web. In our Web courseware, learners can play a movie class and practice Web programming codes in one screen simultaneously, and execute codes and confirm a results in the same screen also. Therefore, learners can understand Web programming languages efficiently, which are hard to understand immediately by text.
In this paper, we design and implement a web-based courseware where learners can do self-directed learning to study Web programming languages such as Html, CSS, JavaScript and Dhtml. Each section consists of text class, movie class, practice class, formative assessment, laboratory and bulletin board. And our courseware makes teachers to teach, assess and give scores to learners on Web. In our Web courseware, learners can play a movie class and practice Web programming codes in one screen simultaneously, and execute codes and confirm a results in the same screen also. Therefore, learners can understand Web programming languages efficiently, which are hard to understand immediately by text.
* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.
문제 정의
본 논문은 학습자가 홈페이지에서의 기본인 웹 프로그래밍 언어를 습득하는데 겪는 많은 어려움을 해소해 주기 위해 다음과 같은 학습 이론에 중점을 두어 웹 기반 학습시스템을 설계하였다. 학습자의 자기주도적 학습을 위해 텍스트로 제공되는 이론 학습뿐만 아니라 동영상 학습을 제공하고, 학습자가 동영상을 보면서 직접 학습 내용을 실습을 하고 동일한 화면에서 실습에 대한 결과를 확인할 수 있는 실습환경을 제공한다.
여기서 학습자 DB란 학습시스템에 접근 가능한 학습자 리스트로, 이 시스템에서는 학습자 DB에 있는 학습자만 로그인 과정을 통해서 학습시스템에 접근이 가능하도록 하였다. 또한 전반적인 학습에 대한 공지사항을 학습자에게 보여줄 수 있도록 하였다.
본 논문에서는 웹 프로그래밍 작성 언어인 Html, CSS, JavaScript, Dhtml의 학습 내용을 학습자 스스로 충분히 숙지하고 자기주도적으로 실습할 수 있는 웹기반 코스웨어를 설계하고 구현하였다.
제안 방법
학습자는 본 코스웨어를 통하여 텍스트로 즉각적으로 이해하기 어려운 웹 언어를 동영상을 보면서 동시에 효율적으로 실습해 볼 수 있어 학습 이해도를 높일 수 있고 학습자가 주도적으로 학습에 참여하여 흥미를 높일 수 있다. 특히, Html, CSS, Html, Dhtml 등의 다양한 웹 프로그래밍 언어에 대한 작동원리와 간단한 예제부터 시작해서 실제 자주 사용되는 예제를 학습자가 효과적으로 학습할 수 있도록 하였고, 또한 교수자가 그러한 학습 내용을 토대로 평가가 가능하도록 하여 웹상에서 교육, 평가, 성적을 처리할 수 있도록 구현하였다. 다양한 웹 툴들을 학습할 수 있고, 코드를 입력하면 바로 실행된 결과 화면을 볼 수 있도록 하여 웹 화면과 소스의 비교 분석을 용이하게 구현하였다.
본 논문에서 개발한 학습시스템에서는 Html, JavaScript, CSS, Dhtml 등의 다양한 웹 프로그래밍 언어의 작동원리와 간단한 예제부터 시작해서 실제 자주 사용되는 예제를 학습자가 효과적으로 공부할 수 있도록 하였고, 교수자가 그러한 학습내용을 토대로 평가가 가능하도록 하여 웹상에서 교육, 평가, 성적을 처리할 수 있도록 하였다. 이러한 전체시스템 구성을 그림으로 나타내면 [그림 2]와 같다.
5.X 버전에서 검증되었으며 웹서버는 Windows 서버 운영체제에서 동작하는 ASP가 내장된 IIS 5.0을 사용하였고 웹 프로그램의 작성은 일반 편집 프로그램을 사용하여 ASP 언어를 사용하였다. 데이터베이스 환경은 MS의 MS-SQL 2000을 사용하였으며 웹 프로그램에서 DB 접속은 저장프로시저를 일부 사용하였다.
화면의 윗부분에서 Html, CSS, JavaScript, Dhtml 등의 웹 프로그래밍 언어 목록 중 하나를 선택하고, 그 밑 부분에서 해당 언어의 특정 단원을 선택하면, 해당 동영상을 화면의 왼쪽에서 재생해 볼 수 있다. 학습자가 동영상을 보면서 직접 실습을 할 수 있도록 동영상 부분과 실습 부분으로 나누어 구성한다. 화면의 오른쪽 아래 부분에 있는 <미리보기>를 누르면 재생버튼을 누르면 동영상은 재생되어지고, 학습자가 동영상 자료를 보면서 ‘따라하기’ 화면 (화면의 오른쪽)에 직접 코드를 입력할 수 있다.
학습동영상 플레이어 오른쪽에 웹 에디터 영역을 include하여 직접 코드를 입력하면서 따라하고 또한 바로 결과 화면을 볼 수 있도록 처리하였다. 웹 에디터는 효과적인 웹 화면을 구성하는데 필요한 기본적인 태그와 스타일을 아이콘화 시켜 웹 문서 작성에 비교적 많이 쓰이는 태그들을 효과적으로 학습할 수 있도록 하고 있다.
실습강의실의 ‘따라하기’의 에디터의 모든 동작을 자바스크립트를 통해서 제어하고 있는데 사용자와 상호작용을 위해서는 사용자가 원하는 어떤 동작을 했는지를 감지하여 처리하게 되는데, 그 감지된 내용이 이벤트(event)이고 JavaScript 수행의 순서를 정의한 이벤트 처리자(event handler)가 내장된 기능인 메서드(method)나 함수(function)를 호출하거나 제시된 일련의 자바스크립트 코드를 수행하여 동작하게 되어있다. 재생되는 동영상을 보면서 코딩을 동시에 할 수 있게 하고, 상용 프로그램인 컴포넌트를 구성하여 학습자가 도구를 선택하면 자동으로 태그가 Html문서에 플러그 삽입을 통해 문서에 포함시킬 수 있도록 하였다. 그리고 학습자가 직접 태그를 이용하여 웹 페이지를 만들어 볼 수 있다.
실습강의실의 ‘새로쓰기’를 클릭하면 이전에 작성했던 코딩은 없어지고 빈 화면으로 되어 새로운 코딩을 연습할 수 있다. 컴포넌트 도구를 이용하여 필요한 부분은 제공된 툴(tool)을 이용하여 자유롭게 원하는 곳에 태그를 추가하거나 적용할 수 있도록 하였다.
관리자로 접속했을 때 관리자 로그인을 하면 강좌를 올릴 수 있는 화면이 나오고, access DB를 이용해서 DB화 시켜 동적으로 메뉴를 추가, 수정, 삭제가 가능하도록 하였다. 강좌들은 관리자만 올릴 수 있는데 [그림 13]와 같이 왼쪽 메뉴에서 ‘+’를 누르면 등록과 수정을 할 수 있다.
Html, CSS, Javascript, Dhtml 등의 다양한 웹 프로그래밍 언어에 대한 이론 학습과 간단한 예제부터 시작해서 실제 자주 사용되는 예제를 학습자가 효과적으로 실습할 수 있도록 하였고, 형성평가, 과제실, 팁, 자유게시판 등의 기능을 제공하여 웹상에서 교육, 평가, 성적을 처리할 수 있도록 구현하여 학습자와 교수자간의 다양한 상호작용이 가능하도록 하였다.
대상 데이터
본 논문에서 구현한 학습시스템의 개발환경은 크게 웹서버 환경, 웹 클라이언트 환경, 데이터베이스 환경으로 구성된다. 실습강의실의 웹 브라우저는 IE6, IE7, FF1.
성능/효과
본 논문에서 구현한 코스웨어에서는 교수자는 수업에서 예제 코드를 제시하면서 해당 코드에 대한 실행 화면을 바로 보여줄 수 있고, 학습자가 웹으로 수업 내용을 학습하는 경우에는 교수의 수업에 대한 동영상을 보면서 학습자는 교수자가 동영상에서 제시하는 코드를 화면의 이동 없이 한 화면에서 실시간으로 바로 따라하면서 이의 실행결과도 즉각 확인할 수 있어 효율적으로 웹 프로그래밍 작성 언어를 익힐 수 있다. 학습자는 본 코스웨어를 통하여 텍스트로 즉각적으로 이해하기 어려운 웹 언어를 동영상을 보면서 동시에 효율적으로 실습해 볼 수 있어 학습 이해도를 높일 수 있고 학습자가 주도적으로 학습에 참여하여 흥미를 높일 수 있다.
특히, Html, CSS, Html, Dhtml 등의 다양한 웹 프로그래밍 언어에 대한 작동원리와 간단한 예제부터 시작해서 실제 자주 사용되는 예제를 학습자가 효과적으로 학습할 수 있도록 하였고, 또한 교수자가 그러한 학습 내용을 토대로 평가가 가능하도록 하여 웹상에서 교육, 평가, 성적을 처리할 수 있도록 구현하였다. 다양한 웹 툴들을 학습할 수 있고, 코드를 입력하면 바로 실행된 결과 화면을 볼 수 있도록 하여 웹 화면과 소스의 비교 분석을 용이하게 구현하였다.
학습자들의 학습 활용을 위하여 각종 이미지와 수업 외의 자료들을 게시하여 참고할 수 있도록 준비하고, 학습자들에게 학습에 필요한 참고사이트들을 안내해 줌으로써 학습의 효과와 지적호기심을 충족할 수 있게 한다. 학습에 필요한 이미지자료, 소스자료, 그리고 실생활에 유용한 자료 등을 제시하여 학습자들이 보다 완성도를 높일 수 있도록 하였다.
‘이 시스템을 이용하면서 학습에 가장 도움이 되는 부분은 무엇인가?’라는 질문에는 ‘동영상’을 선택한 학생이 1명, ‘실습 내용의 즉각적인 실행 결과 확인’을 선택한 학생이 1명, ‘동영상을 보면서 실습을 따라하고 실행 결과를 확인할 수 있는 점’을 선택한 학생이 13명으로 본 시스템의 특징인 한 화면에서 동영상을 보면서 실습 내용을 실시간으로 바로 따라하고 실행결과도 즉각 확인할 수 있는 점에서 학습에 도움을 받고 있는 것으로 조사되었다. 설문지 분석 결과 본 시스템을 이용하여 웹 프로그래밍 작성 언어를 효율적으로 익힐 수 있음을 확인할 수 있었다.
본 시스템에서는 학습자는 교수자가 동영상에서 제시하는 코드를 화면의 이동 없이 한 화면에서 실시간으로 바로 따라하면서 이의 실행결과도 즉각 확인할 수 있어, 학습자는 텍스트로 즉각적으로 이해하기 어려운 웹 프로그래밍 작성 언어를 효율적으로 익힐 수 있다.
질의응답
핵심어
질문
논문에서 추출한 답변
코스웨어란 무엇으로 정의되는가?
여기서 코스웨어란 “컴퓨터를 통하여 특정한 교과내용을 학생들에게 교육시킬 목적으로 제작된 교수-학습용 프로그램으로서 교과내용이 담겨져 있는 소프트웨어”로 정의되어 진다[1]. 또한, 자기주도적인 학습이란 학습자 스스로 학습 목표를 설정하고 학습 과정 및 학습자원을 결정하여 학습을 수행하고 학습 결과를 스스로 평가하는 일련의 학습과정을 말한다.
자기주도적인 학습이란 무엇인가?
여기서 코스웨어란 “컴퓨터를 통하여 특정한 교과내용을 학생들에게 교육시킬 목적으로 제작된 교수-학습용 프로그램으로서 교과내용이 담겨져 있는 소프트웨어”로 정의되어 진다[1]. 또한, 자기주도적인 학습이란 학습자 스스로 학습 목표를 설정하고 학습 과정 및 학습자원을 결정하여 학습을 수행하고 학습 결과를 스스로 평가하는 일련의 학습과정을 말한다.
웹 프로그래밍을 학습할 수 있는 방식 중 이혜정이 제공한 방식은 태그 실습 환경과 동영상 자료를 제공해 태그를 학습 사이트에서 직접 입력과 결과 보기가 가능하게 만들었으나, 그 한계점은 무엇인가?
이혜정[2]는 학습자가 스스로 홈페이지에 대한 개념과 홈페이지를 만들기 위한 태그, 기타 응용프로그램의 구성과 사용 방법을 익히도록 태그 실습 환경과 동영상 자료를 제공하였다. 태그를 학습 사이트에서 직접 입력과 결과 보기가 가능하게 만들었으나, 동영상 화면과 태그 실습 화면이 따로 있어 화면을 번갈아 바꾸어 가며 학습해야 되고, 웹 페이지 작성에 대한 다양한 툴을 다루지 않는다. 조규식[3]은 웹 프로그래밍 언어 학습을 위한 웹 코스웨어를 개발하였는데 많은 예제를 보면서 학생 자신이 직접 프로그램을 코딩 연습을 할 수 있도록 한 것이 특징이나 코딩에 대한 결과보기를 제공하지 않으며 동영상에 대한 자료도 제공하지 않는다.
※ AI-Helper는 부적절한 답변을 할 수 있습니다.