끝내자조
프로젝트 개요
기술개발 과제
국문 : 00000000..
영문 : 00000000..
과제 팀명
00000..
지도교수
000 교수님
개발기간
2018년 3월 ~ 2018년 6월 (총 4개월)
구성원 소개
서울시립대학교 ㅁㅁ공학부·과 2011XXX0** 김**(팀장)
서울시립대학교 ㅁㅁ공학부·과 2011XXX0** 정**
서울시립대학교 ㅁㅁ공학부·과 2011XXX0** 조**
서울시립대학교 ㅁㅁ공학부·과 2011XXX0** 이**
서울시립대학교 ㅁㅁ공학부·과 2011XXX0** 남**
서론
개발 과제의 개요
개발 과제 요약
◇ 엔트리와 유사한 “인터페이스”를 만들고, 저학년 대상의 교육 프로그램을 만든다. ◇ 저학년이 직접 작성한 코드를 이용하여 장난감 자동차를 움직이게 한다. ◇ 실제 장난감 자동차로 퍼즐을 풀게 한다. ◇ 움직임을 직관적으로 보면서 시각화된 코드를 받아들일 수 있다.
개발 과제의 배경
◇ 한국은 2018년 코딩 교육을 의무화 하려 하고 있다. ◇ 해외에선 코딩 수업이 정규 과정으로 편성하고 있다. ◇ 시각화된 코딩 교육을 통해 아이들이 코딩에 흥미를 갖게 한다. ◇ 주어진 문제를 “순차적 접근” 으로 풀게 하며 알고리즘을 풀 수 있는 능력을 향상시킨다.
개발 과제의 목표 및 내용
◇ 엔트리 혹은 스크래치와 같은 프로그램을 만든다. ◇ RC 카를 만들어 직접 만든 프로그램과 연동한다. ◇ RC 카를 이용해서 직접 풀 수 있는 퍼즐을 만든다. ◇ 알고리즘 능력을 향상시킨다.
관련 기술의 현황
관련 기술의 현황 및 분석(State of art)
가. 코딩교육플랫폼 목적
디지털 문화의 중요성이 부각되면서 코딩 교육은 이제 선택이 아닌 필수가 됐습니다. 한국 또한 2018년도부터 코딩 교육을 의무교육으로 하려하고 있습니다. 이 코딩 교육은 초등학생을 비롯한 어린이들에게도 적용되기 때문에, 더욱 효율적이고 흥미로운 코딩 교육 방안이 필요한 시점입니다. 조기 코딩 교육은 이미 세계적인 관심사가 됐습니다. 이러한 코딩교육에 대한 요구들을 만족시키기 위해 코딩교육플랫폼을 제작하게 되었습니다.
나. 코딩교육 필요성 ◇ 빌 게이츠, 오바마 대통령도 코딩 교육 중요성 역설
빌 게이츠 마이크로소프트(MS) 창업자, 마크 주커버그 페이스북 설립자, 드류 휴스톤 드롭박스 설립자, 잭 도시 트위터 창업자. 이들은 전세계인이 사용하고 있는 IT 서비스와 제품을 만들었다는 공통점을 지니고 있다. 또 다른 공통점이 있다. 초등학교 시절부터 코딩 개념을 배우고 프로그래밍을 직접 해 본 사람들이란 점이다. 빌 게이츠는 빙고게임과 유사한 ‘틱택톡’(Tic-Tac-Toe)을 만들었고, 드류 휴스톤은 좋아하는 색깔을 묻는 단순한 게임을 만들었다. 어렸을 때의 이러한 경험은 커서 프로그래밍 재능을 꽃피우는 데 영향을 끼쳤다. 마치 바이올린 음악을 한 번이라도 들은 학생이 커서 좋은 바이올리니스트가 될 수 있는 것처럼, 프로그래밍이 어떻게 구성되는지 아는 학생은 자연스레 프로그래밍에 대한 소질을 더 발휘하게 된다. 최근엔 단순히 프로그래머로 키우기 위해 프로그래밍을 가르치기보다 디지털 세상을 살아가기 위한 기본 상식으로 코딩 교육이 시행되고 있다. 특히 2013년부터 코드닷오아르지(Code.org) 라는 단체가 코딩 교육의 중요성을 적극적으로 설파하고 있다. 버락 오바마 미국 대통령은 코드닷오아르지를 통해 “게임을 내려받는 것에 그치지 말고 직접 만들어보자”라며 코딩 교육에 관심을 환기시키기도 했다. 코딩 교육이 국가 경쟁력을 높이는 데 큰 도움이 될 것이라 판단했기 때문이다. 코드닷오아르지는 비영리단체로 컴퓨터 교육을 확산하는 운동을 펼친다. 특히 초등학생과 여성, 소수인종에게 프로그래밍 교육을 전달하고자 노력하고 있다. 코드닷오아르지는 온라인으로 누구나 프로그래밍을 배울 수 있도록 인터넷 강의와 자료를 제공하고 있으며, 각 정부와 교육단체에 코딩 교육에 대한 자문도 주고 있다. MS, 페이스북, 트위터 등도 코드닷오아르지와 적극 협력하고 있다.
◇ 해외에선 코딩 수업이 정규 과정으로 편성
해외에선 국가 정책으로 코딩 교육을 적극적으로 지원하는 추세다. 그 선두엔 영국이 있다. 영국 정부는 2013년 9월 ‘어린이를 위한 컴퓨터교육 가이드라인’을 발표하고 초등학교에서 코딩 교육을 체계적으로 진행할 준비를 하고 있다. 뿐만 아니라 2014년을 ‘코딩의 해’로 지정하고 코딩 교육 확산을 위한 다양한 캠페인도 벌이고 있다. 교사와 학생은 컴퓨팅 언어의 기초를 배우는 것을 넘어 직접 프로그램을 만들 수 있도록 지원받는다. 2014년 2월엔 50만유로, 우리돈 약 7억3천만원을 투자해 코딩 교육을 위한 교사 연수 프로그램도 실시했다.
다음은 국제신문에 실린 국내 SW 교육 현황에 대한 내용이다. 개정 교육과정에 따르면 초등학생은 5·6학년 ‘실과’ 과목의 일부로 삽입해 17시간 이상 수업을 받아야 하며, 중학교는 ‘정보’ 과목을 선택에서 필수로 전환해 34시간 이상 편성해야 한다. 학년별로 수업 시수가 정해진 것은 아니어서 해당 학년 동안 학교 상황에 맞춰 수업 시간을 채우면 된다. 수업 시간 역시 최저기준만 명시돼 학교의 재량에 따라 기준 이상 시간을 배정할 수도 있다. 입시와 직결되는 고등학교에서는 의무 수업이 아니다. ‘정보’ 과목을 심화 선택에서 일반선택으로 전환해 선택률을 끌어올리기로 했다. 교육부는 SW교육 의무화가 결정되면서 ▷교사 양성 등 인적 기반 마련 ▷컴퓨터실 등 물적 기반 마련 ▷우수모델 발굴 및 확산 ▷창의력 및 사고력 중심의 SW교육 강화 ▷SW교육 체험활동 및 홍보 강화 등으로 나누어 세부계획을 수립했다. 우선 수업을 진행할 교사를 양성하기 위해 선도교원을 선발하고 초등·중등 연수 등을 시행했으며, 올해는 전국적으로 핵심교사 2500명(부산은 약 140명)을 선발해 연수를 실시할 계획이다. 초등학교의 경우 내년부터 수업이 진행되지만 아직 교과서는 나오지 않은 상태다. 따라서 현재는 중학교 교과서를 통해 SW수업을 엿볼 수 있다. 교과서 세부 구성은 출판사에 따라 조금씩 다르지만 전체적인 흐름은 대동소이하다는 것이 시교육청의 설명이다. 우선 첫 단원에서는 정보 사회의 특성, 저작권·개인 정보 보호, 사이버 윤리 등 정보에 대한 일반적인 내용을 다룬다. 이어 자료 수집과 분석, 정보를 구조화하고 디지털로 표현하는 방법을 학습한 후 본격적으로 프로그래밍으로 넘어간다. 이때 SW교육의 핵심인 알고리즘을 다루게된다. 알고리즘은 주어진 문제를 해결하기 위한 과정과 방법을 말하는데, 쿠키나 김치볶음밥을 만드는 과정 등을 통해 알고리즘의 개념을 이해하고 표현하는 형태로 수업이 진행된다. 이를 바탕으로 프로그래밍 언어의 원리를 배운 다음 마지막 단원에서 실생활과 연관된 피지컬 컴퓨팅 수업이 이뤄진다. 피지컬 컴퓨팅은 키보드나 마우스와 같은 입력 방식 대신 소리나 동작 빛 등 물리적인 방법으로 전자 기기를 사용하는 것을 말한다. 소리로 켜고 끄는 전등 같은 것이 여기에 해당된다. 시교육청 관계자는 “국내 교과서는 많은 프로그래밍 언어 중 스크래치나 엔트리를 활용하는 경우가 많다. 학교가 어떤 교과서와 프로그래밍 언어를 선택했느냐에 따라 학생들이 배우는 것도 달라지게 된다”고 설명했다.
◇ 초·중·고교 소프트웨어 교과 과정
◇ 초·중·고교 소프트웨어 교과 과정 ▶초등학교 5·6학년 ‘실과’ 과목 일부로 삽입. 17시간 이상 수업 5·6학년에 2015개정 교육과정이 적용되는 2019년부터 의무화. 부산은 오는 6월부터 전 학교 6학년에서 시범 운영 ▶중학교 ‘정보’ 과목, 선택에서 필수로 전환. 중학교 3년 내 34시간 이상 편성. 올해는 174개교 중 90개교 수업 편성 ▶고등학교 필수 아님. ‘정보’ 과목을 심화 선택에서 일반 선택으로 전환
요약 하자면, 초등학교와 중학교는 교육이 “의무” 이며, 초등학교 교과서는 아직 나오지 않았지만 중학교 교과서의 내용으로 유추해 볼 수 있다. 다음과 같은 내용은 “필수” 로 알아야 한다. 1. 정보사회의 특성 2. 사이버 윤리, 저작권에 대해서 (정보의 특징) 3. 자료 수집 및 분석 후 정보를 구조화하여 디지털로 표현하는 방법 4. 알고리즘 5. 프로그래밍 (스크래치나 엔트리 사용)
다음은 국제신문 실린 “북유럽의 SW 교육” 에 관한 기사 내용이다.
지난달 19일 오전 스웨덴 스톡홀름 인근 나카시 얄라 스쿨 5학년 교실. 20여 명의 학생들이 4~5명씩 모여 모둠수업이 한창이었다. 모둠마다 무당벌레 혹은 벌 모양의 작은 로봇을 이리저리 움직이고 있었다. 학생들의 수업 도구는 모두 같았지만 주제는 모두 달랐다. 한 모둠은 로봇이 장애물을 지나 안전하게 주차하는 방법을 연구했고, 한 쪽에선 두 로봇이 부딪히지 않고 다리를 건너는 법을 토론했다. 또 다른 쪽에선 분수를 크기순으로 이동하는 방법을 고민했다. 투베 볼베리 담임교사는 “이 수업은 자연 과학(natural science) 수업으로, 소프트웨어 교육용 로봇을 이용해 여러 분야 주제를 공부하고 있다”고 말했다. 스웨덴은 올해 가을학기부터 SW교육을 필수 정규교육 과정으로 운영한다. 코딩 교육을 포함한 SW교육 필요성은 2012년부터 논의됐지만 교육과정 개정안은 2017년이 돼서야 확정됐다. 스웨덴 SW교육의 가장 큰 특징은 별도의 교과로 편성한 것이 아니라 수학과 공학(기술) 교과에 관련 내용을 포함했다는 점이다. 우리나라의 초1~중3에 해당하는 1~9학년 교육과정에 우선 적용됐다. 올해 하반기부터 의무교육을 시작하지만 상당수 학교는 지난해부터 교장 재량으로 SW교육을 이미 도입했다. 얄라스쿨 안느 엥가르트 교장은 “현재는 학년별로 주당 1, 2회 수업을 하고, 교사는 다른 학교의 동료 교사와 SW교육 교수 학습법을 공유한다”며 “프로그래머가 되는 것이 목적이 아니라 컴퓨터 프로그램이 어떻게 운용되는지 원리를 알고 실제 삶에서 어떻게 적용되는지 이해하는 데 중점을 둔다”고 말했다. 디지털 퍼스트-에스토니아
SW교육 담당교사인 베르기 로렌즈 교사는 “15분 정도면 앱 하나를 쉽게 제작할 수 있다”고 말했다. 옆 컴퓨터실에서는 다른 반 학생들이 컴퓨터 단축키를 외우는 수업을 듣고 있었다. 특히 이 학교는 드론, 레고 사에서 개발한 블록, 소형 로봇 등 다양한 SW교육 장비들을 풍부하게 갖추고 있다. 에스토니아는 핀란드나 스웨덴에 비해 교육 선진국으로서의 명성은 뒤쳐진다. 1991년 소련에서 독립할 때만 해도 빈곤국에 속했다. 그러나 디지털 혁신을 통해 기적을 일궈내면서 세계의 이목이 집중되고 있다. 아이가 태어나면 이름보다 디지털 아이디(ID)가 먼저 부여되고, 전자영주권만 있으면 외국인들도 에스토니아의 행정서비스를 누릴 수 있다. 이 같은 노력에 힘입어 수도 탈린에는 미국 실리콘밸리에 버금가는 탈린 밸리가 조성됐다. 세계 최대 인터넷전화기업인 스카이프, 세계 최대 개인 간 국제송금업체인 트랜스퍼와이즈도 이곳에서 탄생했다. 디지털 퍼스트 정책은 교육 분야도 예외가 아니다. 1996년 ‘호랑이 도약’ 프로젝트를 통해 초중고교생에게 코딩 교육을 시작했다. 2012년엔 학년별 맞춤형 코딩 교육 프로그램인 ‘프로지 타이거(Proge Tiger)’를 만들어 별도 교과목으로 SW교육을 시행하고 있다. ‘프로지 타이거’는 기존의 정보 활용 교육에서 벗어나 문제해결을 통한 창의성 신장과 융합적 사고력에 초점을 맞추고 있다. 초등학생인 1~4학년은 게임이나 그래픽 기반의 프로그래밍 언어를 사용해 문제해결과정을 프로그래밍으로 간단하게 구현하며 프로그래밍에 친숙해지는 단계다. 중학생인 5~9학년은 피지컬 컴퓨팅이 시작되는 단계이며, 고등학생인 10~12학년은 웹 프로그래밍을 통해 실제 프로그래밍 활동에 참여하고, 직업교육도 연계해 운영하고 있다.
요약
북유럽에서는 현재 초등학생부터 코딩 교육을 의무화 하고 있으며, 이 코딩교육은 단순히 프로그래머가 되기 위함이 아니다. 코딩교육은 아이들이 “정보 사회”를 살아가기 위해 꼭 필요한 교육이다.
나. IoT 현황
웹으로 하드웨어를 조작하기 위해서 웹과 하드웨어 간에 통신을 할 필요가 있다. 그렇기 때문에 사물인터넷 기술에 대해 조사를 하였다.
◇ 표준 (1) 공식표준
공신력 있는 표준화 기구에서 일정한 절차와 심의를 거쳐 재정하는 표준
- 국제표준화기구 ISO, IEC, ITU - 지역표준화기구 ETSI(유럽), APT(아시아태평양) - 국가표준화기구 ANSI(미국), 기술표준원(한국) - 단체표준화기구 TIA(미국), TTC, ARIB(일본), TTA(한국)
(2) 사실 표준 기업 간 경쟁을 통해 시장에서 결정되는 시장표준
- 파편화된 서비스 플랫폼 개발 구조를 벗어나 응용서비스 인프라(플랫폼) 환경을 통합하고 공유하기 위한 사물인터넷 공동서비스 플랫폼 개발을 위해 발족된 사실상 표준화 단체로 IoT 기술을 위한 요구사항, 아키텍처, API 사양, 보안 솔루션, 상호 운용성을 제공하는 글로벌 단체
- 지역별 표준 개발기구인 TTA(한국), ETSI(유럽), ATIS/TIA(북미),CCSA(중국), ARIB/TTC(일본)등 7개의 SDO(Standard Development Organization)가 공동으로 설립
- 삼성전자, LG전자, 인텔, 마이크로소프트 등 시장을 리드하는 디바이스 및 소프트웨어 분야의 글로벌 기업들이 합의하에 디바이스의 통신을 아우를 수 있는 통신체계를 정립하기로 하며, 2016년 2월 OCF(Open Connectivity Foundation)이라는 단체를 결성 - OCF는 글로벌 기업이 모여 만든 사실표준화 단체인 삼성전자 주도의 OIC(Open Interconnect Consortium)와 UPnP가 통합하였으며, 2016년 LG전자 주도의 Allseen Alliance와 합병하여 만든 단체로 현재 구글 주도의 Thread Group 및 표준화단체 연합의 oneM2M과의 협력체계(Liaison)를 구축하며 글로벌 통합
◇ IoT 아키텍쳐 레퍼런스 모델
(1) oneM2M Architecture Reference Model
oneM2M 레퍼런스 아키텍처의 모든 엔티티(AE, CSE, NSE)는 세가지 계층으로 분화된다.
- 애플리케이션 엔티티(Application Entity) : 애플리케이션 엔티티는 End-to-End 사물인터넷 솔루션을 위한 애플리케이션 로직을 제공함 - 화물추적, 원격모니터링, 원격검침 및 제어 - 공통 서비스 엔티티(Common Service Entity) : 공통 서비스 엔티티는 사물인터넷의 다양한 애플리케이션 엔티티들이 공통적으로 사용 할 수 있는 기능들로 이루어진 플랫폼 - 네트워크 서비스 엔티티(Network service Entity) : 네트워크 서비스 엔티티는 공통 서비스 엔티티에 네트워크 서비스를 제공함. 3GGp 네트워크 연동 중심임
노드는 다음과 같이 분화된다.
- 애플리케이션 서비스 노드(ASN, Application Service Node)
M2M Application 뿐만 아니라 공통의 서비스 기능을 포함하는 일반노드
- 애플리케이션 전용 노드(AND, Application Dedicated Node)
M2M Application을 포함하는 M2M 디바이스로 M2M 서비스 로직만을 포함하는 제한된 기능을 가지는 제한적 디바이스
- 중간노드(MN, Middle Node)
디바이스 노드들과 네트워크 인프라스트럭처를 연결해주는 게이트웨이 역할을 하는 노드
- 인프라스트럭처 노드(IN, Infrastructure Node)
네트워크 인프라스트럭처에 위치해 M2M 서비스를 제공해주는 노드
- NoDN(Non-oneM2M Device Node)
NoDN 은 oneM2M 엔티티를 AE도 CSE도 가지지 않는 Node이며, 관리 등을 포함하여 상호 연동 할 목적을 위해 oneM2M 시스템에 붙어있는 노드를 나타냄
<oneM2M 아키텍처에 의한 M2M 시스템 전체 구성>
(2) ISO/IEC JTC1 IoT RA : ISO/IEC WD 30141 - IoT RA(Reference Architecture) 표준인 ISO/IEC 30141은 JTC1 총회(2014.11월)에서 사물인 터넷을 위해 신설된 WG10에서 추진되고 있음 - ISO/IEC는 2M/IoT 시스템을 여섯 개의 영역(domain)으로 정의함
User Domain(UrD), Object Domain(ObD), Sensing & Actuation Domain(SAD), Service Provider Domain(SPD), Operation & Management Domain(OMD), Resource Interchange Domain(RID)
(3) ITU-T Reference Model Y.2060 - ITU-T는 2012년 공적 표준화 단체 중 처음으로 ‘Overview of the Internet of things’ 라는 제목의 아키텍처 모델 표준(Y.2060)을 제정함 - 사물인터넷을 ‘현존하거나 진화하는 ICT 기술을 바탕으로 물리적이거나 가상의 사물을 연결하여 진일보된 서비스가 가능한 정보사회를 위한 글로벌한 인프라’로 정의함
<Reference Model>
(4) FP7 IoT-A
- IoT-A는 독일, 영국, 프랑스 등 8개국 17개 기관이 공동 진행한 유럽의 FP7의 단위 프로젝트임
- IoT-A는 Reference Model을 제시, 이를 바탕으로 Reference Architecture를 구체화함
<Reference Architecture 기능>
◇사물인터넷 플랫폼
(1) 요건
사물인터넷 서비스 구조상에서 사물과 서비스가 요구하는 공통기능을 제공하여, 다양한 사업자들 이 쉽게 서비스를 생산, 관리할 수 있고 그 서비스를 사용할 고객(개발자, 서비스 이용자)에 대한 편의가 제공되어야 함
(2) 기술 - 식별체계 기술 : 어떤 대상을 유일하게 식별할 수 있는 방법을 제공하는 기술을 식별체계 기술이라 함 - 검색 기술 : 사용자가 원하는 서비스를 제공받기 위하여 정보나 리소스 등을 찾고 찾아진 결과를 쉽게 활용할 수 있도록 제공하는 기술 - 장치관리 기술 : 사물인터넷 장치관리 기술은, 사물인터넷 디바이스의 초기설정, 소프트웨어/펌웨어 다운로드, 디바이스의 고장 진단 및 배터리/메모리 등 하드웨어 모니터링, 디바이스 주변장치(USB, 카메라 등) 컨트롤, 시스템 리부팅, 시스템 로깅 등을 위한 기술임 - 사물가상화 기술 : 사물 가상화 기술은, 물리적 환경에 존재하는 다양한 사물의 정보를 플랫폼 또는 디바이스에 표현하기 위해 추상화된 형태로 리소스를 생성하는 기술임 - 서비스 컴포지션 기술 : 서비스 컴포지션 기술은, 서비스 지향 구조(SOA, Service-Oriented Architecture)에서 다양한 서비스를 연동하기 위한 개념에서 출발했으며, Service Oriented는 Service Choreography 기술의 하부 기술로 사용됨 - 시맨틱기술 : 시맨틱 기술은, 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 파일, 서비스 등)에 대한 정보와 리소스들의 관계-의미 정보를 기계가 처리할 수 있도록, 온톨로지(Ontology) 형태로 표현하고 이를 자동화된 기계가 처리하도록 하는 프레임워크 기술임
◇한국의 대표 IoT 플랫폼
(1) 스마트싱스(삼성)
개요 : SmartThings는 삼성전자의 사물인터넷 플랫폼이며, 애플리케이션으로 사물인터넷 기기를 제어할 수 있다. 2015년 이후의 삼성 갤럭시 스마트폰을 지원한다. 어플리케이션 : SmartThings Classic 안드로이드와 iOS를 지원한다. 원래는 "SmartThings Classic"이 아닌 "SmartThings" 앱이였으나, Samsung Connect 앱이 "SmartThings" 앱으로 변경되면서 자연스럽게 기존에 존재하던 앱은 Classic 이라는 네이밍이 추가되었다. 오리지널 앱답게 새로 출시된 SmartThings 앱보다 기능이 많으며, 커스터마이징 면에서도 더 자유롭다. 삼성에서는 Classic 앱에 있는 기능도 점차 새 앱으로 통합하는 계획을 가지고 있다.
(2) INFioT(LG)
개요 센서와 디바이스를 등록, 관리하고, 데이터를 산업별로 미리 정의된 표준에 맞게 변환하여 센싱 데이터를 수집하고 관리 서비스에 필요한 플랫폼 기능과 센서와 디바이스, 주변 환경에서 발생하는 실시간 데이터 이벤트 처리 기능을 제공하고, 디바이스와 서비스 개발자에게 필요한 SDK, Open API, 모니터링 화면제작 도구를 제공
◇오픈소스 H/W 플랫폼
(1) 라즈베리파이(Raspberry Pi)
영국 라즈베리 파이(Raspberry Pi) 재단에서 만든 컴퓨터 과학의 교육을 증진시키기 위해 만든 싱글 보드 컴퓨터. Raspbian (Debian 계열 Linux) 운영체제 사용하며 프로세싱 성능에 중점을 둔 오픈소스 하드웨어
(2) 아두이노(Arduino)
이탈리아의 IDII(Interaction Design Institutelvera)이 개발한 센서 및 액추에이터 제어에 중점을 둔 오픈소스 하드웨어로 AVR 기반의 싱글 보드 마이크로컨트롤러이다.
(3) 아두이노, 라즈베리파이 비교
다. Web, GUI 관련 현황
◇ GUI 오픈 소스
GUI를 웹, javascript 로 구현하기로 했다. Scratch나 Entry 와 같은 형태의 GUI를 구상하고 있다. 이에 필요한 기술로는 첫 째로는 Drag and Drop이 있다.
◇ Drag and Drop
Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.
In HTML5, drag and drop is part of the standard: Any element can be draggable.
위는 w3schools에 있는 내용을 가져왔다. Drag and Drop은 HTML5 에서는 기본 기능 중 하나로 취급된다. 따라서 호환성을 걱정할 필요가 없다. 만약 프론트 쪽 코딩을 React나 Angular로 작성한다면, 이미 완성된 라이브러리를 사용하는 것 또한 좋은 방법으로 보인다.
위는 React의 OpenSource 중 하나인 Drag And Drop 기능을 구현한 React DnD 라는 라이브러리다.
위의 라이브러리는 상당히 완성도가 높으며 다음과 같이 활용할 수 있다.
위의 말은 체스의 나이트다. 위와 같이 말을 클릭 시 움직일 수 있는 구간을 확인할 수 있다. 실제로 움직일 수도 있다.
실제로 움직이면 다음과 같이 말이 이동한다. 이와 같이 드래그앤 드랍을 직접 구현하거나, 이미 있는 라이브러리를 활용해 Scratch나 Entry 같은 GUI를 구현할 수 있다.
위는 Entry의 GUI이다. 오른쪽에 있는 “오른 쪽” 블록을 이용하여 해당 캐릭터를 움직일 수 있다. 위와 비슷한 방식으로 작동하는 프로그램을 만들 예정이다.
다음으로 필요한 것은 저 GUI를 기준으로 움직이는 “캐릭터”를 구현해야 한다. 우리는 “자동차”를 움직여 “미리보기” 기능을 구현할 생각이다. 이 미리보기를 통해 아이들은 자동차가 어떻게 움직일지 예상할 수 있다.
위와 같은 자동차의 움직임은 <canvas> 태그 안에서 animation을 이용해 구현하거나, Unity를 이용해 웹에 띄울 생각이다.
◇ Unity WebGL
Unity 는 WebGL 빌드 옵션을 사용하면 콘텐츠를 JavaScript 프로그램으로 퍼블리시할 수 있습니다. 이 프로그램은 HTML5 기술과 WebGL 렌더링 API 를 사용하여 Unity 콘텐츠를 웹 브라우저에서 실행합니다. WebGL 콘텐츠를 빌드하고 테스트하려면 Build Player 창에서 WebGL 빌드 타겟을 선택하고 Build & Run 을 클릭합니다.
(1) 기술 개요
WebGL 에서 실행하려면 모든 코드가 JavaScript 여야 합니다. (C 및 C++로 작성된) Unity 런타임 코드를 asm.js JavaScript 로 크로스 컴파일하려면 emscripten 컴파일러 툴체인을 사용합니다. asm.js 는 매우 최적화하기 쉬운 JavaScript 의 서브셋으로서, 이를 통해 JavaScript 엔진은 asm.js 코드를 매우 효율적인 네이티브 코드로 AOT-컴파일할 수 있습니다.
.NET 게임 코드(C# 및 UnityScript 스크립트)를 JavaScript 로 변환하려면 IL2CPP라는 기술을 사용합니다. IL2CPP 는 .NET 바이트코드를 해당 C++ 소스 파일로 변환하고, 이 파일은 스크립트를 JavaScript 로 변환하기 위해 emscripten 을 사용하여 컴파일됩니다.
(2) 플랫폼 지원
Unity WebGL 콘텐츠는 대부분의 주요 데스크톱 브라우저의 최신 버전에서 지원되지만, 각 브라우저에서 제공하는 지원 수준의 차이가 있습니다. Unity WebGL 은 현재 모바일 디바이스를 지원하지 않습니다.
주로 플랫폼의 한계 때문에 Unity 의 일부 기능은 WebGL 빌드에 사용할 수 없습니다. 구체적으로 설명하면 다음과 같습니다.
스레드는 지원되지 않습니다. JavaScript 에서 스레딩이 지원되지 않기 때문입니다. Unity 에서 성능을 높이기 위해 스레드를 내부적으로 사용하는 경우와 스크립트 코드 및 관리 dll 에서 스레드를 사용하는 경우 모두 스레딩이 지원되지 않습니다. 기본적으로 System.Threading 네임스페이스 안에 있는 것은 모두 지원되지 않습니다.
WebGL builds cannot be debugged in Visual Studio. See: Debugging and trouble shooting WebGL builds.
보안 문제로 인해, 브라우저에서는 네트워킹을 위한 IP 소켓의 직접 액세스를 허용하지 않습니다. WebGL 네트워킹을 참조하십시오. WebGL 그래픽스 API 는 몇 가지 제한이 있는 OpenGL ES 2.0 및 3.0 과 동일합니다. WebGL 그래픽스을 참조하십시오. WebGL 빌드에서는 Web Audio API 기반 커스텀 백엔드를 오디오에 사용합니다. 기본 오디오 기능만 지원됩니다. WebGL 에서 오디오 사용을 참조하십시오. WebGL 은 AOT 플랫폼이므로 System.Reflection.Emit를 사용하여 코드를 동적으로 생성할 수 없습니다. 다른 모든 IL2CPP 플랫폼, iOS, 그리고 대부분의 콘솔도 마찬가지입니다. 유니티를 이용할 시, 다른 라이브러리를 사용할 수 없을 수도 있다. 이는 조금 더 조사해봐야 할 사항이다. 난이도는 당연히 canvs의 animation 쪽이 더 간단하다.
라. Oauth
OAuth가 사용되기 전에는 인증방식의 표준이 없었기 때문에 기존의 기본인증인 아이디와 비밀번호를 사용하였는데, 이는 보안상 취약한 구조이다. 기본인증이 아닐 경우는 각 애플리케이션들이 각자의 개발한 회사의 방법대로 사용자를 확인하였다. 예를 들면 구글의 AuthSub, AOL의 OpenAuth, 야후의 BBAuth, 아마존의 웹서비스 API 등이 있다. OAuth는 이렇게 제각각인 인증방식을 표준화한 인증방식이다. OAuth를 이용하면 이 인증을 공유하는 애플리케이션끼리는 별도의 인증이 필요없다. 따라서 여러 애플리케이션을 통합하여 사용하는 것이 가능하게 된다. OAuth인증은 소비자와 서비스 제공자 사이에서 일어나는데 이 인증 과정은 다음과 같다. 우선 소비자가 서비스제공자에게 요청토큰을 요청한다. 다음으로 서비스제공자가 소비자에게 요청토큰을 발급해준다. 그리고 소비자가 사용자를 서비스제공자로 이동시킨다. 여기서 사용자 인증이 수행된다. 서비스제공자가 사용자를 소비자로 이동시킨 후 소비자가 접근토큰을 요청한다. 그리고 서비스제공자가 접근토큰을 발급하면 발급된 접근토큰을 이용하여 소비자에서 사용자 정보에 접근한다.
시장상황에 대한 분석
가. 경쟁제품 조사 비교
코딩교육을 위한 기존 제품은 크게 두가지로 나뉜다. 실제 코드를 작성하는 프로그램 및 사이트(알고리즘 사이트, sololearn(어플))와 어린아이들을 위한 블록형 프로그램 및 사이트(스크래치, 레고 부스트, 코딩앤플레이(한국회사))
◇실제 코드를 작성하는 프로그램 및 사이트
실제 코드를 작성하는 프로그램 및 사이트들은 기본적으로 실질적인 프로그래밍을 위해서 만들어졌다. 실제로 언어를 이용해서 코딩을 작성하고 알고리즘을 만들어서 주어진 문제를 해결한다. 이들은 학생들에게 사고력을 키우고 쉽게 코딩을 가르치기 위한 것이 아니라 실제로 프로그래밍을 배우기 위해서 연습하는 사이트 들이다. 그래서 이러한 프로그램들로 초등학생, 중학생들을 교육하기에는 무리가 있다. 반면에 우리의 제품(?, 뭐라 할지 몰라서..)은 실제로 프로그래밍을 가르치기 위한 것이 아니다. 초, 중학생들에게 간단하게 코딩을 소개하고 전반적인 이해를 돕기 위한 것이다. 그렇기 때문에 접근성에 있어서 큰 차이가 있다.
◇ 어린아이들을 위한 블록형 프로그램 및 사이트
실제 코드를 작성하지 않고 블록을 통해 코딩교육을 하는 프로그램도 있다. 가장 유명한 것이 스크래치인데 스크래치와의 차이점은 로봇을 통한 시각화이다. 스크래치는 단순히 코딩을 하면 오른쪽의 고양이가 그에 맞게 움직인다. 반면 우리의 제품(?, 뭐라 할지 몰라서..)은 코딩한 그대로 로봇이 움직여 주기 때문에 호기심도 자극할 수 있고 성취감을 제공할 수도 있다. 이는 더욱 효과적인 코딩교육이 가능하다. 물론 로봇을 통한 코딩교육이 없는 것은 아니다. 레고에서 나온 부스트라는 제품이 있다. 부스트는 블록으로 코딩을 하고 이에 맞게 로봇이 움직인다. 하지만 레고 부스트는 가격이 20만원으로 매우 높다. 학원에서 구비하는 것은 가능하지만 가정에서 손쉽게 구매하기는 쉽지 않다. 또한 레고 부스트는 코딩할 수 있는 범위가 극히 제한적이다. 부스트에서 지원하는 움직임만 가능하기 때문에 자유도가 우리의 프로젝트에 비해 매우 낮다.
나. 마케팅 전략
S(Strength) W(Weakness) - 코드를 블록으로 시각화 함 - 만들어진 코드로 로봇을 조작할 수 있음 - 세밀한 코딩은 어려움 - 로봇을 구매해야하기 때문에 초기비용이 크다 - 어린아이들을 대상으로 하기 때문에 로봇이 망가질 위험도 있다 O(Opportunity) T(Threat) - 전세계적으로 어린이 코딩 붐이 일고 있음 - 초등학교 5,6학년, 중학교 정규 과목에 코딩이 들어감 - 코딩교육의 초점이 프로그램이 아닌 컴퓨터와 프로그래밍에 대한 전반적인 이해에 맞춰져 있다. - 어린이 코딩교육이 시작단계이기 때문에 아직 교육의 효과에 대해 결론이 나지 않았다. - 현실적으로 공교육에서 활용하기 힘들다(사교육 중심이 될 가능성)
다. 관련 경험(봉사활동)
코딩교육플랫폼을 개발하기 위해 실제로 초등학교 5~6학년을 대상으로 코딩교육을 실시했습니다. 실시하고 느낀 점은 아이들이 코딩교육의 목적을 제대로 이해하지 못한다는 점과 타자에 익숙하지 않다는 점이었습니다. 대부분의 학생들이 사용하는 코딩교육 플랫폼은 단순히 화면 내에서 캐릭터를 움직이는 것으로만 되어 있습니다. 그래서 아이들이 하는 행동이 코딩교육임을 느끼지 못하고 왜 이걸 해야 하는지 알지 못했습니다. 그래서 RC카 같은 실제로 보이는 물건을 통해 아이들에게 코딩교육의 목적을 알려줘야 한다고 생각했습니다. 또한 모바일 환경에 익숙해져 있기 때문에 타자로 무언가를 입력하는 것을 어색해 했습니다. 그래서 드래그 앤 드롭 단계를 넘어서서 실제로 코드를 입력하는 교육을 실시하면 어려움을 겪었습니다. 그래서 코딩교육을 함과 동시에 타자 연습도 하게 한다면 이후에 중학교에 올라가서 코드를 입력하는 코딩교육을 더욱 익숙하게 받아들일 수 있을 것입니다.
- 봉사활동 사진
개발과제의 기대효과
가. 기술적 기대효과 ◇ 시각화된 코딩 교육을 통해 아이들이 코딩에 흥미를 갖게 한다. ◇ 주어진 문제를 “순차적 접근” 으로 풀게 하며 알고리즘을 풀 수 있는 능력을 향상시킨다. 나. 경제적 및 사회적 파급효과 ◇ 봉사 단체가 쓸 수 있는 무료, 저비용 프로그램. ◇ 아이들이 코딩에 흥미를 갖게 함 ◇ 어렸을 때부터 알고리즘 이해 향상
설계
설계사양
가. 로그인 및 회원관리
제품의 기능들을 사용하기 위해 데이터서버에 사용자에 대한 정보를 등록하고 이를 통해 로그인하여 제품의 기능들을 사용할 수 있다.
나. 타자연습
프로그램은 크게 타자 연습, 문제 풀이, 자유 모드 이렇게 세 가지 모드로 되어 있습니다. 타자 연습에서는 간단히 사용자가 한글 혹은 영어 타자 연습을 할 수 있습니다. 손가락의 위치를 익히는 간단한 문제부터 문장까지 입력하는 문제까지 다양한 문제를 사용자에게 제공합니다. 이 때 연습을 위해 문제당 시간제한을 부여합니다. 이때 시간 내에 문제를 해결하면 사용자에게 보상(업적)을 부여합니다.
다. 알고리즘 코딩
문제풀이 모드에서는 사용자에게 간단한 알고리즘 문제를 제공합니다. 이때 문제는 제한된 명령어 개수로 자동차가 문제를 해결하도록 알고리즘을 작성하는 문제입니다. 이 때 자동차는 단순히 도착점을 향해 하는 것부터 물건을 옮기는 것까지 다양한 미션을 수행하게 됩니다. 이를 통해 사용자는 알고리즘 해결 능력을 키우고 타이핑까지 연습 할 수 있습니다.
라. RC카 체험코딩
자유모드에서는 지금까지 연습한 알고리즘 해결능력을 토대로 실제로 자동차를 움직이게 해보는 모드입니다. 원하는 대로 알고리즘을 작성하면 해당 코드대로 자동차가 움직이게 됩니다. 이를 통해 사용자는 지금까지 공부했던 알고리즘이 실제로 적용되는 것을 눈으로 확인할 수 있습니다.
소프트웨어 설계
가. 로그인 및 회원관리
기본적인 회원관리 서버 구축
나. 타자연습
한글자 타자연습, 단어 타자연습
다. 알고리즘 코딩
라. RC카 체험코딩
이미 준비된 블록을 끌어 입력창에 놓아 자동차가 움직이는 것을 제어하거나 명령어를 직접 입력하여 자동차의 움직임을 제어한다.
마. 시스템 설계 통신설계의 개요는 다음과 같다. 아래의 번호는 통신 순서가 아닌 설명을 위해 임의로 붙인 번호이다. 1~2 : 클라이언트가 웹에서의 활동을 위해 필요한 통신으로 회원관리를 위한 통신이다. 1. 회원가입을 위한 회원정보나 로그인을 위한 로그인 정보를 전송 2. 회원가입이나 로그인 결과에 대한 정보를 전송 3~4 : 클라이언트가 웹을 사용하기 위한 통신으로 웹페이지 전송에 대한 통신이다. 3. 필요한 웹페이지 전송을 요청한다. 4. 사용자가 요청한 웹페이지를 전송한다. 5~7 : 클라이언트 PC와 라즈베리파이 사이의 직접 통신은 일반적으로 어렵다. 왜냐면 일반 라즈베리파이 기기(IoT)들은 공유기에 의해 로컬IP로 관리되기 때문이다. 그래서 외부에서 해당 기기와의 통신은 어려우나 해당 기기에서 외부로의 통신은 쉽게 가능하다. 따라서 통신 중계 서버를 두고 통신을 중계한다. 5. 클라이언트 PC -> 통신 중계 서버로 자동차가 수행해야 할 명령을 전송한다. 6. 자동차는 주기적으로 통신 중계 서버에게 자신이 어떤 역할을 수행해야 할지 묻는다. 7. 통신 중계 서버는 5번 통신으로부터 받은 명령을 6번 통신의 응답으로 전송한다.
바. 자동차 설계 ◇ 자동차 설계 부품- 라즈베리파이3 보드- 모터, 바퀴, 모터드라이버- 배터리팩 2개(모터용, 라즈베리파이 전원용) ◇ 자동차의 하드웨어적 구현직진, 후진, 회전의 구현 직진은 바퀴가 시계방향으로 굴러가는 것이다. 모터에 전압을 한쪽에 5V, 다른 한쪽에 0V를 인가하면 된다. 마찬가지로 후진의 구현은 전압을 넣는 방향을 직진의 반대로 하면 된다. 회전은 일반적으로 자동차의 회전과는 다르다. 여기서의 회전은 정확히 제자리 회전을 의미한다. 자동차의 왼쪽바퀴를 직진, 오른쪽바퀴를 후진으로 하면 오른쪽으로 제자리, 그 반대로는 왼쪽으로 제자리회전을 수행한다.
하드웨어 설계
가. RC카 체험코딩 ◇ 기본 구조 기본 구조에 대한 사진은 다음과 같습니다. 왼쪽의 초록색은 라즈베리파이3, 오른쪽 빨간색은 모터드라이버(MAI-2MT-DC)를 의미합니다.
◇ 각 GPIO핀과 모터드라이버의 핀과의 연결
라즈베리파이의 API는 wiringPi라는 툴을 이용하였습니다. 따라서 각 GPIO번호의 의미는 wiringPi에서 쓰이는 번호를 의미합니다.
num of wiringPi motor driver pin 23 L_PWM 27 L_IN1 28 L_IN2 29 L_ENABLE 24 R_PWM 15 R_IN1 16 R_IN2 1 R_ENABLE
결과 및 평가
완료 작품의 소개
프로토타입 사진 혹은 작동 장면
가. 로그인 및 회원관리
◇ 초기화면 처음에 접속하면 출력되는 화면으로 로그인 및 회원가입 버튼을 눌러 다음 화면으로 진행한다.
◇ 로그인 화면
초기화면에서 로그인 버튼을 눌렀을 때 출력되는 화면으로 데이터서버에 등록된 본인의 아이디와 비밀번호를 입력하여 메뉴화면으로 진행한다.
◇ 회원가입 초기화면에서 회원가입 버튼을 눌렀을 때 출력되는 화면으로 데이터서버에 본인이 사용할 아이디와 비밀번호를 입력하여 데이터서버에 자신의 정보를 등록한다.
◇ 메뉴화면 로그인 후 출력되는 화면으로 타자연습, 문제연습, 자동차 조종기능을 선택하여 선택한 기능화면으로 진행한다.
나. 타자연습 메뉴화면에서 타자연습 기능을 선택 시 출력되는 화면으로 타자연습을 할 수 있는 화면이다. 알파벳, 영단어, 영어문장 연습을 할 수 있다.
다. 알고리즘 코딩
메뉴화면에서 문제연습 기능을 선택 시 출력되는 화면으로 알고리즘 코딩을 연습할 수 있는 화면이다.
주어진 캐릭터를 목표 지점에 도착하도록 명령어를 완성하여 문제를 해결한다.
라. RC카 체험코딩
메뉴화면에서 자동차 조종 기능을 선택 시 출력되는 화면으로 RC카 체험코딩을 할 수 있는 화면이다.
명령어를 드래그 앤 드롭을 통해 입력하거나 키보드를 타이핑하여 RC카를 직접 조종할 수 있다.
- 위의 사진의 해당 RC카가 움직이게 된다.
완료작품의 평가
평 가 항 목
평가결과 1. 웹과 라즈베리파이 보드 간 통신 웹과 라즈베리파이 사이에 통신을 할 때 통신실패 횟수 체크 목표치 40, 평가결과 40
2. 자동차 움직임 명령을 하였을 때 명령을 얼마나 잘 수행하는가 체크 목표치 20, 평가결과 20
3. 타자연습 기능 주어진 단어를 타자했을 때 정확히 판별하는가 체크 목표치 20, 평가결과 20
4. 알고리즘 문제풀이 기능 출발지부터 목적지까지 자동차가 움직이는가 체크 목표치 20, 평가결과 15
