KR20200095960A - User terminal device and method for providing user interface of user terminal device - Google Patents

User terminal device and method for providing user interface of user terminal device Download PDF

Info

Publication number
KR20200095960A
KR20200095960A KR1020190013988A KR20190013988A KR20200095960A KR 20200095960 A KR20200095960 A KR 20200095960A KR 1020190013988 A KR1020190013988 A KR 1020190013988A KR 20190013988 A KR20190013988 A KR 20190013988A KR 20200095960 A KR20200095960 A KR 20200095960A
Authority
KR
South Korea
Prior art keywords
providing
image area
user terminal
gesture
view screen
Prior art date
Application number
KR1020190013988A
Other languages
Korean (ko)
Other versions
KR102180351B1 (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 KR1020190013988A priority Critical patent/KR102180351B1/en
Publication of KR20200095960A publication Critical patent/KR20200095960A/en
Application granted granted Critical
Publication of KR102180351B1 publication Critical patent/KR102180351B1/en

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/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
    • G06F3/04883—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 for inputting data by handwriting, e.g. gesture or text
    • 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/04817—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 using icons
    • 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/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/04845—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 for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • 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

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

The present invention relates to a user terminal and a method of providing a user interface thereof. The method of providing a user interface of a user terminal includes the steps of: (a) receiving, from a content providing server, information on a list in which content feed items to which a collapsing function is applied for at least one multimedia content are arranged; (b) outputting an upper page providing a content feed view screen for selectively activating a content feed item in the list information when a user′s scrolling motion for the user interface outputting the list information is detected; (c) outputting a lower page providing a detailed view screen including an image area and an information area for the corresponding content feed item when a corresponding content feed item is selected and activated on the upper page; (d) performing a collapsing process on the detailed view screen when a gesture in a first direction for the user′s scrolling motion is detected while the lower page is activated; and (e) performing an uncollapsing process on the detailed view screen when a gesture in a second direction is detected on the collapsing detailed view screen, and performing an operation of returning to the upper page after exiting the detailed view screen when a gesture in the second direction is detected on the uncollated detailed view screen.

Description

사용자 단말 및 그의 사용자 인터페이스 제공 방법{USER TERMINAL DEVICE AND METHOD FOR PROVIDING USER INTERFACE OF USER TERMINAL DEVICE}User terminal and its user interface provision method {USER TERMINAL DEVICE AND METHOD FOR PROVIDING USER INTERFACE OF USER TERMINAL DEVICE}

본 발명은 기설정된 터치 입력 제스처를 이용하여 하위 페이지에서 상위 페이지로 빠르게 전환할 수 있는 사용자 단말 및 그의 사용자 인터페이스 제공 방법에 관한 것이다.The present invention relates to a user terminal capable of quickly switching from a lower page to a higher page using a preset touch input gesture and a method of providing a user interface thereof.

최근, 스마트폰(smart phone)과 같은 사용자 단말의 성능 향상 및 이동통신 기술의 발달에 따라 사용자는 언제 어디서나 사용자 단말을 통해 컨텐츠 제공자(Contents Provider)가 제공하는 웹 서버에 접속해 사진, 비디오, 오디오, 음원 등과 같은 다양한 컨텐츠를 이용할 수 있다.Recently, with the improvement of the performance of user terminals such as smart phones and the development of mobile communication technology, users can access the web server provided by the contents provider through the user terminal anytime, anywhere and use photos, videos, and audio. , And various contents such as sound sources can be used.

종래에는 사용자 단말이 화면에 출력되고 있는 컨텐츠에 대해 필요한 기능을 선택하기 위해서 뒤로가기 버튼 등을 이용하여 상위 메뉴, 하위 메뉴를 오가면서 여러 차례의 메뉴 검색 및 선택 과정을 거쳐야 하므로 조작의 효율성이 떨어지는 문제점이 있다. Conventionally, the user terminal has to go through the menu search and selection process several times while going back and forth between the upper and lower menus using the back button to select the necessary functions for the contents displayed on the screen. There is a problem.

한편, 종래의 터치스크린을 이용한 사용자 단말에서는 사용자가 손가락을 이용하여 스크롤 업, 스크롤다운 등의 동작을 수행하는 도중에 페이지 전환을 위해 하위 페이지의 상단에 표시된 뒤로 가기 버튼을 직접 터치해야 하므로, 페이지 보기와 페이지 전환에 사용자 조작 제스처가 상이하여 편리한 사용자 인터페이스 환경을 제공하지 못하는 문제점이 있다.Meanwhile, in a conventional user terminal using a touch screen, the user must directly touch the back button displayed at the top of the lower page to switch pages while performing operations such as scrolling up and down using a finger. There is a problem in that a convenient user interface environment is not provided because user manipulation gestures are different for and page switching.

또한, 사용자 단말의 디스플레이의 크기는 제한적이므로 이미지와 해당 이미지에 대한 상세 정보를 제공하는 상세 보기 메뉴에서 이미지의 하단 또는 상단에 표시된 정보를 보기 위해 연속적인 스크롤 동작을 수행해야 하므로 컨텐츠의 가시성이 떨어지는 문제점이 있다.In addition, since the size of the display of the user terminal is limited, in the detail view menu that provides detailed information about the image and the image, it is necessary to perform a continuous scrolling operation to view the information displayed at the bottom or top of the image. There is a problem.

대한민국 공개특허 제10-2018-0044358호(발명의 명칭 : 컨텐츠 표시를 위한 시스템 및 방법)Republic of Korea Patent Publication No. 10-2018-0044358 (Name of invention: system and method for content display)

본 발명은 전술한 문제점을 해결하기 위하여, 본 발명의 일 실시예에 따라 기설정된 터치 입력 제스처를 이용하여 하위 페이지에서 상위 페이지로 빠르게 전환할 수 있도록 하는 것에 목적이 있다.In order to solve the above-described problems, an object of the present invention is to enable a quick switch from a lower page to a higher page using a preset touch input gesture according to an embodiment of the present invention.

다만, 본 실시예가 이루고자 하는 기술적 과제는 상기된 바와 같은 기술적 과제로 한정되지 않으며, 또 다른 기술적 과제들이 존재할 수 있다.However, the technical problem to be achieved by the present embodiment is not limited to the technical problem as described above, and other technical problems may exist.

상기한 기술적 과제를 달성하기 위한 기술적 수단으로서 본 발명의 일 실시예에 따른 사용자 단말의 사용자 인터페이스 제공 방법은, 멀티미디어 컨텐츠를 제공하는 사용자 단말에 의해 수행되는 사용자 단말의 사용자 인터페이스 제공 방법에 있어서, a) 컨텐츠 제공 서버로부터 적어도 하나 이상의 멀티미디어 컨텐츠에 대해 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 수신하는 단계; b) 상기 리스트 정보를 출력하는 사용자 인터페이스에 대한 사용자의 스크롤 동작이 감지되면, 상기 리스트 정보 내의 컨텐츠 피드 아이템을 선택적으로 활성화시키기 위한 컨텐츠 피드 뷰 화면을 제공하는 상위 페이지를 출력하는 단계; c) 상기 상위 페이지 상에서 어느 하나의 컨텐츠 피드 아이템이 선택되어 활성화되면 해당 컨텐츠 피드 아이템에 대한 이미지 영역과 정보 영역을 포함하는 상세 보기 화면을 제공하는 하위 페이지를 출력하는 단계; d) 상기 하위 페이지가 활성화된 상태에서 사용자의 스크롤 동작에 대한 제1 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 컬랩싱 처리를 수행하는 단계; e) 상기 컬랩싱 처리된 상세 보기 화면에 대해 제2 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 언컬랩싱 처리를 수행하고, 상기 언컬랩싱 처리된 상세 보기 화면에 대해 상기 제2 방향의 제스처가 감지되면 상기 상세 보기 화면을 종료한 후 상기 상위 페이지로 되돌아가기 동작을 수행하는 단계를 포함하는 것이다.A method of providing a user interface of a user terminal according to an embodiment of the present invention as a technical means for achieving the above-described technical problem, in the method of providing a user interface of a user terminal performed by a user terminal providing multimedia content, a ) Receiving, from a content providing server, information on a list in which content feed items to which a collapsing function is applied for at least one multimedia content are arranged; b) outputting a top page providing a content feed view screen for selectively activating a content feed item in the list information when a user's scrolling motion with respect to the user interface for outputting the list information is detected; c) when a content feed item is selected and activated on the upper page, outputting a lower page providing a detailed view screen including an image area and an information area for the content feed item; d) performing a collating process on the detailed view screen when a gesture in the first direction for the user's scrolling motion is detected while the lower page is activated; e) When a gesture in the second direction is detected on the collapsing detailed view screen, an uncollapsing process is performed on the detailed view screen, and a gesture in the second direction on the uncollated detailed view screen And performing an operation of returning to the upper page after ending the detailed view screen when is detected.

