현재 구글의 안드로이드와 애플의 iOS가 스마트폰 시장을 양분하고 있으며 MS의 window 모바일은 windows8 출시와 함께 통합 OS 형태로 시장 점유율을 올려가고 있다. 마켓에 등록되는 네이티브앱은 특정 스마트폰 OS 전용으로 개발되기 때문에 대상 OS에 대하여 안정적이며 높은 성능을 제공한다[1].

그러나 네이티브 앱의 문제점은 첫 번째 특정 OS에 종속적이라는 것이다. 따라서 스마트폰 OS별로 네이티브 앱을 모두 구현하여야 한다. 두 번째 다양한 스마트폰이 출시됨에 따라 단일 플랫폼에서도 OS의 버전별 파편화 문제를 가져오고 있다. 그림 1은 현재 시장 지배적인 안드로이드의 파편화에 대해 나타내고 있다. 단순버전의 변화에도 파편화를 가져옴을 볼 수 있다[2].

이러한 문제를 해결하기 위해 현재 모바일 웹을 사용해 기존의 네이티브 앱을 대체하는 개발 방법이 증가하고 있다. 모바일 웹은 기존의 단점을 보완하며 네이티브앱의 인터페이스를 운용할 수 있도록 구성하고 있다. 그러나 모바일 웹을 구성하는 HTML은 인터렉티브한 기능 부족 및 성능 저하라는 단점을 가지고 있다.

본 논문에서는 앞서 언급한 모바일 웹의 문제점과 네이티브 앱의 OS 종속 문제 및 파편화에 따른 Device 종속 문제를 해결하기 위하여 제너릭 사용자 인터페이스 모델을 제안한다. 제안된 시스템은 플랫폼 및 해상도에 구애를 받지 않기 위하여 다중해상도 모듈을 구성하도록 하며, 모바일 웹의 단점인 페이지 전환 대신 화면전환 모듈을 구성하고, 네이티브 앱 및 웹의 데이터베이스 차이를 없애기 위한 DB연동 모듈을 설계 제작하도록 한다. 이를 위하여 cocos2D와 JavaScript를 활용한다. 제안한 모델을 바탕으로 구현된 애플리케이션은 스마트폰 및 PC에서 구동 시 이질감 없는 화면을 구성한다.

본 논문의 구성은 다음과 같다. 2장에서 네이티브 앱의 OS 종속 문제에 대하여 언급하고 cocos2D 엔진 및 특징에 대하여 언급한다. 3장에서는 이를 활용한 다중 플랫폼 지원 사용자 인터페이스에 설계에 대하여 설명하고, 4장에서는 설계를 토대로 구현된 모바일 웹의 결과를 제시한다. 마지막으로 5장에서 결론을 맺는다.

파편화 문제를 해결하고자 플랫폼 비종속적 모바일 웹이 나타났으며 최근에는 HTML5를 활용하여 모바일 웹의 구조를 가지고 네이티브 앱으로 구성된 하이브리드 앱 개발이 많아지고 있다. HTML5는 다양한 환경을 고려한 웹 사이트 개발의 대안이 될 수 있다.

구글은 HTML을 적극 지원하여 플래시의 구동이 필요 없는 HTML5기반의 유튜브 서비스를 제공한다[3]. HTML5는 편리하며 구현도 매우 간단하지만 한 페이지는 여러 화면구성의 불편함을 가지게 된다.

이후 HTML5기반의 하이브리드 플랫폼으로 출시된 것이 폰갭이다. 폰갭[4]은 모바일 크로스 플랫폼을 지원하는 오픈소스이며, 모바일 개발 플랫폼이다. 폰갭 라이브러리를 이용하여 패키징 하는 과정은 공통으로 적용되는 패키징이 아니라 스마트폰 플랫폼에 따라 폰 갭 라이브러리를 개별적으로 패키징 하여야 하는 문제를 가지고 있다. 센차 터치[5]는 또 하나의 모바일 웹앱을 구성하는 방법이다. 센차터치는 방대하고 체계적인 API를 제공하다. 그러나 센차터치를 이용할 경우 초기 로딩에 많은 시간적 소모를 보이며 프로그래밍 요소가 강한 반면 인터페이스 커스텀에 불편함을 보이고 있다.

