KR102131644B1

KR102131644B1 - 전자장치 및 전자장치에서의 웹 플랫폼 동작방법

Info

Publication number: KR102131644B1
Application number: KR1020140001320A
Authority: KR
Inventors: 김창연
Original assignee: 삼성전자주식회사
Priority date: 2014-01-06
Filing date: 2014-01-06
Publication date: 2020-07-08
Also published as: US9830308B2; US20150193401A1; KR20150081638A

Abstract

본 발명은 전자장치 및 전자장치에서의 웹 플랫폼 동작방법에 관한 것으로서, 적어도 하나의 어플리케이션이 설치 및 구동되는 전자장치의 웹 플랫폼 동작방법은, 전자장치에서 웹 어플리케이션을 실행하는 단계와; 웹 어플리케이션에서 표시되는 웹 페이지의 시각적 구성에 대한 트리 구조의 최상위 노드에 대응하는 루트 레이어(root layer)를 구분하는 단계와; 웹 어플리케이션의 실행에 따라 그래픽 메모리에 상주하는 데이터 용량이 감소되도록 루트 레이어를 처리하는 단계와; 트리 구조를 구성하는 노드들로부터 루트 레이어를 제외한 그래픽 레이어(graphic layer)를 실시간으로 렌더링하는 단계를 포함한다. 이에 의하여, 웹 페이지 처리 과정에서 GPU 메모리에 상주하는 데이터의 용량을 감소시켜, 그래픽 처리 성능을 향상시킬 수 있다.

Description

전자장치 및 전자장치에서의 웹 플랫폼 동작방법{ELECTRONIC APPARATUS AND OPERATING METHOD OF WEB-PLATFORM}

본 발명은 전자장치 및 전자장치에서의 웹 플랫폼 동작방법에 관한 것으로서, 보다 상세하게는 하드웨어 가속이 적용된 렌더링 프로세스를 이용하여 웹 플랫폼 동작을 수행하는 장치 및 방법에 관한 것이다.

스마트 폰, 스마트 TV 등을 포함하는 스마트기기로서의 전자장치는 그 기능이 제한되지 않으며, 다양한 어플리케이션의 설치를 통해 기능의 변경 또는 확장이 가능하다. 이러한 기능 확장의 예로서 전자장치에는 웹 컨텐츠(Web Content)를 디스플레이하는 웹 어플리케이션(Web Application)이 설치 및 구동될 수 있다.

웹 어플리케이션이 실행되면, 웹 컨텐츠를 드로윙(drawing)한 2D 렌더링 버퍼가 GPU 텍스처(Texture)에 할당되고, 트리(Tree) 구조에 따른 계층, 즉 레이어(Layer)를 합성하여 매트릭스(Matrix) 연산을 통해 애니메이션 효과를 추가한 뒤 프레임 버퍼를 통해 웹 컨텐츠가 디스플레이된다.

여기서, 트리 구조에서 웹 어플리케이션 실행 시 기본적으로 디스플레이되는 배경에 해당하는 루트 레이어(Root Layer)는 풀 HD 화질(1920x1080)을 기준으로 약 8MB 정도의 GPU 메모리를 점유하며, 다이렉트 렌더링(Direct Rendering) 기술이 적용되지 않은 경우 GPU 메모리뿐 아니라 CPU 메모리에도 데이터가 상주하게 되므로 약 16MB 정도의 메모리 용량이 사용될 수 있다.

따라서, 웹 플랫폼(Web Platform) 동작은 GPU 가속 기술을 사용함에 있어 고정적인 GPU 메모리 점유 즉, 텍스처 사용이 발생되는 구조인데 반해, 웹 어플리리케이션이 구동되는 전자장치는 PC와 비교하여 GPU 대역폭(Bandwidth)이 하드웨어적으로 제약되므로, 장치의 성능이 저하되는 문제점이 발생할 수 있다.

또한, 웹 어플리케이션 실행 시 자바 스크립트(JavaScript) 연산 능력의 한계와 많은 텍스처 사용량 등으로 인해 네이티브 어플리케이션(Native Application)과 비교하여 성능 수준이 낮아지는 문제점이 발생할 수 있다.

본 발명 실시예에 따른 적어도 하나의 어플리케이션이 설치 및 구동되는 전자장치의 웹 플랫폼 동작방법은, 전자장치에서 웹 어플리케이션을 실행하는 단계와; 웹 어플리케이션에서 표시되는 웹 페이지의 시각적 구성에 대한 트리 구조의 최상위 노드에 대응하는 루트 레이어(root layer)를 구분하는 단계와; 웹 어플리케이션의 실행에 따라 그래픽 메모리에 상주하는 데이터 용량이 감소되도록 루트 레이어를 처리하는 단계와; 트리 구조를 구성하는 노드들로부터 루트 레이어를 제외한 그래픽 레이어(graphic layer)를 실시간으로 렌더링하는 단계를 포함할 수 있다.

루트 레이어를 압축 파일로 저장하는 단계를 더 포함하며, 루트 레이어를 처리하는 단계는, 저장된 압축 파일을 로드하여 루트 레이어를 렌더링할 수 있다.

압축 파일의 저장 경로를 지정하는 단계를 더 포함하며, 루트 레이어를 처리하는 단계는, 지정된 저장 경로로부터 압축 파일을 로드하는 단계를 포함할 수 있다.

루트 레이어에 포함된 텍스트를 분리하는 단계를 더 포함하고, 압축 파일로 저장하는 단계는, 분리된 텍스트를 제외한 루트 레이어를 압축하여 저장할 수 있다.

분리된 텍스트는 그래픽 레이어에 포함되어 실시간으로 렌더링될 수 있다.

루트 레이어를 처리하는 단계는, 가변 벡터 그래픽스(SVG) 데이터를 처리할 수 있다.

가변 벡터 그래픽스 데이터를 저장하는 단계와; 벡터 그래픽스 데이터의 저장경로를 지정하는 단계를 더 포함하며, 루트 레이어를 처리하는 단계는, 지정된 저장 경로로부터 가변 벡터 그래픽스 데이터를 로드하는 단계를 포함할 수 있다.

루트 레이어를 처리하는 단계는, 오픈 벡터 그래픽스 (OpenVG) 렌더링 프로세스를 이용할 수 있다.

