KR101370714B1 - 다중 스크린 장치 사용을 위한 웹 페이지 스크린 분할 방법 및 시스템 - Google Patents

다중 스크린 장치 사용을 위한 웹 페이지 스크린 분할 방법 및 시스템 Download PDF

Info

Publication number
KR101370714B1
KR101370714B1 KR1020120139963A KR20120139963A KR101370714B1 KR 101370714 B1 KR101370714 B1 KR 101370714B1 KR 1020120139963 A KR1020120139963 A KR 1020120139963A KR 20120139963 A KR20120139963 A KR 20120139963A KR 101370714 B1 KR101370714 B1 KR 101370714B1
Authority
KR
South Korea
Prior art keywords
web page
information
screen
tag
primary
Prior art date
Application number
KR1020120139963A
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 KR1020120139963A priority Critical patent/KR101370714B1/ko
Application granted granted Critical
Publication of KR101370714B1 publication Critical patent/KR101370714B1/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/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1423—Digital output to display device ; Cooperation and interconnection of the display device with other functional units controlling a plurality of local displays, e.g. CRT and flat panel display

Landscapes

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

Abstract

본 발명의 실시예는 다중 스크린 장치를 사용하기 위해 웹 페이지 스크린을 분할하는 방법과 그 시스템에 관한 것이다. 웹 페이지를 다중 스크린으로 분할하는 방법에 있어서, 서버로부터 태그 파일에 프라이머리(Primary) 정보와 세컨드리(Secondary) 정보를 포함하는 웹 페이지를 수신하는 단계; 및 웹 페이지를 렌더링(Rendering)하는 단계를 포함하며, 프라이머리 정보는 영상, 이미지를 포함하는 메인 화면에 대한 정보이고, 세컨드리 정보는 메인 화면의 부가 기능에 대한 정보인 것을 특징으로 하는 웹 페이지 스크린 분할 방법이 제공될 수 있다.

Description

