KR20240062268A

KR20240062268A - Iptv 또는 ott 앱의 홈 메뉴를 위한 그래픽 사용자 인터페이스 제공 방법 및 장치

Info

Publication number: KR20240062268A
Application number: KR1020220141650A
Authority: KR
Inventors: 송대원; 임준순; 유민선; 이유정
Original assignee: 주식회사 엘지유플러스
Filing date: 2022-10-28
Publication date: 2024-05-09

Abstract

본 발명의 일 양태는 IPTV 또는 OTT(Over The Top) 애플리케이션을 위한 그래픽 사용자 인터페이스(GUI : Graphic User Interface) 제공 장치를 개시하고 있다. 상기 장치는, 안드로이드 네이티브 API(Android Native API)를 이용하여 생성되는 안드로이드 UI 레이어(Android UI Layer)를 호출하는 안드로이드 캔버스 시스템, OpenGL(Open Graphics Library)을 이용하여 OpenGL 레이어를 생성하는 OpenGL UI 엔진 및 상기 안드로이드 UI 레이어 상에 상기 OpenGL 레이어를 오버레이하여 상기 애플리케이션의 위한 그래픽 사용자 인터페이스를 렌더링하는 안드로이드 서페이스 플린저(Android Surface Flinger)를 포함한다.

Description

IPTV 또는 OTT 앱의 홈 메뉴를 위한 그래픽 사용자 인터페이스 제공 방법 및 장치{GRAPHIC USER INTERFACE PROVIDING METHOD AND APPARATUS FOR HOME MENU ON IPTV OR OTT APPLICATION}

본 발명은 그래픽 사용자 인터페이스(GUI: Graphic User Interface)에 관한 것으로, 보다 상세하게는, IPTV 또는 OTT 앱을 위한 홈 메뉴의 그래픽 사용자 인터페이스 제공 방법에 관한 것이다.

기존의 IPTV 또는 OTT(Over The Top) 메인화면 사용자 인터페이스(UI: User Interface)의 그래픽은 안드로이드 린백 런처(Android Leanback Launcher)의 구조 안에서 안드로이드 네이티브(native) 그래픽 API를 사용하여 구성된다. 하지만, 네이티브 API만 사용할 때에는 정형화된 그래픽 효과만을 구현할 수밖에 없고, 메뉴 구성의 그래픽 효과에 있어서 그 표현의 한계를 지니고 있어 UI 기획에 대한 자유도가 낮다는 문제점이 존재한다. 그 뿐만 아니라, 정형화된 API를 조합하여 개발자가 자사만의 그래픽 효과를 구현했을 시에 타사에서 리버스 엔지니어링(Reverse Engineering)과 기존 API 조합을 통한 추측을 통해 쉽게 자사의 그래픽 효과를 복제할 수 있다는 문제점 또한 존재한다.

다시 말해, 종래 안드로이드 IPTV/OTT의 린백 런처는 그래픽 UI를 표시하는 안드로이드 캔버스 시스템(Android Canvas System)에 디스플레이를 위해 네이티브 안드로이드 그래픽 API를 사용하는데, 해당 API는 정형화되어 있어 IPTV/OTT의 린백 런처 안에 IPTV/OTT의 메인 메뉴(홈 앱)을 구현시 예상 가능하고 복제가 쉬운 그래픽 UI 효과를 구현할 수밖에 없다는 한계가 있다.

상술한 문제점을 해결하기 위한 본 발명의 일 양태에 따른 목적은 안드로이드 캔버스 시스템 레이어(Android　Canvas System Layer) 이외에 OpenGL에 직접 접근하여 프리미티브한(primitive) 그래픽 효과를 구현함에 따라 UI 기획의 자유도를 높일 수 있는 OpenGL ES 엔진 기반의 레이어를 추가할 수 있는 IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 방법을 제공하는 것이다.

상기한 목적을 달성하기 위한 본 발명의 일 양태에 따른, IPTV 또는 OTT(Over The Top) 애플리케이션을 위한 그래픽 사용자 인터페이스(GUI: Graphic User Interface) 제공 장치는, 안드로이드 네이티브 API(Android Native API)를 이용하여 생성되는 안드로이드 UI 레이어(Android UI Layer)를 호출하는 안드로이드 캔버스 시스템, OpenGL(Open Graphics Library)을 이용하여 OpenGL 레이어를 생성하는 OpenGL UI 엔진 및 상기 안드로이드 UI 레이어 상에 상기 OpenGL 레이어를 오버레이 하여 상기 애플리케이션의 위한 그래픽 사용자 인터페이스를 렌더링하는 안드로이드 서페이스 플린저(Android Surface Flinger)를 포함할 수 있다.

상기 안드로이드 캔버스 시스템은 안드로이드 린백 런처(Android Leanback Launcher)를 기반으로 동작하며, 상기 OpenGL UI 엔진은 상기 안드로이드 린백 런처의 소프트웨어 개발 키트(SDK: Software Development Kit)와 동일한 구조로 구성될 수 있다.

상기 OpenGL UI 엔진은 OpenGL ES(OpenGL Embedded System)에 의해 생성되는 애니메이션 이펙트(animation effect)를 서페이스뷰(SurfaceView) 상에 구현할 수 있다.

상기 OpenGL UI 엔진은 안드로이드 프레임워크(Android Framework) 상의 OpenGL 라이브러리에 의해 구현될 수 있다.

상기 OpenGL 라이브러리는, 이미지 및 텍스트를 OpenGL로 렌더링하고 애니메이션 이펙트를 구현하며, 화면 상위단에서 OpenGL로 렌더링된 이미지를 표현하는 OpenGL 프레임워크 및 상기 OpenGL 라이브러리를 포함하는 렌더링 엔진 라이브러리와 안드로이드 스튜디오 프로그램(Android studio program)을 연결하는 OpenGL 렌더링 엔진을 포함할 수 있다.

