KR20150078840A

KR20150078840A - 모바일 유저인터페이스 개발을 위한 통합 플랫폼을 기록한 저장 매체, 이를 구현하는 플랫폼 제공방법, 및 이를 제공하는 시스템

Info

Publication number: KR20150078840A
Application number: KR1020130168605A
Authority: KR
Inventors: 지계만; 이호진; 강선미; 송병권
Original assignee: 서경대학교 산학협력단; 주식회사 이지컴뮤니케이션즈
Priority date: 2013-12-31
Filing date: 2013-12-31
Publication date: 2015-07-08

Abstract

본 발명은 모바일 유저인터페이스 개발을 위한 통합 플랫폼을 기록한 저장 매체, 이를 구현하는 플랫폼 제공방법, 및 이를 제공하는 시스템에 관한 것이다.
본 발명에서는 사용자가 상기 서버 시스템에서 유저인터페이스 설계를 완료하면 이를 XML, HTML, CSS, 및Javascript 코드로 생성하는 제1단계와, 제1단계에서 생성된 파일들(XML, HTML, CSS, JavaScript)을 상기 모모바일 웹 서버에 업로드하는 제2단계와, XML 생성기를 이용하여, 상기 모바일 기기에 저장된 모바일 웹 앱의 타겟 URL을 상기 모바일 웹 서버의 URL로 지정하는 제3단계와, 모바일 기기와 상기 모바일 웹 서버간의 통신을 통하여 개발된 유저인터페이스의 모바일 기기 출력을 실시하는 제4단계를 포함하는 것을 특징으로 하는 모바일 기기용 유저인터페이스 개발을 위한 플랫폼을 제공하는 방법이 제공된다.

Description

모바일 유저인터페이스 개발을 위한 통합 플랫폼을 기록한 저장 매체, 이를 구현하는 플랫폼 제공방법, 및 이를 제공하는 시스템{STORAGE MEDIUM, METHOD AND SYSTEM FOR STORINGING INTEGRATED PLATFORM FOR DEVELOPING MOBILE USER INTERFACE}

본 발명은 모바일 유저인터페이스 개발을 위한 통합 플랫폼을 기록한 저장 매체, 이를 구현하는 플랫폼 제공방법, 및 이를 제공하는 시스템에 관한 것으로서 보다 구체적으로는 상이한 단말, 플랫폼, 서비스에 종속적이지 않으면서도 공통적으로 적용이 가능한 효율적인 통합 UI(User Interface) 플랫폼을 제공하는 모바일 유저인터페이스 개발을 위한 통합 플랫폼을 기록한 저장 매체, 이를 구현하는 플랫폼 제공방법, 및 이를 제공하는 시스템에 관한 것이다.

최근 스마트폰, 태블릿 PC와 같은 모바일 기기의 급격한 사용증가로 인하여 내부에 탑재되는 소프트웨어 및 사용자에게 편의성을 제공하는 유저인터페이스 개발 기술의 필요성과 중요성이 급속히 증대되고 있다. 이에 따라 미국 애플사, 구글사 등 관련 제조업체에서는 각각 iOS, Android와 같은 모바일 운영체제와 개발에 필요한 SDK(Software Development Kit)를 소프트웨어 개발자들에게 배포하고 있다. 그러나 이와 같은 개발을 위한 플랫폼과 프로그래밍 언어 등은 제조사에 따라 상이한 개발환경으로 인해 소프트웨어 개발시 다양한 모바일 운영체제에서 실행하기 위하여 운영체제에 따라서 각기 개발해야 한다. 이로 인하여 개발 시간이 늘어나는 것은 물론, 개발인력 또한 운영체제 별로 필요하므로 상당한 비용이 소요된다.

이러한 문제점을 해결하기 위한 기존 연구로서 MEAP(Mobile Enterprise Application Platform)가 제시된 바 있다. MEAP은 모바일 비즈니스를 위한 플랫폼으로써 모바일 장치나 운영체제에 관계없이 소프트웨어를 개발할 수 있는 것을 목적으로 한다. 그러나 기업 비즈니스 솔루션인 ERP(Enterprise Resources Planning) 혹은 오피스를 위한 어플리케이션이 주 대상이며, 유저인터페이스 설계 부분의 지원이 미비한 것이 현실이다.

종래 SI(System Integration) 사업은 인력, 시간, 및 비용이 많이 투자되어 중소기업이 사업하기에는 어려운 구조이며, 수익성 또한 낮은 저부가 산업이며, 이러한 구조적인 문제점을 해결하기 위하여 중소기업에 적합한 전략적인 소프트웨어 개발이 필요하다. 현재 시장에 출시되어 있는 종래 상용 UI(User Interface)의 경우 서로 다른 CPU, 디스플레이, 주변 장치 등을 사용하는 하드웨어를 기반으로 하고 있을 뿐만 아니라 사용하는 OS도 다양하고, 각 제품별 필요 기능들도 상이하기 때문에 한번의 UI 개발만으로는 다양한 디바이스, 사용자 혹은 사용자 그룹, OS, 디스플레이 크기 혹은 해상도에 적합한 UI 기능에 대한 요구사항을 만족시키기 어려운 문제점이 있었다.

특허문헌 1: 한국공개특허 제10-2012-0042291호 (2012.05.03.)

