KR20130073016A

KR20130073016A - 웹페이지 제어 방법

Info

Publication number: KR20130073016A
Application number: KR1020120095784A
Authority: KR
Inventors: 이영준
Original assignee: (주)보고닷컴
Priority date: 2011-12-21
Filing date: 2012-08-30
Publication date: 2013-07-02
Also published as: KR101314850B1

Abstract

본 발명은 웹페이지 제어 방법에 관한 것이다. 본 발명의 제 1 측면에 따르면, 웹페이지 제어시스템에서, 웹페이지를 제어하는 방법으로서, 헤더컨텐츠와 이웃하는 제1컨텐츠를 상기 헤더컨텐츠와 함께 웹페이지의 표시영역을 통해 디스플레이하는 단계, 상기 웹페이지에 대한 스크롤 이벤트를 감지하는 단계; 및 상기 감지 결과에 따라, 상기 표시영역을 통해 상기 헤더컨텐츠를 제2컨텐츠-상기 제1컨텐츠와는 상이한 컨텐츠-와 이웃하도록 이동시키고, 상기 헤더컨텐츠와 함께 상기 제2컨텐츠를 상기 표시영역을 통해 디스플레이하는 단계를 포함한다. 이로 인해 웹페이지의 스크롤 이동을 블록 단위로 제어할 수 있다.

Description

웹페이지 제어 방법 {METHOD FOR CONTROLLING WEBPAGE}

본 발명은 웹페이지 제어 방법에 관한 것으로, 보다 상세하게는 웹페이지를 통해 디스플레이되는 컨텐츠의 가독성을 향상시킬 수 있는 웹페이지 제어 방법에 관한 것이다.

최근 들어 인터넷이 발달됨에 따라 웹페이지를 통해 제공되는 컨텐츠가 다양해졌으며, 하나의 웹페이지에서 제공하는 컨텐츠가 적어도 하나 이상인 경우가 많아졌다. 다만, 웹브라우저에서 로딩된 웹페이지는 한번에 디스플레이할 수 있는 표시영역의 사이즈가 제한되어 있어 웹페이지에서 제공하는 컨텐츠를 모두 디스플레이하기 힘들다.

따라서 종래에는, 웹브라우저의 일측에 스크롤 바가 표시되고, 사용자가 스크롤 바를 제어함으로써 웹브라우저에 표시되는 웹페이지의 표시영역이 이동되어 보이지 않던 컨텐츠를 표시되도록 한다. 즉 웹브라우저에서 표시되지 않고 있는 컨텐츠를 확인하기 위해 스크롤 바를 제어하면 웹페이지의 표시영역 전체가 조금씩 이동하기 때문에, 각 컨텐츠는 서로 다른 내용을 표시하는 독립된 내용임에도 그 경계가 명확하게 인식되지 못하고, 또한 현재 집중하고자 하는 컨텐츠 이외에도 다른 컨텐츠가 위 또는 아래에 연속적으로 표시되기 때문에, 사용자가 열람을 의도한 컨텐츠에 집중하기 힘든 문제가 있다. 따라서 상술된 문제점을 해결하기 위한 기술이 필요하게 되었다.

한편, 전술한 배경기술은 발명자가 본 발명의 도출을 위해 보유하고 있었거나, 본 발명의 도출 과정에서 습득한 기술 정보로서, 반드시 본 발명의 출원 전에 일반 공중에게 공개된 공지기술이라 할 수는 없다.

본 발명은 웹페이지를 효과적으로 제어하는 데에 목적이 있다.

또한, 본 발명은 웹페이지의 스크롤 이동을 블록 단위로 제어하는 데에 목적이 있다.

그리고 본 발명은, 웹페이지의 표시영역을 통해 디스플레이되는 컨텐츠에 대한 사용자의 집중도를 높이는 데에 목적이 있다.

상술한 기술적 과제를 달성하기 위한 기술적 수단으로서, 본 발명의 제 1 측면에 따르면, 웹페이지 제어시스템에서, 웹페이지를 제어하는 방법으로서, 헤더컨텐츠와 이웃하는 제1컨텐츠를 상기 헤더컨텐츠와 함께 웹페이지의 표시영역을 통해 디스플레이하는 단계, 상기 웹페이지에 대한 스크롤 이벤트를 감지하는 단계; 및 상기 감지 결과에 따라, 상기 표시영역을 통해 상기 헤더컨텐츠를 제2컨텐츠-상기 제1컨텐츠와는 상이한 컨텐츠-와 이웃하도록 이동시키고, 상기 헤더컨텐츠와 함께 상기 제2컨텐츠를 상기 표시영역을 통해 디스플레이하는 단계를 포함한다.

또한 본 발명의 제 2 측면에 따르면, 웹페이지 제어시스템에서, 웹페이지를 제어하는 방법으로서, 제1컨텐츠를 웹페이지의 표시영역을 통해 디스플레이하는 단계, 상기 웹페이지에 대한 스크롤 이벤트를 감지하는 단계, 및 상기 감지 결과에 따라, 상기 표시영역을 통해 상기 제1컨텐츠를 제2컨텐츠로 전환하여 상기 제2컨텐츠를 디스플레이하는 단계를 포함한다.