상기 OpenGL 프레임워크는, 이미지 및 텍스트를 OpenGL로 렌더링하고, 스크롤 기능을 구현하며, 안드로이드 레이아웃(Android Layout)에 OpenGL의 애니메이션 이펙트를 반영하는 뷰(view) 및 레이아웃(layout) 중 적어도 하나를 포함하는 OpenGL 뷰 컴포넌트, 안드로이드 캔버스를 통해 드로잉된 결과를 활용하는 뷰 및 상기 OpenGL의 애니메이션 이펙트의 저장 및 활용과 연관된 클래스(class) 및 인터페이스(interface) 중 적어도 하나를 포함하는 OpenGL 이펙트 인터페이스 및 화면 최상위에서 OpenGL로 렌더링된 이미지를 표현하기 위한 GL서페이스(GLSurface)를 포함할 수 있다.

상기 OpenGL 뷰 컴포넌트는, 이미지를 OpenGL로 렌더링하고 이미지 변경 애니메이션을 지원하는 뷰(View)인 이미지 뷰(GLImageView), 텍스트를 OpenGL로 렌더링하기 위한 뷰인 텍스트 뷰(GLTextView), 외곽선 글자체를 OpenGL로 렌더링하기 위한 뷰인 스트로크 텍스트 뷰(GLStrokeTextView), 3차원 이펙트, 부드러운 스크롤 및 자동 스크롤 기능을 포함하는 모듈 구현을 위한 뷰인 수평 뷰(GLHorizontalView), 상기 부드러운 스크롤 기능을 적용한 모듈들의 집합인 수직 뷰(GLVerticalGridView) 및 상기 안드로이드 레이아웃(Android Layout)에 3차원 애니메이션 이펙트를 반영한 레이아웃인 GL레이아웃(GLLayout)을 포함할 수 있다.

상기 OpenGL 이펙트 인터페이스는, 상기 안드로이드 캔버스를 통해 드로잉된 결과를 활용하는 뷰들의 인터페이스인 GL베이크드(GLBaked), OpenGL의 3차원 애니메이션을 활용하는 뷰들의 인터페이스인 GL애니메이터블(GLAnimatable), 화면 상의 모듈 단위 이펙트를 지원하는 뷰들의 인터페이스인, GL액티브로우(GLActiveRow), 일정 시간마다 자동으로 스크롤되는 뷰들의 인터페이스인, GL오토플리퍼블(GLAutoFlippable), OpenGL 렌더링 중 구성의 변화를 방지하기 위한 인터페이스인, GL차일드락커(GLChildLocker), 각 포스터의 테두리 그리기를 지원하는 뷰들의 인터페이스인, GL카드바운드(GLCardBound), OpenGL의 3차원 애니메이션 이펙트를 저장하기 위한 클래스인, GL트랜스포머(GLTransformer), 연속적인 스크롤을 부드럽게 처리하기 위한 클래스인, GL컨투어인터폴레이터(GLContouousInterpolator), OpenGL로 렌더링 될 뷰들의 기본 기능을 인터페이스 형태로 지정한 클래스인, GL렌더러블(GLRenderable), 안드로이드와 다른 부드러운 애니메이션 이펙트를 구현하기 위한 클래스인, GL인터폴레이터타입(GLInterpolatorType-), 및 상기 애니매이션 이펙트를 적용하여 화면 전체에 애니메이션이 나타나도록 하기 위한 GL매그니파잉오버레이(GLMagnifyingOverlay)를 포함할 수 있다.

상기 안드로이드 스튜디오 프로그램은, 자바(Java) 및 코틀린(Kotlin) 중 적어도 하나를 포함할 수 있다.

상기한 목적을 달성하기 위한 본 발명의 다른 양태에 따른, IPTV 또는 OTT(Over The Top) 애플리케이션을 위한 그래픽 사용자 인터페이스 제공 방법은, 안드로이드 네이티브 API(Android Native API)를 이용하여 생성되는 안드로이드 UI 레이어(Android UI Layer)를 호출하는 단계, OpenGL(Open Graphics Library)을 이용하여 OpenGL 레이어를 생성하는 단계 및 상기 안드로이드 UI 레이어 상에 상기 OpenGL 레이어를 오버레이하여 상기 애플리케이션의 위한 그래픽 사용자 인터페이스를 렌더링하는 단계를 포함할 수 있다.

본 발명의 IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 방법에 따르면, 좋은 UI의 주요 조건인 직관성, 일관성, 효율성을 갖춘 UI로 사용자가 쉽고, 익숙하며, 사용이 편리하게 구성할 수 있는, 기획 자유도가 높은 그래픽 UI 효과 개발을 위한 API를 제공할 수 있다.

추가적으로, 종래 안드로이드 린백 런처에서 그래픽 API를 사용하는 구조와 유사한 구조로 UI 앱을 구성하여 개발자가 간단한 설정만으로 손쉽게 API를 사용할 수 있게 하는 효과가 있다.

도 1은 기본 안드로이드 UI 그래픽 구조를 나타낸 개념도,
도 2는 본 발명의 일 실시예에 따른, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 방법이 적용되는 UI 그래픽 구조를 나타낸 개념도,
도 3은 본 발명의 일 실시예에 따른, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 생성 방법에 따라 안드로이드 UI 레이어 상에 OpenGL 레이어가 오버레이되는 구조를 나타낸 개념도,
도 4는 본 발명의 일 실시예에 따른, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 방법에 따른 스마트UX(SmartUX) 앱 구조를 나타낸 블록도,
도 5는 본 발명의 일 실시예에 따른, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 방법에 따른 앱 UI 렌더링 구조를 나타낸 블록도,
도 6은 도 4의 OpenGL 프레임워크와 OpenGL 렌더링 엔진의 구조를 보다 상세하게 나타낸 상세블록도,
도 7은 도 6의 개별 클래스 및 인터페이스의 기능을 설명하기 위한 테이블이다.

