KR102180351B1 - 사용자 단말 및 그의 사용자 인터페이스 제공 방법 - Google Patents

사용자 단말 및 그의 사용자 인터페이스 제공 방법 Download PDF

Info

Publication number
KR102180351B1
KR102180351B1 KR1020190013988A KR20190013988A KR102180351B1 KR 102180351 B1 KR102180351 B1 KR 102180351B1 KR 1020190013988 A KR1020190013988 A KR 1020190013988A KR 20190013988 A KR20190013988 A KR 20190013988A KR 102180351 B1 KR102180351 B1 KR 102180351B1
Authority
KR
South Korea
Prior art keywords
image area
gesture
view screen
providing
detailed view
Prior art date
Application number
KR1020190013988A
Other languages
English (en)
Other versions
KR20200095960A (ko
Inventor
남걸호
Original Assignee
주식회사 포씨아
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 주식회사 포씨아 filed Critical 주식회사 포씨아
Priority to KR1020190013988A priority Critical patent/KR102180351B1/ko
Publication of KR20200095960A publication Critical patent/KR20200095960A/ko
Application granted granted Critical
Publication of KR102180351B1 publication Critical patent/KR102180351B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • 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

본 발명은 사용자 단말 및 그의 사용자 인터페이스 제공 방법에 관한 것으로서, a) 컨텐츠 제공 서버로부터 적어도 하나 이상의 멀티미디어 컨텐츠에 대해 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 수신하는 단계; b) 상기 리스트 정보를 출력하는 사용자 인터페이스에 대한 사용자의 스크롤 동작이 감지되면, 상기 리스트 정보 내의 컨텐츠 피드 아이템을 선택적으로 활성화시키기 위한 컨텐츠 피드 뷰 화면을 제공하는 상위 페이지를 출력하는 단계; c) 상기 상위 페이지 상에서 어느 하나의 컨텐츠 피드 아이템이 선택되어 활성화되면 해당 컨텐츠 피드 아이템에 대한 이미지 영역과 정보 영역을 포함하는 상세 보기 화면을 제공하는 하위 페이지를 출력하는 단계; d) 상기 하위 페이지가 활성화된 상태에서 사용자의 스크롤 동작에 대한 제1 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 컬랩싱 처리를 수행하는 단계; e) 상기 컬랩싱 처리된 상세 보기 화면에 대해 제2 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 언컬랩싱 처리를 수행하고, 상기 언컬랩싱 처리된 상세 보기 화면에 대해 상기 제2 방향의 제스처가 감지되면 상기 상세 보기 화면을 종료한 후 상기 상위 페이지로 되돌아가기 동작을 수행하는 단계를 포함하는 것이다.

Description