그리고 본 발명의 제3측면에 따르면, 헤더컨텐츠와 이웃하는 제1컨텐츠를 상기 헤더컨텐츠와 함께 웹페이지의 표시영역을 통해 디스플레이하는 단계, 상기 웹페이지에 대한 스크롤 이벤트를 감지하는 단계; 및 상기 감지 결과에 따라, 상기 표시영역을 통해 상기 헤더컨텐츠를 제2컨텐츠-상기 제1컨텐츠와는 상이한 컨텐츠-와 이웃하도록 이동시키고, 상기 헤더컨텐츠와 함께 상기 제2컨텐츠를 상기 표시영역을 통해 디스플레이하는 단계를 포함하는 웹페이지 제어 방법을 수행하는 프로그램이 기록된 컴퓨터 판독가능한 기록매체이다.

전술한 본 발명의 과제 해결 수단 중 어느 하나에 의하면, 본 발명은 웹페이지를 효과적으로 제어할 수 있다.

또한, 본 발명의 과제 해결 수단 중 어느 하나에 의하면, 웹페이지의 스크롤 이동을 블록 단위로 제어하여 웹페이지 내 컨텐츠 이동의 편의성을 향상시키고 사용자의 컨텐츠 가독성을 향상시킬 수 있다.

그리고 본 발명의 과제 해결 수단 중 어느 하나에 의하면, 웹페이지의 표시영역을 통해 디스플레이되는 컨텐츠에 대한 사용자의 집중도를 극대화시킬 수 있다.

도 1은 본 발명의 일실시예에 따른 웹페이지 제어시스템의 구성도이다.
도 2는 본 발명의 일실시예에 따른 웹페이지 제어시스템의 블록도이다.
도 3은 본 발명의 일실시예에 따른 웹페이지 제어방법을 설명하기 위한 순서도이다.
도 4 내지 도5는 본 발명의 일실시예에 따른 웹페이지 제어방법을 설명하기 위한 예시도이다.

아래에서는 첨부한 도면을 참조하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 본 발명의 실시예를 상세히 설명한다. 그러나 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 도면 부호를 붙였다.

명세서 전체에서, 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있는 것을 의미한다.

이하 첨부된 도면을 참고하여 본 발명을 상세히 설명하기로 한다.

도 1은 본 발명의 일실시예에 따른 웹페이지 제어시스템(100)의 구성도이다.

웹페이지 제어시스템(100)은, 사용자단말(10) 및 컨텐츠서버(20)를 포함할 수 있으며, 사용자단말(10) 및 컨텐츠서버(20)는 네트워크(N)를 통해 통신할 수 있다.

네트워크(N)는 근거리 통신망(Local Area Network; LAN), 광역 통신망(Wide Area Network; WAN), 부가가치 통신망(Value Added Network; VAN), 개인 근거리 무선통신(Personal Area Network; PAN), 이동 통신망(mobile radio communication network) 또는 위성 통신망 등과 같은 모든 종류의 유?무선 네트워크로 구현될 수 있다.

사용자단말(10)은 네트워크(N)를 통해 원격지에 위치한 컨턴츠서버(20)에 접속하거나, 타 단말 및 서버와 연결 가능한 컴퓨터나 휴대용 단말기, 텔레비전으로 구현될 수 있다. 여기서, 컴퓨터는 예를 들어, 웹 브라우저(WEB Browser)가 탑재된 노트북, 데스크톱(desktop), 랩톱(laptop) 등을 포함하고, 휴대용 단말기는 예를 들어, 휴대성과 이동성이 보장되는 무선 통신 장치로서, PCS(Personal Communication System), GSM(Global System for Mobile communications), 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) 단말, 스마트폰(Smart Phone) 등과 같은 모든 종류의 핸드헬드(Handheld) 기반의 무선 통신 장치를 포함할 수 있다. 또한, 텔레비전은 IPTV(Internet Protocol Television), 인터넷 TV(Internet Television), 지상파 TV, 케이블 TV 등을 포함할 수 있다.

이러한 사용자단말(10)은 웹 서비스를 제공할 수 있는 웹브라우저 등을 포함하는 통상의 웹 클라이언트가 설치될 수 있다. 또한 사용자단말(10)은 모바일 웹 서비스를 제공할 수 있는 모바일 웹브라우저 등을 포함하는 통상의 모바일 웹 클라이언트도 설치될 수 있다.

또한 사용자단말(10)은 외부 및 내부 구성요소들 간에 통신을 가능하도록 하는 통신부(미도시)를 포함할 수 있으며, 또한 상기 구성요소들의 제반 동작에 필요한 정보를 저장하는 저장부(미도시)도 포함할 수 있다.