cocos2D[6,7]는 모바일 게임을 개발할 때 사용하는 게임 개발 엔진으로 모바일 웹과 네이티브 앱의 UI/UX를 이질감 없이 구현하도록 지원한다. 그림 2는 cocos2D의 엔진의 계층도이다. coco2D는 OpenGL ES를 기반으로 만들어진 엔진으로 초기에는 iOS 기반의 게임을 개발하기 위해 만들어졌다.

복잡한 프로그램 코드의 경우 API 하부에 내재되어 있으므로 개발자는 편리하게 활용이 가능하다[8]. 본 논문에서는 제너릭 인터페이스 모델 설계를 통하여 네이티브앱과 모바일 웹의 동일 인터페이스 구현 모델을 제안한다. 이 모델은 모바일 웹, 네이티브 앱의 UI/UX와 동일하게 구현이 되며 코드 수정 없이 여러 OS에서 구동 가능하다.

제안하는 모델은 어느 플랫폼에서나 동일한 환경의 UI를 제공하도록 한다. 이를 위하여 다중해상도를 지원하는 기법을 제안하고, 페이지 전환이 아닌 한 페이지에서 화면전환 이 가능하도록 하는 기법을 제안한다. 그리고 저장방식 차이를 극복하도록 DB연동 모듈을 구성한다. 본 시스템은 그림 3과 같이 구성되며, HTML5의 인터페이스 단순화 및 페이지 전환 시 데이터 삭제의 문제를 보완하도록 본 논문에서 제안하는 인터페이스 모델을 적용한 교육용 앱의 예를 들어 설명한다.

모바일 웹앱의 전체적인 시스템 구조는 멀티 해상도 모듈 및 화면전환 모듈 을 활용하여 사용자 인터페이스를 구성하고, DB연동 모듈을 이용하여 모바일 웹앱의 데이터 저장 방식을 구성하도록 한다.

본 논문에서는 네이티브 앱의 UI와 연산처리과정을 동일하게 구성하였다. 모바일 웹앱은 특정 OS에 종속되지 않고 스마트폰, PC환경 등 비 종속적 OS의 특성을 바탕으로 어느 플랫폼에서도 운용이 가능하다는 장점을 가진다. 이러한 장점은 파편화의 단점을 해결하도록 한 번의 프로그램 구현으로 가능하게 한다.

본 시스템의 핵심은 사용자가 OS 및 화면 해상도에 관계없는 학습 환경을 제공 하며, 각 플랫폼에서 새로 패키징 하는 것이 아닌 모바일 웹상에서 직접 실행하여 어느 플랫폼에서나 구동이 가능하도록 한다.

설계된 시스템을 바탕으로 cocos2D와 JavaScript의 API를 활용하여 모바일 웹앱의 멀티 해상도 모듈과 화면 전환모듈 및 데이터 저장방식의 차이를 극복한 DB 연동 모듈에 관해 각각 살펴보도록 한다.

다중플랫폼 및 동일 플랫폼에서도 각기 다른 해상도를 지원하는 OS의 경우 해상도의 차이가 발생한다.

특히 안드로이드 운영체제를 탑재한 스마트 폰은 각기 다른 제조사가 제작하는 기기에 따른 이원적 해상도를 해결하기 위해서 해상도별 이미지의 제작과 UI를 새롭게 구성을 하는 문제를 가질 수밖에 없다. iOS 운영체제를 사용할 경우 안드로이드 플랫폼에서 제작된 네이티브 앱은 전혀 구동이 불가능한 문제를 가지고 있으며 PC환경에서도 실행 할 수 없다.