본 발명의 일 실시예에 따른 사용자 단말은, 멀티미디어 컨텐츠를 제공하는 사용자 단말에 있어서, 통신모듈, 상기 멀티미디어 컨텐츠를 제공하는 프로그램을 저장한 메모리, 상기 프로그램을 실행하는 프로세서를 포함하되, 상기 프로세서는 상기 프로그램의 실행에 따라, 컨텐츠 제공 서버로부터 적어도 하나 이상의 멀티미디어 컨텐츠에 대해 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 수신하고, 상기 리스트 정보를 출력하는 사용자 인터페이스에 대한 사용자의 스크롤 동작이 감지되면, 상기 리스트 정보 내의 컨텐츠 피드 아이템을 선택적으로 활성화시키기 위한 컨텐츠 피드 뷰 화면을 제공하는 상위 페이지를 출력하고, 상기 상위 페이지 상에서 어느 하나의 컨텐츠 피드 아이템이 선택되어 활성화되면 해당 컨텐츠 피드 아이템에 대한 이미지 영역과 정보 영역을 포함하는 상세 보기 화면을 제공하는 하위 페이지를 출력하고, 상기 하위 페이지가 활성화된 상태에서 사용자의 스크롤 동작에 대한 제1 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 컬랩싱 처리를 수행하고, 상기 컬랩싱 처리된 상세 보기 화면에 대해 제2 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 언컬랩싱 처리를 수행하고, 상기 언컬랩싱 처리된 상세 보기 화면에 대해 상기 제2 방향의 제스처가 감지되면 상기 상세 보기 화면을 종료한 후 상기 상위 페이지로 되돌아가기 동작을 수행하는 단계를 포함하는 것이다.A user terminal according to an embodiment of the present invention, in a user terminal providing multimedia contents, includes a communication module, a memory storing a program providing the multimedia contents, and a processor executing the program, wherein the processor is According to the execution of the program, the user's user interface for receiving the list information in which the content feed items to which the collapsing function is applied for at least one multimedia content is arranged from the content providing server and outputting the list information When a scrolling motion is detected, an upper page providing a content feed view screen for selectively activating a content feed item in the list information is output, and when a content feed item is selected and activated on the upper page, the corresponding content feed Outputs a lower page that provides a detailed view screen including an image area and an information area for an item, and when a gesture in the first direction for a user's scrolling motion is detected while the lower page is activated, the detailed view screen When a second direction gesture is detected on the collapsing detailed view screen and performing the collapsing process on the collapsing processed detail view screen, an uncollapsing process is performed on the detail view screen, and the uncollated detail view screen is displayed. And performing an operation of returning to the upper page after ending the detailed view screen when the gesture in the second direction is detected.

전술한 본 발명의 과제 해결 수단에 의하면, 사용자의 스크롤 동작에 상응하여 컬랩스 기능이 적용된 컨텐츠 피드 아이템에 대한 이미지 영역과 정보 영역 중 어느 하나의 영역을 숨기거나 펼쳐서 제한적인 디스플레이 상에서의 컨텐츠 가시성을 향상시킬 수 있다.According to the above-described problem solving means of the present invention, by hiding or unfolding any one of the image area and the information area for the content feed item to which the collation function has been applied in response to the user's scrolling motion, the content visibility on the limited display can be improved. Can be improved.

또한, 본 발명은 상위 페이지와 하위 페이지로 전환하기 위해 뒤로 가기 버튼을 별도로 클릭하지 않고서도 동일한 방향의 제스처를 두 번 입력하는 과정을 통해 보다 쉽고 빠르게 상위페이지로 전환할 수 있어 편리한 사용자 인터페이스 환경을 제공할 수 있다.In addition, the present invention provides a convenient user interface environment because it is possible to switch to the upper page more easily and quickly through the process of inputting a gesture in the same direction twice without separately clicking the back button to switch to the upper page and the lower page. Can provide.

도 1은 본 발명의 일 실시예에 따른 멀티미디어 컨텐츠를 제공하기 위한 전체 시스템의 구성을 설명하는 도면이다.
도 2는 본 발명의 일 실시예에 따른 사용자 단말의 구성을 설명하는 도면이다.
도 3은 본 발명의 일 실시예에 따른 사용자 단말의 사용자 인터페이스 제공 방법을 나타낸 동작 흐름도이다.
도 4는 도 3에 의한 컬랩싱 동작으로 인한 사용자 인터페이스를 통한 화면 예시도이다.
도 5는 도 3에 의한 언컬랩싱 동작으로 인한 이미지 영역의 숨김/펼치기 기능에 대한 사용자 인터페이스를 통한 화면 예시도이다.
도 6은 도 3에 의한 스와이프 다운 동작으로 인한 페이지 전환에 대한 사용자 인터페이스를 통한 화면 예시도이다.1 is a diagram illustrating a configuration of an entire system for providing multimedia content according to an embodiment of the present invention.
2 is a diagram illustrating a configuration of a user terminal according to an embodiment of the present invention.
3 is a flowchart illustrating a method of providing a user interface of a user terminal according to an embodiment of the present invention.
4 is an exemplary view of a screen through a user interface due to the collapsing operation shown in FIG. 3.
5 is an exemplary view of a screen through a user interface for a function of hiding/unfolding an image area due to an uncollapsing operation according to FIG. 3.
6 is an exemplary view of a screen through a user interface for page switching due to a swipe-down operation of FIG. 3.

아래에서는 첨부한 도면을 참조하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 본 발명의 실시예를 상세히 설명한다. 그러나 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 도면 부호를 붙였다.Hereinafter, exemplary embodiments of the present invention will be described in detail with reference to the accompanying drawings so that those skilled in the art to which the present invention pertains may easily practice. However, the present invention can be implemented in many different forms and is not limited to the embodiments described herein. In addition, in order to clearly describe the present invention in the drawings, parts irrelevant to the description are omitted, and like reference numerals are assigned to similar parts throughout the specification.

명세서 전체에서, 어떤 부분이 다른 부분과 "연결"되어 있다고 할 때, 이는 "직접적으로 연결"되어 있는 경우뿐 아니라, 그 중간에 다른 소자를 사이에 두고 "전기적으로 연결"되어 있는 경우도 포함한다. 또한 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있는 것을 의미하며, 하나 또는 그 이상의 다른 특징이나 숫자, 단계, 동작, 구성요소, 부분품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.Throughout the specification, when a part is "connected" to another part, this includes not only "directly connected" but also "electrically connected" with other elements in between. . Also, when a part is said to “include” a certain component, it means that the component may further include other components, not exclude other components, unless specifically stated otherwise. However, it should be understood that the existence or addition possibilities of numbers, steps, actions, components, parts or combinations thereof are not excluded in advance.

