KR20140055004A - 웹 페이지를 생성하는 장치 및 방법 그리고, 서버 - Google Patents

웹 페이지를 생성하는 장치 및 방법 그리고, 서버 Download PDF

Info

Publication number
KR20140055004A
KR20140055004A KR1020120121200A KR20120121200A KR20140055004A KR 20140055004 A KR20140055004 A KR 20140055004A KR 1020120121200 A KR1020120121200 A KR 1020120121200A KR 20120121200 A KR20120121200 A KR 20120121200A KR 20140055004 A KR20140055004 A KR 20140055004A
Authority
KR
South Korea
Prior art keywords
data
web page
web
navigation
mobile
Prior art date
Application number
KR1020120121200A
Other languages
English (en)
Inventor
최지훈
Original Assignee
주식회사 케이티
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 주식회사 케이티 filed Critical 주식회사 케이티
Priority to KR1020120121200A priority Critical patent/KR20140055004A/ko
Publication of KR20140055004A publication Critical patent/KR20140055004A/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

TV 디바이스용 웹 페이지를 생성하는 장치는 모바일 디바이스에서 보여지는 모바일 웹 페이지의 웹 데이터를 입력받는 입력부, 입력된 웹 데이터로부터 모바일 웹 페이지의 구조를 정의하는 복수의 영역의 영역 데이터를 추출하는 영역 추출부, 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 TV 웹 페이지의 웹 데이터를 생성하는 생성부, 생성된 TV 웹 페이지의 웹 데이터를 디스플레이에 표시하는 표시부를 포함한다.

Description