본 발명은 다양한 변경을 가할 수 있고 여러 가지 실시예를 가질 수 있는 바, 특정 실시예들을 도면에 예시하고 상세하게 설명하고자 한다.

그러나, 이는 본 발명을 특정한 실시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다.

제 1, 제 2 등의 용어는 다양한 구성요소들을 설명하는데 사용될 수 있지만, 상기 구성요소들은 상기 용어들에 의해 한정되어서는 안 된다. 상기 용어들은 하나의 구성요소를 다른 구성요소로부터 구별하는 목적으로만 사용된다. 예를 들어, 본 발명의 권리 범위를 벗어나지 않으면서 제 1 구성요소는 제 2 구성요소로 명명될 수 있고, 유사하게 제 2 구성요소도 제 1 구성요소로 명명될 수 있다. 및/또는 이라는 용어는 복수의 관련된 기재된 항목들의 조합 또는 복수의 관련된 기재된 항목들 중의 어느 항목을 포함한다.

어떤 구성요소가 다른 구성요소에 "연결되어" 있다거나 "접속되어" 있다고 언급된 때에는, 그 다른 구성요소에 직접적으로 연결되어 있거나 또는 접속되어 있을 수도 있지만, 중간에 다른 구성요소가 존재할 수도 있다고 이해되어야 할 것이다. 반면에, 어떤 구성요소가 다른 구성요소에 "직접 연결되어" 있다거나 "직접 접속되어" 있다고 언급된 때에는, 중간에 다른 구성요소가 존재하지 않는 것으로 이해되어야 할 것이다.

본 출원에서 사용한 용어는 단지 특정한 실시예를 설명하기 위해 사용된 것으로, 본 발명을 한정하려는 의도가 아니다. 단수의 표현은 문맥상 명백하게 다르게 뜻하지 않는 한, 복수의 표현을 포함한다. 본 출원에서, "포함하다" 또는 "가지다" 등의 용어는 명세서상에 기재된 특징, 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것이 존재함을 지정하려는 것이지, 하나 또는 그 이상의 다른 특징들이나 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.

다르게 정의되지 않는 한, 기술적이거나 과학적인 용어를 포함해서 여기서 사용되는 모든 용어들은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에 의해 일반적으로 이해되는 것과 동일한 의미를 가지고 있다. 일반적으로 사용되는 사전에 정의되어 있는 것과 같은 용어들은 관련 기술의 문맥상 가지는 의미와 일치하는 의미를 가진 것으로 해석되어야 하며, 본 출원에서 명백하게 정의하지 않는 한, 이상적이거나 과도하게 형식적인 의미로 해석되지 않는다.

이하, 첨부한 도면들을 참조하여, 본 발명의 바람직한 실시예를 보다 상세하게 설명하고자 한다. 본 발명을 설명함에 있어 전체적인 이해를 용이하게 하기 위하여 도면상의 동일한 구성요소에 대해서는 동일한 참조부호를 사용하고 동일한 구성요소에 대해서 중복된 설명은 생략한다.

도 1은 기본 안드로이드 UI 그래픽 구조를 나타낸 개념도이다. 도 1에 도시된 바와 같이, 장치는 안드로이드 린백 패키지(110: Android Leanback Package), 안드로이드 캔버스 시스템(120) 및 안드로이드 서페이스 플린저(140: Android Surface Flinger)를 포함할 수 있다.

도 1의 좌측 도면을 참조하면, 기본적으로 안드로이드 기반의 IPTV 또는 OTT(Over The Top)와 연관된 애플리케이션(application)(이하, "앱"이라 부를 수 있음)에서는, 안드로이드 린백 패키지(110)를 이용하여 IPTV 또는 OTT의 메뉴 화면을 구성할 수 있다. 이러한 IPTV 또는 OTT 메뉴 화면은 전자기기에서 구현되는 메뉴 화면을 포함할 수 있다. 이는 홈 메뉴 화면 또는 메인 메뉴 화면일 수 있다. 여기서, 전자기기는, 스마트폰과 같은 모바일 단말, 태블릿(tablet), TV, 셋톱박스 및 이들의 조합을 포함함 수 있다. 이하, 이를 장치라고 부를 수 있다.

개발자는 안드로이드 린백 패키지(110)를 실행하여, 안드로이드 캔버스 시스템(120)을 이용할 수 있다. 안드로이드 캔버스 시스템(120)은 안드로이드 네이티브 그래픽 API(Android native graphic API)를 사용하여 앱 메뉴 화면을 구성하도록 지원하는 시스템이다. 안드로이드 캔버스 시스템(120)은 기본적인 안드로이드 레이아웃 UI를 구성하고, 그 위에 개발자가 다양한 뷰 트리(view tree)를 임의로 배열하는 방식으로 안드로이드 캔버스를 구성하도록 지원한다. 여기에 포함되는 뷰 트리는, 가장 기본이 되는 뷰 루트(ViewRoot), 수직 방향 그리드의 뷰인 버티컬그리드뷰(VerticalGridView), 수평 방향 그리드의 뷰인 호리존탈그리드뷰(HotizontalGridView), 이 수직 및 수평 방향 그리드 기반의 적어도 하나의 레이아웃들, 그리고 상기 적어도 하나의 레이아웃에 들어가는 텍스트뷰(TextView), 이미지뷰(ImageView) 등이 포함될 수 있다.