이하의 실시예는 본 발명의 이해를 돕기 위한 상세한 설명이며, 본 발명의 권리 범위를 제한하는 것이 아니다. 따라서 본 발명과 동일한 기능을 수행하는 동일 범위의 발명 역시 본 발명의 권리 범위에 속할 것이다.The following examples are detailed descriptions to help understanding of the present invention, and do not limit the scope of the present invention. Therefore, the same scope of the invention performing the same function as the present invention will also belong to the scope of the present invention.

이하 첨부된 도면을 참고하여 본 발명의 일 실시예를 상세히 설명하기로 한다.Hereinafter, an embodiment of the present invention will be described in detail with reference to the accompanying drawings.

도 1은 본 발명의 일 실시예에 따른 멀티미디어 컨텐츠를 제공하기 위한 전체 시스템의 구성을 설명하는 도면이다. 1 is a diagram illustrating a configuration of an entire system for providing multimedia content according to an embodiment of the present invention.

도 1을 참조하면, 멀티미디어 컨텐츠를 제공하기 위한 시스템은 적어도 하나 이상의 멀티미디어 제공 장치(100), 컨텐츠 제공 서버(200) 및 적어도 하나 이상의 사용자 단말(300)을 포함한다.Referring to FIG. 1, a system for providing multimedia content includes at least one multimedia providing device 100, a content providing server 200, and at least one user terminal 300.

멀티미디어 제공 장치(100)는 통신망을 통해 다수의 멀티미디어 컨텐츠를 수집하고, 컨텐츠 제공 서버(200) 또는 사용자 단말(300)의 요청에 따라 멀티미디어 컨텐츠에 대한 컨텐츠 피드 아이템을 제공한다. 이때, 컨텐츠 피드 아이템은 음원, 영상, 그림, 사진, 게임 등 다양한 컨텐츠들을 포함할 수 있다. 또한, 멀티미디어 제공 장치(100)는 컨텐츠 보관, 컨텐츠 공유, 컨텐츠 거래 등을 위해 전문 업체 또는 개인이 운영할 수 있다.The multimedia providing apparatus 100 collects a plurality of multimedia contents through a communication network, and provides a content feed item for the multimedia contents according to a request of the content providing server 200 or the user terminal 300. In this case, the content feed item may include various contents such as sound sources, images, pictures, photos, and games. In addition, the multimedia providing device 100 may be operated by a professional company or an individual for content storage, content sharing, content transaction, and the like.

컨텐츠 제공 서버(200)는 멀티미디어 컨텐츠와 관련된 서비스를 제공하기 위한 어플리케이션을 제공하여 어플리케이션을 통해 멀티미디어 제공 장치(100) 또는 사용자 단말(300)과 연동될 수 있다. 또는 컨텐츠 제공 서버(200)는 어플리케이션의 설치 없이 웹서비스 형태로 서버(200)에 접속한 사용자 단말(300)에 멀티미디어 컨텐츠와 관련된 서비스를 제공할 수도 있다. The content providing server 200 may provide an application for providing a service related to multimedia content and may be interlocked with the multimedia providing device 100 or the user terminal 300 through the application. Alternatively, the content providing server 200 may provide a service related to multimedia content to the user terminal 300 connected to the server 200 in the form of a web service without installing an application.

이러한 컨텐츠 제공 서버(200)는 적어도 하나 이상의 사용자 단말(300)의 요청에 따라 각 사용자 단말(300)에 대하여 멀티미디어 제공 장치(100)로부터 수집한 멀티미디어 컨텐츠에 대해 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 제공한다.The content providing server 200 is a content to which a collapsing function is applied to the multimedia content collected from the multimedia providing device 100 for each user terminal 300 according to the request of at least one user terminal 300 Provides list information in which feed items are sorted.

사용자 단말(300)은 컨텐츠 제공 서버(200)로부터 리스트 정보를 수신한 후에 멀티미디어 컨텐츠를 출력하는 사용자 인터페이스에 대한 스크롤 동작이 감지되면 사용자의 스크롤 동작시 제스처의 방향에 따라 컨텐츠 피드 아이템에 대한 이미지 정보와 상세 정보 등을 화면에 출력하거나 상위 페이지와 하위 페이지간의 페이지 전환 기능을 수행한다. When the user terminal 300 receives list information from the content providing server 200 and then detects a scrolling motion for a user interface that outputs multimedia content, image information on the content feed item according to the direction of the gesture when the user scrolls. And detailed information are displayed on the screen, or a page switching function is performed between upper and lower pages.

도 2는 본 발명의 일 실시예에 따른 사용자 단말의 구성을 설명하는 도면이다.2 is a diagram illustrating a configuration of a user terminal according to an embodiment of the present invention.

도 2를 참조하면, 사용자 단말(300)은 통신 모듈(310), 메모리(320), 프로세서(330) 및 데이터베이스(340)을 포함하지만 이에 한정되지는 않는다. Referring to FIG. 2, the user terminal 300 includes, but is not limited to, a communication module 310, a memory 320, a processor 330, and a database 340.

통신 모듈(310)은 통신망과 연동하여 사용자 단말(300)로 송수신되는 신호를 패킷 데이터 형태로 제공하는 데 필요한 통신 인터페이스를 제공한다. 여기서, 통신 모듈(310)은 다른 네트워크 장치와 유무선 연결을 통해 제어 신호 또는 데이터 신호와 같은 신호를 송수신하기 위해 필요한 하드웨어 및 소프트웨어를 포함하는 장치일 수 있다.The communication module 310 interworks with a communication network to provide a communication interface required to provide a signal transmitted and received to the user terminal 300 in the form of packet data. Here, the communication module 310 may be a device including hardware and software necessary to transmit and receive signals such as control signals or data signals through wired or wireless connection with other network devices.

메모리(320)는 멀티미디어 컨텐츠와 관련된 서비스를 제공하기 위한 프로그램이 저장된다. 또한, 메모리(320)는 프로세서(330)가 처리하는 데이터를 일시적 또는 영구적으로 저장하는 기능을 수행한다. 여기서, 메모리(320)는 휘발성 저장 매체(volatile storage media) 또는 비휘발성 저장 매체(non-volatile storage media)를 포함할 수 있으나, 본 발명의 범위가 이에 한정되는 것은 아니다.The memory 320 stores a program for providing a service related to multimedia contents. In addition, the memory 320 performs a function of temporarily or permanently storing data processed by the processor 330. Here, the memory 320 may include a volatile storage medium or a non-volatile storage medium, but the scope of the present invention is not limited thereto.

프로세서(330)는 멀티미디어 컨텐츠와 관련된 서비스를 제공하기 위한 프로그램을 실행하고, 프로그램의 실행에 따라 단말의 하드웨어를 제어하는 기능을 제공한다. 즉, 프로세서(330)는 프로그램을 실행함에 따라 필요한 파일 시스템, 메모리 할당, 네트워크, 기본 라이브러리, 타이머, 디바이스 제어(디스플레이, 미디어, 입력장치, 3D 등), 기타 유틸리티 등의 하드웨어 제어 기능을 수행할 수 있다.The processor 330 executes a program for providing a service related to multimedia contents, and provides a function of controlling hardware of a terminal according to the execution of the program. That is, the processor 330 performs hardware control functions such as file system, memory allocation, network, basic library, timer, device control (display, media, input device, 3D, etc.), and other utilities required as the program is executed. I can.