사용자 단말 및 그의 사용자 인터페이스 제공 방법{USER TERMINAL DEVICE AND METHOD FOR PROVIDING USER INTERFACE OF USER TERMINAL DEVICE}
본 발명은 기설정된 터치 입력 제스처를 이용하여 하위 페이지에서 상위 페이지로 빠르게 전환할 수 있는 사용자 단말 및 그의 사용자 인터페이스 제공 방법에 관한 것이다.
최근, 스마트폰(smart phone)과 같은 사용자 단말의 성능 향상 및 이동통신 기술의 발달에 따라 사용자는 언제 어디서나 사용자 단말을 통해 컨텐츠 제공자(Contents Provider)가 제공하는 웹 서버에 접속해 사진, 비디오, 오디오, 음원 등과 같은 다양한 컨텐츠를 이용할 수 있다.
종래에는 사용자 단말이 화면에 출력되고 있는 컨텐츠에 대해 필요한 기능을 선택하기 위해서 뒤로가기 버튼 등을 이용하여 상위 메뉴, 하위 메뉴를 오가면서 여러 차례의 메뉴 검색 및 선택 과정을 거쳐야 하므로 조작의 효율성이 떨어지는 문제점이 있다.
한편, 종래의 터치스크린을 이용한 사용자 단말에서는 사용자가 손가락을 이용하여 스크롤 업, 스크롤다운 등의 동작을 수행하는 도중에 페이지 전환을 위해 하위 페이지의 상단에 표시된 뒤로 가기 버튼을 직접 터치해야 하므로, 페이지 보기와 페이지 전환에 사용자 조작 제스처가 상이하여 편리한 사용자 인터페이스 환경을 제공하지 못하는 문제점이 있다.
또한, 사용자 단말의 디스플레이의 크기는 제한적이므로 이미지와 해당 이미지에 대한 상세 정보를 제공하는 상세 보기 메뉴에서 이미지의 하단 또는 상단에 표시된 정보를 보기 위해 연속적인 스크롤 동작을 수행해야 하므로 컨텐츠의 가시성이 떨어지는 문제점이 있다.
대한민국 공개특허 제10-2018-0044358호(발명의 명칭 : 컨텐츠 표시를 위한 시스템 및 방법)
본 발명은 전술한 문제점을 해결하기 위하여, 본 발명의 일 실시예에 따라 기설정된 터치 입력 제스처를 이용하여 하위 페이지에서 상위 페이지로 빠르게 전환할 수 있도록 하는 것에 목적이 있다.
다만, 본 실시예가 이루고자 하는 기술적 과제는 상기된 바와 같은 기술적 과제로 한정되지 않으며, 또 다른 기술적 과제들이 존재할 수 있다.
상기한 기술적 과제를 달성하기 위한 기술적 수단으로서 본 발명의 일 실시예에 따른 사용자 단말의 사용자 인터페이스 제공 방법은, 멀티미디어 컨텐츠를 제공하는 사용자 단말에 의해 수행되는 사용자 단말의 사용자 인터페이스 제공 방법에 있어서, a) 컨텐츠 제공 서버로부터 적어도 하나 이상의 멀티미디어 컨텐츠에 대해 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 수신하는 단계; b) 상기 리스트 정보를 출력하는 사용자 인터페이스에 대한 사용자의 스크롤 동작이 감지되면, 상기 리스트 정보 내의 컨텐츠 피드 아이템을 선택적으로 활성화시키기 위한 컨텐츠 피드 뷰 화면을 제공하는 상위 페이지를 출력하는 단계; c) 상기 상위 페이지 상에서 어느 하나의 컨텐츠 피드 아이템이 선택되어 활성화되면 해당 컨텐츠 피드 아이템에 대한 이미지 영역과 정보 영역을 포함하는 상세 보기 화면을 제공하는 하위 페이지를 출력하는 단계; d) 상기 하위 페이지가 활성화된 상태에서 사용자의 스크롤 동작에 대한 제1 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 컬랩싱 처리를 수행하는 단계; e) 상기 컬랩싱 처리된 상세 보기 화면에 대해 제2 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 언컬랩싱 처리를 수행하고, 상기 언컬랩싱 처리된 상세 보기 화면에 대해 상기 제2 방향의 제스처가 감지되면 상기 상세 보기 화면을 종료한 후 상기 상위 페이지로 되돌아가기 동작을 수행하는 단계를 포함하는 것이다.
본 발명의 일 실시예에 따른 사용자 단말은, 멀티미디어 컨텐츠를 제공하는 사용자 단말에 있어서, 통신모듈, 상기 멀티미디어 컨텐츠를 제공하는 프로그램을 저장한 메모리, 상기 프로그램을 실행하는 프로세서를 포함하되, 상기 프로세서는 상기 프로그램의 실행에 따라, 컨텐츠 제공 서버로부터 적어도 하나 이상의 멀티미디어 컨텐츠에 대해 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 수신하고, 상기 리스트 정보를 출력하는 사용자 인터페이스에 대한 사용자의 스크롤 동작이 감지되면, 상기 리스트 정보 내의 컨텐츠 피드 아이템을 선택적으로 활성화시키기 위한 컨텐츠 피드 뷰 화면을 제공하는 상위 페이지를 출력하고, 상기 상위 페이지 상에서 어느 하나의 컨텐츠 피드 아이템이 선택되어 활성화되면 해당 컨텐츠 피드 아이템에 대한 이미지 영역과 정보 영역을 포함하는 상세 보기 화면을 제공하는 하위 페이지를 출력하고, 상기 하위 페이지가 활성화된 상태에서 사용자의 스크롤 동작에 대한 제1 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 컬랩싱 처리를 수행하고, 상기 컬랩싱 처리된 상세 보기 화면에 대해 제2 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 언컬랩싱 처리를 수행하고, 상기 언컬랩싱 처리된 상세 보기 화면에 대해 상기 제2 방향의 제스처가 감지되면 상기 상세 보기 화면을 종료한 후 상기 상위 페이지로 되돌아가기 동작을 수행하는 단계를 포함하는 것이다.
전술한 본 발명의 과제 해결 수단에 의하면, 사용자의 스크롤 동작에 상응하여 컬랩스 기능이 적용된 컨텐츠 피드 아이템에 대한 이미지 영역과 정보 영역 중 어느 하나의 영역을 숨기거나 펼쳐서 제한적인 디스플레이 상에서의 컨텐츠 가시성을 향상시킬 수 있다.
또한, 본 발명은 상위 페이지와 하위 페이지로 전환하기 위해 뒤로 가기 버튼을 별도로 클릭하지 않고서도 동일한 방향의 제스처를 두 번 입력하는 과정을 통해 보다 쉽고 빠르게 상위페이지로 전환할 수 있어 편리한 사용자 인터페이스 환경을 제공할 수 있다.
도 1은 본 발명의 일 실시예에 따른 멀티미디어 컨텐츠를 제공하기 위한 전체 시스템의 구성을 설명하는 도면이다.
도 2는 본 발명의 일 실시예에 따른 사용자 단말의 구성을 설명하는 도면이다.
도 3은 본 발명의 일 실시예에 따른 사용자 단말의 사용자 인터페이스 제공 방법을 나타낸 동작 흐름도이다.
도 4는 도 3에 의한 컬랩싱 동작으로 인한 사용자 인터페이스를 통한 화면 예시도이다.
도 5는 도 3에 의한 언컬랩싱 동작으로 인한 이미지 영역의 숨김/펼치기 기능에 대한 사용자 인터페이스를 통한 화면 예시도이다.
도 6은 도 3에 의한 스와이프 다운 동작으로 인한 페이지 전환에 대한 사용자 인터페이스를 통한 화면 예시도이다.
아래에서는 첨부한 도면을 참조하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 본 발명의 실시예를 상세히 설명한다. 그러나 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 도면 부호를 붙였다.
명세서 전체에서, 어떤 부분이 다른 부분과 "연결"되어 있다고 할 때, 이는 "직접적으로 연결"되어 있는 경우뿐 아니라, 그 중간에 다른 소자를 사이에 두고 "전기적으로 연결"되어 있는 경우도 포함한다. 또한 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있는 것을 의미하며, 하나 또는 그 이상의 다른 특징이나 숫자, 단계, 동작, 구성요소, 부분품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.
이하의 실시예는 본 발명의 이해를 돕기 위한 상세한 설명이며, 본 발명의 권리 범위를 제한하는 것이 아니다. 따라서 본 발명과 동일한 기능을 수행하는 동일 범위의 발명 역시 본 발명의 권리 범위에 속할 것이다.
이하 첨부된 도면을 참고하여 본 발명의 일 실시예를 상세히 설명하기로 한다.
도 1은 본 발명의 일 실시예에 따른 멀티미디어 컨텐츠를 제공하기 위한 전체 시스템의 구성을 설명하는 도면이다.
도 1을 참조하면, 멀티미디어 컨텐츠를 제공하기 위한 시스템은 적어도 하나 이상의 멀티미디어 제공 장치(100), 컨텐츠 제공 서버(200) 및 적어도 하나 이상의 사용자 단말(300)을 포함한다.
멀티미디어 제공 장치(100)는 통신망을 통해 다수의 멀티미디어 컨텐츠를 수집하고, 컨텐츠 제공 서버(200) 또는 사용자 단말(300)의 요청에 따라 멀티미디어 컨텐츠에 대한 컨텐츠 피드 아이템을 제공한다. 이때, 컨텐츠 피드 아이템은 음원, 영상, 그림, 사진, 게임 등 다양한 컨텐츠들을 포함할 수 있다. 또한, 멀티미디어 제공 장치(100)는 컨텐츠 보관, 컨텐츠 공유, 컨텐츠 거래 등을 위해 전문 업체 또는 개인이 운영할 수 있다.
컨텐츠 제공 서버(200)는 멀티미디어 컨텐츠와 관련된 서비스를 제공하기 위한 어플리케이션을 제공하여 어플리케이션을 통해 멀티미디어 제공 장치(100) 또는 사용자 단말(300)과 연동될 수 있다. 또는 컨텐츠 제공 서버(200)는 어플리케이션의 설치 없이 웹서비스 형태로 서버(200)에 접속한 사용자 단말(300)에 멀티미디어 컨텐츠와 관련된 서비스를 제공할 수도 있다.
이러한 컨텐츠 제공 서버(200)는 적어도 하나 이상의 사용자 단말(300)의 요청에 따라 각 사용자 단말(300)에 대하여 멀티미디어 제공 장치(100)로부터 수집한 멀티미디어 컨텐츠에 대해 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 제공한다.
사용자 단말(300)은 컨텐츠 제공 서버(200)로부터 리스트 정보를 수신한 후에 멀티미디어 컨텐츠를 출력하는 사용자 인터페이스에 대한 스크롤 동작이 감지되면 사용자의 스크롤 동작시 제스처의 방향에 따라 컨텐츠 피드 아이템에 대한 이미지 정보와 상세 정보 등을 화면에 출력하거나 상위 페이지와 하위 페이지간의 페이지 전환 기능을 수행한다.
도 2는 본 발명의 일 실시예에 따른 사용자 단말의 구성을 설명하는 도면이다.
도 2를 참조하면, 사용자 단말(300)은 통신 모듈(310), 메모리(320), 프로세서(330) 및 데이터베이스(340)을 포함하지만 이에 한정되지는 않는다.
통신 모듈(310)은 통신망과 연동하여 사용자 단말(300)로 송수신되는 신호를 패킷 데이터 형태로 제공하는 데 필요한 통신 인터페이스를 제공한다. 여기서, 통신 모듈(310)은 다른 네트워크 장치와 유무선 연결을 통해 제어 신호 또는 데이터 신호와 같은 신호를 송수신하기 위해 필요한 하드웨어 및 소프트웨어를 포함하는 장치일 수 있다.
메모리(320)는 멀티미디어 컨텐츠와 관련된 서비스를 제공하기 위한 프로그램이 저장된다. 또한, 메모리(320)는 프로세서(330)가 처리하는 데이터를 일시적 또는 영구적으로 저장하는 기능을 수행한다. 여기서, 메모리(320)는 휘발성 저장 매체(volatile storage media) 또는 비휘발성 저장 매체(non-volatile storage media)를 포함할 수 있으나, 본 발명의 범위가 이에 한정되는 것은 아니다.
프로세서(330)는 멀티미디어 컨텐츠와 관련된 서비스를 제공하기 위한 프로그램을 실행하고, 프로그램의 실행에 따라 단말의 하드웨어를 제어하는 기능을 제공한다. 즉, 프로세서(330)는 프로그램을 실행함에 따라 필요한 파일 시스템, 메모리 할당, 네트워크, 기본 라이브러리, 타이머, 디바이스 제어(디스플레이, 미디어, 입력장치, 3D 등), 기타 유틸리티 등의 하드웨어 제어 기능을 수행할 수 있다.
여기서, 프로세서(330)는 프로세서(processor)와 같이 데이터를 처리할 수 있는 모든 종류의 장치를 포함할 수 있다. 여기서, '프로세서(processor)'는, 예를 들어 프로그램 내에 포함된 코드 또는 명령으로 표현된 기능을 수행하기 위해 물리적으로 구조화된 회로를 갖는, 하드웨어에 내장된 데이터 처리 장치를 의미할 수 있다. 이와 같이 하드웨어에 내장된 데이터 처리 장치의 일 예로써, 마이크로프로세서(microprocessor), 중앙처리장치(central processing unit: CPU), 프로세서 코어(processor core), 멀티프로세서(multiprocessor), ASIC(application-specific integrated circuit), FPGA(field programmable gate array) 등의 처리 장치를 망라할 수 있으나, 본 발명의 범위가 이에 한정되는 것은 아니다.
데이터베이스(340)는 멀티미디어 컨텐츠와 관련된 서비스를 제공하기 위한 프로그램을 수행하면서 누적되는 데이터가 저장된다. 예컨대, 데이터베이스(340)에는 리스트 정보, 사용자 선택에 따른 멀티미디어 컨텐츠의 원본 정보 등이 저장될 수 있다.
도 3은 본 발명의 일 실시예에 따른 사용자 단말의 사용자 인터페이스 제공 방법을 나타낸 동작 흐름도이고, 도 4는 도 3에 의한 컬랩싱 동작으로 인한 사용자 인터페이스를 통한 화면 예시도이며, 도 5는 도 3에 의한 언컬랩싱 동작으로 인한 이미지 영역의 숨김/펼치기 기능에 대한 사용자 인터페이스를 통한 화면 예시도이고, 도 6은 도 3에 의한 스와이프 다운 동작으로 인한 페이지 전환에 대한 사용자 인터페이스를 통한 화면 예시도이다.
도 3내지 도 6를 참조하면, 사용자 단말의 사용자 인터페이스 제공 방법은, 사용자 단말에서 컨텐츠 제공 서버로부터 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 수신한다(S110).
사용자 단말은 리스트 정보를 출력하는 사용자 인터페이스에 대한 사용자의 스크롤 동작이 감지되면(S120), 리스트 정보 내의 컨텐츠 피드 아이템을 선택적으로 활성화시키기 위한 컨텐츠 피드 뷰 화면을 제공하는 상위 페이지(410)를 출력한다(S130).
컨텐츠 피드 뷰 화면에는 각 컨텐츠 피드 아이템에 대한 아이콘 이미지 또는 텍스트 제목을 포함하는 메인 메뉴를 리스트 뷰 형태로 제공하는데, 아이콘 이미지는 미리보기 이미지(thumbnail image)를 사용할 수 있다.
사용자 단말은 사용자 의해 상위 페이지 상에서 어느 하나의 컨텐츠 피드 아이템이 선택되어 활성화되면(S140), 해당 컨텐츠 피드 아이템에 대한 이미지 영역(421)과 정보 영역(422)을 포함하는 상세 보기 화면을 제공하는 하위 페이지(420)를 제공한다(S150).
이때, 상세 보기 화면의 정보 영역(422)에는 메타 정보, 제목, 촬영 날짜 정보, 촬영자 정보, 컨텐츠 게시 정보, 이미지 크기 정보, 부가 정보 중 적어도 하나 이상을 포함할 수 있다.
이와 같이, 하위 페이지가 활성화된 상태에서, 사용자 단말은 방향성을 갖는 사용자의 스크롤 동작이 감지되면(S160), 제1 방향의 제스처인 경우 컬랩싱 동작으로 인식하고, 상세보기 화면 중 이미지 영역을 숨기는 컬랩싱 처리를 수행한다. (S170). 이때, 제 1 방향의 제스처는 표시된 페이지를 디스플레이의 상방측으로 이동시키는 스크롤 동작일 수 있다.
사용자 단말은 터치식으로 화면 스크롤이 가능한 단말이므로, 터치 스크린의 사용자 터치 조작에 의한 스크롤 동작에 응답하여 입력 데이터 처리, 사용자 지정 제어 동작 등을 수행할 수 있다. 이때, 사용자 인터페이스를 조작하고 상호 작용을 수행하기 위한 사용자의 터치 스크린 제스처는 사용자가 화면의 특정 영역을 터치할 때 발생하고, 손가락을 들거나 조작이 취소될 때까지 계속된다. 터치 스크린 제스처는 드래그 제스처, 슬라이드 제스처, 스크롤 제스처, 스와이프 제스처, 탭 제스처, 핀치 제스처, 스프레드 제스처, 회전 제스처 또는 플릭 제스처 중 어느 하나가 될 수 있다.
한편, 컬랩싱 처리는 이미지 영역을 디스플레이 화면의 상단으로 스크롤하여 이동시키는 것과는 달리, 마치 해당 이미지 영역이 붕괴되는 듯한 그래픽 효과를 제공하여, 사용자로 하여금 컬랩싱 동작이 발생하였음을 인식할 수 있도록 한다. 예를 들어, 도 4에 표시된 이미지 영역(421)이 제 1 방향의 제스처에 의하여 상부측으로 이동하는 과정에서, 이미지 영역(421)의 하부측 단부가 스크롤 업 동작의 이동 방향에 그대로 디스플레이 화면의 상단을 통과하기 보다는, 디스플레이 화면의 상단을 통과하기 전에 해당 이미지 영역(421)이 페이드 아웃(fade out) 되는 효과를 주는 형태로 컬랩싱 처리를 수행할 수 있다.
이와 같은 화면 처리 방식은 다양하게 변경될 수 있는데, 예를 들어, 전체 이미지 영역(421) 증 디스플레이 상단 방향으로 이동하여 사라진 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 컬랩싱 철리를 수행한다. 예를 들면, 미리 설정된 이미지 영역(421)의 70~80% 가량이 디스플레이 화면의 상단을 통과한 시점에 페이드 아웃 처리를 한다거나, 디스플레이 화면의 상단 아래 쪽에 남은 잔여 이미지 영역이 디스플레이 화면의 상단쪽으로 이동하는 속도를 증가시키거나 하는 형태로 구현될 수 있다. 이때, 사용자 단말은 컬랩싱 처리를 위한 사라진 이미지 영역과 전체 이미지 영역의 비율은 사용자의 선택에 따라 변경 가능하다.
한편, 사용자 단말은 컬랩싱 처리된 상세 보기 화면에 대해 제2 방향의 제스처가 감지되면(S180), 언컬랩싱 동작으로 인식하여 이미지 영역의 숨김 상태를 해제하고, 사용자의 스크롤 동작에 상응하여 상세 보기 화면을 스크롤한다(S190).
이때, 제 2 방향의 제스처는 표시된 페이지를 디스플레이의 하방측으로 이동시키는 스크롤 동작일 수 있으며, 특히 제 1 방향과는 반대 방향의 제스처일 수 있다.
언컬랩싱 처리는 앞서 설명한 컬랩싱 처리를 반대로 수행하는 형태로 이루어질 수 있다. 예를 들어, 컬랩싱되어 사라진 전체 이미지 영역(421) 중 디스플레이 화면의 상단 아래로 이동하여 나타나는 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 언컬랩싱 처리를 수행한다. 예를 들면, 전체 이미지 영역 중 디스플레이 화면의 상단에 나타나지 않은 이미지 영역을 페이드 인(Fade-in) 처리하는 형태 또는 이미지 영역 중 디스플레이 화면의 상단에 나타나지 않는 이미지 영역을 하부측으로 이동하는 속도를 증가시키는 형태 중 어느 하나의 형태로 언컬랩싱을 구현할 수 있다. . 이때, 사용자 단말은 언컬랩싱 처리를 위해 디스플레이 화면의 상단 아래로 이동하여 나타나는 이미지 영역과 전체 이미지 영역의 비율은 사용자의 선택에 따라 변경 가능하다.
사용자 단말은 언컬랩싱 처리된 상세 보기 화면에서 제2 방향의 제스처가 감지되면 상세 보기 화면을 종료한 후 상위 페이지로 되돌아가기 동작을 수행한다(S200). 즉, 제 2 방향의 제스처가 연속적으로 감지되면 상위 페이지로 되돌아갈 수 있도록 한다.
사용자 단말은 제스처가 입력된 위치와 무관하게 제스처가 입력된 제2 방향이 화면의 아래(down)로 향하는 스와이프 다운인 경우, 즉시 상위 페이지로 되돌아가기 동작을 수행한다.
일례로, 사용자 단말은 이미지 영역과 정보 영역에 포함된 상세 보기 화면에서 스와이프 업 동작을 수행하면 이미지 영역이 숨겨지는 컬랩싱 처리를 수행하고, 스와이프 다운 동작을 수행하면 숨겨진 이미지 영역이 다시 펼쳐지도록 한다. 이때, 사용자가 다시 스와이프 다운 동작을 수행할 경우에 언컬랩싱 동작으로 인식하여 상위 페이지로 화면 전환이 수행된다.
한편, 사용자 단말은 하위 페이지의 일측에 상위 페이지로 되돌아가기 기능을 수행하는 버튼(430)을 출력하고, 해당 버튼(430)의 터치 제스처가 감지되면 상위 페이지로 되돌아가기 동작을 수행할 수 있다.
한편 도 3의 단계 S111 내지 S121은 본 발명의 구현예에 따라서 추가적인 단계들로 분할되거나, 더 적은 단계들로 조합될 수 있다. 또한, 일부 단계는 필요에 따라 생략될 수도 있고, 단계간의 순서가 변경될 수도 있다.
한편, 컨텐츠 제공 서버가 모바일 백엔드(Backend as a Service, BaaS) 서비스를 제공하는 백엔드 서버로 동작될 수 있고, 사용자 단말에 설치된 어플리케이션과의 연결을 구현하는 모델로 구현될 경우, 데이터저장(data storage), 사용자관리(user management), 푸시알림(push notifications), 위치서비스(location services), 데이터분석(analytics), 계정등록, 구매확인, 이용자 발생 알림, 패스워드 재설정 등의 결제 연동 기능 등 다양한 벡엔드 기능을 BaaS 플랫폼을 통해 제공할 수 있다.
따라서, 컨텐츠 제공 서버가 사용자 단말에 설치된 어플리케이션을 통해 멀티미디어 컨텐츠에 대한 판매 또는 구매를 지원하는 컨텐츠 거래 기능을 제공하는 경우, 상세 보기 화면의 정보 영역에 가격 정보를 포함한 거래 정보를 부가정보를 제공할 수 있다.
따라서, 사용자 단말은 컨텐츠 제공 서버로부터 제공되는 리스트 정보를 통해 자신이 원하는 특정 멀티미디어 컨텐츠를 선택한 후 거래처리, 결제, 문자 전송, 배송조회를 포함한 결제 연동 서비스를 제공받을 수 있다.
이상에서 설명한 본 발명의 실시예에 따른 사용자 단말의 사용자 인터페이스 제공 방법은, 컴퓨터에 의해 실행되는 프로그램 모듈과 같은 컴퓨터에 의해 실행 가능한 명령어를 포함하는 기록 매체의 형태로도 구현될 수 있다. 이러한 기록 매체는 컴퓨터 판독 가능 매체를 포함하며, 컴퓨터 판독 가능 매체는 컴퓨터에 의해 액세스될 수 있는 임의의 가용 매체일 수 있고, 휘발성 및 비휘발성 매체, 분리형 및 비분리형 매체를 모두 포함한다. 또한, 컴퓨터 판독가능 매체는 컴퓨터 저장 매체를 포함하며, 컴퓨터 저장 매체는 컴퓨터 판독가능 명령어, 데이터 구조, 프로그램 모듈 또는 기타 데이터와 같은 정보의 저장을 위한 임의의 방법 또는 기술로 구현된 휘발성 및 비휘발성, 분리형 및 비분리형 매체를 모두 포함한다.
전술한 본 발명의 설명은 예시를 위한 것이며, 본 발명이 속하는 기술분야의 통상의 지식을 가진 자는 본 발명의 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 쉽게 변형이 가능하다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한다. 예를 들어, 단일형으로 설명되어 있는 각 구성 요소는 분산되어 실시될 수도 있으며, 마찬가지로 분산된 것으로 설명되어 있는 구성 요소들도 결합된 형태로 실시될 수 있다.
본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 균등 개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.
100: 멀티미디어 제공 장치 200: 컨텐츠 제공 서버
300: 사용자 단말 310: 통신 모듈
320: 메모리 330: 프로세서
340: 데이터베이스

Claims (13)

  1. 멀티미디어 컨텐츠를 제공하는 사용자 단말에 의해 수행되는 사용자 단말의 사용자 인터페이스 제공 방법에 있어서,
    a) 컨텐츠 제공 서버로부터 적어도 하나 이상의 멀티미디어 컨텐츠에 대해 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 수신하는 단계;
    b) 상기 리스트 정보를 출력하는 사용자 인터페이스에 대한 사용자의 스크롤 동작이 감지되면, 상기 리스트 정보 내의 컨텐츠 피드 아이템을 선택적으로 활성화시키기 위한 컨텐츠 피드 뷰 화면을 제공하는 상위 페이지를 출력하는 단계;
    c) 상기 상위 페이지 상에서 어느 하나의 컨텐츠 피드 아이템이 선택되어 활성화되면 해당 컨텐츠 피드 아이템에 대한 이미지 영역과 정보 영역을 포함하는 상세 보기 화면을 제공하는 하위 페이지를 출력하는 단계;
    d) 상기 하위 페이지가 활성화된 상태에서 사용자의 스크롤 동작에 대한 제1 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 컬랩싱 처리를 수행하는 단계;
    e) 상기 컬랩싱 처리된 상세 보기 화면에 대해 제2 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 언컬랩싱 처리를 수행하고, 상기 언컬랩싱 처리된 상세 보기 화면에 대해 상기 제2 방향의 제스처가 감지되면 상기 상세 보기 화면을 종료한 후 상기 상위 페이지로 되돌아가기 동작을 수행하는 단계를 포함하되,
    상기 d) 단계는,
    상기 이미지 영역 중 디스플레이 화면의 상단 방향으로 이동하여 사라진 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 컬랩싱 처리를 수행하되,
    상기 컬랩싱 처리는 상기 이미지 영역 중 상기 디스플레이 화면의 상단의 아래쪽에 남은 잔여 이미지 영역을 페이드 아웃(Fade-out) 처리하는 형태 또는 상기 이미지 영역 중 상기 디스플레이 화면의 상단의 아래쪽에 남은 잔여 이미지 영역이 상부측으로 이동하는 속도를 증가시키는 형태 중 어느 하나의 형태로 구현되는 것이고,
    상기 e) 단계는,
    상기 컬랩싱 처리되어 사라진 전체 이미지 영역 중 디스플레이 화면의 상단 아래로 이동하여 나타나는 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 언컬랩싱 처리하되,
    상기 언컬랩싱 처리는 상기 이미지 영역 중 상기 디스플레이 화면의 상단에 나타나지 않은 이미지 영역을 페이드 인(Fade-in) 처리하는 형태 또는 상기 이미지 영역 중 상기 디스플레이 화면의 상단에 나타나지 않는 이미지 영역을 하부측으로 이동하는 속도를 증가시키는 형태 중 어느 하나의 형태로 구현되는 것인, 사용자 단말의 사용자 인터페이스 제공 방법.
  2. 삭제
  3. 삭제
  4. 제 1 항에 있어서,
    상기 b) 단계는,
    각 컨텐츠 피드 아이템에 대한 아이콘 이미지 또는 텍스트 제목을 포함하는 메인 메뉴를 리스트 뷰 형태로 상기 컨텐츠 피드 뷰 화면에 제공하는 것인, 사용자 단말의 사용자 인터페이스 제공 방법.
  5. 제 4 항에 있어서,
    상기 아이콘 이미지는 미리보기 이미지(thumbnail image)를 사용하는 것인, 사용자 단말의 사용자 인터페이스 제공 방법.
  6. 제 1 항에 있어서,
    상기 상세 보기 화면의 정보 영역에는 메타 정보, 제목, 촬영 날짜 정보, 촬영자 정보, 이미지 크기 정보, 부가 정보 중 적어도 하나 이상을 포함하는 것인, 사용자 단말의 사용자 인터페이스 제공 방법.
  7. 제 1 항에 있어서,
    상기 c) 단계는, 상기 하위 페이지의 일측에 상기 상위 페이지로 되돌아가기 기능을 수행하는 버튼을 출력하고,
    f) 상기 버튼의 터치 제스처가 감지되면 상기 상위 페이지로 되돌아가기 동작을 수행하는 단계를 더 포함하는 것인, 사용자 단말의 사용자 인터페이스 제공 방법.
  8. 제 1 항에 있어서,
    상기 제1 방향의 제스처는 현재 표시된 페이지를 디스플레이의 상방측으로 이동시키는 스크롤 동작이고, 상기 제2 방향의 제스처는 현재 표시된 페이지를 디스플레이의 하방측으로 이동시키는 스크롤 동작인 것인, 사용자 단말의 사용자 인터페이스 제공 방법.
  9. 멀티미디어 컨텐츠를 제공하는 사용자 단말에 있어서,
    통신모듈,
    상기 멀티미디어 컨텐츠를 제공하는 프로그램을 저장한 메모리,
    상기 프로그램을 실행하는 프로세서를 포함하되,
    상기 프로세서는 상기 프로그램의 실행에 따라, 컨텐츠 제공 서버로부터 적어도 하나 이상의 멀티미디어 컨텐츠에 대해 컬랩싱(Collapsing) 기능이 적용된 컨텐츠 피드 아이템들이 정렬된 리스트 정보를 수신하고,
    상기 리스트 정보를 출력하는 사용자 인터페이스에 대한 사용자의 스크롤 동작이 감지되면, 상기 리스트 정보 내의 컨텐츠 피드 아이템을 선택적으로 활성화시키기 위한 컨텐츠 피드 뷰 화면을 제공하는 상위 페이지를 출력하고,
    상기 상위 페이지 상에서 어느 하나의 컨텐츠 피드 아이템이 선택되어 활성화되면 해당 컨텐츠 피드 아이템에 대한 이미지 영역과 정보 영역을 포함하는 상세 보기 화면을 제공하는 하위 페이지를 출력하고,
    상기 하위 페이지가 활성화된 상태에서 사용자의 스크롤 동작에 대한 제1 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 컬랩싱 처리를 수행하고,
    상기 컬랩싱 처리된 상세 보기 화면에 대해 제2 방향의 제스처가 감지되면, 상기 상세 보기 화면에 대한 언컬랩싱 처리를 수행하고, 상기 언컬랩싱 처리된 상세 보기 화면에 대해 상기 제2 방향의 제스처가 감지되면 상기 상세 보기 화면을 종료한 후 상기 상위 페이지로 되돌아가기 동작을 수행하는 것이되,
    상기 프로세서는,
    상기 이미지 영역 중 디스플레이 화면의 상단 방향으로 이동하여 사라진 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 컬랩싱 처리를 수행하되,
    상기 컬랩싱 처리는 상기 이미지 영역 중 상기 디스플레이 화면의 상단의 아래쪽에 남은 잔여 이미지 영역을 페이드 아웃(Fade-out) 처리하는 형태 또는 상기 이미지 영역 중 상기 디스플레이 화면의 상단의 아래쪽에 남은 잔여 이미지 영역이 상부측으로 이동하는 속도를 증가시키는 형태 중 어느 하나의 형태로 구현되도록 하고,
    상기 프로세서는,
    상기 컬랩싱 처리되어 사라진 전체 이미지 영역 중 디스플레이 화면의 상단 아래로 이동하여 나타나는 이미지 영역이 전체 이미지 영역의 미리 설정된 비율에 도달하는 순간 언컬랩싱 처리하되,
    상기 언컬랩싱 처리는 상기 이미지 영역 중 상기 디스플레이 화면의 상단에 나타나지 않은 이미지 영역을 페이드 인(Fade-in) 처리하는 형태 또는 상기 이미지 영역 중 상기 디스플레이 화면의 상단에 나타나지 않는 이미지 영역을 하부측으로 이동하는 속도를 증가시키는 형태 중 어느 하나의 형태로 구현되도록 하는 것인, 사용자 단말.
  10. 삭제
  11. 삭제
  12. 제 9 항에 있어서,
    상기 프로세서는, 상기 하위 페이지의 일측에 상기 상위 페이지로 되돌아가기 기능을 수행하는 버튼을 출력한 후, 상기 버튼의 터치 제스처가 감지되면 상기 상위 페이지로 되돌아가기 동작을 수행하는 것인, 사용자 단말.
  13. 제 9 항에 있어서,
    상기 제1 방향의 제스처는 현재 표시된 페이지를 디스플레이의 상방측으로 이동시키는 스크롤 동작이고, 상기 제2 방향의 제스처는 현재 표시된 페이지를 디스플레이의 하방측으로 이동시키는 스크롤 동작인 동작인 것인, 사용자 단말.
