KR101604838B1 - 웹페이지의 구성방법 - Google Patents

웹페이지의 구성방법 Download PDF

Info

Publication number
KR101604838B1
KR101604838B1 KR1020140066042A KR20140066042A KR101604838B1 KR 101604838 B1 KR101604838 B1 KR 101604838B1 KR 1020140066042 A KR1020140066042 A KR 1020140066042A KR 20140066042 A KR20140066042 A KR 20140066042A KR 101604838 B1 KR101604838 B1 KR 101604838B1
Authority
KR
South Korea
Prior art keywords
web page
left column
column
displayed
excess portion
Prior art date
Application number
KR1020140066042A
Other languages
English (en)
Other versions
KR20150137709A (ko
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 KR1020140066042A priority Critical patent/KR101604838B1/ko
Publication of KR20150137709A publication Critical patent/KR20150137709A/ko
Application granted granted Critical
Publication of KR101604838B1 publication Critical patent/KR101604838B1/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]
    • 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/0483—Interaction with page-structured environments, e.g. book metaphor
    • 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G06F3/04855—Interaction with scrollbars

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)
  • User Interface Of Digital Computer (AREA)

Abstract

본 발명은 웹페이지의 구성방법에 관한 것으로서, 특히 웹페이지 구성장치가 가로방향으로 회전된 경우 웹페이지를 좌우영역으로 분할하여 웹페이지의 구성요소를 좌우영역에 순차적으로 디스플레이함으로서 웹페이지에 대한 가독성을 향상시킬 수 있는 효과가 있다.

Description

