Design of Mobile Application for Learning Chemistry using Augmented Reality

Abstract

본 연구에서는 증강현실 기술을 이용하여, 화학에 입문하는 사람이 화학 학습에 필요한 지식을 쉽게 습득할 수 있도록 모바일 애플리케이션을 개발하는 것을 목표로 한다. 본 연구에서는 2차원 형태의 그림을 인식해 화학 구조를 3차원의 개체로 증강 시켜 사용자의 화면에 보여주고, 이와 관련된 다분야의 정보를 동시에 제공하는 서비스를 활용해 새로운 화학 학습 경험을 제공하는 점이 특징이다. 이를 위해 별도의 시스템과 콘텐츠를 구성하였고, 안전하고 실시간적인 데이터 관리를 위해 로그인 API와 실시간 데이터베이스 기술을 사용하였으며, 이미지 인식 및 3차원 개체 증강 서비스를 위해 이미지 트래킹 기술을 사용하였다. 본 연구를 통한 결과는 실험을 통해 유의미한 결과를 도출하였다. 향후 연구에서는 화학 구조 데이터 라이브러리를 사용하여 효율적으로 데이터를 불러오고 출력할 수 있도록 한다.

The goal of this study is to develop a mobile application so that a person who is new to chemistry can easily acquire the knowledge necessary for chemical structure learning using image tracking technology. The point of this study is to provide a new chemical structure learning experience by recognizing a two-dimensional picture, augmenting the chemical structure into a three-dimensional object, showing it on the user's screen, and using a service that simultaneously provides related information in multiple fields. characteristic. Login API and real-time database technology were used for safe and real-time data management, and an application was developed using image tracking technology for image recognition and 3D object augmentation service. In the future, we plan to use the chemical structure data library to efficiently load and output data.

I. Introduction

고등학생의 화학 학습에 대한 어려움과 원인을 조사한 “고등학교 화학 I, II 수업에 대한 학생의 인식조사[1]”의 조사 결과 중, 학생들이 화학 과목에 대해 어려워하는 이유의 비율을 각각 화학 Ⅰ과 화학 Ⅱ에 대한 그래프로 나타내면 다음과 같다.

Fig. 1. Why Chemistry I is hard [1]

Fig. 2. Why Chemistry II is hard [1]

[1]의 논문에서 진행한 설문조사에서, 학생들이 화학 학습에 어려움을 느끼는 이유를 Content itself(내용 자체의 어려움), Amount of learning(많은 내용의 암기), Insufficient explanation of textbook(교과서 설명의 불충분), Difficult experiment(어려운 실험), Numerical calculation requirement(수학적 계산 요구), Difficulty in understanding(이해의 어려움)의 6개로 정의하였다. 위의 두 그래프를 통해 알 수 있듯이, 학생들이 화학 Ⅰ과Ⅱ과목을 어렵다고 느끼는 이유로는 Content itself와 Amount of learning이 가장 크다. 즉, 내용 자체의 어려움과 많은 암기를 요구하는 것이 큰 영향을 주고 있다는 것이다. “고등학교 화학 I, II 수업에 대한 학생의 인식조사[1]”에서는 학생들의 화학에 대한 관심과 재미를 유발할 방법과 구체적인 전략의 필요성을 강조한다. 참고문헌[2] [3]을 통해, 학생들을 비롯해 화학 학습에 입문하는 사람들이 재밌고 쉽게 화학에 대한 기초 이론과 정보를 익힐 수 있는 플랫폼 중 많은 사람이 이용하는 모바일을 선택하였고, 기존과는 다른 학습방식의 애플리케이션을 개발하는 것으로 연구의 방향을 설정하게 되었다.

II. Application Design

1. Bench marking

기존의 책을 보는 학습 경험과는 다른 경험을 통해 화학 입문자들의 화학 학습에 도움을 주기 위하여, 시중에 있는 애플리케이션 중 기존의 텍스트와 이미지로만 설명하는 방식과는 다른 방법을 사용하는 애플리케이션을 벤치마킹 하고, 본 연구에서는 기존 애플리케이션을 벤치마킹한 시스템을 접목하고 더 쉽게 개선한 방법을 제시한다. 데카르트 핏 AR[4] 이라는 애플리케이션은 하단의 그림 3.과 같이 별도로 판매하는 카드를 구입하고, 해당 카드를 앱 내의 카메라로 스캔하면 숫자가 증강되며 앱 내의 게임과 같은 콘텐츠를 즐길 수 있어 함수에 기반한 수학을 색다르게 학습할 수 있도록 설계한다.