장치는 안드로이드 서페이스 플린저(140)를 포함한다. 안드로이드 서페이스 플린저(140)는 안드로이드 캔버스 시스템(120)을 통해 생성된 데이터를 통합하여 출력측(예를 들어, 디스플레이 패널)로 전달하는 기능을 수행한다. 보다 구체적으로, 안드로이드 서페이스 플린저(140)는 서페이스(surface) 데이터를 한데 모아 프레임 버퍼(frame buffer)(미도시)를 업데이트한다. 이때, 2D 서페이스와 3D 서페이스가 존재한다면, 이러한 여러 응용들의 서페이스를 결합할 수 있다.

도 2는 본 발명의 일 실시예에 따른, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 방법이 적용되는 UI 그래픽 구조를 나타낸 개념도이다.

도 2를 참조하면, 장치는 도 1의 UI 그래픽 구조보다 UI 엔진(224)이 더 추가되어 구성될 수 있다. 이는 OpenGL UI 엔진이라고 부를 수 있다. 즉, 이는 기본적인 안드로이드 기반의 시스템 구성들(210, 220, 240)을 그대로 유지하면서, 그와 연계하여 원활하게 동작가능한 UI 엔진(224)을 탑재하여 구성됨을 의미한다.

UI 엔진(230)은 상세 그래픽 구현이 가능한 OpenGL에서 직접 UI를 제작 가능하도록 지원한다. 즉, UI 엔진(230)은 OpenGL에 접근 가능한 UI 그래픽 구조를 갖는다. 여기서, OpenGL은 2차원 및 3차원 그래픽스 표준 API 규격으로, 윈도우, 리눅스 등 다양한 운영체계에서 사용가능한 그래픽 라이브러리다. 최근 OpenGL은 4.6 버전까지 나왔고, 그의 임베디드 버전인 OpenGL ES(Embedded System)는 3.2 버전까지 나와있다. 도 2의 실시예에서는, OpenGL ES 3.0 버전을 기반으로 설명한다. 다만, 본 발명은 OpenGL의 버전을 제한하지 않는다. 1.0, 2.0, 4.0, ES 1.0, 2.0 버전 뿐만 아니라 미래 버전의 OpenGL도 본 발명의 일 실시예에 따른 UI 그래픽 구조에 적용될 수 있음은 본 발명이 속하는 기술분야의 통상의 기술자에게는 자명한 것일 것이다.

본 발명의 실시예에 따르면, UI 엔진(230)은 ES 3.0 렌더링 엔진(232)과 EGL 서페이스(234)를 포함한다. EGL 서페이스(234)는 EGL 기반의 서페이스이다. 여기서, EGL은 OpenGL 또는 OpenGL ES와 안드로이드 캔버스 시스템(220) 간의 인터페이스이다. 그리고, EGL 서페이스(234)는 OpenGL ES의 드로잉(drawing) 작업을 위한 서페이스를 의미할 수 있다. 즉, EGL 서페이스(234)는 OpenGL이 드로잉 할 수 있는 공간일 수 있다. 그리고, 장치는 상기 EGL서페이스(234) 상에 컨텍스트(Context)를 생성할 수 있다. 컨텍스트는 모든 OpenGL 상태 정보를 포함한 데이터 구조체(예를 들어, 쉐이더 프로그램(shader program))일 수 있다. EGL은 서페이스와 컨텍스트를 연결해주고, OpenGL ES에 제공하여 이를 사용할 수 있도록 한다. 즉, 개발자는 UI 엔진(230)을 통해 EGL이 만든 공간에 자신이 구현하고자 하는 메뉴 화면을 자유롭게 드로잉 할 수 있다.

ES 3.0 렌더링 엔진(232)은 EGL 서페이스(234) 상에 드로잉 된 데이터의 렌더링을 지원하는 엔진이다. 즉, EGL 서페이스(234) 상에 OpenGL을 기반으로 드로잉 된 데이터는 렌더링 엔진(232)을 통해 렌더링 된다.

위와 같은 구성을 포함하는 UI 엔진(230)을 이용하여, 개발자는 기본적인 안드로이드 캔버스 시스템(220)에서 할 수 없었던 차별적 UI를 제작할 수 있다. 또한, 이렇게 제작된 UI 이펙트(effect)의 구현 내용은 타사에서 리버스 엔지니어링함에 의해 쉽게 확인해볼 수 없도록 라이브러리화 되는 것이 바람직하다.

또한, UI 엔진(230)은 기본적인 안드로이드 린백 런처의 소프트웨어 개발 키트(SDK: Software Development Kit)와 동일한 구조로 구조화 하여 안드로이드 IPTV에서 개발자가 쉽게 사용하도록 지원한다.

한편, 안드로이드 서페이스 플린저(240)는 기본적인 안드로이드 캔버스 시스템(220)을 통해 생성된 안드로이드 UI 레이어와 UI 엔진(230)을 통해 생성된 OpenGL 기반의 레이어를 합성하여 한 화면으로 렌더링 되도록 제어한다.

위와 같은 UI 그래픽 구조는 컴퓨팅 장치(예를 들어, 스마트폰 또는 셋톱 박스 등을 포함하는 전자기기)의 프로세서에 의해 실행될 수 있다. 이는 애플리케이션의 형태로 장치 내에 설치되어 실행될 수 있다.

도 3은 본 발명의 일 실시예에 따른, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 방법에 따라 안드로이드 UI 레이어 상에 OpenGL 레이어가 오버레이 되는 구조를 나타낸 개념도이다.

도 3을 참조하면, 장치는 먼저, 안드로이드 캔버스 시스템(220)을 이용하여 안드로이드 UI 레이어(310)를 생성한다. 안드로이드에서는 UI를 렌더링하기 위한 여러 개념들이 있는데, 여기에는 윈도우(window), 서페이스(surface), 캔버스(canvas), 그리고 뷰(view)가 있다. 각 요소들의 크기는 윈도우가 가장 크고, 그 다음, 서페이스, 캔버스, 뷰 순이다. 안드로이드 캔버스 시스템(220)은 기본적으로 캔버스를 제공한다. 캔버스는 실제 UI를 그리기 위한 공간으로 비트맵이 그려지는 공간이다.