그리고 사용자단말(10)은 인터페이스부(미도시)를 포함할 수 있으며, 인터페이스부를 통해 사용자로부터의 입력을 수신하거나 또는 사용자에게 제공될 데이터를 사용자가 볼 수 있도록 처리하여 디스플레이되도록 할 수 있다. 예를 들어, 사용자단말의 인터페이스부는 터치스크린 등으로 구현되어 입력을 수신하거나 정보를 디스플레이할 수 있으며, 또는 정보를 디스플레이하는 스크린 화면과, 입력을 수신하는 키보드 자판 각각으로 구현될 수 있다.

한편, 컨텐츠서버(20)는 사용자단말(10)로부터 웹 접속을 받아들이는 통상의 웹서버로 구현될 수 있다. 또한 컨텐츠서버(20)는 사용자단말(10)로부터 모바일 웹 접속을 받아들이는 통상의 모바일 웹서버로도 구현될 수 있다.

컨텐츠서버(20)는 예를 들어, 사용자단말(10)로 웹 서비스를 제공할 수 있는 웹서버일 수 있으며, 예를 들어, 포털 사이트 서버이거나, 온라인 쇼핑몰 서버 등 다양한 웹 컨텐츠 프로바이더의 서버 시스템일 수 있다. 또한 컨텐츠서버(20)는 웹서버를 포함하여 로드밸런싱 서버, 데이터베이스 서버 등 일군의 서버 시스템으로 구현될 수 있음은 물론이다.

이러한 컨텐츠서버(20)는 사용자단말(10)로 제공되는 웹페이지를 구성할 수 있으며, 사용자단말(10)은 컨텐츠서버(20)에 의해 구성된 웹페이지를 사용자에게 디스플레이할 수 있다.

한편, 도 2는 본 발명의 일실시예에 따른 웹페이지 제어시스템의 블록도이다.

도 2에서 도시된 바와 같이, 웹페이지 제어시스템(100)은 표시부(210), 입력부(220) 및 제어부(230)를 포함할 수 있다.

표시부(210)는 웹페이지를 사용자에게 디스플레이할 수 있는 모듈로서, 예를 들어, 사용자단말의 인터페이스부로 구현될 수 있다.

또한 입력부(220)는 웹페이지에 대한 이벤트(예를 들어, 스크롤링을 감지하는 스크롤 이벤트, 마우스 포인터 위치를 감지하는 이벤트, 클릭을 감지하는 클릭 이벤트, 웹페이지 표시영역의 사이즈를 조정하는 이벤트 등)를 입력받을 수 있는 모듈로서, 예를 들어, 사용자단말의 인터페이스부로 구현될 수 있다.

그리고, 제어부(230)는 본 발명의 일실시예에 따른 웹페이지 제어방법을 수행하기 위한 제반의 동작을 처리할 수 있는 모듈이다. 제어부(230)는 예를 들어, 사용자에게 디스플레이될 웹페이지를 구성하고, 구성된 웹페이지를 사용자가 볼 수 있도록 제공할 수 있다.

이러한 제어부(230)는 예를 들어, 웹 서비스를 제공하는 컨텐츠서버(20)에서 구현될 수 있으며, 또는 웹 클라이언트가 설치된 사용자단말(10)에서 구현될 수 있다.

도 3은 본 발명의 일실시예에 따른 웹페이지 제어방법을 웹페이지 제어시스템(100; 특히, 제어부)이 수행하는 모습을 설명하기 위한 순서도이다.

한편, 도 4 내지 도 5는 본 발명의 일실시예에 따른 웹페이지 제어방법에 따라 동작하는 웹페이지를 설명하기 위한 예시도이다.

특히, 도 4 내지 도 5는, 사용자단말(10)의 인터페이스부(11)를 통해 제공되는 웹페이지(50)를 나타낸 것이다. 관련하여 도 4 내지 도 5에 도시된 점선은 설명의 편의상 다른 도면부호에 의해 설명되는 부분과 구별짓기 위한 선이다. 또한 이하에서 서술되는 컨텐츠 각각은 블록 단위로 분류된 컨텐츠로서, 예를 들어, 헤더컨텐츠, 제1컨텐츠, 제2컨텐츠, 제3컨텐츠 각각은 블록 단위로 분리되어 구성되어 있고, 서로 별개의 블록으로 사용자에 의해 구분되어 식별가능하다.

이하에서는 도 4 내지 도 5를 참조하여 도 3에 대해 서술한다.

본 발명의 바람직한 일실시예에 따른 웹페이지 제어시스템은, 제1컨텐츠를 디스플레이하는 웹페이지를 제공한다 (S310).

이때, 제1컨텐츠는 웹페이지의 표시영역을 통해 디스플레이될 수 있는데, 여기서 웹페이지의 표시영역이란, 웹페이지의 영역 중에서 사용자단말의 인터페이스부를 통해 사용자에게 한번에 디스플레이되는 영역으로, 사용자는 웹페이지가 제공하는 컨텐츠를 표시영역을 통해 볼 수 있다.

