게이미피케이션 기반 모바일 웹 앱 퀴즈 콘텐츠 저작 모형 연구

1-1 연구의 배경 및 연구 문제

스마트시대의 교육 발전 양상은 ICT 활용교육에서 e러닝, u러닝 그리고 ICT 융합형 에듀테인먼트(Edutainment)로 점진적으로 확장되어 왔다. 새로운 교육 패러다임으로 일컬어지는 스마트 교육의 키워드는 “개별화된 교육”, “맞춤화된 적시학습”, “창의성 중심교육”이다[1]. 그러나 실제 교육 현장에서는 교과과정에 필요한 콘텐츠가 절대 부족하다. 그나마 있는 콘텐츠 대부분은 조립 및 분해가 불가한 네이티브(Native)방식의 앱(App)이 대부분이다. 이렇듯 실제 교육현장에서는 인터랙션(Interaction)이 가능하고 똑똑한(Smart)한 기능이 탑재된 질 높은 콘텐츠를 확보하기가 어려우며, 또한 적시성의 확보도 많은 부분 곤란하여 창의적, 맞춤형 교육이 이루어지지 못하고 있는 것이 현실이다. 이를 해결하기 위한 방법으로 스마트 러닝 환경에서 요구되는 스마트 콘텐츠 저작을 위한 주요 개발 이슈와 기술적 특징을 고찰하고, 교육의 효율 극대화를 위한 방법론으로 “게이미피케이션(gamification)” 이론을 적용하기 위한 게임화 유형과 특성을 분석하고 이를 활용한 퀴즈 콘텐츠를 저작하기 위한 개발 환경을 모색하고자 한다.

게이미피케이션의 주요 적용 분야는 공공 정책, 의료 복지, 교육, 환경 보호 및 기업의 5가지 주요 영역으로 수렴된다. 특히 교육 분야에 있어서 게이미피케이션 기법은 교육 효과와 몰입도를 높이기 위한 방법으로 주목받고 있으며, 이를 토대로 게이미피케이션이 가지는 게임 방식인 시리어스 게임(Serious game), 게임 메카닉스(Game Mechanics), 펀웨어(Funware), 에듀테인먼트(Education + Entertaunment)등의 기법을 교육 콘텐츠에 적용, 체계화함으로써 스마트한 환경에서 교육의 효과와 몰입을 증대시키고자 하였다. 특히 게이미피케이션의 개념 원리인 “ Engagement”와 “Reward”를 주요 키워드로 게이미피케이션의 장점을 수용한 퀴즈 콘텐츠를 교수자가 손쉽게 저작하기 위한 개발 환경을 선행연구 고찰을 통해서 제안할 것이다.

최근에 들어 웹 기술의 발전과 활용은 ICT 환경 전반에 큰 영향을 끼치며 새로운 기술 패러다임의 변화를 만들고 있는데, 그 중에서도 특히 HTML5(Hyper Text Markup Language ver. 5) 웹 표준기술은 기존 웹이 지녔던 단점들을 많은 부분 극복하고 다양한 기능 제공을 통해 웹 이용환경에 큰 변화와 발전을 이루고 있다. 따라서 뉴 미디어 시대의 미래 핵심 플랫폼이자 동시에 차세대 교육 플랫폼으로서 그 역할이 기대된다.

본고에서는 미래 서비스 융·복합 기술 그리고 나아가 교육 콘텐츠 저작 플랫폼으로써 HTML5가 가지는 주요 특징과 시사점 등 기타 주요한 기술을 함께 살펴보고, 이러한 기능들이 진정한 스마트 러닝을 위해 요구되는 환경이라는 것을 세부기술을 통해서 제안하고, 교육 효과의 극대화를 위해서 게이미피케이션 기법을 적용한 사례들을 퀴즈 콘텐츠 모형을 통해서 제안하고자 한다.

1-2 연구의 방법 및 연구 범위