안드로이드 UI 레이어(310)(즉, 캔버스)를 형성하고 나면, 장치는 UI 엔진(230)을 이용하여 OpenGL 기반의 OpenGL 레이어(320)를 생성한다. OpenGL 레이어(320)는 GL서페이스뷰(GLSurfaceView)로 형성될 수 있다. 여기서, 뷰(View)는 윈도우 내부의 대화식 UI 요소이다. 윈도우에는 단일 뷰 계층 구조가 연결되어 있으며, 이를 통해 모든 윈도우의 동작을 제공한다. 윈도우가 다시 뭔가를 그려야 할 때마다 윈도우의 서페이스(Surface)에서 작업이 수행된다. 여기서 서페이스뷰(SurfaceView)는 기존의 뷰를 상속받으며, 그래픽 처리가 빠른 뷰다. 서페이스뷰(SurfaceView)는 캔버스가 아닌 서페이스(즉, 가상 메모리 화면)에 드로잉을 하고, 드로잉 된 서페이스(Surface)를 화면에 뿌리기 때문에, 높은 반응성이 필요한 UI 작업이 필요한 경우 사용하기 적합하다. 특히, GL서페이스뷰(GLSurfaceView)는 백스레드에서 UI를 업데이트하는 뷰 타입이다. 이를 통해, 빠른 속도로 OpenGL ES를 사용하여 뷰 콘텐츠를 생성할 수 있다. 또한, OpenGL ES에 의해 드로잉 되는 애니메이션 이펙트(animation effect)를 구현할 수 있다.

위와 같은 방법으로, 두 개의 레이어(310, 320)가 생성되고 나면, 안드로이드 서페이스 플린저(240)는 두 레이어를 합성하여 최종 메뉴 화면을 생성한다.

이러한 전체적인 과정을 통해, 기본적인 안드로이드 린백 기반의 레이아웃을 유지하면서 다양한 OpenGL ES 기반의 애니메니션 효과의 개발이 가능하다.

도 4는 본 발명의 일 실시예에 따른, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 방법에 따른 스마트UX(SmartUX) 앱 구조를 나타낸 블록도 이다.

도 4를 참조하면, 장치는 안드로이드 프레임워크(410) 상에서 구동한다. 기본적으로, 안드로이드 프레임워크(410)를 기반으로 하는 라이브러리(420)가 존재하고, 애플리케이션(430)은 이러한 라이브러리(420)를 기반으로 동작한다.

애플리케이션(430)에는 VOD 홈이 포함된다. 여기에는, 메인 홈, VOD 상세 페이지, 시작 홈, 마이메뉴, 구매 페이지, VOD 카테고리 등의 다양한 상세 페이지가 존재할 수 있다.

라이브러리(420)에는 IPTV(또는 OTT) 셋탑박스 또는 IPTV와 스마트폰을 연결하는 기본 프레임워크가 존재한다. 기본 프레임워크(421)는 스마트UX와 연관된 프레임워크로 린백 프로그램을 기반으로 한다. 그리고, 본 발명의 실시예에 따르면, 라이브러리(420)는 OpenGL 프레임워크(422)(OpenGL 라이브러리라고 부를 수 있음), OpenGL 이펙트 인터페이스(424: OpenGL Effect Interface), OpenGL 렌더링 엔진(426: OpenGL Rendering Engine)을 포함할 수 있다. 다른 예에서, OpenGL 이펙트 인터페이스(424)는 OpenGL 프레임워크(422)에 포함될 수도 있다(도 6 참조).

본 발명의 일 실시예에 따르면, UI 엔진(230)은 OpenGL 프레임워크(422)를 기반으로 동작한다. OpenGL 프레임워크(422)는 안드로이드 프레임워크(410) 상에서 동작하며, 기본 프레임워크(421)와 연동가능하게 구성된다. 특히, OpenGL 프레임워크(422)는, 전술한 바와 같이, 린백 런처의 SDK와 동일하게 소프트웨어를 구조화한 형태를 갖는다. OpenGL 프레임워크(422)에는 GL서페이스(GLSurface)가 포함되고, 그 밖에 다양한 뷰가 포함된다. 상기 다양한 뷰에 대한 설명은 도 6 및 도 7을 참조하여 보다 구체적으로 서술한다.

한편, OpenGL 이펙트 인터페이스(424)는 안드로이드 캔버스를 통해 드로잉 된 결과를 표현하고, OpenGL의 애니메이션 이펙트를 표현하는 인터페이스이다.

또한, OpenGL 렌더링 엔진(426)은 렌더링 엔진 라이브러리와 안드로이드 스튜디오 프로그램(Android studio program)을 연결한다. 여기서, 안드로이드 스튜디오 프로그램은 자바(Java) 및/또는 코틀린(Kotlin) 프로그램을 포함할 수 있다.

도 5는 본 발명의 일 실시예에 따른, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 방법에 따른 앱 UI 렌더링 구조를 나타낸 블록도 이다.