또한 제1컨텐츠는 헤더컨텐츠와 이웃하여 위치할 수 있다. 이때, 헤더컨텐츠는 웹페이지의 표시영역의 고정된 위치에서 디스플레이되는 컨텐츠이다. 예를 들어, 헤더컨텐츠는 웹페이지의 표시영역의 최우측에 항상 위치할 수 있으며, 제1컨텐츠는 상기 헤더컨텐츠의 좌측에 이웃하여 위치할 수 있다.

한편 웹페이지 제어시스템은, 헤더컨텐츠와 이웃하는 제1컨텐츠를 헤더컨텐츠와 함께 표시영역을 통해 디스플레이하는 동안, 상기 웹페이지에 대한 스크롤 이벤트를 감지할 수 있다 (S320). 즉, 웹페이지 제어시스템은, 웹페이지 표시영역 중 임의의 위치에서 발생하는 스크롤 이벤트를 감지할 수 있다.

스크롤 이벤트는 웹페이지의 표시영역을 변경시키는 이벤트로서, 화면에 보이지 않는 내용을 보기 위해 웹페이지가 디스플레이하는 영역을 변경하는 이벤트로서, 본 발명의 일실시예에 따른 웹페이지 제어시스템은 스크롤 이벤트를 감지하면 상기 스크롤 이벤트에 대응되는 이동방향과 이동거리에 관한 이동명령을 인식하고 상기 이동명령에 따라 표시영역을 변경시킨다.

즉, 웹페이지 제어시스템은 스크롤 이벤트를 감지할 수 있으며, 상기 스크롤 이벤트가 컨텐츠 전환 이벤트인지 여부를 판단할 수 있다 (S330).

스크롤 이벤트는, 컨텐츠 전환 이벤트 및 통상의 스크롤링 이벤트를 포함할 수 있으며, 웹페이지 표시영역 또한 컨텐츠 전환 이벤트가 적용될 수 있는 영역과 통상의 스크롤링 이벤트가 적용될 수 있는 영역이 구분되어 있을 수 있다.

통상의 스크롤링 이벤트는 표시영역을 변경시키는 이벤트로서 종래의 표시영역 변경방법에 따라 처리된다. 예를 들어, 스크롤링 이벤트가 트리거링되면, 웹페이지의 표시영역이 변경되어 표시하고 있던 컨텐츠의 내용이 한 줄씩 위로 이동하여 컨텐츠의 맨 아래줄에서 새로운 줄이 나타나고 맨 위의 줄은 사라지게 될 수 있다.

한편, 컨텐츠 전환 이벤트는 본 발명의 바람직한 일실시예에 따른 웹페이지 제어방법에 따라 웹페이지의 표시영역이 변경되는 이벤트로서 컨텐츠 전환 이벤트가 트리거링되면, 후속하여 서술되는 단계 S350를 처리하기 위한 웹페이지 제어방법에 따라, 컨텐츠를 디스플레이할 수 있다.

즉, 웹페이지 제어시스템은, 웹페이지의 표시영역 중에서 컨텐츠 전환 이벤트가 적용되는 전환표시영역에서 컨텐츠 전환 이벤트가 발생하는 경우, 본 발명의 웹페이지 제어방법에 따라 웹페이지를 제어하여 적절한 컨텐츠가 디스플레이되도록 할 수 있다.

또한, 웹페이지 제어시스템은, 스크롤링이 임계치 이상 제어되는 경우에 한해 컨텐츠 전환 이벤트가 발생하였음을 감지할 수 있다. 예를 들어, 사용자가 스크롤 바를 제어(마우스의 스크롤휠의 제어, 마우스 드래그에 의한 제어, 키보드의 제어, 또는 터치패드의 제어)할 때 웹페이지 제어시스템은 소정의 거리 이상 스크롤 바가 이동하였음을 감지하고 상기 소정의 거리가 임계치 이상인 경우, 사용자가 웹페이지의 표시영역을 변경하려는 것으로 인식하고 표시영역을 변경하여 표시할 수 있다.

한편, 웹페이지 제어시스템은 웹페이지에 대한 컨텐츠 전환 이벤트를 감지하고, 이에 따라 상기 헤더컨텐츠를 제2컨텐츠와 이웃하도록 상기 헤더컨텐츠를 이동시킬 수 있다. 헤더컨텐츠는 웹페이지의 표시영역의 고정된 위치에서 항상 디스플레이되어야 하므로, 웹페이지 제어시스템은 헤더컨텐츠의 이동에 따라 표시영역을 변경시킬 수 있다. 그 결과 웹페이지 제어시스템은 제2컨텐츠(이때, 제2컨텐츠는 제1컨텐츠와는 상이한 컨텐츠로서 스크롤 이벤트 발생 시에 제1컨텐츠에 후속하여 디스플레이될 컨텐츠임)를 헤더컨텐츠와 함께 디스플레이할 수 있다 (S350).