웹페이지의 구성방법{METHOD OF PROVIDING INTERNET WEBPAGES}
본 발명은 웹브라우저를 통해 웹페이지를 제공하는 방법에 관한 것으로, 특히 웹페이지 구성장치가 가로방향으로 회전된 경우 웹페이지를 좌우영역으로 분할하여 웹페이지의 구성요소를 좌우영역에 순차적으로 디스플레이함으로서 웹페이지에 대한 가독성을 향상시킬 수 있는 웹페이지의 구성방법에 관한 것이다.
이동통신분야는 급속도로 발전하고 있으며, 이러한 이동통신단말기에는 셀룰러폰, PCS폰, GSM단말기, 스마트패드 등이 있다. 이와 같이 이동통신분야가 다양화되고 이동통신단말기의 보급이 확대됨에 따라 카메라기능, MP3 재생기능, DMB시청기능, 문서표시기능, 이메일기능 등 다양한 부가서비스가 이동통신단말기에 구현되고 있다. 특히, 이동통신기능이 생략되고 WiFi 등의 무선통신기능이 탑재된 아이팟, 갤럭시플레이, 스마트패드 등의 전자단말기가 생산 및 널리 보급되고 있다.
종래의 이동통신단말기 등의 전자단말기의 스크린은 3.5인치 이하로 화면크기가 작아 휴대성은 좋으나, 글자가 작아 가독성이 좋지 않은 단점이 있었다.
그러나, 근래에 들어 웹페이지의 가독성, 동영상의 재생, 문서의 읽기 및 편집을 향상시키기 위해 전자단말기의 스크린이 4인치를 넘어 4.7인치 내지 5.9인치를 가진 전자단말기가 주류를 차지하고 있는 실정이다.
그리고, 웹페이지는 이미지 등이 포함되어 있지만, 텍스트 구성이 대부분을 차지하고 있고, 전자단말기의 스크린의 경우 대부분 화변비율이 16:9, 16:10, 15:9 등으로 가로와 세로의 길이비가 동일하지 않고 다르다. 웹페이지의 경우 세로방향으로 회전한 상태에서 세로모드로 볼 경우 책의 페이지와 같이 가독성이 우수한 반면, 가로모드로 볼 경우 가독성이 저하되는 문제가 있다.
도 1은 가로모드시 웹페이지(30)와 웹페이지(30) 상에 표시될 텍스트, 이미지 등의 구성요소(50)를 나타내는 도면이다. 그리고 가로모드로 볼 경우 도 2와 같이 좌우에 여백이 형성되고 중간부분에 세로모드와 비슷한 글자수로 디스플레이되나, 세로모드에 비해 텍스트의 줄수가 적어 가독량이 적을 뿐만 아니라 가독성이 좋지 못하는 문제가 있다.
한편, 특허문헌 1은 이동통신 단말기의 사용자가 웹페이지 화면을 원하는 크기로 분할하여 표시할 수 있도록 하는 웹페이지 표시가 가능한 이동통신 단말기 및 그 제어방법에 관한 것으로서, 웹페이지 화면크기보다 작은 표시영역을 가지는 디스플레이부를 이용해 웹페이지를 편리하게 볼 수 있는 이점은 있으나, 여전히 종래와 같이 단말기를 가로방향으로 회전시키면 가독량 및 가독성이 좋지 못하다.
등록특허 제0844071호
상기와 같은 종래의 문제점을 해결하기 위한 본 발명은 전자단말기 등의 웹페이지 구성장치를 가로방향으로 회전시킨 상태, 즉 가로모드일 경우에도 가독성을 향상시킬 수 있는 웹페이지의 구성방법을 제공함에 그 목적이 있다.
이와 같은 목적을 달성하기 위한 본 발명은,
웹브라우저가 실행되어 웹페이지를 터치스크린에 디스플레이하는 웹페이지의 구성방법에 있어서,
상기 터치스크린이 가로방향으로 회전된 경우 웹페이지를 좌측열과 우측열로 분할하여 웹페이지의 구성요소를 상기 좌측열과 상기 우측열에 순차적으로 디스플레이하는 것을 특징으로 하는 웹페이지의 구성방법을 제공한다.
그리고 본 발명은 웹브라우저가 실행되어 웹페이지를 터치스크린에 디스플레이하는 웹페이지의 구성방법에 있어서,
상기 터치스크린의 회전방향이 가로 또는 세로인지 판단하는 방향판단단계와;
상기 터치스크린의 회전방향이 가로인 경우 상기 웹페이지를 좌측열 및 우측열로 분할하는 분할단계와;
상기 웹페이지를 구성하는 요소를 로드하여 상기 좌측열의 표시범위 내에서 상기 웹페이지의 좌측열에 디스플레이하고, 상기 웹페이지를 구성하는 요소 중 상기 좌측열의 표시범위를 초과하는 제1초과부분을 상기 우측열에 순차적으로 디스플레이하는 디스플레이단계;를 포함하여 이루어지는 것을 특징으로 하는 웹페이지의 구성방법을 제공한다.
특히, 상기 웹페이지를 구성하는 요소가 상기 좌측열의 표시범위를 초과하는 경우에 한하여 상기 분할단계가 실행되는 것이 좋다.
그리고 상기 디스플레이단계에서 상기 우측열에 상기 좌측열의 표시범위를 초과하는 제 1초과부분이 디스플레이된 경우 상기 우측열에 세로방향의 스크롤바를 디스플레이하는 것을 특징으로 하는 웹페이지의 구성방법.
나아가, 상기 좌측열에 대한 세로방향 스크롤이벤트가 감지되는 경우 상기 스크롤이벤트의 방향 및 스크롤정도에 따라 상기 좌측열 및 상기 우측열에 디스플레이된 요소부분들을 세로방향으로 이동시키고,
상기 우측열에 대한 세로방향 스크롤이벤트가 감지되는 경우 상기 스크롤이벤트의 방향 및 스크롤정도에 따라 상기 좌측열 및 상기 우측열에 디스플레이된 요소부분들을 세로방향으로 이동시키는 것이 바람직하다.
그리고, 상기 좌측열에 대한 가로방향 스크롤이벤트가 감지된 경우 상기 좌측열에 상기 웹페이지를 구성하는 요소 중 제1 초과부분을 디스플레이하고, 상기 우측열에 상기 웹페이지를 구성하는 요소 중 제1 초과부분을 초과하는 제2 초과부분을 디스플레이할 수 있다.
또한, 상기 우측열에 대한 가로방향 스크롤이벤트가 감지된 경우 상기 좌측열에 상기 웹페이지를 구성하는 요소 중 제1 초과부분을 디스플레이하고, 상기 우측열에 상기 웹페이지를 구성하는 요소 중 제1 초과부분을 초과하는 제2 초과부분을 디스플레이할 수 있다.
아울러, 상기 좌측열에 대한 가로방향 스크롤이벤트가 감지된 경우 상기 좌측열에 상기 웹페이지를 구성하는 요소 중 제1 초과부분을 초과하는 제2 초과부분을 디스플레이하고, 상기 우측열에 상기 웹페이지를 구성하는 요소 중 제2 초과부분을 초과하는 제3 초과부분을 디스플레이할 수도 있다.
본 발명의 웹페이지의 구성방법은 전자단말기 등의 웹페이지 구성장치를 가로방향으로 회전시킨 상태, 즉 가로모드일 경우에 웹페이지를 좌측열 및 우측열로 분할하고, 좌측열 및 우측열에 순차적으로 웹페이지를 구성하는 요소를 순차적으로 디스플레이함으로서 종래와 같이 좌우 공백없이 세로모드와 비슷한 글자수(한줄을 이루는 글자수)로 디스플레이할 수 있는 등 가독성을 향상시킬 수 있는 효과가 있다.
특히, 전자단말기의 스크린이 4.7인치 이상으로 확대되고 있어, 가로모드시 웹페이지를 좌측열 및 우측열로 분할하더라도 글자크기를 종래와 같이 유지한 상태로 텍스트를 디스플레이를 할 수 있어, 더 많은 양의 텍스트를 표시할 수 있을 뿐만 아니라 가독성을 향상시킬 수 있다.
도 1은 터치스크린의 가로모드시 웹페이지와 웹페이지 상에 표시될 구성요소를 나타내는 도면이고,
도 2는 터치스크린의 실제 가로모드시 웹페이지 상에 표시되는 구성을 나타내는 도면이고,
도 3은 터치스크린의 가로모드시 웹페이지의 구성요소가 좌측열과 우측열에 순차적으로 디스플레이된 상태를 개략적으로 나타내는 도면이고,
도 4는 터치스크린의 회전방향에 따른 웹페이지의 디스플레이 과정을 개략적으로 나타내는 순서도이고,
도 5는 좌측열에 대한 세로방향 스크롤이벤트 발생된 상태를 개략적으로 나타내는 도면이고,
도 6은 우측열에 대한 세로방향 스크롤이벤트 발생된 상태를 개략적으로 나타내는 도면이고,
도 7은 좌측열에 대한 가로방향 스크롤이벤트가 발생된 일예를 개략적으로 나타내는 도면이고,
도 8은 우측열에 대한 가로방향 스크롤이벤트가 발생된 상태를 개략적으로 나타내는 도면이고,
도 9는 좌측열에 대한 가로방향 스크롤이벤트가 발생된 다른예를 개략적으로 나타내는 도면이다.
이하, 본 발명의 웹페이지의 구성방법의 실시예를 도면을 참조하여 설명하면 다음과 같고, 본 발명의 권리범위는 하기의 실시예에 한정되는 것은 아니다.
본 발명의 웹페이지의 구성방법은 인터넷망을 통해 웹서버에 저장된 웹페이지를 터치스크린에 디스플레이하는 웹페이지 구성장치에 의해 제공된다.
상기 웹페이지 구성장치는 웹페이지를 읽을 수 있는 익스플로러, 파이어폭스, 사파리, 크롬 등의 웹브라우저를 탑재하여 인터넷 망을 통해 웹서버로부터 웹페이지를 전송받을 수 있는 모든 기기를 통칭한다.
예를 들면, 상기 웹페이지 구성장치로서 이동통신기능이 탑재된 스마트폰, 스마트패드, WiFi 등의 무선기능이 탑재된 MP3플레이어, 전자책 등의 전자단말기 등이 있다.
그리고 상기 웹브라우저는 사용자가 인터넷 망을 통해 제공되는 웹페이지를 볼 수 있도록 해주는 응용 프로그램으로서, 웹서버로부터 웹페이지를 제공받아 처리하기 위한 클라이언트 프로그램이다.
상기 웹페이지 구성장치는 인터넷 망을 통해 웹페이지를 웹서버에 요청하여 제공받는 네트워크 연결부와, 상기 네트워크 연결부로부터 전달받은 웹페이지를 로드하고 로드된 웹페이지를 분석하며 분석결과에 따라 웹페이지를 렌더링하는 제어부와, 상기 제어부에 의해 렌더링된 웹페이지를 전달받아 디스플레이하고 사용자 이벤트를 입력하는 터치스크린과, 운영체제, 웹브라우저 및 웹페이지 등이 저장되는 저장부와를 포함하여 구성되고, 상기 웹페이지의 구성장치에는 구성장치의 상하좌우의 움직임을 검출하여 가로방향으로 회전(가로모드)과 세로방향으로 회전(세로모드)을 판단할 수 있는 자이로센서(Gyro Sensor) 등의 방향센서가 구비된다.
도 3은 터치스크린(10)의 가로모드시 웹페이지의 구성요소가 좌측열(310)과 우측열(330)에 순차적으로 디스플레이된 상태를 개략적으로 나타내는 도면이고, 도 4는 터치스크린(10)의 회전방향에 따른 웹페이지(30)의 디스플레이 과정을 개략적으로 나타내는 순서도이다.
본 발명의 웹페이지의 구성방법은 도 3에서 보는 바와 같이 상기 터치스크린(10)이 좌우로 길게 보이도록 사용자에 의해 가로방향으로 회전된 경우,
상기 터치스크린(10)의 중심부 상하수직선(350)을 기준으로 상기 웹페이지(30)를 상기 터치스크린(10)의 좌측과 상기 터치스크린(10)의 우측에 각각 좌측열(310)과 우측열(330)로 2분할하여 상기 웹페이지(30)의 텍스트, 이미지 등의 구성요소(50)를 상기 좌측열(310)과 상기 우측열(330)에 순차적으로 디스플레이한다.
상기 터치스크린(10)이 상하로 길게 보이도록 사용자에 의해 세로방향으로 회전된 경우, 상기 터치스크린(10)의 전체 화면에 상기 웹페이지(30)의 텍스트, 이미지 등의 구성요소(50)는 2분할되지 않고 하나의 단일열로서 디스플레이된다.
본 발명인 웹페이지의 구성방법은 크게, 방향판단단계, 분할단계 및 디스플레이단계를 포함하여 이루어진다.
먼저, 상기 방향판단단계는 상기 웹페이지 구성장치에 구비된 자이로센서 등의 방향센서를 를 통해 상기 웹페이지 구성장치의 터치스크린(10)의 회전방향이 가로 또는 세로인지 판단하는 단계이다.
다음으로, 상기 분할단계는 상기 터치스크린(10)의 회전방향이 가로인 경우 상기 웹페이지(30)를 도 3에서 보는 바와 같이 좌측열(310)과 우측열(330)로 분할하는 단계이다.
특히, 상기 분할단계는 텍스트, 이미지 등으로 이루어질 수 있는 상기 웹페이지(30)의 구성요소(50)가 상기 좌측열(310)의 표시범위를 초과하는 경우에 한하여 실행된다.
사용자가 손가락을 오므리거나 펴는 동작을 통해 상기 터치스크린(10)의 좌측열(310)과 상기 우측열(330)에 디스플레이되는 텍스트, 이미지 등의 구성요소(50)가 확대 및 축소될 수 있다.
다음으로, 상기 디스플레이단계는 상기 네트워크 연결부에 의해 인터넷망을 통해 웹서버로부터 텍스트, 이미지 등으로 이루어질 수 있는 상기 웹페이지(30)의 구성요소(50)를 로드하여 상기 좌측열(310)의 표시범위내에서 상기 웹페이지(30)의 좌측열(310)에 디스플레이하고,
특히, 상기 웹페이지(30)의 구성요소(50) 중 상기 좌측열(310)의 표시범위를 초과하는 제 1초과부분(520)을 도 3에서 보는 바와 같이 상기 우측열(330)에 순차적으로 디스플레이하는 단계이다.
다음으로, 상기 디스플레이단계에서 상기 제 1초과부분(520)이 상기 좌측열(310)의 표시범위를 초과하는 경우 상기 우측열(330)의 우측방향에 위치하도록 상기 터치스크린(10)의 우측에는 상하방향으로 길게 세로방향의 스크롤바(40)가 디스플레이될 수 있다.
도 5는 좌측열(310)에 대한 세로방향 스크롤이벤트 발생된 상태를 개략적으로 나타내는 도면이고, 도 6은 우측열(330)에 대한 세로방향 스크롤이벤트 발생된 상태를 개략적으로 나타내는 도면이다.
다음으로, 도 5에서 보는 바와 같이 상기 좌측열(310)에 대한 세로방향 스크롤이벤트가 감지되는 경우, 상기 스크롤이벤트의 방향 및 스크롤정도에 따라 상기 좌측열(310) 및 상기 우측열(330)에 디스플레이된 웹페이지(30)의 구성요소(50)부분들을 세로방향으로 이동(도 5의 화살표 참조.)시킬 수 있다.
보다 구체적으로, 먼저, 사용자가 손가락을 이용하여 도 5에서 보는 바와 같이 상기 좌측열(310)에 디스플레이된 텍스트, 이미지 등의 웹페이지(30)의 구성요소(50)부분들을 상기 터치스크린(10)의 상부방향으로 밀어올리게 되면,
상기 좌측열(310)의 표시범위내의 텍스트, 이미지 등으로 이루어지는 상기 웹페이지(30)의 구성요소(510)와 함께 상기 우측열(330)에 디스플레이된 텍스트, 이미지 등으로 이루어지는 제 1초과부분(520)이 상기 터치스크린(10)의 상부방향으로 스크롤이동될 수 있고,
이 과정 중에 텍스트, 이미지 등으로 이루어질 수 있는 상기 제 1초과부분(520)의 일부분(520a)은 상기 좌측열(310)의 하측에 디스플레이되면서 상기 터치스크린(10)의 상부방향으로 스크롤이동될 수 있다.
또한, 상기 우측열(330)의 하측에는 상기 제 1초과부분(520)을 초과하는 텍스트, 이미지 등으로 이루어질 수 있는 제 2초과부분(도 7의 530)의 일부분(530a)이 디스플레이되면서 상기 터치스크린(10)의 상부방향으로 스크롤이동될 수 있다.
사용자가 손가락을 이용하여 상기 좌측열(310)에 디스플레이된 텍스트, 이미지 등의 웹페이지(30)의 구성요소(50)부분들을 상기 터치스크린(10)의 하부방향으로 밀어내리게 되면,
상기 좌측열(310)의 표시범위내의 텍스트, 이미지 등으로 이루어지는 상기 웹페이지(30)의 구성요소(510)와 함께 상기 우측열(330)에 디스플레이된 텍스트, 이미지 등으로 이루어지는 제 1초과부분(520)이 상기 터치스크린(10)의 하부방향으로 스크롤이동될 수 있고,
이 과정 중에 상기 좌측열(310)의 표시범위내의 텍스트, 이미지 등으로 이루어지는 상기 웹페이지(30)의 구성요소(510)의 일부분은 상기 우측열(330)의 상측에 디스플레이되면서 상기 터치스크린(10)의 하부방향으로 스크롤이동될 수 있다.
다음으로, 도 6에서 보는 바와 같이 상기 우측열(330)에 대한 세로방향 스크롤이벤트가 감지되는 경우, 상기 스크롤이벤트의 방향 및 스크롤정도에 따라 상기 좌측열(310) 및 상기 우측열(330)에 디스플레이된 웹페이지(30)의 구성요소(50)부분들을 세로방향으로 이동시킬 수 있는데, 이는 앞서 상술한 상기 좌측열(310)에 대한 세로방향 스크롤이벤트가 감지된 경우와 동일함으로 이하, 반복적인 설명은 생략하도록 한다.
사용자가 손가락을 이용하여 상기 좌측열(310) 또는 상기 우측열(330)을 상기 터치스크린(10)의 상부 또는 하부방향으로 각각 밀어올리거나 밀어내리는 횟수 및 상기 좌측열(310) 또는 상기 우측열(330)을 밀어올리거나 밀어내리는 손가락의 상하이동범위가 커질수록 상기 터치스크린(10)의 상하방향으로 스크롤이동되는 상기 좌측열(310)과 상기 우측열(330)의 스크롤양은 많아지게 된다.
도 7은 좌측열(310)에 대한 가로방향 스크롤이벤트가 발생된 일예를 개략적으로 나타내는 도면이고, 도 8은 우측열(330)에 대한 가로방향 스크롤이벤트가 발생된 상태를 개략적으로 나타내는 도면이다.
다음으로, 상기 좌측열(310)에 대한 가로방향스크롤이벤트가 감지된 경우 일예로, 상기 좌측열(310)에는 상기 웹페이지(30)의 구성요소 중(50) 텍스트, 이미지 등으로 이루어지는 제 1초과부분(520)이 디스플레이되고,
상기 우측열(330)에는 상기 웹페이지(30)의 구성요소(50) 중 상기 제 1초과부분(520)을 초과하는 텍스트, 이미지 등으로 이루어질 수 있는 제 2초과부분(530)이 디스플레이될 수 있다.
보다 구체적으로, 먼저, 사용자가 손가락을 이용하여 도 7에서 보는 바와 상기 좌측열(310)에 디스플레이된 텍스트, 이미지 등의 웹페이지(30)의 구성요소(50)부분들을 상기 터치스크린(10)의 좌측방향으로 밀어이동(도 7의 화살표 참조.)시키게 되면,
상기 좌측열(310)의 표시범위내의 텍스트, 이미지 등으로 이루어지는 상기 웹페이지(30)의 구성요소(510)는 상기 터치스크린(10)의 좌측방향으로 스크롤이동되면서 상기 터치스크린(10)상에서 사라지게 되고,
대신, 상기 우측열(330)에 디스플레이되었던 상기 제 1초과부분(520)이 상기 좌측열(310)방향으로 스크롤이동되면서 상기 좌측열(310)에 상기 제 1초과부분(520)이 디스플레이되고, 이와 동시에 상기 우측열(330)에는 상기 제 1초과부분(520)을 초과하는 텍스트, 이미지 등으로 이루어지는 제 2초과부분(530)이 상기 우측열(330)로 스크롤이동되면서 디스플레이될 수 있다.
사용자가 손가락을 이용하여 상기 좌측열(310)에 디스플레이된 텍스트, 이미지 등의 웹페이지(30)의 구성요소(50)부분들 을 상기 터치스크린(10)의 우측방향으로 밀어이동시키게 되면,
상기 터치스크린(10)의 좌측방향으로 스크롤이동되면서 상기 터치스크린(10) 상에서 사라졌던 상기 좌측열(310)의 표시범위내에 디스플레이되었던 최초 텍스트, 이미지 등으로 이루어지는 상기 웹페이지(30)의 구성요소(510)는 다시 상기 좌측열(310)방향으로 스크롤이동되면서 상기 좌측열(310)에 디스플레이되고,
이와 동시에 상기 제 1초과부분(520)은 상기 우측열(330) 방향으로 스크롤이동되면서 상기 우측열(330)에 디스플레이될 수 있다.
다음으로, 도 8에서 보는 바와 같이 상기 우측열(330)에 대한 가로방향 스크롤이벤트가 감지된 경우 상기 좌측열(310)에 상기 웹페이지(30)의 구성요소(50) 중 제1초과부분(520)을 디스플레이하고, 상기 우측열(330)에 상기 웹페이지의 구성요소(50) 중 제1초과부분(520)을 초과하는 제2초과부분(530)을 디스플레이할 수 있는데, 이는 앞서 상술한 일예의 상기 좌측열(310)에 대한 가로방향 스크롤이벤트가 감지된 경우와 동일함으로 이하, 반복적인 설명은 생략하도록 한다.
사용자가 손가락을 이용하여 상기 좌측열(310) 또는 상기 우측열(330)을 상기 터치스크린(10)의 좌측 또는 우측방향으로 각각 밀어이동시키는 횟수 및 상기 좌측열(310) 또는 상기 우측열(330)을 밀어이동시키는 손가락의 이동범위가 커질수록 상기 터치스크린(10)의 좌우방향으로 스크롤이동되는 상기 좌측열(310)과 상기 우측열(330)의 스크롤양은 많아지게 된다.
도 9는 좌측열(310)에 대한 가로방향 스크롤이벤트가 발생된 다른예를 개략적으로 나타내는 도면이다.
다음으로, 상기 좌측열(310)에 대한 가로방향 스크롤이벤트가 감지된 경우 다른예로, 상기 좌측열(310)에 상기 웹페이지(30)의 구성요소(50) 중 제1초과부분(520)을 초과하는 제2초과부분(530)을 디스플레이하고, 상기 우측열(330)에 상기 웹페이지(30)의 구성요소(50) 중 제2초과부분(530)을 초과하는 제3초과부분(540)을 디스플레이할 수도 있다.
보다 구체적으로, 먼저, 사용자가 손가락을 이용하여 도 9에서 보는 바와 같이 상기 좌측열(310)에 디스플레이된 텍스트, 이미지 등의 웹페이지(30)의 구성요소(50)부분들을 상기 터치스크린(10)의 좌측방향으로 밀어이동(도 9의 화살표 참조.)시키게 되면,
상기 좌측열(310)에는 상기 제 1초과부분(520)을 초과하는 제 2초과부분(530)이 상기 좌측열(310)로 스크롤이동되면서 상기 좌측열(310)에 디스플레이되고, 이와 동시에 상기 우측열(330)에는 상기 제 2초과부분(530)을 초과하는 텍스트, 이미지 등으로 이루어지는 상기 제 3초과부분(540)이 상기 우측열(330)로 스크롤이동되면서 상기 우측열(330)에 디스플레이될 수 있다.
사용자가 손가락을 이용하여 상기 좌측열(310)에 디스플레이된 텍스트, 이미지 등의 웹페이지(30)의 구성요소(50)부분들을 상기 터치스크린(10)의 우측방향으로 밀어이동시키게 되면,
상기 좌측열(310)에는 상기 좌측열(310)의 표시범위내에 최초 디스플레이되었던 텍스트, 이미지 등으로 이루어지는 상기 웹페이지(30)의 구성요소(510)가 상기 좌측열(310) 방향으로 스크롤이동되면서 상기 좌측열(310)에 디스플레이되고, 이와 동시에 상기 우측열(330)에는 상기 제 1초과부분(520)이 상기 우측열(330)로 스크롤이동되면서 상기 우측열(330)에 디스플레이될 수 있다.
다음으로, 도면에서는 도시되지 않았으나, 상기 우측열(330)에 대한 가로방향 스크롤이벤트가 감지된 경우, 상기 좌측열(330)에 상기 웹페이지(30)의 구성요소(50) 중 제1초과부분(520)을 초과하는 제2초과부분(530)을 디스플레이하고, 상기 우측열(330)에 상기 웹페이지(30)의 구성요소(50) 중 제2초과부분(530)을 초과하는 제3초과부분(540)을 디스플레이할 수도 있는데, 이는 앞서 상술한 다른예의 상기 좌측열(310)에 대한 가로방향 스크롤이벤트가 감지된 경우와 동일함으로 이하, 반복적인 설명은 생략하도록 한다.
상술한 바와 같이 구성된 본 발명은 전자단말기 등의 웹페이지 구성장치를 가로방향으로 회전시킨 상태, 즉 가로모드일 경우에 웹페이지(30)를 좌측열(310) 및 우측열(330)로 분할하고, 좌측열(310) 및 우측열(330)에 순차적으로 웹페이지(30)를 구성하는 요소(50)를 순차적으로 디스플레이함으로서 종래와 같이 좌우 공백없이 세로모드와 비슷한 글자수(한줄을 이루는 글자수)로 디스플레이할 수 있는 등 가독성을 향상시킬 수 있는 이점이 있다.
특히, 전자단말기의 스크린이 4.7인치 이상으로 확대되고 있어, 가로모드시 웹페이지(30)를 좌측열(310) 및 우측열(330)로 분할하더라도 글자크기를 종래와 같이 유지한 상태로 텍스트를 디스플레이를 할 수 있어, 더 많은 양의 텍스트를 표시할 수 있을 뿐만 아니라 가독성을 향상시킬 수 있다.
10; 터치스크린, 30; 웹페이지,
310; 좌측열, 330; 우측열.