여기서, 프로세서(330)는 프로세서(processor)와 같이 데이터를 처리할 수 있는 모든 종류의 장치를 포함할 수 있다. 여기서, '프로세서(processor)'는, 예를 들어 프로그램 내에 포함된 코드 또는 명령으로 표현된 기능을 수행하기 위해 물리적으로 구조화된 회로를 갖는, 하드웨어에 내장된 데이터 처리 장치를 의미할 수 있다. 이와 같이 하드웨어에 내장된 데이터 처리 장치의 일 예로써, 마이크로프로세서(microprocessor), 중앙처리장치(central processing unit: CPU), 프로세서 코어(processor core), 멀티프로세서(multiprocessor), ASIC(application-specific integrated circuit), FPGA(field programmable gate array) 등의 처리 장치를 망라할 수 있으나, 본 발명의 범위가 이에 한정되는 것은 아니다.Here, the processor 330 may include all types of devices capable of processing data, such as a processor. Here, the'processor' may refer to a data processing device embedded in hardware, which has a circuit physically structured to perform a function represented by a code or instruction included in a program. As an example of a data processing device built into the hardware as described above, a microprocessor, a central processing unit (CPU), a processor core, a multiprocessor, and an application-specific integrated (ASIC) circuit), a field programmable gate array (FPGA), and the like, but the scope of the present invention is not limited thereto.

데이터베이스(340)는 멀티미디어 컨텐츠와 관련된 서비스를 제공하기 위한 프로그램을 수행하면서 누적되는 데이터가 저장된다. 예컨대, 데이터베이스(340)에는 리스트 정보, 사용자 선택에 따른 멀티미디어 컨텐츠의 원본 정보 등이 저장될 수 있다. The database 340 stores data accumulated while executing a program for providing a service related to multimedia contents. For example, the database 340 may store list information and original information of multimedia content according to a user selection.

도 3은 본 발명의 일 실시예에 따른 사용자 단말의 사용자 인터페이스 제공 방법을 나타낸 동작 흐름도이고, 도 4는 도 3에 의한 컬랩싱 동작으로 인한 사용자 인터페이스를 통한 화면 예시도이며, 도 5는 도 3에 의한 언컬랩싱 동작으로 인한 이미지 영역의 숨김/펼치기 기능에 대한 사용자 인터페이스를 통한 화면 예시도이고, 도 6은 도 3에 의한 스와이프 다운 동작으로 인한 페이지 전환에 대한 사용자 인터페이스를 통한 화면 예시도이다. 3 is an operation flowchart showing a method of providing a user interface of a user terminal according to an embodiment of the present invention, FIG. 4 is an exemplary view of a screen through a user interface due to the collating operation of FIG. 3, and FIG. 5 is Is an exemplary screen view through a user interface for a function of hiding/unfolding an image area due to an uncollapsing operation by, and FIG. 6 is an exemplary screen diagram through a user interface for page switching due to a swipe-down operation according to FIG. 3 .

도 3내지 도 6를 참조하면, 사용자 단말의 사용자 인터페이스 제공 방법은, 사용자 단말에서 컨텐츠 제공 서버로부터 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 수신한다(S110).Referring to FIGS. 3 to 6, in a method of providing a user interface of a user terminal, the user terminal receives information on a list of content feed items to which a collapsing function is applied from a content providing server (S110).

사용자 단말은 리스트 정보를 출력하는 사용자 인터페이스에 대한 사용자의 스크롤 동작이 감지되면(S120), 리스트 정보 내의 컨텐츠 피드 아이템을 선택적으로 활성화시키기 위한 컨텐츠 피드 뷰 화면을 제공하는 상위 페이지(410)를 출력한다(S130).When the user terminal detects the user's scrolling motion for the user interface that outputs list information (S120), the user terminal outputs the upper page 410 providing a content feed view screen for selectively activating the content feed item in the list information. (S130).

컨텐츠 피드 뷰 화면에는 각 컨텐츠 피드 아이템에 대한 아이콘 이미지 또는 텍스트 제목을 포함하는 메인 메뉴를 리스트 뷰 형태로 제공하는데, 아이콘 이미지는 미리보기 이미지(thumbnail image)를 사용할 수 있다. On the content feed view screen, a main menu including an icon image or text title for each content feed item is provided in the form of a list view, and a thumbnail image may be used as the icon image.

사용자 단말은 사용자 의해 상위 페이지 상에서 어느 하나의 컨텐츠 피드 아이템이 선택되어 활성화되면(S140), 해당 컨텐츠 피드 아이템에 대한 이미지 영역(421)과 정보 영역(422)을 포함하는 상세 보기 화면을 제공하는 하위 페이지(420)를 제공한다(S150).When the user terminal selects and activates any one content feed item on the upper page by the user (S140), the user terminal provides a detailed view screen including an image area 421 and an information area 422 for the corresponding content feed item. A page 420 is provided (S150).

이때, 상세 보기 화면의 정보 영역(422)에는 메타 정보, 제목, 촬영 날짜 정보, 촬영자 정보, 컨텐츠 게시 정보, 이미지 크기 정보, 부가 정보 중 적어도 하나 이상을 포함할 수 있다. In this case, the information area 422 of the detailed view screen may include at least one of meta information, title, photographing date information, photographer information, content posting information, image size information, and additional information.

이와 같이, 하위 페이지가 활성화된 상태에서, 사용자 단말은 방향성을 갖는 사용자의 스크롤 동작이 감지되면(S160), 제1 방향의 제스처인 경우 컬랩싱 동작으로 인식하고, 상세보기 화면 중 이미지 영역을 숨기는 컬랩싱 처리를 수행한다. (S170). 이때, 제 1 방향의 제스처는 표시된 페이지를 디스플레이의 상방측으로 이동시키는 스크롤 동작일 수 있다.As described above, when the lower page is activated, when the user terminal detects a scrolling motion of a user having a directionality (S160), the gesture in the first direction is recognized as a collating motion, and the image area in the detail view screen is hidden. Perform the collapsing treatment. (S170). In this case, the gesture in the first direction may be a scroll operation of moving the displayed page to the upper side of the display.

사용자 단말은 터치식으로 화면 스크롤이 가능한 단말이므로, 터치 스크린의 사용자 터치 조작에 의한 스크롤 동작에 응답하여 입력 데이터 처리, 사용자 지정 제어 동작 등을 수행할 수 있다. 이때, 사용자 인터페이스를 조작하고 상호 작용을 수행하기 위한 사용자의 터치 스크린 제스처는 사용자가 화면의 특정 영역을 터치할 때 발생하고, 손가락을 들거나 조작이 취소될 때까지 계속된다. 터치 스크린 제스처는 드래그 제스처, 슬라이드 제스처, 스크롤 제스처, 스와이프 제스처, 탭 제스처, 핀치 제스처, 스프레드 제스처, 회전 제스처 또는 플릭 제스처 중 어느 하나가 될 수 있다.Since the user terminal is a terminal capable of screen scrolling by a touch type, input data processing and user-designated control operations may be performed in response to a scroll operation by a user touch manipulation of the touch screen. At this time, a user's touch screen gesture for manipulating the user interface and performing an interaction occurs when the user touches a specific area of the screen, and continues until a finger is lifted or the operation is cancelled. The touch screen gesture may be any one of a drag gesture, a slide gesture, a scroll gesture, a swipe gesture, a tap gesture, a pinch gesture, a spread gesture, a rotation gesture, or a flick gesture.