Fig. 3. Descartes AR App. [4]

벤치마킹에 대한 분석 결과는 다음과 같다. 먼저, Fig 3 의 데카르트 핏[4]의 사례와도 같이 이미지를 인식하고, 각 이미지에 대응하는 개체를 출력한 뒤, 이를 이용해 학습을 진행한다는 점이 막연한 인쇄물에 비해 사용자가 부담을 덜 느끼고, 학습에 관한 관심 또한 불러일으켜 효과적으로 이론이나 개념에 대한 학습을 촉진할 수 있다는 분석 결과를 도출하였다. 데카르트 핏 AR[4]의 사례처럼, 선과 명확한 도형을 가져 형태를 인식하기 유리한 화학 구조 그림과 이미지 인식 및 개체 증강 기술을 이용하여 색다른 화학학습 애플리케이션을 만들고, 해당 기술에 사용자 경험적으로 유익한 기능이나 콘텐츠를 덧붙여 사용자의 관심을 불러일으킬 수 있는 화학 구조 학습 애플리케이션을 개발하는 것을 목표로 한다.

2. System Architecture

본 장에서는 시스템 구성에 관한 것으로 기존 방식과는 다르게 관심을 유발하는 화학 학습 애플리케이션을 개발하기 위해 시스템을 구성하고, 그림 4와 같은 구성도로 나타내었다.

Fig. 4. System Architecture

그림 4와 같이 사용자의 로그인 이후, 앱에서 사용자에게 제공할 수 있는 기능을 크게 AR 카메라, 이론 학습, 질문 게시판, 마이페이지의 4개로 구성하였고, 각 기능이 사용자에게 제공하는 콘텐츠와 서비스는 다음 절부터 상세하게 다룬다.

2.1 AR Camera Function

그림 5는 증강현실 카메라 기능에 대한 프로토타입에 대한 구현 부분을 나타낸다.

Fig. 5. View of AR Camera Function

해당 애플리케이션에서 가장 중심이 되는 기능으로, 특정 이미지를 해당 앱 기능으로 촬영하면 3차원 형태의 화학 분자 구조가 증강되어 화면에 출력하도록 한다. 개체 출력 이후, 사용자는 해당 화학 분자 구조에 대한 정보를 알 수 있고, 자세히 보기를 눌러 해당 구조를 실제로 만드는 방법, 즉 제법과 해당 구조의 사용예시와 같은 정보를 추가적으로 알 수 있다. 3차원 개체는 사용자의 손으로 직접 회전시킬 수 있고, 이를 통해 기존 2차원 형태의 영상이나 인쇄물에서 학습하며 가질 수 있었던 어려움을 줄일 수 있다. 사용자는 해당 기능에서 자신이 촬영하여 증강된 개체를 따로 즐겨찾기에 저장할 수 있다. 즐겨찾기에 저장된 개체는 이후 마이 페이지 기능에서 다시 확인할 수 있다.

2.2 Learning Function

증강현실 카메라 기능으로 채워줄 수 없는 이론 부분과 실험으로 하기에는 많은 준비가 필요한 내용을 단계별로 나누어 설명한다.

Fig. 6. Theoretical Learning Function

그림 6은 이론 학습 기능의 프로토타입을 보여주고 있으며, 목록에서 학습하기를 원하는 이론을 선택한 뒤, 화면을 좌우로 넘기며 해당 이론을 순서에 따라 학습할 수 있다. 이때, 화면 우측 상단에 위치한 3D로 보기, 2D 이미지로 보기 버튼을 눌러 같은 단계의 내용을 각각 2차원의 이미지와, 사용자가 직접 회전 가능한 3차원 개체로 볼 수 있다. 마지막 단계까지 학습하게 되면 목록에 체크 표시가 나타나고, 언제든지 다시 학습할 수 있도록 한다.