Claims (9)

  1. 웹브라우저가 실행되어 웹페이지(30)를 터치스크린(10)에 디스플레이하는 웹페이지의 구성방법에 있어서,
    상기 터치스크린(10)의 회전방향이 가로 또는 세로인지 판단하는 방향판단단계와;
    상기 터치스크린(10)의 회전방향이 가로인 경우 상기 웹페이지(30)를 좌측열 (310)및 우측열(330)로 분할하는 분할단계와;
    상기 웹페이지(30)의 구성요소(50)를 로드하여 상기 좌측열(310)의 표시범위 내에서 상기 웹페이지(30)의 좌측열(310)에 디스플레이하고, 상기 웹페이지(30)의 구성요소(50) 중 상기 좌측열(310)의 표시범위를 초과하는 제1초과부분(520)을 상기 우측열(330)에 순차적으로 디스플레이하는 디스플레이단계;를 포함하여 이루어지고,
    상기 웹페이지(30)의 구성요소(50)가 상기 좌측열(310)의 표시범위를 초과하는 경우에 한하여 상기 분할단계가 실행되는 것을 특징으로 하는 웹페이지의 구성방법.
  2. 제1항에 있어서,
    상기 디스플레이단계에서 상기 우측열(330)에 상기 좌측열(310)의 표시범위를 초과하는 제 1초과부분(520)이 디스플레이된 경우 상기 우측열(330)에 세로방향의 스크롤바(40)를 디스플레이하는 것을 특징으로 하는 웹페이지의 구성방법.
  3. 제1항에 있어서,
    상기 좌측열(310)에 대한 세로방향 스크롤이벤트가 감지되는 경우 상기 스크롤이벤트의 방향 및 스크롤정도에 따라 상기 좌측열(310) 및 상기 우측열(330)에 디스플레이된 웹페이지(30)의 구성요소(50)부분들을 세로방향으로 이동시키는 것을 특징으로 하는 웹페이지의 구성방법.
  4. 제1항에 있어서,
    상기 우측열(330)에 대한 세로방향 스크롤이벤트가 감지되는 경우 상기 스크롤이벤트의 방향 및 스크롤정도에 따라 상기 좌측열(310) 및 상기 우측열(330)에 디스플레이된 웹페이지(30)의 구성요소(50)부분들을 세로방향으로 이동시키는 것을 특징으로 하는 웹페이지의 구성방법.
  5. 제1항에 있어서,
    상기 좌측열(310)에 대한 가로방향 스크롤이벤트가 감지된 경우 상기 좌측열(310)에 상기 웹페이지(30)의 구성요소(50) 중 제1초과부분(520)을 디스플레이하고, 상기 우측열(330)에 상기 웹페이지(30)의 구성요소(50) 중 제1초과부분(520)을 초과하는 제2초과부분(530)을 디스플레이하는 것을 특징을 하는 웹페이지의 구성방법.
  6. 제1항에 있어서,
    상기 우측열(330)에 대한 가로방향 스크롤이벤트가 감지된 경우 상기 좌측열(310)에 상기 웹페이지(30)의 구성요소(50) 중 제1초과부분(520)을 디스플레이하고, 상기 우측열(330)에 상기 웹페이지의 구성요소(50) 중 제1초과부분(520)을 초과하는 제2초과부분(530)을 디스플레이하는 것을 특징을 하는 웹페이지의 구성방법.
  7. 제1항에 있어서,
    상기 좌측열(310)에 대한 가로방향 스크롤이벤트가 감지된 경우 상기 좌측열(310)에 상기 웹페이지(30)의 구성요소(50) 중 제1초과부분(520)을 초과하는 제2초과부분(530)을 디스플레이하고, 상기 우측열(330)에 상기 웹페이지(30)의 구성요소(50) 중 제2초과부분(530)을 초과하는 제3초과부분(540)을 디스플레이하는 것을 특징으로 하는 웹페이지의 구성방법.
  8. 삭제
  9. 삭제