도 5를 참조하면, 본 발명의 일 실시예에 따른 앱 UI 렌더링 구조는 도 5의 좌측의 기본적인 앱 UI 렌더링 구조에, OpenGL 기반의 서페이스, 수직 그리드 뷰(VerticalGridView), 수평 그리드 뷰(HorizontalGridView)를 더 포함하며, 이를 기반으로 생성된 레이아웃들과, 그 안에 들어갈 텍스트 뷰(GLTextView) 및 이미지 뷰(ImageView)를 더 포함하는 구조를 가질 수 있다. 이들 중, 수직 그리드 뷰(VerticalGridView) 및 수평 그리드 뷰(HorizontalGridView)는 사용자 경험을 개선하기 위한 것이고, 서페이스, 텍스트 뷰(GLTextView) 및 이미지 뷰(ImageView)는 시각적 경험을 개선하기 위한 것이다. 이들, 서페이스, 수직 그리드 뷰(VerticalGridView), 수평 그리드 뷰(HorizontalGridView), 텍스트 뷰(GLTextView) 및 이미지 뷰(ImageView)는 OpenGL로 접근 가능하며, 이들을 통해 보다 다양한 뷰를 포함하는 IPTV 또는 OTT 홈 화면 구조가 구성될 수 있다.

이와 같이 구성된 앱 UI 렌더링을 위한 다양한 뷰들은 OpenGL 이펙트 인터페이스(424) 및 OpenGL 렌더링 엔진(426)을 통해 렌더링 된다. 즉, OpenGL 이펙트 인터페이스(424) 및 OpenGL 렌더링 엔진(426) 또한, 시각적 경험을 개선하기 위한 구성이라고 볼 수 있다.

도 6은 도 4의 OpenGL 프레임워크와 OpenGL 렌더링 엔진의 구조를 보다 상세하게 나타낸 상세 블록도이고, 도 7은 도 6의 개별 클래스 및 인터페이스의 기능을 설명하기 위한 테이블이다.

도 6을 참조하면, OpenGL 프레임워크(610)는 OpenGL 뷰 컴포넌트(612: OpenGL View Component), OpenGL 이펙트 인터페이스(614) 및 GL서페이스(616: GLSurface)를 포함한다.

OpenGL 뷰 컴포넌트(612)는 이미지 및 텍스트를 OpenGL로 렌더링하고 스크롤 기능을 구현하며, 안드로이드 레이아웃(Android Layout)에 애니메이션 이펙트를 반영하는 기능을 수행한다. OpenGL 뷰 컴포넌트(612)는 이미지 뷰(GLImageView), 텍스트 뷰(GLTextView), 스트로크 텍스트 뷰(GLStrokeTextView), 수평 뷰(GLHorizontalView), 수직 뷰(GLVerticalView) 및 레이아웃(GL---Layout)을 포함한다.

도 7을 참조하면, 이미지 뷰(GLImageView)는, 이미지를 OpenGL로 렌더링하고 이미지 변경 애니메이션을 지원하는 뷰다. 텍스트 뷰(GLTextView)는, 텍스트를 OpenGL로 렌더링하기 위한 뷰다. 스트로크 텍스트 뷰(GLStrokeTextView)는 외곽선 글자체를 OpenGL로 렌더링하기 위한 뷰다. 이는 탑-텐 모듈(top-ten module)에 사용되는 것이 바람직하다. 수평 뷰(GLHorizontalView)는 3차원 효과, 부드러운 스크롤, 자동 스크롤 기능을 포함하는 모듈 구현을 위한 뷰다. 수직 뷰(GLVerticalView)는, 부드러운 스크롤 기능을 적용한 모듈들의 집합이다. 마지막으로, 레이아웃(GL---Layout)은 기본적인 안드로이드 레이아웃(Android Layout)에 3차원 애니메이션 효과를 반영한 레이아웃이다. 여기에는, 기본 레이아웃(ConstraintLayout), 프레임 레이아웃(FrameLayout), 그리드 레이아웃(GridLayout), 테이블 레이아웃(TableLayout), 선형 레이아웃(LinearLayout) 등 다양한 레이아웃이 포함될 수 있다.

다시 도 6으로 돌아가서, OpenGL 이펙트 인터페이스(614)는 안드로이드 캔버스를 통해 드로잉 된 결과를 표현하고 OpenGL의 애니메이션 이펙트를 표현하는 인터페이스이다. OpenGL 이펙트 인터페이스(614)는, GL베이크드(GLBaked), GL애니메이터블(GLAnimatable), GL액티브로우(GLActiveRow), GL오토플리퍼블(GLAutoFlippable), GL차일드락커(GLChildLocker), GL카드바운드(GLCardBound), GL트랜스포머(GLTransformer), GL컨투어인터폴레이터(GLContouousInterpolator), GL렌더러블(GLRenderable), GL인터폴레이터타입(GLInterpolatorType-) 및 GL매그니파잉오버레이(GLMagnifyingOverlay)를 포함할 수 있다.

도 7을 참조하면, GL베이크드(GLBaked)는 안드로이드 캔버스를 통해 드로잉 된 결과를 활용하는 뷰들의 인터페이스다. 여기에는 텍스트 등이 포함될 수 있다. GL애니메이터블(GLAnimatable)은 OpenGL의 3차원 애니메이션을 활용하는 뷰들의 인터페이스다. GL액티브로우(GLActiveRow)는 화면 상의 모듈 단위 효과를 지원하는 뷰들(예를 들어, 수평그리드 뷰(HorizontalGridView))의 인터페이스다.

GL오토플리퍼블(GLAutoFlippable)는 일정 시간마다 자동으로 스크롤 되는 뷰들의 인터페이스다. GL차일드락커(GLChildLocker)는 OpenGL 렌더링 중 구성의 변화를 방지하기 위한 인터페이스이다. GL카드바운드(GLCardBound)는 각 포스터의 테두리 그리기를 지원하는 뷰들의 인터페이스다. GL트랜스포머(GLTransformer)는 OpenGL의 3차원 애니메이션 효과를 저장하기 위한 클래스이다. GL컨투어인터폴레이터(GLContouousInterpolator)는 연속적인 스크롤을 부드럽게 처리하기 위한 클래스이다. GL렌더러블(GLRenderable)은 OpenGL로 렌더링 될 뷰들의 기본 기능을 인터페이스 형태로 지정한 한 클래스이다. GL인터폴레이터타입(GLInterplatorType-)은 기본적인 안드로이드와 다른 부드러운 애니메이션 효과를 구현하기 위한 클래스다. 마지막으로, GL매그니파잉오버레이(GLMagnifyingOverlay)은 진입 시 등 이펙트를 적용하여 화면 전체에 애니메이션이 나타나도록 하기 위한 기능을 제공한다.

