R=VR_ProjectBlog

가상현실을 활용한 장애인 직무교육 시스템

R=VR팀 | 강현우 최민우 문세미 김세인

---

목차

서론

- 문제 제기

- 프로젝트 소개

• 시스템 구성
• 시스템 특징

본론

- 핵심알고리즘

1. 360도 가상환경 구현
2. 3D Object 띄우기
3. 헤드트래킹 마우스 기능
4. 가상공간 Scene 전환
5. YouTube 영상 연동 및 재생

-어플리케이션 컨텐츠

1. 음료제작 교육
2. 서비스 교육
3. 교육효과 점검
4. 부가기능

결론

- 프로젝트 결과

• 시스템구성
• 기대효과
• 개선방향

- 프로젝트 개발 회고

---

[문제 제기]

같은 교육 시스템으로 직무 교육을 받고 있는 장애인들

우리나라 발달 장애인은 19세 이하 장애인 중 62.84%, 20~29세 청년기 장애인 중 49.5%를 차지하는 등 학령기 및 청년기 장애인의 주축을 이루고 있습니다.
장애인 경제활동 실태조사 결과에 의하면 발달장애인 실업률은 13.2%로 15세 이상 기준 전체 장애인 실업률 5.9%에 비해 2배 이상 높고 평생교육 및 직업능력개발에 관한 욕구가 강한것으로 나타났습니다.

하지만 정작 장애인들을 위한 직업교육 훈련기관은 일자리를 원하는 장애인들의 수에 비하면 턱없이 부족하였습니다.

지역 주민들의 직업능력개발훈련센터 건립 조차 반대하는 상황이 발생하고 있고, 장애인들을 위한 직업교육 훈련기관도 설립이 되었어도, 정작 해당 시스템들이 일반인들이 배우는 교육 시스템들과 차이가 나지 않는 것이 현실이었습니다.
일반 사람들의 경우에는 크게 어려움이 없지만, 정신 장애인이나 발달 장애인들에 경우에는 기존과 같은 직무교육은 그들에게 비효율적인 직무교육 시스템일 수 밖에 없었습니다.
몇몇의 교육장에서는 그들을 위해서 1:1 직무교육을 담당했지만 그곳에 들어가는 기자재와, 인건비들이 큰 부담으로 직면해 왔습니다.
장애인들을 바리스타로 양성하는 (주)향기내는 사람들의 히즈빈스 커피전문점의 경우에는 그것들을 감수하고 최소 6개월부터 길게는 2년 까지 장애인들을 맡아서 바리스타로 양성하고 있는데요. 그분들의 이야기에 따르면 장애인 한사람을 교육하는데 비용의 부담이 상당히 크다고 합니다.

그 밖에도 다양한 곳에서 장애인들의 직무교육을 담당하고 있지만, 크게 달라지지 않고 기존의 직무 교육 시스템으로 일반인들이 받는 교육과 같은 방식으로 교육을 받으면서 비효율적인 과정을 거치고 있습니다.
정신, 발달장애인의 경우 일반인에 비해 교육 학습속도가 더디기 때문에 반복학습과 맞춤형 직업 훈련이 필수적입니다. 그래서 이러한 상황에서 저희 팀은 일반적인 직무교육과 다른 시스템의 필요성을 느꼈습니다

그래서 저희는 이 부분들을 극복하기 위하여 어떻게 하면 효율적인 교육 시스템을 만들 수 있을까 고민해 보았습니다.

---

현재 시행중인 직업교육

기본적으로 교육을 한다고 했을 때 사용되는 방법은 다음과 같습니다.

1. 직접적인 체험 교육
2. E-learning 교육
3. VR

이 세가지 말고도 다양한 방법으로 교육을 진행합니다. 물론 여기서 가장 좋은 방법은 직접적으로 직업교육을 받는 것이 가장 좋습니다. 진짜 체험이 가능하고, 사람과 사람 사이에서 실시간 피드백이 가능하기 때문입니다.
그러나 여기엔 현실상 가장 큰 벽이 존재합니다. 현 대한민국에서 발달 장애인을 위한 직업교육 훈련소는 채 10곳도 되지 않으며 전체 발달장애인 수보다 훨씬 적은 수입니다. 그 긴 기간 동안 교육할 장소도, 인력도 부족한 상태입니다.

이러한 단점을 보완하고자 나온 것이 바로 E-learning 교육입니다. 흔히 말하는 인터넷 강의, ‘인강’입니다. 하나의 영상으로 여러 사람이 교육받을 수 있으며, 컴퓨터 등 기기만 있으면 어디든 교육을 받을 수 있습니다.
하지만, 전달방식 측면에 있어 발달장애인이 가지고 있는 언어의 제약성, 짧은 주의집중시간, 학습의 전이 및 일반화의 난점을 극복할 수 있는 직업교육 전달방식의 부재하다는 문제점이 도출됩니다. 또한 텍스트와 강의를 통한 기존의 교실형 직업교육훈련프로그램으로는 직업현장으로 전이가 어렵고 직업교육 효과가 부족하여 체험형 교육이 필요한 발달장애인에게는 맞지 않습니다.

