CovidHunter: 코스페이시스와 머지큐브로 개발한 증강현실 디펜스 게임

Ⅰ. 서 론

증강현실이란 사용자가 보고 있는 현실세계에 가상의 콘텐츠를 정교하게 정합하여 사용자로 하여금 가상의 콘텐츠가 마치 현실세계에 존재하는 것 같은 착각을 불러일으키게 하는 기술을 말한다[1-3]. 가상의 콘텐츠는 증강현실의 사용 목적에 따라 이미지, 동영상, 3차원 물체 등으로 다양화되며, 현실세계에 존재하는 매개체에 증강되어 사용자에게 새로운 경험과 정보를 제공한다. 증강현실은 현재 엔터테인먼트, 제조업, 쇼핑, 교육 등의 다양한 분야에서 활용되고 있다[4, 5].

증강현실은 증강의 대상이 되는 매개체를 필요로 한다. 매개체는 현실세계에 존재하며 증강현실의 사용 목적에 따라 특정 물체가 될 수도 있고, 일반적인 단면이나 영역이 될 수도 있다. 특정 물체는 사용자가 미리 지정해 놓은 고유한 물체를 말하며, 선행학습을 통해 고유한 물체로 구별될 수 있는 특징들을 찾은 후, 완전히 같은 물체에 대해서만 증강을 수행한다. 반면에 일반적인 단면이나 영역은 사용자가 미리 지정하지 않아도 아무 도로나 아무 평면, 아무 건물외벽과 같은 단면이나 영역에 대해서 증강을 수행한다. 책의 겉표지 면을 예로 들면, 이를 특정 물체로 보는 증강현실에서는 미리 지정해 놓은 책 종류의 겉표지 면만을 인식할 수 있는 반면에, 이를 일반적인 단면으로 간주하는 증강현실에서는 책의 종류를 가리지 않고 모든 종류의 책 표지 면을 인식해 증강현실에 응용할 수 있다. 후자의 경우가 더 범용으로 쓰일 수 있지만 전자의 경우는 고유한 물체에 관련된 가상의 콘텐츠를 연결하여 증강할 수 있다는 점에서 교육이나 광고 등의 형태로 많이 활용되고 있다.

증강현실을 구현하기 위해서는 사용자가 보고 있는 시점, 즉 카메라와 매개체 사이의 3차원 자세를 계산한 다음, 계산된 자세에 맞게 가상의 콘텐츠를 정합하는 과정이 필요하다. 이러한 일련의 과정들이 카메라를 통해 들어오는 매 프레임 마다 실시간으로 이루어져야 한다. 이를 구현하기 위해서는 이미지 프로세싱과 컴퓨터 비전, 컴퓨터 그래픽스 등의 기술을 필요로 하며, 최근 이러한 기반 기술들의 급속한 발전에 힘입어 상용화 수준의 증강현실 응용들이 상당수 개발되어 오고 있다[6].

이러한 증강현실 기술을 기반으로 작금의 코로나 시국을 주제로 한 CovidHunter를 개발하게 되었다. CovidHunter는 무작위로 생성되는 바이러스를 퇴치하고 시민들에게 마스크를 씌워주면서 코로나 바이러스로부터 마을을 지키는 증강현실 디펜스게임이다. 본 논문에서는 우리가 개발한 CovidHunter를 소개하고, 개발과정에 대해 상세히 기술한다. CovidHunter를 통해 코로나 방역에 대한 경각심과 함께 어려운 시기를 잘 극복할 수 있다는 희망의 메시지가 전달되기를 바란다.

Ⅱ. 개발 환경

2-1 코스페이시스

코스페이시스(CoSpaces)는 가상현실 프로그램을 손쉽게 개발할 수 있는 웹 기반의 교육용 플랫폼이다[7]. 그림 1과 같이 사람, 동물, 건물 등의 다양한 3차원 모델을 제공하며 학습자는 자신의 세계에 모델들을 자유롭게 배치할 수 있다. 블록 기반 프로그래밍을 통해 모델들에 움직임을 줄 수 있으며, 키보드나 마우스 등의 사용자 입력을 처리할 수 있다. 코스페이시스는 가상현실 프로그램을 개발하기 위한 플랫폼이기 때문에 내부에 사용자 시점을 표현하는 가상의 카메라가 존재하고, 제작한 프로그램을 스마트 폰이나 헤드 마운티드 디스플레이 등을 통해 재생할 수 있다. 코스페이시스는 초등학생, 중학생, 고등학생, 대학생 등 다양한 연령층을 대상으로 창의력 표현, 시각적 학습과 사고, 스토리텔링, 가상전시회, 문학해석, 인포그래픽 등의 다양한 형태의 교육에 활용되고 있다[8, 9].

