• 검색 결과가 없습니다.

Unified Transformation Engine 기술

문서에서 R&D연구결과보고서 (페이지 147-161)

Unified 변환 엔진은 스케일러블 RUI 기반으로 개발된 애플리케이션 UI를 관리하고 단말에서 애플리케이션 식별자를 통해 UI를 요구할 때 단말 프로파일에 맞게 UI를 변환하여 전달해주는 UI 변환 엔진 (이하 UTS)과 사용자 단말에 맞게 미디어를 변환해서 전달해주는 미디어 변환 엔진 (이하 MTS)을 포함한다. Unified 변환 엔진은 사업자 영역에 존재하며 아래 그림과 같이 UI Factory 관리자( 이하 UIFM)와 통신하여 사용자 단말에 맞게 UI와 미디어를 동적으로 변환해서 제공하는 기능을 담당한다.

그림 167 Unified 변환 엔진 구성도

UIFM은 웹 서버로 동작하게 되며 HTTP의 Request 메시지를 통해 RUI 관리자로부터 단말 프 로파일 정보와 애플리케이션 식별자 등을 수신하고, HTTP의 Response 메시지를 통해 변환된 UI의 URL 정보를 전송한다. 즉, UIFM은 RUI 관리자로부터 앱 식별자와 단말 프로파일을 수신한 경우 우선 관련된 UI와 XML 형태의 변환 정책 디스크립션 파일을 Repository로부터 가져와서 변환 디렉토리에 저장한다. UTS에서는 단말 프로파일과 디스크립션 내 정의된 변환 정책에 따라 목적 단말의 해상도나 물리적 특성을 기반으로 HTML 문서를 변환하고 변환 디렉토리에 저장한 다. 변환된 HTML 문서의 URL을 RUI 관리자로 전달하면 댁내에서 RUI 프레임워크를 따라 최종 적으로 WebKit 기반의 브라우저를 구동하고 브라우저에서 수신된 URL로 접속하면 변환된 UI를 렌더링하게 된다. 또한, UIFM에서는 사용자 접속 환경과 HTML 문서에 포함된 미디어 콘텐츠의 특성에 따라 MTS를 통하여 미디어를 동적으로 변환하여 전달하는 기능을 제공한다.

사용자가 브라우저를 통해 앱을 서비스를 제공받는 과정에서 링크를 통해 다른 페이지로 전환 하고자 하면 UIFM으로 접속하게 된다. UIFM은 접속한 단말의 세션을 관리하고 UI 변환 엔진을 통하여 단말의 프로파일과 변환 정책에 맞게 HTML 문서를 변환하고, 해당 앱 UI의 변환 디렉토 리에 저장한 후 변환된 문서를 사용자 단말 브라우저로 전송하여 렌더링하게 한다. 따라서, UIFM 은 특정 앱 제어를 위한 UI를 최초로 변환하는 과정에서 접속한 단말 정보를 유지하고 연결된 세 션을 관리해야 한다.

나. UI 변환 엔진 (UTS)

UTS는 스케일러블 UI 저작도구에서 개발된 앱의 UI를 UI Factory 관리자가 요구하는 경우 단 말 프로파일에 맞게 변환하는 엔진이다. 스케일러블 UI는 TV, Phone, Pad와 같이 3가지 유형의 단말을 대상으로 저작되며, HTML 문서 형태로 디스크립션 된다. 또한 문서를 각 단말 프로파일 과 UI 특성에 맞도록 변환하기 위하여 XML 형태로 기술된 정보가 같이 UI Factory 관리자로부 터 수신된다. UTS는 단말 프로파일, HTML 문서 그리고 XML 문서를 파싱하여 변환된 HTML 문서를 생성한다. HTML 문서의 변환 방법은 문서를 몇 개의 영역으로 분할하고 각 영역이 프로 파일에 따라 포함될 것인지 제거될 것인지 판단한다. 또한 각 영역이 단말에 따라 배열되는 위치 의 방향이나 우선순위가 정의되어 변환 문서를 생성할 때 참조한다.