이 두 가지 방법의 장단점을 어우르는 대안이 바로 VR 입니다. 새롭게 떠오르는 4차 산업 중 하나인 VR은 전달방식 측면 과 직업교육훈련 서비스 제공량 측면 에 있어 효과적인 방법입니다.
교육현장을 마치 진짜인 것처럼 느낄 수 있어 체험형 교육을 제공할 수 있을 뿐만 아니라 추가적 장비를 통해 프로그램과 상호 소통이 가능하고, 기기만 있다면 어디서든 직업훈련이 가능하기 때문에 접근성 측면에서도 큰 장점을 갖습니다. 따라서 저희는 VR을 대안으로 선택했습니다.

(용어) VR – virtual reality: 사용자가 컴퓨터로 생성된 가상의 공간에서 보고, 듣고, 느끼면서 데이터와 상호작용을 하는 것. 직접 또는 간접적으로 가상의 공간에서 움직일 수 있다.

---

[프로젝트 소개]

이러한 "VR"을 활용하여 장애인 직업교육 현장에서 나타나는 문제점들을 해결하고, 장애인들에게 효과적인 직무교육을 제공해 궁극적으로 그들의 경제적, 사회적 자립을 돕는 것이 저희 HIM 프로젝트의 목표입니다. 여러분께 HIM 프로젝트의 핵심, 장애인 맞춤형 직무교육 시스템을 소개합니다.

VR을 활용한 장애인 맞춤형 직무교육 시스템

해당 시스템은 "VR application" / "Youtube API + WebGL" / "Google Cardboard + Smart Phone" 등 총 3가지 모듈로 이루어진 하나의 직무교육 체계입니다. 이제부터 저희가 개발한 시스템을 본격적으로 파헤쳐봅시다.

시스템 구성

VR 어플리케이션

Unity로 개발한 저희 어플은 다음의 컨텐츠들을 제공하며 VR 직무교육 시스템의 중심 역할을 하고 있습니다. 후에 “컨텐츠 설명” 부분에서 더 자세히 다뤄 볼 예정입니다.

Youtube API + WebGL 기술

이 기술은 쉽게 말해서 어플에 유투브 영상을 불러오는 기술로, 이 기술 덕분에 우리 어플리케이션에 용량 걱정없이 교육 컨텐츠 영상을 불러올 수 있었습니다. 해당 기술에 대해서도 “프로젝트 핵심 알고리즘 설명” 부분에서 더욱 자세히 다룰 예정이니 궁금하시겠지만 나중에 만나 볼 예정입니다.

구글 카드보드 + Smart Phone

저희 시스템의 하드웨어라고 할 수 있는 구글 카드보드는 저가의 VR 플랫폼입니다. 간편한 조립과정을 거친 후 스마트폰을 끼우기만 하면 누구나 손쉽게 가상현실 콘텐츠를 즐길 수 있습니다. 저가라는 점, 손쉽게 사용할 수 있다는 장점이 있어 저희 시스템의 접근성을 높이는데 한 몫 했습니다.

시스템 특징

다음은 VR 직무교육 시스템 을 사용하시면서 발견하실 수 있는 특징이자 장점들 입니다. 앞서 언급했듯이 저희는 교육 시스템의 방식에 있어 많은 고민과 비교 끝에 “VR”을 채택했는데요, 이 “가상현실을 통한 교육”이 주는 장점들이 정말 다양합니다.

• 하나, 시공간의 제약이 없어 언제 어디서든 교육을 받을 수 있다.
• 둘, 추가 비용 없이 충분한 반복교육이 가능하다.
• 셋, 실제 업무현장 환경을 제공하고 1인칭 시점에서 조작이 가능해 몰입도 높은 훈련이 가능하다
• 넷, 프로그램과의 상호 작용성이 높아 교육 효과가 증대된다.

---

[프로젝트 핵심 알고리즘 설명]

지금까지 프로젝트의 겉으로 보이는 부분들에 집중했다면 이제는 프로젝트의 내부, 기술적인 면들을 살펴볼 시간입니다. 이제 저희 프로젝트의 주 개발 Tool인 Unity 기술 구현을 비롯하여 Youtube 영상 연동에 관해 알아봅시다.

먼저, 저희가 주로 작업했던 개발환경인 Unity 3D를 간단히 소개하겠습니다. 유니티는 게임 엔진 기술이자 통합개발환경입니다. 여러분들이 잘 아시는 포켓몬 고라는 게임도 게임 첫 화면에 Unity 3D라는 로고를 확인 하실 수 있을 것입니다. 유니티는 포켓몬 고 뿐만 아니라 현재 다양한 모바일 어플리케이션 분야에서 널리 사용이 되고 있을 만큼 많은 개발자들이 유니티를 사용하고 있습니다.

그렇다면 저희가 이 유니티를 사용해서 어떻게 화면을 만들고 그 안에서 오브젝트를 컨트롤 하고, 화면을 전환하고, 영상들을 불러와서 사용자와 어떻게 상호작용하는지 하나씩 알아보겠습니다.

1. 360도 가상환경 구현

Unity3D에는 user의 눈 역할을 하는 카메라가 있습니다. 이 카메라를 통해 사용자는 3D로 구성된 공간 어디든 볼 수 있습니다. 우리는 그 카메라를 적절하게 이용해 히즈빈스 업무현장을 360도로 생생하게 담아냈습니다. 어떻게 이것이 가능할까요?