본 발명은 다양한 휴대폰 단말기 자치, 운영체제, 및 화면 크기에 종속적이지 않으면서도 공통적으로 적용이 가능한 효율적인 통합 UI(User Interface) 플랫폼(이하, '4A DUOS'라로 칭하기도 한다)을 제공하는 모바일 유저인터페이스 개발을 위한 통합 플랫폼을 기록한 저장 매체, 이를 구현하는 플랫폼 제공방법, 및 이를 제공하는 시스템을 제공하는 것을 목적으로 한다.

본 발명의 상기 목적은 유저 인터페이스 개발에 필요한 컴포넌트의 속성 및 동작에 대한 내용을 정의하는 CSS API(Application Programming Interface)와 XML API를 포함하는 라이브러리 파트와, 라이브러리 파트에서 제공되는 CSS API 및 XML API를 이용하여 속성값을 지정하여 필요한 인터페이스 디자인을 설계하고 이를 XML 언어로 출력하는 디자인 파트와, HTML 파일을 불러와 분석을 실시한 후 정의 매크로 테이블을 이용하여 정의 매크로로 변환하고, 상기 정의 매크로를 분석하여 데이터베이스화하고 상기 디자인 파트로부터 입력되는 XML 언어를 HTML 코드로 변환하고 사용자가 작성한 HTML 코드를 그래픽으로 변환하여 화면에 디스플레이하는 HTML 모듈과, CSS 소소코드를 파싱하고 사용자의 상기 디자인 파트에서 생성된 디자인을 통해 새로운 CSS를 생성하는 CSS 모듈과, 상기 XML언어 및 상기 HTML 코드에 액션을 부여하는 자바스크립트 모듈을 포함하는 생성(generation) 파트 및 생성 파트에서 생성된 XML언어, HTML 코드와 CSS 파일을 이용하여 웹킷으로 제공하는 시뮬레이션 파트를 포함하는 프로그램을 기록한 컴퓨터로 읽을 수 있는 저장 매체 및/또는 이러한 프로그램을 저장한 메모리를 구비하는 서버 시스템에 의해 달성 가능하다.

본 발명의 또 다른 목적은 모바일 웹 서버를 포함하는 서버 시스템과 모바일 기기 사이의 통신을 이용하여 모바일 기기용 유저인터페이스 개발을 위한 플랫폼을 제공하는 방법으로서, 사용자가 상기 서버 시스템에서 유저인터페이스 설계를 완료하면 이를 XML, HTML, CSS, 및Javascript 코드로 생성하는 제1단계와, 제1단계에서 생성된 파일들(XML, HTML, CSS, JavaScript)을 상기 모모바일 웹 서버에 업로드하는 제2단계와, XML 생성기를 이용하여, 상기 모바일 기기에 저장된 모바일 웹 앱의 타겟 URL을 상기 모바일 웹 서버의 URL로 지정하는 제3단계와, 모바일 기기와 상기 모바일 웹 서버간의 통신을 통하여 개발된 유저인터페이스의 모바일 기기 출력을 실시하는 제4단계를 포함하는 것을 특징으로 하는 모바일 기기용 유저인터페이스 개발을 위한 플랫폼을 제공하는 방법에 의해서 달성 가능하다.

본 발명에 따른 4A DOUS 플랫폼은 종래 개발툴보다 더 적은 시간과 비용을 투자하더라도 보다 나은 품질의 어플리케이션을 개발하고 다양한 OS에 추가적인 절차 없이 적용이 가능한 솔루션을 제공할 수 있게 되었다.

본 발명에 따라 제공되는 핸드폰 플랫폼은 UI(User Interface)를 통하여 개발자가 쉽고 빠르게 어플리케이션을 개발할 수 있고, 정적인 환경에서 어플리케이션을 개발하는 기존 환경과는 다르게 즉각적이고 다이나믹한 개발 환경을 제공할 수 있는 이점이 있다.

본 발명에서 제안하는 플랫폼은 다음 3가지 관점에서 효과적인 요소를 개발자에게 제공한다. 첫째는 네트워크 관점으로서 다양한 네트워크 환경의 출현으로 인하여 이를 수용하기 위한 컨버전스 단말이 출현함에 따라 사용자의 네트워크 환경 적응성을 지원하여 보다 효과적인 개인 모바일장치를 구성할 수 있는 통합 유저 인터페이스 기술을 제공하는 것이다. 따라서 사용자는 제안한 플랫폼을 사용하여 네트워크만 연결되어있는 환경이라면 복잡한 프레임워크 설치가 요구되지 않아 시간과 장소에 구애받지 않고 개발이 가능하게 되었다. 두 번째는 본 발명에서 제안하는 플랫폼에서 추구하는 One-Source Multi-Use의 극대화를 실현함으로써 모바일 애플리케이션, 모바일 웹, 스마트폰의 유저인터페이스를 위한 개발 방법을 하나로 통합하여 효율적인 개발 환경을 제공하게 된 것이다. 마지막으로는 소프트웨어의 사후 관리 관점으로서 다양한 모바일 장치에 대한 하나의 프로젝트를 기기 프로파일 기술과 통합 유저 인터페이스의 핵심 기술을 통하여 효율적으로 관리할 수 있게 된 것이다.