Fig. 1.

Main features of CoSpaces

2-2 머지큐브

머지큐브(Merge Cube)는 코스페이시스에서 증강현실 콘텐츠를 저작하기 위해 애드온 형태로 지원되는 교구이다[10]. 한 변의 길이가 7cm인 정육면체로 모양으로 각 면에는 인식을 쉽게 하기 위한 패턴이 그려져 있다. 코스페이시스에서 제작한 머지큐브 기반의 프로그램을 스마트 폰이나 태블릿으로 실행한 후, 카메라로 머지큐브를 비추면 카메라와 머지큐브 사이의 3차원 자세를 계산하여 증강현실 콘텐츠가 실행된다. 그림 2는 머지큐브를 이용해서 증강현실 콘텐츠를 저작하는 과정을 보여준다.

Fig. 2.

Augmented reality content authoring process using Merge Cube

Ⅲ. 개발 과정

CovidHunter의 개발과정은 크게 현실세계 제작, 현실세계의 디지털 트윈 생성, 게임 로직 구현 순으로 구성된다. 그림 3은 각 개발과정의 흐름과 단계별로 도출되는 결과물을 보여준다. 각 개발과정에 대해서는 이어지는 절들을 통해 상세히 설명한다.

Fig. 3.

The entire process of development

3-1 현실세계 제작

현실세계와 가상의 공존이라는 증강현실의 개념을 대입해보면 CovidHunter는 게임의 무대가 되는 마을이 현실세계이며, 무작위로 생성되는 바이러스와 사람이 가상이 된다. 현실세계인 마을을 디오라마로 제작하기 위해 다이캐스트(die-cast) 모형을 제작하는 전문 업체인 RMZ city사의 1:64 비율의 건물 모형과 자동차 모형을 이용하였다.

게임을 플레이하는 중에 카메라가 마을을 비췄을 때 마을과 카메라 사이의 3차원 자세를 인식하기 위해 머지큐브를 활용하였다. 한 변의 길이가 7cm인 머지큐브의 한쪽 면(윗면)을 한 변의 길이가 65cm가 되도록 확대 출력하여 마을의 바닥으로 배치하였다. 머지큐브의 한쪽 면의 중심이 마을의 중심에 오도록 배치하였기 때문에 카메라가 마을을 비추면 머지큐브를 인식하여 마을과 카메라 사이의 3차원 자세를 인식할 수 있다. 머지큐브의 일부만 포착되어도 인식이 가능하다는 것을 실험을 통해 확인한 후, 머지큐브의 네 모퉁이를 잘라내었고 각 모퉁이마다 건물 모형을 배치하여 전체적으로 봤을 때 교차로가 되도록 구성하였다. 현실감을 높이기 위해 게임의 플레이 영역이 아닌 건물 모형의 바깥쪽에는 주차선을 긋고 자동차 모형을 배치하여 주차장을 표현하였다. 그림 4는 이렇게 제작한 현실세계의 최종 모습을 보여준다.

Fig. 4.

The diorama of the village that is the stage of the game

3-2 현실세계의 디지털 트윈 생성

증강현실의 몰입감을 높이기 위해서는 현실세계와 가상물체 사이의 인터랙션에 대한 구현이 필요하다. CovidHunter에서 고려해 볼 수 있는 현실세계와 가상물체 사이의 인터랙션은 가상물체인 바이러스나 사람이 현실세계인 마을을 구성하는 건물 모형에 가려지는 상황이다. 한쪽 모퉁이에 서 있는 사람을 공중에서 내려다보면 항상 보여야하지만 카메라 각도를 기울여서 본다면 사람의 위치에 따라서 건물 모형에 가려지기도해야 한다. 이를 위해서는 현실세계의 구성요소인 건물 모형의 3차원 모델을 이용하여 현실세계의 디지털 트윈(digital twin)을 생성해야한다. 건물 모형의 3차원 모델을 만들기 위해 실사물을 스캔하여 3차원 모델로 생성하는 어플리케이션인 Qlone[11]을 이용하였다. Qlone은 그림 5와 같이 바닥에 격자무늬의 매트 위에 실사물을 올려두고 스캔하기 때문에 배경의 영향 없이 실사물의 3차원 모델을 깔끔하게 생성할 수 있다는 장점이 있다. 이렇게 생성한 건물 모형의 3차원 모델을 가상의 머지큐브 위에 현실세계와 똑같은 위치에 배치하여 현실세계의 가상인 디지털 트윈을 생성하였다 (그림 6). 이후, 건물 모형의 3차원 모델은 그림 7과 같이 현실세계의 실사물이 가상물체를 가리기 위한 마스크로 활용된다.