즉, 제1 및 제2 컨텐츠 각각은 컨텐츠의 시작부분에 컨텐츠의 시작부분임을 알리는 태그(예를 들어 앵커태그)를 포함할 수 있고, 따라서 웹페이지 제어시스템은 현재 표시되는 제1컨텐츠의 다음 컨텐츠인 제2컨텐츠에 포함되는 태그의 위치까지 헤더컨텐츠를 이동시킬 수 있고 또한 스크롤 바를 강제 제어할 수 있다.

또한 웹페이지 제어시스템은 스크롤링이 연속적으로 발생되어 컨텐츠 전환 이벤트가 계속적으로 발생하는 경우, 연속적으로 스크롤 바를 제어한 만큼 웹페이지를 이동하는 것이 아니고, 상기 헤더컨텐츠를 상기 제2컨텐츠로 이동하기 이전에, 상기 헤더컨텐츠를 제1컨텐츠와 함께 소정의 시간 동안 디스플레이할 수 있다. 여기서 소정의 시간은 웹페이지 제어시스템에 의해 기설정될 수 있으며 웹페이지를 열람하는 사용자에 의해 설정될 수 있다.

한편 웹페이지 제어시스템은 배경컨텐츠를 디스플레이할 수 있다. 배경컨텐츠는 표시영역 전반에 걸쳐 디스플레이되는 컨텐츠로서 헤더컨텐츠, 제1컨텐츠, 제2컨텐츠, 제3컨텐츠의 뒤에 배치되어 배경이미지로 디스플레이될 수 있다. 웹페이지 제어시스템은, 헤더컨텐츠가 이동하는 경우 배경컨텐츠를 함께 이동시킬 수 있으며, 이때 배경컨텐츠의 이동거리를 헤더컨텐츠의 이동거리과 다른 거리로 이동시키거나, 또는 이동방향과 다른 방향으로 이동시켜, 헤더컨텐츠, 제1컨텐츠, 제2컨텐츠, 제3컨텐츠 등이 배경 위에 레이어로서 떠 있는 듯한 효과를 줄 수 있게 할 수 있다.

관련하여 도 4는 웹페이지 스크롤 제어 방법이 구현된 웹페이지에서 처음 페이지가 로딩된 상태를 나타낸 것이며, 도 5는 웹페이지 스크롤 제어 방법이 구현된 웹페이지에서 스크롤 이벤트가 한번 발생하여 제2컨텐츠가 상단에 표시된 상태를 나타낸 것이다.

도 4에 도시된 바와 같이, 사용자단말(10)의 인터페이스부(11)를 통해 웹페이지가 디스플레이되며, 특히 웹페이지의 표시영역(50)이 디스플레이된다. 또한, 사용자의 제어를 돕기 위해 웹페이지의 일측(일례로 오른쪽)에 스크롤 바(51)가 표시되고, 현재는 가장 상위에 위치한 컨텐츠를 표시하고 있으므로, 스크롤 바(51)가 우측 최상단에 위치하고 있다. 웹페이지의 표시영역(50)은 헤더컨텐츠(410), 제1컨텐츠(420) 및 제2컨텐츠(430)를 디스플레이할 수 있다. 이 경우, 제1컨텐츠(420)는 헤더컨텐츠(410) 아래에 이웃하여 위치하므로 사용자의 인식력을 집중하여 받게 되고, 제2컨텐츠(420)는 그 아래에 일부 표시되나, 나머지 일부는 웹브라우저 영역의 한계로 인해 가려져 있으며, 제3컨텐츠의 전부 또한 가려져 있다.

이 상태에서 사용자가 스크롤 바를 제어(또는 전환표시영역의 임의의 위치에서 마우스의 스크롤 휠의 제어, 마우스 드래그에 의한 제어, 키보드의 제어, 또는 터치패드의 제어)하면, 컨텐츠 전환 이벤트로 인식하고 제2컨텐츠를 디스플레이할 수 있다. 즉, 도5에 도시된 바와 같이, 제2컨텐츠(430)가 헤더컨텐츠(410) 아래에 이웃하여 위치하게 되고, 제3컨텐츠(440)가 그에 연속적으로 아래에 표시되되, 일부는 표시되고, 나머지 일부는 웹브라우저 영역의 한계로 인해 가려져 표시되고 있다. 또한 스크롤 바(51) 또한 스크롤링되는 거리만큼 이동될 수 있다.

즉, 스크롤 바가 임계치 이상 제어되면, 스크립트는 사용자가 웹페이지를 이동하려는 것으로 인식하고 웹페이지의 표시영역을 이동하여 표시하되, 연속적으로 스크롤 바를 제어한 만큼 웹페이지를 이동하는 것이 아니고, 제2컨텐츠가 웹페이지의 상단에 즉각적으로 표시되도록 하여 제2컨텐츠에 대한 사용자의 인식을 집중받을 수 있도록 한다.