본 연구자의 선행 연구 “스마트교육을 위한 콘텐츠 저작 플랫폼 및 유통 포털 연구”[2]는 본 연구의 결과를 도출하기 위한 기초 이론으로 부득이하게 재인용되었음을 밝힌다. ICT의 발달로 학습 능률을 높이기 위한 교육 패러다임의 변화를 고찰하고, 스마트 러닝의 개념을 정의하고자 한다. 게이미피케이션(Gamification) 개념을 비게임 분야에 게임적 기법을 도입하여 흥미롭게 해당 분야의 효율을 높일 수 있는 방법이라는 것을 선행연구 고찰을 통해서 설명하고, 특히 스마트 러닝을 위한 교육 환경에서 게이미피케이션 기법을 적용하기 위하여 기존 게임화 이론에 근거한 퀴즈 콘텐츠의 개발 방향을 모색한다. 이것을 해결하기 위하여 미래 교육 서비스 융·복합 기술 그리고 나아가 교육 서비스 제공을 위한 교육 플랫폼으로써 웹 표준에 근거한 HTML5의 이슈화된 주요 특징과 시사점을 살펴볼 것이다. 2014년 10월 W3C(World Wide Web Consortium)은 웹 마크업(Markup) 언어로 최종 확정된 웹 표준의 HTML5가 가지는 주요 기능들과 스마트 교육 환경 실현을 위해서 스마트한 기능과 멀티미디어 요소가 적용된 콘텐츠 저작을 위한 개발 환경(Platform)이라는 것을 세부기술 고찰을 통해서 설명할 것 이다. 스마트기능을 적용한 콘텐츠를 저작하기 위한 개발 환경은 교수자가 자신의 교과과정에 필요한 교육 콘텐츠의 구성 요소인 퀴즈, 푸시알림, 멀티미디어요소 등 다양한 스마트기능과 함께 게이미피케이션 기법이 적용된 콘텐츠를 전문기술 없이 직접 만들고 유통할 수 있는 개발 환경을 제안하는 것이며, 각급 학교의 교수자가 직접 만든 콘텐츠가 교과 과정별, 특성별로 분류되고 저장되는 환경과 정부에서 주도하는 학습관리시스템(LMS: Learning Management System)과의 연계 및 공유와 재활용이 가능한 환경을 모색하기 위함이다.

2-1 스마트 러닝(smart-learning) 개요

정보통신 기술의 급속한 발전과 교육 패러다임의 많은 변화와 함께 학습의 능률을 효율적으로 높이고자 하는 노력과 연구가 계속 되고 있다. 1990년대 이후 인터넷 확산과 함께 온라인 학습이 시작되면서 2000년대 이후 Rosenberg[3]에 의해 e러닝이라는 용어가 제안되었고, 그 후 정보통신 기술과 교육 패러다임을 접목하여 기존 교육방법과 차별화되고 정보통신 기술의 장점을 최대한 살려 교육효과를 극대화 시킨다는 목적을 가지고 있는 스마트 러닝에 대한 연구가 지금까지 활발히 이루어지고 있다.

컴퓨터 및 첨단 정보통신 기술의 발전에 따라 e러닝은 최근 스마트 러닝으로 승격해왔다. 스마트 러닝은 스마트 미디어의 개발과 보급, SNS(Social Network Service)의 활성화를 통해 개인 간의 소통과 개인의 사회참여가 증진되는 현상을 학습 환경에 반영한 것이다. 스마트 러닝의 개념 및 특징을 살펴보면 <표 1>과 같다.

Table 1.

Smart Learning Concepts and Features

곽덕훈은 학습자들의 다양한 학습 형태와 능력을 고려하고 학습자의 사고력 소통능력, 문제해결 능력 등의 개발을 높이며 협력학습과 개별학습을 위한 기회를 창출하여 학습을 보다 즐겁게 만드는 학습으로서 장치보다 사람과 콘텐츠에 기반을 둔 발전된 정보통신 기반의 효과적인 학습자 중심의 지능형 맞춤 학습이라고 설명하였고[4], 김성태는 스마트 러닝은 인간중심의 학습 패러다임이라고 설명하고 있다[5]. 그리고 장상현은 지능형, 맞춤형, 자기주도형 등 다양한 형태로 이루어지는 것을 의미한다고 설명하였고[6], 이수희는 스마트 기술을 학습에 이용 하여 차별화된 학습 서비스로 현실감과 몰입감을 증대시키며, 놀이와 학습의 경계를 무의미하게 함으로써 인지능력과 창조적 사고를 증대시키는 학습 형태라고 설명하였다[7]. 그리고 마지막으로 김돈정은 e-러닝의 단점으로 지적되었던 단독 학습에 따른 수요자의 흥미 및 집중력 저하, 낮은 강제성으로 인한 동기부여 부족, 실시간 학습관리기능 부족, 개인화 된 양질의 콘텐츠 부족을 해결할 수 있는 스마트 기반의 학습 형태라고 설명 한다[8]. <표 1>

이전 연구들에 대한 특징들을 정리하면 스마트 러닝은 정보통신 기반의 맞춤학습 매커니즘을 통칭하는 말로 학습자 간 상호작용이 가능하고 자기주도형 학습이 가능한 학습 매커니즘을 뜻한다. 이 매커니즘은 정보 통신 기술을 활용하여 학습하는 e-러닝, 모바일 기기를 이용하여 학습 하는 m-러닝, 유비쿼터스 컴퓨팅(Ubiquitous Computing)기술을 접목 시킨 u-러닝을 포함하는 상위의 개념을 가지고 있다.