이러한 단점을 보완하기 위하여 모바일 웹앱이 출시되고 있다. 그러나 기존의 모바일 웹앱을 보면 HTML5 및 플래시 기반의 모바일 웹의 경우 해상도를 해결하기에 부족함을 가지고 있었다. 또한 현재 플래시의 경우도 많이 축소화되고 있으며 플래시 또한 해상도의 문제를 모두 극복하거나 다중 플랫폼에서 운용하기 위해서는 각 플랫폼에 맞는 커넥터가 필요하였다.

그림 4는 다중해상도 지원 체계를 나타낸 것이다. 이는 해상도의 변경에 대응하기 위한 것으로 스케일링을 통하여 멀티 해상도 모듈을 구성하고 플랫폼 비종속적 웹앱을 구현하도록 지원한다.

그림 5는 다중 해상도를 지원하기 위하여 시작 시 화면 해상도의 크기를 가져오고 이를 바탕으로 스케일링을 실행 하는 과정 및 코드이다. 가장 작은 해상도에 맞게 이미지를 제작 후 스케일링이 완료되면 이를 반환하고 해상도에 맞는 화면을 제공한다.

모바일 웹은 일반적으로 여러 개의 페이지로 구성이 된다. 페이지 변경 시 잦은 통신이 이루어지며 페이지 전환 시 해당 페이지의 데이터는 사라지게 된다.

이러한 문제를 해결하기 위하여 화면 전환 모듈을 개발하여 HTML5의 화면전환의 문제를 보완한다. 새로운 페이지를 생성하는 것이 아닌 하나의 페이지에서 화면을 교환하거나 덮어쓰는 방법을 통하여 장면의 변화를 주는 것으로 문제를 해결하였다.

그림 6은 신 교환하기 방법 나타내는 것으로 각 장면에서 각각의 메인 모듈로의 장면 이동이 가능하며 화면이 메모리에 많이 쌓여 있지 않기 때문에 성능향상에도 높은 효과를 볼 수 있다.

그림 7은 신(scene) 교환을 운용하여 화면간의 이동을 나타내는 코드 부분으로 교환 시 TransitionSlideInR을 이용하여 위에서 아래로 내려오며 이전 화면을 밀어내는 효과를 보이도록 한다.

그림 8은 신(scene) 덮어쓰기 방법을 나타내는 것으로 기존의 장면을 그대로 두고 그 위에 새로운 장면을 올려놓는 것이다.

Scene 2 밑에 Scene1이 남아 있게 되는 것으로 메모리의 낭비를 불러올 수 도 있지만 지속적인 화면의 이동 및 전환 시 데이터를 저장하여 잦은 데이터베이스 접근을 방지하여 데이터손실을 막는다.

본 모듈에 cocos2D의 공용 API를 활용하였으며 제안된 화면 전환 모듈은 UI별 독립적으로 운영하도록 한다. 이는 모든 모듈이 동시에 운용될 경우 앱의 속도저하를 가져올 수 있기 때문이다.

네이티브 앱을 운용하는 스마트 폰은 DB를 가질 수 있는 저장 공간이 있다. 하지만 모바일 웹앱의 경우 플랫폼에 맞는 데이터저장소가 없기 때문에 웹상의 DB저장소에 데이터는 저장되어야 한다. 따라서 본 논문에서 는 JavaScript의 드라이버매니저를 활용 외부의 DB서버와 연동을 돕도록 한다.

그림 9는 모바일에서 MySQL에 접속하는 코드의 일부이다. DB접속모듈은 기존의 웹 파싱 방법을 탈피하여 직접적으로 DB에 접근하도록 한다. 이를 위하여 JDBC 라이브러리를 활용하였으며, 접속 후 데이터를 검색하고 다시 사용자에게 반환된 데이터는 저장 또는 업데이트를 진행 하도록 한다.

DB접속 모듈을 활용하여 직접적으로 DB에 접속하면 필수적으로 Date 타입을 맞추어야 한다. 이는 만일 다른 플랫폼에서 동시접속의 경우를 방지하는 기능을 위해서이다. DB의 Type설정이 완료된 후에는 JDBC를 이용해 연결을 하게 된다.