Basic idea

바로, 모든 각도에서 이미지가 보이게 하는 것. 이것이 key point입니다. 그렇다면 어떻게 모든 각도에서 이미지를 보도록 할 수 있을까요? 네모 반듯한 모양의 이미지를 상상하면 도무지 풀리지 않는 문제입니다. 조금 관점을 바꾸어서 생각해보면, 간단합니다. 오른쪽의 그림과 같은 하나의 구를 생각해보세요. 그리고 그 구 내부에 이미지를 씌웁니다. 그 다음, 카메라를 구의 정 중앙에 배치합니다. 그러면 이제 한 점의 위치에서 구의 상, 하, 좌, 우 어디든 볼 수 있죠. 바로 이 원리를 이용해 실제 업무 현장을 생생하게 담아낼 수 있던 것 입니다.

In Unity

유니티에서

1. 좌측 상단 Hierarchy 창에서 마우스 오른쪽 버튼 클릭, 3d object 를 들어가서 sphere 메뉴를 눌러 구를 생성합니다.

2. 그리고 나서 좌측하단 asset 창에서 마우스 오른쪽 버튼 클릭을 하고 나면 create로 Material를 생성합니다.

3. 그러면 example이라는 Material이 만들어 진것을 확인 할 수 있습니다. 이것은 2d 또는 3d 오프젝트에 외부적인 색이나 이미지, 그림들을 삽입 할 수있는 스케치북의 역할을 합니다.

4. 3d 오브젝트인 구에다 우리가 씌울 스케치북을 적용하기 위해 example Material을 구에다가 드래그 합니다. 그러면, example이 구안에 쏙 들어가는 것을 확인 할 수 있습니다.

5. 다음으로는 오브젝트 구의 inspector를 보시게 되면, shader라는 standard 옵션을 가지고 있는 설정창이 있는 것을 확인 할 수 있습니다. 그리고 그곳에서 VRshpere라는 선택창을 고릅니다. 이것은 우리가 스케치북을 장만하였지만, 그곳에 꾸밀수 있는 기능을 지원해줍니다. VRsphere라는 이름은 저희가 임의로 만들어 준 것입니다.

Shader "VRSphere"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		Cull front

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			// make fog work
			#pragma multi_compile_fog

			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;

• shader라는 공공의 opensource를 활용하여 스크립트를 작성하여 만들어놓았습니다. 이것은 쉽게 오픈소스로 구할 수 있습니다.

6. 그리고 마지막으로 그릴 수 있는 기능이 추가 되었으면, 그곳에 무엇을 그릴지, 무슨 360영상을 넣을지 선택할 수 있는 select 란을 확인 하실수 있습니다. 그곳에서 사전에 준비한 영상을 씌우면 최종적으로 구영상에 입혀진 360 영상을 볼 수 있습니다.

※ 이 때 씌우는 이미지는 반드시 360도 이미지여야 한다. ※ 구체의 바깥쪽에 씌워지지 않도록 주의한다(추가적인 코딩 필요)

---

2. 3D Object 띄우기

360도 가상 공간을 만들었습니다. 그러면 그 안에서 상호작용 할 수 있는 물체들이 있어야 하지 않을까요? 저희가 이번에 알아볼 것은 Object 띄우기 입니다.

Object의 종류는 다양합니다. 우리가 헤드트레킹 클릭기능을 통해 상호작용할 슬라이드나, 메뉴, 설정, 그리고 커피 머신 등의 각종 기기들을 컨트롤 할 수 있게 대상을 만들 수 있습니다. Object의 종류가 다양하듯이 Object를 띄우는 방법도 다양합니다. 그 중에서 우리는 대표적으로 SLIDER를 만들어 보겠습니다.

유니티의 첫 화면입니다. 여기에서 아래 화면과 같이 오른쪽 클릭을 하면 유니티가 제공하는 기능들이 나열되어 있습니다. 여기에서 유니티에서 제공하는 UI 기능에 들어갑니다. 그러면 그 안에 TEXT, IMAGE, BUTTON, SLIDER, CANVAS 등등 여러가지의 UI로 나타낼 수 있는 오브젝트들이 있습니다.

예를 들어 SLIDER를 클릭해보겠습니다. 그러면 화면에 가로막대기가 하나 생깁니다. 이 가로막대기는 마우스를 활용하여, 포토샵을 이용하는 것과 같이 쉽게 줄이고 늘이고, 넓히고, 좁힐 수 있습니다.
저희는 지금 다음 화면으로 이동하려는 수단을 만들었습니다. 단순한 껍데기 뿐이지요. 시각적으로는 게이지처럼 생긴 막대기가 보일지 모르겠지만, 작동은 전혀 안되는 상태입니다.