도 1은 본 발명에 따른 일 실시예로서 모바일 유저인터페이스 개발을 위한 통합 플랫폼을 제공하는 시스템 구성도.
도 2는 본 발명에서 제안하는 통합 플랫폼의 아키텍처.
도 3은 제안하는 플랫폼을 이용하여 Eclipse 툴에서 개발하는 화면.
도 4는 제안한 플랫폼에서 제공하는 기능을 통해 변환이 완료된 데이터들을 확인하는 화면.
도 5는 본 발명의 플랫폼에서 제공하는 XML Generator의 블록도.
도 6은 HTML Parser/Generator 구성도.
도 7은 XML Parser/Generator 구성도.
도 8은 CSS 모듈의 구성도.
도 9는 본 발명에 따른 시뮬레이터의 작동원리를 나타내는 설명도.
도 10은 본 발명에 따른 시뮬레이터의 실행 예시도.
도 11은 본 발명에 따른 시스템의 서비스 흐름도.
도 12는 모바일 기기와 서버간의 통신 흐름도.
도 13은 본 발명에 따른 플랫폼을 사용하여 안드로이드 기반 모바일 장치에 구현한 예시도.
도 14는 본 발명에 따른 플랫폼을 사용하여 iOS 기반 모바일 장치에 구현한 예시도.

본 발명에 따른 모바일 유저인터페이스 개발을 위한 통합 플랫폼인 4U DUOS는 모바일 장치와 사용자, 운영체제 및 화면크기에 종속적이지 않고 모든 모바일 기기 환경에서 구동 가능한 유저인터페이스를 제작하기 위한 플랫폼을 의미한다. 여기서 통합 플랫폼 4A DUOS는 Any Device, Any User, Any Operating system, 및 Any Screen 을 함축적으로 표현한 용어이다. 제안하는 플랫폼은 어플리케이션의 유저인터페이스 부분 개발을 지원하는 서버와 사용자간 통신을 실시하여 서버가 보유하고 있는 컴포넌트 등 유저인터페이스 설계에 필요한 자원을 지원한다.

따라서 사용자는 자신의 로컬 개발환경에서 서버로부터 공급된 자원을 활용하여 손쉽게 개발을 진행할 수 있다. 종래 플랫폼 도구들이 개별 API 동작 테스트를 수작업에 의존하고 복수의 애플리케이션을 동시에 검증하거나 애플리케이션을 구동할 때 함께 실행되는 프레임워크의 동작 상태까지 반영할 수 없는 것에 반하여, 4A DUOS 플랫폼은 운영체제 별로 엔진을 개발하면서 유저인터페이스 개발을 담당하는 XML은 동일한 소스를 사용할 수 있다는 장점이 있다.

이하에서, 첨부된 도면을 참조하여 본 발명의 바람직한 실시예, 장점 및 특징에 대하여 상세히 설명하도록 한다.

도 1은 본 발명에 따른 일 실시예로서 모바일 유저인터페이스 개발을 위한 통합 플랫폼을 제공하는 시스템 구성도이다. 통합 플랫폼을 제공하는 시스템은 서버 시스템과 모바일 클라이언트로 구성된다. 서버 시스템은 입출력 장치와 메모리가 구비되는 통상의 컴퓨터 시스템을 의미하는 것으로서, 서버 시스템에는 XML 생성기(Generator)와, XML 생성기를 이용하여 생성된 XML/HTML, CSS3, JavaScript 파일이 저장되며, 본 발명의 수행에 필요한 다양한 라이브러리 함수가 저장되는 데이터베이스 및 모바일 클라이언트에 웹 서비스를 제공하는 모바일 웹 서버로 구성된다. XML 생성기, XML 언어를 XML/HTML, CSS3, JavaScript 파일로 변환하는 프로그램 등은 컴퓨터로 읽기 가능한 다양한 저장 매체 형태로 저장될 수 있다. 모바일 클라이언트는 입출력 장치와 메모리가 구비되며 통신 기능이 제공되는 통상 스마트폰이라고 불리어지는 기기를 의미하며, 서버 시스템과 통신하며 서비스를 제공받는 Mobile Web App.이라는 응용 프로그램을 메모리에 저장하고 있는 장치이다.

도 2는 본 발명에서 제안하는 통합 플랫폼의 아키텍처이다. 플랫폼은 크게 4개의 부분으로 구성되어 있다. 첫 번째는 사용자의 유저인터페이스 개발의 편의성을 제공하는 각 프로그래밍 API (Application Programming Interface)를 저장하고 있는 라이브러리 파트이며, 실질적으로 유저인터페이스를 설계하는 디자인 파트에서 호출된다. 사용자가 유저인터페이스 설계를 진행하는 디자인 파트는 XML Generator의 모든 모듈과 연동되며 GUI를 통하여 응용프로그램을 개발할 수 있는 공간으로서, 4A DUOS의 핵심적인 모듈이다. 디자인 파트를 거쳐 사용자에 의해 작성된 XML 코드는 Generation 파트에서 모바일 운영체제에서 실행할 수 있는 코드로 변환시킨다. 최종적으로 완성된 코드는 Management 파트에 의해 관리된다.

1. 라이브러리 파트

라이브러리 파트는 앞서 언급한대로 미리 정의되어 있는 API를 공급함으로써 개발의 편의성을 제공한다. 또한 CSS(Cascading Style Sheets) 및 XML(eXtensible Markup Language), Javascript로 구성되는 웹 언어를 채용하여 서로 다른 모바일 운영체제들이 동일한 소스를 사용할 수 있게 하는 장점을 갖고 있다. CSS와 XML API는 제안하는 플랫폼의 유저인터페이스 개발에서 컴포넌트의 속성 및 동작 등에 대한 내용을 정의하는 역할을 한다. 두 개의 API는 서로 연동되어 개발 및 구현단계에 적합한 언어로 자료들을 변환하여 유저인터페이스의 설계에 사용된다.

(1) 통신 연결 모듈

○ 정의