한편, 컬랩싱 처리는 이미지 영역을 디스플레이 화면의 상단으로 스크롤하여 이동시키는 것과는 달리, 마치 해당 이미지 영역이 붕괴되는 듯한 그래픽 효과를 제공하여, 사용자로 하여금 컬랩싱 동작이 발생하였음을 인식할 수 있도록 한다. 예를 들어, 도 4에 표시된 이미지 영역(421)이 제 1 방향의 제스처에 의하여 상부측으로 이동하는 과정에서, 이미지 영역(421)의 하부측 단부가 스크롤 업 동작의 이동 방향에 그대로 디스플레이 화면의 상단을 통과하기 보다는, 디스플레이 화면의 상단을 통과하기 전에 해당 이미지 영역(421)이 페이드 아웃(fade out) 되는 효과를 주는 형태로 컬랩싱 처리를 수행할 수 있다. On the other hand, the collapsing process provides a graphic effect as if the corresponding image area collapses, unlike scrolling and moving the image area to the top of the display screen, allowing the user to recognize that the collating operation has occurred. . For example, in the process of moving the image area 421 shown in FIG. 4 upward by a gesture in the first direction, the lower end of the image area 421 remains at the top of the display screen in the moving direction of the scroll-up operation. Rather than passing through, the collating process may be performed in a form that gives an effect of fading out the corresponding image area 421 before passing through the top of the display screen.

이와 같은 화면 처리 방식은 다양하게 변경될 수 있는데, 예를 들어, 전체 이미지 영역(421) 증 디스플레이 상단 방향으로 이동하여 사라진 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 컬랩싱 철리를 수행한다. 예를 들면, 미리 설정된 이미지 영역(421)의 70~80% 가량이 디스플레이 화면의 상단을 통과한 시점에 페이드 아웃 처리를 한다거나, 디스플레이 화면의 상단 아래 쪽에 남은 잔여 이미지 영역이 디스플레이 화면의 상단쪽으로 이동하는 속도를 증가시키거나 하는 형태로 구현될 수 있다. 이때, 사용자 단말은 컬랩싱 처리를 위한 사라진 이미지 영역과 전체 이미지 영역의 비율은 사용자의 선택에 따라 변경 가능하다.Such a screen processing method can be changed in various ways, for example, when the entire image area 421 moves toward the top of the display, and the disappeared image area reaches a preset ratio of the entire image area, collapsing is performed. do. For example, when about 70 to 80% of the preset image area 421 passes through the top of the display screen, the fade-out process is performed, or the remaining image area at the top and bottom of the display screen moves to the top of the display screen. It can be implemented in the form of increasing the speed of doing. In this case, the user terminal can change the ratio of the disappeared image area and the entire image area for the collapsing process according to the user's selection.

한편, 사용자 단말은 컬랩싱 처리된 상세 보기 화면에 대해 제2 방향의 제스처가 감지되면(S180), 언컬랩싱 동작으로 인식하여 이미지 영역의 숨김 상태를 해제하고, 사용자의 스크롤 동작에 상응하여 상세 보기 화면을 스크롤한다(S190).On the other hand, when a gesture in the second direction is detected on the collapsing detailed view screen (S180), the user terminal recognizes it as an uncollapsing operation to release the hidden state of the image area, and view the detailed view corresponding to the user's scrolling motion. The screen is scrolled (S190).

이때, 제 2 방향의 제스처는 표시된 페이지를 디스플레이의 하방측으로 이동시키는 스크롤 동작일 수 있으며, 특히 제 1 방향과는 반대 방향의 제스처일 수 있다.In this case, the gesture in the second direction may be a scroll operation for moving the displayed page to the lower side of the display, and in particular, may be a gesture in a direction opposite to the first direction.

언컬랩싱 처리는 앞서 설명한 컬랩싱 처리를 반대로 수행하는 형태로 이루어질 수 있다. 예를 들어, 컬랩싱되어 사라진 전체 이미지 영역(421) 중 디스플레이 화면의 상단 아래로 이동하여 나타나는 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 언컬랩싱 처리를 수행한다. 예를 들면, 전체 이미지 영역 중 디스플레이 화면의 상단에 나타나지 않은 이미지 영역을 페이드 인(Fade-in) 처리하는 형태 또는 이미지 영역 중 디스플레이 화면의 상단에 나타나지 않는 이미지 영역을 하부측으로 이동하는 속도를 증가시키는 형태 중 어느 하나의 형태로 언컬랩싱을 구현할 수 있다. . 이때, 사용자 단말은 언컬랩싱 처리를 위해 디스플레이 화면의 상단 아래로 이동하여 나타나는 이미지 영역과 전체 이미지 영역의 비율은 사용자의 선택에 따라 변경 가능하다.The uncollapsing process may be performed in a form in which the collapsing process described above is performed in reverse. For example, an uncollapsing process is performed as soon as the image area displayed by moving to the top and bottom of the display screen among the total image areas 421 that have disappeared after collation reaches a preset ratio of the entire image area. For example, a form of fading-in an image area that does not appear at the top of the display screen among the entire image area, or increasing the speed of moving an image area that does not appear at the top of the display screen among the image areas to the lower side. Uncollapsing can be implemented in any one of the forms. . In this case, the user terminal may change the ratio of the image area and the entire image area to be displayed by moving to the top and bottom of the display screen for the uncollapsing process according to the user's selection.

사용자 단말은 언컬랩싱 처리된 상세 보기 화면에서 제2 방향의 제스처가 감지되면 상세 보기 화면을 종료한 후 상위 페이지로 되돌아가기 동작을 수행한다(S200). 즉, 제 2 방향의 제스처가 연속적으로 감지되면 상위 페이지로 되돌아갈 수 있도록 한다.When a gesture in the second direction is detected on the uncollated detail view screen, the user terminal terminates the detail view screen and then performs an operation to return to the upper page (S200). That is, when a gesture in the second direction is continuously detected, it is possible to return to the upper page.

사용자 단말은 제스처가 입력된 위치와 무관하게 제스처가 입력된 제2 방향이 화면의 아래(down)로 향하는 스와이프 다운인 경우, 즉시 상위 페이지로 되돌아가기 동작을 수행한다. Regardless of the location where the gesture is input, the user terminal immediately returns to the upper page when the second direction in which the gesture is input is a swipe down toward the bottom of the screen.

일례로, 사용자 단말은 이미지 영역과 정보 영역에 포함된 상세 보기 화면에서 스와이프 업 동작을 수행하면 이미지 영역이 숨겨지는 컬랩싱 처리를 수행하고, 스와이프 다운 동작을 수행하면 숨겨진 이미지 영역이 다시 펼쳐지도록 한다. 이때, 사용자가 다시 스와이프 다운 동작을 수행할 경우에 언컬랩싱 동작으로 인식하여 상위 페이지로 화면 전환이 수행된다. For example, the user terminal performs collapsing processing in which the image area is hidden when a swipe up operation is performed on the detailed view screen included in the image area and the information area, and the hidden image area is unfolded again when the swipe down operation is performed. Let's do it. At this time, when the user performs the swipe-down operation again, it is recognized as an uncollapsing operation and the screen is switched to the upper page.

한편, 사용자 단말은 하위 페이지의 일측에 상위 페이지로 되돌아가기 기능을 수행하는 버튼(430)을 출력하고, 해당 버튼(430)의 터치 제스처가 감지되면 상위 페이지로 되돌아가기 동작을 수행할 수 있다. Meanwhile, the user terminal may output a button 430 that performs a function of returning to the upper page on one side of the lower page, and may perform an operation of returning to the upper page when a touch gesture of the button 430 is detected.