루트 레이어를 처리하는 단계는, 루트 레이어를 제거할 수 있다.

루트 레이어는 웹 어플리케이션에서 표시되는 웹 페이지의 배경 컨텐츠에 대응할 수 있다.

웹 페이지는 CSS (cascading style sheets), HTML (hypertext mark up language) 및 자바 스크립트 중 어느 하나에 따른 형식의 웹 문서일 수 있다.

한편, 본 발명 실시예에 따른 적어도 하나의 어플리케이션이 설치 및 구동되는 전자장치는, 그래픽 데이터를 처리하는 그래픽 처리부와; 그래픽 데이터 처리에 사용되는 데이터가 저장되는 그래픽 메모리와; 전자장치에서 웹 어플리케이션이 실행되면, 웹 어플리케이션에서 표시되는 웹 페이지의 시각적 구성에 대한 트리 구조의 최상위 노드에 대응하는 루트 레이어(root layer)를 분리하고, 그래픽 메모리에 상주하는 데이터 용량이 감소되도록 루트 레이어를 처리하며, 트리 구조를 구성하는 노드들로부터 루트 레이어를 제외한 그래픽 레이어(graphic layer)를 실시간으로 렌더링하도록 그래픽 처리부를 제어하는 웹 엔진을 포함할 수 있다.

루트 레이어는 압축 파일로 전자장치에 저장되며, 웹 엔진은, 저장된 압축 파일을 로드하여 루트 레이어를 렌더링할 수 있다.

웹 페이지에는 압축 파일의 저장 경로가 지정되며, 웹 엔진은, 지정된 저장 경로로부터 압축 파일을 로드할 수 있다.

루트 레이어에 텍스트가 포함된 경우, 텍스트는 루트 레이어로부터 분리되고, 분리된 텍스트를 제외한 루트 레이어가 압축하여 저장될 수 있다.

분리된 텍스트는 그래픽 레이어에 포함되며, 웹 엔진에 의해 실시간으로 렌더링될 수 있다.

웹 엔진은 루트 레이어를 가변 벡터 그래픽스(SVG) 데이터로서 처리할 수 있다.

가변 벡터 그래픽스 데이터는 전자장치에 저장되고, 웹 페이지에는 벡터 그래픽스 데이터의 저장 경로가 지정되며, 웹 엔진은, 지정된 저장 경로로부터 가변 벡터 그래픽스 데이터를 로드할 수 있다.

웹 엔진은, 오픈 벡터 그래픽스 (OpenVG) 렌더링 프로세스를 이용하여 루트 레이어를 처리할 수 있다.

웹 엔진은, 루트 레이어를 제거할 수 있다.

도 1은 본 발명의 실시예에 의한 전자장치의 구성을 도시한 블록도이며,
도 2는 도 1의 전자장치가 웹 엔진을 이용하여 웹 페이지를 처리하는 구성을 예로 들어 도시한 블록도이며,
도 3 내지 도 6은 일반적인 웹 페이지의 처리 과정을 설명하기 위한 도면이며,
도 7은 본 발명 제1 내지 제4 실시예에 따른 웹 플랫폼 동작 과정을 도시한 흐름도이며,
도 8 및 도 9는 본 발명 제1실시예에 따른 웹 플랫폼 동작을 설명하기 위한 도면이며,
도 10 및 도 11은 본 발명 제2실시예에 따른 웹 플랫폼 동작을 설명하기 위한 도면이며,
도 12 및 도 13은 본 발명 제3실시예에 따른 웹 플랫폼 동작을 설명하기 위한 도면이며,
도 14 및 도 15는 본 발명 제4실시예에 따른 웹 플랫폼 동작을 설명하기 위한 도면이며,
도 16은 본 발명 실시예의 웹 플랫폼 동작에 따른 테스트 결과를 기존과 비교하여 도시한 도면이다.

이하, 첨부된 도면을 참조하여 본 발명의 바람직한 실시예에 관하여 상세히 설명한다.

도 1은 본 발명의 실시예에 의한 전자장치의 구성을 도시한 블록도이고, 도 2는 도 1의 전자장치가 웹 엔진을 이용하여 웹 페이지를 처리하는 구성을 예로 들어 도시한 블록도이다.

본 발명의 전자장치(100)는 스마트 폰(smart phone), 태블릿 PC(tablet PC), 스마트 TV(smart TV) 등의 어플리케이션에 의해 기능 확장이 가능한 다양한 스마트기기로 구현될 수 있다.

본 실시예의 전자장치(100)에는 웹 브라우징을 위한 웹 어플리케이션이 설치 및 구동된다. 여기서, 웹 어플리케이션은 개발자에 의해 개발되어 마켓을 통해 배포되는 것으로, 일반적으로 스마트기기에서 기본적으로 제공되는 네이티브 어플리케이션과 구별될 수 있다.

전자장치(100)는 웹 어플리케이션의 실행에 따라 외부로부터 복수의 웹 페이지를 수신 및 처리하고 디스플레이한다. 웹 페이지를 구성하는 웹 컨텐츠는 복수의 렌더링(rendering) 계층, 즉 레이어(layer)로 분리될 수 있다. 전자장치(100)는 특정 레이어가 렌더링 시에 하드웨어 가속(Hardware Accelerating)되게 하며, 이런 식으로 웹 페이지의 시각적 구성이 디스플레이될 수 있다.

도 1에 도시된 바와 같이, 본 발명 일실시예에 의한 전자장치(100)는 웹 어플리케이션의 실행에 따라 웹 페이지(170)를 분석하고 웹 페이지(170)를 렌더링하기 위한 명령어(command)를 발생시키도록 구성되는 복수의 소프트웨어(S/W) 구성과, 발생된 명령어를 실행하고 전자장치(100)의 사용자에게 웹 페이지(170)를 디스플레이하기 위한 복수의 하드웨어(H/W) 구성을 포함할 수 있다.