앞서 제안한 제너릭 사용자 인터페이스 모델의 3가지 모듈인 멀티해상도 지원 모듈 및 화면전환 모듈 그리고 DB연동 모듈을 활용하여 모바일 웹앱을 구현하였다. 학습용 모바일 웹앱은 다중 플랫폼에서 구동이 가능하며 구현 결과는 다음과 같이 나타내도록 한다.

다음 그림10은 안드로이드 및 아이폰에서 구동되는 모바일 웹앱의 화면을 나타내는 것으로 두 플랫폼 모두 접속 시 동일한 구성의 화면을 가진다. 멀티 해상도 모듈이 적용되어 상이한 해상도에서도 같은 화면의 비율로 조정됨을 알 수 있다.

그림 11에서 모바일 웹앱은 하나의 프로그램을 통하여 다중 플랫폼에서 운용이 가능한 것을 보인다.

기존 모바일 웹 적용 시 기술의 부재로 네이티브 앱에 비하여 동작속가 느린 문제점이 있었다. 이를 보완하기 위해 본 논문에서는 모바일 웹앱을 네이티브앱과 동일한 화면 구성을 하며, 이를 위해 난이도 선택에서 페이지 전환 기법의 신 교환하기 방식을 적용하여 메모리의 낭비를 줄여 다중 플랫폼에서도 네이티브앱과 동일한 속도의 움직임을 나타내었다.

그림 12는 문제 풀이 화면이다. 화면의 신 덮어 쓰기방식은 메모리의 누적이 있을 수 있으나 문제의 앞, 뒤를 이동함에 있어서 문제 풀이가 완료 될 시점 까지 데이터를 담고 있으며 문제 풀이가 완료되면 데이터베이스에 접근하여 데이터를 저장하도록 한다. 신(scene) 교환 방식에 비해 신 덮어쓰기 방식은 데이터를 담고 있는 특징이 있어 모바일 웹앱의 대량의 데이터 손실을 막도록 한다. 또한 일반적으로 네이티브 앱의 경우 스마트폰에서만 사용됨으로 화면의 슬라이드 방식을 적용하는 것이 용이하나 구현된 모바일 웹앱의 경우 다중 플랫폼에서 활용하기 때문에 문제와 해답의 사이에 버튼을 적용하여 문제의 이동을 편리하게 할 수 있도록 하였다.

본 논문은 제너릭 사용자 인터페이스 모델을 제안하였으며 이를 위하여 다중해상도 모듈, 화면전환 모듈, DB연동 모듈을 구성하고 제작하였다.

제안된 모듈을 이용하여 다중플랫폼에서 동일한 UI를 제공하고, 화면의 해상도에 구애 받지 않는 구성과 데이터의 손실을 줄이게 되었으며 제너릭 사용자 인터페이스 모델은 모바일 웹 기반으로 사용자의 편의 및 플랫폼 비 종속적 프로그램의 설계와 구현을 수행 하였다. 또한 개발에 있어 각 플랫폼별 개발이 아닌 하나의 코드를 이용하여 개발을 하였기 때문에 코드의 재활용도 매우 높아지게 되었다.

시스템 구현에 있어 일반적인 모바일 웹앱은 해상도의 문제와 화면전환이 되지 않아 페이징을 하게 될 경우 많은 데이터의 손실이 발생한 반면 제안된 모델은 해상도 및 화면전환에 매우 효과적이며 DB연동에 있어서도 데이터 낭비를 줄이게 되었다. JavaScript 및 HTML등을 활용하여 제작되는 일반적인 웹 기반 프로그램의 단점을 보완하도록 각각 상황에 맞는 변수 설정 및 DB연동에 활용하고, 사용자의 단말(PC, 스마트폰)에 의존적이지 않는 모든 해상도를 지원하는 멀티해상도와 플랫폼별 다른 UI 구성을 이질감 없는 UI를 보이는 장점을 가진다.

본 연구의 향후 과제는 모바일 웹앱을 운영할 경우 화면 전환 시 많은 데이터 사용이 발생하는데 이러한 데이터사용량의 최소화를 가질 수 있는 새로운 방법을 추진할 예정이다.