그리고 클라우딩(Clouding), 네트워크, 서버, 스마트 디바이스, 임베디드(Embeded)기기 등을 의미하는 스마트 인프라와 맞춤형, 지능형, 집단지성 등을 의미하는 스마트 교육 방식으로 크게 두 가지로 나눌 수 있으며[9], 언제 어디서든 특정한 상황에 국한되지 않고 개인적이고 지능적인 자기주도형 학습이 가능한 것이 가장 큰 특징이다.

2-2 게이미피케이션 기법

게이미피케이션(Gamification)이란 게임의 속성과 재미를 바탕으로 의료, 복지, 문화, 교육 등의 다양한 분야에서 사용자의 인식과 행동을 변화 시키는 프로그램 또는 방법을 말한다[10].

게이미피케이션이란 단어는 2011년 1월 미국 샌프란시스코에서 처음으로 개최한 게이미피케이션 서밋(Gamification Submmit)을 통해서 처음 발표되었으며 발표된 이후 2011년 게임업계 최고의 키워드로 떠올랐다. 게이미피케이션이라는 단어는 ‘게임(game)’에 ‘-化하기(-fication)’또는 ‘게임화(gamify)’에 ‘-하는 행동 또는 상태(-tion)’덧붙인 새로운 신조어이다. 그러나 게이미피케이션은 새로운 이론이 아닌 기존에 있었던 기능성 게임(Serious Game), 게임 메카닉(Game Mechanics), 펀웨어(Funware), 에듀테인먼트(Edutainment) 등의 이론에 의미를 확대, 재해석하여 다른 분야에 전문적으로 적용하는 것이다.

개념적으로 살펴보면, 게이미피케이션은 Web 2.0 으로 대표되는 공유와 참여, 개방성에 기반 한 소셜 네트워크 서비스(SNS)의 확장과 방향을 함께 하고 있다. 여기에는 놀이, 엔터테인먼트 게임, 그리고 기능성 게임(Serious games), 펀웨어(Fun-ware), 에듀테인먼트(Edutainment) 등과 같이 내재적 동기를 높여 몰입을 강화한다는 GameFlow 개념과 학습의 목적을 강화한 E-GameFlow를 포함하고 있다. 특히, 게이미피케이션은 게임의 속성으로 대표되는 포인트, 레벨, 도전, 가상상품, 리더보드 등의 “게임 메카닉(Game Mechanics)”과 보상, 직위, 성취, 자기표현, 경쟁, 이타성 등의 “게임 다이내믹(Game Dynamics)”이 복합적으로 적용된 융합의 산물이라 할 수 있다[11].

2013년 미래 전략컨설팅 그룹인 Gartner가 발간한 ‘Hype Cycle for Emerging Technologies’보고서는 2013년 7월 기준으로 기술적 기대 수준의 절정기(Peak of Inflated Expectation)에 도달한 것을 게이미피케이션으로 보고하고 있다. 즉, 이 하이퍼사이클에 제시된 게이미피케이션의 위치는 글로벌 이슈로서 그 관심과 기대치를 보여주는 것이다[12].

같은 맥락에서 글로벌 시장조사기관인 Deloitte(2013)는 게이미피케이션을 2013년을 대표하는 10대 테크놀로지 트랜드 중 하나로 제시되고 있으며, 2010년 기준으로 시장 규모는 약 1억불(원화 약 1,100억 원)에 이른다고 한다. 한편, 미국의 IT 전문 리서치 컨설턴트 기관인 M2 research는 2012년 2억 4200만 불(원화 약 2,500 억 원)의 시장이 2016년에는 28억불(원화 약 2조 9,900억 원)에 이를 것이라 추정하고 있다[13].

이러한 성장세와 함께, 게이미피케이션에 대한 다양한 개념 정립이 시도되고 있다. Gartner (2013)는 게이미피케이션이란 비게임적인 시나리오에 게임 메커닉을 사용하는 것으로 보았으며,[14] 게이미피케이션 선도 기업인 Bunchball (2010)[15]과 게이미피케이션 관련 연구자들인 Deterding et al.(2011)[16], Al Gore(2011)[17] 등은 사람들의 행동변화를 유도하기 위해 게임 메커닉 등을 활용하여 게임이 아닌 맥락속의 기법이나 활동으로 정의하고 있다. 한편, Zichermann(2011)[18], Huotari & Hamari (2012)[19]은 게임적 사고와 게임 메카닉, 게임적 경험 등을 통해 사람들의 관심을 유발하고 행동을 유도하기 위한 과정으로 개념화하고 있다.