Fig. 5.

Scanning a real object as a 3D model using Qlone

Fig. 6.

Digital twins of the real world

Fig. 7.

Realizing virtual objects to be occluded by real objects using masking

3-3 게임 로직 구현

1) 바이러스 생성

바이러스를 무작위로 생성하기 위해 난수를 발생시켜 그림 8과 같이 임의의 위치에 바이러스를 생성한다. 바이러스의 모델은 TurboSquid[12]의 무료 공개 모델을 사용하였다. 생성된 바이러스는 플레이어가 뿌린 살균제에 닿으면 퇴치되며, 일정 시간 안에 퇴치되지 않은 바이러스는 자동으로 삭제되는데 이때 플레이어에게 패널티를 부여한다. 바이러스와 살균제가 닿는 이벤트 등록과 패널티를 부여하는 기능을 하나의 함수로 정의하고, 바이러스의 사본을 입력으로 해당 함수를 호출한다. 각각의 바이러스가 독립적으로 해당 기능을 수행해야하기 때문에 쓰레드로 호출하였다.

Fig. 8.

Randomly generated viruses

2) 사람 생성

마을에는 바이러스뿐만 아니라 시민들이 활보한다. 일정 시간이 경과하면 사람을 생성하여 마을을 관통하는 여러 개의 경로 중에서 무작위로 선택된 경로를 따라 경로의 한쪽 끝에서 다른 쪽 끝으로 이동하도록 구현하였다. 어떤 사람은 마스크를 쓴 채로 생성되고 어떤 사람은 마스크를 쓰지 않은 채로 생성된다.

마스크를 쓰지 않은 사람은 플레이어가 던진 마스크에 닿으면 마스크를 쓰게 되며, 마스크를 쓰지 않은 채로 길 끝에 도달하면 플레이어에게 패널티를 부여한다. 사람이 마스크와 닿는 이벤트 등록, 사람의 이동, 그리고 패널티를 부여하는 기능을 하나의 함수로 정의하고, 사람의 사본을 입력으로 해당 함수를 호출한다. 바이러스 때와 마찬가지로 각각의 사람이 독립적으로 해당 기능을 수행해야하기 때문에 쓰레드로 호출하였다. 그림 9는 무작위로 생성되어 마을을 활보하는 시민들을 보여준다.

Fig. 9.

Randomly generated and moving people

3) 1인칭 시점 구현

플레이어가 게임에 더욱 몰입할 수 있도록 1인칭 시점을 구현하였다. 플레이어는 왼손으로 분무기를 뿌리고 오른손으로 마스크를 던진다. 분무기를 들고 있는 왼손은 외부에서 다운로드 받은 무료 공개 모델들을 사용하여 표현하였으며 플레이어의 시점인 가상 카메라의 좌측 하단에 배치하였다. 마스크를 던지는 오른손을 표현하기위해 가상 카메라 뒤쪽에 사람 모델을 배치한 다음, 공 던지는 애니메이션을 이용하여 마치 마스크를 던지는 것처럼 보이게 하였다. 왼손과 오른손을 가상 카메라의 자식모델로 설정하여 플레이어가 이동하여 스마트 폰이나 태블릿의 위치가 바뀌어도 계속해서 그 자리를 지킬 수 있도록 하였다. 추가로 우측 상단에 생명력이 계속해서 표시되도록 하였다. 그림 10은 1인칭 시점을 구현하기 위한 모델배치와 1인칭 시점으로 마스크를 던지는 모습을 보여준다.

Fig. 10.

Authoring a model for implementing a first-person view, and a figure of throwing a mask

4) 두 가지 액션 구현