다음으로 막대기 오브젝트를 클릭하게 되시면, 왼쪽 사진과 같은 SLIDER에 대한 기능들이 나타나게 됩니다.
여기를 보시면 먼저, RECT TRANSFORM는 오브젝트의 위치를 값으로 입력할 수 있는 기능이 제공됩니다. 원하는 위치에 값을 입력하여 오브젝트를 놓을 수 있습니다. 그 안에 ROTATION은 오브젝트의 회전을 말할 수 있는데요, X, Y, Z 축으로 자유롭게 회전 시킬 수 있습니다.
다음으로 저희가 볼 것은 TARGET GRAPIC 과 MIN VALUE MAX VALUE 입니다. TARGET GRAPIC은 말그대로 오브젝트에 띄울 그래픽을 선택하는 것이고, 그래픽은 외부에서 가져오든 자신이 만든 그래픽을 사용하든 자유롭게 사용할 수 있습니다. 그리고 MIN, MAX VALUE는 슬라이드의 GAGE가 차는 값의 기준인데요. MIN은 시작을 의미하며, MAX는 끝을 의미합니다. 보통 각각 0과 1로 기본적으로 입력이 되어 있습니다. 그러면 나머지 밑에 있는 VALUE 값은 0에서 1부터 게이지가 차는 것으로 알 수 있을 것입니다. 지금까지의 이 부분들은 이따가 설명해드릴 화면전환과 긴밀하게 연관이 되어있는데요. 자세한 설명은 화면전환 알고리즘에서 말씀드리겠습니다.

지금까지의 방법으로 3D Object는 Unity를 처음 접하는 사람들이라도 쉽고 간단하게 만들 수 있습니다.

---

3. 헤드트래킹 마우스 기능

가상현실 시스템과 헤드트래킹

사용자와 가상공간의 상호작용이란, 사용자의 의도한 몸의 움직임이 가상공간안에서 구현이 되는 것을 말합니다. 사용자는 상호작용을 통해 다양한 움직임을 표현할 수 있을 뿐만 아니라, 만들어진 3D Object를 만지거나, 프로그램 내에서 여러가지 선택을 할 수 있습니다.
하지만 타 VR제품과는 달리, 구글 카드보드를 사용하면 모바일 기기의 터치 기능을 사용할 수 없기 때문에 기존의 VR기기와는 다른 방법을 사용합니다. 바로 모바일 기기의 gyroscope센서를 통한 헤드트래킹 마우스 방식을 사용하는 것을 말합니다.

Google Cardboard SDK

구글에서는 카드보드에 관련한 SDK를 홈페이지에서 제공합니다. 구글 카드보드 전용 어플리케이션을 만드는데 도움이 되는 강력한 기능들을 제공합니다.
그 중에서 헤드트래킹을 마우스를 구현하기 위해선 GvrEditorEmulator, GvrEventSystem 그리고 GvrReticlePointer Prefab을 사용합니다.

• Prefab이란, 유니티의 핵심 기능 중 하나로써, 게임 오브젝트를 하나의 틀로 만들어 원하는 대로 인스턴스화 할 수 있도록 만드는 asset의 일종입니다.

1. GvrEventSystem: 키보드, 마우스, 터치 및 사용자의 입력에 따라 응용 프로그램의 오브젝트에 이벤트를 보내는 방법.

2. GvrReticlePointer: 사용자가 Pointing하는 좌표상에 reticle 을 그려내는 기능.

3. GvrEditorEmulator: Unity 개발환경에서 마우스 control의 헤드트래킹 emulation을 제공.

적용방법

헤드트래킹 컨트롤 방식을 적용하고 싶은 Scene에, 3가지 Prefab을 드래그-드랍으로 넣어주면, 간단하게 적용할 수 있다. 유의해야할 점은 EventSystem과 EditorEmulator는 백그라운드에서 작동하기 때문에 최상위 hierarchy에 적용을 하는 것입니다. ReticlePointer는 항상 사용자의 시점을 따라다녀야 하기 때문에 Main Camera를 상속받을 수 있도록 하위 hierarchy에 적용합니다.

결과

• GvrEditorEmulator로 시험 화면에서 마우스를 사용하여 머리의 움직임을 구현합니다.
• GvrEventSystem로 커서의 움직임과 각종 InputMudule의 사용을 관리합니다.
• GvrReticlePointer로 화면 중앙에 머리의 움직임을 따라오는 Pointer를 그려냅니다.

결론: 3가지 Prefab을 합쳐 헤드트래킹 마우스 역할을 할 수 있는 control기능을 구현할 수 있습니다.

---

4. 가상공간 Scene 전환

다음으로 살펴볼 프로젝트의 핵심 알고리즘 그 세번째는 'Scene 전환 기능' 입니다.

Unity에서 말하는 Scene이란?

어플을 실행시키면, 초기화면이 있을 것이며 특정 메뉴 버튼을 클릭하면 그 메뉴에 해당하는 기능이 담긴 화면으로 이동할 것입니다. 이러한 화면 하나하나를 unity에서는 scene이라고 하며 화면 전환을 "scene이 전환된다." 라고 말합니다. 그리고 이 각각의 scene들은 일련의 리스트 속에서 자신만의 번호를 갖습니다. 이 많은 scene들이 모여 Unity 어플리케이션 되는 것입니다.

Scene의 전환

본론으로 돌아와서, Scene 전환 기능은 어떻게 이루어지는지 살펴봅시다. 사실 scene을 전환하는 것 자체는 무척 간단합니다. 코드를 통해 구현하는데, 씬을 로드하는 함수에 불러올 Scene의 번호를 인자로 전달해 주기만 하면 됩니다.