게이미피케이션의 사례로 대표적인 것은 미국 워싱턴 대학 연구진이 개발한 폴드잇(Foldit)이라는 것인데, 이는 소셜 네트워크 서비스를 통한 집단지성활용의 대표적 성공 사례로 꼽히고 있다. 이 서비스는 컴퓨터가 연산하기 어려 운 3D 단백질 구조를 풀어내는 과정에 재미와 게임의 작동원리를 더하여 게임화한 것이다. 출시된 직후 게임 플레이어들 6만 여명이 참여하여, 수년간의 연구 기간이 필요한 단백질 구조 해결법을 단 10여일 만에 밝혀냈다고 한다. 그러한 성과는 네이처(Nature)지에 2010년 등재되었으며, 2011년 네이처 구조ᆞ분자 생물 학회지(Nature Structural and Molecular Biology)에도 연구자들과 더불어 게임 플레이어들의 명단이 함께 등재되었다[20].

게이미피케이션을 통해 효과적으로 관심도를 높이는 방법을 살펴보면 첫 번째 호기심 유발로 게임을 사용하는 유저로부터 감정과 정서적 개연성을 인지한다. 두 번째는 문제를 제시하 여 현실과 관련된 과제를 통해서 자연스럽게 궁금증을 키우게 하고 상호적으로 협력적인 일을 제공한다. 세 번째는 감성적 인식을 통해 개연성을 인식하고 마지막으로 앞에서 얻어진 감성적 인식을 활용하여 긍정적인 행동 패턴을 발생시키게 하는 것이다. 구체적으로 게이미피케이션을 이용해 이용자의 관심도를 높이는 방법은 <표 2>과 같다.

Table 2.

4 ways to increase user interest with gamification

2-3 게이미피케이션의 요소 및 분류

게이미피케이션 요소 항목을 선행연구를 통해서 분류하면 첫째는 ‘보상(Reward)’이다. 미션을 달성했을 때 ‘포인트’를 받게 되는데, 어려운 미션을 달성할수록 더 많은 포인트를 받는다. ‘레벨’은 포인트가 쌓여서 달성된다. 어려운 미션을 달성했을 때 받는 ‘보너스’나 미션을 훌륭한 성적으로 달성했을 때 받는 ‘보너스’도 보상의 한 종류이다.

둘째는 동기부여이다. 달성해야 하는 ‘미션’이나 ‘퀘스트’가 주어지는데 사용자들은 명확한 목표가 있을 때 달성하고자 하는 의지를 갖는다. 또한 주어지는 과제의 난이도는 어렵지만 달성가능한 정도일 때 도전하고자 하는 욕구가 생긴다.

셋째는 ‘경쟁’이다. ‘프로그레스 바’는 자신과 다른 사용자의 성취도를 막대의 길이로 직관적 확인이 가능하도록 해 경쟁을 유도한다. ‘랭킹’은 전체 사용자를 순위로 표시하여 자신이 그 중 몇 순위인지 볼 수 있어 더 높은 순위로 올라가도록 자극받게 한다.

넷째는 ‘성취’이다. 성취감을 극대화시키기 위해서는 도전 의욕을 고취시키기 위한 과제를 제공하고 진행상황이나 결과를 즉각 피드백 해주며 난이도가 높은 과제를 달성했을 때 충분한 보상을 해준다.

Table 3.

Gamification element Previous research item classification

다섯째는 ‘관계’이다. 현재 가장 활발하게 이용되고 있는 카카오톡 게임 시스템에서 친구를 게임에 ‘초대’ 하거나 친구에게 ‘하트보내기’, ‘선물보내기’ 등을 통해 사람들과 소통하게 한 다. SNS(Social Networking Service)와 연동하여 함께 게임하는 사람들과 교류하는 것도 또 다른 예이다<표 3>.

<표 4>와 같이 게이미피케이션의 기법과 구성요소를 간략히 정리하면 성취, 보상, 동기부여, 경쟁 및 관계를 통해서 이루어지는 것을 확인할 수 있다.

Table 4.

Gamification techniques and components

2-4 퀴즈 콘텐츠 저작 기술과 시사점

스마트한 퀴즈 콘텐츠 구현에 필요한 기술 요소와 게이미피케이션 기법 등 스마트 기능이 적용된 콘텐츠를 저작하기 위해서 HTML5 기술의 주요 특징과 시사점을 <표 5>를 통해서 살펴보면, 시멘틱(Semantics)은 지능화된 다양하고 풍부한 웹 문서 표현이 가능한 보다 구조화된 기능의 태그(Tag)를 제공하며, 다양한 종류의 구조화된 템플릿 중에서 하나를 선택하고 컴포넌트 라이브러리 중에 필요한 구성요소를 찾아 선택함으로써 스마트한 콘텐츠 생성을 가능하게 한다.