분무기를 뿌리거나 마스크를 던지는 등의 두 가지 액션을 구현하기 위해 가상 카메라 중앙에 보이지 않는 작은 원을 배치하고 화면을 터치하면 클릭이 되도록 구현하였다. 코스페이시스에서 실행한 머지큐브 콘텐츠는 화면 터치를 통해 가상 카메라의 직선 레이 상에 있는 가상물체를 클릭할 수 있다. 하지만 이는 코스페이시스가 제공하는 유일한 인터페이스이기 때문에 이것만으로 두 가지 액션을 구현해야만했다. 이를 위해 가상 카메라 중앙에 하나가 아닌 두 개의 작은 원을 겹치게 배치하였다. 화면을 터치하여 첫 번째 원이 클릭되면 0.3초 동안 사라지고, 그 사이에 다시 한 번 화면을 터치하면 가려져 있던 두 번째 원을 클릭할 수 있도록 구현하였다. 따라서 한번 화면을 터치해서 첫 번째 원을 클릭한 후, 0.3초 동안 두 번째 원을 클릭하지 않으면 마스크를 던지게 되고, 화면을 두 번 연속으로 터치하여 두 번째 원을 클릭한다면 분무기를 뿌리는 방식으로 구현하였다. 그림 11은 해당 구현 과정을 보여주는데 이해를 돕기 위해 첫 번째 원은 녹색으로 두 번째 원은 빨간색으로 시각화하였는데 실제 게임 플레이에서는 보이지 않는 요소이다.

Fig. 11.

Implementation of the two actions

5) 게임의 완성도 높이기

게임의 완성도를 높이기 위해 생성되는 바이러스의 높이와 색상은 무작위로 설정하고, 제자리에서 커졌다가 작아지는 것을 반복하는 애니메이션을 추가하였다. 사람은 남녀노소, 생김새 등을 다양화하였고 이동속도를 무작위로 설정하였다. 그리고 분무기를 뿌리면 왼손에 반동을 주어 살균제가 역동적으로 뿌려지는 모습을 표현하였으며, 마스크를 던지면 오른손에 쥐고 있던 마스크가 날아가는 것을 표현하였다. 그 외에 효과음 등을 적절히 사용하였으며, 게임이 시작되기 전에 재생되는 오프닝과 게임을 완수하면 재생되는 엔딩을 추가하였다.

Ⅳ. 시연

스마트 폰이나 태블릿에 설치된 “CoSpaces Edu” 어플리케이션을 통해 CovidHunter를 실행한다. CovidHunter는 머지큐브 기반의 코스페이스이기 때문에 카메라로 머지큐브를 비추기 전까지는 게임이 시작되지 않는다. 앞서 제작한 그림 4의 마을을 비추면 본격적인 게임에 앞서 오프닝이 재생된다. 게임 시연 영상은 유튜브 링크를 통해 확인할 수 있다[13].

4-1 오프닝

마을에 사람들이 삼삼오오 모여서 자유롭게 대화를 하고 있는 중에 마을 한쪽 끝에 설치된 대형 브라운관을 통해 코로나 바이러스가 창궐했다는 뉴스가 재생된다. 심각하게 뉴스를 바라보는 마을 사람들을 표현하였으며, 시간이 지날수록 마을 사람들이 하나둘씩 사라지면서 썰렁해져가는 거리의 모습을 표현하였다. 뉴스 재생이 끝나면 본격적인 게임이 시작된다. 그림 12는 오프닝의 과정을 보여준다.

Fig. 12.

Opening

4-2 게임 플레이

게임이 시작되면 마을의 곳곳에 바이러스가 생성되고, 시민들이 마을의 한쪽 길 끝에서 다른 쪽 길 끝으로 이동하기 시작한다. 플레이어는 몸을 움직여가며 분무기를 뿌리거나 마스크를 던지면서 마을을 지켜나간다. 게임의 무대가 크기 때문에 플레이어는 실제로 자신의 몸을 이동해가면서 게임을 플레이해야하는데 이 과정에서 가상물체와 현실세계 사이의 인터랙션을 경험하는 등 실감나게 게임에 몰입할 수 있다. 우측 상단에 생명력이 표시되는데 일정시간 안에 바이러스를 퇴치하지 못하거나 마스크를 쓰지 않은 시민이 이동을 완료할 때마다 1씩 감소한다. 게임에서 정한 시간까지 생명력이 0이 되지 않는다면 “코로나가 종식되어 시민들이 일상을 되찾았다”라는 희망의 메시지와 함께 엔딩이 재생된다. 그림 13은 플레이어의 모습과 실제 게임 화면을 함께 보여준다.

Fig. 13.

The player playing the game and the real game screen

4-3 엔딩