다중 스크린 장치 사용을 위한 웹 페이지 스크린 분할 방법 및 시스템{DIVIDING WEB PAGE SCREEN METHOD AND SYSTEM FOR USING MULTISCREEN APPARATUS}
본 발명의 실시예는 다중 스크린 장치를 사용하기 위해 웹 페이지 스크린을 분할하는 방법과 그 시스템에 관한 것이다.
최근 들어 스마트 폰, 태블릿 기기 등의 전자기기의 사용이 활성화되고, 스마트 TV의 개발, 보급으로 사용자가 모바일 기기를 사용하면서 TV, 컴퓨터 등의 기기와 인터랙션(Interaction)하면서 사용하는 비율이 증가하고 있다.
현재 미디어 플랫폼의 추세가 웹(WEB)으로 통일되어가고 있기 때문에, 웹 페이지 상에서 N-Screen 환경, 즉 다양한 기기에서 하나의 콘텐츠를 끊김 없이 이용할 수 있게 해주는 서비스 환경을 구축하는 것이 새로운 이슈로 등장하였다.
국내외 이동통신사들은 N-Screen을 통해 사용자들이 자사 서비스를 이용하는 시간이 늘어날수록 영화, 드라마 등 콘텐츠를 구입할 가능성이 높아져 궁극적으로 콘텐츠 매출을 늘릴 수 있기 때문에 미래 핵심서비스로 인지해 시장 선점을 위해 계속적으로 경쟁하고 있으며, 따라서 현재 제공되고 있는 웹 페이지를 어떻게 하면 더 빠르고 쉽게 분할할 수 있는지에 대한 연구가 이루어지고 있다.
이와 관련된 종래 기술로서, 한국공개특허 제10-2012-0116534호에서는 웹 브라우저의 화면분할 장치 및 방법에 대해서 기재하고 있다.
본 발명의 실시예는 상기에 설명한 N-Screen에 대한 것으로, 제공되는 웹 페이지를 빠르고 쉽게 분할할 수 있는 시스템을 제공한다.
또한, 다수 개의 디스플레이 장치에서 하나의 웹 페이지를 사용자 인터페이스에 용이하도록 나누어 디스플레이할 수 있는 시스템을 제공한다.
웹 페이지를 다중 스크린으로 분할하는 방법에 있어서, 서버로부터 태그 파일에 프라이머리(Primary) 정보와 세컨드리(Secondary) 정보를 포함하는 웹 페이지를 수신하는 단계; 및 웹 페이지를 렌더링(Rendering)하는 단계를 포함하며, 프라이머리 정보는 영상, 이미지를 포함하는 메인 화면에 대한 정보이고, 세컨드리 정보는 메인 화면의 부가 기능에 대한 정보이고, 렌더링하는 단계는 프라이머리 정보와 세컨드리 정보를 구분하기 위한 것 것을 특징으로 하는 웹 페이지 스크린 분할 방법이 제공될 수 있다.
일측에 있어서, 웹 페이지를 수신하는 단계는 Iframe(아이프레임) 태그를 사용하여 다수 개의 HTML 파일로 구성된 웹 페이지를 수신하며, 렌더링하는 단계는 상기 HTML 파일을 파싱(Parsing)하면서 상기 Iframe 태그를 처리할 수 있다.
또 다른 측면에 있어서, 웹 페이지를 수신하는 단계는 태그 파일의 Class 속성에 메인 화면에 대한 정보인 1차 속성과 서브 화면에 대한 정보인 2차 속성을 포함하고, 1차 속성과 2차 속성이 CSS(Cascading Style Sheet)에 정의된 웹 페이지를 수신하며, 렌더링하는 단계는 해석 프로그램을 이용하여 Class 속성 내의 태그 내용을 획득하고 렌더링(Rendering)할 수 있다.
또 다른 측면에 있어서, 웹 페이지를 수신하는 단계는 일부 구성이 메타데이터로 지정된 웹 페이지를 수신하며, 렌더링하는 단계는 해석 프로그램을 이용하여 태그 파일을 렌더링한 후 해석 프로그램을 이용하여 메타데이터를 다시 렌더링할 수 있다.
또 다른 측면에 있어서, 웹 페이지를 수신하는 단계는 DOM(Document Object Model) 트리 구조로 구성된 웹 페이지를 수신하며, 렌더링하는 단계는 웹 페이지를 파싱(Parsing)하여 필요한 정보를 추출할 수 있다.
또 다른 측면에 있어서, 웹 페이지를 디스플레이하는 단계를 포함하고, 디스플레이 단계는 웹 페이지에서 프라이머리 정보에 부합하는 메인 웹 페이지를 분할하여 디스플레이하거나, 웹 페이지에서 세컨드리 정보에 부합하는 서브 웹 페이지를 분할하여 디스플레이할 수 있다.
웹 페이지를 다중 스크린으로 분할하는 시스템에 있어서, 서버로부터 태그 파일에 프라이머리(Primary) 정보와 세컨드리(Secondary) 정보를 포함하는 웹 페이지를 수신하는 수신부; 및 웹 페이지를 렌더링(Rendering)하는 렌더링부를 포함하며, 프라이머리 정보는 영상, 이미지를 포함하는 메인 화면에 대한 정보이고, 세컨드리 정보는 상기 메인 화면의 부가 기능에 대한 정보인 것을 특징으로 하는 웹 페이지 스크린 분할 시스템이 제공될 수 있다.
웹 페이지의 태그 파일에 프라이머리(Primary) 정보와 세컨드리(Secondary) 정보를 표시하여 웹 페이지를 구성하고, 웹 페이지를 디스플레이 장치로 전송하는 것을 특징으로 하는 웹 페이지 스크린 분할 시스템이 제공될 수 있다.
태그 파일에 프라이머리 정보와 세컨드리 정보를 표시하여 구성되는 웹 페이지를 수신하고, 메인 스크린과 동기화하여 세컨드리 정보에 부합하는 서브 웹 페이지를 분할하여 디스플레이하는 것을 특징으로 하는 웹 페이지 스크린 분할 시스템이 제공될 수 있다.
본 발명의 실시예를 통해 N-Screen 에 대한 것으로, 제공되는 웹 페이지를 빠르고 쉽게 분할할 수 있는 시스템을 제공한다.
또한, 다수 개의 디스플레이 장치에서 하나의 웹 페이지를 사용자 인터페이스에 용이하도록 나누어 디스플레이할 수 있는 시스템을 제공한다.
도 1은 본 발명의 일실시예에 있어서, 웹 페이지 스크린 분할 방법을 실시하기 위한 시스템 환경을 도시한 것이다.
도 2는 본 발명의 일실시예에 있어서, 웹 페이지 스크린 분할의 실시예를 설명하기 위한 도면이다.
도 3은 본 발명의 일실시예에 있어서, 웹 페이지를 표시하는 브라우저의 기본 구조와 실시예에 에 해당되는 아이디어를 매핑한 것이다.
도 4는 본 발명의 일실시예에 있어서, 웹 페이지 스크린 분할 방법을 설명하기 위한 흐름도이다.
도 5는 본 발명의 일실시예에 있어서, 렌더링하는 단계에서 어떻게 스크린을 분할하는지 설명하기 위한 흐름도이다.
도 6은 본 발명의 일실시예에 있어서, 웹 페이지 스크린 분할 시스템의 구조를 설명하기 위한 블록도이다.
이하, 웹 페이지를 다중 스크린으로 분할하는 방법과 그 시스템에 대하여 첨부된 도면을 참조하여 자세히 설명한다.
도 1은 본 발명의 일실시예에 있어서, 웹 페이지를 다중 스크린으로 분할하는 시스템의 시스템 환경을 설명하기 위한 도면이다.
서버(110)는 웹 페이지를 구성하여 디스플레이를 위한 장치로 전송할 수 있는데, 본 발명의 웹 페이지 구성 방법은 다양하게 실시될 수 있다. 기본적으로는 하나의 웹 페이지를 구성하는 구조를 N-Screen 환경으로 나타내기 위해 메인 페이지 부분과 그 외의 서브 페이지 부분을 나누어 표시할 수 있다. 웹 페이지를 메인 부분과 서브 부분에 표시하여 구성함으로써, 브라우저에서 웹 페이지를 렌더링할 때에 디스플레이에 표시하고자 하는 페이지 부분을 구분할 수 있다.
예컨대, CSS(Cascading Style Sheet)나 Java Script(자바 스크립트)같은 해석 프로그램의 기술을 사용하거나, 웹 페이지의 구조에 메타 데이터(Meta Data) 형식을 포함하거나 또는, 하나의 웹 페이지를 여러 개의 HTML 등의 태그 파일로 구성하는 등의 다양한 방법이 적용될 수 있다.
여기서, 메인 스크린(120)은 서버(110)에서 구성된 웹 페이지를 수신하여 디스플레이하기 위한 것으로 웹 페이지의 메인 정보를 가지고 있는 메인 페이지를 노출하는 장치가 되며, 서브 스크린(120)은 마찬가지로 웹 페이지를 디스플레이하기 위한 것이며, 웹 페이지의 서브 정보를 가지는 서브 페이지를 노출하기 위한 장치가 된다.
메인 스크린(120)은 예컨대 스마트 TV, 컴퓨터의 모니터 등 대체적으로 큰 화면을 가지고, 서브 스크린(130)은 태블릿 기기, 스마트 폰 등의 전자기기가 이에 해당할 수 있다. 실시예에 있어서, 웹 페이지를 노출하기 위한 것으로 메인 스크린(120)과 서브 스크린(130) 모두 브라우저 기능을 포함할 수 있다.
서브 스크린(130)은 도면 상에 하나만 도시되어 있으나 하나 이상의 장치로 구성될 수 있고, 각 장치의 디스플레이는 각각이 웹 페이지의 다른 부분을 노출할 수 있다.
웹 페이지를 다중 스크린으로 분할하기 위해서 메인 스크린(120)과 서브 스크린(130)은 상호간의 동기화가 전제될 수 있는데, 이를 위해서 서브 스크린(130)이 메인 스크린(120)에 접속하는 등의 방법을 이용할 수 있으며, 유선 네트워크나 NFC(Near Field Communication) 등의 무선 통신 네트워크로 동기화될 수 있다.
본 발명의 실시예에 있어서, 서버(110)는 상기 설명된 다양한 방법을 통해 웹 페이지를 구성하여 메인 스크린(120)으로 전달하고, 메인 스크린(120)은 전달된 웹 페이지에 대한 정보를 서브 스크린(130)과 공유하는데, 이때 서브 스크린(130)에는 렌더링하여 서브 페이지가 구분된 웹 페이지를 전달할 수 있다.
또 다른 실시예로서, 서버(110)는 메인 스크린(120)과 서브 스크린(130)에 각각 웹 페이지를 전달할 수 있으며, 이에 메인 스크린(120)와 서브 스크린(130)은 각각 웹 페이지 스크린 분할 시스템을 포함하여 웹 페이지를 렌더링하는 과정에서 메인 페이지와 서브 페이지를 구분하여 표시할 수 있도록 할 수 있다. 이때, 메인 스크린(120)와 서브 스크린(130)은 연동되어 있어, 스크린 간의 데이터가 연동되어 서로에게 참조되도록 할 수 있다.
이하의 설명에서는 웹 페이지를 두 개의 스크린에 표시하기 위한 것으로 메인 페이지의 정보를 “프라이머리(Primary) 정보”로, 서브 페이지의 정보를 “세컨드리 정보”로 치환하여 설명할 수 있다.
도 2는 본 발명의 일실시예에 있어서, 웹 페이지를 분할하는 실시예를 설명하기 위한 도면이다. 도 2와 같이 동영상을 제공하는 웹 사이트에서 제공되는 웹 페이지(210)의 구성은 동영상을 노출하는 프라이머리 정보(211)와 관련 동영상 목록 등 하위 구성을 노출하는 세컨드리 정보(212)를 포함한다. 종래의 컴퓨터 모니터나 스마트 TV에서는 웹 페이지(210)의 구성을 하나의 스크린에 나타낸다.
본 발명의 실시예는 웹 페이지(210)의 구성을 다중 스크린으로 분할하여 분할된 스크린을 연동되어 있는 다수 개의 디스플레이 장치에서 각각 표시할 수 있는 방법을 제공한다. 실시예에 있어서, 메인 스크린(220)과 서브 스크린(230)은 도 1의 메인 스크린(120)과 서브 스크린(130)에 대응하는 것으로, 실시예에 따라 메인 스크린(220)은 프라이머리 정보(211)를 표시하고, 서브 스크린(230)은 세컨드리 정보(212)를 디스플레이에 노출한다.
예컨대, 도 2와 같이 동영상 제공 웹 페이지의 경우, 동영상, 이미지 등 사용자에게 주요하게 제공되는 메인 화면이 프라이머리 정보(211)에 해당하고, 관련 동영상의 목록과, 프라이머리 정보(211) 영상의 컨트롤러 바 등과 같은 부가 기능을 제공하는 서브 화면이 세컨드리(212) 정보에 해당할 수 있다.
실시예에 있어서, 메인 스크린(220)과 서브 스크린(230)의 화면 간의 데이터는 계속적으로 연동되어, 예컨대 동영상의 종류가 변경되면 이에 따라 실시간으로 추천 동영상 목록이 변경될 수 있으며, 이를 위해서 각 스크린은 데이터 연동 시스템을 포함할 수 있다.
앞서 설명한 바와 같이, 메인 스크린(220)과 서브 스크린(230)에 노출되는 화면은 웹 페이지이며, 따라서 각 스크린은 브라우저의 기능을 포함하고 있다.
도 3은 본 발명의 일실시예에 있어서, 스크린에 포함되는 브라우저의 기본 구조와 발명에 해당하는 아이디어를 매핑한 도면으로, 도 3의 브라우저는 일반적인 구성의 브라우저를 실시예에 맞게 개선한 것이다.
도 3에 도시된 브라우저는 여덟 개의 주요 구성으로 이루어지며, 각 구성은 종속적으로 구성으로 이루어진다. 사용자 인터페이스(310), 브라우저 엔진(320), 렌더링 엔진(330), 네트워킹 서브 시스템(340), 해석 프로그램 자바 스크립트(350), XML(eXtensible Markup Language) 파서(Parser)(360), 디스플레이 백엔드(Backend)(370), 그리고 데이터 퍼시스턴스(Persistence)(380)이 포함될 수 있다.
간단히 설명하면, 사용자 인터페이스(310)는 사용자와 브라우저의 상호작용을 위한 구성이고, 브라우저 엔진(320)은 쿼리와 렌더링 엔진(330)을 조작하기 위한 높은 수준의 인터페이스를 제공하기 위해 삽입되며, 렌더링 엔진(330)은 웹 페이지를 구성하는 HTML 문서, CSS를 통해 작성된 문서에 대한 파싱과 레이아웃을 수행하기 위한 구성이 된다.
또한, 자바 스크립트(350)는 HTML 등의 태그를 해석하기 위한 프로그램으로서 포함되고, XML 파서(360)는 브라우저에서 메타 데이터(Meta Data)를 지정하기 위한 것이며, 디스플레이 백엔드(370)는 그림, 사용자 인터페이스 위젯, 글꼴 등을 제공하기 위한 구성이 되고, 데이터 퍼시스턴스(380)는 북마크, 쿠키, 캐시(Cache) 등의 디스크 탐색 세션과 관련된 다양한 데이터를 저장하는 구성이다.
도 4는 본 발명의 일실시예에 있어서, 웹 페이지를 다중 스크린으로 분할하는 방법을 설명하기 위한 흐름도이다. 실시예에 있어서, 도 4의 웹 페이지 스크린 분할 방법은 도 1에 도시된 메인 스크린(120)에서, 또는 실시예에 따라서는 서브 스크린(130)에서도 실시될 수 있다.
메인 스크린(120)에서는 프라이머리 정보와 세컨드리 정보를 포함하는 웹 페이지를 수신할 수 있으며(410), 수신되는 웹 페이지는 서버로부터 생성된 것으로 다양한 방법을 통해 생성될 수 있으며, 서버는 도 3을 통해 설명한 브라우저에서 렌더링될 때에 프라이머리 정보와 세컨드리 정보가 구분될 수 있도록 웹 페이지를 생성한다.
이에, 서버에서 웹 페이지를 생성할 수 있는 방법에 대해서 자세히 설명한다. 기본적으로, 웹 페이지를 DOM(Document Object Model) 트리 구조로 생성하여 필요한 스크린 정보를 추출하도록 하는 방법이 존재한다.
첫 번째로, 웹 페이지를 구성하는 태그의 Class 속성에 프라이머리 정보와 세컨드리 정보의 속성을 추가할 수 있다. Class 속성은 스타일 시트를 적용하기 위해 태그를 분리하는데 이용되는 속성이다. 따라서, CSS에 프라이머리 정보와 세컨드리 정보의 내용을 각각 정의할 수 있다.
두 번째로, 메타 데이터를 이용하여 화면을 생성할 수 있다. 메타 데이터를 지정할 수 있는 방법은 많이 존재하나, 지정된 메타 데이터는 브라우저에서 다루어지기 때문에 브라우저에서 다룰 수 있는 예컨대, XML, JSON(JavaScript Object Notation)으로 한정하여 웹 페이지의 구조를 XML, JSON 등을 이용한 언어로 지정할 수 있다.
세 번째, 또 다른 방법으로, 메인 파일인 HTML 파일을 다수 개의 Iframe(아이 프레임)으로 구분하여 각 Iframe에 해당하는 HTML 파일로 화면을 구분할 수 있다. 예컨대, 메인 파일 ‘Screen.html’은 ‘Primary.html’과 ‘Secondary.html’의 두 개의 Iframe으로 구분되어 있고, ‘Primary.html’과 ‘Secondary.html’은 각각에 해당하는 웹 페이지 정보를 포함하여 구성될 수 있다.
상기와 같이, 다양한 방법으로 웹 페이지를 구성할 때 분할 정보를 포함하여 표현할 수 있으며, 이렇게 구성된 웹 페이지를 단계(410)에서 수신할 수 있다.
단계(410)에서 메인 스크린(120)은 수신한 웹 페이지를 렌더링할 수 있다. 상기에 설명한 바와 같이, 렌더링 과정에서 웹 페이지의 분할 정보가 구분될 수 있다. 도 5는 본 발명의 일실시예에 있어서, 이와 관련하여 렌더링 과정에서 어떻게 화면을 분할하는지를 설명하기 위한 순서도이다. 도 5의 실시예에는 브라우저를 통해 실시될 수 있으며, 서버에서 어떤 방법으로 웹 페이지를 구성했는지 탐색하고, 해당 방법에 대한 화면 분할 방법을 적용할 수 있다.
단계(510)에서는 웹 페이지가 여러 개의 HTML 파일로 구성되어 있는지 확인할 수 있다. 이는, 서버에서 웹 페이지를 생성하는 방법 중 세 번째에 해당하는 방법을 확인하기 위한 것으로, 여러 개의 HTML로 나뉘어 있다면, HTML 파일을 이용하여 화면을 분할할 수 있다(511). 실시예에 있어서, HTML 구문을 렌더링할 때 파싱(Parsing) 과정을 거치는데, 파싱 과정에서 Iframe 태그를 처리할 수 있다.
단계(510)에서 HTML로 구성되어 있지 않은 것으로 판단되면, 단계(520)에서 웹 페이지의 구조가 메타 데이터를 포함하고 있는지 확인할 수 있다. 보통의 브라우저 엔진이나 렌더링 엔진에서는 HTML, CSS 등 필요한 자원만을 사용하기 때문에 메타 데이터를 먼저 처리할 수 없는 구조로 되어 있다. 따라서, 웹 브라우저에서 메타 데이터를 사용하기 위해서는 한번 렌더링을 거친 후, 자바 스크립트와 같은 해석 프로그램을 사용하여 렌더링을 다시 거치는 방법으로 접근할 수 있다.
단계(520)에서 메타 데이터가 발견되면, 메타 데이터를 이용하여 화면을 분할할 수 있다(521). 브라우저에서는 XML Parser나 자바 스크립트를 사용하여 메타 데이터를 읽은 후에, 태그의 내용을 획득할 수 있다. 여기서, 자바 스크립트를 사용하면, 렌더 트리(Render Tree)에 직접 접근할 수 있게 되어, 렌더 트리 내용을 변경할 수 있게 된다.
또한, 단계(520)에서 메타 데이터의 존재가 발견되지 않으면, CSS에 분할 웹 페이지에 대한 정보가 구분이 되어 있는지 확인할 수 있다(530). 여기서, 웹 페이지를 구성하는 태그가 CSS로 구분되어 있는지 확인이 되면, 자바 스크립트와 같은 해석 프로그램을 통해 Class 속성 내의 HTML 내용을 획득할 수 있다(531).
실시예에 있어서, CSS는 브라우저에서 렌더링할 때 초기에 처리되며, CSS에 분할되는 웹 페이지에 대해 정의함으로써, 메인 스크린과 서브 스크린에서 어떻게 표시해야 할지 확인이 가능하다.
만약, 단계(510) 내지 단계(530) 중 어느 하나의 단계에서도 식별되지 않는 웹 페이지 정보에 대해서는 DOM 파싱을 이용하여 화면을 분할할 수 있다(540). 이에 대한 웹 페이지는 DOM 트리 구조로 형성된 것으로, 각 스크린에서 필요한 정보를 추출할 수 있다.
상기와 같이 프라이머리 정보와 세컨드리 정보를 구분할 수 있으며, 이에, 단계(430)에서는 구분한 분할 웹 페이지를 디스플레이할 수 있다. 실시예에 있어서, 메인 스크린(120)에서는 프라이머리 정보를 포함한 웹 페이지를 노출하며, 서브 스크린(130)에서는 세컨드리 정보를 포함한 웹 페이지를 디스플레이할 수 있다. 여기서, 메인 스크린(120)과 서브 스크린(130)의 화면 간 데이터는 계속적으로 연동될 수 있다.
도 6은 본 발명의 일실시예에 있어서, 웹 페이지 스크린 분할 시스템의 구성을 설명하기 위한 블록도이다. 웹 페이지 스크린 분할 시스템(600)은 도 4를 통해 설명한 웹 페이지의 다중 스크린 분할 방법을 실시하기 위한 구성을 구비한 시스템에 해당한다. 이에 웹 페이지 스크린 분할 시스템(600)은 수신부(610), 렌더링부(620), 그리고 디스플레이부(630)를 포함하여 구성될 수 있다.
수신부(610)는 웹 페이지를 수신하는데, 웹 페이지는 서버로부터 수신한 것으로서 웹 페이지를 분할하는 기준 정보가 되는 프라이머리 정보와 세컨드리 정보를 포함하고 있다.
실시예에 있어서, 서버에서 생성되는 웹 페이지는 다양한 방법을 통해 분할 정보를 표시할 수 있는데, 예컨대, CSS에 프라이머리 정보와 세컨드리 정보를 정의하고 그 속성을 태그의 Class 속성에 추가함으로써 포함할 수 있고, 또는 XML, JSON 등의 언어를 통해 웹 페이지의 일부나 그에 상응하는 위치에 웹 페이지 구조를 지정할 수 있다. 혹은, 하나의 웹 페이지를 Iframe 태그를 사용하여 여러 개의 HTML 파일로 구성함으로써 프라이머리 정보와 세컨드리 정보를 구분하여 표시할 수 있으며, 수신부(610)에서는 이와 같이 생성된 웹 페이지를 수신한다.
렌더링부(620)에서는 수신한 웹 페이지를 렌더링하여 프라이머리 정보와 세컨드리 정보를 구분한다. 실시예에 있어서, 렌더링 과정은 수신부(610)에서 수신한 웹 페이지의 구성이 어떻게 이루어졌는가에 따라 달리 실시되는데, 도 5와 같이 순차적인 검증에 따라 실시될 수 있거나, 또는 웹 페이지의 수신 정보에 기반하여 알맞은 렌더링 방법을 실시할 수도 있다.
실시예에 있어서, 여러 개의 HTML로 나뉘어 있다면, HTML 파일을 이용하여 화면을 분할할 수 있는데, 이때, HTML 구문을 렌더링할 때 파싱(Parsing) 과정을 거치고, 파싱 과정에서 Iframe 태그를 처리할 수 있다. 또는, 웹 페이지 정보에서 메타 데이터가 발견되면, 메타 데이터를 이용하여 화면을 분할할 수 있는데, 브라우저에서는 XML Parser나 자바 스크립트를 사용하여 메타 데이터를 읽은 후에, 태그의 내용을 획득할 수 있다.
더불어, 웹 페이지를 구성하는 태그가 CSS로 구분되어 있는지 확인되면, 자바 스크립트와 같은 해석 프로그램을 통해 태그의 Class 속성 내의 HTML 내용을 획득할 수 있다. 또한, 상기와 같은 방법으로 웹 페이지의 구분이 되지 않는 경우에 대해서는 DOM 파싱을 이용하여 화면을 분할할 수 있다.
디스플레이부(630)에서는 프라이머리 정보와 세컨드리 정보를 구분해낸 웹 페이지를 스크린에 디스플레이하는데, 메인 스크린에 대해서는 프라이머리 정보를 노출하며, 서브 스크린에서는 세컨드리 정보를 노출한다.
도 6을 설명하면서 생략된 부분은 실시예에 따라서 도 4 내지 도 5의 실시예를 참조할 수 있다.
실시예에 있어서, 서버는 웹 페이지를 다양한 방법으로 구성하고 스크린으로 전송하는데, 메인 스크린으로만 전송하거나 또는 메인 스크린과 서브 스크린 모두로 웹 페이지를 전송할 수 있으며, 이에 따라 서브 스크린은 서버 또는 메인 스크린으로부터 웹 페이지의 수신이 가능하다. 이때, 서브 스크린은 브라우저 기능을 포함하고, 렌더링을 통해 세컨드리 정보를 구분하여 디스플레이에 노출할 수 있다.
이와 같은 실시예를 통해, 웹 페이지를 효율적으로 N-Screen으로 분할하기 위한 웹 페이지 분할 방법과, 웹 페이지의 분할이 빠르고 쉬운 시스템을 제공할 수 있게 되며, 다수 개의 디스플레이 장치에서 하나의 웹 페이지를 사용자 인터페이스에 용이하도록 나누어 디스플레이할 수 있다.
실시예에 따른 웹 페이지를 다중 스크린으로 분할하는 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 실시예들을 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다.
컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다. 하드웨어 장치는 실시예들의 동작을 수행하기 위해 하나 이상의 소프트웨어 모듈로서 작동하도록 구성될 수 있으며, 그 역도 마찬가지이다.
이상과 같이 실시예들이 비록 한정된 실시예와 도면에 의해 설명되었으나, 해당 기술분야에서 통상의 지식을 가진 자라면 상기의 기재로부터 다양한 수정 및 변형이 가능하다. 예를 들어, 설명된 기술들이 설명된 방법과 다른 순서로 수행되거나, 및/또는 설명된 시스템, 구조, 장치, 회로 등의 구성요소들이 설명된 방법과 다른 형태로 결합 또는 조합되거나, 다른 구성요소 또는 균등한 것들에 의하여 대치되거나 치환되더라도 적절한 결과가 달성될 수 있다.
그러므로, 다른 구현들, 다른 실시예들 및 특허청구범위와 균등한 것들도 후술하는 특허청구범위의 범위에 속한다.
110: 서버
120: 메인 스크린
130: 서브 스크린
600: 웹 페이지 스크린 분할 시스템
610: 수신부
620: 렌더링부
630: 디스플레이부