현재 단말에서 사용하고 있는 네트워크에 대한 정보를 제공

- 모듈

connection.type

Connection.UNKNOWN : 알 수 없음

Connection.ETHERNET : 이더넷 연결

Connection.WIFI : WiFi 연결

Connection.CELL_2G : 2G 네트워크 연결

Connection.CELL_3G : 3G 네트워크 연결

Connection.CELL_4G : 4G 네트워크 연결

Connection.NONE : 네트워크에 연결되어 있지 않음

- 사용 예(표 1)

function checkConnection()
var networkState = navigator.network.connection.type;

var states = ;
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.NONE] = 'No network connection';

alert('Connection type: ' + states[networkState]);

checkConnection();

(2) 가속 센서(Accelerometer)

○ 정의

단말의 x,y,z 축에 대한 동작 센서를 제어

- 모듈

- 함수

accelerometer.getCurrentAcceleration : x,y,z 축에 대한 현재의 가속 정보를 반환

- 함수 원형

navigator.accelerometer.getCurrentAcceleration(

accelerometerSuccess,

accelerometerError

);

- 전달인자

accelerometerSuccess : 가속 값에 대한 조회 성공시 반환

accelerometerError : 가속 값에 대한 조회 에러시 반환

- 사용 예(표 2)

function onSuccess(acceleration)
alert('Acceleration X: ' + acceleration.x + '' +
'Acceleration Y: ' + acceleration.y + '' +
'Acceleration Z: ' + acceleration.z + '' +
'Timestamp: ' + acceleration.timestamp + '');
;

function onError()
alert('onError!');
;

navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

- 함수 원형

accelerometer.watchAcceleration : 일정한 주기로 x,y,z 축에 대한 가속 주기를 반환

var watchID = navigator.accelerometer.watchAcceleration(

accelerometerSuccess,

accelerometerError,

[accelerometerOptions]

);

- 전달인자

accelerometerSuccess : 가속 값에 대한 조회 성공시 반환

accelerometerError : 가속 값에 대한 조회 에러시 반환

accelerometerOptions : frequency(밀리세컨드 단위로 갱신 주기를 설정)

- 사용 예(표 3)

function onSuccess(acceleration)
alert('Acceleration X: ' + acceleration.x + '' +
'Acceleration Y: ' + acceleration.y + '' +
'Acceleration Z: ' + acceleration.z + '' +
'Timestamp: ' + acceleration.timestamp + '');
;

function onError()
alert('onError!');
;

var options = frequency: 3000 ; // 3초를 주기로 업데이트

var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

- 함수

accelerometer.clearWatch : ID 파라미터를 통하여 가속 값에 대한 수집을 정지

- 함수 원형

navigator.accelerometer.clearWatch(watchID);

- 전달인자

accelerometerSuccess : 가속 값에 대한 조회 성공시 반환

accelerometerError : 가속 값에 대한 조회 에러시 반환

-사용 예(표 4)

var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
// 처리 후
navigator.accelerometer.clearWatch(watchID);

- 객체

Acceleration : 조회된 가속 값에 대한 정보를 가진 객체

- 속성

x : x축에 대한 가속도(m/s)

y : y축에 대한 가속도(m/s)

z : z축에 대한 가속도(m/s)

timestamp : 밀리세컨드 단위로 가속 값이 조회된 시간을 기록

- 사용 예(표 5)

(3) 사용자 통지(Notification)

○ 정의

사용자에게 시각, 청각적인 알림을 제공

- 모듈

- 함수

notification.alert : 사용자에게 알림이나 대화상자를 화면에 표시

- 함수 원형

navigator.notification.alert(message, alertCallback, [제목], [버튼이름])

- 전달 인자

message: 다이얼로그에 표시될 내용 (String)

alertCallback: 알림창이 닫힌 뒤 돌아갈 함수의 이름. (Function)

title: 알림창의 창 제목 (String) (Default: "Alert")

buttonName: 버튼의 이름 (String) (Default: "OK")

- 사용 예(표 6)

function alertDismissed()

// 알림창이 닫힌 뒤 작업

navigator.notification.alert(
'알림테스트', // message
alertDismissed, // alertCallback
'Game Over', // 제목
'Done' // 버튼 이름
);

- 함수

notification.confirm : 사용자에게 확인 대화상자를 화면에 표시

- 함수 원형

navigator.notification.confirm(

message,

confirmCallback,

[title],

[buttonLabels]

)

- 전달 인자

message: 다이얼로그에 표시될 내용 (String)

confirmCallback: 확인창이 닫힌 뒤 돌아갈 함수의 이름. (Function)

title: 알림창의 창 제목 (String) (Default: "Alert")

buttonName: 버튼의 이름 (String) (Default: "OK")

- 사용 예(표 7)

function onConfirm(buttonIndex)
alert('You selected button ' + buttonIndex);

function showConfirm()
navigator.notification.confirm(
'4ADUOS Confirm Test', // 화면에 표시될 메시지
onConfirm, // 버튼이 눌렸을 경우 버튼의 인덱스와 함께 호출되는 함수
'Game Over', // title
'Restart,Exit' // buttonLabels
);

- 함수

notification.beep : 단말에서 비프음을 출력

- 함수 원형

navigator.notification.beep(times); // times 횟수만큼 비프음을 출력

notification.vibrate : 단말의 진동 기능을 호출

- 함수 원형

navigator.notification.vibrate(milliseconds) // milliseconds 시간만큼 진동

(4) 파일 시스템

○ 정의