예시코드를 한 번 보겠습니다. 다음은 아까 만들었던 슬라이더를 2초 바라보면 5번 scene으로 전환되는 코드입니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class Progress_0_1 : MonoBehaviour
{
    private bool gazedAt = false;
    private float timer = 0.0f;
    private Slider slider = null;
    private float gazedTime = 2.0f;

    public Slider slide;

    void Start ()
    {
      slider = GetComponent<Slider>();
      slider.value = 0;
     }

    void Update()
    {
        if (gazedAt)
        {
            timer += Time.deltaTime;

            if (slider.value >= 1.0f)
            {
                SceneManager.LoadScene(5);
                timer = 0.0f;
            }
        }
        else
        {
          timer = 0.0f;
        }

        slider.value = timer / gazedTime;
    }

  public void PointerEnter()
    {
        gazedAt = true;
    }

    public void PointerExit()
    {
        gazedAt = false;
    }
}

코드의 내부를 하나하나 뜯어보며 파악하기보다, 이 코드를 통해 유니티 코드의 일반적인 구성을 익혀보며 개관해봅시다. 유니티 코드는 주로 start함수와 update함수로 이루어집니다.

void Start()
{
}

Start 함수는 프로그램이 시작되고 딱 한번 실행이 되는 함수입니다.

void Update()
{
}

그리고 Update함수는 매 프레임마다 동작하는 함수 입니다.

public void PointerEnter()
    {
        gazedAt = true;
    }

    public void PointerExit()
    {
        gazedAt = false;
    }

저희는 여기에 PointerEnter함수와 PointerExit함수를 추가해주었는데요, PointerEnter 함수는 특정 object에 포인터가 위치해 있을 때 불러와집니다. PointerExit 함수는 바라보고 있던 특정 object에서 시점이 옮겨질 때 불러와집니다. 이 두 함수 내에 bool타입 변수 gazedAt을 각각 true와 false로 설정해준다면, 이 변수의 값을 통해 슬라이더를 바라보고있는지 아닌지를 판단할 수 있습니다.

void Update()
    {
        if (gazedAt)
        {
            timer += Time.deltaTime;

            if (slider.value >= 1.0f)
            {
                SceneManager.LoadScene(5);
                timer = 0.0f;
            }
        }
        else
        {
            timer = 0.0f;
        }
        slider.value = timer / gazedTime;
    }

이제 이 코드의 핵심인 Update 함수를 살펴보겠습니다. 여러 조건문들이 보이며 이 조건문들이 '슬라이더를 2초 동안 바라보면'에 해당하는 조건상황을 코드로 나타낸 것입니다. 조건문의 가장 내부의 코드를 보면, SceneManager.LoadScene(5); 명령어가 있습니다. 이 함수가 바로 앞서 언급했던 scene을 불러오는 함수입니다. 5는 Scene의 번호를 의미하여 다음의 조건문들을 만족하면, 5번 scene으로 이동하라는 의미입니다.

이렇게, 조건 상황에 대한 코드 구현만 이루어지면, 화면전환은 무척 쉽게 이루어진다는 것을 알 수 있습니다.

---

5. YouTube 영상 연동 및 재생

왜 YouTube인가?

동영상들을 유니티 앱에서 보여줄 때, 물론 가장 간단한 방법은 동영상을 앱 자체에 넣는 방법입니다. Unty 상에서 복잡한 과정을 거치지 않아도 되며, unity 자체에서 알아서 인코딩 시켜주기 때문이죠. 하지만 이 방법엔 치명적인 단점이 존재합니다. 영상이 하나 정도라면 어느 정도 감당할 수 있으나, 영상이 많아지면 /동영상 용량+유니티 앱 자체의 용량 = 엄청난 용량/이 돼 버리기 때문입니다.
그렇기 때문에 동영상을 YouTube에 올리고, 그 웹 상의 영상을 인터넷 연결을 통해 가져오도록 하는 방법을 사용했습니다.

YouTube과 unity의 연동방법

이를 위해 사용된 방법이 YouTube API입니다. 유튜브 응용 프로그램 프로그래밍 인터페이스의 약자로, youtube 채널의 데이터에 엑세스 할 수 있는 기능이라고 볼 수 있습니다. 웹 페이지, 앱 또는 기기로 영상을 가져 올 수 있도록 도와줍니다. 이를 위해 YouTube 영상의 고유 video ID를 사용합니다.

기본적으로 유튜브 영상에는 고유 video ID가 존재합니다. 우리가 흔히 보는 주소창의 위의 빨간 네모칸이 바로 그 영역인데, 이 부분이 기본적으로 제공하는 API와 연동됩니다. 해당 아이디를 unity에 가져와 영상을 받습니다. 받은 영상은 구체에 씌워지고 360도로 보여지게 됩니다.

+추가) 사용한 ASSET ROADMAP - https://trello.com/b/EqCskgOe/youtube-plugin-roadmap

---

[어플리케이션 컨텐츠]

저희 VR 직무교육 시스템은 ‘바리스타 교육’을 주제로 제작되었는데요,그 큰 주제 아래 크게 세가지 컨텐츠와 그 외 부가기능들을 제공합니다.

1. 음료제작 교육