Claims (14)

  1. 웹 페이지를 다중 스크린으로 분할하는 방법에 있어서,
    서버로부터 태그 파일에 프라이머리(Primary) 정보와 세컨드리(Secondary) 정보를 포함하는 상기 웹 페이지를 수신하는 단계; 및
    상기 웹 페이지를 렌더링(Rendering)하는 단계를 포함하며,
    상기 프라이머리 정보는 영상, 이미지를 포함하는 메인 화면에 대한 정보이고, 상기 세컨드리 정보는 상기 메인 화면의 부가 기능에 대한 정보이고,
    상기 서버에서는 Iframe(아이프레임) 태그를 사용하여 메인 화면에 대한 정보와 서브 화면에 대한 정보를 구분한 다수 개의 HTML 파일로 구성된 웹 페이지, 메인 화면에 대한 정보와 서브 화면에 대한 정보가 메타데이터로 지정된 웹 페이지, 상기 태그 파일의 Class 속성에 메인 화면에 대한 정보인 1차 속성과 서브 화면에 대한 정보인 2차 속성이 포함되어 상기 1차 속성과 상기 2차 속성이 CSS(Cascading Style Sheet)에 정의된 웹 페이지, 및 DOM(Document Object Model) 트리 구조로 구성된 웹 페이지 중 어느 하나의 형태로 웹 페이지를 생성하며,
    상기 렌더링하는 단계는,
    (1) 상기 웹 페이지가 다수 개의 HTML 파일로 구성되어 있는 경우, 상기 HTML 파일을 파싱(Parsing)하면서 상기 Iframe 태그를 처리하고, (2) 상기 웹 페이지의 구조가 메타 데이터를 포함하고 있는 경우, 해석 프로그램을 이용하여 상기 태그 파일을 렌더링한 후 해석 프로그램을 이용하여 상기 메타데이터를 다시 렌더링하고, (3) 상기 웹 페이지를 구성하는 태그가 CSS로 구분되어 있는 경우 해석 프로그램을 이용하여 상기 Class 속성 내의 태그 내용을 획득하고 렌더링하고, (4) 상기 (1) 내지 (3)의 경우에 해당되지 않으면 상기 웹 페이지의 DOM 파싱(Parsing)을 통해 필요한 정보를 추출함으로써 상기 웹 페이지에서 상기 프라이머리 정보와 상기 세컨드리 정보를 구분하는 것
    을 특징으로 하는 웹 페이지 스크린 분할 방법.
  2. 삭제
  3. 삭제
  4. 삭제
  5. 삭제
  6. 제1항에 있어서,
    상기 웹 페이지를 디스플레이하는 단계를 포함하고,
    상기 디스플레이 단계는 상기 웹 페이지에서 상기 프라이머리 정보에 부합하는 메인 웹 페이지를 분할하여 디스플레이하거나,
    상기 웹 페이지에서 상기 세컨드리 정보에 부합하는 서브 웹 페이지를 분할하여 디스플레이하는 것
    을 특징으로 하는 웹 페이지 스크린 분할 방법.
  7. 웹 페이지를 다중 스크린으로 분할하는 시스템에 있어서,
    서버로부터 태그 파일에 프라이머리(Primary) 정보와 세컨드리(Secondary) 정보를 포함하는 상기 웹 페이지를 수신하는 수신부; 및
    상기 웹 페이지를 렌더링(Rendering)하는 렌더링부를 포함하며,
    상기 프라이머리 정보는 영상, 이미지를 포함하는 메인 화면에 대한 정보이고, 상기 세컨드리 정보는 상기 메인 화면의 부가 기능에 대한 정보이고,
    상기 서버에서는 Iframe(아이프레임) 태그를 사용하여 메인 화면에 대한 정보와 서브 화면에 대한 정보를 구분한 다수 개의 HTML 파일로 구성된 웹 페이지, 메인 화면에 대한 정보와 서브 화면에 대한 정보가 메타데이터로 지정된 웹 페이지, 상기 태그 파일의 Class 속성에 메인 화면에 대한 정보인 1차 속성과 서브 화면에 대한 정보인 2차 속성이 포함되어 상기 1차 속성과 상기 2차 속성이 CSS(Cascading Style Sheet)에 정의된 웹 페이지, 및 DOM(Document Object Model) 트리 구조로 구성된 웹 페이지 중 어느 하나의 형태로 웹 페이지를 생성하며,
    상기 렌더링부는,
    (1) 상기 웹 페이지가 다수 개의 HTML 파일로 구성되어 있는 경우, 상기 HTML 파일을 파싱(Parsing)하면서 상기 Iframe 태그를 처리하고, (2) 상기 웹 페이지의 구조가 메타 데이터를 포함하고 있는 경우, 해석 프로그램을 이용하여 상기 태그 파일을 렌더링한 후 해석 프로그램을 이용하여 상기 메타데이터를 다시 렌더링하고, (3) 상기 웹 페이지를 구성하는 태그가 CSS로 구분되어 있는 경우 해석 프로그램을 이용하여 상기 Class 속성 내의 태그 내용을 획득하고 렌더링하고, (4) 상기 (1) 내지 (3)의 경우에 해당되지 않으면 상기 웹 페이지의 DOM 파싱(Parsing)을 통해 필요한 정보를 추출함으로써 상기 웹 페이지에서 상기 프라이머리 정보와 상기 세컨드리 정보를 구분하는 것
    을 특징으로 하는 웹 페이지 스크린 분할 시스템.
  8. 삭제
  9. 삭제
  10. 삭제
  11. 삭제
  12. 제7항에 있어서,
    상기 웹 페이지를 디스플레이하는 디스플레이부를 포함하고,
    상기 디스플레이부는 상기 웹 페이지에서 상기 프라이머리 정보에 부합하는 메인 웹 페이지를 분할하여 디스플레이하거나,
    상기 웹 페이지에서 상기 세컨드리 정보에 부합하는 서브 웹 페이지를 분할하여 디스플레이하는 것
    을 특징으로 하는 웹 페이지 스크린 분할 시스템.
  13. 삭제
  14. 삭제