전자장치(100)는 웹 어플리케이션 실행에 따라 네트워크(171)를 통해 복수의 웹 페이지(170)를 수신할 수 있다. 네트워크(171)는 LAN(Local Area Networks), WAN(Wide Area Networks), 인트라넷, 익스트라넷, 인터넷, 무선랜, 와이파이(Wi-Fi), 유선 통신 메커니즘, 무선 통신 메커니즘 등에 의해 구현되며, 이를 위해 전자장치(100)에는 다양한 네트워크를 지원하는 유선 및/또는 무선 통신모듈 및 그들의 조합이 마련될 수 있다.

전자장치(100)에서 수신된 웹 페이지(170)는 웹 어플리케이션의 웹 브라우징(Web Browsing)을 위해 웹 엔진(Web Engine)(160)에 제공될 수 있다.

웹 엔진(160)은 도 1에 도시된 바와 같이 하드웨어 가속모듈(161)과, 렌더링 모듈(163)을 포함한다.

렌더링 모듈(163)은 웹 페이지(170)를 구성 요소별로 파싱(parsing)하고 구성 요소들의 시각적 프레젠테이션을 렌더링한다. 렌더링은 하드웨어에 의해 2차원(2D) 및 3차원(3D) 컴퓨터 그래픽을 디스플레이하는데 사용될 수 있는 명령어를 발생시키는 그래픽 API (application programming interface)를 통해 수행될 수 있으며, 그래픽 API는 OpenGL일 수 있다. 또한, 렌더링 시 하드웨어 가속모듈(161)의 제어에 따라 하드웨어가 가속될 수 있다.

초기의 웹 브라우저를 구성하는 웹 플랫폼(Web Platform)에서는 2D 렌더링과 같은 CPU(110)를 이용한 직접 프레임 버퍼 출력 방식을 사용하였으나, 최근의 웹 브라우저 에서는 빠른 GPU(120)를 이용한 3D 렌더링 기술을 도입하여 자주 변경이 되는 부분의 처리나 애니메이션 효과 처리, 웹 게임 기술 등에 활용한다. 이것들은 웹 컨텐츠에서 제어 되며 후술하는 CSS3 Transform, Accelerated Compositor 2D Canvas, WebGL 기술로서 정의되며, 본 실시예에서는 이를 가능하게 하는 웹 엔진 기술의 집합을 Accelerated Compositor 또는 Hardware Accelerated Compositor 라고 한다.

웹 엔진(160)은 운영체제(OS)(150)를 통해 하드웨어 구성과 인터페이스된다. 운영체제(150)는 안드로이드, iOS, 윈도우 등을 포함하며, 하드웨어와 소프트웨어 간의 인터페이싱을 위한 다양한 드라이버를 더 포함할 수 있다.

도 1에 도시된 바와 같이, 전자장치(100)는 하드웨어 구성으로서, 제어부(이하, CPU 라고도 한다)(110), 메인 메모리(이하, CPU 메모리 라고도 한다)(115), 그래픽 처리부(이하, GPU 라고도 한다)(120), 그래픽 메모리(이하, GPU 메모리 라고도 한다)(125), 프레임 버퍼(Frame Buffer)(130) 및 디스플레이부(140)를 포함한다.

제어부(110)는 CPU(central processing unit)와 같은 범용 프로세서로서 구현되며, 그래픽 처리부(120)는 GPU(graphics processing unit)와 같은, 전용 프로세서로 구현될 수 있다. GPU(120)는 상이한 유형의 그래픽 데이터를 처리하는 2차원(2D) 및/또는 3차원(3D) 코어와 같은, 복수개의 코어를 구비할 수 있고, 다양한 종류의 그래픽 리소스를 사용할 수 있다.

GPU(120)의 출력은 디스플레이부(140)에서의 디스플레이를 위해 그래픽 메모리(125)에 저장될 수 있다. 예를 들어, GPU(120)는 그래픽의 처리에 사용되는 정보를 저장하는 전용 메모리로서 그래픽 메모리(125)를 이용할 수 있다. 한편, CPU(110)는 전자장치(100)의 다른 컴포넌트에 의해 공유되는 메인 메모리(115)를 이용할 수 있다.

도 1에 도시된 본 발명 실시예에서는 전자장치(100)가 GPU(120)의 처리에 사용되는 데이터가 저장되는 별도의 그래픽 메모리(125)를 포함하는 경우를 예로 들어 설명하였지만, 본 발명은 이에 한정되는 것이 아니며, 그래픽 메모리(125)가 마련되지 않는 경우 즉, GPU(120)가 메인 메모리(115)를 이용하여 데이터를 저장하는 경우도 포함한다. 또한, 그래픽 메모리(125)는 후술하는 도 2와 같이 GPU(120) 내부에 마련된 캐시(cache) 형태로도 구현될 수 도 있을 것이다.

GPU(120)에서 처리 및 컴포지트(composite)된 웹 페이지는 드로윙(drawing)된 이미지 파일로서 프레임 버퍼(130)로 전송되어 디스플레이부(140)에 표시된다. 디스플레이부(140)의 구현 방식은 한정되지 않으며, 평판 디스플레이(FPD: Flat Pane Display)로서, 예컨대 액정(liquid crystal), 플라즈마(plasma), 발광 다이오드(LED: light-emitting diode), 유기발광 다이오드(OLED: organic light-emitting diode), 면전도 전자총(surface-conduction electron-emitter), 탄소 나노 튜브(carbon nano-tube), 나노 크리스탈(nano-crystal) 등의 다양한 디스플레이 방식으로 구현될 수 있다.

도 2에 도시된 바와 같이, 본 실시예에 따른 전자장치(100)에서, 웹 엔진(160)은 웹 페이지를 그래픽 레이어와 루트 레이어로 분리한다.

도 3 내지 도 6은 일반적인 웹 페이지의 처리 과정을 설명하기 위한 도면이다.

도 3에 도시된 바와 같이, 웹 페이지(170)는 HTML (hypertext mark up language), CSS (cascading style sheets), 자바 스크립트(JavaScript, JS) 등의 형식으로 이루어진 웹 문서로서, 웹 엔진(160)의 하드웨어 가속 합성(Hardware Accelerated Compositing)의 결과로서 웹 컨텐츠 이미지로서 표시된다.