다시 도 6으로 돌아가서, GL서페이스(616: GLSurface)는 화면 최상위에서 OpenGL로 렌더링된 이미지를 표현한다.

그리고, OpenGL 렌더링 엔진(620)은, 전술한 바와 같이, 렌더링 엔진 라이브러리와 자바/코틀린 프로그램을 연결하는 기능을 수행한다.

마지막으로, GLEngine.so(630)는 OpenGL 렌더링과 이펙트를 지원하는 C/C++ 라이브러리이다.

이상에서 설명된 시스템 또는 장치는 하드웨어 구성요소, 소프트웨어 구성요소, 및/또는 하드웨어 구성요소 및 소프트웨어 구성요소의 조합으로 구현될 수 있다. 예를 들어, 실시예들에서 설명된 시스템, 장치 및 구성요소는, 예를 들어, 프로세서, 콘트롤러, ALU(arithmetic logic unit), 디지털 신호 프로세서(digital signal processor), 마이크로컴퓨터, FPA(field programmable array), PLU(programmable logic unit), 마이크로프로세서, 또는 명령(instruction)을 실행하고 응답할 수 있는 다른 어떠한 장치와 같이, 하나 이상의 범용 컴퓨터 또는 특수 목적 컴퓨터를 이용하여 구현될 수 있다. 처리 장치는 운영 체제(OS) 및 상기 운영 체제 상에서 수행되는 하나 이상의 소프트웨어 애플리케이션을 수행할 수 있다. 또한, 처리 장치는 소프트웨어의 실행에 응답하여, 데이터를 접근, 저장, 조작, 처리 및 생성할 수도 있다. 이해의 편의를 위하여, 처리 장치는 하나가 사용되는 것으로 설명된 경우도 있지만, 해당 기술분야에서 통상의 지식을 가진 자는, 처리 장치가 복수 개의 처리요소(processing element) 및/또는 복수 유형의 처리 요소를 포함할 수 있음을 알 수 있다. 예를 들어, 처리 장치는 복수 개의 프로세서 또는 하나의 프로세서 및 하나의 콘트롤러를 포함할 수 있다. 또한, 병렬 프로세서(parallel processor)와 같은, 다른 처리 구성(processing configuration)도 가능하다.

소프트웨어는 컴퓨터 프로그램(computer program), 코드(code), 명령(instruction), 또는 이들 중 하나 이상의 조합을 포함할 수 있으며, 원하는 대로 동작하도록 처리 장치를 구성하거나 독립적으로 또는 결합적으로(collectively) 처리 장치를 명령할 수 있다. 소프트웨어 및/또는 데이터는, 처리 장치에 의하여 해석되거나 처리 장치에 명령 또는 데이터를 제공하기 위하여, 어떤 유형의 기계, 구성요소(component), 물리적 장치, 가상 장치(virtual equipment), 컴퓨터 저장 매체 또는 장치, 또는 전송되는 신호 파(signal wave)에 영구적으로, 또는 일시적으로 구체화(embody)될 수 있다. 소프트웨어는 네트워크로 연결된 컴퓨터 시스템 상에 분산되어서, 분산된 방법으로 저장되거나 실행될 수도 있다. 소프트웨어 및 데이터는 하나 이상의 컴퓨터 판독 가능 기록 매체에 저장될 수 있다.

실시예들에 따른 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 실시예를 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드 뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다. 상기된 하드웨어 장치는 실시예의 동작을 수행하기 위해 하나 이상의 소프트웨어 모듈로서 작동하도록 구성될 수 있으며, 그 역도 마찬가지이다.

이상과 같이 실시예들이 비록 한정된 실시예와 도면에 의해 설명되었으나, 해당 기술분야에서 통상의 지식을 가진 자라면 상기의 기재로부터 다양한 수정 및 변형이 가능하다. 예를 들어, 설명된 기술들이 설명된 방법과 다른 순서로 수행되거나, 및/또는 설명된 시스템, 구조, 장치, 회로 등의 구성요소들이 설명된 방법과 다른 형태로 결합 또는 조합되거나, 다른 구성요소 또는 균등물에 의하여 대치되거나 치환되더라도 적절한 결과가 달성될 수 있다.

그러므로, 다른 구현들, 다른 실시예들 및 특허청구범위와 균등한 것들도 후술하는 특허청구범위의 범위에 속한다.

Claims