음료 제조 교육은 가장 본질적으로 이루어지는 교육이라고 할 수 있습니다. 음료의 제조과정은 생각보다 생각보다 까다로워 일반인의 경우에도 충분한 반복학습이 필요합니다. 저희 시스템은 학습이 상대적으로 더딘 장애인 교육생들에게 충분한 반복학습을 가능하게하고 기타 상호작용과 가이드라인을 제공합니다.

이 컨텐츠를 통해 교육생들은, 제조 순서와 어떤 장비를 사용해야 하고, 각 순서에서 유의할 점은 무엇인지를 사용자가 원하는 대로 제공받을 수 있습니다.

1. 제조 교육을 원하는 음료 선택

2. 선택 음료의 모든 제조 과정을 Step-by-Step 한 단계씩 구현

3. 사용자는 다음 Step으로 넘어가기 위해 올바른 제조 순서를 선택
4. 선택에 따라 다른 공간으로 이동하거나, 해당 Step의 디테일한 행동을 보여주는 영상 재생
5. 사용자의 선택을 돕는 음성과 자막으로 된 교육용 가이드라인 제공

6. 추가적인 설명과 유의사항은 팝업창으로 표시

음료제조 교육은 위에서 볼 수 있는 핵심 알고리즘들의 반복입니다.

• Sphere에 히즈빈스 매장을 배경으로 한 가상공간을 구현
• 3D Object를 띄워서 선택할 수 있는 메뉴 버튼과 자막을 구현
• 헤드트래킹 마우스 기능으로 원하는 메뉴를 선택
• Slider가 커서 이벤트를 인식하고, 화면 전환 알고리즘을 통해 다음 화면으로 이동

고정적으로 사용되는 핵심 알고리즘을 구함으로써 다른 음료제조 교육을 구현할 때, 마치 객체지향 언어에서 만들어 놓은 Class혹은 Method를 사용하듯이 편리함을 가져올 수 있습니다.

---

2. 서비스 교육

서비스 교육에는 사용자가 가장 어려워하는 서비스 적인 업무를 교육하는 영상이 포함됩니다. 주문을 받는 ‘order’ 파트와 돌발상황에 대한 ‘complain’ 파트에 대한 교육 영상을 제공하며 구체적으로 order 파트에는 주문 받기, 주문 메뉴가 나왔을 때, 주문이 까다로울 때 영상이 있으며 complain 파트에는 이물질이 들어갔을 때, 주문을 잘못 받았을 때, 포스기 사용하는 방법 등이 있습니다.

1. 원하는 교육 선택

2.서비스 교육 영상 재생 원하는 교육 파트를 선택하여 들어가면 해당 교육 영상이 재생되는데, 이 때의 영상은 실제 업무 환경을 담은 360도 영상입니다.( 바로 앞서 설명드린 youtube API를 활용한 연동 및 재생 기술이 사용됩니다.)

---

3. 교육효과 점검

시나리오 Test와 서비스 Quiz

단순히 배우는 것을 넘어서 점검하는 시간도 교육에는 필요한 과정입니다. 또, 무언가를 효과적으로 기억하기에 퀴즈만큼 좋은 것도 없습니다. 다들 ‘시험본다’고 하면 그래도 한번씩 주의 깊게 보기 마련이니까요. 그래서 간단한 test와 퀴즈 게임을 넣었습니다.

Test는 어떻게 이뤄지나요?

저희가 만든 Test는 단순하게 이뤄집니다. 바리스타 교육에서 중요하게 여겨지는것은 바로 '만드는 순서'를 '정확히' 알고있는 것입니다. 그렇기 때문에 Test에서도 해당 부분을 살리기 위해 시나리오 교육부분에서 안내 음성이나, 자막을 모두 빼버렸습니다(....)
Test가 이뤄지는 알고리즘은 다음과 같습니다.

1. 안내 음성과 자막을 모두 뺀 상태에서 시작합니다.
2. 시작한 후, test의 목적(ex. 아메리카노를 만든다)에 따라 커피를 만드는 순서대로 사용하는 도구나 기계를 클릭해서 선택합니다.
   2-1. 맞다면 다음 순서로 넘어갑니다.
   2-2. 틀렸다면 순서에 맞는 기계 부분이 빨간 선으로 바뀌면서, 다시 선택하도록 돕습니다.
3. 틀린 횟수에 따라 점수가 부여됩니다.

해당 과정을 통해 순서를 완벽히 익힐 수 있도록 돕습니다. 틀렸을 경우에는 틀렸다는 안내창이 나오기도 합니다. 전체적인 구현은 음료제작교육 과 다르지 않기 때문에 해당 부분을 참고해 주시면 감사하겠습니다.

퀴즈게임은 어떻게 만드나요?

1 컨셉: 어떻게 퀴즈게임을 만들 것인가? – code의 구성

전체적인 코드의 컨셉은 3가지의 array를 만드는 것입니다.

① 첫 번째는 문제에 해당하는 array로 문제의 내용을 저장합니다. (eg. 커피콩을 누를 때 쓰는 도구는?)
② 두 번째는 해당 문제에 대한 답을 저장할 array를 만듭니다. 여기서 주의할 점은 문제 의 순서대로 답도 똑같은 순서를 가지고 있어야 합니다.
③ 마지막으로 세 번째는 각 문제에 해당하는 보기에 대한 array 입니다. 만약 4지선다 문제이면 array를 4개, 오엑스면 두 개의 array를 만드는 등 각 문제의 성격에 따라 보기 의 수만큼 여러 개 만들어 주면 됩니다.