KR1020140066042A 2014-05-30 2014-05-30 웹페이지의 구성방법 KR101604838B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020140066042A KR101604838B1 (ko) 2014-05-30 2014-05-30 웹페이지의 구성방법

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020140066042A KR101604838B1 (ko) 2014-05-30 2014-05-30 웹페이지의 구성방법

Publications (2)

Publication Number Publication Date
KR20150137709A KR20150137709A (ko) 2015-12-09
KR101604838B1 true KR101604838B1 (ko) 2016-03-18

Family

ID=54873606

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020140066042A KR101604838B1 (ko) 2014-05-30 2014-05-30 웹페이지의 구성방법

Country Status (1)

Country Link
KR (1) KR101604838B1 (ko)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109976623A (zh) * 2017-12-27 2019-07-05 富泰华工业（深圳）有限公司 显示装置及显示方法

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100844071B1 (ko) * 2007-05-09 2008-07-07 엘지전자 주식회사 웹페이지 표시가 가능한 이동통신 단말기 및 그 제어방법
JP2010049684A (ja) * 2008-08-19 2010-03-04 Wistron Corp ディスプレイ上に分割画面を表示する方法及び電子装置

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100844071B1 (ko) * 2007-05-09 2008-07-07 엘지전자 주식회사 웹페이지 표시가 가능한 이동통신 단말기 및 그 제어방법
JP2010049684A (ja) * 2008-08-19 2010-03-04 Wistron Corp ディスプレイ上に分割画面を表示する方法及び電子装置