멀티미디어(Multimedia)는 콘텐츠 저작 환경에서 애니메이션, 게임요소, 음악적 요소들을 제공한다. 해당 요소들을 콘텐츠 내 위치와 동작방법의 정의만으로 교육에 필요한 멀티미디어 기능들이 별도의 외부 플러그인 없이 쉽게 구현과 구동이 가능해졌다.

Table 5.

Key features and implications of HTML5 technology

웹의 한계로 여겨졌던 네트워크 단절시 처리방법과 데이터 저장 기능 문제를 오프라인 & 스토리지(Offline & Storage)를 통해서 웹 이용이 가능토록 지원하고 있다. 모바일 기기의 로컬스토리지(Locol Storage)의 성능 향상은 오프라인 상태에도 콘텐츠 구동이 원활해졌으며, 다시 온라인 환경이 되면 운영되었던 데이터를 액세스할 수 있다. 또한 이미 만들어진 스마트한 콘텐츠를 학생 그룹별로 내용과 순서를 달리하여 여러 종류의 콘텐츠로 로컬스토리지 통해서 데이터베이스, 파일액세스가 가능하다. 사용자는 언제 어디서나 스마트기능이 탑재된 콘텐츠를 이용할 수 있다.

스마트 기능 탑재를 위한 콘텐츠 저작에서 기초 기술이라 할 수 있는 3차원, 그래픽 & 이펙트(3D, Graphics & Effects) 기술은 벡터방식을 지원하는 SVG와 캔버스, WebGL 등을 통해서 2차원, 3차원의 그래픽 처리가 기능하다.

GPS, 카메라, 동작센서 등의 다양한 디바이스의 하드웨어 기능을 웹에서 직접 제어할 수 있는 기능인 디바이스 액세스(Device Access) 기술로 본격적인 웹 앱 개발이 가능하다.

모바일 웹 앱 환경에서의 가장 큰 문제 중 하나였던 성능문제를 퍼포먼스 & 인티그레이션(Performance & Integration)의 비동기 통신, 다중 쓰레드 기능 등으로 모바일 웹 앱 환경에서의 로컬스토리지 향상과 함께 온라인과 오프라인 처리 성능을 대폭 향상시켰다.

모바일 환경에서 통신기능 제공을 통한 응용개발범위를 확대한 커넥티비티(Connectivity)기술은 클라이언트와 서버간의 효율적인 통신기능을 제공하며, 웹 앱 기반의 커뮤니케이션 효율성을 대폭 강화시켰다.

종속형 시트로 불리는 캐스케이딩 스타일 시트(CSS3: Cascading Style Sheets) Styling Effect는 마크업 언어(markup language)가 실제 표시되는 방법을 기술하는 언어로 W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 매우 높기 때문에 스마트교육 컨텐츠 저작 환경에서 기존의 웹 문서의 변형과 성능저하 없이 웹 애플리케이션의 사용자 인터페이스(User Interface UI) 스타일과 그래픽효과 등의 표현력을 크게 향상시켰다. 유저 인터페이스 측면에서의 N-Screen 서비스 제공을 통해서 OSMD(One Source Multi Device)를 지원하며 별도의 과정 없이 여러 종류의 디바이스에 최적화된 콘텐츠를 제공할 수 있다<표 5>.

HTML5 기술의 주요 특징과 시사점을 살펴보면 푸시알림, 평가결과 전송, 오답노트, 맞춤형 학습지도 등 스마트한 기능 제공과 동기부여, 경쟁, 보상 등 게이미피케이션 요소 구현과 다양한 컴포넌트 라이브러리 적용으로 창의적인 맟춤형 학습 환경을 조성할 수 있게 되었다. 진정한 스마트교육 환경을 위한 멀티미디어 환경에서 학습관리시스템(LMS), 학습콘텐츠관리시스템(LCMS: Learning Contents Management System)과의 연동은 필수적이라 할 수 있다. 교육부가 주간하는 디지털교과서의 표준 규격이 ePUB 3.0으로 공표되었으며, 이러한 ePUB 3.0은 HTML5와 CSS3.0을 기반으로 하고 있다. 최근 다양한 산업 분야에서 HTML5의 도입이 두드러지고 있는데, 전자책(e-book) 표준 개발 단체로 잘 알려진 IDPF(International Digital Publishing Forum)에서는 전자 책 표준인 ePub 버전 3에서 HTML5를 핵심 규격으로 채택함으로써 그 동안 ePub 규격의 취약한 단점으로 지적되었던 멀티미디어 처리 기능에 대한 문제점을 많은 부분 극복하였다. HTML5를 기반으로 하는 콘텐츠 저작 환경은 교육부가 주간하는 에듀넷 등 교육 전반의 서브시스템으로 이식이 가능하여, 미래의 스마트교육 환경의 기술적 확장에도 기여할 것으로 예상된다.