파일 시스템에 대한 읽고 쓰는 역할을 담당하는 API 모음

DirectoryEntry 모듈

- 속성

name : 전체 경로가 아닌 DOMString 형식으로 된 DirectoryEntry의 이름

fullPath : DirectoryEntry의 전체 절대 경로

- 함수

getMetadata: 디렉토리에 대한 메타데이터 정보를 조회

setMetadata: 디렉토리에 대한 메타데이터 정보를 설정

moveTo: 파일 시스템의 다른 위치로 디렉토리를 이동

copyTo: 파일 시스템의 다른 위치에 디렉토리를 복사

toURL: 디렉토리가 위치한 곳을 URL형식으로 반환

remove: 디렉토리 삭제

getParent: 부모 디렉토리를 반환

getDirectory: 디렉토리의 위치를 조회

getFile: 파일의 위치를 조회

removeRecursively: 디렉토리와 그 안의 내용도 모두 삭제

FileEntry 모듈

- 속성

name : 전체 경로가 아닌 DOMString 형식으로 된 FileEntry의 이름

fullPath : FileEntry의 전체 절대 경로

- 함수

getMetadata: 파일에 대한 메타데이터 정보를 조회

setMetadata: 파일에 대한 메타데이터 정보를 설정

moveTo: 파일 시스템의 다른 위치로 파일을 이동

copyTo: 파일 시스템의 다른 위치에 파일을 복사

toURL: 파일이 위치한 곳을 URL형식으로 반환

remove: 파일 삭제

getParent: 부모 디렉토리를 반환

file: 파일 생성

File 모듈

- 속성

name: 파일의 이름 (DOMString)

fullPath: 파일이름을 포함한 전체 경로 (DOMString)

lastModifiedDate: 최종 수정 날짜 (Date)

size: 파일의 크기-byte단위(long)

2. 디자인 파트

사용자가 제안하는 플랫폼을 사용하여 개발을 진행하는 공간으로 HTML 수준의 기초적인 프로그래밍 능력이 있는 사용자라면 자신이 원하는 컴포넌트의 속성 값(크기, 위치 등)만을 지정하는 정도로 유저인터페이스 설계가 가능하다. 또한 Eclipse, Visual Studio와 같은 일반적인 개발도구뿐만 아니라 단순한 텍스트 에디터만으로도 개발 할 수 있기 때문에 각 사용자에게 맞는 도구를 선택할 수 있는 자율성을 제공한다. 도 3은 제안하는 플랫폼을 이용하여 Eclipse 툴에서 개발하는 화면이다. 코딩 작업이 완료된 후 시뮬레이터를 사용하여 설계한 유저인터페이스를 확인할 수 있다.

* C4AUIDesign

* C4AModuleDesign

* C4AInterfaceModule 각각의 Interface 컴포넌트에 대한 속성을 저장하고 있는 클래스. 아래의 멤버 변수들에 대한 속성 지정이나 속성 참조 등은 모두 Get/Set 함수를 통하여 이루어짐. CCSS 클래스와 연동되어 사용됨.

- 속성

m_nComponentType : 각각의 컴포넌트에 대한 타입

m_ptComponent : 컴포넌트의 시작위치(XPos, YPos)

m_nComponentWidth : 컴포넌트의 넓이

m_nComponentHeight : 컴포넌트의 높이

m_clrComponent : 컴포넌트의 색상

m_styleComponent : 컴포넌트의 스타일(그라데이션, 단색, 라운드 등)

m_actionComponent : C4AjQuery 클래스의 멤버로 해당 컴포넌트가 취하게 될 동작을 저장

- 메소드

LoadFromFile : CSS 파일에서 정보를 로드

SaveToFile : 수정된 CSS Database를 파일로 저장

UpdateChange : CSS Database를 이용하여, 화면 업데이트

AddComponent : 컴포넌트 추가

RemoveComponent : 컴포넌트 삭제

ComponentList : CSS Database를 List 형태로 저장

3. Generation 파트

(1) HTML 모듈

사용자가 디자인한 XML 코드를 변환하여 HTML 코드를 생성하고, 사용자가 작성한 HTML 코드를 그래픽으로 변환하여 화면에 디스플레이 할 수 있는 모듈이다. 코드 변환 작업은 3단계로 이루어진다. 먼저 HTML 파일을 불러와 분석을 실시한 후, 적합한 자료형으로 변환한다. 표 1은 변환시 사용되는 자료형의 정의 매크로를 나타낸다. 변환이 완료되면 정의매크로를 분석하여 데이터베이스화 한다. 마지막으로 XML 자료형을 HTML 형식의 코드로 변환하여 저장한다. 정의되어 있는 HTML 코드는 CSS 자료형과 결합되어 시뮬레이터에서 사용된다. 도 4는 제안한 플랫폼에서 제공하는 기능을 통해 변환이 완료된 데이터들을 확인하는 화면이다. 또한 표 8은 HTML 자료형을 XML로 변환하기 위한 정의 매크로이다.