한편 도 3의 단계 S111 내지 S121은 본 발명의 구현예에 따라서 추가적인 단계들로 분할되거나, 더 적은 단계들로 조합될 수 있다. 또한, 일부 단계는 필요에 따라 생략될 수도 있고, 단계간의 순서가 변경될 수도 있다.Meanwhile, steps S111 to S121 of FIG. 3 may be divided into additional steps or may be combined into fewer steps according to an embodiment of the present invention. In addition, some steps may be omitted as necessary, or the order of steps may be changed.

한편, 컨텐츠 제공 서버가 모바일 백엔드(Backend as a Service, BaaS) 서비스를 제공하는 백엔드 서버로 동작될 수 있고, 사용자 단말에 설치된 어플리케이션과의 연결을 구현하는 모델로 구현될 경우, 데이터저장(data storage), 사용자관리(user management), 푸시알림(push notifications), 위치서비스(location services), 데이터분석(analytics), 계정등록, 구매확인, 이용자 발생 알림, 패스워드 재설정 등의 결제 연동 기능 등 다양한 벡엔드 기능을 BaaS 플랫폼을 통해 제공할 수 있다.On the other hand, if the content providing server can operate as a backend server that provides a mobile backend (Backend as a Service, BaaS) service, and is implemented as a model that implements a connection with an application installed in a user terminal, data storage ), user management, push notifications, location services, data analysis, account registration, purchase confirmation, user occurrence notification, payment linking functions such as password reset, etc. The functionality can be provided through the BaaS platform.

따라서, 컨텐츠 제공 서버가 사용자 단말에 설치된 어플리케이션을 통해 멀티미디어 컨텐츠에 대한 판매 또는 구매를 지원하는 컨텐츠 거래 기능을 제공하는 경우, 상세 보기 화면의 정보 영역에 가격 정보를 포함한 거래 정보를 부가정보를 제공할 수 있다.Therefore, when the content providing server provides a content transaction function that supports the sale or purchase of multimedia content through an application installed in the user terminal, transaction information including price information is provided in the information area of the detail view screen. I can.

따라서, 사용자 단말은 컨텐츠 제공 서버로부터 제공되는 리스트 정보를 통해 자신이 원하는 특정 멀티미디어 컨텐츠를 선택한 후 거래처리, 결제, 문자 전송, 배송조회를 포함한 결제 연동 서비스를 제공받을 수 있다. Accordingly, the user terminal may select a specific multimedia content desired by the user through the list information provided from the content providing server, and then receive a payment link service including transaction processing, payment, text transmission, and delivery inquiry.

이상에서 설명한 본 발명의 실시예에 따른 사용자 단말의 사용자 인터페이스 제공 방법은, 컴퓨터에 의해 실행되는 프로그램 모듈과 같은 컴퓨터에 의해 실행 가능한 명령어를 포함하는 기록 매체의 형태로도 구현될 수 있다. 이러한 기록 매체는 컴퓨터 판독 가능 매체를 포함하며, 컴퓨터 판독 가능 매체는 컴퓨터에 의해 액세스될 수 있는 임의의 가용 매체일 수 있고, 휘발성 및 비휘발성 매체, 분리형 및 비분리형 매체를 모두 포함한다. 또한, 컴퓨터 판독가능 매체는 컴퓨터 저장 매체를 포함하며, 컴퓨터 저장 매체는 컴퓨터 판독가능 명령어, 데이터 구조, 프로그램 모듈 또는 기타 데이터와 같은 정보의 저장을 위한 임의의 방법 또는 기술로 구현된 휘발성 및 비휘발성, 분리형 및 비분리형 매체를 모두 포함한다.The method for providing a user interface of a user terminal according to an embodiment of the present invention described above may be implemented in the form of a recording medium including instructions executable by a computer, such as a program module executed by a computer. Such recording media include computer readable media, and computer readable media can be any available media that can be accessed by a computer, and includes both volatile and nonvolatile media, removable and non-removable media. In addition, computer readable media includes computer storage media, which are volatile and nonvolatile implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules or other data. , Removable and non-removable media.

전술한 본 발명의 설명은 예시를 위한 것이며, 본 발명이 속하는 기술분야의 통상의 지식을 가진 자는 본 발명의 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 쉽게 변형이 가능하다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한다. 예를 들어, 단일형으로 설명되어 있는 각 구성 요소는 분산되어 실시될 수도 있으며, 마찬가지로 분산된 것으로 설명되어 있는 구성 요소들도 결합된 형태로 실시될 수 있다.The above description of the present invention is for illustration only, and those skilled in the art to which the present invention pertains can understand that the present invention can be easily modified into other specific forms without changing the technical spirit or essential features of the present invention. will be. Therefore, it should be understood that the embodiments described above are illustrative and non-limiting in all respects. For example, each component described as a single type may be implemented in a distributed manner, and similarly, components described as being distributed may also be implemented in a combined form.

본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 균등 개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.The scope of the present invention is indicated by the following claims rather than the above detailed description, and it should be interpreted that all changes or modified forms derived from the meaning and scope of the claims and equivalent concepts thereof are included in the scope of the present invention. do.

100: 멀티미디어 제공 장치 200: 컨텐츠 제공 서버
300: 사용자 단말 310: 통신 모듈
320: 메모리 330: 프로세서
340: 데이터베이스100: multimedia providing device 200: content providing server
300: user terminal 310: communication module
320: memory 330: processor
340: database

Claims (13)

멀티미디어 컨텐츠를 제공하는 사용자 단말에 의해 수행되는 사용자 단말의 사용자 인터페이스 제공 방법에 있어서,
a) 컨텐츠 제공 서버로부터 적어도 하나 이상의 멀티미디어 컨텐츠에 대해 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 수신하는 단계;
b) 상기 리스트 정보를 출력하는 사용자 인터페이스에 대한 사용자의 스크롤 동작이 감지되면, 상기 리스트 정보 내의 컨텐츠 피드 아이템을 선택적으로 활성화시키기 위한 컨텐츠 피드 뷰 화면을 제공하는 상위 페이지를 출력하는 단계;
c) 상기 상위 페이지 상에서 어느 하나의 컨텐츠 피드 아이템이 선택되어 활성화되면 해당 컨텐츠 피드 아이템에 대한 이미지 영역과 정보 영역을 포함하는 상세 보기 화면을 제공하는 하위 페이지를 출력하는 단계;
d) 상기 하위 페이지가 활성화된 상태에서 사용자의 스크롤 동작에 대한 제1 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 컬랩싱 처리를 수행하는 단계;
e) 상기 컬랩싱 처리된 상세 보기 화면에 대해 제2 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 언컬랩싱 처리를 수행하고, 상기 언컬랩싱 처리된 상세 보기 화면에 대해 상기 제2 방향의 제스처가 감지되면 상기 상세 보기 화면을 종료한 후 상기 상위 페이지로 되돌아가기 동작을 수행하는 단계를 포함하는 것인, 사용자 단말의 사용자 인터페이스 제공 방법.In the method of providing a user interface of a user terminal performed by a user terminal providing multimedia contents,
a) receiving, from a content providing server, information on a list in which content feed items to which a collapsing function is applied for at least one multimedia content are arranged;
b) outputting a top page providing a content feed view screen for selectively activating a content feed item in the list information when a user's scrolling motion with respect to the user interface for outputting the list information is detected;
c) when a content feed item is selected and activated on the upper page, outputting a lower page providing a detailed view screen including an image area and an information area for the content feed item;
d) performing a collating process on the detailed view screen when a gesture in the first direction for the user's scrolling motion is detected while the lower page is activated;
e) When a gesture in the second direction is detected on the collapsing detailed view screen, an uncollapsing process is performed on the detailed view screen, and a gesture in the second direction on the uncollated detailed view screen And performing an operation of returning to the upper page after ending the detailed view screen when is detected, a method of providing a user interface of a user terminal. 제 1 항에 있어서,
상기 d) 단계는,
상기 이미지 영역 중 디스플레이 화면의 상단 방향으로 이동하여 사라진 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 컬랩싱 처리를 수행하되,
상기 컬랩싱 처리는 상기 이미지 영역 중 상기 디스플레이 화면의 상단의 아래쪽에 남은 잔여 이미지 영역을 페이드 아웃(Fade-out) 처리하는 형태 또는 상기 이미지 영역 중 상기 디스플레이 화면의 상단의 아래쪽에 남은 잔여 이미지 영역이 상부측으로 이동하는 속도를 증가시키는 형태 중 어느 하나의 형태로 구현되는 것인, 사용자 단말의 인터페이스 제공 방법. The method of claim 1,
Step d),
At the moment when the image area that has disappeared by moving toward the top of the display screen among the image areas reaches a preset ratio of the entire image area, a collating process is performed,
The collapsing process is a form of fading out a residual image area remaining below the top of the display screen among the image areas, or a residual image area remaining below the top of the display screen among the image areas The method of providing an interface of a user terminal is implemented in any one of the forms of increasing the speed of moving upwards. 제 1 항에 있어서,
상기 e) 단계는,
상기 컬랩싱 처리되어 사라진 전체 이미지 영역 중 디스플레이 화면의 상단 아래로 이동하여 나타나는 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 언컬랩싱 처리하되,
상기 언컬랩싱 처리는 상기 이미지 영역 중 상기 디스플레이 화면의 상단에 나타나지 않은 이미지 영역을 페이드 인(Fade-in) 처리하는 형태 또는 상기 이미지 영역 중 상기 디스플레이 화면의 상단에 나타나지 않는 이미지 영역을 하부측으로 이동하는 속도를 증가시키는 형태 중 어느 하나의 형태로 구현되는 것인, 사용자 단말의 인터페이스 제공 방법. The method of claim 1,
Step e),
Uncollapsing processing is performed as soon as the image area appearing by moving to the top and bottom of the display screen among the total image areas disappeared by the collapsing process reaches a preset ratio of the entire image area,
In the uncollapsing process, an image area that does not appear at the top of the display screen among the image areas is fade-in, or an image area that does not appear at the top of the display screen among the image areas is moved downward. The method of providing an interface of a user terminal is implemented in any one of the forms of increasing the speed. 제 1 항에 있어서,
상기 b) 단계는,
각 컨텐츠 피드 아이템에 대한 아이콘 이미지 또는 텍스트 제목을 포함하는 메인 메뉴를 리스트 뷰 형태로 상기 컨텐츠 피드 뷰 화면에 제공하는 것인, 사용자 단말의 사용자 인터페이스 제공 방법.The method of claim 1,
Step b),
To provide a main menu including an icon image or text title for each content feed item in the form of a list view on the content feed view screen. 제 6 항에 있어서,
상기 아이콘 이미지는 미리보기 이미지(thumbnail image)를 사용하는 것인, 사용자 단말의 사용자 인터페이스 제공 방법. The method of claim 6,
The icon image is to use a thumbnail image (thumbnail image), the method of providing a user interface of the user terminal. 제 1 항에 있어서,
상기 상세 보기 화면의 정보 영역에는 메타 정보, 제목, 촬영 날짜 정보, 촬영자 정보, 이미지 크기 정보, 부가 정보 중 적어도 하나 이상을 포함하는 것인, 사용자 단말의 사용자 인터페이스 제공 방법. The method of claim 1,
The information area of the detailed view screen includes at least one of meta information, title, photographing date information, photographer information, image size information, and additional information. 제 1 항에 있어서,
상기 c) 단계는, 상기 하위 페이지의 일측에 상기 상위 페이지로 되돌아가기 기능을 수행하는 버튼을 출력하고,
f) 상기 버튼의 터치 제스처가 감지되면 상기 상위 페이지로 되돌아가기 동작을 수행하는 단계를 더 포함하는 것인, 사용자 단말의 사용자 인터페이스 제공 방법. The method of claim 1,
The step c) outputs a button for performing a return function to the upper page on one side of the lower page,
f) further comprising performing an operation of returning to the upper page when the touch gesture of the button is detected. 제 1 항에 있어서,
상기 제1 방향의 제스처는 현재 표시된 페이지를 디스플레이의 상방측으로 이동시키는 스크롤 동작이고, 상기 제2 방향의 제스처는 현재 표시된 페이지를 디스플레이의 하방측으로 이동시키는 스크롤 동작인 것인, 사용자 단말의 사용자 인터페이스 제공 방법.The method of claim 1,
The gesture in the first direction is a scroll operation for moving the currently displayed page to the upper side of the display, and the gesture in the second direction is a scroll operation for moving the currently displayed page to the lower side of the display. Way. 멀티미디어 컨텐츠를 제공하는 사용자 단말에 있어서,
통신모듈,
상기 멀티미디어 컨텐츠를 제공하는 프로그램을 저장한 메모리,
상기 프로그램을 실행하는 프로세서를 포함하되,
상기 프로세서는 상기 프로그램의 실행에 따라, 컨텐츠 제공 서버로부터 적어도 하나 이상의 멀티미디어 컨텐츠에 대해 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 수신하고,
상기 리스트 정보를 출력하는 사용자 인터페이스에 대한 사용자의 스크롤 동작이 감지되면, 상기 리스트 정보 내의 컨텐츠 피드 아이템을 선택적으로 활성화시키기 위한 컨텐츠 피드 뷰 화면을 제공하는 상위 페이지를 출력하고,
상기 상위 페이지 상에서 어느 하나의 컨텐츠 피드 아이템이 선택되어 활성화되면 해당 컨텐츠 피드 아이템에 대한 이미지 영역과 정보 영역을 포함하는 상세 보기 화면을 제공하는 하위 페이지를 출력하고,
상기 하위 페이지가 활성화된 상태에서 사용자의 스크롤 동작에 대한 제1 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 컬랩싱 처리를 수행하고,
상기 컬랩싱 처리된 상세 보기 화면에 대해 제2 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 언컬랩싱 처리를 수행하고, 상기 언컬랩싱 처리된 상세 보기 화면에 대해 상기 제2 방향의 제스처가 감지되면 상기 상세 보기 화면을 종료한 후 상기 상위 페이지로 되돌아가기 동작을 수행하는 것인, 사용자 단말.In a user terminal providing multimedia content,
Communication module,
A memory storing a program for providing the multimedia content,
Including a processor that executes the program,
According to the execution of the program, the processor receives list information in which content feed items to which a collapsing function is applied to at least one multimedia content is arranged from a content providing server,
When a user's scrolling motion with respect to the user interface for outputting the list information is detected, a higher page providing a content feed view screen for selectively activating a content feed item in the list information is output, and
When a content feed item is selected and activated on the upper page, a lower page providing a detailed view screen including an image area and an information area for the corresponding content feed item is output, and
When a gesture in the first direction for a user's scroll motion is detected while the lower page is activated, a collating process is performed on the detailed view screen,
When a gesture in the second direction is detected on the collapsing detailed view screen, the uncollapsing process is performed on the detailed view screen, and the gesture in the second direction is detected with respect to the uncollated detailed view screen. If the user terminal is to perform an operation to return to the upper page after ending the detailed view screen. 제 9 항에 있어서,
상기 프로세서는,
상기 이미지 영역 중 디스플레이 화면의 상단 방향으로 이동하여 사라진 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 컬랩싱 처리를 수행하되,
상기 컬랩싱 처리는 상기 이미지 영역 중 상기 디스플레이 화면의 상단의 아래쪽에 남은 잔여 이미지 영역을 페이드 아웃(Fade-out) 처리하는 형태 또는 상기 이미지 영역 중 상기 디스플레이 화면의 상단의 아래쪽에 남은 잔여 이미지 영역이 상부측으로 이동하는 속도를 증가시키는 형태 중 어느 하나의 형태로 구현되는 것인, 사용자 단말. The method of claim 9,
The processor,
At the moment when the image area that has disappeared by moving toward the top of the display screen among the image areas reaches a preset ratio of the entire image area, a collating process is performed,
The collapsing process is a form of fading out a residual image area remaining below the top of the display screen among the image areas, or a residual image area remaining below the top of the display screen among the image areas The user terminal is implemented in any one of the forms of increasing the speed moving upward. 제 9 항에 있어서,
상기 프로세서는,
상기 컬랩싱 처리되어 사라진 전체 이미지 영역 중 디스플레이 화면의 상단 아래로 이동하여 나타나는 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 언컬랩싱 처리하되,
상기 언컬랩싱 처리는 상기 이미지 영역 중 상기 디스플레이 화면의 상단에 나타나지 않은 이미지 영역을 페이드 인(Fade-in) 처리하는 형태 또는 상기 이미지 영역 중 상기 디스플레이 화면의 상단에 나타나지 않는 이미지 영역을 하부측으로 이동하는 속도를 증가시키는 형태 중 어느 하나의 형태로 구현되는 것인, 사용자 단말. The method of claim 9,
The processor,
Uncollapsing processing is performed as soon as the image area appearing by moving to the top and bottom of the display screen among the total image areas disappeared by the collapsing process reaches a preset ratio of the entire image area,
In the uncollapsing process, an image area that does not appear at the top of the display screen among the image areas is fade-in, or an image area that does not appear at the top of the display screen among the image areas is moved downward. The user terminal is implemented in any one form of increasing the speed. 제 9 항에 있어서,
상기 프로세서는, 상기 하위 페이지의 일측에 상기 상위 페이지로 되돌아가기 기능을 수행하는 버튼을 출력한 후, 상기 버튼의 터치 제스처가 감지되면 상기 상위 페이지로 되돌아가기 동작을 수행하는 것인, 사용자 단말. The method of claim 9,
The processor, after outputting a button for performing a function of returning to the upper page to one side of the lower page, and performing an operation of returning to the upper page when a touch gesture of the button is detected. 제 9 항에 있어서,
상기 제1 방향의 제스처는 현재 표시된 페이지를 디스플레이의 상방측으로 이동시키는 스크롤 동작이고, 상기 제2 방향의 제스처는 현재 표시된 페이지를 디스플레이의 하방측으로 이동시키는 스크롤 동작인 동작인 것인, 사용자 단말.The method of claim 9,
The gesture in the first direction is a scroll operation for moving a currently displayed page to an upper side of the display, and the gesture in the second direction is an operation for moving a currently displayed page to a lower side of the display.
KR1020190013988A 2019-02-01 2019-02-01 User terminal device and method for providing user interface of user terminal device KR102180351B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020190013988A KR102180351B1 (en) 2019-02-01 2019-02-01 User terminal device and method for providing user interface of user terminal device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020190013988A KR102180351B1 (en) 2019-02-01 2019-02-01 User terminal device and method for providing user interface of user terminal device