스마트교육 콘텐츠용 에듀테인먼트(Edutainment) 통합 저작을 위한 사용자 인터페이스 개발은 HTML5, CSS3, Java Script 기반의 웹 표준 규격 상에서 가능하다. 따라서, 컴포넌트의 선택과 편집, 미리보기 기능을 지원하는 웹 앱(Web-App), 하이브리드 앱(Hybrid-App) 형식으로 콘텐츠 저작 및 분화가 가능한 시스템 환경이 가능하다. 물론, 콘텐츠저작 플랫폼과 연동하여 편집기능을 지원하고 콘텐츠의 변형, 변환 등 추가기능을 적용 할 수도 있다. 스마트한 콘텐츠 개발 에디터에서 선택된 여러 컴포넌트와 편집된 HTML 코드를 조합하여 웹 앱과 하이브리드 앱 생성(App Generator)이 가능하며, HTML5의 3D, Graphics & Effects를 활용한 애니메이션이나 모션그래픽 등을 활용하여 컴포넌트 라이브러리 형식으로 다양하게 제작된 게임팩을 적용할 수 있다. 이는 멀티미디어(Multimedia), 웹 스토리지(Web storage) 등의 실시간 데이터 처리를 위한 스토리지를 제공하고 위치기반 서비스 등의 기타 스마트 기능 제공과 다양한 태그 요소를 활용한 컴포넌트 자체지원을 지향하므로 강력한 스마트 콘텐츠 통합 기술개발이 가능하다[21]

2-5 퀴즈 콘텐츠 관련 기술 항목 및 구조

교수자와 학습자 등 콘텐츠 생산자와 소비자의 구분 없이 콘텐츠의 공유, 변형(repository)을 통한 콘텐츠 분화 및 재생산을 지원하는 롱테일(long-tail)과 집단지성 기반의 유통 생태계로 성장이 가능하다. 스마트교육을 위한 콘텐츠 저작 플랫폼 기술 을 구축을 위한 세부 항목과 스마트 콘텐츠 저작을 위한 기반 기술 항목을 살펴보면 최근 모바일 운영체제 대부분은 오픈소스 웹킷(WebKit)을 탑재하고 있다. 웹킷 기술은 대부분의 모바일 플랫폼에 호환하는 운영체제에 독립적인 모바일 앱이 될 수 있는 기술이다. 웹 앱의 센서, 카메라 등의 디바이스 접근성 문제를 해결하기 위해서는 추가적인 API를 통해서 가능하다.

스마트 러닝을 위한 교육커뮤니티 환경도 각 기업에서 제공하는 오픈 API를 통한 컴포넌트 라이브러리 기술의 적용으로 퀴즈게임 연동 및 컴포넌트 라이브러리 적용 등의 스마트한 기술을 적용함과 동시에 콘텐츠의 생성을 돕는 세부 기술 항목들은 (그림 1)을 통해서 확인할 수 있다.

Fig. 1.

Diagram of technology items related to smart content authoring platform

퀴즈게임 연동기술인 HTML5 Canvas, CSS3/ SVG, Web Worker, Java Scripts, Rich Text Edditor, AJAX, XMLHttpRequest, Drag & Drop과 콘텐츠 생성 기술인 AJAX, JQuery, ASP, Web Storage, Application Cache, Geolocation 등은 스마트한 기능을 지원하는 세부 기술 항목 및 적용기술이 스마트 러닝을 지원하기 위한 차세대 교육 환경의 근간을 이루는 기반 기술이라 할 수 있다. 이와 같은 환경에서 다양한 스마트한 멀티미디어 기능을 적용하기 위한 웹 표준기술을 살펴보면 Semantic Tags, WebGL 3D, Web storage, Web Sockets, Node JS 등의 다양한 로직(Logic)으로 스마트 교육을 위한 퀴즈 콘텐츠를 저작할 수 있는 개발 플랫폼 구현이 가능하다. 이는 학생들에게 “개별화된 교육”, “맞춤화된 적시학습”, “창의성 중심교육”으로 스마트 교육 활성화에 기여할 수 있을 것이다. 특히 게이미피케이션 기법을 적용한 “퀴즈 콘텐츠”를 저작함으로써 학습자에게 흥미와 재미, 몰입 등을 증대시키고 나아가 스마트 교육 환경에서 진정한 커뮤니케이션을 이룰 수 있을 것이다.

3-1 퀴즈 콘텐츠 저작 환경 기술 개요

콘텐츠 저작 플랫폼 개발에 있어 기술적 측면은 표준의 준수 및 스마트 러닝을 위한 플랫폼과의 상호 호환성으로 개발과 운영의 효율성을 증대시키기 위함이다. 퀴즈 콘텐츠 저작 환경은 HTML5와 CSS3.0 기반의 웹 앱(Web App) 자동화 저작 기술로써 표준 규격을 지향하므로 스마트기기의 운영체제와 상관없이 크로스 브라우징이 가능하다. 이는 네이티브 앱 장터를 통하여 심사를 받을 필요 없이 배포가 가능하므로 개발 및 배포비용의 절감에도 기여한다(그림 2).

Fig. 2.

Smart content creation and operation technology diagram

HTML5의 경우는 기존 웹이 갖는 많은 기능적 제약사항을 상당부분 개선시킴으로써 웹의 적용 분야를 획기적으로 넓히고 있으며, 최근 들어 모바일 애플리케이션으로의 광범위한 적용과 함께 IPTV, 스마트TV 등 미디어 유통 서비스 분야에서도 사용자 단말 플랫폼의 핵심기술로 적용되기도 한다.

이처럼 HTML5가 각광받는 이유는 최근 들어 급격히 늘어나는 다양한 단말 환경에서 플랫폼이나 운영체제의 중립적인 서비스 구현을 통해 서로 다른 이용 환경을 효율적으로 지원하고 나아가 서로 다른 도메인 서비스 환경에서의 융·복합 서비스를 쉽게 구현할 수 있기 때문이다. 따라서 HTML5 중심의 차세대 웹 기술은 단순 기술을 넘어서 스마트교육 실현을 위한 플랫폼 기술로도 주목을 받는 이유이다(그림 3).

Fig. 3.

Diagram of smart learning contents authoring method

3-2 게이미피케이션 적용 기술 연구 방법

스마트 러닝을 위하여 게이미피케이션 기법이 적용되고 이를 운용하기 위해서는 Engagement 레벨을 측정할 수 있는 방법론이 만들어져야 한다. 이를 바탕으로 <표 6>와 같이 게이미피케이션 작동 원리를 살펴보면 콘텐츠 내에서 운영되는 규칙과 조작, 혜택 등의 등급에 따른 차별되는 보상 등으로 상호관계에 따른 접근성과 함께 재미요소가 포함되어야 한다.

Table 6.

How gamification Works

웹 표준을 통한 게임 인터렉티브, 증강현실(AR: Augmented Reality), 위치기반서비스(LBS: Location Based Service), SNS 기술 등이 적용되는 패키징 기술, 컴포넌트 라이브러리(Animation, Movie, Test, Drawing, Game, Sound) 및 템플리트 라이브러리 시스템 등 멀티미디어 콘텐츠 구성요소의 규격을 정의하고 함수(Function) 기능의 라이브러리 구성요소를 규격화하는 권고안을 제시하는 표준화 방안이 함께 제안되어야 한다. 이 같은 HTML5 표준은 기존의 HTML4 규격과는 비교가 불가한 많은 변화를 가져왔으며, 기존 HTML 문서 표현 방법에서 보다 구조화된 방법으로 태그(Tag) 확장을 활용해서 풍부하고 다양한 표현이 가능해졌다.

Geolocation API 등의 똑똑한 웹 기반 API 확장을 통해 HTML5는 단순 문서 표현 규격 기능을 넘어 창조적인 애플리케이션 개발을 위한 진정한 멀티미디어 콘텐츠 저작과 유통을 위한 진정한 교육 플랫폼으로서의 자격을 갖추었다. HTML5 웹 표준 기술과 CSS3.0, Java Script 등의 Logic을 활용하여 진정한 스마트 교육콘텐츠 저작 환경 구축을 위해 시스템개발자의 역할은 매우 중요하다. 특히 초기 플랫폼 운영을 위한 표준 및 필수 컴포넌트와 템플리트를 제공해야 하며, 퀴즈, 동영상 처리, 애니메이션, 모둠학습 기능, SNS 연동 등 콘텐츠 저작에 필요한 필수 컴포넌트와 기본적인 스마트 기능을 콘텐츠 저작 플랫폼에 동시에 제공해야 한다. 웹 표준으로 자신이 보유한 데이터를 스마트기능과 멀티미디어 요소를 덧붙여 적용하고, 게이미피케이션 기반 콘텐츠를 Dreg & Drop과 같은 손 쉬운 방법으로 저작할 수 있다(그림 4). 또한 집단지성 기반 콘텐츠 유통 포털을 통해서 콘텐츠의 최초 저작자와 변형, 개선된 콘텐츠간의 연결 관계를 관리하는 콘텐츠 히스토리 관리시스템과 콘텐츠 등록자와 사용자의 사용실적 등을 관리하는 데이터베이스를 통해서 저작권보호법에 기반한 관리시스템도 적용이 가능할 것이다.