웹 엔진(160)은 복수의 스타일시트에 대한 워크스루(walk through) 프로세스에 의해 웹 페이지(170)를 식별하여 스타일 규칙, 디스플레이 순서 등을 결정하며, 그 결과에 따라 웹 페이지(170)가 디스플레이부(140)에 표시된다. 본 실시예에서는 웹 페이지(170)에 대한 CSS 내의 포매팅(formatting) 명령어를 워크스루하여, 웹 페이지(170)의 디스플레이가 결정될 수 있다. 스타일시트는 CSS 언어로 제공될 수 있다.

CSS3는 HTML5 표준 기술 중 하나로 CSS2나 CSS1에 비해 더욱 정교하고 화려한 화면을 구성할 수 있으며, 애니메이션이 지원된다. 일반적으로 CSS3의 2D/3D 변환(Transform) 기능을 이용하여 컨텐츠 내부의 레이어들을 제어할 수 있는 장점이 있다. 이하에서 설명하는 본 실시예에서는 웹 페이지(170)가 CSS3에 따른 웹 문서로서, 기존 컨텐츠와 호환성을 가지도록 기능이 확장된 경우를 예로 들어 설명하지만, 본 발명은 이에 한정되지 않는다. 예를 들어, 웹페이지가 CSS3에 따른 경우뿐 아니라, 새로운 HTML 태그(tag)나 자바 스크립트를 포함하는 경우도, 본 발명에 포함될 수 있을 것이다.

도 4에 도시된 바와 같이, 웹페이지(170)는 복수의 노드(Node)로 구성된 돔 트리(DOM(Document Object Model) Tree) 구조를 가지며, 이 돔 트리 구조에서 디스플레이되는 시각적(Visual) 구성 즉, 텍스트(text)와 이미지(ing)에 해당하는 노드들을 추출하여 렌더링 오브젝트 트리(Render Object Tree)가 구성된다. 그리고, 좌표공간에 따른 추상적인 렌더링 오브젝트 레이어는 도 4와 같이 렌더 레이어 트리(Render Layer Tree)로 만들어지며, 이를 다시 물리적으로 분리된 버퍼를 사용하는 그래픽 레이어 트리(Graphics Layer Tree)로 구성한다.

그래픽 레이어 트리는 렌더 레이어 트리와 비교하여, 각 노드들이 사용하는 버퍼들이 물리적으로 분리된다. 그래픽 레이어는 웹 브라우저에서 렌더링 시 사용되는 물리적인 버퍼의 구분에 해당하며, 각 버퍼는 z-order가 있어 트리 형태로 합성(Composition)될 수 있다. 그래픽 레이어의 합성 및 렌더링은 렌더링 모듈(163)에 의해 수행되며, 도 5와 같이 OpenGL ES가 사용될 수 있다.

도 5 및 도 6에 도시된 바와 같이, 그래픽 레이어 트리는 루트 레이어(Root layer)(root)와 그래픽 레이어(Graphic Layer)(GL1)를 포함하며, 루트 레이어는 웹 페이지(170)의 가장 기본이 되는 부분, 예를 들어, 배경 컨텐츠가 될 수 있으며, 최상위 노드에 대응한다. 웹 페이지에서 루트 레이어는 무조건적으로 드로윙되는 구성으로, 그 위에 다른 레이어가 덮어져 보이지 않을 때에도 별도의 물리적인 공간 즉, 버퍼가 할당된다. 이러한 루트 레이어는 웹 어플리케이션이 실행되는 동안 대체로 변경되지 않는 경우가 대부분이다.

본 실시예에서 루트 레이어에는 타이틀(Tile)화된 텍스처(Texture)가 할당될 수 있다. 텍스처(T)는 웹 브라우저가 소프트웨어 렌더링을 수행한 결과 또는 이미지 파일을 업로드한 결과 등이 저장되는 GPU(120) 측(side)의 버퍼로서, GPU(120)는 이것들을 합성(Compositing)하여 최종 프레임 버퍼(130)로 출력한다. 따라서, 전체 텍스처 사이즈가 커지게 되면 GPU 메모리(125)의 처리 용량 즉, 대역폭(Bandwidth)이 제한적인 스마트 폰과 같은 모바일기기 또는, 스마트 TV에서는 성능 저하가 발생할 수 있다.

구체적으로, 도 5 및 도 6을 참조하면, 루트 레이어(root)는 GPU(120)의 제어에 따라 그래픽 레이어(GL1)와 합성되어, 프레임 버퍼(130)로 전송되며, 최종 이미지가 디스플레이부(140)에 표시된다. GPU(120)의 합성 과정에서는 텍스처들의 용량이 낮을수록 렌더링 효율이 향상된다. 도 6과 같이, 루트 레이어는 1920x1080 해상도에서 약 8MB의 GPU 메모리(125) 용량을 점유하게 되며, 이는 렌더링 과정에서 GPU(120)와 GPU 메모리(125) 간의 사용 대역폭에 영향을 줄 수 있다. 일반적으로 스마트 TV와 모바일 기기에 사용되는 GPU의 최적의 텍스처 대역폭의 한계가 약 20MB인 것을 감안하면, 8MB는 GPU의 성능에 매우 큰 영향을 주는 요소가 될 수 있다.

이하, 본 발명의 실시예들을 도면을 참조하여 보다 상세하게 설명하기로 한다.

도 7은 본 발명 제1 내지 제4 실시예에 따른 웹 플랫폼 동작 과정을 도시한 흐름도이다.

도 7에 도시된 바와 같이, 전자장치(100)는 웹 어플리케이션의 실행에 따라 외부로부터 웹 페이지(170)를 수신하여, 해당 웹 페이지를 구성하는 CSS/JS 코드를 입력받는다(301).

전자장치(100)는 수신된 웹 페이지(170)를 구성 요소 즉, 레이어 별로 파싱 및 실행한다(302). 여기서, 웹 엔진(160)은 웹 페이지(170)의 시각적 구성에 대한 계층적 트리 구조로서 형성된 그래픽 레이어 트리를 분석하고, 최상위 노드에 대응하는 루트 레이어와, 루트 레이어를 제외한 노드에 대응하는 그래픽 레이어로 구분할 수 있다.

이렇게 구분된 그래픽 레이어는 웹 엔진(160)의 제어에 따라 처리된다(305). 구체적으로, 그래픽 레이어는 외부로부터 웹 페이지(170)를 수신, 처리 및 표시하는 런타임 동안 실시간으로 렌더링된다.