UTS는 UI Factory 관리자로부터 입력 받은 원본 소스(HTML 문서)를 분석하고 각 단말 유형 에 맞게 정의된 템플릿에 UI 변환 정책을 기술한 XML 정보를 적용하여 원본 소스를 변환하여 최 종적으로 단말에서 렌더링될 수 있는 HTML 문서를 생성한다. 생성된 HTML 문서는 UI Factory 관리자로 전달되고 웹 브라우저나 RUI 관리자를 통해 RUI 뷰어로 전달되어 렌더링된다.

UI 변환 기능은 단말 프로파일과 UI 분석을 통하여 파악된 UI 구조를 단말의 특성, 사용자 환 경, 상황을 고려하여 UI Repository로부터 수신한 Orignal UI를 단말에 적합한 형태로 변형과 가 공을 통해서 사용자 단말에 제공하는 기능을 수행한다. 이 기능을 수행하기위해 XML파서, 화면정 보처리, 템플릿 처리, CSS 동적생성, HTML생성 모듈이 필요하다.

다음 그림은 단말 프로파일 및 UI 변환 정책을 반영하여 UI를 동적으로 변환하는 UTS의 동작 구조를 보여준다.

그림 168 UTS 동작 구조

UTS에서 동적으로 UI를 변환하여 전달하는 과정은 다음과 같다.

Ÿ 변환 정책 XML 데이터와 기기정보를 읽어 파싱한다.

Ÿ XML 데이터 중 클래스를 찾아 매칭되는 함수를 실행시킨다.

Ÿ XML 데이터와 기기정보에 따라 동적으로 HTML 문서를 생성한다.

Ÿ 변환된 HTML 문서를 단말로 전송하여 렌더링한다.

파서모듈은 변환기능이 수행되기 위해서 메타 데이터 역할을 하는 XML 스키마 정보가 필요하 다. 이 XML 스키마는 저작도구에서 작성이 되며 Repository에 저장된다. 이 파일은 파서가 읽어 들여 스키마 정보를 이용해 어떤 방식으로 어떻게 변환할 것인지 결정해주는 역할을 한다. 화면 처리 모듈은 변환기능이 수행될 때 대부분 서버에서 처리하지만 서버에서 처리하기 힘든 부분은 클라이언트 즉 화면에서 처리한다. 변환방식이 page일 경우 이벤트를 받아 레이아웃을 숨기고 보 이는 이런 과정이 화면에서 정보처리를 하는 예이다. 또한 화면 회전이 되었을 경우에도 사용된 다. 서버로부터 호출하여 정보를 받는 방식보다 빠른 기능을 수행한다. CSS 동적 생성 모듈은 XML 데이터를 파싱하여 각 기기에 맞는 CSS를 동적으로 생성해주는 기능을 수행한다. XML 스 키마에는 스크린 너비, 높이의 정보가 있으며 이 정보로 HTML에 CSS 코드를 생성한다. HTML 문서 생성 모듈은 XML 데이터를 파싱하여 각 기기에 맞는 HTML을 동적으로 생성해주는 기능을 수행한다. HTML 문서를 생성하는 과정은 다음과 같다.

Ÿ XML 데이터를 파싱한다.

Ÿ XML 정보를 읽어 각 해당하는 클래스를 실행시킨다.

Ÿ 클래스가 실행되면서 HTML이 파싱되어 재정의하는 기능을 수행한다.

UI 변환을 위하여 단말 프로파일에 따른 변환 정책이 XML 문서로 기술된다. 변환될 class 를 찾아 높이, 너비, 태그의 개수, 개발자가 정의한 CSS 파일, 변환방식, 우선순위를 지정할 수 있는 기능을 제공한다.

아래 표는 UI 변환 엔진에서 참조하는 변환 정책 XML 문서에 적용되는 XML 스키마 속성 정

속성 설명

class 변환될 class 명

s_scalableWidth Settop에서 변환될 class 의 너비 s_scalableHeight Settop에서 변환될 class 의

s_scalableCountTag Settop 화면에 표시할 콘텐츠의 개수 s_inputCss Settop에 적용될 개발자가 정의한 css 파일 s_scaledown Settop에 보여질 변환방식 (hidden, page, topdown) p_scalableWidth Phone에서 변환될 class 의 너비