다음의 표1은, 웹페이지 제어시스템이 웹페이지를 제어하는 일실시예에 따라 작성된 스크롤 바의 제어 스크립트를 나타낸다.

// 스크롤 바가 제어되는 경우, 스크롤 바 제어 이벤트를 처리하는 자바스크립트 함수
function screenMove(index) {
for (var i = 0, j = _playerShop.screenChangingOnOffActionArray.length; i < j; i++) {
_playerShop.screenChangingOnOffActionArray[i]['off']();
}
var module = _playerShop.moduleWrapArray[index];
var headerWrap = _playerShop.header.detach().insertBefore(module);
var targetTop = headerWrap.offset().top;
var bgTop = -(targetTop * 0.1);

_playerShop.bgPosition[1] = bgTop;

$('body').animate({ backgroundPosition: _playerShop.bgPosition[0] + 'px ' + bgTop + 'px' }, { duration: 300, queue: false, easing: 'easeInOutQuad' });
$('html, body').animate({ scrollTop: targetTop }, { duration: 300, queue: false, easing: 'easeInOutQuad' }).last().queue(function () {
_playerShop.currentModuleIndex = index;
//delay 100;
if (screenMoveTimout) clearTimeout(screenMoveTimout);
screenMoveTimout = setTimeout(function () {
_playerShop.screenChanging = false;
$.hash('screen', index);
for (var i = 0, j = _playerShop.screenChangingOnOffActionArray.length; i < j; i++) {
_playerShop.screenChangingOnOffActionArray[i]['on']();
}
}, 500);
$(this).dequeue();
});
}

var screenMouseWheelChanger = function (event, delta) {

for (var i = 0, j = _playerShop.screenChangeActionExceptArray.length; i < j; i++) {
if (_playerShop.screenChangeActionExceptArray[i]() == true) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
return;
}
}

if (_playerShop.screenChanging == false) {
_playerShop.screenChanging = true;

var targetIndex = 0;
if (delta > 0) { //up
targetIndex = _playerShop.currentModuleIndex - 1;
}
else if (delta < 0) {//down
targetIndex = _playerShop.currentModuleIndex + 1;
}

if (targetIndex < 0 || targetIndex >= _playerShop.moduleWrapArray.length) {
_playerShop.screenChanging = false;
return;
}

event.preventDefault ? event.preventDefault() : event.returnValue = false;
screenMove(targetIndex);
}
else {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
}

표1에서 나타난 바와 같이 스크롤 바가 제어되면, screenMouseWheelChanger 함수가 호출되고, 인자로서 이벤트객체와 delta 값이 전달된다. delta값은 사용자가 스크롤을 제어할 때 스크롤될 양을 나타내는 숫자값이며, 양수이면 윗쪽 방향의 스크롤이고, 음수이면 아랫쪽 방향의 스크롤을 의미한다.

우선, 웹페이지의 구성부분 중에서 본 발명에 의한 스크롤 제어 방법이 적용될 전환표시영역도 있고, 통상의 스크롤 제어 방법이 적용될 영역도 있기 때문에, 이러한 영역을 어레이(array)로 관리하여, 통상의 스크롤 제어 방법이 적용될 영역에서 발생한 스크롤 제어인 경우에는 그대로 리턴(return)하고, 그 외의 경우 아래의 단계가 수행된다.

현재 본 발명에 의한 스크롤 제어 방법이 수행되는 경우(스크롤 제어를 자연스럽게 하기 위해서 애니메이션 등의 처리를 할 수 있으므로, 이러한 처리가 이루어지는 동안에 발생하는 스크롤의 경우에는 무시해야 함. 그렇지 않으면 스크롤 제어를 약 1초 정도 길게 하는 경우 본 발명에 의한 스크롤 제어 방법이 수회 적용되어 한번에 여러 컨텐츠를 스크롤 하여 지나게 할 수 있고, 이로써 자연스러운 스크롤 제어를 할 수 없게 되고, 결과적으로 사용자의 편의성을 해하는 결과를 가져올 수 있음) 플래그 값을 변경하여 본 발명에 의한 스크롤 제어 방법이 완료되기까지는 더 이상 본 발명에 의한 스크롤 제어 방법이 수행되지 않게 한다.

다음으로, delta 값을 확인하여 양수인 경우(윗 컨텐츠를 확인하기 위한 스크롤인 경우) 다음 표시될 컨텐츠의 인덱스값을 1 감하고, 음수인 경우(아래 컨텐츠를 확인하기 위한 스크롤인 경우) 다음 표시될 컨텐츠의 인덱스값을 1 가하여 변경한다. 이렇게 분석된 인덱스값을 screenMove 함수에 전달하여, 상기 인덱스값이 지정하는 컨텐츠가 웹페이지의 헤더구성부분의 바로 아래에 놓일 수 있을 위치로 스크롤을 제어한다.