이렇게 만들어진 array를 순서대로 서로 비교합니다. 예를 들어 첫 번째 문제에 대한 답 을 선택하면 그 array와 같은 순서의 답 array와 비교하여 같으면 점수를 주고, 같지 않 으면 점수를 주지 않습니다.
첫 번째 문제가 끝나면 두 번째 순서의 array를 보여줘 퀴즈 를 마저 진행합니다. 이렇게 만드는 이유는 순서에 따라 array 내용만 보여주면 되기 때 문에 SCENE을 굳이 추가해서 만들지 않아도 된다는 장점을 갖기 때문입니다. Scene이 많아지면 많아질수록 개발자는 복잡함에 고통 받기 때문에 최대한 scene을 줄일 수 있는 스크립트를 짜야 합니다!

2. 퀴즈의 결과는 어떻게 저장되는가?
단순히 퀴즈만 보는 건 아닙니다. 사용자가 의지를 더욱 불태울 수 있도록 퀴즈의 결과 도 보여줄 수 있도록 만들었습니다. 목표가 있고 없고의 차이는 크니까요(…) 이를 위해 맞춘 문제의 점수에 따라 별 개수를 부여했습니다. 이를 편리하게 구현할 수 있는 방법 이 바로 PlayerPref function입니다.

해당 function은 데이터를 local에 저장하여 key 값을 통해 어느 스크립트에서든지 PlayerPref에 저장된 값을 사용할 수 있도록 해줍니다. 게임을 만들 때 최적화된 function 입니다.

이런 방식으로 스크립트 어느 곳에서든 접근이 가능하게 해줍니다. 이렇게 저장된 결과를 토대로 어느 script에서든 결과 값을 불러와 사용할 수 있게 됩니다.

결과

---

4.부가기능

어플 도움말

3D Object를 띄우는 기능, 물체에 이미지를 씌우는 기능, 그리고 적절한 배치를 통해 구현한 어플 사용방법 안내창 입니다. 추가적으로 다음 창으로 넘어가는 버튼, skip할 수 있는 close 버튼도 구현되어있습니다.

어플 사용 안내창만의 핵심 기술은 바로 안내창을 “어플 최초 실행 시에만” 뜨게 하는 기능입니다. 해당기능 또한 퀴즈에서 유용하게 쓰였던 PlayerPref function으로 구현할 수 있는데요, 자세한 알고리즘은 이렇습니다.

• 변수 count를 선언해서 초기값을 1로 설정합니다.
• 매 실행 시, count가 1임을 확인하는데 최초 실행이라면 값이 1이니 안내창을 그대로 둡니다.
• 그 다음 값을 증가시켜 저장합니다.
• 이후의 실행 부터는 불러온 count의 값이 1이 아니므로 안내창을 띄워지지 않도록 합니다.

이렇게 앞선 기능에서와 마찬가지로 “값의 저장과 불러오기”를 이용해 최초 실행시에만 안내창이 뜨는 것을 구현하였습니다.

VR 어지럼증 경고창

어플의 작동 시간을 계산해 일정시간 간격으로 팝업 경고창을 띄워줍니다. 이렇게 함으로써 VR 어플리케이션에 필수적인 어지럼증에 예방 기능을 더하였습니다. 교육 종료 버튼과 계속 버튼이 있으며, 버튼을 이용하여 경고창을 끄더라도 이 경고창이 사라지는게 아니라 사실 위치를 보이지 않는 곳으로 옮긴 것이라는 게 재미있는 점입니다.

---

[프로젝트 결과]

시스템 구성

• Hardware: Google Cardboard + Smart Phone
• Front-end: Unity3D
• Back-end: YouTube API + WebGL

각 모듈의 데이터 상호작용은 위의 시스템 구성도로 표현할 수 있습니다.

사용자는 가상현실을 체험할 수 있는 직접적인 하드웨어를 사용하여, Unity3D 엔진으로 만들어진 가상공간을 체험할 수 있습니다. 가상현실에선 직무에 필요한 다양한 교육을 받을 수 있고, 교육이 효과를 검증하기 위해 일련의 퀴즈나 시험을 치룰 수도 있습니다. 또한 직무교육은 단순한 장면의 연속이 아닌, 사용자가 직접 선택하고 가상현실과 상호작용하며 진행되며, 더 높은 수준의 이해를 돕기 위하여 동영상 또한 제공합니다. 게다가 동영상이 YouTube API와 WebGL기술을 사용하여 스트리밍 형식으로 제공됨에 따라 사용자에게 더 빠르고 가벼운 어플리케이션 시스템을 제공할 수 있게 되었습니다.

기대효과

프로젝트가 가져다 줄 포인트는

1. 기술적 측면
   가상현실을 사용하는 직무교육이라는 점에서 몰입도, 현장감, 제약 없는 교육환경을 제공합니다.
2. 경제적 측면
   효율적인 직무교육으로 높은 효과를 얻어냄과 동시에, 비용을 절감할 수 있습니다.
   또한 장애인 맞춤교육으로 경제활동 참가율을 증가시킬 수 있습니다.
3. 사용자 측면
   사용자에게 필요한 직무교육을 언제 어디서나 원하는 만큼 제공할 수 있습니다.

프로젝트 개선 방향

팀의 프로젝트는 가상공간 내부에서 사용자의 Interaction을 증가시키기 위한 방향으로 개선될 예정입니다.
가상현실의 장점은 가상공간에서 겪는 경험을 실제의 경험처럼 느껴지게 만드는데에 있습니다. 그러기 위해선 사용자의 많은 감각이 가상현실과 연동되어야 합니다. 따라서 팀은 우선적으로 사용자의 컨트롤 방식을 개선할 계획입니다.

1.저가의 컨트롤러 장비를 사용

시중에서 판매되고 있는 컨트롤러 장비를 사용하여 가상현실 내부에서의 헤드트래킹 컨트롤 방식을 대체 합니다. 카메라를 사용한 모션인식은 고가의 비용이 전제되어야 하기 때문에 적용에 제한이 따릅니다.
하지만 인체의 전기신호를 사용하여 근육의 움직임을 인식하는 MYO 도 시중에서 판매중이고, 자이로센서를 사용하여 컨트롤 값을 받아오는 컨트롤러 기기 도 개발중이기 때문에 적당한 가격 범위안에서 프로젝트를 개선할 수 있을 것이라 예상합니다.

2. 영상검출을 통해 가상 컨트롤러 구현

만약 저가의 컨트롤러를 구할 수 없는 상황이나, 프로젝트와의 호환성 문제, 또는 프로젝트 사용자가 추가적인 비용을 원치 않는 상황이 발생할 수 있습니다. 그런 경우에는 프로젝트가 모바일 기기를 사용하는 특성을 활용해 핸드폰의 카메라를 활용 하는 방안이 있습니다. 핸드폰의 후방카메라를 사용하여 눈 앞의 손 모양을 검출해 여러가지 동작으로 컨트롤러를 구현 할 수 있습니다.
이 방식을 사용하면 컨트롤러보다는 정확성이 떨어진다는 단점이 있지만, 추가 장비가 아닌 프로젝트 자체의 기능을 제공하기 때문에 더 많은 사람들이 사용할 수 있는 장점을 가질 수 있습니다.

---

프로젝트 회고

팀장 강현우

직무교육 시스템으로 가상현실을 선택한 이유는, 더 실감나고 현장감 있는 교육공간을 제공하여 사용자로 하여금 현행되고 있는 교육 시스템보다 더 적합하고 몰입도 있는 교육을 제공 하기 위해서 였습니다. 하지만 조금 더 생각해야할 부분이 있습니다.
무엇이 사용자의 흥미를 유발하며, 더 집중하게 하는가? 그 문제에 대한 해답은 어떤 컨텐츠로 교육을 하는가? 란 질문으로 찾을 수 있었습니다. 팀은 프로젝트의 교육부분이 사용자의 집중도를 결정한다고 생각하여, 더 효율적이고 몰입도 높은 새로운 컨텐츠를 개발할 필요성 을 느껴 현재 UX연구팀과 협업하며 진행하고 있습니다.

개발자 최민우

1. 대부분 한 Scene에 하나 이상의 Script가 들어가 있음. 많은 부분들이 겹치는 코드임에도 불구하고, 하나 또는 소규모의 script로 통합하지 못하고 있음. Scene이 적으면 모르겠지만, 많은 컨텐츠 서비스들이 들어가기 때문에 동시에 들어가는 비슷한 Script들도 매우 많아진다. 비슷한 스크립트들을 통합할 방법이 필요 합니다.
2. 장면 전환에 대한 아쉬운 한계가 있습니다. 화면을 돌렸을 때, 오른쪽에 있는 오브젝트를 바라본 후 장면전환을 하게 되면, 기준점(0, 0)으로 돌아와야 하는데, 이전 화면에서 바라본 시점 그대로를 반영하고 있기에 수정될 필요가 있습니다.

개발자 문세미

1. 지속적인 개발을 위해선 영상재생 기능 을 자체적으로 구현해야 할 필요가 있습니다.
2. 시스템 구성의 간결화를 위해 Scene을 더 적게 사용 하는 알고리즘을 구현할 필요가 있습니다.
3. 추가적인 장비 를 사용하여 가상현실을 더 현실같이 구현할 수 있을 것이라 생각합니다.

개발자 김세인

VR 어플리케이션의 가장 큰 단점으로 VR어지러움 증상 을 꼽을 수 있는데 이는 장시간 교육에 방해를 주는 요소입니다. 따라서 어지럼증 경고창을 띄우는것 의외의 추가적인 방편 에 대해서도 연구가 필요합니다.

---

시선 R=VR팀이 추구하는 프로젝트는 위에서 언급한 효과 뿐 만 아니라, 경제적 어려움으로 인해 필요한 직무교육을 받지 못하는 사람들에게 저 비용으로 높은 효율을 낼 수 있는 직무교육을 제공하며, 비 효율적인 교육으로 인해 어려움을 겪고있는 장애인 교육생들에게 맞춤형 교육을 제공하는 것을 목표로 삼고 있습니다.

기술적으로 소외된 모든 사람들이 평등한 기회를 가질 수 있는 그 날을 응원합니다.