웹 페이지를 생성하는 장치 및 방법 그리고, 서버{APPARATUS AND METHOD FOR CONVERTING WEB PAGE DATA AND, SERVER}
웹 페이지를 생성하는 장치 및 방법 그리고, 서버에 관한 것이다.
최근, IPTV, 셋탑박스 또는 스마트 TV를 포함하는 표준 웹 방식의 브라우저를 TV 단말들이 등장하면서, TV 단말을 대상으로 표준 웹 방식인 HTML5(Hypertext Markup Language 5) 기반의 웹 어플리케이션 개발이 가능해졌다. HTML5를 이용하면, 기존의 PC 또는 모바일 단말을 대상으로 하는 웹 어플리케이션과 동일한 방식으로 TV 단말의 웹 어플리케이션 개발이 가능하고, PC 또는, 모바일 단말을 대상으로 하는 서비스를 TV 단말로의 확장도 용이하다.
한편, HTML 5를 기반으로 웹 어플리케이션을 개발한 경우에도, PC, 모바일 단말 또는, TV 단말 등의 장치에 동시에 적용하는 것은 어렵다. 각 장치의 특성이 다르고, 각 장치의 특성에 맞게 인터페이스를 재구성해야 하기 때문이다. 이에, 각 장치의 특성에 맞게 인터페이스를 재구성하는 방법이 요구된다. 인터페이스를 재구성하는 방법과 관련하여, 한국등록특허 10-1088842호에는 웹 위젯의 스마트폰 구동 시스템의 구성이 개시되어 있다.
모바일 기기를 대상으로 하는 웹 어플리케이션을 TV 장치에 제공할 수 있는 웹 어플리케이션으로 변환하고자 한다. 다만, 본 실시예가 이루고자 하는 기술적 과제는 상기된 바와 같은 기술적 과제들로 한정되지 않으며, 또 다른 기술적 과제들이 존재할 수 있다
상술한 기술적 과제를 달성하기 위한 수단으로써, 본 발명의 일 실시예는 모바일 디바이스에서 보여지는 모바일 웹 페이지의 웹 데이터를 입력받는 입력부, 입력된 웹 데이터로부터 모바일 웹 페이지의 구조를 정의하는 복수의 영역의 영역 데이터를 추출하는 영역 추출부, 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 TV 웹 페이지의 웹 데이터를 생성하는 생성부, 생성된 TV 웹 페이지의 웹 데이터를 디스플레이에 표시하는 표시부를 포함하는 웹 페이지 생성 장치를 제공할 수 있다.
또한, 본 발명의 다른 실시예에 있어서, 모바일 디바이스에서 보여지는 모바일 웹 페이지의 웹 데이터를 입력받는 단계, 입력된 모바일 웹 데이터로부터 모바일 웹 페이지의 구조를 정의하는 복수의 영역의 영역 데이터를 추출하는 단계, 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 TV 웹 페이지의 웹 데이터를 생성하는 단계, 생성된 TV 웹 페이지의 웹 데이터를 디스플레이에 표시하는 단계를 포함하는 웹 페이지 생성 방법을 제공할 수 있다.
또한, 본 발명의 다른 실시예에 있어서, 모바일 디바이스에서 보여지는 모바일 웹 페이지의 웹 데이터를 모바일 디바이스로부터 수신하는 통신부, 입력된 웹 데이터로부터 모바일 웹 페이지의 구조를 정의하는 복수의 영역의 영역 데이터를 추출하는 영역 추출부, 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 TV 웹 페이지의 웹 데이터를 생성하는 생성부를 포함하는 웹 페이지 생성 서버를 제공할 수 있다.
전술한 본 발명의 과제 해결 수단 중 어느 하나에 의하면, 모바일 기기를 대상으로 웹 어플리케이션을 개발하려는 서비스 개발자들이 TV 단말을 타겟으로 하는 등의 서비스 확장을 용이하게 할 수 있다. 서비스 개발자들에게는 여러 종류의 디바이스를 대상으로 하는 서비스의 개발 시 개발 비용이 줄어들 수 있다. IPTV 또는 TV 사업자의 경우 다양한 콘텐츠의 수급이 용이해 질 수 있다.
도 1은 본 발명의 일 실시예에 따른 웹 페이지 생성 시스템의 구성도이다.
도 2는 본 발명의 일 실시예에 따른 도 1에 도시된 웹 페이지 생성 장치의 구성도이다.
도 3은 본 발명의 일 실시예에 따른 도 2에 도시된 생성부의 구성도이다.
도 4는 본 발명의 일 실시예에 따른 웹 데이터가 변환되는 순서를 그린 순서도이다.
도 5는 본 발명의 일 실시예에 따른 웹 페이지가 변환되는 일 예를 나타내는 도면이다.
도 6a 내지 6c는 모바일 디바이스용의 웹 페이지의 일 예를 나타내는 도면이다.
도 7a 내지 도 7c는 TV 디바이스용의 웹 페이지의 일 예를 나타내는 도면이다.
도 8은 본 발명의 다른 실시예에 따른 도 1에 도시된 웹 페이지 생성 서버의 구성도이다.
도 9는 본 발명의 일 실시예에 따른 웹 페이지 생성 방법을 나타내는 동작흐름도이다.
아래에서는 첨부한 도면을 참조하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 본 발명의 실시예를 상세히 설명한다. 그러나, 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고, 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 도면 부호를 붙였다.
명세서 전체에서, 어떤 부분이 다른 부분과 "연결"되어 있다고 할 때, 이는 "직접적으로 연결"되어 있는 경우뿐 아니라, 그 중간에 다른 소자를 사이에 두고 "전기적으로 연결"되어 있는 경우도 포함한다. 또한 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있는 것을 의미한다.
도 1은 본 발명의 일 실시예에 따른 웹 페이지 생성 시스템의 구성도이다. 도 1을 참조하면, 웹 페이지 생성 시스템은 웹 페이지 생성 장치(10), 모바일 디바이스(30) 및 웹 페이지 생성 서버(20)를 포함한다.
모바일 디바이스(30)는 네트워크를 통해 원격지의 서버에 접속할 수 있는 휴대용 단말기로 구현될 수 있다. 여기서 휴대용 단말기는 휴대성과 이동성이 보장되는 이동 통신 장치로서, 예를 들면, PCS(Personal Communication System), GSM(Global System for Mobile communication), PDC(Personal Digital Cellular), PHS(Personal Handyphone System), PDA(Personal Digital Assistant), IMT(International Mobile Telecommunication)-2000, CDMA(Code Division Multiple Access)-2000, W-CDMA(W-Code Division Multiple Access), Wibro(Wireless Broadband Internet) 단말, 스마트폰(Smartphone), 스마트패드(SmartPad), 태블릿 PC등과 같은 모든 종류의 핸드헬드(Handheld) 기반의 무선 통신 장치를 포함할 수 있다. 다만 도 1에 개시된 모바일 디바이스(30)의 형태는 설명의 편의를 위해 예시된 것에 불과하므로, 본원에서 이야기하는 모바일 디바이스(30)의 종류 및 형태가 도 1에 도시된 것으로 한정 해석되는 것은 아니다.
웹 페이지 생성 장치(10)는 TV 디바이스용 웹 페이지를 생성하는 장치로써, TV 디바이스의 내부에 포함될 수 있으며, TV 디바이스의 외부에 위치하여 TV 디바이스와 연결될 수 있다. TV 디바이스는 방송 영상 및 광고 영상을 표시하는 장치로서, TV. 스마트TV, IPTV, PC와 연결된 모니터 및 TV와 연결 가능한 셋탑박스와 같은 방송 영상을 표시할 수 있는 장치를 포함한다. 이러한 셋탑박스는 TV 장치의 내부에 포함될 수도 있고, 외부 장치로서 TV 장치에 연결될 수도 있다.
웹 페이지 생성 장치(10)는 모바일 디바이스(30)에서 보여지는 모바일 웹 페이지의 웹 데이터를 입력받을 수 있다. 예를 들어, 웹 페이지 생성 장치(10)는 사용자의 스마트폰으로부터 스마트폰에 표시되는 모바일용 웹 페이지의 웹 데이터를 입력받을 수 있다.
웹 페이지 생성 장치(10)는 입력된 웹 페이지의 데이터로부터 모바일 웹 페이지의 구조를 정의하는 복수의 영역의 영역 데이터를 추출할 수 있다. 일 예로, 웹 페이지 생성 장치(10)는 사용자의 스마트폰으로부터 수신된 모바일 웹 페이지의 웹 데이터로부터 헤더(Header) 영역, 콘텐츠 영역 및 푸터(Footer) 영역의 데이터를 추출할 수 있다. 모바일 웹 페이지는 HTML5 기반의 웹 페이지 일 수 있다.
웹 페이지 생성 장치(10)는 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 TV 웹 페이지의 웹 데이터를 생성하고, 생성된 웹 데이터를 디스플레이에 표시할 수 있다. 일 예로, 웹 페이지 생성 장치(10)는 웹 데이터로부터 추출된 헤더 영역, 콘텐츠 영역 및 푸터 영역의 데이터에 기초하여 IPTV에서 보여지는 IPTV 용의 웹 페이지 데이터를 생성하고, 생성된 웹 데이터를 IPTV를 통해 표시할 수 있다.
이와 같은 웹 페이지 생성 장치(10)의 동작에 대해서는 도 2에서 자세히 설명된다,.
다른 실시예에서, 별도 구성된 웹 페이지 생성 서버(20)를 통해 웹 페이지 생성 장치(10)의 기능을 수행할 수도 있다.
웹 페이지 생성 서버(20)는 모바일 디바이스(30)에서 보여지는 모바일 웹 페이지의 웹 데이터를 모바일 디바이스(30)로부터 수신하고, 수신된 웹 데이터로부터 모바일 웹 페이지의 영역 데이터를 추출하고, 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 웹 페이지의 웹 데이터를 생성하여, TV 디바이스에 전송할 수 있다.
이와 같은 웹 페이지 생성 서버(20)의 동작에 대해서는 도 8에서 보다 구체적으로 한번 설명된다.
도 2는 본 발명의 일 실시예에 따른 도 1에 도시된 웹 페이지 생성 장치(10)의 구성도이다. 도 2를 참조하면, 웹 페이지 생성 장치(10)는 입력부(11), 영역 추출부(12), 생성부(13) 및 표시부(14)를 포함한다.
입력부(11)는 모바일 디바이스(30)에서 보여지는 모바일 웹 페이지의 웹 데이터를 입력받는다. 모바일 웹 페이지는 HTML5(Hypertext Markup Language 5) 기반의 웹 페이지일 수 있다. 예를 들면, 입력부(11)는 사용자의 스마트폰에 표시되는 HTML5 기반의 웹 페이지의 웹 데이터를 수신할 수 있다.
입력부(11)는 모바일 웹 어플리케이션의 어플리케이션 데이터를 입력받을 수 있다. 어플리케이션 데이터는 모바일 웹 페이지의 웹 데이터를 포함할 수 있으며, 모바일 웹 페이지는 HTML5 기반의 웹 페이지일 수 있다. 일 예로, 웹 어플리케이션은 스마트폰 내의 브라우져를 통해 HTML, CSS(Cascading Style Sheets) 또는 JavaScript로 실행되는 클라이언트에서 어느 정도의 상태 정보를 저장 및 관리하고 어플리케이션의 로직을 실행 시킬 수 있는 기능을 가질 수 있다. 입력부(11)는 스마트폰으로부터 웹 어플리케이션의 어플리케이션 데이터를 입력받을 수 있다.
좀더 상세히 말하면, 웹 어플리케이션은 단일 페이지 어플리케이션을 뜻하고, 단일 어플리케이션은, 특정 DOM(Document Object Model) 영역이 사용자의 요청에 따라서 Ajax(Asynchronous Jacascript and XML) 기반의 비동기적인 통신으로 서버로부터 특정 데이터를 가져와서 이를 반영하고, 해당 영역의 DOM을 모바일 기기의 브라우저가 직접 생성하여 변경하는 구조를 가질 수 있다. 또한, 단일 페이지 어플리케이션은 브라우저가 처음으로 해당 URL(Uniform Resource Locator)을 통해 소정 서버에 요청하는 경우, 처음에 한번, index.html 로 대표되는 첫 HTML 페이지 및 필요한 CSS 및 JavaScript 파일들을 서버로부터 가져온 후, 특정 이벤트가 발생할 때마다 비동기적으로 필요한 데이터만을 JSON(JavaScript Object Notation)과 같은 형태로 주고 받고, 필요한 경우, DOM의 일부만을 교체할 수 있다.
영역 추출부(12)는 입력된 웹 데이터로부터 모바일 웹 페이지의 구조를 정의하는 복수의 영역의 영역 데이터를 추출한다. 복수의 영역은 HTML5에 정의된 헤더(Header) 영역, 콘텐트(Contents) 영역 및, 푸터(Footer) 영역중 적어도 하나 이상을 포함하며, 섹션(Section) 영역, 아티클(Article) 영역, 어사이드(Aside) 영역을 더 포함할 수도 있다.
영역 추출부(12)는 스마트폰으로부터 수신된 HTML5 기반의 웹 페이지의 구조를 정의하는 영역 데이터를 추출할 수 있다. 일반적으로, HTML로 작성된 웹 페이지의 웹 데이터의 각 영역은 HTML의 DIV(Division) 태그를 통해 명시될 수 있으며, HTML5 에서는 DIV 태그의 속성값으로 Custom Data Attribute를 명시할 수 있는 명령어인 "data-"를 이용하여 각 영역의 역할을 명시할 수 있다. 예를 들면, <div data-role="header"> </div>와 같이 표현될 수 있다. 웹 페이지의 구성이 명령어 "data-"의 속성값으로 명확하게 나눠져 있지 않은 경우, CSS를 파싱(pharsing)하여 각 DIV 태그의 위치값을 파악하고, 위치값에 따라 각 DIV 태그를 내부적으로 헤더 영역, 콘텐츠 영역 또는 후터 영역으로 매핑할 수도 있다.
생성부(13)는 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 TV 웹 페이지의 웹 데이터를 생성한다.
생성부(13)의 동작에 대해서는 아래에서 자세히 설명된다.
도 3은 본 발명의 일 실시예에 따른 도 2에 도시된 생성부(13)의 구성도이다. 도 3을 참조하면, 생성부(13)는 데이터 추출부(131), 변환부(132) 및 웹 데이터 생성부(133)를 포함한다.
데이터 호출부(131)는 추출된 영역 데이터로부터 복수의 내비게이션 구조의 데이터를 추출할 수 있다. 추출된 내비게이션 구조의 데이터는 복수의 내비게이션 구조 각각의 유형 및 복수의 내비게이션 구조 각각에 관한 페이지 변환 정보를 포함할 수 있다. 복수의 내비게이션 구조는 탭 바(Tab bar) 구조, 리스트 뷰(List view) 구조 및 콘텐츠 뷰(Contents View) 구조 중 적어도 하나 이상일 수 있다.
예를 들면, 내비게이션 구조의 데이터는 웹 페이지의 각 DIV 태그의 "data-"속성값을 통해 추출할 수 있고, DIV 태그는 복수개의 하위 DIV 태그를 더 포함할 수 있다. 탭 바(Tab bar)의 경우, "data-tabbar"와 같은 형태로 나타낼 수 있으며, 탭 바의 하위 DIV 태그는 "data-tabbar-item"과 같은 형태로 나타낼 수 있다. 내비게이션 구조의 데이터가 "data-" 명령어의 속성값으로 명확하게 나타나지 않는 경우, 데이터 호출부(131)는 "#!(Hashbang)"을 포함하는 URL을 포함하는 DIV 태그 및 상위 DIV 태그를 내비게이션 구조의 데이터로 처리할 수 있다. 그리고, 데이터 호출부(131)는 웹 페이지의 추출된 영역 데이터로부터 내비게이션 구조의 데이터를 추출할 수 있다.
변환부(132)는 TV 디바이스의 인터페이스에 기초하여 추출된 내비게이션 구조의 데이터를 TV 디바이스의 내비게이션 데이터로 변환할 수 있다. 예를 들면, 변환부(132)는 추출된 내비게이션 구조의 데이터로부터 내비게이션이 진행되는 경우, 웹 페이지의 변환되는 영역을 파악할 수 있다. 콘텐츠 일부 영역이 변환되는 경우, 웹 페이지의 URL은 "http://www.example.com/newcontents#!contents" 와 같이 나타날 수 있고, 페이지 전체가 변환되는 경우, 웹 페이지의 URL은 ""http://www.example.com/newcontents#!page" 또는, "http://www.example.com/newcontents" 와 같이 나타날 수 있다.
변환부(132)는 추출된 내비게이션 구조의 데이터를 트리 형태를 갖는 TV 디바이스의 내비게이션 데이터로 변환할 수 있다. 예를 들어, IPTV의 내비게이션 구조의 데이터는 IPTV의 4방향키 리모트 콘트롤러 인터페이스를 고려하여 각 키의 조작에 해당하는 내비게이션 구조의 데이터로 이동할 수 있는 트리 형태가 될 수 있다. 다시 말하면, 추출된 내비게이션 구조의 데이터는 상위 메뉴, 하위 메뉴 및 리스트 뷰를 갖는 트리 형태가 될 수 있으며, 변환부(132)는 내비게이션 구조의 데이터를 트리 형태를 갖는 TV 디바이스의 내비게이션 데이터로 변환할 수 있다.
또한, 변환부(132)는 트리 형태를 갖는 내비게이션 구조의 데이터가 상하좌우로 이동 가능하도록 DIV 태그에 child_1, child_2, child_3 등과 같이 순서를 명시할 수 있고, 각 데이터들과의 상위 또는 하위 관계를 나타낼 수 있도록 DIV 태그에 depth_1, depth_2, depth_3 등과 같은 순서를 명시할 수도 있다.
변환부(132)는 포커스 데이터 및 선택 데이터를 포함하는 소정 데이터를 TV 디바이스의 내비게이션 데이터로 변환할 수 있다. 또한, 변환부(132)는 TV 디바이스의 인터페이스는 4 방향 기반의 인터페이스를 고려하여, 4방향 기반의 인터페이스에 대응하는 JavaScript 코드를 포함하는 TV 내비게이션 데이터로 변환할 수 있다. 예를 들어, 변환부(132)는 트리화된 내비게이션 구조에 맞게 4 방향 키로 상하좌우, 확인, Back 버튼에 의해 내비게이션 가능하게 하는 JavaScript 코드가 포함되고, 이때 DIV 태그에 명시한 child_1, child_2, child_3 또는 depth_1, depth_2, depth_3 등 순으로 이동 가능하게 할 수 있다. 또한, 변환부(132)는 IPTV의 4 방향키 인터페이스의 내비게이션 데이터 부분에 포커싱되어 있는지 여부 및 내비게이션 데이터 부분을 선택 하였는지 여부에 따라 웹 페이지의 DIV 태그의 class 부분에 focused, unfocused, selected 및 unselected와 같이 나타내고, 4 방향키에 대응하는 JavaScript를 삽입할 수 있다. 내비게이션 데이터가 포커스된 경우 <div id="main_listview_item2" data_role="listview_item" class="focused unselected">와 같이 표시할 수 있다.
다른 예를 들면, 변환부(132)는 리모트 콘트롤러의 뒤로 가기 버튼에 대응하는 동작을 수행하기 위하여 선택 버튼이 눌러진 경우, 선택 버튼이 눌러진 시점의 상태를 스택(Stack) 구조로 관리할 수 있다. 이 때, 상태를 JSON Object로 표현할 수 있고, HTML5의 히스토리 API의 "pushState" 명령어를 사용하여 저장 관리할 수 있으며, 선택 버튼이 눌러진 시점의 상태를 별도로 관리할 수도 있다. 상태를 나타내는 JSON Object의 페이지 내에서 일부 영역 변경되는 경우, 내비게이션 데이터의 경로가 명시되어야 하고, 전체 페이지가 변경되는 경우, 직전의 페이지 전체의 구조가 명시되어야 한다.
웹 데이터 생성부(133)는 변환된 내비게이션 데이터에 기초하여 TV 웹 페이지의 웹 데이터를 생성할 수 있다. 예를 들면, 웹 데이터 생성부(133)는 HTML5로 제작된 TV 웹 페이지용의 웹 데이터를 생성할 수 있다.
표시부(14)는 생성된 TV 웹 페이지의 웹 데이터를 디스플레이에 표시한다. 일 예로, 표시부(14)는 스마트폰 용의 웹 페이지 데이터가 변환된 IPTV용의 웹 페이지의 웹 데이터를 디스플레이에 표시할 수 있다.
도 4는 본 발명의 일 실시예에 따른 웹 데이터가 변환되는 순서를 그린 순서도이다. 도 4를 참조하면, 웹 페이지 생성 장치(10)는 모바일 웹 어플리케이션의 HTML 부분이 로딩되는 경우, HTML DOM을 파싱(S401)하고, HTML DOM에 포함된 각각의 DIV 태그의 역할을 분석(S402)한다. DIV 태그의 역할은 Custom Data Attribute를 명시할 수 있는 명령어 "data-"의 속성값을 이용하여 분석할 수 있다. 그리고, 각 DIV 태그의 역할을 분석하면, 해당 웹 어플리케이션의 내비게이션 데이터의 구조를 파악할 수 있다. 내비게이션 데이터가 탭 바(Tab bar)인 경우(S403), TV 디바이스의 상단 메뉴 바로 변환(S404)하여 생성되고, 내비게이션 데이터가 리스트 뷰(list View)(S405)이고, 리스트 아이템에 그림을 포함하는 경우(S406), TV 디바이스의 리스트 뷰로 변환하여 생성(S407)되고, 리스트 아이템에 그림을 포함하지 않는 경우(S406), 하단 메뉴바로 변환하여 생성(S408)될 수 있다. 내비게이션 데이터가 콘텐츠 뷰(Contents View)인 경우(S409), TV 디바이스의 콘텐츠 뷰로 변환하여 생성(S410)될 수 있다. TV 디바이스 용으로 변환된 내비게이션 데이터를 HTML DOM 으로 재구성하여 변환(S411)하고, CSS를 파싱하여 각각의 내비게이션 데이터의 백그라운드 색상, 폰트, 폰트 색상 등을 TV 디바이스용으로 변환(S412)한다. 그리고, 4방향키 내비게이션 조작에 필요한 JavaScript 코드를 TV 디바이스의 웹 페이지에 대응하도록 삽입 처리(S413)한다.
다만, 도 4에서 설명하는 웹 페이지를 변환하는 과정은 본 발명의 일 실시예에 불과하므로, 도 4에 도시된 실시예로 본 발명이 한정 해석 되어서는 안된다.
도 5는 본 발명의 일 실시예에 따른 웹 페이지가 변환되는 일 예를 나타내는 도면이다. 도 5를 참조하면, 모바일 기기의 웹 어플리케이션을 터치 인터페이스를 통해 내비게이션 될 수 있도록 표시할 수 있다. 웹 페이지 생성 장치(10)는 모바일 기기의 웹 어플리케이션을 TV 디바이스 환경에 맞는 4방향키로 내비게이션 되도록 변환할 수 있다.
도 6a 내지 6c는 모바일 디바이스(30)용의 웹 페이지의 일 예를 나타내는 도면이다. 도 6a를 참조하면, 모바일 디바이스(30)용의 웹 어플리케이션의 페이지는 헤더 영역, 콘텐츠 영역, 푸터 영역으로 구분될 수 있고, 도 6b를 참조하면, 페이지의 헤더 영역은 내비게이션 바 역할을 하고, 푸터 영역은 탭 바 역할을 할 수 있다. 내비게이션 바는 뒤로가기 버튼을 포함할 수 있으며 이는 전 페이지로 넘어갈 수 있는 기능을 수행한다. 탭 바의 경우, 적어도 하나 이상의 탭 바 버튼을 포함할 수 있고, 각각의 탭 바 버튼은 특정 페이지로 넘어가게 하는 기능을 수행할 수 있다. 페이지의 콘텐츠 영역에 리스트 뷰가 포함되어 있으며, 리스트 뷰는 적어도 하나 이상의 리스트 뷰 아이템을 포함하고, 각각의 리스트 뷰 아이템은 특정 페이지로 이동하는 기능을 수행한다. 도 6c를 참조하면, 페이지의 콘텐츠 영역에 콘텐츠 뷰가 포함되고, 일반적인 HTML 페이지의 구성을 통해 선택된 콘텐츠의 정보를 보여주는 기능을 수행한다.
도 7a 내지 도 7c는 TV 디바이스용의 웹 페이지의 일 예를 나타내는 도면이다. 도 7a를 참조하면, TV 디바이스를 대상으로 자동 변환된 웹 어플리케이션의 페이지를 나타내며, 변환된 페이지는 콘텐츠 영역 및 푸터 영역을 포함할 수 있다. 도 7b 내지 7c를 참조하면 변환된 페이지의 콘텐츠 영역과 푸터 영역은 각 상황에서의 기능이 배정된 상태로, 푸터 영역은 메뉴의 기능을 수행할 수 있다. 메뉴는 적어도 하나 이상의 메뉴 아이템을 포함할 수 있고 각각의 메뉴 아이템은 특정 페이지로 이동하거나, 하부 메뉴의 아이템 리스트를 가져올 수 있는 기능을 수행한다. 메뉴는 적어도 하나 이상의 단계를 가질 수 있다. 메뉴가 2 이상의 단계를 갖는 경우, 상단 메뉴 및 하단 메뉴와 같이 구성될 수 있고, 하단 메뉴의 아이템을 통해 가져온 아이템 리스트를 상단 메뉴로서 구성할 수도 있다. 콘텐츠 영역은 리스트 뷰가 포함되어 있고, 하나의 리스트 뷰는 복수의 리스트 뷰 아이템을 포함할 수 있고, 각각의 리스트 뷰 아이템은 특정 페이지로 넘어가게 하는 기능을 수행한다. 그리고, 콘텐츠 영역에 포함된 콘텐츠 뷰의 경우, HTML 페이지 구성을 통해 선택된 콘텐츠의 정보가 보여질 수 있다. 다.
도 5 내지 도 7을 통해 설명된 모바일 디바이스(30)의 웹 페이지 및 TV 디바이스의 웹 페이지는 이해의 편의를 위해 예시된 것에 불과하므로, 도 5 내지 도 7에 표시되는 웹 페이지의 형태로 본 발명이 한정되는 것은 아니며, 여러 가지 형태의 웹 페이지가 더 존재할 수 있다.
도 8은 본 발명의 다른 실시예에 따른 도 1에 도시된 웹 페이지 생성 서버의 구성도이다. 도 8은 본 발명의 다른 실시예에 있어서, 도 1 내지 도 2를 통해 설명된 웹 페이지 생성 장치(10)의 기능을 수행하는 웹 페이지 생성 서버(20)의 동작을 설명한다. 따라서, 도 1 내지 도 2를 통해 웹 페이지 생성 장치(10)에 관하여 이상에서 설명된 내용은 도 8에 도시된 웹 페이지 생성 서버(20)에도 적용되므로 자세한 설명은 생략한다.
도 8을 참조하면, 웹 페이지 생성 서버(20)는 통신부(21), 영역 추출부(22) 및 생성부(23)를 포함한다.
통신부(21)는 모바일 디바이스(30)에서 보여지는 모바일 웹 페이지의 웹 데이터를 상기 모바일 디바이스(30)로부터 수신하고, 생성된 TV 웹 페이지의 웹 데이터를 TV 디바이스로 전송한다.
영역 추출부(22)는 입력된 웹 데이터로부터 모바일 웹 페이지의 구조를 정의하는 복수의 영역의 영역 데이터를 추출한다.
생성부(23)는 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 TV 웹 페이지의 웹 데이터를 생성한다, 그리고, 생성부(23)는 추출된 영역 데이터로부터 복수의 내비게이션 구조의 데이터를 추출하고, TV 디바이스의 인터페이스에 기초하여 추출된 내비게이션 구조의 데이터를 TV 디바이스의 내비게이션 데이터로 변환하고, 변환된 내비게이션 데이터에 기초하여 TV 웹페이지의 웹 데이터를 생성할 수 있다.
도 9는 본 발명의 일 실시예에 따른 웹 페이지 생성 방법을 나타내는 동작 흐름도이다. 도 9는 도 1에 도시된 웹 페이지 생성 장치(10)에서 시계열적으로 처리되는 단계들을 포함한다. 따라서, 이하 생략된 내용이라고 하여도, 도 1 내지 도 2를 통해 웹 페이지 생성 장치(10)에 대하여 이상에서 기술된 내용은 도 9에서 설명되는 실시예에도 적용된다.
도 9를 참조하면, 모바일 디바이스(30)에서 보여지는 모바일 웹 페이지의 웹 데이터를 입력받고(S901), 입력된 모바일 웹 데이터로부터 모바일 웹 페이지의 구조를 정의하는 복수의 영역의 영역 데이터를 추출(902)한다. 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 TV 웹 페이지의 웹 데이터를 생성(S903)한다. 웹 데이터를 생성할 시, 추출된 영역 데이터로부터 복수의 내비게이션 구조의 데이터를 추출하고, 추출된 내비게이션 구조의 데이터를 트리 형태를 갖는 TV 디바이스의 내비게이션 데이터로 변환하고, 변환된 데이터에 기초하여 TV 웹 페이지의 웹 데이터를 생성할 수 있다. 그리고, 생성된 TV 웹 페이지의 웹 데이터를 디스플레이에 표시(S904)한다.
전술한 본 발명의 설명은 예시를 위한 것이며, 본 발명이 속하는 기술분야의 통상의 지식을 가진 자는 본 발명의 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 쉽게 변형이 가능하다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한다. 예를 들어, 단일형으로 설명되어 있는 각 구성 요소는 분산되어 실시될 수도 있으며, 마찬가지로 분산된 것으로 설명되어 있는 구성 요소들도 결합된 형태로 실시될 수 있다.
본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 균등 개념으로부터 도출되는 모든 변경 또는 변경된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다
10: 웹 페이지 생성 장치
12: 영역 추출부
13: 생성부
20: 웹 페이지 생성 서버
23: 생성부