p_scalableHeight Phone에서 변환될 class 의

p_scalableCountTag Phone 화면에 표시할 콘텐츠의 개수

p_inputCss Phone에 적용될 개발자가 정의한 css 파일 p_scaledown Phone에 보여질 변환방식 (hidden, page, topdown)

priority 우선순위

표 75 UI 변환을 위한 속성 상세 정보 보의 상세한 설명을 보여준다.

UI 변환 방식은 div로 구분된 영역을 UI 개발자가 저작 과정에서 제공하는 정보를 바탕으로 Hidden, Top-down, Page의 3가지 방식으로 이루어진다. Hidden은 지정한 영역을 숨기는 변환 방식으로 아래 그림은 Hidden 시나리오를 보여준다.

그림 169 UI 변환을 위한 Hidden 시나리오

해상도와 같은 디스플레이 정보나 단말의 종류에 따라 UI가 단순해져야 하는 경우 원본 UI에서 우선순위가 낮은 영역을 보이지 않도록 변환한다.

Top-down 방식은 기기의 해상도에 맞게 Layout을 XML스키마의 priority의 순서에 따라 레이 아웃이 변경되는 변환방식으로 아래 그림은 Top-down 시나리오를 보여준다.

그림 170 UI 변환을 위한 Top-down 시나리오

특히, 동일한 단말의 경우에서도 가로보기/세로보기 형태로 변경되는 경우, 가로와 세로의 비 율이 달라져서 보이는 영역이 변경되는 경우, UI를 동적으로 변경될 필요가 있는 경우 사용한다.

Page 방식은 콘텐츠를 한 화면에 모두 표시할 수 없을 경우 사용하는 변환방식으로 priority의 순서에 따라 화면이 page 방식으로 표시되며, 아래 그림은 Page 시나리오를 보여준다.

그림 171 UI 변환을 위한 Page 방식

UI 변환 기능은 프로파일과 UI 분석을 통하여 파악된 UI 구조를 단말의 특성, 사용자 환경, 상 황을 고려하여 UI Repository로부터 수신한 템플릿 UI를 단말에 적합한 형태로 변형과 가공을 통해서 사용자 단말에 제공하는 기능을 수행한다. 이 기능을 수행하기위해 XML파서, 화면정보처 리, 템플릿 처리, CSS 동적생성, HTML생성 모듈이 필요하다. 변환의 과정은 다음과 같다.

l XML 데이터와 기기정보를 읽는다.

l XML 데이터 중 class 와 id 찾고 HTML 파일의 class 와 id 를 찾아 매칭되는 함수를 실행시킨다.

l HTML과 CSS가 XML 데이터와 기기정보에 따라 동적으로 생성된다.

l 각 화면에 출력된다.

1) 파서 모듈

변환기능이 수행되기 위해서 메타 데이터 역할을 하는 XML스키마 정보가 필요하다. 이 XML스 키마는 사용자에의해 직접 작성이 되며 Repository에 저장된다. 이 파일은 파서가 읽어들여 스키 마정보를이용해 어떤 방식으로 어떻게 변환할 것인지 결정해주는 역할을 한다.

2) 화면정보 처리 모듈

변환기능이 수행될 때 대부분 서버에서 처리하지만 서버에서 처리하기 힘든부분은 클라이언트 즉 화면에서 처리한다. 변환방식이 page일경우 이벤트를 받아 레이아웃을 숨기고 보이는 이런 과 정이 화면에서 정보처리를 하는 예이다. 또한 화면 회전이 되었을 경우에도 사용된다. 서버로부터 호출하여 정보를 받는 방식보다 빠른 기능을 수행한다.

3) HTML 변환모듈

XML 데이터를 파싱하여 각 기기에 맞는 HTML을 동적으로 생성해주는 기능을 수행한다.

가) HTML 생성기

변환정책파일의 XML 데이터를 파싱하여 각 기기에 맞는 HTML을 동적으로 생성해주는 기능을

변환정책파일의 XML 데이터를 파싱하여 각 기기에 맞는 HTML을 동적으로 생성해주는 기능을

문서에서 R&D연구결과보고서 (페이지 147-161)