전자장치(100)는 실행된 웹 어플리케이션에서 루트 레이어를 그래픽 레이어와 구분하여 처리하도록 결정된 경우(303), 루트 레이어의 처리방식으로서, 웹 플랫폼 동작의 종류를 식별할 수 있다(304). 여기서, 루트 레이어 처리방식은 해당 웹 어플리케이션의 개발자에 의해 미리 결정된 상태로 배포된다.

그리고, 웹 엔진(160)은 복수의 처리방식의 종류 중 어느 하나에 따라 루트 레이어를 처리한다(306, 307, 308). 여기서, 루트 레이어 처리방식은 압축 루트 레이어(306), 오픈 VG 루트 레이어(307), 루트 레이어 제거(308) 중 어느 하나가 되며, 각각의 처리방식에 대하여는 이하의 제1 내지 제4 실시예와 관련하여 보다 상세하게 설명하기로 한다. 본 발명 제1 내지 제4 실시예 각각에 따른 루트 레이어 처리방식(306, 307, 308)은 GPU 메모리(125)에 상주하는 데이터 용량에 해당하는 사용 대역폭을 감소시키게 된다.

웹 엔진(160)에서 처리된 루트 레이어 및 그래픽 레이어에 대응하는 텍스처들은 GPU(120)의 제어에 따라 합성(composite)되며(509), 프레임 버퍼(130)를 거쳐 디스플레이부(140)에 표시된다(310).

제1실시예, 압축 루트 레이어(Compressed root layer)(306)

도 8 및 도 9는 본 발명 제1실시예에 따른 웹 플랫폼 동작을 설명하기 위한 도면이다.

도 9에 도시된 바와 같이, 본 발명 제1실시예에 따른 전자장치(100)는 루트 레이어(21)를 압축 파일로 미리 저장하고, 웹 어플리케이션이 실행되면 저장된 압축 파일을 로드하여 루트 레이어(21)를 렌더링한다. 여기서, 그래픽 레이어(22)는 런타임 동안 실시간으로 렌더링된다.

본 실시예에서는 사용자에 의해 전자장치(100)에 웹 어플리케이션을 다운로드하도록 선택되면, 해당 웹 어플리케이션의 설치 시에 루트 레이어(21)에 대응하는 압축 파일을 기설정된 위치에 저장할 수 있다. 그리고, 기설치된 웹 어플리케이션이 실행되면, 외부로부터 다운로드되는 웹 페이지(170)의 웹 문서에 따라 기저장된 압축 파일을 로드하여 루트 레이어(21)를 렌더링할 수 있게 된다.

이를 위해, 다운로드되는 웹 페이지(170)를 구성하는 CSS 파일에는 도 8과 같이 압축 파일이 저장된 경로(42)가 미리 지정된다. 구체적으로, CSS 파일은 -stealth-rootlayer-compressed 속성(41)을 추가하고, 압축 파일의 경로(42)를 지정할 수 있게 설계된다.

텍스처 압축(Texture Compression)은 게임이나 기타 그래픽 프로그램에서는 이용되는 것으로 GPU(120)의 텍스처 버퍼에 압축된 텍스처를 할당하여 전체 텍스처 사이즈를 줄이는데 이용되는 기술이며, 인코딩은 런타임에 일어나지 않고 미리 PC나 워크스테이션에서 처리한 후 그 결과물을 런타임에 GPU(120)로 업로드될 수 있다. 디코딩은 GPU(120) 사이드에서 수행되며 GPU 메모리(125)에는 압축된 상태로 상주하기 때문에, GPU(120)와 GPU 메모리(125) 간의 대역폭(Bandwidth) 사용률이 줄어드는 효과가 있으며, GPU(125)의 디코딩 속도도 향상된다.

이러한 텍스처 압축(Texture Compress) 방식에서는 루트 레이어가 기설정된 알고리즘에 따라 미리 압축되어 저장되며, GPU(120)는 지정된 경로로부터 압축 파일을 로드 즉, 업로드하고, 해당 알고리즘을 이용하여 압축 파일을 디코드하게 된다. 따라서, 도 9와 같이 루트 레이어의 압축 파일은 약 1MB의 텍스처를 점유하므로, 기존의 실시간 렌더링에서 8MB를 점유하는 경우와 비교하여 그 용량이 감소되는 것을 확인할 수 있다.

웹 엔진(160)은 CSS 파일의 속성을 분석하여, 기존의 루트 레이어 렌더링 과정을 생략하고, 압축된 텍스처에 의한 렌더링을 수행하게 된다.

제1실시예의 웹 플랫폼 동작은 루트 레이어가 자주 변경되지 않는 경우에 주로 적용되며, 루트 레이어가 변경되는 경우 자바 스크립트로 속성을 변경시켜 새로운 압축 파일로 변경할 수 있다. 또한, CSS의 속성을 추가하는 방식으로 구현되기 때문에, 제1실시예가 적용되지 않는 웹 브라우저에서는 기존처럼 동작할 수 있으므로 컨텐츠 호환성이 보장된다.

제2실시예, 플로팅 레이어 및 압축 루트 레이어(Floating Layer and Compressed root layer)(306)

도 10 및 도 11은 본 발명 제2실시예에 따른 웹 플랫폼 동작을 설명하기 위한 도면이다.

본 발명 제2실시예는 제1실시예와 비교하여 루트 레이어에 포함된 텍스트(24)를 분리하여, 분리된 텍스트를 제외한 루트 레이어(23)를 압축 파일로 미리 저장하는 점에 그 특징이 있다. 따라서, 제2실시예는 도 7의 압축 루트 레이어 방식(306)에 포함된다.

도 11에 도시된 바와 같이, 제2실시예에 따른 전자장치(100)는 텍스트(24)를 제외한 루트 레이어(23)를 압축파일로 미리 저장하고, 웹 어플리케이션이 실행되면 저장된 압축 파일을 로드하여 루트 레이어(23)를 렌더링한다. 분리된 텍스트(24)는 그래픽 레이어(25)에 포함될 수 있다. 텍스트(23)를 포함한 그래픽 레이어(25)는 런타임 동안 실시간으로 렌더링된다.