정의 매크로	내용
DECLARE_XML_MAP(name)	클래스의 정의 name : 노드의 이름
BEGIN_XML_MAP(xclass)	xclass 클래스의 이름
END_XML_MAP()	BEGIN_XML_MAP()은 END_XML_MAP()로 종료
XML_CDATA_VALUE(variable)	노드의 CDATA 값을 read/write할 때 사용하는 값
XML_CDATA_OBJECT(name, variable)	노드의 CDATA 값을 read/write할 때 사용하는 값
XML_STR_ATTRIBUTE(name,variable)	노드의 문자열 데이터 속성을 read/write 할 때 사용하는 값
XML_INT64_ATTRIBUTE(name,variable)	노드의 64비트 정수형 데이터 속성을 read/write 할 때 사용하는 값
XML_INT_ATTRIBUTE(name,variable)	노드의 32비트 정수형 데이터 속성을 read/write 할 때 사용하는 값
XML_DWORD_ATTRIBUTE(name,variable)	노드의 DWORD 데이터 속성을 read/write 할때 사용하는 값
XML_ARRAY_ATTRIBUTES(variable)	미리 정의되어 있지 않은 노드의 리스트 속성을 read/write 하기 위한 매크로
XML_ARRAY(xclass,xarray)	노드의 리스트에 대해 read/write하기 위한 매크로. xclass는 노드의 이름. xarray는 CAtlArray<xclass*> 타입
XML_STR_OBJECT(name,variable)	노드의 값을 문자열로 read/write하기 위한 매크로
XML_INT_OBJECT(name,variable)	노드의 값을 32비트 정수형으로 read/write하기 위한 매크로
XML_INT64_OBJECT(name,variable)	노드의 값을 64비트 정수형으로 read/write하기 위한 매크로
XML_DWORD_OBJECT(name,variable)	노드의 값을 DWORD형으로 read/write하기 위한 매크로
XML_OBJECT_EX(xclass,variable)	object 데이터를 read/write 하기 위한 매크로

도 5는 본 발명의 플랫폼에서 제공하는 XML Generator의 블록도이다.

- Design User Interface Module

XML Generator의 모든 모듈과 연동이 되며, 실제 사용자가 GUI 화면을 통하여 응용프로그램을 개발할 수 있는 공간이며 4A DUOS에 핵심적인 개발 모듈.

- HTML Parser/Generator

사용자가 디자인한 XML 코드를 변환하여 HTML 코드를 생성하고, 사용자가 작성한 HTML 코드를 그래픽으로 변환하여 화면에 디스플레이 할 수 있는 모듈.

- XML Parser/Generator

사용자의 GUI를 통한 디자인 내용을 XML 코드로 변환하는 모듈.

- CSS Parser/Generator Module

각 컴포넌트의 모양/크기/위치/색상/폰트 등의 속성을 지정할 수 있는 Cascading Style Sheet의 소스코드를 파싱하고, 사용자의 GUI 디자인을 통해 새로운 CSS를 생성할 수 있는 모듈.

- jQuery(JavaScript) Module

응용프로그램 내 각 컴포넌트의 동작을 제어하기 위해 사용하는 JavaScript를 구조화 시킨 모듈.

- Platform Workspace Generator

각각의 스마트폰 플랫폼에서 통합 개발환경을 통해 스마트폰에 배포(Deploy) 시키는데 있어, 사용자가 디자인하고, 설정한 각 통합 개발환경의 프로젝트 파일을 생성시켜주는 모듈. Project에 대한 아이콘 및 세부 설정등을 지정하여, 프로젝트 파일을 생성하는 모듈.

- Database Module

클라이언트와 서버 사이에 Database에 대한 작업을 수행할 때, 이에 대한 처리과정을 GUI 상으로 설정할 수 있는 모듈.

- Communication Module

서버와의 통신에 대한 기능을 담당하는 모듈로써, Webkit에서 해당 기능을 수행. Webkit과의 내부 통신을 통하여, 외부와의 통신이 이루어짐.

- Simulator Module

7000사용자가 디자인한 응용 프로그램을 실제 스마트폰에서 구동시키기 전 Webkit을 통하여, 응용 프로그램의 동작이나 디자인을 확인할 수 있는 모듈.

* XML Schema

C4AXMLSchema - 정의된 XML 코드를 통하여, HTML 컴포넌트의 속성 및 동작 등에 대한 내용을 기술한 클래스. 컴포넌트 및 Parser/Generator 클래스들에 대한 기본이 되는 클래스.

도 6은 HTML Parser/Generator 구성도를 도시한다.

* C4AHTMLParser / C4AHTMLGenerator

- LoadHTML()

HTML 파일을 로딩하여, 이를 분석한 후, 멤버 변수내 자료형으로 변환

- MakeHTMLDatabase()

HTML 테그를 분석하여 데이터베이스화

- GenerateHTML()

XML 자료형을 HTML 형식의 코드로 변환하여 저장CXMLSchema 클래스에 정의되어 있는 데이터 형식을 이용저장된 HTML 코드는 기정의되어 있는 CSS3 자료형과 결합되어 Simulator에서 사용

도 7은 XML Parser/Generator 구성도를 도시한다.

* C4AXMLParser / C4AXMLGenerator

- LoadXML()

XML 파일을 로딩하여, 이를 분석한 후, 멤버 변수 내 자료형으로 변환

- MakeXMLDatabase()

XML 테그를 분석하여 데이터베이스화

- GenerateXML()

HTML 자료형을 XML 형식으로 코드를 변환하여 저장

(2) CSS 모듈

각 컴포넌트의 모양, 크기, 위치, 색상, 폰트 등의 속성을 지정할 수 있는 CSS의 소스코드를 파싱하고, 사용자의 GUI 디자인을 통해 새로운 CSS를 생성할 수 있는 모듈이다. 도 8은 CSS 모듈의 구성을 나타낸다. CSS 모듈은 제공 컴포넌트의 속성을 저장하는 부분과 별도로 정의한 컴포넌트들의 로딩 및 저장과 삭제 등을 담당하는 매니저로 구성된다. 사용자는 CSS 모듈을 통하여 제공되는 컴포넌트를 자신이 원하는 목적에 맞게 수정 및 제작을 할 수 있다.