즉 본 발명의 일실시예에 따른 웹페이지 제어시스템은, 헤더컨텐츠를 현재 표시되고 있는 제1컨텐츠에서 제거하고, 인덱스값이 지정하는 다음 컨텐츠인 제2컨텐츠에 붙이며, 상기 인덱스값이 지정하는 제2컨텐츠의 태그가 위치한 부분을 현재 브라우저 표시영역의 상단에 위치하도록 스크롤을 제어하여 표시할 수 있다. 이 경우, 제2컨텐츠로 전환하여 표시되는 과정이 자연스럽게 보이도록 하기 위해, 제1컨텐츠를 일정 시간을 두고 디스플레이한 이후에 제2컨텐츠가 디스플레이되도록 할 수 있으며, 또는 제2컨텐츠가 천천히 상단으로 위치하는 모습처럼 보이도록 구현될 수 있다. 또한, 상기 컨텐츠의 뒷 배경으로서 배경이미지가 존재하는 경우에는, 컨텐츠가 스크롤되는 양과, 배경이미지가 스크롤되는 양을 달리하여, 컨텐츠가 배경 위에 레이어로서 떠 있는 듯한 효과를 줄 수 있게 할 수 있다.

위의 스크롤 제어 단계가 종료되면, 상기 플래그 값을 다시 복귀시켜 또 다른 스크롤 제어 이벤트를 처리하도록 한다.

한편, 본 발명의 또 다른 일실시예에 따른 웹페이지 제어방법을 웹페이지 제어시스템에서 수행할 수 있다.

즉, 웹페이지 제어시스템은, 제1컨텐츠를 웹페이지의 표시영역을 통해 디스플레이할 수 있으며, 상기 웹페이지에 대한 스크롤 이벤트를 감지하여 상기 스크롤 이벤트가 컨텐츠 전환 이벤트에 해당하고, 임계치 이상인 경우, 상기 제1컨텐츠를 제2컨텐츠로 전환하여, 제2컨텐츠를 웹페이지의 표시영역을 통해 디스플레이할 수 있다.

이때, 제1컨텐츠는 헤더컨텐츠와 이웃하는 컨텐츠이며, 헤더컨텐츠는 웹페이지의 표시영역의 고정된 위치에서 계속적으로 디스플레이되는 컨텐츠일 수 있다. 또한 제2컨텐츠는 제1컨텐츠가 헤더컨텐츠와 이웃하고 있을 때, 스크롤 이벤트에 따라 제1컨텐츠에 후속하여 표시될 수 있는 컨텐츠이다.

또한 웹페이지 제어시스템은, 제1컨텐츠를 웹페이지의 표시영역을 통해 디스플레이할 수 있으며, 상기 웹페이지에 대한 스크롤 이벤트를 감지하여 스크롤 이벤트가 컨텐츠 전환 이벤트에 해당하고, 임계치 이상인 경우, 상기 제1컨텐츠를 제2컨텐츠와 제3컨텐츠로 전환하여, 제2컨텐츠와 제3컨텐츠를 웹페이지의 표시영역을 통해 디스플레이할 수 있다.

이때 제3컨텐츠는 제2컨텐츠가 헤더컨텐츠와 이웃하고 있을 때, 스크롤 이벤트에 따라 제2컨텐츠에 후속하여 표시될 수 있는 컨텐츠이다.

도 3을 통해 설명된 실시예에 따른 웹페이지 제어방법은 컴퓨터에 의해 실행되는 프로그램 모듈과 같은 컴퓨터에 의해 실행가능한 명령어를 포함하는 기록 매체의 형태로도 구현될 수 있다. 컴퓨터 판독 가능 매체는 컴퓨터에 의해 액세스될 수 있는 임의의 가용 매체일 수 있고, 휘발성 및 비휘발성 매체, 분리형 및 비분리형 매체를 모두 포함한다. 또한, 컴퓨터 판독가능 매체는 컴퓨터 저장 매체 및 통신 매체를 모두 포함할 수 있다. 컴퓨터 저장 매체는 컴퓨터 판독가능 명령어, 데이터 구조, 프로그램 모듈 또는 기타 데이터와 같은 정보의 저장을 위한 임의의 방법 또는 기술로 구현된 휘발성 및 비휘발성, 분리형 및 비분리형 매체를 모두 포함한다. 통신 매체는 전형적으로 컴퓨터 판독가능 명령어, 데이터 구조, 프로그램 모듈, 또는 반송파와 같은 변조된 데이터 신호의 기타 데이터, 또는 기타 전송 메커니즘을 포함하며, 임의의 정보 전달 매체를 포함한다.

전술한 본 발명의 설명은 예시를 위한 것이며, 본 발명이 속하는 기술분야의 통상의 지식을 가진 자는 본 발명의 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 쉽게 변형이 가능하다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한다. 예를 들어, 단일형으로 설명되어 있는 각 구성 요소는 분산되어 실시될 수도 있으며, 마찬가지로 분산된 것으로 설명되어 있는 구성 요소들도 결합된 형태로 실시될 수 있다.