2.3 Q&A Function

해당 앱을 통해, 화학에 입문하여 학습하고 있는 사용자가 궁금해하는 부분이나, 어려워하는 부분을 모두 해소하는 것은 힘들다고 판단하였고, 따라서 앱을 사용하는 사용자 간의 질문 게시판 기능을 사용할 수 있도록 하였다. 해당 게시판 기능을 이용하게 되면, 자신이 궁금한 내용에대해 질문하거나 답변하고, 혹은 그동안 자신이 질문했던 내용의 게시글들을 모아 볼 수 있는 ‘나의 질문’ 기능도 이용할 수 있다. 그림 7은 진입 시 게시판에 게시된 질문들의 목록과 글쓰기 버튼, ‘나의 질문’으로 진입할 수 있는 버튼이 제공된다.

Fig. 7. Q&A Function

또한, 작성된 게시글에 진입하면 게시글의 내용과 하단에는 댓글이 표시된다. 게시글은 자신이 작성했을 경우, 삭제, 수정이 가능하고, 댓글은 자신이 작성한 경우 삭제할 수 있다. 댓글과 게시글은 익명 체크박스를 눌러서 게시되었을 때 익명으로 표시되게끔 선택할 수 있다.

2.4 My-Page Function

그림 8과 같이, 마이 페이지 기능은 진입 시 자신의 프로필 이미지와 프로필 닉네임, 로그아웃 버튼, 즐겨찾기한 화학 구조들의 목록을 확인할 수 있다.

Fig. 8. My-Page Function

이때 즐겨찾기 목록은 자신이 별 모양의 버튼을 눌러 즐겨 찾기 한 화학 분자 구조의 이름과 즐겨찾기 할 당시의 일자를 함께 기록해 보여준다. 목록 중 하나를 누르면 해당 화학 구조에 대한 상세정보를 AR 카메라 기능을 이용했을 때처럼 다시 학습할 수 있다.

III. The Proposed Scheme

1. Research about Image Tracking

이미지를 인식하고 해당 이미지를 추적할 수 있도록 할 때, 해당 기술을 이미지 트래킹 기술이라 한다. 본 연구에서는 뷰포리아(Vuforia) 사의 이미지 트래킹 기술을 사용해 개발을 진행한다. 이미지 트래킹 기술의 조건은 특징점, 즉 특징(feature)을 찾아내는 것이다. 뷰포리아 사의 개발자 가이드라인 문서[5,6]에 의하면 이미지 내의 특징을 인식하기 위해서는 특징의 조건을 가질 수 있는 이미지의 특징을 정의해야 하며, 다음과 같이 정의한다.

• 날카롭고 뾰족한 부분이 있는가?

• 이미지 내에 특징점의 수가 충분히 있는가?

• 이미지 내 요소나 배경 간의 대비가 뚜렷한가?

• 이미지에 왜곡이나 반사 같은 환경 요인이 없는가?

즉, 모서리와 꼭짓점으로 이루어진 모습이 대비가 뚜렷하고, 그 수 또한 충분하다면 이미지 내에서 특징을 탐색해 내 해당 이미지를 트래킹할 수 있다는 것이다. 해당 가이드 라인을 따라, 본 연구에서는 이미지 트래킹을 시도할 타겟 이미지로써 화학 분자 구조의 2차원 형태 이미지 중 모서리와 꼭짓점이 분명한 이미지들을 이용한다.

2. Implementation Image Tracking

Fig. 9. Sample Image for Image Tracking

해당 이미지는 그림 9와 같이, 아다만타인(Adamantane) 이라는 화합물의 구조를 보여주는 ‘화학 구조식’이란 그림이다. 기존 이미지에 검은 배경과 흰 선으로 색상을 변경, 선과배경 간의 대비를 극대화해 더욱 정확하고 빠른 특징 탐색을 유도한다. 이후, 3차원 형태의 아다만타인 구조 파일은 미국국립생물공학정보센터가 관리하는 화학 분자 및 생물학 데이터베이스인 PubChem[7]을 통해 추가하였다. 해당 3D 파일을 이미지 트레킹 기술과 결합하여 그림 9의 이미지를 타겟 이미지로 정해, 구현을 시도하였고, 하단과 같이 이미지 위에 3D 개체가 증강되는 것을 볼 수 있다.

