선택한 단어 수는 입니다.
최소 단어 이상 선택하여야 합니다.
최소 단어 이상 선택하여야 합니다.
선택한 단어 수는 30입니다.
최대 10 단어까지만 선택 가능합니다.
최대 10 단어까지만 선택 가능합니다.
문제 정의
- 이에 본 연구에서는 서로 다른 스마트 디바이스에서 호환이 안 되는 문제없이 실행되도록 크로스 플랫폼을 지원하는 지레 학습 웹앱을 개발하였다. 그리고 HTML5를 이용한 교육용 웹앱을 통한 스마트 러닝을 운영할 수 있는 방법과 교육적인 가능성을 모색해보고자 한다.
- 본 연구에서 개발한 웹앱이 크로스 플랫폼을 지원하여 다양한 디바이스에서 작동하는지를 확인하기 위해 테스트를 진행하였다. 자세한 테스트 환경은 <표 9>에서 제시하였다.
- 본 연구에서는 교육의 새로운 방법론적 접근인 스마트 러닝을 목적으로 최근 각광을 받고 있는 HTML5를 이용하여 지레 학습 웹앱을 개발하고 교육적 가능성을 살펴보았다.
- 이에 본 연구에서는 서로 다른 스마트 디바이스에서 호환이 안 되는 문제없이 실행되도록 크로스 플랫폼을 지원하는 지레 학습 웹앱을 개발하였다. 그리고 HTML5를 이용한 교육용 웹앱을 통한 스마트 러닝을 운영할 수 있는 방법과 교육적인 가능성을 모색해보고자 한다.
제안 방법
- HTML5Test를 참고하여 웹앱 개발시 주로 사용한 기능을 테스트 요소로 선정하여 테스트 해 본 결과를 에 제시하였다.
- 자세한 테스트 환경은 <표 9>에서 제시하였다. 각 디바이스에서 브라우저를 사용하여 HTML5로 구현한 사이트를 방문하여 확인하는 형식으로 테스트를 진행하였다.
- toDataURL()메서드를 사용하면 해당 이미지를 텍스트 형태의 자료로 저장할 수 있게 되고 이를 DB서버를 사용하여 이를 저장해 두어서 데이터 백업 및 학습자료 공유의 용도로 사용이 가능하다. 공책과 그림판 모두 PHP와 MySQL을 이용한 웹 프로그램을 통하여 데이터베이스와 연동하도록 제작하였다.
- 김태훈(2012)은 초등학생의 인지적 수준에 맞는 주제 중심의 프로젝트 학습에 적합하고, STEAM을 기반으로 한 앱을 통해 실험 및 과제 수행에 적합하며, 교과 간 융합이 가능한 주제로서 <표 7>과 같이 교과 융합 내용을 제시하였다. 과학교과의 무게재기, 수학교과의 비례식, 미술교과의 웃음을 주는 디자인과 연계하여 웹앱을 이용한 STEAM 기반의 학습이 이루어질 수 있도록 지레를 학습 콘텐츠로 선정하였다.[3]
- 개발한 웹앱의 테스트는 구현한 기능이 개발 목표에 맞게 다양한 플랫폼에서 오작동 없이 잘 돌아가는지를 기능적인 측면을 중점적으로 확인하였다. 다양한 디바이스의 확인을 위해 데스크탑, 스마트 패드, 스마트폰에서 확인하였고 각각의 브라우저를 다르게 지정하였다. 또한 운영체제 측면의 크로스 플랫폼 가능여부 확인을 위해서 Windows와 Linux를 비교하였고 이를 위해 가상머신 소프트웨어인 Vmware를 이용하였다.
- 개발하고자 한 웹앱의 가장 큰 목표는 플랫폼을 가리지 않는다는 점이다. 따라서 다양한 디바이스(PC, 스마트폰, 스마트 패드 등)에서 동작이 가능하도록 HTML5와 CSS, Javascript를 이용하여 구현하였다. PC나 스마트폰의 경우 대부분 인터넷이 사용한 경우가 많지만 스마트 패드인 경우 인터넷을 사용하지 못하는 경우가 많이 발생하기 때문에 데이터를 저장, 로드 할 수 있게 DB 서버를 이용하도록 설계하였다.
- 데스크탑과 스마트 디바이스는 입력 방식이 마우스와 터치로 서로 다르기 때문에 이벤트 리스너를 따로 등록해주어야 한다. 마우스로 입력을 하는 데스크탑의 Mousedown, Mousemove, Mouseup이벤트를 사용하고 터치를 통해 입력하는 스마트 디바이스는 Touchstart, Touchmove, Touchend 이벤트를 사용하였다. 사용자가 어떠한 디바이스를 사용하느냐에 따라 이벤트 리스너를 선택해야 하므로 각 브라우저에서 보내는 userAgent 문자열을 받아 브라우저를 식별하도록 하였고 이를 통해 디바이스에서 사용할 이벤트 리스너를 결정하는 방식을 사용하였다.
- 본 연구에서 개발한 웹앱의 교육적 가능성을 살펴보기 위해 전문가 평가의 방법을 사용하였다. 평가에 참여한 전문가 집단은 총 8명으로 초등교육과 컴퓨터 교육 전문가로서 교직경력이 5년 이상인 현직 초등교사이면서 초등컴퓨터교육을 전공한 석사 학위 이상인 전문가들로 구성하였다.
- 본 연구에서 개발한 웹앱의 교육적 가치와 활용 가능성과 수정 · 보완해야 할 사항들을 정확하게 진단하기 위하여 평가 문항을 개발하여 적용하였다.
- 마우스로 입력을 하는 데스크탑의 Mousedown, Mousemove, Mouseup이벤트를 사용하고 터치를 통해 입력하는 스마트 디바이스는 Touchstart, Touchmove, Touchend 이벤트를 사용하였다. 사용자가 어떠한 디바이스를 사용하느냐에 따라 이벤트 리스너를 선택해야 하므로 각 브라우저에서 보내는 userAgent 문자열을 받아 브라우저를 식별하도록 하였고 이를 통해 디바이스에서 사용할 이벤트 리스너를 결정하는 방식을 사용하였다.
- 웹앱이 다양한 디바이스를 지원해야 하므로 특히 스마트폰의 작은 디스플레이를 고려해 뷰포트(ViewPort) 기능을 사용하여 스마트폰에서 글자가 작게 보이지 않도록 설정하였다. 뷰포트를 선언하는 메타태그는 데스크탑의 브라우저에는 영향을 미치지 않으므로 웹앱 개발 시 개발자의 의도에 맞게 디스플레이를 조절할 수 있다.
- (그림 6)은 그림판의 동작 화면이다. 이미지 기반의 그림판은 캔버스를 이용하여 구현하였다. 캔버스를 png 나 jpg로 파일로 변환하는 함수인 canvas.
- 본 연구에서 개발한 웹앱의 교육적 가치와 활용 가능성과 수정 · 보완해야 할 사항들을 정확하게 진단하기 위하여 평가 문항을 개발하여 적용하였다. 전문가들에게 웹앱 실제 시연을 통해 개발 의도와 사용 방법을 간단하게 안내하였고 각각의 전문가들은 직접 스마트폰과 데스크탑 브라우저를 활용하여 웹앱을 사용해보고 설문에 응하는 방식으로 진행하였고 평가 문항에 따라 5단계 Likert 등간 척도를 2.5점 간격으로 체크하거나 의견을 선택 및 서술하는 방식으로 사용하였다.
- 학습 내용을 저장하고 다른 학습자들과 공유하기 위해서 텍스트 기반의 공책과 이미지 기반의 그림판을 구현하였다. 텍스트 기반의 공책은 HTML5에서 지원하는 웹 스토리지 중 로컬 스토리지에 저장을 하도록 제작하였다. 로컬 스토리지에 저장이 되면 창을 닫아도 계속 남아 있기 때문에 사용자가 다시 그 페이지에 접속하였을 경우 그 값을 가져와서 데이터를 계속 사용할 수 있다는 장점이 있다.
- 학습 내용을 저장하고 다른 학습자들과 공유하기 위해서 텍스트 기반의 공책과 이미지 기반의 그림판을 구현하였다. 텍스트 기반의 공책은 HTML5에서 지원하는 웹 스토리지 중 로컬 스토리지에 저장을 하도록 제작하였다.
- 학습자가 지레의 힘점, 받침점, 작용점을 이해하기 쉽도록 일상생활에서 지레를 사용한 생활용품 속의 힘점, 받침점, 작용점을 찾는 게임을 개발하였다. 게임은 HTML5의 Canvas를 사용하였는데 Canvas를 사용하면 간단한 도형으로부터 애니메이션까지 별도의 플러그인 없이 구현할 수 있다는 장점이 있다.
대상 데이터
- Explorer 9는 에서 볼 수 있듯이 HTML5 지원 정도가 다른 브라우저에 비해 크게 낮은 편이기 때문에 테스트에서 제외하려고 했으나 국내에서 가장 많이 사용하는 브라우저이고 베타 버전인 10은 HTML5 지원을 강화하는 계획을 발표하는 등 테스트 비교대상으로 의미가 있다고 판단되어 최종 테스트에 포함하였다.
- 개발한 웹앱을 테스트하기 위해 총 3가지의 디바이스를 사용하였고 각 디바이스 별 하드웨어와 브라우저 정보는 와 같다.
- 지레를 학습하기 위한 웹앱은 (그림 3)의 총 4개의 활동으로 콘텐츠로 구성하였다.
- 본 연구에서 개발한 웹앱의 교육적 가능성을 살펴보기 위해 전문가 평가의 방법을 사용하였다. 평가에 참여한 전문가 집단은 총 8명으로 초등교육과 컴퓨터 교육 전문가로서 교직경력이 5년 이상인 현직 초등교사이면서 초등컴퓨터교육을 전공한 석사 학위 이상인 전문가들로 구성하였다.
데이터처리
- 다양한 디바이스의 확인을 위해 데스크탑, 스마트 패드, 스마트폰에서 확인하였고 각각의 브라우저를 다르게 지정하였다. 또한 운영체제 측면의 크로스 플랫폼 가능여부 확인을 위해서 Windows와 Linux를 비교하였고 이를 위해 가상머신 소프트웨어인 Vmware를 이용하였다. Explorer 9는 <표 4>에서 볼 수 있듯이 HTML5 지원 정도가 다른 브라우저에 비해 크게 낮은 편이기 때문에 테스트에서 제외하려고 했으나 국내에서 가장 많이 사용하는 브라우저이고 베타 버전인 10은 HTML5 지원을 강화하는 계획을 발표하는 등 테스트 비교대상으로 의미가 있다고 판단되어 최종 테스트에 포함하였다.
성능/효과
- com/) 사이트에서는 사용하는 브라우저의 HTML5 지원정도를 확인할 수 있다. 500점을 만점으로 하고 데스크탑 브라우저, 모바일 브라우저 등으로 세부 항목이 나누어져 있으며 사용 중인 브라우저에서 지원하는 세부 옵션까지 확인할 수 있어서 개발자나 사용자 모두 유용한 정보를 얻을 수 있다. 현재 사용되고 있는 브라우저 별 HTML5 지원점수는 <표 4>와 같다[16].
- 개발한 웹앱의 테스트는 구현한 기능이 개발 목표에 맞게 다양한 플랫폼에서 오작동 없이 잘 돌아가는지를 기능적인 측면을 중점적으로 확인하였다. 다양한 디바이스의 확인을 위해 데스크탑, 스마트 패드, 스마트폰에서 확인하였고 각각의 브라우저를 다르게 지정하였다.
- 기존 안드로이드 또는 IOS에서 교육용 앱 개발시에 겪었던 어려움에 대해 질의하였는데 각각 37.5%의 전문가가 유지보수의 난이도가 높은 점과 OS간 호환이 안 된다는 점을 들었다(그림 7).
- 먼저 전문가들의 스마트 러닝에 대한 인식 정도를 알아보기 위해 스마트 러닝에 대한 관심도와 앱 개발 경험을 분석해보았는데 8명의 전문가 모두가 스마트러닝에 대한 관심이 높은 편이고 그 중 7명이 스마트폰에서 활용하는 네이티브 앱을 개발한 경험이 있었다.
- 본 연구에서 개발한 웹앱의 교육적 가치와 실제 수업에 사용할 의사를 묻는 질의에 대해서는 87.5%가 교육의 가치가 높은 편이라고 응답하였고 모든 전문가가 실제 수업에 사용할 가치가 있다고 응답하였다(그림 9).
- 실험 전 각각의 브라우저에서 지원하는 HTML5의 지원 정도를 The HTML5 Test 사이트에서 확인한 결과 Windows 데스크탑의 Chrome 18이 400점, Explorer 9가 138점, 리눅스 데스크탑의 Firefox 10.0.2가 327점, 스마트 패드의 Android 3.2가 237점, 스마트폰의 Opera Mobile 12.00이 369점을 받았다. HTML5Test를 참고하여 웹앱 개발시 주로 사용한 기능을 테스트 요소로 선정하여 테스트 해 본 결과를 <표 11>에 제시하였다.
- 이어 본 연구에서 설계하고 구현한 웹앱의 장점에 대하여서는 실제 현장에서 스마트 디바이스가 없이 투입할 수 있어 교육 공간을 확대하였다는 것을 37.5%, 크로스 플랫폼을 지향할 수 있어 효율적이라는 의견이 25%로 나타났다(그림 8).
- 전문가 평가 분석 결과 본 연구에서 개발한 지레 학습 웹앱을 실제 교육현장에서 적용할 교육적 가치가 있으며 기존의 네이티브 앱에 비해 가지는 장점이 뛰어나 웹앱 방식이 교육용 앱 개발에 충분한 교육적 가치가 있다고 하겠다.
- 테스트 결과 웹앱에서 구현한 기능들이 무리 없이 동작하는 것을 확인할 수 있었다. 다만 브라우저 에 따라 스타일이 조금씩 다르게 나타나는 부분이 있었고 스마트 패드나 스마트폰의 경우 Touchevent를 통해 캔버스에 그림을 그리고 메모를 하는 기능은 세밀한 조작이 어렵다는 점에서 다소 아쉬운 점이 있었다.
후속연구
-
<표 6> 교육용 웹앱 개발 선행연구 분석
분석결과 크로스 플랫폼을 실현할 수 있는 HTML5는 교육용 앱의 가능성과 활용도를 높일 수 있는 대안이 될 수 있을 것이다
. - 앞에서 제시한 것을 종합한다면 교육용 앱의 경우 하드웨어를 사용하는 고성능의 애플리케이션의 구현하는 네이티브 앱보다 개발이 쉽고 유지보수가 쉬우며 다양한 플랫폼에서 사용이 가능하고 스마트 디바이스를 가지지 못한 학생들도 쉽게 접근할 수 있는 웹앱 방식으로 개발하는 것이 더 효율적이라고 판단된다.
- 네이티브 앱이 가지는 장점인 하드웨어 수준의 제어가 힘들다는 점 역시 웹앱이 가지는 한계점이다. 하지만 하이브리드 앱 형태로 제작한다면 하드웨어에 대한 접근이 가능하고 요구사항을 정확하게 분석하고 HTML5가 가지는 다양한 기능을 설계하고 개발한다면 충분히 교육적 가치가 있을 것이다.
※ AI-Helper는 부적절한 답변을 할 수 있습니다.