CovidHunter를 개발하는 중에 핼러윈(Halloween)이 있었다. 코로나 시국으로 인해 핼러윈을 마음껏 즐기지 못하는 아쉬운 마음을 담아 엔딩을 구상했다. 마을 광장에 저마다의 복장을 착용한 사람들이 모여서 흥겨운 음악에 맞춰 춤을 추는 등 핼러윈을 즐기는 모습을 표현하였다 (그림 14).

Fig. 14.

Ending

Ⅴ. 결 론

본 논문에서는 작금의 코로나 시국을 주제로 하여 코스페이시스와 머지큐브를 활용해 개발한 증강현실 디펜스게임인 CovidHunter를 소개하였다. 게임의 무대가 되는 마을을 디오라마로 제작하고, 마을과 카메라 사이의 자세를 인식하기 위해 머지큐브의 한쪽 면을 크게 출력하여 마을의 바닥으로 배치하였다. 게임 속에서 증강되는 가상물체와 현실세계 사이의 인터랙션을 구현하기위해 현실세계의 구성요소인 실제사물을 3차원으로 스캔한 모델을 이용하여 마을의 디지털 트윈을 생성하였다. 바이러스와 사람을 생성하고, 1인칭 시점을 표현하고, 두 가지 액션을 직접 구현하였다. 스마트 폰이나 태블릿에서 게임을 실행하고 카메라로 마을을 비추면 게임이 시작된다. 플레이어는 무작위로 생성되는 바이러스를 일정시간 안에 퇴치하고 시민들에게 마스크를 씌워주면서 마을을 지켜나간다. 게임의 무대가 크기 때문에 플레이어는 실제로 자신의 몸을 이동해가면서 게임을 플레이해야하는데 이 과정에서 가상물체와 현실세계 사이의 인터랙션을 경험하는 등 실감나게 게임에 몰입할 수 있다. CovidHunter를 통해 코로나 방역에 대한 경각심을 일깨우고 어려운 시기를 잘 극복할 수 있다는 희망의 메시지가 전달되기를 바란다.

References

• R. T. Azuma, “A survey of augmented reality,” Presence: teleoperators & virtual environments, Vol. 6, No. 4, pp. 355-385, Aug 1997. [https://doi.org/10.1162/pres.1997.6.4.355]
• R. T. Azuma, Y. Baillot, R. Behringer, S. Feiner, S. Julier, and B. MacIntyre, “Recent advances in augmented reality,” IEEE computer graphics and applications, Vol. 21, No. 6, pp. 34-47, Nov/Dec 2001. [https://doi.org/10.1109/38.963459]
• D. W. F. Van Krevelen and R. Poelman, “A survey of augmented reality technologies, applications and limitations,” International journal of virtual reality, Vol. 9, No. 2, pp. 1-20, June 2010. [https://doi.org/10.20870/IJVR.2010.9.2.2767]
• M. Mekni and A. Lemieux, “Augmented reality: Applications, challenges and future trends,” Applied Computational Science, Vol. 20, pp. 205-214, April 2014.
• M. Billinghurst and A. Duenser “Augmented reality in the classroom,” Computer, Vol. 45, No. 7, pp. 56-63, Mar 2012. [https://doi.org/10.1109/MC.2012.111]
• S. K. Kim, S. J. Kang, Y. J. Choi, M. H. Choi, and M. Hong “Augmented-Reality Survey: from Concept to Application,” KSII Transactions on Internet and Information Systems (TIIS), Vol. 11, No. 2, pp. 982-1004, Feb 2017. [https://doi.org/10.3837/tiis.2017.02.019]
• CoSpaces Edu for kid-friendly 3D creation and config [Internet]. Available: https://www.cospaces.io/edu/, .
• J. H. Hwang, “Development of AR Content Production in Education Curriculum Using CoSpaces,” Culture and Convergence, Vol. 43, No. 6, pp. 319-342, June 2021. [https://doi.org/10.33645/cnc.2021.06.43.6.319]
• C. M. Nam and C. W. Kim, “Analysis on Instruction Design and Learning Motivation for Pre-Service Teachers' Cospace Education,” Journal of The Korean Association of Information Education, Vol. 22, No. 4, pp. 501-508, Aug 2018. [https://doi.org/10.14352/jkaie.2018.22.4.501]
• Merge EDU [Internet]. Available: https://mergeedu.com/, .
• Qlone, the most user-friendly 3D scanning app! [Internet]. Available: https://www.qlone.pro/, .
• TurboSquid: 3D Models for Professionals [Internet]. Available: https://www.turbosquid.com/, .
• Demonstration video for CovidHunter [Internet]. Available: https://youtu.be/sM5uM7c4Atk/, .