Fig. 10. Implementation of Object Augmentation Using Image Tracking Technology

벤치마킹을 했던 데카르트 핏 AR[4]과 마찬가지로 타겟 이미지를 이용해 특정 개체를 증강 시키는 모습을 보여준다. 본 연구에서는 숫자뿐 아니라 3차원의 개체도 증강 시킬 수 있고, 사용자가 직접 회전시킬 수도 있다는 점은 제안 방법의 특징 중의 하나이다.

3. Development Environment

본 연구에서 개발하는 애플리케이션의 대상 하드웨어 플랫폼은 모바일에서 구현하였고, 뷰포리아의 이미지 트래킹기술을 이용할 수 있으면서도 애플리케이션의 형태를 보일 수 있는 개발 플랫폼 중에는 유니티 게임 엔진을 함께 이용하였다. 유니티 엔진 개발자 가이드라인 문서[8, 9]에 따르 면, 유니티 엔진은 개발자가 직접 개발 플랫폼을 선택할 수있는 장점이 있다. 본 연구에서는 유니티 엔진을 기반으로 뷰포리아 사의 이미지 트래킹 기술[10]을 적용하여 애플리케이션을 개발한다. 애플리케이션 개발 환경은 다음과 같이 PC 환경이며, 인텔 i7-8700K, 24GB 메모리, 엔비디아 RTX3060Ti이며, 유니티 2019.4.21.버전을 사용하였고, 테스트는 갤럭시 S21 울트라에서 수행하였다.

4. Data Management

본 절에서는 애플리케이션 내에서 사용자의 데이터와 애플리케이션 자체의 데이터를, 수집하고 관리하는 데 이용한 기술과 방식을 설명한다.

4.1 User Log-in

Ⅱ장에서 설명한 것과 같이, 본 연구에서 개발하는 애플리케이션의 기능은 사용자의 즐겨찾기와 게시판과 같이 각 사용자를 위한 기능과 사용자 간의 커뮤니케이션을 기반으로 두고 있다. 따라서 사용자에게 별도의 로그인을 요청해 계정을 생성하고 애플리케이션을 실행시킬 수 있도록 설계하였다. 로그인의 방법으로는 자체 회원가입과 게스트 로그인, 소셜 로그인과 같이 많은 방법이 있지만, 한국소비자연맹에서 조사한 바[11]에 따르면, 93%의 설문대상자가 소셜 로그인을 사용하고, 그림 11과 같이 소셜로그인을 사용하는 이유의 52%와 25%가 각각 회원가입의 시간 단축과 계정 관리의 번거로움인 것으로 파악할 수 있었다.

Fig. 11. Why Use Social Login?

그에 맞추어 사용자의 편리에 중점을 두고 소셜 로그인의 형태로 시스템을 설계하였다. 한국소비자연맹의 조사 [11]에서는, 국내의 소셜 로그인 이용자들이 이용하는 소셜 계정의 비율 또한 제공한다. 2019년 기준으로 네이버나 카카오와 같은 국내 소셜미디어 계정의 비율이 91%였고, 그 뒤를 해외 소셜미디어가 차지했다. 이에 따라, 본 애플리케이션의 소셜 로그인 시스템을 국내 소셜 미디어중 하나인 카카오로 설정하여 사용자들의 빠른 회원가입과 서비스 이용을 유도하였다. 그림 12는 소셜 로그인을 사용하는 것을 결정한 뒤 설계한 로그인 화면의 프로토타입 이미지이다.

Fig. 12. Social Login Function

사용자가 앱을 실행한 후 카카오 로그인 버튼을 누르면 최초 회원가입 및 로그인 후, 카카오 계정의 프로필 사진과 프로필 닉네임을 제공하는 것에 대해 동의를 요청하도록 설계되었다. 카카오 계정의 프로필 사진과 프로필 닉네임은 Ⅱ장의 2.3, 2.4 절에서 소개한 질문 게시판과 마이 페이지 기능에서 이용된다.

4.2 Contents

