brunch

You can make anything
by writing

C.S.Lewis

by Master Seo Jul 27. 2022

6탄-3. 에듀버스 - AWS 서비스를 이용한 교육

03. 에듀버스 - AWS 서비스를 이용한 인터랙티브 가상 교육 플랫폼


<1> 에듀버스 - 메타버스 스타일의 교육 서비스.

<2> 로비는 메타버스 형식으로 구현되어, 참여자들의 소통이 가능하다.  원하는 교육 장소로 이동할 수 있다.

<3> 대강당은 다수의 참여자를 대상으로 한  라이브 스트리밍 기능을 제공한다.

<4> 강의실에서는 온라인 화상수업이 가능하다.  선생님과 학생의 직접적인 소통이 가능하다.

<5> VR학습터에서는  다양한 AI/ML 기술로 다양한  교육 서비스 구현함




<1> 에듀버스 - 메타버스 스타일의 교육 서비스.


1

AWS 서비스를 이용해서 구현한 인터랙티브 가상 교육 플랫폼

2달 프로젝트


2

구현?

Amazon IVS , Amazon Chime , Amazon Sumerian  ,  여러 AI/ML 서비스를 이용해서 메타버스 형식으로 구현


3

서비스?

로비는 메타버스 형식으로 구현되어, 참여자들의 소통이 가능하다.  

원하는 교육 장소로 이동할 수 있다.

대강당은 다수의 참여자를 대상으로 한  라이브 스트리밍 기능을 제공한다.

강의실에서는 온라인 화상수업이 가능하다.  

선생님과 학생의 직접적인 소통이 가능하다.

VR학습터에서는 VR튜터와 함께 인터랙티브 한 언어 학습이 가능하다.




<2> 로비는 메타버스 형식으로 구현되어, 참여자들의 소통이 가능하다.  원하는 교육 장소로 이동할 수 있다.


1

채팅 가능, 서로의 이동도 실시간 확인 가능


2

로비는 게임 프레임워크로 구현했다.

NPC (Non-Player Character , NPC )는 게임에서 사람이 직접 조작하지 않는 캐릭터를 말한다.

논 플레이어 캐릭터, 즉 도우미 캐릭터인 NPC 도 각 구역마다 존재한다.


3

로비는 어떻게 만들어졌나?

프런트 앤드는 리액트를 사용한다.

리액트 라우터와 리코일을 사용한다.

리액트 라우터를 이용해 장소를 이동한다.

리 코일로 캐릭터의 상태를 관리한다.


4

웹 프레임워크 중 리액트 사용 이유?

참고자료가 많음

개발자가 라이브러리를 자유롭게 선택 적용 가능

AWS Amplify와 통합이 편리하다.


5

로비의 2D 게임 화면은?

2D 게임 프레임 워크인 페이저 3을 사용함.


6

멀티 유저 플레이는 어떻게 구현했나요?

AWS AppSync를 이용합니다.

특정 캐릭터가 이동하면 패이저 3에서 UpdateTutee  가 발생한다.

다른 유저는 UpdateTutee를 구독하고 있는 상태이다.


7

다른 장소 대강당으로 이동은 어떻게 하나요?

물리엔진이 객체 간의 충돌을  감지해서  리액트 라우터가 캐릭터를 해당 장소로 이동시킨다.

장소를 이동하면서 저장되어야 할 상태 정보는 리코일로 관리한다.




<3> 대강당은 다수의 참여자를 대상으로 한  라이브 스트리밍 기능을 제공한다.


1

Amazon IVS 서비스를 이용한다.

라이브 방송에 대화형 경험을 더할 수 있다.


2

대강당 사용 시  아마존 서비스는?

Amazon IVS

Amazon IVS;s  Timed Metadata API   (문제)

채팅장은  Chime SDK   활용


3

IVS 자료는?

https://ivs.rocks  

다양한 예제와 샘플 코드가 있다.


4

대강당에서 영상을 보는 과정?


스티리머 --- 채널 생성 ------------- 아마존 IVS ------  클라이언트 ------- IVS 플레이어 ---- 뷰어

수집 서버로부터 비디오 송출 -OBS  스튜디오




<4> 강의실에서는 온라인 화상수업이 가능하다.  선생님과 학생의 직접적인 소통이 가능하다.


1

강의실에서는 선생님과 학생이 양방향으로 인터랙티브 하게 소통할 수 있다.


2

Chime SDK를 이용해서 개발함.

웹캠, 마이크 이용한 원격 대화와 화면 공유가 가능하다.


3

Chime SDK를 이용해서 개발하는 이유?

Chime에서 제공하는 기능을 빠르게 사용 가능

서버 사이트를 개발하지 않아도 된다.

자바스크립트 SDK와 리액트 컴포넌트들을 활용해 커스터마이징함


4

Chime SDK는 음성/영상 회의에 필요한 기능을 제공한다.

웹을 위한 자바스크립트 SDK , 모바일 애플리케이션을 위한  IOS, 안드로이드 SDK도 제공한다.

AWS-samples 레파지토리 내에 예제가 많다.


5

구현은  Chime SDK로.




<5> VR학습터에서는  다양한 AI/ML 기술로 다양한  교육 서비스 구현함


1

VR선생님 구현은?

Amazon  Sumerian 사용

웹 기반  3D  레터링 구현이 가능하다.  AR/VR  개발이 가능하다.

온라인 교육, 제품 마케팅 , 교육 시뮬레이션 , 여행 등에서 사용 가능.


2

듣고 말하기 기능 구현은?

Amazon Polly - 텍스트를 음성으로 변환

듣고 따라 말하면,  Amazon Transcribe로 음성을 텍스트로 변환 후 유사성을 비교한다.

언어나 문장을 추출해 JSON형태로 반환한다. 비교한다.


3

레코그니션 서비스로  그림 카드를 알아볼 수 있어요.

Amazon Rekognition  서비스

사진에 있는 사진을 탐지하고  그 내용을 JSON형태로 결과를 받는다.

JSON 결과에 원래 주어진 단어가 포함되면 , VR 튜터가 그 결과를 알려준다.


4

낱말 카드 찾기 구현은?

AWS Textract  서비스 사용

OCR 서비스이다.

화면에 보이는 그림에 해당하는 낱말 카드 찾기

자전거 이미지 보여준다.

AWS Textract 이미지로부터 텍스트, 필기 등 데이터 추출

결과 판단 - 주어진 그림과 추출된 텍스트를 비교한다.




<10> 개인 정리


로비, 대강당, 강의실, VR학습터를 구현한 아키텍처를 다시 한번 보고 이해 하자.


<2> 로비는 메타버스 형식으로 구현되어, 참여자들의 소통이 가능하다.  원하는 교육 장소로 이동할 수 있다.

<3> 대강당은 다수의 참여자를 대상으로 한  라이브 스트리밍 기능을 제공한다.

<4> 강의실에서는 온라인 화상수업이 가능하다.  선생님과 학생의 직접적인 소통이 가능하다.

<5> VR학습터에서는  다양한 AI/ML 기술로 다양한  교육 서비스 구현함




https://brunch.co.kr/@topasvga/2439


감사합니다.


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari