KR101579605B1

KR101579605B1 - 표시 제어 장치, 표시 제어 방법 및 이를 컴퓨터에서 실행하기 위한 컴퓨터 프로그램

Info

Publication number: KR101579605B1
Application number: KR1020140096613A
Authority: KR
Inventors: 이선; 추홍엽; 임원석; 김정식; 이재연; 변우식; 조재윤
Original assignee: 네이버 주식회사
Priority date: 2014-07-29
Filing date: 2014-07-29
Publication date: 2015-12-22

Abstract

본 발명의 일 실시예는 컨텐츠를 포함하는 컨텐츠 영역이 하나 이상 나열된 페이지의 적어도 일부를 화면에 표시하는 단계; 상기 페이지에 대한 스크롤의 동작을 인식하는 단계; 및 상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지가 스크롤됨에 따라 상기 화면에 노출되는 컨텐츠 영역에 포함된 컨텐츠에 대하여 애니메이션을 적용하는 스크롤 단계;를 포함하는 표시 제어 방법을 개시한다.

Description

표시 제어 장치, 표시 제어 방법 및 이를 컴퓨터에서 실행하기 위한 컴퓨터 프로그램{Method and apparatus of controlling display and computer program for executing the method}

본 발명의 실시예들은 표시 제어 장치, 표시 제어 방법 및 이를 컴퓨터에서 실행하기 위한 컴퓨터 프로그램에 관한 것이다.

화면(screen)이나 패널에 표시되어 있는 페이지를 세로(vertical) 및/또는 가로 (horizontal) 방향으로 이동시키는 것을 스크롤이라고 한다. 이동된 화면에서 사라진 부분만큼 반대측에서 새로운 정보가 나타나게 된다. 하나의 페이지 내에서 표시하는 정보의 양이 화면에서 표시할 수 있는 양보다 많기 때문에 이러한 스크롤 기능이 빈번하게 사용된다. 스크롤을 수행하면서 화면 상의 정보를 읽어갈 수가 있다. 콘솔, 워드 프로세서, 모바일 단말, 퍼스널 컴퓨터 등의 표시 장치에는 거의 예외 없이 스크롤 기능이 갖추어져 있다.

마우스와 같은 외부 기기가 구비되는 경우 휠을 움직이거나 스크롤바를 드래그하여 스크롤을 수행할 수 있고, 터치패드가 구비되는 경우 화면 상의 페이지를 직접 클릭 또는 드래그하여 스크롤을 수행할 수 있다.

본 발명의 실시예들은 스크롤 기능에 시각적 효과를 부여할 수 있는 표시 제어 장치, 표시 제어 방법 및 이를 컴퓨터에서 실행하기 위한 컴퓨터 프로그램을 제공한다.

본 발명의 다른 실시예는 컨텐츠 영역이 하나 이상 나열된 페이지에 대한 스크롤 동작을 인식하는 스크롤 인식부; 상기 페이지의 적어도 일부를 화면에 표시하고, 상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지의 스크롤에 따라 노출되는 컨텐츠 영역에 포함되는 컨텐츠에 애니메이션을 적용하는 표시 제어부; 및 상기 스크롤 동작 또는 상기 페이지의 스크롤에 기초하여 상기 애니메이션을 생성하는 애니메이션 생성부;를 포함하는 표시 제어 장치를 개시한다.

본 발명의 또 다른 실시예는 컴퓨터를 이용하여 전술한 표시 제어 방법을 실행시키기 위하여 매체에 저장된 컴퓨터 프로그램을 개시한다.

전술한 것 외의 다른 측면, 특징, 이점이 이하의 도면, 특허청구범위 및 발명의 상세한 설명으로부터 명확해질 것이다.

본 발명의 실시예들에 관한 표시 제어 장치, 표시 제어 방법 및 이를 컴퓨터에서 실행하기 위한 컴퓨터 프로그램에 따르면, 스크롤에 의해 화면에 노출되는 정보에 대하여 사용자의 집중도가 향상된다.

스크롤에 의해 화면에 노출되는 컨텐츠에 대하여 애니메이션이 적용되므로, 사용자의 시선이 스크롤에 의해 노출되는 컨텐츠에 집중되는 효과가 있다.

본 발명의 실시예들에 관한 표시 제어 장치, 표시 제어 방법 및 이를 컴퓨터에서 실행하기 위한 컴퓨터 프로그램에 따르면, 스크롤 시 시각적 효과가 발생하고, 이는 사용자의 니즈에 부합한다.

도 1은 일 실시예에 따른 표시 제어 장치(100)를 개략적으로 나타낸 구성도이다.
도 2는 일 실시예에 따른 표시 제어 방법을 도시한 흐름도이다.
도 3은 일 실시예에 따른 페이지 및 페이지의 일부가 표시된 화면을 도시한 예이다.
도 4는 일 실시예에 따라 컨텐츠에 적용되는 애니메이션의 일 예를 설명하기 위한 도면이다.
도 5는 도 4의 애니메이션이 적용된 페이지가 단말의 화면에서 스크롤되는 예를 표시한 도면이다.
도 6은 일 실시예에 따라 컨텐츠에 적용되는 애니메이션의 일 예를 설명하기 위한 도면이다.
도 7은 도 6의 애니메이션이 적용된 페이지가 단말의 화면에서 스크롤되는 예를 표시한 도면이다.
도 8은 스크롤 속도에 따라 애니메이션의 속성이 다르게 설정되는 예를 설명하기 위한 도면이다.

본 발명은 다양한 변환을 가할 수 있고 여러 가지 실시예를 가질 수 있는 바, 특정 실시예들을 도면에 예시하고 상세한 설명에 상세하게 설명하고자 한다. 본 발명의 효과 및 특징, 그리고 그것들을 달성하는 방법은 도면과 함께 상세하게 후술되어 있는 실시예들을 참조하면 명확해질 것이다. 그러나 본 발명은 이하에서 개시되는 실시예들에 한정되는 것이 아니라 다양한 형태로 구현될 수 있다.

이하, 첨부된 도면을 참조하여 본 발명의 실시예들을 상세히 설명하기로 하며, 도면을 참조하여 설명할 때 동일하거나 대응하는 구성 요소는 동일한 도면부호를 부여하고 이에 대한 중복되는 설명은 생략하기로 한다.

이하의 실시예에서, 제1, 제2 등의 용어는 한정적인 의미가 아니라 하나의 구성 요소를 다른 구성 요소와 구별하는 목적으로 사용되었다. 이하의 실시예에서, 단수의 표현은 문맥상 명백하게 다르게 뜻하지 않는 한, 복수의 표현을 포함한다. 이하의 실시예에서, 포함하다 또는 가지다 등의 용어는 명세서상에 기재된 특징, 또는 구성요소가 존재함을 의미하는 것이고, 하나 이상의 다른 특징들 또는 구성요소가 부가될 가능성을 미리 배제하는 것은 아니다.

도 1은 일 실시예에 따른 표시 제어 장치(100)를 개략적으로 나타낸 구성도이다.

일 실시예에 따라 제공되는 표시 제어 장치(100)는 적어도 하나 이상의 프로세서(processor)에 해당하거나, 적어도 하나 이상의 프로세서를 포함할 수 있다. 이에 따라, 표시 제어 장치(100)는 마이크로 프로세서나 범용 컴퓨터 시스템과 같은 다른 하드웨어 장치에 포함된 형태로 구동될 수 있다. 예컨대, 표시 제어 장치(100)는 화면을 표시할 수 있는 표시부를 구비하는 단말에 탑재될 수 있다.

도 1에 도시된 표시 제어 장치(100)는 본 실시예의 특징이 흐려지는 것을 방지하기 위하여 본 실시예와 관련된 구성요소들만을 도시한 것이다. 따라서, 도 1에 도시된 구성요소들 외에 다른 범용적인 구성요소들이 더 포함될 수 있음을 본 실시예와 관련된 기술분야에서 통상의 지식을 가진 자라면 이해할 수 있다.

일 실시예에 따른 표시 제어 장치(100)는 단말(10)의 화면(11)의 표시를 제어한다. 일 실시예에 따른 표시 제어 장치(100)는 화면(11) 상에 표시된 페이지가 스크롤될 때, 상기 페이지의 표시를 제어할 수 있다. 예를 들어, 표시 제어 장치(100)는 페이지가 스크롤됨에 따라 화면(11)에 새로운 컨텐츠가 노출될 때, 새로 노출되는 컨텐츠에 애니메이션을 실행하여 표시할 수 있다. 일 실시예에 따른 표시 제어 장치(100)는 스크롤 인식부(110), 애니메이션 생성부(120), 및 표시 제어부(130)를 포함할 수 있다.

스크롤 인식부(110)는 사용자로부터 입력된 스크롤 동작을 인식한다. 스크롤 인식부(110)는 스크롤 동작의 속도, 방향, 위치 등을 인식할 수 있다. 스크롤 동작은 터치패널을 이용한 드래그, 제스쳐, 모션 등의 동작을 이용하여 입력되거나, 마우스의 휠, 조이패드 등 별도의 입력장치를 이용하여 입력되거나, 화면에 표시된 스크롤 바를 조작함으로써 입력될 수 있으나, 이에 한정하지 않는다.

표시 제어부(130)는 인식된 스크롤 동작에 기초하여 화면(11)에 표시된 페이지를 스크롤한다. 한편, 표시 제어부(130)는 스크롤 되는 페이지에 포함된 컨텐츠에 적용된 소정의 애니메이션을 적용할 수 있다. 예를 들어, 표시 제어부(130)는 페이지가 스크롤됨에 따라 화면에 새로 노출되는 컨텐츠가 존재할 때, 상기 컨텐츠에 애니메이션을 적용하여 실행시킴으로써, 상기 컨텐츠의 노출에 시각적 효과를 줄 수 있다. 이에 따라 새로 노출되는 컨텐츠에 사용자의 관심이 집중될 수 있고, 페이지의 스크롤에 시각적 효과가 발생하며, 이는 사용자의 니즈에 부합한다.

예를 들어, 화면에 표시되는 페이지는 복수의 컨텐츠 영역이 나열되어 구성될 수 있고, 각 컨텐츠 영역에는 컨텐츠가 포함될 수 있다. 표시 제어부(130)는 페이지의 스크롤에 따라 화면에 노출되는 컨텐츠 영역에 포함된 컨텐츠에 대하여 애니메이션을 적용할 수 있다.

일 실시예에 따른 표시 제어부(130)는 페이지가 스크롤될 때 스크롤의 방향에 따라 페이지의 최단부로 이동할 수 있는 아이콘을 화면에 표시할 수 있다. 예를 들어, 표시 제어부(130)는 페이지가 아래에서 위 방향으로 스크롤될 때 페이지의 최상단으로 이동할 수 있는 “top” 아이콘을 화면의 상단에 표시할 수 있다. 상기 아이콘은 스크롤이 중단되고 소정의 기준시간이 지나면 자동으로 사라지도록 설정될 수 있다.

표시 제어부(130)는 스크롤 기능 이외에도 다양한 표시 인터페이스를 제공할 수 있다. 예를 들어, 사용자가 특정 컨텐츠 영역을 클릭한 상태를 유지하고 있으면, 클릭된 컨텐츠 영역을 확대하여 해당 컨텐츠 영역이 선택된 상태임을 표시할 수 있다. 다만, 본 발명의 실시예들이 이에 한정되는 것은 아니며, 예컨대 사용자가 특정 컨텐츠 영역을 클릭한 상태를 유지하고 있으면, 클릭된 컨텐츠 영역을 축소하거나, 축소한 후 확대하거나, 확대한 후 축소하는 등의 표시 효과를 적용하여 해당 컨텐츠 영역이 선택된 상태임을 표시할 수 있다. 다만, 컨텐츠 영역이 클릭된 상태가 소정의 임계시간을 초과하면, 컨텐츠 영역의 확대 또는 축소 상태가 해제될 수 있다.

애니메이션 생성부(120)는 상기 컨텐츠에 적용될 애니메이션을 생성한다. 애니메이션 생성부(120)는 사용자의 스크롤 동작, 또는 이에 따른 페이지의 스크롤 속도에 기초하여, 컨텐츠에 적용될 애니메이션을 생성한다. 애니메이션은 컨텐츠를 이동시키는 동작을 포함할 수 있다. 예컨대, 이동 시작 포인트에서부터 컨텐츠 영역 내의 기 지정된 위치로 컨텐츠를 이동시키는 동작일 수 있다. 애니메이션이 적용되면, 컨텐츠는 화면 상에서의 페이지의 스크롤과는 별개로, 페이지 상에서 애니메이션에 따라 이동될 수 있다.

일 실시예에 따른 애니메이션 생성부(120)는 컨텐츠의 이동 속도, 이동 거리, 이동 시간 및 이동 방향 중 적어도 하나를 스크롤 동작의 속도, 또는 이에 따른 페이지의 스크롤 속도에 따라 결정할 수 있다. 예를 들어, 일 실시예에 따른 애니메이션 생성부(120)는 컨텐츠의 이동 속도, 이동 거리, 이동 시간 및 이동 방향 중 적어도 하나를 스크롤 동작의 속도, 또는 이에 따른 페이지의 스크롤 속도에 비례하도록 결정할 수 있다. 컨텐츠의 이동 방향은 페이지의 스크롤 방향과 동일하게 설정될 수 있다.

한편, 본 발명의 일 실시예에 따라 생성된 애니메이션은 화면의 스크롤 뿐 아니라 화면이 축소됨에 따라 화면 외부에 있던 컨텐츠가 화면 내부에 노출되는 경우에도 적용될 수 있으며, 이 경우 컨텐츠의 이동 방향은 컨텐츠가 화면 영역으로 들어오는 방향과 동일한 방향으로 설정될 수 있다. 예를 들어, 화면이 축소됨에 따라 화면의 상하좌우 각 방향의 외부에 있던 복수의 컨텐츠들이 화면 내부로 들어오게 되는 경우, 복수의 컨텐츠들에는 이동 애니메이션이 적용될 수 있으며, 각 컨텐츠의 이동 방향은 각 컨텐츠가 화면 내부로 들어오는 방향과 동일한 방향으로 설정될 수 있다. 애니메이션이 적용되면 컨텐츠의 이동이 가속화되는 것과 같은 시각적 효과가 발생한다.

일 실시예에 따른 애니메이션 생성부(120)는 컨텐츠의 이동 시간을 기설정된 고정 시간으로 설정하고, 컨텐츠의 이동 속도를 스크롤 동작의 속도 또는 페이지의 스크롤 속도에 따라 설정하고, 컨텐츠의 이동 거리를 상기 설정된 이동 시간 및 이동 속도에 따라 산출할 수 있다.

애니메이션 생성부(120)는 컨텐츠의 이동 거리를 기설정된 고정 거리로 설정하고, 컨텐츠의 이동 속도를 스크롤 동작의 속도 또는 상기 페이지의 스크롤 속도에 따라 설정할 수 있다.

애니메이션 생성부(120)는 컨텐츠의 이동 속도를 컨텐츠가 이동함에 따라 가속 또는 감속되도록 설정하고, 컨텐츠의 평균 이동 속도를 스크롤 동작의 속도 또는 페이지의 스크롤 속도에 따라 설정할 수 있다.

일 실시예에 따른 애니메이션 생성부(120)는 컨텐츠의 투명도를 제1 투명도에서 제2 투명도로 점점 변화시키는 애니메이션을 생성할 수 있다. 제1 투명도는 예컨대 50%의 투명도일 수 있고, 제2 투명도는 예컨대 0%의 투명도일 수 있다. 여기서 0%는 불투명 상태, 100%는 투명 상태를 의미하는 것으로 해석한다.

일 실시예에 따른 애니메이션 생성부(120)는 컨텐츠의 크기를 점점 변화시키는 애니메이션을 생성할 수 있다. 애니메이션은 컨텐츠의 크기가 컨텐츠의 본래 크기보다 작은 크기에서부터 점점 확대되어 컨텐츠의 본래 크기에 도달하도록 변화시키는 동작을 포함할 수 있다. 컨텐츠의 크기가 변화하는 속도는, 스크롤 동작의 속도 또는 페이지의 스크롤 속도에 비례하여 설정될 수 있다. 예를 들어, 일 실시예에 따른 애니메이션 생성부(120)는 컨텐츠의 크기를 80%에서 100%로 확대시키는 애니메이션을 생성할 수 있다.

일 실시예에 따른 애니메이션 생성부(120)는 컨텐츠의 내용을 기저장된 패턴 또는 배경화면으로 대체하는 효과를 포함할 수 있다. 컨텐츠는 애니메이션이 적용되는 동안 컨텐츠의 내용이 기저장된 패턴 또는 배경화면으로 대체될 수 있고, 이에 따라 컨텐츠의 내용이 보이지 않을 수 있다.

도 2는 일 실시예에 따른 표시 제어 방법을 도시한 흐름도이다.

도 2에 도시된 흐름도는, 도 1에 도시된 표시 제어 장치(100)에서 시계열적으로 처리되는 단계들로 구성된다. 따라서, 이하에서 생략된 내용이라 하더라도, 도 1에서 도시된 구성들에 관하여 이상에서 기술된 내용은 도 2에 도시된 흐름도에도 적용됨을 알 수 있다.

도 2를 참조하면, 단계 21에서 도 1의 표시 제어부(130)는 페이지의 적어도 일부를 단말의 화면에 표시한다. 페이지에는 컨텐츠를 포함하는 컨텐츠 영역이 하나 이상 나열된다.

단계 22에서 도 1의 스크롤 인식부(110)는 화면에 표시된 페이지에 대한 스크롤 동작을 인식한다.

단계 23에서 도 1의 표시 제어부(130)는 스크롤 동작에 따라 페이지를 스크롤하고, 페이지가 스크롤됨에 따라 화면에 노출되는 컨텐츠 영역에 포함된 컨텐츠에 대하여 애니메이션을 적용한다. 상기 애니메이션은 도 1의 애니메이션 생성부(120)에 의해 생성된다. 애니메이션은 컨텐츠가 컨텐츠 영역 내의 기 지정된 위치로 이동하는 동작을 포함할 수 있다. 단계 23에서 표시 제어부(130)는 컨텐츠 영역이 화면에 노출되는 시점부터, 컨텐츠 영역에 포함된 컨텐츠에 대한 애니메이션의 동작을 시작할 수 있다.

도 3은 일 실시예에 따른 페이지 및 페이지의 일부가 표시된 화면을 도시한 예이다.

도 3을 참조하면 페이지(30)는 복수의 컨텐츠 영역(31)을 포함하고, 각 컨텐츠 영역(31)에는 컨텐츠(32)가 배치된다. 도 3의 예에서는 복수의 컨텐츠 영역(31)이 일렬로 나열되어 페이지(30)를 구성하는 예가 도시되었다. 단말(10)의 화면(11)에는 페이지(30)의 적어도 일부 영역(33)이 표시된다. 사용자는 단말(10)에 표시된 페이지에 대하여 스크롤 동작을 입력하여 페이지를 스크롤 할 수 있다. 도 3에서는 사용자가 화면을 직접 터치하여 드래그를 입력함으로써 스크롤 동작을 입력하는 예를 도시하였다.

한편, 사용자가 스크롤 동작을 입력함에 따라 페이지가 스크롤되면서, 화면(11) 밖에 가려져 있던 컨텐츠 영역이 화면(11)에 등장할 때, 상기 컨텐츠 영역에 포함된 컨텐츠에는 소정의 애니메이션이 적용될 수 있다. 즉, 스크롤에 따라 화면(11)에 새롭게 노출되는 컨텐츠에는 소정의 애니메이션이 적용될 수 있다. 이와 같은 애니메이션은 사용자가 새로 노출된 컨텐츠에 집중할 수 있도록 하며, 스크롤에 시각적 효과를 부여하게 된다.

도 4는 일 실시예에 따라 컨텐츠에 적용되는 애니메이션의 일 예를 설명하기 위한 도면이다.

일 실시예에 따른 애니메이션은 컨텐츠를 이동시키는 동작을 포함할 수 있다. 도 4의 (a) 내지 (c)는 일 실시예에 따른 애니메이션이 실행됨에 따라 컨텐츠가 이동되는 과정을 차례로 도시한 것이다.

도 4를 참조하면, 일 실시예에 따른 애니메이션은 컨텐츠를 이동 시작 지점(42)부터 이동 종료 지점(41)까지 소정의 이동 거리(d)만큼 이동시키는 동작을 포함할 수 있다. 이동 종료 지점(41)은 컨텐츠 영역(43) 내의 컨텐츠(431)의 원래 위치이고, 이동 시작 지점(42)은 이동 종료 지점(41)에서부터 이동 거리(d)만큼 떨어진 곳으로 결정될 수 있다.

일 실시예에 따르면, 애니메이션의 속성은 페이지의 스크롤 속도 또는 사용자에 의해 입력된 스크롤 동작의 속도에 따라 결정될 수 있다. 여기서, 애니메이션의 속성은 컨텐츠의 이동 속도, 이동 거리, 이동 시간을 포함할 수 있다.

일 실시예에 따르면 애니메이션의 속성 중 이동 시간은 소정의 시간, 예컨대 0.5초 등의 고정된 값으로 기설정될 수 있다. 그리고, 이동 속도(v)는 페이지의 스크롤 속도 또는 사용자에 의해 입력된 스크롤 동작의 속도에 따라 결정될 수 있다. 이동 거리(d)는 이동 시간과 이동 속도(v)가 결정되면 계산에 따라 산출될 수 있다.

한편, 애니메이션의 속성은 이동 방향을 더 포함할 수 있으며, 이동 방향은 페이지의 스크롤 방향에 따라 결정될 수 있다. 이동 방향은 페이지의 스크롤 방향과 동일한 방향으로 결정될 수 있다. 이동 시작 지점(42)은 이동 거리(d), 이동 종료 지점(41) 및 이동 방향에 따라 결정될 수 있다. 도 4의 경우 페이지가 위 방향으로 스크롤 되는 경우이며, 이에 따라 컨텐츠도 아래에서 위 방향으로 이동하도록 이동 시작 지점(42)이 결정된다.

한편, 이동 속도는 컨텐츠(431)의 이동에 따라 가변하도록 설정될 수 있다. 예를 들어, 이동 속도는 컨텐츠(431)의 이동에 따라 가속 또는 감속되도록 설정할 수 있다. 이 경우, 평균 이동 속도는 페이지의 스크롤 속도 또는 사용자에 의해 입력된 스크롤 동작의 속도에 따라 결정될 수 있다. 또는 이동 시작 지점(42) 또는 이동 종료 지점(41)에서의 순간 이동 속도가 페이지의 스크롤 속도 또는 사용자에 의해 입력된 스크롤 동작의 속도에 따라 결정될 수 있다.

도 5는 도 4의 애니메이션이 적용된 페이지가 단말의 화면에서 스크롤되는 예를 표시한 도면이다.

도 5는 단말의 화면 상에서 페이지가 아래에서 위 방향으로 스크롤되고 있는 과정을 도시한 것이다. 스크롤에 따라 새로 노출되는 컨텐츠 영역(43)에 포함된 컨텐츠(431)에는 애니메이션이 적용되고, 애니메이션이 적용된 컨텐츠(431)는 페이지 상에서 이동하고 있는 것을 볼 수 있다.

한편, 컨텐츠(431)에 적용된 애니메이션의 동작은 컨텐츠 영역(43)이 화면에 노출되는 시점부터 실행될 수 있다. 애니메이션이 실행됨에 따라 컨텐츠(431)는 컨텐츠 영역(43)이 화면에 노출되는 시점보다 뒤늦게 화면에 노출되며, 컨텐츠(431)가 화면에 노출될 때의 순간 스크롤 속도는 페이지의 스크롤 속도보다 더 빠르게 된다. 즉, 컨텐츠(431)는 애니메이션이 실행되는 동안 페이지의 스크롤 속도보다 더 가속되어 스크롤되는 것처럼 보여지는 시각적 효과가 발생한다.

도 6은 일 실시예에 따라 컨텐츠에 적용되는 애니메이션의 다른 예를 설명하기 위한 도면이다.

일 실시예에 따른 애니메이션은 컨텐츠를 확대시키는 동작을 포함할 수 있다. 도 6에 도시된 애니메이션은, 컨텐츠를 이동시키는 동작과 컨텐츠를 확대시키는 동작을 모두 포함한다. 도 6의 (a) 내지 (c)는 일 실시예에 따른 애니메이션이 실행됨에 따라 컨텐츠가 확대되면서 이동되는 과정을 차례로 도시한 것이다.

도 6을 참조하면, 페이지가 스크롤됨에 따라 화면에 노출되는 컨텐츠 영역(63)에 포함된 컨텐츠(631)에 대하여 애니메이션이 적용될 수 있다. 도 6에 도시된 애니메이션은, 컨텐츠 영역(63)이 단말의 화면에 노출되는 시점부터 실행될 수 있다.

도 7은 도 6의 애니메이션이 적용된 페이지가 단말의 화면에서 스크롤되는 예를 표시한 도면이다.

도 7은 단말의 화면 상에서 페이지가 아래에서 위 방향으로 스크롤되고 있는 과정을 도시한 것이다. 스크롤에 따라 새로 노출되는 컨텐츠 영역(63)에 포함된 컨텐츠(631)에는 애니메이션이 적용되고, 애니메이션이 적용된 컨텐츠(631)는 페이지 상에서 확대되며 이동하는 것을 볼 수 있다.

한편, 컨텐츠(631)에 적용된 애니메이션의 동작은 컨텐츠 영역(63)이 화면에 노출되는 시점부터 실행될 수 있다. 애니메이션이 실행됨에 따라 컨텐츠(631)는 컨텐츠 영역(63)보다 뒤늦게 화면에 노출될 것이며, 페이지의 스크롤 속도보다 더 가속되어 스크롤되며 확대되는 것처럼 보여질 것이다.

도 8은 스크롤 속도에 따라 애니메이션의 속성이 다르게 설정되는 예를 설명하기 위한 도면이다.

도 8은 페이지의 스크롤에 따라 화면에 노출되는 컨텐츠 영역(81)에 포함된 컨텐츠(811)에 애니메이션이 적용되는 예를 도시한 것이다. 도 8의 (a) 및 (b)는 스크롤 동작의 속도, 또는 이에 따른 페이지의 스크롤 속도의 차이에 따라 서로 다르게 설정된 애니메이션을 비교하여 보여주고 있다. 도 8을 참조하면, 도 8의 (a)보다 도 8의 (b)의 예에서 스크롤(84)의 속도가 더 빠른 것으로 도시되었다.

일 실시예에 따라, 애니메이션 생성부(120)는 도 8의 (a)와 (b) 각각의 경우에 대하여 애니메이션의 이동 시간을 동일한 고정 값으로 설정한다. 즉, 스크롤 속도는 달라도 이동 시간은 동일한 고정 값으로 설정될 수 있다. 애니메이션 생성부(120)는 스크롤 속도에 비례하여 이동 속도를 설정할 수 있다. 도 8의 예에서 (a)의 경우의 이동 속도(v1)는 (b)의 경우의 이동 속도(v2)보다 작게 설정되었다.

애니메이션 생성부(120)는 이동 속도와 이동 시간에 따라 이동 거리를 설정할 수 있다. 도 8의 예에서 (a)의 경우의 이동 거리(d1)는 (b)의 경우의 이동 거리(d2)보다 짧게 설정되었으며, 이는 이동 속도(v1)가 이동 속도(v2)보다 작게 설정되었기 때문이다.

애니메이션 생성부(120)는 컨텐츠의 본래 위치에서부터 이동 거리만큼 떨어진 위치를 컨텐츠의 이동 시작 지점으로 설정한다. 도 8의 예에서 (a)의 경우의 이동 시작 지점(831)은 (b)의 경우의 이동 시작 지점(832)보다 컨텐츠의 본래 위치(821, 822)에서 가깝게 설정되었으며, 이는 이동 거리(d1)가 이동 거리(d2)보다 짧게 설정되었기 때문이다.

도 8의 예에서 컨텐츠의 이동 방향은 스크롤(84)의 방향과 동일하게 설정되었다.

도 8을 참조하면, (a)의 경우보다 스크롤(84) 속도가 빠른 (b)의 경우에 컨텐츠가 이동하는 거리(d2)가 길어지고, 컨텐츠가 이동하는 속도(v2)가 빠르게 설정된다. 이에 따라 페이지의 스크롤 속도보다 컨텐츠가 더 가속되어 스크롤되는 것처럼 보여지는 가시적 효과가, (a)보다 (b)의 경우 더 극대화 될 수 있다.

전술한 본 발명의 실시예들은 페이지가 아래에서 위 방향으로 스크롤되는 예를 들어 설명되었으나, 본 발명은 이에 한정되지 않는다. 페이지의 크기에 따라 스크롤은 상, 하, 좌, 우 또는 이들이 조합된 어느 방향으로라도 실행될 수 있다.

전술한 본 발명의 실시예들은 스크롤이 아닌 화면의 확대 및 축소의 경우에도 적용될 수 있다. 예컨대, 화면이 확대되거나 축소됨에 따라 화면에 새로 노출되는 컨텐츠에 대하여 전술한 애니메이션이 적용될 수 있다.

한편, 전술한 도 2에 도시된 본 발명의 일 실시예에 따른 표시 제어 방법은 컴퓨터에서 실행될 수 있는 프로그램으로 작성 가능하고, 컴퓨터로 읽을 수 있는 기록매체를 이용하여 상기 프로그램을 동작시키는 범용 디지털 컴퓨터에서 구현될 수 있다. 상기 컴퓨터로 읽을 수 있는 기록매체는 마그네틱 저장매체(예를 들면, 롬, 플로피 디스크, 하드 디스크 등), 광학적 판독 매체(예를 들면, 시디롬, 디브이디 등)와 같은 저장매체를 포함한다.

본 발명의 일 실시예에 따르면, 전술한 본 발명의 일 실시예에 따른 표시 제어 방법을 컴퓨터에서 실행할 수 있는 프로그램 및 이를 배포하는 배포 서버가 제공된다.

이와 같이 본 발명은 도면에 도시된 일 실시예를 참고로 하여 설명하였으나 이는 예시적인 것에 불과하며 당해 분야에서 통상의 지식을 가진 자라면 이로부터 다양한 변형 및 실시예의 변형이 가능하다는 점을 이해할 것이다. 따라서, 본 발명의 진정한 기술적 보호 범위는 첨부된 특허청구범위의 기술적 사상에 의하여 정해져야 할 것이다.

표시 제어 장치(100)
단말(10)
화면(11)
스크롤 인식부(110)
애니메이션 생성부(120)
표시 제어부(130)

Claims