KR1020120139963A 2012-12-05 2012-12-05 다중 스크린 장치 사용을 위한 웹 페이지 스크린 분할 방법 및 시스템 KR101370714B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020120139963A KR101370714B1 (ko) 2012-12-05 2012-12-05 다중 스크린 장치 사용을 위한 웹 페이지 스크린 분할 방법 및 시스템

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020120139963A KR101370714B1 (ko) 2012-12-05 2012-12-05 다중 스크린 장치 사용을 위한 웹 페이지 스크린 분할 방법 및 시스템

Publications (1)

Publication Number Publication Date
KR101370714B1 true KR101370714B1 (ko) 2014-03-10

Family

ID=50647671

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020120139963A KR101370714B1 (ko) 2012-12-05 2012-12-05 다중 스크린 장치 사용을 위한 웹 페이지 스크린 분할 방법 및 시스템

Country Status (1)

Country Link
KR (1) KR101370714B1 (ko)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107086355A (zh) * 2017-06-10 2017-08-22 新开普电子股份有限公司 一种具有平板显示器和nfc天线的电子装置

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2005284886A (ja) * 2004-03-30 2005-10-13 Toshiba Corp 情報表示システム
KR20080082023A (ko) * 2006-11-30 2008-09-11 숭실대학교산학협력단 웹 페이지 분할을 이용한 모바일 인터넷 기반의 웹 콘텐츠제공방법 및 제공시스템
JP2012512483A (ja) * 2008-12-16 2012-05-31 リッチ メディア クラブ エルエルシー コンテンツレンダリング制御システム及び方法

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2005284886A (ja) * 2004-03-30 2005-10-13 Toshiba Corp 情報表示システム
KR20080082023A (ko) * 2006-11-30 2008-09-11 숭실대학교산학협력단 웹 페이지 분할을 이용한 모바일 인터넷 기반의 웹 콘텐츠제공방법 및 제공시스템
JP2012512483A (ja) * 2008-12-16 2012-05-31 リッチ メディア クラブ エルエルシー コンテンツレンダリング制御システム及び方法

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107086355A (zh) * 2017-06-10 2017-08-22 新开普电子股份有限公司 一种具有平板显示器和nfc天线的电子装置
CN107086355B (zh) * 2017-06-10 2024-03-15 新开普电子股份有限公司 一种具有平板显示器和nfc天线的电子装置