보다 안정화된 교육 생태계 구축을 위해 퀴즈 콘텐츠 저작 및 유통을 위한 포털 시스템과 학습관리시스템, 학습콘텐츠관리시스템 연계와 민간사업자의 유료 콘텐츠에 대한 통합관리시스템도 적용이 가능하다. 콘텐츠 저작자와 사용자간의 의견교환이 가능한 커뮤니티와 콘텐츠 분류체계 및 표준 권고안이 마련되어야 진정한 스마트 러닝을 위한 콘텐츠 개발 환경이라 할 수 있을 것이다.

Fig. 4.

Gamification-based quiz content authoring platform and operation portal framework example

3-3 스마트 교육용 콘텐츠 게임화

폴드잇(Foldit)의 성공사례로 점차 게임화에 대한 사람들의 관심도도 높아졌다. 이런 게임화는 교육 분야에 연구와 개발이 집중되는 계기가 되었으며, 특히 이수연의 연구에서‘게임화’가 적용된 스마트폰 어플리케이션에 관한 몰입 및 사용의도에 관한 연구는 그것에 대해 영향을 미치는 요소로서 목표와 경쟁, 상호작용을 제시한다[22].

몰입과 동기유발에 영향을 미치는 첫 번째 요소는 목표이다. 목표에는 보상(reward)과 수준(level)이 있다. 보상은 어떤 특정한 행동이나 성취에 대해 주어지는 물리적 형태의 대가이다. 주로 게임에서는 ‘하트’, ‘보석’, ‘생명’ 등의 게임내의 캐릭터가 받아 소유 가능한 형태로 주어진다. 최근에는 보상의 형태가 다양화되고 있다. 오프라인의 선물이 도착하거나 다른 디지털 형태, 예를 들어 SNS(Social Network Service)에서 사용가능한 이모티콘을 주는 경우도 있다. 수준(level)은 교육콘텐츠에서 단계별 학습 형태로 적용이 매우 용이하다. 목표를 구체적으로 설정해주고, 쉬운 단계부터 어려운 단계로 순차적으로 접근하여 목표를 달성 할 수 있도록 해주기 때문에 사용자에게 학습동기를 준다. 초기 설정된 자신의 캐릭터를 꾸미기 위해 퀴즈 콘텐츠를 이용하고 그 시간과 점수만큼 보상이 주어지는 게임방법을 통해서 보상이 이루어진다. (그림 5)

Fig. 5.

Example of gamification based quiz content

두 번째로 몰입과 동기유발의 요소는 경쟁이다. 게임의 등급이 높고 낮음의 경쟁도 있지만, 게임에서 경쟁을 하게 하기 위한 어떤 아이템도 포함된다. 우선 게임이 하나의 스마트 기기에서 끝나는 것이 아니라 네트워크로 연결되어, 타인의 레벨과 보유점수 등의 정보를 공유한다. 게임이 타인과 직접적 대응형태가 아니더라도 레벨이나 점수를 공유하는 것으로도 경쟁을 사용자에게 경험하게 할 수 있다. 또한 개인의 성취도를 높이는 요소도 경쟁에 속한다. 예를 들어 사용자에게 능력을 더해주거나 시간이나 공간의 제한적 요소를 더하는 것은 압박이나 스트레스를 통해 경쟁성을 부여하는 것이라 할 수 있다. 타인의 레벨과 보유점수를 확인할 수 있기 때문에 자연스런 경쟁이 이루어지고 이를 통한 동기부여는 몰입으로 이어진다.<표 6>

Table 6.

Game-shaping factors affecting user's immersion

세 번째로는 상호작용이다. 상호작용은 게임 콘텐츠가 네트워크로 사용자 간에 통해 있다는 전재 하에 가능하다. 카페나 동호회 등 오프라인의 상호작용 뿐 아니라, 게임 내에서 아이템 공유나 대화 등으로 정보를 공유하고, 학습자간 친밀감을 형성하게 한다. 학습자간 소통과 친밀도를 높이기 위해 캐릭터꾸미기가 가능해야 한다.(그림 5)

게이미피케이션 기법을 적용한 교육 콘텐츠는 사용자에게 게임 요소를 적용하여 그 목적을 보다 쉽게 달성하게 한다. 그림 5와 같이 SNS 연동으로 접속된 친구를 확인 할 수 있다는 것과 그들의 레벨이나 랭킹을 확인 가능하다. 목표, 보상, 꾸미기, 오답 노트 등의 스마트 러닝을 위하여 스마트한 게임요소를 컴포넌트 라이브러리 방식으로 적절히 적용하여 교육의 효율을 높이고자 하였다.