Claims (16)

  1. TV 디바이스용 웹 페이지를 생성하는 장치에 있어서,
    모바일 디바이스에서 보여지는 모바일 웹 페이지의 웹 데이터를 입력받는 입력부;
    상기 입력된 웹 데이터로부터 상기 모바일 웹 페이지의 구조를 정의하는 복수의 영역의 영역 데이터를 추출하는 영역 추출부;
    상기 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 TV 웹 페이지의 웹 데이터를 생성하는 생성부; 및
    상기 생성된 TV 웹 페이지의 웹 데이터를 디스플레이에 표시하는 표시부를 포함하는 웹 페이지 생성 장치.
  2. 제 1 항에 있어서,
    상기 생성부는,
    상기 추출된 영역 데이터로부터 복수의 내비게이션 구조의 데이터를 추출하는 내비게이션 데이터 추출부; 및
    상기 TV 디바이스의 인터페이스에 기초하여 상기 추출된 내비게이션 구조의 데이터를 TV 디바이스의 내비게이션 데이터로 변환하는 변환부; 및
    상기 변환된 내비게이션 데이터에 기초하여 상기 TV 웹 페이지의 웹 데이터를 생성하는 웹 데이터 생성부를 포함하는 것인, 웹 페이지 생성 장치.
  3. 제 2 항에 있어서,
    상기 추출된 내비게이션 구조의 데이터는 상기 복수의 내비게이션 구조 각각의 유형 및 상기 복수의 내비게이션 구조 각각에 관한 페이지 변환 정보를 포함하는 것인, 웹 페이지 생성 장치.
  4. 제 2 항에 있어서,
    상기 복수의 내비게이션 구조는 탭 바(Tab Bar) 구조, 리스트 뷰(List View) 구조 및 콘텐츠 뷰(Contents View) 구조 중 적어도 하나 이상이고,
    상기 TV 디바이스의 내비게이션 데이터는 메뉴 바(Menu Bar) 데이터 및 리스트 뷰(List View) 데이터 중 적어도 하나 이상인 것인, 웹 페이지 생성 장치.
  5. 제 2 항에 있어서,
    상기 변환부는 상기 추출된 내비게이션 구조의 데이터를 트리 형태를 갖는 TV 디바이스의 내비게이션 데이터로 변환하는 것인, 웹 페이지 생성 장치.
  6. 제 2 항에 있어서,
    상기 TV 디바이스의 내비게이션 데이터는 포커스 데이터 및 선택 데이터를 포함하는 것인, 웹 페이지 생성 장치.
  7. 제 2 항에 있어서,
    상기 TV 디바이스의 인터페이스는 4 방향 기반의 인터페이스이고,
    상기 TV 디바이스의 내비게이션 데이터는 상기 4 방향 기반의 인터페이스에 대응하는 자바스크립트(JavaScript) 코드를 포함하는 것인, 웹 페이지 생성 장치.
  8. 제 1 항에 있어서,
    상기 복수의 영역은 헤더(header) 영역, 콘텐츠(contents) 영역 및 푸터(footer) 영역 중 적어도 하나 이상을 포함하는 것인, 웹 페이지 생성 장치.
  9. 제 1 항에 있어서,
    상기 모바일 웹 페이지 및 TV 웹 페이지는 HTML5(Hypertext Markup Language 5)기반의 웹 페이지인 것인, 웹 페이지 생성 장치.
  10. 제 1 항에 있어서,
    상기 입력부는 모바일 웹 어플리케이션의 어플리케이션 데이터를 입력받고,
    상기 어플리케이션 데이터는 상기 모바일 웹 페이지의 웹 데이터를 포함하는 것인, 웹 페이지 생성 장치.
  11. 제 1 항에 있어서,
    상기 표시부는 상기 생성된 TV 웹 페이지의 웹 데이터를 상기 TV 디바이스의 디스플레이에 표시하는 것인, 웹 페이지 생성 장치.
  12. TV 디바이스용 웹 페이지를 생성하는 방법에 있어서,
    모바일 디바이스에서 보여지는 모바일 웹 페이지의 웹 데이터를 입력받는 단계;
    상기 입력된 모바일 웹 데이터로부터 상기 모바일 웹 페이지의 구조를 정의하는 복수의 영역의 영역 데이터를 추출하는 단계;
    상기 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 TV 웹 페이지의 웹 데이터를 생성하는 단계; 및
    상기 생성된 TV 웹 페이지의 웹 데이터를 디스플레이에 표시하는 단계를 포함하는 웹 페이지 생성 방법
  13. 제 12 항에 있어서,
    상기 웹 데이터를 생성하는 단계는,
    상기 추출된 영역 데이터로부터 복수의 내비게이션 구조의 데이터를 추출하는 단계;
    상기 추출된 내비게이션 구조의 데이터를 상기 TV 디바이스의 내비게이션 데이터로 변환하는 단계;
    상기 변환된 내비게이션 데이터에 기초하여 상기 TV 웹 페이지의 웹 데이터를 생성하는 단계를 포함하는 것인, 웹 페이지 생성 방법.
  14. 제 13 항에 있어서,
    상기 TV 디바이스의 내비게이션 데이터로 변환하는 단계는, 상기 추출된 네비게이션 구조의 데이터를 트리 형태를 갖는 TV 디바이스의 내비게이션 데이터로 변환하는 것인, 웹 페이지 생성 방법.
  15. TV 디바이스용 웹 페이지를 생성하는 서버에 있어서,
    모바일 디바이스에서 보여지는 모바일 웹 페이지의 웹 데이터를 상기 모바일 디바이스로부터 수신하는 통신부;
    상기 입력된 웹 데이터로부터 상기 모바일 웹 페이지의 구조를 정의하는 복수의 영역의 영역 데이터를 추출하는 영역 추출부;
    상기 추출된 영역 데이터에 기초하여 TV 디바이스에서 보여지는 TV 웹 페이지의 웹 데이터를 생성하는 생성부를 포함하되,
    상기 통신부는 상기 생성된 TV 웹 페이지의 웹 데이터를 상기 TV 디바이스로 전송하는 것인, 웹 페이지 생성 서버.
  16. 제 15 항에 있어서,
    상기 생성부는 상기 추출된 영역 데이터로부터 복수의 내비게이션 구조의 데이터를 추출하고, 상기 TV 디바이스의 인터페이스에 기초하여 상기 추출된 내비게이션 구조의 데이터를 TV 디바이스의 내비게이션 데이터로 변환하고, 상기 변환된 내비게이션 데이터에 기초하여 상기 TV 웹페이지의 웹 데이터를 생성하는 것인, 웹 페이지 생성 서버.