KR1020190013988A 2019-02-01 2019-02-01 사용자 단말 및 그의 사용자 인터페이스 제공 방법 KR102180351B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020190013988A KR102180351B1 (ko) 2019-02-01 2019-02-01 사용자 단말 및 그의 사용자 인터페이스 제공 방법

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020190013988A KR102180351B1 (ko) 2019-02-01 2019-02-01 사용자 단말 및 그의 사용자 인터페이스 제공 방법

Publications (2)

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

Family

ID=72048391

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020190013988A KR102180351B1 (ko) 2019-02-01 2019-02-01 사용자 단말 및 그의 사용자 인터페이스 제공 방법

Country Status (1)

Country Link
KR (1) KR102180351B1 (ko)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20220015658A (ko) 2020-07-31 2022-02-08 엘지디스플레이 주식회사 표시 장치

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101453914B1 (ko) * 2008-01-16 2014-10-24 삼성전자주식회사 복수의 리스트를 표시하기 위한 ｇｕｉ 제공방법 및 이를적용한 멀티미디어 기기
KR101586627B1 (ko) * 2008-10-06 2016-01-19 삼성전자주식회사 멀티 터치를 이용한 리스트 관리 방법 및 장치
KR20120029682A (ko) * 2010-09-17 2012-03-27 주식회사 아이리버 멀티미디어 컨텐츠의 실행을 제어하는 멀티미디어 단말기 및 그 제어방법
KR101612000B1 (ko) * 2013-10-16 2016-04-28 한양대학교 에리카산학협력단 모바일 스마트단말에서의 범위 커서 영역 이동을 통한 감성 광고 기반의 광고대상물 구매 시스템
US20170060405A1 (en) 2015-08-28 2017-03-02 Facebook, Inc. Systems and methods for content presentation