* C4ACSSModule

- 메소드

SaveToCSS() : 컴포넌트의 속성을 CSS 형식으로 파일에 저장

LoadFromCSS() : 파일 시스템에 있는 CSS 파일을 XML Generator에 데이터 형식으로 로드하여, C4AInterfaceModule과 연동

GetListFromCSS() : 데이터 형식으로 존재하는 컴포넌트의 속성을 차례대로 로드하여, C4ASimulator나 C4AUIDesign 모듈에서 사용

(3) Javascript 모듈

각 컴포넌트의 동작을 제어하기 위해 사용하는 Javascript를 구조화 시킨 모듈이다. 유저인터페이스 설계 시에 사용되는 XML, HTML 코드 상에서 컴포넌트에 이벤트 혹은 액션을 부여하기 위해 Javascript를 사용하고자 할 때 이용된다.

4. 시뮬레이션 파트

시뮬레이션 파트는 사용자가 디자인 및 작성한 XML 코드를 HTML 코드로 변환하여, 작성한 응용프로그램에 대한 내용을 미리 볼 수 있는 기능을 담당한다. 사용자는 앞서 언급한 디자인 파트를 사용하여 유저인터페이스의 코드를 작성하면서 XML와 CSS 모듈 간의 연동을 통해 제공하는 어플리케이션을 이용하여 디스플레이 및 제어가 가능하다.

도 9는 제안한 시뮬레이터의 작동원리를 나타낸다. 해당 모듈은 XML, HTML 태그 리스트와 CSS 파일을 담당하는 리스트로 구성되어 있으며, 이를 Webkit[7]를 통하여 사용자가 수정한 XML/HTML 태그 및 CSS 파일을 실시간으로 업데이트하여 확인 가능하다.

도 10은 시뮬레이터의 실행 예시를 나타낸다. 사용자가 자신이 제작한 코드를 화면 상단에 입력하면 제공되는 코드의 Parser 모듈이 이를 해석하여 실제로 유저인터페이스의 화면에 출력될 내용을 표시해준다. 이는 기존의 방법인 코드를 수정하였을 경우 소스코드를 재컴파일한 후 시뮬레이터를 통하여 결과를 확인하던 것에 비해 실시간으로 자신이 제작한 코드의 결과를 확인할 수 있기 때문에 개발 시간을 단축하는 장점이 있다.

도 11은 제안하는 4A DUOS 플랫폼의 전체 서비스 흐름을 나타낸다. 제공되는 서비스는 개발 프로세스와 어플리케이션 출력 프로세스로 구성된다. 개발 프로세스에 제공되는 서비스의 흐름은 도 12와 같다. 도 1에 제시된 모바일 유저인터페이스를 이용한 개발은 도 12와 같은 절차에 의해 수행된다.

1 단계: 먼저 사용자는 디자인 파트를 사용하여 유저인터페이스 설계를 완료하면 Generation 모듈에 의해 XML, HTML 및 CSS, Javascript 코드가 생성된다.

2 단계: 생성된 파일들(XML/HTML, CSS3, JavaScript)을 Mobile Web Server에 업로드(파일복사)한다.

3 단계: XML Generator를 이용하여, Mobile Web App 의 Target URL을 Mobile Web Server의 URL로 지정한다.

4 단계: Mobile Client와 Mobile Web Server간의 통신을 통하여, 개발된 유저인터페이스의 모바일 기기 출력을 실시한다.

도 11의 좌측은 출력 프로세스 관점에서 개발한 소프트웨어의 유저인터페이스가 출력될 모바일 기기를 나타낸다. 사용자는 제안한 플랫폼에 의해 개발된 유저인터페이스를 통해 소프트웨어-커널, 드라이버-하드웨어 순으로 구성되어있는 모바일 기기의 자원을 사용할 수 있다. 이때 플랫폼 내부적으로는 유저인터페이스의 화면 출력을 위하여 도 12에 표시되어 있는 서버와 통신을 실시하여 GUI(Graphic User Interface) 데이터를 가져오게 된다.

도 13은 제안한 플랫폼을 사용하여 Android 기반 모바일기기에 구현한 컴포넌트 결과물 중 콤보박스 를 나타낸다. 해당 컴포넌트는 2장 3절의 라이브러리 파트로부터 제공된 것이며, 사용자는 도면 하단의 Text 입력 메뉴를 통하여 자신이 원하는 항목들을 입력하면 Generation 파트에 의하여 생성된 코드가 새롭게 적용되어 최종적으로 완성된 컴포넌트가 화면에 출력된다. 도 14는 제안한 플랫폼에서 제공하는 다양한 컴포넌트를 사용하여 제작한 iOS에 구현한 애플리케이션의 예제를 나타낸다.

상기에서 본 발명의 바람직한 실시예가 특정 용어들을 사용하여 설명 및 도시되었지만 그러한 용어는 오로지 본 고안을 명확히 설명하기 위한 것일 뿐이며, 본 고안의 실시예 및 기술된 용어는 다음의 청구범위의 기술적 사상 및 범위로부터 이탈되지 않고서 여러 가지 변경 및 변화가 가해질 수 있는 것은 자명한 일이다. 이와 같이 변형된 실시예들은 본 발명의 사상 및 범위로부터 개별적으로 이해되어져서는 안되며, 본 발명의 청구범위 안에 속한다고 해야 할 것이다.