KR1020120121200A 2012-10-30 2012-10-30 웹 페이지를 생성하는 장치 및 방법 그리고, 서버 KR20140055004A (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020120121200A KR20140055004A (ko) 2012-10-30 2012-10-30 웹 페이지를 생성하는 장치 및 방법 그리고, 서버

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020120121200A KR20140055004A (ko) 2012-10-30 2012-10-30 웹 페이지를 생성하는 장치 및 방법 그리고, 서버

Publications (1)

Publication Number Publication Date
KR20140055004A true KR20140055004A (ko) 2014-05-09

Family

ID=50886750

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020120121200A KR20140055004A (ko) 2012-10-30 2012-10-30 웹 페이지를 생성하는 장치 및 방법 그리고, 서버

Country Status (1)

Country Link
KR (1) KR20140055004A (ko)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20180003308A (ko) * 2016-06-30 2018-01-09 대우조선해양 주식회사 무전원 자재관리 시스템 및 방법
WO2022203381A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 단일 페이지 애플리케이션 방식의 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법
WO2022203391A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 반응형 또는 적응형 웹 구현을 위한 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법
WO2022203392A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 디자인 시스템을 구비한 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법
WO2022203387A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 소스 컴파일러를 구비한 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법
WO2024080704A1 (ko) * 2022-10-12 2024-04-18 주식회사 스튜디오랩 페이지 출력 방법

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20180003308A (ko) * 2016-06-30 2018-01-09 대우조선해양 주식회사 무전원 자재관리 시스템 및 방법
WO2022203381A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 단일 페이지 애플리케이션 방식의 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법
WO2022203391A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 반응형 또는 적응형 웹 구현을 위한 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법
WO2022203392A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 디자인 시스템을 구비한 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법
WO2022203387A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 소스 컴파일러를 구비한 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법
WO2024080704A1 (ko) * 2022-10-12 2024-04-18 주식회사 스튜디오랩 페이지 출력 방법

Similar Documents

Publication Publication Date Title
US11875140B2 (en) Application support for network devices
US9720658B2 (en) Application creation method and apparatus
KR20140055004A (ko) 웹 페이지를 생성하는 장치 및 방법 그리고, 서버
KR101340780B1 (ko) 데이터 공유 시스템 및 방법
JP5575511B2 (ja) ウェブサイト閲覧システム、サーバ及びクライアント端末
US10853319B2 (en) System and method for display of document comparisons on a remote device
CN102819560A (zh) 一种网页中图片的显示方法和装置
JP2015191505A (ja) 情報処理端末、表示端末、表示方法、及びプログラム
CN111831387B (zh) 一种页面处理方法、装置及设备
JP2011123697A (ja) ウェブ・ページ変換システム
KR100909232B1 (ko) 웹 페이지 인터페이스 제공 방법 및 시스템
KR20140040920A (ko) 매쉬업 블록 유저 인터페이스를 이용한 매쉬업 저작 장치 및 그 방법
TWI435226B (zh) A method of reading a system, a terminal, an image server, a computer program product, a terminal, and an image server
JP2015191504A (ja) 情報処理システム、情報処理端末、コンテンツ管理装置、及び情報処理方法
JP5832056B1 (ja) Ｗｅｂページの表示のためのプログラム、端末装置、およびサーバ装置
JP2008071116A (ja) 情報配信システム、情報配信装置、情報配信方法および情報配信用プログラム
KR101160973B1 (ko) 상세정보 이미지 파일 생성 방법 및 장치
JP2011248670A (ja) Ｗｅｂ閲覧システム、中継サーバおよびＷｅｂ閲覧方法
WO2014155734A1 (ja) 情報処理システム、情報処理方法、データ、情報処理装置、表示装置、表示方法、プログラムおよび情報記憶媒体
CN104598465B (zh) 一种浏览器内嵌地址栏的实现方法及装置
JPWO2007055002A1 (ja) ナンバリング付与機能付きブラウザ
JP5427931B2 (ja) 帳票サーバ装置、帳票サーバ装置の制御方法および帳票サーバ装置の制御プログラム
KR101370714B1 (ko) 다중 스크린 장치 사용을 위한 웹 페이지 스크린 분할 방법 및 시스템
JP2011141615A (ja) ｗｅｂページ閲覧システム及び中継サーバ
Gröhbiel REST engineering on the server-and client-side

Legal Events

Date Code Title Description
WITN Withdrawal due to no request for examination