애플리케이션 자체의 데이터는 화학 구조들의 3D 개체파일과 이론 학습 기능의 텍스트 파일, 이미지 파일로 구성되어 있다. 3D 개체 파일과 화학 구조의 정확한 정보는 이전에 언급한 PubChem[7]에서 수집하여 구성하였다. 애플리케이션의 디자인을 위해 사용된 이미지 리소스는 자체 제작하거나, 크리에이티브 커먼즈 라이센스 CC0을 따르는, 무료 이미지 공개 서비스 사이트인 Pixabay에서 수집해 사용하였다. 해당 데이터들은 이후 소개할 실시간 데이터베이스에서 다루어지지 않고 애플리케이션에 자체적으로 저장되어 있도록 설계되었다.

4.3 Database

본 앱에서는 사용자가 카카오 계정을 이용한 소셜 로그인을 하도록 설계되어있다. 즉, 사용자의 정보나 사용자가 애플리케이션 안에서 행동한 기록 및 데이터가 생성되는데, 해당 정보들은 민감한 데이터일 뿐만 아니라 수정 및 삭제될 시 사용자 경험과 애플리케이션의 시스템이 제대로 작동하지 않을 수 있기에, 별도의 데이터베이스를 두어 관리한다. 즉, 사용자의 정보와 사용자가 애플리케이션 안에서 조작한 정보들을 데이터베이스를 두어 관리한다. 여러 데이터베이스 시스템이 존재하지만, 본 연구에서는 구 파이어베이스(Google Firebase)를 이용한다.

파이어베이스의 주된 특징은 다음 파이어베이스 개발자가이드 문서[12]과 같다.

• 별도의 벡엔드(Back-end) 작업이 크게 필요치 않음

• 효과적인 실시간 데이터베이스 기능

• 오프라인 기능 및 동기화 지원

먼저, 파이어베이스는 서버와 데이터베이스가 통합된 형태로, 별도의 백엔드(Back-end) 작업이 크게 필요하지 않다. 다음으로, 서버와 데이터베이스가 통합된 만큼, 자체 데이터 저장소와 실시간 데이터베이스를 제공하는데, 실시간 데이터베이스 기능을 이용해 애플리케이션과 데이터베이스 간 서로의 변화가 실시간으로 반영되어 빠른 개발 및 서비스에 유리하다. 또한, 인터넷 연결이 없더라도임시로 데이터를 저장해두었다가 인터넷 연결이 되면 곧바로 데이터베이스와 동기화할 수 있도록 해, 오프라인 상태에서도 애플리케이션을 이용할 수 있도록 한다. 본 연구에서는 파이어베이스의 여러 도구 중 실시간 데이터베이스 기능을 적극적으로 사용하며, 주로 사용자의 로그인 정 보, 사용자가 즐겨 찾기한 화학 구조의 정보, 사용자가 질문 게시판에 남긴 질문과 같이 유동적이고 언제든지 업데이트의 여지가 있는 데이터들을 관리한다. 해당 내용을 실제 적용한 데이터베이스의 모습은 다음과 같다. 질문 게시 판, 즉 게시판에서는 게시물의 내용과 일자, 제목, 익명 여부를 보여주고, 사용자, 즉 user에서는 사용자마다 고유의 번호를 부여한 뒤, 즐겨 찾기한 분자 구조를 북마크(bookmark)에 저장, 관리하고 있다. 요약하면, 사용자의 정보나 사용자가 애플리케이션을 이용한 데이터와 같이 민감도와 유동성이 높은 데이터는 별도의 데이터베이스를 두어 관리해야 할 필요성이 있었고, 파이어베이스의 실시간 데이터베이스 기능을 이용하여 애플리케이션의 데이터를 효율적으로 구성 및 관리할 수 있었다.

Fig. 13. Database Configuration with Google Firebase

IV. Result & Future Work

1. Implementation Result

Fig. 14. Result of Application