본 실시예에서는 제1실시예와 마찬가지로 사용자에 의해 전자장치(100)에 웹 어플리케이션을 다운로드하도록 선택되면, 해당 웹 어플리케이션의 설치 시에 루트 레이어(23)에 대응하는 압축 파일을 기설정된 위치에 저장할 수 있다. 그리고, 기설치된 웹 어플리케이션이 실행되면, 외부로부터 다운로드되는 웹 페이지(170)의 웹 문서에 따라 기저장된 압축 파일을 로드하여 루트 레이어(23)를 렌더링할 수 있게 된다.

이를 위해, 다운로드되는 웹 페이지(170)를 구성하는 CSS 파일에는 도 10과 같이 압축 파일이 저장된 경로(44)가 미리 지정된다. 구체적으로, CSS 파일은 -stealth-rootlayer-compressed 속성(43)을 추가하고, 압축 파일의 경로(44)를 지정할 수 있게 설계된다. 또한, 제2실시예에 따른 CSS 파일은 텍스트(24)를 그래픽 레이어(25)와 같이 실시간으로 렌더링하도록 설계된다(45).

이러한, 플로팅 레이어 및 텍스처 압축 방식에서는 텍스트(24)가 제외된 루트 레이어(23)가 기설정된 알고리즘에 따라 미리 압축되어 저장되며, GPU(120)는 지정된 경로로부터 압축 파일을 로드하고, 해당 알고리즘을 이용하여 압축 파일을 디코드하게 된다. 따라서, 도 11과 같이 루트 레이어의 압축 파일은 약 1MB의 텍스처를 점유하므로, 기존의 실시간 렌더링 방식에서 8MB를 점유하는 경우와 비교하여 그 용량이 감소되는 것을 확인할 수 있다.

제2실시예의 웹 플랫폼 동작은 루트 레이어 중에서 자주 변경되는 구성이 포함된 경우, 예를 들어 배경의 텍스트 문구가 자주 변경되는 경우에 주로 적용되며, 제1실시예와 마찬가지로 루트 레이어가 변경되는 경우 자바 스크립트로 속성을 변경시켜 새로운 압축 파일로 변경할 수 있다. 또한, CSS의 속성을 추가하는 방식으로 구현되기 때문에, 제2실시예가 적용되지 않는 웹 브라우저에서는 기존처럼 동작할 수 있으므로 컨텐츠 호환성이 보장된다.

제3실시예, 오픈VG 루트 레이어(OpenVG root layer)(307)

도 12 및 도 13은 본 발명 제3실시예에 따른 웹 플랫폼 동작을 설명하기 위한 도면이다.

본 발명 제3실시예는 제1 및 제2 실시예와 비교하여 압축 루트 레이어방식에서 발생될 수 있는 화질 저하를 보원할 수 있다는 점에 그 특징이 있다.

OpenVG 즉, 가변 벡터 그래픽스(SVG: Scalable Vector Graphics)는 2차원 벡터그래픽을 XML방식으로 데이터를 표시하는 것으로, 이미지 데이터를 사용하는 경우 보다는, 배경의 단색처리나 그라데이션(Gradation)의 처리에 이용하면 GPU(120)를 이용하여 빠르게 드로윙을 처리할 수 있는 기술을 말한다. 따라서, 텍스처 압축 방식과 유사하게 벡터 데이터만 전송되기 때문에 매우 빠른 드로윙이 가능한 장점이 있다.

도 13에 도시된 바와 같이, 제3실시예에 따른 전자장치(100)는 루트 레이어(26)를 SVG 데이터로서 처리하는 것으로, SVG 데이터는 별도로 저장되어 웹 어플리케이션의 실행에 따라 로드되며, 로드된 SVG 데이터에 대응하는 루트 레이어(26)를 오픈 벡터 그래픽스 렌터링 프로세스를 이용하여 렌더링한다. 그래픽 레이어(27)는 런타임 동안 실시간으로 렌더링된다.

이를 위해, 도 12 같이 웹 페이지(170)를 구성하는 CSS 파일에는 SVG 데이터가 저장된 경로(47)가 미리 지정된다. 구체적으로, 개발자는 CSS 파일에서 -stealth-rootlayer-openvg (46)를 선언하고, SVG 파일의 경로(47)를 지정할 수 있게 설계된다. SVG 데이터는 전자장치(100)의 해당 경로에 대응하는 위치에 별도로 저장될 수 있다.

웹 엔진(160)은 CSS 파일의 속성을 분석하여, 기존의 루트 레이어 렌더링 과정을 생략하고, OpenVG 렌더링 프로세스에 의해 루트 레이어에 대한 렌더링을 수행하게 된다.

여기서, 전달되는 SVG 데이터는 도 13과 같이 특성상 극히 적은 용량(약 300KB)으로서, 기존의 실시간 렌더링 방식에서 8MB를 점유하는 경우와 비교하여 사용 대역폭의 감소되는 것을 확인할 수 있다.

제3실시예의 웹 플랫폼 동작은 루트 레이어가 단색 또는 그라데이션을 가지는 배경 컨텐츠인 경우에 주로 적용되며, 배경 자체가 비트맵(Bitmap), JPEG, PNG 등의 이미지 형식인 경우, 제1실시예의 텍스처 압축 방식 보다는 성능이 낮아질 수 있다.

제4실시예, 히든 루트 레이어(Hidden root layer)(308)

도 14 및 도 15는 본 발명 제4실시예에 따른 웹 플랫폼 동작을 설명하기 위한 도면이다.

본 발명 제4실시예는 제1 내지 제3 실시예와 비교하여 최대 성능을 확보할 수 있는 방식으로, 루트 레이어(28)를 렌더링 대상에서 제외하는 점에 그 특징이 있다. 제외된 루트 레이어(28)는 숨김 텍스처(Stealth Texture)로서 처리된다.