Also Published As

Publication number Publication date
KR20150137709A (ko) 2015-12-09

Similar Documents

Publication Publication Date Title
ES2334680T3 (es) Procedimiento y dispositivo para seleccionar automaticamente una trama para su exhibicion.
CA2767515C (en) Scrolling method of mobile terminal and apparatus for performing the same
US20190114043A1 (en) Method, apparatus, and electronic device for displaying a page and storage medium
AU2011101581A4 (en) Method and apparatus of scrolling a document displayed in a browser window
US9671951B2 (en) Method for zooming screen and electronic apparatus and computer readable medium using the same
US20120313876A1 (en) Providing subpages in a touch panel user interface
KR20110073475A (ko) 가변 크기 디스플레이 영역에 이미지들을 디스플레이하기 위한 디스플레이 장치 및 방법
US8832591B2 (en) Grid display device and grid display method in mobile terminal
US20120047470A1 (en) Method and apparatus for browsing an electronic book on a touch screen display
US9019315B2 (en) Method of controlling display
US20130346894A1 (en) Method, apparatus and computer-readable medium for adjusting size of screen object
JP2013125426A (ja) コンテンツ表示装置、方法及びプログラム
CN111143731A (zh) 一种网页界面缩放时的显示方法、装置及终端设备
US20100211870A1 (en) Document display device and method
CN102567524A (zh) 一种立体旋转浏览的实现方法和装置
KR101604838B1 (ko) 웹페이지의 구성방법
US10558356B2 (en) Display control device and non-transitory computer-readable storage medium having program recorded thereon
CN111880692A (zh) 桌面管理方法、装置、电子设备及计算机可读存储介质
CN110609651A (zh) 一种使用相册的方法、装置及设置有折叠屏的电子设备
JP6568795B2 (ja) 電子機器の操作方法および画像の表示方法
JP2005092567A (ja) スクロール制御装置、スクロール制御方法、スクロール制御プログラムおよび記録媒体
KR101579967B1 (ko) 3차원 웹페이지 표출을 위한 웹페이지 제어 방법
JP2015076068A (ja) 表示装置とその表示制御方法及びプログラム
JP7127384B2 (ja) 表示制御装置及び表示制御方法
WO2015159498A1 (en) Method and apparatus for displaying additional objects on a graphical user interface based on pinch gesture

Legal Events

Date Code Title Description
E701 Decision to grant or registration of patent right
FPAY Annual fee payment

Payment date: 20190312

Year of fee payment: 4