본 연구의 구현 결과는 상단의 그림 14에 잘 나타나 있다. Ⅱ,Ⅲ장에서 언급한 로그인 기능, AR 카메라 기능, 이론 학습 기능, 마이 페이지 기능과 같은 모든 기능의 구현을 완료하였고, 애플리케이션의 완성도를 높이기 위해 배경 이미지나 상단 배너 이미지, 버튼 이미지와 같은 리소스를 추가하였다. 마이페이지 기능에는 앱 정보 버튼을 추가해 애플리케이션을 개발하며 사용한 기술에 대한 오픈소스 라이센스를 표기함과 동시에 애플리케이션의 버전과 정보를 제공하도록 설계했다. 이후 관련 도서[13][14]를 참고해 Vuforia의 AR 카메라 기능이 인식할 수 있는 화학 구조 이미지와 이론 학습 기능에서 표시하는 콘텐츠를 추가하여 애플리케이션의 정상적인 작동 여부를 테스트하였고, 추가된 콘텐츠나 데이터도 오류나 문제없이 정상적으로 각 기능이 작동함을 확인할 수 있었다. 화학 구조도를 바닥에 놓고 앱 내 카메라 기능을 이용, 스캔하면 이미지 트레킹 및 증강 기술을 통해 3차원 화학 구조 개체가 증강되며 구조도에 해당하는 화학 관련 정보가 출력되는 것을 볼 수 있다. Ⅲ장에서의 설계를 바탕으로, 화학 구조의 정보와 이론 학습 기능, 질문 게시판, 마이 페이지 기능이 각각의 화면에서 서비스를 제공한다.

2. Future Work

애플리케이션을 개발하는 동안, 이후 모든 화학 구조에 대해 이미지를 만들고 3D 개체 파일을 불러와야 하는 것은 많은 시간을 소모하게 되는 작업이라 판단했다. 따라서, 타겟 이미지를 하나씩 만들지 않고 사용할 수 있는 방법과 3D 개체 파일을 애플리케이션에 전부 저장하지 않고 편리하게 화면에 출력하는 방법으로, 기존 화학 구조식과 JSmol 이라는 화학 구조용 오픈소스 Java 뷰어를 찾을 수 있었다. 먼저, 기존 화학 구조식은 하단의 예시 이미지 그림 15와 같이 모두 흰 배경에 검은 선으로만 이루어져 있는데,

Fig. 15. Sample of chemical structural formula – EDTA compound

이는 이미지 트레킹 기술의 조건인 ‘뚜렷한 대비’, ‘모서리’, ‘여러 특징점’을 만족한다. 따라서 모든 타겟 이미지를 하나씩 만들지 않고 기존의 화학 구조식을 사용할 수 있어 개발의 효율성을 높일 수 있을 것으로 판단된다. 다음으로, JSmol[15]을 이용하면 3D 개체 파일을 애플리케이션에 전부 저장하지 않고 불러올 수 있다. JSmol은 웹페이지에 사용되는 자바 라이브러리이지만, 향후 개발을 진행하며 웹페이지의 형태로 3D 개체를 화면에 출력하는 것과 같이 다른 방식을 사용해, 애플리케이션에 3D 파일을 전부 저장하지 않고 사용자의 화면에 개체를 증강시켜 출력할 수 있을 것으로 예상한다.

Ⅴ. Conclusions

본 연구는 화학 입문자가 겪는 학습의 어려움에 대한 분석을 통해 학습자의 화학 학습 내용의 어려움과 흥미 저하로 인한 것이라 판단하였고, 이를 해결하는 방법에 대해 증강현실 기술을 이용해 정보를 제공하는 방법을 제시하였다. 즉, 이미지 트레킹 기술과 증강 현실 개념을 이용해 화학 학습의 어려움을 줄이고, 새로운 학습방식을 통해 화학 학습에 대한 관심을 유도할 수 있도록 학습용 애플리케이션을 개발한 것이 주된 특징이다.

해당 애플리케이션을 개발하기 위해 국내 소셜미디어 계정 로그인 이용 현황을 분석하고, 실시간 데이터베이스기술을 이용해 중요도와 유동성이 높은 데이터를 관리하였다. 또한, 이미 해당 기술과 관련된 분야에서 교육을 위해 사용된다는 점을 사례 조사에서 알 수 있다. 해당 애플리케이션과 제안되는 시스템을 통해 사례와 같은 교육적 효과를 기대할 수 있다. 향후 학생들에게 실질적으로 도움이 되는지에 대해서 학부 1학년 학생들을 대상으로 분석할 예정이다.