본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 균등 개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.

10 : 사용자단말 20: 컨텐츠서버
100: 웹페이지 제어시스템
210: 표시부 220: 입력부
230: 제어부

Claims

웹페이지 제어시스템에서, 웹페이지를 제어하는 방법으로서,
헤더컨텐츠와 이웃하는 제1컨텐츠를 상기 헤더컨텐츠와 함께 웹페이지의 표시영역을 통해 디스플레이하는 단계;
상기 웹페이지에 대한 스크롤 이벤트를 감지하는 단계; 및
상기 감지 결과에 따라, 상기 표시영역을 통해 상기 헤더컨텐츠를 제2컨텐츠-상기 제1컨텐츠와는 상이한 컨텐츠-와 이웃하도록 이동시키고, 상기 헤더컨텐츠와 함께 상기 제2컨텐츠를 상기 표시영역을 통해 디스플레이하는 단계를 포함하는, 웹페이지 제어방법.
제 1 항에 있어서,
상기 헤더컨텐츠는 상기 표시영역에서의 고정된 위치에서 디스플레이되는 컨텐츠이며,
상기 헤더컨텐츠의 이동에 따라 상기 웹페이지의 표시영역이 변경되는 것을 특징으로 하는, 웹페이지 제어방법.
제 1 항에 있어서,
상기 제2컨텐츠는 상기 스크롤 이벤트에 따라 상기 제1컨텐츠에 후속하여 디스플레이될 컨텐츠인 것을 특징으로 하는, 웹페이지 제어방법.
제 1 항에 있어서,
상기 스크롤 이벤트는 컨텐츠 전환 이벤트를 포함하며,
상기 표시영역은 컨텐츠 전환 이벤트가 적용되는 전환표시영역을 포함하며 상기 제1컨텐츠 및 제2컨텐츠는 상기 전환표시영역을 통해 디스플레이되는 것을 특징으로 하는, 웹페이지 제어방법.
제 1 항에 있어서,
상기 스크롤 이벤트를 감지하는 단계는,
상기 스크롤에 대한 제어이벤트가 임계치 이상의 이벤트인지 여부를 판단하는 단계를 포함하는, 웹페이지 제어방법.
제 1 항에 있어서,
상기 제2컨텐츠를 상기 표시영역을 통해 디스플레이하는 단계는,
상기 감지 결과에 따라 상기 헤더컨텐츠를 이동시키기 이전에, 상기 헤더컨텐츠를 소정의 시간 동안 상기 제1컨텐츠와 함께 디스플레이하는 단계를 더 포함하는, 웹페이지 제어방법.
제 1 항에 있어서,
배경컨텐츠를 상기 표시영역을 통해 디스플레이하는 단계를 더 포함하고,
상기 제2컨텐츠를 상기 표시영역을 통해 디스플레이하는 단계는,
상기 헤더컨텐츠의 이동거리와는 상이한 거리만큼 상기 배경컨텐츠를 이동시키는 단계를 더 포함하는, 웹페이지 제어방법.
제 7 항에 있어서,
상기 배경컨텐츠를 이동시키는 단계는,
상기 헤더컨텐츠의 이동방향과는 상이한 방향으로 상기 배경컨텐츠를 이동시키는 단계를 포함하는, 웹페이지 제어방법.
웹페이지 제어시스템에서, 웹페이지를 제어하는 방법으로서,
제1컨텐츠를 웹페이지의 표시영역을 통해 디스플레이하는 단계;
상기 웹페이지에 대한 스크롤 이벤트를 감지하는 단계; 및
상기 감지 결과에 따라, 상기 제1컨텐츠를 제2컨텐츠로 전환하여 상기 제2컨텐츠를 상기 표시영역을 통해 디스플레이하는 단계를 포함하는, 웹페이지 제어방법.
제 9 항에 있어서,
상기 제1컨텐츠는 헤더컨텐츠와 이웃하는 컨텐츠이며,
상기 헤더컨텐츠는 상기 표시영역에서의 고정된 위치에서 디스플레이되는 컨텐츠인 것을 특징으로 하는, 웹페이지 제어방법.
제 9 항에 있어서,
상기 제2컨텐츠는 상기 스크롤 이벤트에 따라 상기 제1컨텐츠에 후속하여 디스플레이될 컨텐츠인 것을 특징으로 하는, 웹페이지 제어방법.
제 9 항에 있어서,
상기 제2컨텐츠를 상기 표시영역을 통해 디스플레이하는 단계는,
상기 제1컨텐츠를, 상기 제2컨텐츠 및 제3컨텐츠-스크롤 이벤트에 따라 상기 제2컨텐츠에 후속하여 디스플레이될 컨텐츠-로 전환하는 단계를 더 포함하는, 웹페이지 제어방법.
제 1 항 내지 제 12 항 중 어느 한 항에 기재된 방법을 수행하는 프로그램이 기록된 컴퓨터 판독가능한 기록매체.