Also Published As

Publication number Publication date
KR20200095960A (ko) 2020-08-11

Similar Documents

Publication Publication Date Title
US12008232B2 (en) User interfaces for viewing and accessing content on an electronic device
KR101733839B1 (ko) 사용자 인터페이스에서의 작업 공간 관리
US8423995B2 (en) Electronic device and user interface display method thereof
JP5911599B2 (ja) 分類ウェブページ切り替えのための方法および携帯型デバイス
Hardy et al. Touch & interact: touch-based interaction of mobile phones with displays
US9690446B2 (en) Portable electronic device, method, and graphical user interface for displaying structured electronic documents
EP2423800B1 (en) Method for switching user interface, electronic device and recording medium using the same
US8281252B2 (en) User interface component
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
US20080165148A1 (en) Portable Electronic Device, Method, and Graphical User Interface for Displaying Inline Multimedia Content
US20210405864A1 (en) Method for Displaying Graphical User Interface Based on Gesture and Electronic Device
KR102270953B1 (ko) 전자 장치에서 화면을 표시하는 방법 및 이를 위한 전자 장치
KR20130052743A (ko) 항목 선택 방법
EP2660700B1 (en) Method, apparatus and computer program product for operating items with multiple fingers
CN102467318A (zh) 用于触摸屏的快速桌面切换方法和装置
KR20110113777A (ko) 정보 디스플레이
CN107562347B (zh) 显示对象的方法和装置
US20170068444A1 (en) Information interchange via selective assembly using single gesture
CN113268182A (zh) 应用图标的管理方法和电子设备
CN113805996A (zh) 信息展示方法和装置
KR102180351B1 (ko) 사용자 단말 및 그의 사용자 인터페이스 제공 방법
CN103324430A (zh) 多手指的物件操作方法及装置
CN115917488A (zh) 一种显示界面处理方法、装置及存储介质

Legal Events

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