컨텐츠를 포함하는 컨텐츠 영역이 하나 이상 나열된 페이지의 적어도 일부를 화면에 표시하는 단계;
상기 페이지에 대한 스크롤의 동작을 인식하는 단계; 및
상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지가 스크롤됨에 따라 함께 스크롤되어 상기 화면에 노출되는 컨텐츠 영역에 포함된 컨텐츠에 대하여 애니메이션을 실행시키는 스크롤 단계;를 포함하는
표시 제어 방법.
제1 항에 있어서,
상기 애니메이션은 상기 컨텐츠가 상기 컨텐츠 영역 내의 기 지정된 위치로 이동하는 동작을 포함하고,
상기 컨텐츠의 이동 속도, 이동 거리, 이동 시간, 및 이동 방향 중 적어도 하나는 상기 스크롤 동작의 속도 또는 상기 페이지의 스크롤 속도에 따라 설정되는
표시 제어 방법.
컨텐츠를 포함하는 컨텐츠 영역이 하나 이상 나열된 페이지의 적어도 일부를 화면에 표시하는 단계;
상기 페이지에 대한 스크롤의 동작을 인식하는 단계; 및
상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지가 스크롤됨에 따라 상기 화면에 노출되는 컨텐츠 영역에 포함된 컨텐츠에 대하여 애니메이션을 적용하는 스크롤 단계;를 포함하고,
상기 애니메이션은 상기 컨텐츠가 상기 컨텐츠 영역 내의 기 지정된 위치로 이동하는 동작을 포함하고,
상기 컨텐츠의 이동 속도, 이동 거리, 이동 시간, 및 이동 방향 중 적어도 하나는 상기 스크롤 동작의 속도 또는 상기 페이지의 스크롤 속도에 따라 설정되고,
상기 컨텐츠의 이동 시작 포인트는, 상기 기 지정된 위치로부터, 상기 이동 속도에 따라 산출되는 상기 컨텐츠의 이동 거리만큼 떨어진 위치로 설정되고,
상기 애니메이션은 상기 이동 시작 포인트에서부터 상기 기 지정된 위치까지 상기 컨텐츠를 이동시키는 동작을 포함하는
표시 제어 방법.
컨텐츠를 포함하는 컨텐츠 영역이 하나 이상 나열된 페이지의 적어도 일부를 화면에 표시하는 단계;
상기 페이지에 대한 스크롤의 동작을 인식하는 단계; 및
상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지가 스크롤됨에 따라 상기 화면에 노출되는 컨텐츠 영역에 포함된 컨텐츠에 대하여 애니메이션을 적용하는 스크롤 단계;를 포함하고,
상기 애니메이션은 상기 컨텐츠가 상기 컨텐츠 영역 내의 기 지정된 위치로 이동하는 동작을 포함하고,
상기 컨텐츠의 이동 속도, 이동 거리, 이동 시간, 및 이동 방향 중 적어도 하나는 상기 스크롤 동작의 속도 또는 상기 페이지의 스크롤 속도에 따라 설정되고,
상기 컨텐츠의 이동 시간은 기설정된 고정 시간으로 설정되고,
상기 컨텐츠의 이동 속도는 상기 스크롤 동작의 속도 또는 상기 페이지의 스크롤 속도에 따라 설정되고,
상기 컨텐츠의 이동 거리는 상기 기설정된 이동 시간 및 상기 설정된 이동 속도에 따라 결정되는
표시 제어 방법.
컨텐츠를 포함하는 컨텐츠 영역이 하나 이상 나열된 페이지의 적어도 일부를 화면에 표시하는 단계;
상기 페이지에 대한 스크롤의 동작을 인식하는 단계; 및
상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지가 스크롤됨에 따라 상기 화면에 노출되는 컨텐츠 영역에 포함된 컨텐츠에 대하여 애니메이션을 적용하는 스크롤 단계;를 포함하고,
상기 애니메이션은 상기 컨텐츠가 상기 컨텐츠 영역 내의 기 지정된 위치로 이동하는 동작을 포함하고,
상기 컨텐츠의 이동 속도, 이동 거리, 이동 시간, 및 이동 방향 중 적어도 하나는 상기 스크롤 동작의 속도 또는 상기 페이지의 스크롤 속도에 따라 설정되고,
상기 컨텐츠의 이동 거리는 기설정된 고정 거리로 설정되고,
상기 컨텐츠의 이동 속도는 상기 스크롤의 동작의 속도 또는 상기 페이지의 스크롤 속도에 따라 설정되는
표시 제어 방법.
컨텐츠를 포함하는 컨텐츠 영역이 하나 이상 나열된 페이지의 적어도 일부를 화면에 표시하는 단계;
상기 페이지에 대한 스크롤의 동작을 인식하는 단계; 및
상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지가 스크롤됨에 따라 상기 화면에 노출되는 컨텐츠 영역에 포함된 컨텐츠에 대하여 애니메이션을 적용하는 스크롤 단계;를 포함하고,
상기 애니메이션은 상기 컨텐츠가 상기 컨텐츠 영역 내의 기 지정된 위치로 이동하는 동작을 포함하고,
상기 컨텐츠의 이동 속도, 이동 거리, 이동 시간, 및 이동 방향 중 적어도 하나는 상기 스크롤 동작의 속도 또는 상기 페이지의 스크롤 속도에 따라 설정되고,
상기 컨텐츠의 이동 속도는 상기 컨텐츠가 이동함에 따라 가속 또는 감속되고,
상기 컨텐츠의 평균 이동 속도는 상기 스크롤 동작의 속도 또는 상기 페이지의 스크롤 속도에 따라 설정되는
표시 제어 방법.
컨텐츠를 포함하는 컨텐츠 영역이 하나 이상 나열된 페이지의 적어도 일부를 화면에 표시하는 단계;
상기 페이지에 대한 스크롤의 동작을 인식하는 단계; 및
상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지가 스크롤됨에 따라 상기 화면에 노출되는 컨텐츠 영역에 포함된 컨텐츠에 대하여 애니메이션을 적용하는 스크롤 단계;를 포함하고,
상기 애니메이션의 동작은 상기 컨텐츠 영역이 상기 화면에 노출되는 시점부터 시작되는
표시 제어 방법.
제1 항에 있어서,
상기 스크롤 동작은 터치스크린 상의 드래그로 입력되고,
상기 스크롤 단계는 상기 드래그의 방향 및 속도에 따라 상기 페이지를 스크롤 하고,
상기 애니메이션은 상기 페이지의 스크롤 속도에 따라 적용되는
표시 제어 방법.
제1 항에 있어서,
상기 애니메이션은 상기 컨텐츠의 투명도를 제1 투명도에서 제2 투명도로 점점 변화시키는
표시 제어 방법.
제1 항에 있어서,
상기 애니메이션은 상기 컨텐츠의 크기를 점점 변화시키는
표시 제어 방법.
제10 항에 있어서,
상기 애니메이션은 상기 컨텐츠의 크기가 상기 컨텐츠의 본래 크기보다 작은 크기에서부터 점점 커져서 상기 컨텐츠의 본래 크기에 도달하도록 변화시키는
표시 제어 방법.
제10 항에 있어서,
상기 크기 변화 속도는 상기 스크롤 동작의 속도 또는 상기 페이지의 스크롤 속도에 비례하여 설정되는
표시 제어 방법.
컨텐츠를 포함하는 컨텐츠 영역이 하나 이상 나열된 페이지의 적어도 일부를 화면에 표시하는 단계;
상기 페이지에 대한 스크롤의 동작을 인식하는 단계; 및
상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지가 스크롤됨에 따라 상기 화면에 노출되는 컨텐츠 영역에 포함된 컨텐츠에 대하여 애니메이션을 적용하는 스크롤 단계;를 포함하고,
상기 애니메이션이 적용됨에 따라 상기 컨텐츠는, 상기 컨텐츠 영역이 상기 화면에 노출되는 시점보다 더 늦게 상기 화면에 노출되는
표시 제어 방법.
컨텐츠를 포함하는 컨텐츠 영역이 하나 이상 나열된 페이지의 적어도 일부를 화면에 표시하는 단계;
상기 페이지에 대한 스크롤의 동작을 인식하는 단계; 및
상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지가 스크롤됨에 따라 상기 화면에 노출되는 컨텐츠 영역에 포함된 컨텐츠에 대하여 애니메이션을 적용하는 스크롤 단계;를 포함하고,
상기 애니메이션이 적용됨에 따라 상기 컨텐츠가 상기 화면에 노출될 때의 순간 스크롤 속도는 상기 페이지의 스크롤 속도보다 더 빠른
표시 제어 방법.
컨텐츠 영역이 하나 이상 나열된 페이지에 대한 스크롤 동작을 인식하는 스크롤 인식부;
상기 페이지의 적어도 일부를 화면에 표시하고, 상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지의 스크롤에 따라 함께 스크롤되어 상기 화면에 노출되는 컨텐츠 영역에 포함되는 컨텐츠에 애니메이션을 실행시키는 표시 제어부; 및
상기 스크롤 동작 또는 상기 페이지의 스크롤에 기초하여 상기 애니메이션을 생성하는 애니메이션 생성부;를 포함하는
표시 제어 장치.
제15 항에 있어서,
상기 애니메이션은 상기 컨텐츠를 상기 컨텐츠 영역 내의 기 지정된 위치로 이동시키는 동작을 포함하고,
상기 애니메이션 생성부는
상기 스크롤 동작의 속도 또는 상기 페이지의 스크롤 속도에 기초하여 상기 컨텐츠의 이동 속도, 이동 거리, 이동 시간, 및 이동 방향 중 적어도 하나를 설정하는
표시 제어 장치.
컨텐츠 영역이 하나 이상 나열된 페이지에 대한 스크롤 동작을 인식하는 스크롤 인식부;
상기 페이지의 적어도 일부를 화면에 표시하고, 상기 스크롤 동작에 따라 상기 페이지를 스크롤하고, 상기 페이지의 스크롤에 따라 노출되는 컨텐츠 영역에 포함되는 컨텐츠에 애니메이션을 적용하는 표시 제어부; 및
상기 스크롤 동작 또는 상기 페이지의 스크롤에 기초하여 상기 애니메이션을 생성하는 애니메이션 생성부;를 포함하고,
상기 표시 제어부는 상기 페이지의 스크롤에 따라 상기 화면에 상기 컨텐츠 영역이 노출될 때 상기 컨텐츠 영역에 포함된 컨텐츠의 애니메이션의 실행을 시작하는
표시 제어 장치.
컴퓨터를 이용하여 제1 항 내지 제14 항의 방법 중 어느 하나의 방법을 실행시키기 위하여 매체에 저장된 컴퓨터 프로그램.