Publications (2)

Publication Number Publication Date
KR20200095960A true KR20200095960A (en) 2020-08-11
KR102180351B1 KR102180351B1 (en) 2020-11-18

Family

ID=72048391

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020190013988A KR102180351B1 (en) 2019-02-01 2019-02-01 User terminal device and method for providing user interface of user terminal device

Country Status (1)

Country Link
KR (1) KR102180351B1 (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP3945362A1 (en) 2020-07-31 2022-02-02 LG Display Co., Ltd. Display device

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20090079063A (en) * 2008-01-16 2009-07-21 삼성전자주식회사 Method for providing gui to display a plurality of lists and multimedia apparatus thereof
KR20100038651A (en) * 2008-10-06 2010-04-15 삼성전자주식회사 A method for controlling of list with multi touch and apparatus thereof
KR20120029682A (en) * 2010-09-17 2012-03-27 주식회사 아이리버 Multimedia terminal for controlling execution of arranged multimedia content
KR20150044987A (en) * 2013-10-16 2015-04-28 한양대학교 에리카산학협력단 System for purchasing advertisement object based on logotional advertisement using movement of purview cursor area in mobile smart terminal
KR20180044358A (en) 2015-08-28 2018-05-02 페이스북, 인크. System and method for content display

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20090079063A (en) * 2008-01-16 2009-07-21 삼성전자주식회사 Method for providing gui to display a plurality of lists and multimedia apparatus thereof
KR20100038651A (en) * 2008-10-06 2010-04-15 삼성전자주식회사 A method for controlling of list with multi touch and apparatus thereof
KR20120029682A (en) * 2010-09-17 2012-03-27 주식회사 아이리버 Multimedia terminal for controlling execution of arranged multimedia content
KR20150044987A (en) * 2013-10-16 2015-04-28 한양대학교 에리카산학협력단 System for purchasing advertisement object based on logotional advertisement using movement of purview cursor area in mobile smart terminal
KR20180044358A (en) 2015-08-28 2018-05-02 페이스북, 인크. System and method for content display

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP3945362A1 (en) 2020-07-31 2022-02-02 LG Display Co., Ltd. Display device

Also Published As

Publication number Publication date
KR102180351B1 (en) 2020-11-18

Similar Documents

Publication Publication Date Title
US20230022781A1 (en) User interfaces for viewing and accessing content on an electronic device
KR101733839B1 (en) Managing workspaces in a user interface
KR101985291B1 (en) User interface for a computing device
Hardy et al. Touch & interact: touch-based interaction of mobile phones with displays
KR101693764B1 (en) User interface for multiple display regions
US8423995B2 (en) Electronic device and user interface display method thereof
US9262066B2 (en) User terminal device and method for displaying background screen thereof
US20130050109A1 (en) Apparatus and method for changing an icon in a portable terminal
US20060123360A1 (en) User interfaces for data processing devices and systems
US20060121939A1 (en) Data processing devices and systems with enhanced user interfaces
US20150046849A1 (en) Portable electronic device, method, and graphical user interface for displaying structured electronic documents
US20170285894A1 (en) Tabs in System Task Switchers
US11455096B2 (en) Method for displaying graphical user interface based on gesture and electronic device
KR20110113777A (en) Displaying information
CN103370684A (en) Electronic device, display method, and program
WO2014088970A1 (en) Clip board system with visual affordance
KR101960061B1 (en) The method and apparatus for converting and displaying between executing screens of a plurality of applications being executed on a device
US20130141467A1 (en) Data display method and mobile device adapted thereto
KR20160023412A (en) Method for display screen in electronic device and the device thereof
CN107562347B (en) Method and device for displaying object
CN113805996A (en) Information display method and device
WO2015092379A1 (en) A method an apparatus for cataloguing data items
US20130127745A1 (en) Method for Multiple Touch Control Virtual Objects and System thereof
KR102180351B1 (en) User terminal device and method for providing user interface of user terminal device
CN113268182A (en) Application icon management method and electronic equipment

Legal Events

Date Code Title Description
E701 Decision to grant or registration of patent right
GRNT Written decision to grant