IPTV 또는 OTT(Over The Top) 애플리케이션을 위한 그래픽 사용자 인터페이스(GUI : Graphic User Interface) 제공 장치에 있어서,
안드로이드 네이티브 API(Android Native API)를 이용하여 생성되는 안드로이드 UI 레이어(Android UI Layer)를 호출하는 안드로이드 캔버스 시스템;
OpenGL(Open Graphics Library)을 이용하여 OpenGL 레이어를 생성하는 OpenGL UI 엔진; 및
상기 안드로이드 UI 레이어 상에 상기 OpenGL 레이어를 오버레이하여 상기 애플리케이션의 위한 그래픽 사용자 인터페이스를 렌더링하는 안드로이드 서페이스 플린저(Android Surface Flinger)를 포함하는, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 장치.
제 1 항에 있어서,
상기 안드로이드 캔버스 시스템은 안드로이드 린백 런처(Android Leanback Launcher)를 기반으로 동작하며,
상기 OpenGL UI 엔진은 상기 안드로이드 린백 런처의 소프트웨어 개발 키트(SDK: Software Development Kit)와 동일한 구조로 구성되는, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 장치.
제 1 항에 있어서,
상기 OpenGL UI 엔진은 OpenGL ES(OpenGL Embedded System)에 의해 생성되는 애니메이션 이펙트(animation effect)를 서페이스뷰(SurfaceView) 상에 구현하는, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 장치.
제 1 항에 있어서,
상기 OpenGL UI 엔진은 안드로이드 프레임워크(Android Framework) 상의 OpenGL 라이브러리에 의해 구현되는, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 장치.
제 4 항에 있어서, 상기 OpenGL 라이브러리는,
이미지 및 텍스트를 OpenGL로 렌더링하고 애니메이션 이펙트를 구현하며, 화면 상위단에서 OpenGL로 렌더링된 이미지를 표현하는 OpenGL 프레임워크; 및
상기 OpenGL 라이브러리를 포함하는 렌더링 엔진 라이브러리와 안드로이드 스튜디오 프로그램(Android studio program)을 연결하는 OpenGL 렌더링 엔진을 포함하는, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 장치.
제 5 항에 있어서, 상기 OpenGL 프레임워크는,
이미지 및 텍스트를 OpenGL로 렌더링하고, 스크롤 기능을 구현하며, 안드로이드 레이아웃(Android Layout)에 OpenGL의 애니메이션 이펙트를 반영하는 뷰(view) 및 레이아웃(layout) 중 적어도 하나를 포함하는 OpenGL 뷰 컴포넌트;
안드로이드 캔버스를 통해 드로잉된 결과를 활용하는 뷰, 및 상기 OpenGL의 애니메이션 이펙트의 저장 및 활용과 연관된 클래스(class) 및 인터페이스(interface) 중 적어도 하나를 포함하는 OpenGL 이펙트 인터페이스; 및
화면 최상위에서 OpenGL로 렌더링된 이미지를 표현하기 위한 GL서페이스(GLSurface)를 포함하는, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 장치.
제 6 항에 있어서, 상기 OpenGL 뷰 컴포넌트는,
이미지를 OpenGL로 렌더링하고 이미지 변경 애니메이션을 지원하는 뷰(View)인 이미지 뷰(GLImageView);
텍스트를 OpenGL로 렌더링하기 위한 뷰인 텍스트 뷰(GLTextView);
외곽선 글자체를 OpenGL로 렌더링하기 위한 뷰인 스트로크 텍스트 뷰(GLStrokeTextView);
3차원 이펙트, 부드러운 스크롤 및 자동 스크롤 기능을 포함하는 모듈 구현을 위한 뷰인 수평 뷰(GLHorizontalView);
상기 부드러운 스크롤 기능을 적용한 모듈들의 집합인 수직 뷰(GLVerticalGridView); 및
상기 안드로이드 레이아웃(Android Layout)에 3차원 애니메이션 이펙트를 반영한 레이아웃인 GL레이아웃(GLLayout)을 포함하는, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 장치.
제 6 항에 있어서, 상기 OpenGL 이펙트 인터페이스는,
상기 안드로이드 캔버스를 통해 드로잉된 결과를 활용하는 뷰들의 인터페이스인 GL베이크드(GLBaked);
OpenGL의 3차원 애니메이션을 활용하는 뷰들의 인터페이스인 GL애니메이터블(GLAnimatable);
화면 상의 모듈 단위 이펙트를 지원하는 뷰들의 인터페이스인, GL액티브로우(GLActiveRow);
일정 시간마다 자동으로 스크롤되는 뷰들의 인터페이스인, GL오토플리퍼블(GLAutoFlippable);
OpenGL 렌더링 중 구성의 변화를 방지하기 위한 인터페이스인, GL차일드락커(GLChildLocker);
각 포스터의 테두리 그리기를 지원하는 뷰들의 인터페이스인, GL카드바운드(GLCardBound);
OpenGL의 3차원 애니메이션 이펙트를 저장하기 위한 클래스인, GL트랜스포머(GLTransformer);
연속적인 스크롤을 부드럽게 처리하기 위한 클래스인, GL컨투어인터폴레이터(GLContouousInterpolator);
OpenGL로 렌더링 될 뷰들의 기본 기능을 인터페이스 형태로 지정한 클래스인, GL렌더러블(GLRenderable);
안드로이드와 다른 부드러운 애니메이션 이펙트를 구현하기 위한 클래스인, GL인터폴레이터타입(GLInterpolatorType-); 및
상기 애니매이션 이펙트를 적용하여 화면 전체에 애니메이션이 나타나도록 하기 위한 GL매그니파잉오버레이(GLMagnifyingOverlay)를 포함하는, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 장치.
제 5 항에 있어서,
상기 안드로이드 스튜디오 프로그램은, 자바(Java) 및 코틀린(Kotlin) 중 적어도 하나를 포함하는, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 장치.
IPTV 또는 OTT(Over The Top) 애플리케이션을 위한 그래픽 사용자 인터페이스 제공 방법에 있어서,
안드로이드 네이티브 API(Android Native API)를 이용하여 생성되는 안드로이드 UI 레이어(Android UI Layer)를 호출하는 단계;
OpenGL(Open Graphics Library)을 이용하여 OpenGL 레이어를 생성하는 단계; 및
상기 안드로이드 UI 레이어 상에 상기 OpenGL 레이어를 오버레이하여 상기 애플리케이션의 위한 그래픽 사용자 인터페이스를 렌더링하는 단계를 포함하는, IPTV 또는 OTT 앱을 위한 그래픽 사용자 인터페이스 제공 방법.