도 15에 도시된 바와 같이, 제4실시예에 따른 전자장치(100)는 루트 레이어(268를 제거(remove)하고, 그래픽 레이어(29)만 런타임 동안 실시간으로 렌더링한다.

이를 위해, 도 14과 같이 웹 페이지(170)를 구성하는 CSS 파일에는 -stealth-rootlayer-hidden: true 속성(48)을 부여하여, 개발자가 루트 레이어를 포기하는 결정권을 가질 수 있도록 설계된다. 여기서, 도 15와 같이, 배경에 텍스트가 포함된 경우, CSS 파일은 텍스트를 그래픽 레이어(29)와 같이 실시간으로 렌더링하도록 설계된다(49).

이러한 제4실시예는 웹 페이지(170)의 배경의 투명 또는 흰색일 경우나, 그래픽 레이어 만으로 웹 페이지의 표현이 가능한 경우에 적용될 수 있다. 예를 들어, 컨텐츠의 특성 상 루트 레이어가 아니라 그래픽 레이어에 배경이 존재하는 경우, 즉 그래픽 레이어가 루트 레이어 전체를 커버하는 구조로 이루어진 웹 플랫폼의 경우, 사실상 루트 레이어가 투명 또는 흰색으로 렌더링되어 그 텍스처가 GPU 메모리(125)에 존재하게 되는데, 이는 불필요한 용량을 점유하는 것이 될 수 있다.

따라서, 이 경우, 루트 레이어를 제거하면, 도 15와 같이 루트 레이어(28)에 의한 메모리 점유가 사실상 0으로서, 급격한 성능 향상을 기대할 수 있게 된다. 구체적으로, WebGL이나 Canvas2D의 경우 별도의 캔버스 배경을 가지는 컨텐츠가 대부분이기 때문에, 루트 레이어 제거에 의한 성능 향상을 기대할 수 있다.

다시 도 7을 참조하면, 본 실시예에 따른 전자장치(100)는 CSS 등으로 이루어진 웹 페이지(170)를 파싱 및 실행(302)한 결과로서, Stealth-rootlayer 문구(context)가 존재하는지를 판단한다(303). 그리고, 판단 결과에 따른 Stealth-rootlayer 의 종류 즉, 압축(compressed)(41), openVG(44), 숨김(hidden)(46)를 식별하여, 대응하는 웹 플랫폼 동작(306, 307, 308) 중 어느 하나에 따라 루트 레이어를 처리하게 된다. 여기서, CSS 등으로 이루어진 웹 페이지(170)에 텍스트(text) 문구가 존재하는 경우 이를 식별하여, 해당 텍스트는 그래픽 레이어에 포함시켜 실시간으로 렌더링한다.

그리고, 시각적 구성의 노드들로부터 루트 레이어를 제외한 그래픽 레이어는 실시간으로 렌더링된다.

위와 같이, 웹 엔진(160)에서 처리된 루트 레이어 및 그래픽 레이어에 대응하는 텍스처들은 GPU(120)의 제어에 따라 합성(composite)되며(509), 프레임 버퍼(130)를 거쳐 디스플레이부(140)에 표시된다(310).

도 16은 본 발명 실시예의 웹 플랫폼 동작에 따른 테스트 결과를 기존과 비교하여 도시한 도면이다.

도 16의 테스트 결과는 RM기반 SOC보드에서 CSS3 3D-transform 컨텐츠인 예제 하나를 선정하여 측정한 결과이다. GPU 메모리 대역폭(Memory Bandwidth)은 GPU 레지스터(Register)의 값을 읽어온 것으로, 점유되는 메모리 용량에 해당하기 때문에 값(단위 MB)이 작을수록 성능이 좋다. 또한, 시간당 프레임(Frame Per Second, FPS)는 GPU의 렌더링 시에 각 프레임이 1초에 몇 번 드로윙되는지를 측정한 값으로, 값이 클수록 성능이 좋은 것이다.

따라서, 본 실시예에 따른 루트 레이어를 압축 텍스처(compressed texture), SVG 데이터, 숨김 텍스처(Stealth Texture)로 처리하는 경우가, 기존의 루트 레이어를 런타임에 실시간 렌더링하는 경우(Original)과 비교하여, 처리 성능이 향상됨을 확인할 수 있다.

이와 같이, 본 발명의 실시예는, 웹 어플리케이션의 실행에 따른 웹 페이지 처리 과정에서, GPU 메모리에 상주하는 데이터의 용량이 감소되도록 루트 레이어를 처리하여, 낮은 대역폭으로도 GPU의 그래픽 처리 성능을 향상시킬 수 있는 것으로, 웹 플랫폼 그래픽 퍼포먼스에 있어 약 30% 이상의 개선 효과를 기대할 수 있다.

이에 따라, 웹 어플리케이션의 사용자는 부드럽고 다양한 UX 애니메이션 효과와 네이티브 어플리케이션 수준의 높은 그래픽 효과를 경험할 수 있으며, 사용자는 웹 게임에서 끊김 없이 부드러운 게임 플레이가 가능한 효과가 있다.

웹 어플리케이션 개발자는 GPU 메모리의 성능 개선을 위한 루트 레이어 처리방식에 대한 옵션들의 선택이 가능하므로, 개발자의 의도에 부합하는 다양한 어플리케이션이 개발 및 배포될 수 있다.

이상, 바람직한 실시예를 통하여 본 발명에 관하여 상세히 설명하였으나, 본 발명은 이에 한정되는 것은 아니며 특허청구범위 내에서 다양하게 실시될 수 있다.

100: 전자장치 170: 웹페이지
110: 제어부 115: 메인 메모리
120: 그래픽 처리부 125: 그래픽 메모리
130: 프레임 버퍼 140: 디스플레이부
150: 운영체제 160: 웹 엔진
161: 하드웨어 가속모듈 163: 렌더링 모듈

Claims

전자장치의 동작방법에 있어서,
서버로부터 수신된 웹 페이지의 데이터에 기초하여 상기 웹 페이지의 루트 레이어(root layer)를 압축하는 단계와;
상기 압축된 루트 레이어를 그래픽 메모리에 저장하는 단계와;
상기 수신된 웹 페이지의 데이터에 기초하여 상기 웹 페이지의 그래픽 레이어(graphic layer)를 렌더링하는 단계와;
상기 압축된 루트 레이어를 디코딩하고, 상기 디코딩된 루트 레이어를 렌더링하는 단계와; 및
상기 렌더링된 루트 레이어 및 상기 렌더링된 그래픽 레이어를 합성하는 단계를 포함하는 것을 특징으로 하는 전자장치의 동작방법.
제1항에 있어서,
상기 그래픽 메모리에 저장하는 단계는, 상기 루트 레이어를 압축 파일로 저장하는 단계를 더 포함하며,
상기 루트 레이어를 렌더링하는 단계는, 상기 저장된 압축 파일을 로드하여 상기 루트 레이어를 렌더링하는 단계를 포함하는 것을 특징으로 하는 전자장치의 동작방법.
제2항에 있어서,
상기 압축된 루트 레이어를 압축 파일로 저장하는 단계는, 상기 압축 파일의 저장 경로를 지정하는 단계를 더 포함하며,
상기 루트 레이어를 렌더링하는 단계는, 상기 지정된 저장 경로로부터 상기 압축 파일을 로드하는 단계를 포함하는 것을 특징으로 하는 전자장치의 동작방법.
제2항에 있어서,
상기 루트 레이어에 포함된 텍스트를 분리하는 단계를 더 포함하고,
상기 압축 파일로 저장하는 단계는, 상기 분리된 텍스트를 제외한 상기 루트 레이어를 압축하여 저장하는 단계를 포함하는 것을 특징으로 하는 전자장치의 동작방법.
제4항에 있어서,
상기 분리된 텍스트는 상기 그래픽 레이어에 포함되어 실시간으로 렌더링되는 것을 특징으로 하는 전자장치의 동작방법.
제1항에 있어서,
상기 루트 레이어를 렌더링하는 단계는, 가변 벡터 그래픽스(SVG) 데이터를 처리하는 것을 특징으로 하는 전자장치의 동작방법.
제6항에 있어서,
상기 가변 벡터 그래픽스 데이터를 저장하는 단계와;
상기 벡터 그래픽스 데이터의 저장 경로를 지정하는 단계를 더 포함하며,
상기 루트 레이어를 렌더링하는 단계는, 상기 지정된 저장 경로로부터 상기 가변 벡터 그래픽스 데이터를 로드하는 단계를 포함하는 것을 특징으로 하는 전자장치의 동작방법.
제6항에 있어서,
상기 루트 레이어를 렌더링하는 단계는, 오픈 벡터 그래픽스 (OpenVG) 렌더링 프로세스를 이용하는 것을 특징으로 하는 전자장치의 동작방법.
제1항에 있어서,
상기 루트 레이어를 렌더링하는 단계는, 상기 루트 레이어를 제거하는 것을 특징으로 하는 전자장치의 동작방법.
제1항 내지 제9항 중 어느 한 항에 있어서,
상기 루트 레이어는 웹 어플리케이션에서 표시되는 상기 웹 페이지의 배경 컨텐츠에 대응하는 것을 특징으로 하는 전자장치의 동작방법.
제1항 내지 제9항 중 어느 한 항에 있어서,
상기 웹 페이지는 CSS (cascading style sheets), HTML (hypertext mark up language) 및 자바 스크립트 중 어느 하나에 따른 형식의 웹 문서인 것을 특징으로 하는 전자장치의 동작방법.
전자장치에 있어서,
그래픽 메모리와; 및
서버로부터 수신된 웹 페이지의 데이터에 기초하여 상기 웹 페이지의 루트 레이어(root layer)를 압축하고,
상기 압축된 루트 레이어를 상기 그래픽 메모리에 저장하고,
상기 수신된 웹 페이지의 데이터에 기초하여 상기 웹 페이지의 그래픽 레이어(graphic layer)를 렌더링하고,
상기 압축된 루트 레이어를 디코딩하고, 디코딩된 루트 레이어를 렌더링하고,
상기 렌더링된 루트 레이어 및 상기 렌더링된 그래픽 레이어를 합성하는 제어부를 포함하는 것을 특징으로 하는 전자장치.
제12항에 있어서,
상기 루트 레이어는 압축 파일로 상기 그래픽 메모리에 저장되며,
상기 제어부는, 상기 저장된 압축 파일을 로드하여 상기 루트 레이어를 렌더링하는 것을 특징으로 하는 전자장치.
제13항에 있어서,
상기 웹 페이지에는 상기 압축 파일의 저장 경로가 지정되며,
상기 제어부는, 상기 지정된 저장 경로로부터 상기 압축 파일을 로드하는 것을 특징으로 하는 전자장치.
제13항에 있어서,
상기 루트 레이어에 텍스트가 포함된 경우, 상기 텍스트는 상기 루트 레이어로부터 분리되고, 상기 분리된 텍스트를 제외한 루트 레이어가 압축되어 저장되는 것을 특징으로 하는 전자장치.
제15항에 있어서,
상기 분리된 텍스트는 상기 그래픽 레이어에 포함되며, 상기 제어부에 의해 실시간으로 렌더링되는 것을 특징으로 하는 전자장치.
제12항에 있어서,
상기 제어부는 루트 레이어를 가변 벡터 그래픽스(SVG) 데이터로서 처리하는 것을 특징으로 하는 전자장치.
제17항에 있어서,
가변 벡터 그래픽스 데이터는 상기 그래픽 메모리에 저장되고, 상기 웹 페이지에는 상기 벡터 그래픽스 데이터의 저장 경로가 지정되며,
상기 제어부는, 상기 지정된 저장 경로로부터 상기 가변 벡터 그래픽스 데이터를 로드하는 것을 특징으로 하는 전자장치.
제17항에 있어서,
상기 제어부는, 오픈 벡터 그래픽스 (OpenVG) 렌더링 프로세스를 이용하여 루트 레이어를 처리하는 것을 특징으로 하는 전자장치.
제12항에 있어서,
상기 제어부는, 상기 루트 레이어를 제거하는 것을 특징으로 하는 전자장치.
제12항 내지 제20항 중 어느 한 항에 있어서,
상기 루트 레이어는 웹 어플리케이션에서 표시되는 상기 웹 페이지의 배경 컨텐츠에 대응하는 것을 특징으로 하는 전자장치.
제12항 내지 제20항 중 어느 한 항에 있어서,
상기 웹 페이지는 CSS (cascading style sheets), HTML (hypertext mark up language) 및 자바 스크립트 중 어느 하나에 따른 형식의 웹 문서인 것 특징으로 하는 전자장치.