Claims

모바일 기기용 유저인터페이스 개발을 위한 플랫폼을 제공하기 위한 프로그램을 기록한 컴퓨터로 읽을 수 있는 저장 매체에 있어서,
유저 인터페이스 개발에 필요한 컴포넌트의 속성 및 동작에 대한 내용을 정의하는 CSS API(Application Programming Interface)와 XML API를 포함하는 라이브러리 파트와,
상기 라이브러리 파트에서 제공되는 CSS API 및 XML API를 이용하여 속성값을 지정하여 필요한 인터페이스 디자인을 설계하고 이를 XML 언어로 출력하는 디자인 파트와,
HTML 파일을 불러와 분석을 실시한 후 정의 매크로 테이블을 이용하여 정의 매크로로 변환하고, 상기 정의 매크로를 분석하여 데이터베이스화하고 상기 디자인 파트로부터 입력되는 XML 언어를 HTML 코드로 변환하고 사용자가 작성한 HTML 코드를 그래픽으로 변환하여 화면에 디스플레이하는 HTML 모듈과, CSS 소소코드를 파싱하고 사용자의 상기 디자인 파트에서 생성된 디자인을 통해 새로운 CSS를 생성하는 CSS 모듈과, 상기 XML언어 및 상기 HTML 코드에 액션을 부여하는 자바스크립트 모듈을 포함하는 생성(generation) 파트 및
상기 생성 파트에서 생성된 XML언어, HTML 코드와 CSS 파일을 이용하여 웹킷으로 제공하는 시뮬레이션 파트를 포함하는 프로그램을 기록한 컴퓨터로 읽을 수 있는 저장 매체.
제 1항에 있어서,
상기 라이브러리 파트에는 상기 모바일기기와 통신 연결하는 통신 연결 모듈과, 상기 모바일기기에 구비되는 가속 센서의 정보를 획득하는 가속 센서 모듈을 포함하는 것을 특징으로 하는 프로그램을 기록한 컴퓨터로 읽을 수 있는 저장 매체.
제 2항에 있어서,
상기 통신 연결 모듈에는 이더넷 연결, WiFi 연결, 2G 네트워크 연결, 3G 네트워크 연결, 및 4G 네트워크 연결하기 위한 모듈이 포함되는 것을 특징으로 하는 프로그램을 기록한 컴퓨터로 읽을 수 있는 저장 매체.
제 1항 또는 제 2항에 있어서,
상기 시뮬레이션 파트는 사용자에게 작성한 코드를 입력하는 창을 제공하고, 입력한 코드를 해석하는 파서 모듈과, 상기 파서 모듈에 의해 해석된 결과를 디스플레이 하는 창을 포함하는 것을 특징으로 하는 프로그램을 기록한 컴퓨터로 읽을 수 있는 저장 매체.
모바일 웹 서버를 포함하는 서버 시스템과 모바일 기기 사이의 통신을 이용하여 모바일 기기용 유저인터페이스 개발을 위한 플랫폼을 제공하는 방법으로서,
사용자가 상기 서버 시스템에서 유저인터페이스 설계를 완료하면 이를 XML, HTML, CSS, 및Javascript 코드로 생성하는 제1단계와,
상기 제1단계에서 생성된 파일들(XML, HTML, CSS, JavaScript)을 상기 모모바일 웹 서버에 업로드하는 제2단계와,
XML 생성기를 이용하여, 상기 모바일 기기에 저장된 모바일 웹 앱의 타겟 URL을 상기 모바일 웹 서버의 URL로 지정하는 제3단계와,
상기 모바일 기기와 상기 모바일 웹 서버간의 통신을 통하여 개발된 유저인터페이스의 모바일 기기 출력을 실시하는 제4단계를 포함하는 것을 특징으로 하는 모바일 기기용 유저인터페이스 개발을 위한 플랫폼을 제공하는 방법.
모바일 기기용 유저인터페이스 개발을 위한 플랫폼을 제공하기 위한 프로그램을 저장하는 메모리를 구비하는 서버 시스템에 있어서,
유저 인터페이스 개발에 필요한 컴포넌트의 속성 및 동작에 대한 내용을 정의하는 CSS API(Application Programming Interface)와 XML API를 포함하는 라이브러리 파트와,
상기 라이브러리 파트에서 제공되는 CSS API 및 XML API를 이용하여 속성값을 지정하여 필요한 인터페이스 디자인을 설계하고 이를 XML 언어로 출력하는 디자인 파트와,
HTML 파일을 불러와 분석을 실시한 후 정의 매크로 테이블을 이용하여 정의 매크로로 변환하고, 상기 정의 매크로를 분석하여 데이터베이스화하고 상기 디자인 파트로부터 입력되는 XML 언어를 HTML 코드로 변환하고 사용자가 작성한 HTML 코드를 그래픽으로 변환하여 화면에 디스플레이하는 HTML 모듈과, CSS 소소코드를 파싱하고 사용자의 상기 디자인 파트에서 생성된 디자인을 통해 새로운 CSS를 생성하는 CSS 모듈과, 상기 XML언어 및 상기 HTML 코드에 액션을 부여하는 자바스크립트 모듈을 포함하는 생성(generation) 파트 및
상기 생성 파트에서 생성된 XML언어, HTML 코드와 CSS 파일을 이용하여 웹킷으로 제공하는 시뮬레이션 파트를 포함하는 프로그램을 저장하는 메모를 구비하는 서버 시스템.