Similar Documents

Publication Publication Date Title
US10956531B2 (en) Dynamic generation of mobile web experience
US11580175B2 (en) Transcoding and serving resources
US20190251143A1 (en) Web page rendering method and related device
US8521892B2 (en) Method and apparatus for controlling web page advertisement through incentives and restrictions
JP2019530921A (ja) 提示するためのネイティブコンテンツをサーバ側でレンダリングするための方法およびシステム
JP5930497B2 (ja) テンプレートファイルの処理方法及び装置
US20150279310A1 (en) Information processing terminal, display terminal, and display method
US20120144291A1 (en) Apparatus and method for controlling web browser display
WO2015090064A1 (zh) 页面渲染方法及装置
JP6975339B2 (ja) デジタルコンポーネントのバックドロップレンダリング
US8994748B2 (en) Anchors for displaying image sprites, sub-regions and 3D images
JP2014029701A (ja) モバイル装置のための文書処理
CN109683978B (zh) 一种流式布局界面渲染的方法、装置以及电子设备
JP2008226202A (ja) 情報処理装置および方法、並びにプログラム
US20150281334A1 (en) Information processing terminal and information processing method
US20140258816A1 (en) Methodology to dynamically rearrange web content for consumer devices
CN106951405B (zh) 基于排版引擎的数据处理方法及装置
KR101370714B1 (ko) 다중 스크린 장치 사용을 위한 웹 페이지 스크린 분할 방법 및 시스템
KR101079966B1 (ko) 웹페이지에서의 동영상 재생을 지원하는 이동통신단말기 및 웹페이지에서의 동영상 재생 지원 방법
JP6109443B1 (ja) コンテンツ表示装置、コンテンツ表示システム、コンテンツ表示方法、及びコンテンツ表示プログラム
KR101673937B1 (ko) 바로 가기 객체의 생성 및 사용을 위한 장치, 시스템 및 방법
KR101262493B1 (ko) Ｕｘ 특성을 갖춘 웹 기반 프레임워크를 제공하는 시스템 및 방법
JP2011048730A (ja) ウェブページ閲覧アシスト方法
JP2009176176A (ja) ウェブページ配信装置
KR101372580B1 (ko) 브라우저 ｕｉ를 제공하기 위한 방법, 단말 장치, 서버 및 컴퓨터 판독 가능한 기록 매체

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20170125

Year of fee payment: 4

LAPS Lapse due to unpaid annual fee