KR20140023534A - 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체 - Google Patents

반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체 Download PDF

Info

Publication number
KR20140023534A
KR20140023534A KR20120089492A KR20120089492A KR20140023534A KR 20140023534 A KR20140023534 A KR 20140023534A KR 20120089492 A KR20120089492 A KR 20120089492A KR 20120089492 A KR20120089492 A KR 20120089492A KR 20140023534 A KR20140023534 A KR 20140023534A
Authority
KR
South Korea
Prior art keywords
screen
web page
layout
user interface
command
Prior art date
Application number
KR20120089492A
Other languages
English (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 KR20120089492A priority Critical patent/KR20140023534A/ko
Priority to US14/396,319 priority patent/US20150088669A1/en
Priority to CN201710532310.1A priority patent/CN107273344A/zh
Priority to PCT/KR2013/006917 priority patent/WO2014027773A1/ko
Priority to CN201380023353.7A priority patent/CN104272237B/zh
Publication of KR20140023534A publication Critical patent/KR20140023534A/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/951—Indexing; Web crawling techniques
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • 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/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/02—Marketing; Price estimation or determination; Fundraising
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/02—Marketing; Price estimation or determination; Fundraising
    • G06Q30/0241—Advertisements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/02—Marketing; Price estimation or determination; Fundraising
    • G06Q30/0241—Advertisements
    • G06Q30/0277—Online advertisement
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/14—Display of multiple viewports

Abstract

본 발명은 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체에 관한 것으로, 화면 크기에 따른 레이아웃 설정값이 저장된 화면 설정값 저장부, 사용자 명령을 입력받는 사용자 인터페이스부, 상기 사용자 인터페이스부를 통해 화면 재배치 명령이 입력된 경우, 상기 화면 재배치 명령을 해석하여 해당 레이아웃 설정값을 상기 화면 설정값 저장부로부터 획득하는 사용자 명령 인식부, 상기 획득된 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, 그 재구성된 화면에 해당 웹 페이지의 구성블록들을 재배치하여 표시하는 화면 구성 제어부를 포함한다.

Description

반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체{Apparatus For Implementing Responsive User Interface, Method Thereof And Recordable Medium Storing The Method}
본 발명은 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체에 관한 것으로, 보다 상세하게는 웹 페이지가 표시된 상태에서 화면 재배치 명령이 입력된 경우, 그 화면 재배치 명령을 해석하여 해당 레이아웃 설정값을 획득하고, 그 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하며, 재구성된 화면에 웹 페이지 구성블록들을 재배치하여 표시하는 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체에 관한 것이다.
휴대폰이나 PDA(Personal Digital Assistant) 등과 같은 무선통신 단말기가 널리 사용되고 무선 인터넷이 활성화되면서, 무선통신 단말기를 통해 임의의 장소에서도 인터넷 웹페이지에 접속할 수 있게 되었다.
그러나, 무선통신 단말기는 이동성이나 휴대성을 고려해야 하므로 표시창의 크기가 작은 것이 보통이고, 이러한 작은 크기의 표시창을 통해 재현가능한 화면의 크기도 제한적이다.
따라서, 무선통신 단말기를 통해 모바일 전용 웹페이지가 아닌 일반 웹페이지에 접속하는 경우, 전체 웹페이지의 일부만을 하나의 화면에 표시할 수 있으므로, 전체 웹페이지를 보기 위해서는 화면을 상, 하, 좌, 우로 스크롤 해야 한다.
그런데, 화면을 상, 하, 좌, 우로 스크롤 하면서 웹페이지를 보는 것은 사용상 불편할 뿐만 아니라, 광고 등의 불필요한 이미지나 링크 등이 포함된 웹페이지 화면을 스크롤하는 과정에서 잘못 선택하거나, 정작 필요한 부분을 지나쳐 버릴 수 있는 문제가 있다.
이에 따라, 화면 스크롤을 통해 전체 웹페이지를 보는 대신, 텍스트 전용 모드(text only mode)를 이용하여 웹페이지에서 모든 이미지 정보를 없애고 텍스트만을 화면에 표시하거나, 전체 웹페이지 크기를 무선통신 단말기의 화면 크기에 맞추어 줄여서 표시하는 방법 등을 사용할 수 있다.
그러나, 웹페이지에서 모든 이미지를 일괄적으로 없애는 것은 사용자가 보기를 원하는 이미지도 함께 없어지기 때문에 바람직하지 못하고, 웹페이지의 크기를 무선통신 단말기의 화면 크기에 맞도록 줄이는 것은 무선통신 단말기의 작은 표시창의 화면에서 웹페이지 내용을 용이하게 인식할 수 없는 문제가 있다.
따라서, 웹페이지의 전체 크기를 조절하거나 이미지를 모두 없애고 표시하는 방법 이외의 사용자가 편리하도록 웹페이지를 재구성하여 표시할 필요가 있다.
한국공개특허 제10-2007-0083263호, 발명의 명칭 '사용자 단말의 특성에 따른 웹 표현 처리 시스템, 방법, 및 그 기록매체'
본 발명은 상기한 문제점을 해결하기 위하여 안출된 것으로, 본 발명의 목적은 반응형 UI가 해상도(화면 크기)뿐 아니라 사용자의 인터렉션(Interaction)으로 제어될 수 있도록 하여 화면 재배치가 되는 부분을 쉽게 인지할 수 있도록 하는 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체를 제공하는데 있다.
본 발명의 다른 목적은 다양한 디바이스 또는 다양한 화면에 맞게 구성되어 있는 레이아웃을 사용자의 인터페이스만으로도 확인할 수 있도록 하는 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체를 제공하는데 있다.
본 발명의 또 다른 목적은 화면 재배치가 요청된 경우, 미리 보기 기능을 제공하여, 재배치될 웹 페이지를 현재 표시된 웹 페이지와 투명도를 다르게 하여 표시하고, 이로 인해 재배치될 화면의 구성을 쉽게 인지할 수 있도록 하는 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체를 제공하는데 있다.
본 발명의 또 다른 목적은 구간 조절 기능을 통해 자동으로 다른 화면 구성으로 바꿀 수 있도록 하는 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체를 제공하는데 있다.
본 발명의 또 다른 목적은 반응형(Responsive) UI가 해상도(화면 크기)뿐 아니라 사용자의 Interaction으로 제어되면서 화면 재배치가 되는 짧은 시간동안 광고를 제공할 수 있는 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체를 제공하는데 있다.
본 발명의 또 다른 목적은 화면이 재배치되는 동안 Data 로딩 중인 경우는 점진적으로 광고를 사라지게 하여 광고 노출 시간을 늘리거나 효과음을 제공하여 사용자의 주의를 더 끌 수 있도록 하는 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체를 제공하는데 있다.
본 발명의 일 측면에 따르면, 화면 크기에 따른 레이아웃 설정값이 저장된 화면 설정값 저장부, 사용자 명령을 입력받는 사용자 인터페이스부, 상기 사용자 인터페이스부를 통해 화면 재배치 명령이 입력된 경우, 상기 화면 재배치 명령을 해석하여 해당 레이아웃 설정값을 상기 화면 설정값 저장부로부터 획득하는 사용자 명령 인식부, 상기 획득된 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, 그 재구성된 화면에 해당 웹 페이지의 구성블록들을 재배치하여 표시하는 화면 구성 제어부를 포함하는 반응형 사용자 인터페이스 제공 장치가 제공된다.
상기 반응형 사용자 인터페이스 제공 장치는 광고가 저장된 광고 저장부를 더 포함하고, 상기 화면 구성 제어부는 상기 화면의 레이아웃 재구성 시작부터 재배치된 웹페이지가 표시되기 전까지 웹 페이지 구성블록에 기 설정된 광고 스케줄링 알고리즘에 따라 광고를 노출할 수 있다.
상기 화면 구성 제어부는 광고가 노출되는 동안 효과음을 출력할 수 있다.
또한, 상기 화면 구성 제어부는 상기 광고가 표시된 구성블록에 해당하는 데이터 로딩 시 점진적으로 광고를 제거할 수 있다.
또한, 상기 화면 구성 제어부는 화면 재배치 명령이 입력된 경우, 재배치될 웹 페이지를 현재 표시된 웹 페이지와 투명도를 다르게 설정하여 함께 표시할 수 있다.
상기 화면 재배치 명령은 기 설정된 버튼을 이용하여 Normal 모드, Narrow 모드, Mobile 모드 중 적어도 하나의 화면 배치 모드 선택을 통해 입력되거나, 웹 페이지 구간 조절 기능을 통해 입력될 수 있다.
상기 사용자 명령 인식부는 기 설정된 버튼을 이용하여 Normal 모드, Narrow 모드, Mobile 모드 중 하나의 화면 재배치 명령이 입력된 경우, 상기 화면 설정값 저장부로부터 화면 재배치 명령에 해당하는 웹 페이지의 미디어 쿼리를 확인하고, 그 미디어 쿼리를 해석하여 웹페이지 구성블록들의 레이아웃 설정값을 획득할 수 있다.
또한, 상기 사용자 명령 인식부는 웹 페이지 구간 조절 기능을 통해 화면 재배치 명령이 입력된 경우, 조절된 화면 크기와 가장 근사한 화면 배치 모드를 확인하고, 그 확인된 화면 배치 모드에 해당하는 레이아웃 설정값을 획득할 수 있다.
상기 화면 설정값 저장부에는 Normal 모드, Narrow 모드, Mobile 모드 각각에 대한 웹 페이지 구성블록들의 레이아웃 설정값이 미디어 쿼리(media query)로 지정되어 있다.
본 발명의 다른 측면에 따르면, 반응형 사용자 인터페이스 제공 장치가 반응형 사용자 인터페이스를 제공하는 방법에 있어서, (a) 웹 페이지가 표시된 상태에서 화면 재배치 명령이 입력된 경우, 그 화면 재배치 명령을 해석하여 해당 레이아웃 설정값을 획득하는 단계, (b) 상기 획득한 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, 재구성된 화면에 웹 페이지 구성블록들을 재배치하여 표시하는 단계를 포함하는 반응형 사용자 인터페이스 제공 방법이 제공된다.
상기 (a) 단계는, Normal 모드, Narrow 모드, Mobile 모드 중 하나의 화면 재배치 명령이 입력된 경우, 입력된 화면 재배치 명령에 해당하는 화면 배치 모드를 판단하는 단계, 상기 판단된 화면 배치 모드에 해당하는 미디어 쿼리를 해석하여 웹 페이지 구성 블록들의 레이아웃 설정값을 획득하는 단계를 포함할 수 있다.
또한, 상기 (a) 단계는 웹 페이지 구간 조절 기능을 통해 화면 재배치 명령이 입력된 경우, 조절된 화면 크기와 가장 근사한 화면 배치 모드를 확인하는 단계, 상기 확인된 화면 배치 모드에 해당하는 미디어 쿼리를 해석하여 웹 페이지 구성 블록들의 레이아웃 설정값을 획득하는 단계를 포함할 수 있다.
상기 (b) 단계에서, 상기 화면의 레이아웃 재구성 시작부터 재배치된 웹페이지가 표시되기 전까지 웹 페이지 구성 블록에 기 설정된 광고 스케줄링 알고리즘에 따라 광고를 노출할 수 있다.
본 발명의 또 다른 측면에 따르면, 웹 페이지가 표시된 상태에서 화면 재배치 명령이 입력된 경우, 그 화면 재배치 명령을 해석하여 해당 레이아웃 설정값을 획득하는 단계, 상기 획득한 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, 재구성된 화면에 웹 페이지 구성블록들을 재배치하여 표시하는 단계를 포함하는 반응형 사용자 인터페이스 제공 방법을 전자장치에서 판독 가능한 기록매체가 제공된다.
본 발명에 따르면, 반응형 UI가 해상도(화면 크기)뿐 아니라 사용자의 인터렉션(Interaction)으로 제어될 수 있으므로, 화면 재배치가 되는 부분을 쉽게 인지할 수 있다.
또한, 다양한 디바이스 또는 다양한 화면에 맞게 구성되어 있는 레이아웃을 사용자의 인터페이스만으로도 확인할 수 있다.
또한, 화면 재배치가 요청된 경우, 미리 보기 기능을 제공하여, 재배치될 웹 페이지를 현재 표시된 웹 페이지와 투명도를 다르게 하여 표시하고, 이로 인해 재배치될 화면의 구성을 쉽게 인지할 수 있다.
또한, 구간 조절 기능을 통해 자동으로 다른 화면 구성으로 바꿀 수 있다.
또한, 반응형(Responsive) UI가 해상도(화면 크기) 뿐 아니라 사용자의 Interaction으로 제어되면서 화면 재배치가 되는 짧은 시간동안 광고를 제공할 수 있다.
또한, 화면이 재배치되는 동안 Data 로딩 중인 경우는 점진적으로 광고를 사라지게 하여 광고 노출 시간을 늘리거나 효과음을 제공하여 사용자의 주의를 더 끌 수 있다.
도 1은 본 발명에 다른 반응형 사용자 인터페이스 제공 장치의 구성을 나타낸 블럭도.
도 2는 본 발명에 따른 미디어 쿼리에 대한 예시도.
도 3은 본 발명의 일 실시예에 따른 반응형 사용자 인터페이스 제공 장치가 반응형 사용자 인터페이스를 제공하는 방법을 나타낸 흐름도.
도 4는 본 발명에 따른 반응형 사용자 인터페이스를 설명하기 위한 화면 예시도.
도 5는 본 발명의 다른 실시예에 따른 사용자 단말이 반응형 사용자 인터페이스를 제공하는 방법을 나타낸 흐름도.
도 6은 본 발명에 따른 구간 조절 기능을 이용하여 웹 페이지를 재배치하는 방법을 설명하기 위한 화면 예시도.
도 7은 본 발명의 또 다른 실시예에 따른 사용자 단말이 반응형 사용자 인터페이스를 제공하는 방법을 나타낸 흐름도.
도 8 및 도 9는 본 발명에 따른 화면 재구성시 광고를 노출하는 화면 예시도.
본 발명의 전술한 목적과 기술적 구성 및 그에 따른 작용 효과에 관한 자세한 사항은 본 발명의 명세서에 첨부된 도면에 의거한 이하 상세한 설명에 의해 보다 명확하게 이해될 것이다.
도 1은 본 발명에 다른 반응형 사용자 인터페이스 제공 장치의 구성을 나타낸 블럭도, 도 2는 본 발명에 따른 미디어 쿼리에 대한 예시도이다.
도 1을 참조하면, 반응형 사용자 인터페이스 제공 장치(100)는 통신망을 통해 웹 페이지를 제공받는 통신부(110), 사용자 인터페이부(120), 사용자 명령 인식부(130), 화면 설정값 저장부(140), 화면 구성 제어부(150)를 포함한다.
통신부(110)는 반응형 사용자 인터페이스 제공 장치(100)와 웹 페이지를 제공하는 웹 서비스 제공 장치를 통신망을 통해 상호 연결시키는 통신 수단으로서, 예를 들어 이동통신, 위성통신 등의 무선 통신모듈, 인터넷 등의 유선 통신모듈, 와이파이 등의 근거리 무선 통신모듈 등을 포함할 수 있다.
화면 설정값 저장부(140)는 화면 크기에 따른 레이아웃 설정값이 저장되어 있다. 즉, 화면 설정값 저장부(140)에는 웹 페이지가 표시될 화면의 가로 너비 또는 세로 높이에 대한 화면 크기에 따라 화면의 레이아웃 설정값이 저장되어 있다.
웹 페이지는 header 블록, content 블록, sidebar 블록, footer 블록 등의 블록으로 구성되어 있고, 각 웹페이지에는 그 웹 페이지가 표시될 화면의 크기에 따라 각 구성블록들이 표시될 레이아웃 설정값이 미리 설정되어 있다. 따라서, 반응형 사용자 인터페이스 제공 장치(100)는 웹 페이지를 수신한 경우, 웹페이지와 함께 화면 크기에 따른 웹 페이지 구성블록들의 레이아웃 설정값도 함께 수신하고, 그 레이아웃 설정값을 화면 설정값 저장부(140)에 저장한다. 이때, 화면 설정값 저장부(140)에는 화면 크기에 따른 웹페이지 구성블록들의 레이아웃 설정값이 미디어 쿼리(media query)로 지정되어 있다.
또한, 화면 설정값 저장부(140)에는 Normal 모드, Narrow 모드, Mobile 모드 각각에 대한 웹 페이지 구성블록들의 레이아웃 설정값이 저장되어 있다. 이때, 레이아웃 설정값은 미디어 쿼리(media query)로 지정되어 있다.
현재는 스마트폰, 테블릿, 컴퓨터 등 보여지는 기기가 다양하고 보여지는 해상도 또한 다양한데, 이러한 환경에 맞춰 대응하도록 만든 것이 미디어 쿼리이다. 미디어 쿼리는 간단히 말해 기기의 해상도에 따라 보여지는 것을 제어하는 기능을 말하고, 미디어 쿼리를 통해 화면의 레이아웃을 유동적으로 제작을 할 수 있다.
미디어 쿼리는 width(화면의 너비), height(화면의 높이), device-width(단말의 너비), device-height(단말의 높이), orientation(화면의 가로/세로모드), aspect-ratio(화면 비율), device-aspect-ratio(단말기 화면 비율), color(색상 비트수), color-index(색상 테이블 엔트리 수), monochrome(모노크롬 프레임 버퍼의 픽셀당 비트수), resolution(화면 해상도), scan(TV의 스캔 방식), grid(그리드/비트맵 방식 여부) 등의 속성이 있다.
예를 들면, 반응형 사용자 인터페이스 제공 장치(100)는 도 2와 같이 화면 배치 모드에 따라 상대적 값(%)를 지정하여 브라우저의 width 값에 따라 화면의 레이아웃이 유동적으로 변화하게 한다. 이 경우, 반응형 사용자 인터페이스 제공 장치(100)는 @media와 max-width 값을 기준으로 레이아웃 설정값을 알아낼 수 있다. 여기서 화면 배치 모드는 Normal 모드, Narrow 모드, Mobile 모드 등을 말한다.
사용자 인터페이스부(120)는 사용자 명령을 입력받는 입력부 또는 사용자 명령에 따른 결과를 표시하는 표시부로 동작한다.
사용자 인터페이스부(120)가 입력부로 동작하는 경우, 사용자 인터페이스부(120)는 반응형 사용자 인터페이스 제공 장치(100)의 동작 제어를 위한 사용자 요청을 입력받기 위한 수단으로서, 사용자의 조작에 따라서 사용자의 요청을 전기 신호로 변환한다. 입력부는 사용자로부터 문자, 숫자 및 텍스트 정보를 입력받는 키 입력 수단, 마이크 등을 통해 사용자의 음성 또는 오디오 신호를 입력받는 음성 인식 수단, 소정 물체의 촬영을 통해 영상을 획득하는 카메라 등의 영상 획득 수단, RFID 리더기, 코드 리더기 등을 포함할 수 있다. 상기 키 입력 수단은 키보드, 키패드, 터치 스크린 등으로 구현될 수 있다.
사용자 인터페이스부(120)가 표시부로 동작하는 경우, 사용자 인터페이스부(120)는 애플리케이션 구동에 따른 화면 정보를 디스플레이하는 디스플레이 수단, 예를 들어 LCD(Liquid Crystal Display) 또는 OLED(Organic Light Emitting Diodes) 등을 통해 디스플레이 처리할 수 있다.
사용자 명령 인식부(130)는 사용자 인터페이스부(120)를 통해 화면 재배치 명령이 입력된 경우, 화면 재배치 명령을 해석하여 해당 레이아웃 설정값을 화면 설정값 저장부(140)로부터 획득한다.
즉, 사용자는 웹 페이지가 표시된 화면에서 기 설정된 버튼 선택, 화면 터치 등의 방법을 이용하여 현재 표시된 화면의 재배치를 요청하는 화면 재배치 명령을 입력할 수 있다. 여기서, 화면 재배치 명령은 Normal 모드, Narrow 모드, Mobile 모드 등을 포함할 수 있다. 이 경우, 사용자 명령 인식부(130)는 화면 설정값 저장부(140)를 검색하여 현재 표시된 웹 페이지 관련하여 화면 재배치 명령에 해당하는 미디어 쿼리를 확인하고, 그 미디어 쿼리를 해석하여 화면을 재배치하기 위한 웹페이지 구성블록들의 레이아웃 설정값을 획득한다.
예를 들어, 현재 표시된 웹페이지가 Normal 모드인 상태에서, 사용자가Narrow 모드로 화면 재배치 명령을 입력하면, 사용자 명령 인식부(130)는 화면 설정값 저장부(140)를 검색하여 현재 표시된 웹 페이지의 Narrow 모드에 대한 미디어 쿼리를 확인하고, 그 미디어 쿼리를 해석하여 현재 표시된 웹페이지를 Narrow모드 표시하기 위한 구성블록들의 레이아웃 설정값을 획득한다.
또한, 사용자는 웹 페이지가 표시된 화면에서 구간 조절 기능을 이용하여 화면 재배치를 요청하는 화면 재배치 명령을 입력할 수도 있다. 이 경우, 사용자 명령 인식부(120)는 현재 표시된 웹 페이지 관련하여 사용자가 조절한 화면 크기와 가장 근사한 화면 배치 모드를 확인하고, 그 화면 배치 모드에 대한 레이아웃 설정값을 화면 설정값 저장부(140)로부터 획득한다. 즉, 사용자 명령 인식부(130)는 화면 설정값 저장부(140)를 검색하여 확인된 화면 배치 모드에 해당하는 미디어 쿼리를 확인하고, 그 미디어 쿼리를 해석하여 화면을 재배치하기 위한 웹 페이지 구성블록들의 레이아웃 설정값을 획득한다.
화면 구성 제어부(150)는 사용자 명령 인식부(130)에서 획득한 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, 그 재구성된 화면에 해당 웹 페이지의 구성블록들을 재배치하여 표시한다. 즉, 화면 구성 제어부(150)는 레이아웃 설정값에 따라 해당 웹 페이지의 구성블록들을 표시할 화면의 레이아웃을 재구성하고, 그 재구성된 화면에 해당 웹 페이지의 구성블록들을 재배치하여 표시한다. 이때, 화면 구성 제어부(150)는 실제 화면 크기는 변경하지 않고, 웹 페이지를 표시할 레이아웃 크기만을 변경한다.
또한, 화면 구성 제어부(150)는 사용자가 화면 재배치 명령을 입력한 경우, 그 화면 재배치 명령에 따라 재배치될 화면을 현재 표시된 웹 페이지와 투명도를 다르게 표시하여, 재배치될 웹 페이지를 미리 확인할 수 있도록 하는 기능을 제공할 수 있다. 다시 말하면, 화면 구성 제어부(150)는 화면 재배치 명령이 입력된 경우, 현재 표시된 웹 페이지와 투명도를 달리하여 재배치될 웹 페이지를 표시하여, 재배치될 웹 페이지를 미리 확인할 수 있도록 한다.
예를 들어, Narrow 모드에서 mobile 모드로 변할 때, 화면 구성 제어부(150)는 Narrow 모드보다 더 투명하게 mobile 모드의 화면을 구성하여 표시할 수 있다.
본 발명의 다른 측면에 따르면, 반응형 사용자 인터페이스 제공 장치(100)는 광고가 저장된 광고 저장부(160)를 더 포함할 수 있다. 이 경우, 화면 구성 제어부(150)는 화면의 레이아웃 재구성 시작부터 재배치된 웹페이지가 표시되기 전까지 웹 페이지 구성 블록에 기 설정된 광고 스케줄링 알고리즘에 따라 광고를 노출할 수 있다. 여기에서는 반응형 사용자 인터페이스 제공 장치(100)가 광고를 저장하는 것으로 설명하였으나, 반응형 사용자 인터페이스제공 장치(100)는 통신부(110)를 통해 광고를 수신하여 제공할 수도 있다.
화면이 재배치되더라도 화면의 구성블록들은 <div> 태그를 사용하여 블록의 구조를 이루면서 유지되는데, 이들 블록들에 트랜지션 effect를 주고 트랜지션 시간을 늘려서, 블록들이 이동하는 동안 블록 전체를 광고 이미지로 대체시키고 이를 클릭할 경우 해당 광고로 이동할 수 있도록 한다. 즉, 화면 재배치 명령이 입력된 경우, 화면 구성 제어부(150)는 광고가 적용된 CSS를 적용하고, 타이머(timer)로 일정 시간이 경과하면 원래 CSS를 다시 적용하여 재배치된 웹 페이지를 표시한다.
또한, 화면 구성 제어부(150)는 화면의 레이아웃 재구성시, 웹 페이지의 구성블록에 광고를 표시하고, 광고가 표시된 구성블록에 해당하는 데이터 로딩 시 점진적으로 광고를 사라지도록 할 수 있다. 예를 들어, content 블록에서 data를 로드하는 경우, 비어 있는 부분을 광고 이미지로 대체하고 data가 로드되면서 광고 이미지를 점진적으로 제거할 수 있다.
또한, 화면 구성 제어부(150)는 광고가 노출되는 동안 오디오 처리부(170)를 통해 효과음을 출력할 수도 있다. 일반적으로 배경음악은 사용자에게 거부감을 주지만 화면 구성이 바뀌는 상태는 사용자의 액션에 대한 피드백 측면에서 효과음을 사용하면 시간이 길지 않고, 사용자 피드백 측면에서 거부감을 줄일 수 있다. 따라서, 화면 구성 제어부(150)는 화면이 재구성되는 동안 적절한 광고 효과음을 제공할 수 있다.
상기와 같은 반응용 사용자 인터페이스 제공 장치(100)는 사용자 단말일 수 있다. 예를 들면, 노트북, 이동통신 단말, 스마트폰(Smart phone), PMP(Portable Media Player), PDA(Personal Digital Assistant), 타블렛 PC(Tablet PC), 셋탑박스(Set-top box), 스마트 TV 등 다양한 장치가 될 수 있다.
도 3은 본 발명에 따른 반응형 사용자 인터페이스 제공 장치가 반응형 사용자 인터페이스를 제공하는 방법을 나타낸 흐름도, 도 4는 본 발명에 따른 반응형 사용자 인터페이스를 설명하기 위한 화면 예시도이다. 이하에서는 반응형 사용자 인터페이스 제공 장치를 사용자 단말로 칭하여 설명하기로 한다.
도 3을 참조하면, 사용자 단말은 화면에 웹 페이지가 표시된 상태에서(S202), 화면 재배치 명령이 입력되면(S204), 그 화면 재배치 명령을 해석하여 해당 레이아웃 설정값을 획득한다(S206). 즉, 사용자 단말은 Normal 모드, Narrow 모드, Mobile 모드 중 하나의 화면 배치 모드에 대한 화면 재배치 명령이 입력되면, 그 화면 배치 모드를 판단한다. 그런 후, 사용자 단말은 판단된 화면 배치 모드에 해당하는 미디어 쿼리를 해석하여 화면을 재배치하기 위한 웹 페이지 구성 블록들의 레이아웃 설정값을 획득한다.
그런 후, 사용자 단말은 획득한 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고(S208), 재구성된 화면에 웹 페이지 구성블록들을 재배치하여 표시한다(S210).
예를 들어, 현재 웹 페이지가 도 4의 (a) 같이 Normal 모드인 경우를 예로 하여 설명하기로 한다. (a)를 참조하면, Normal 모드 웹 페이지(400a)는 header 블록(410a), content 블록(420a), 2개의 sidebar 블록(430a), footer 블록(440a)으로 구성되어 있다. 이때, 2개의 sidebar 블록(430a)이 content 블록(420a)의 오른쪽의 일정 영역에 표시된다.
사용자가 Narrow 모드 화면 재배치 명령을 입력한 경우, 사용자 단말은 Narrow 모드에 설정된 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, (b)와 재구성된 화면에 웹 페이지를 재배치하여 표시한다. 이때, 실제 화면 크기는 변경되지 않고, 재배치된 웹 페이지가 (b)와 같이 표시된다.
또한, 사용자가 Mobile 모드 화면 재배치 명령을 입력한 경우, 사용자 단말은 Mobile 모드에 설정된 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, (c)와 재구성된 화면에 웹 페이지를 재배치하여 표시한다. 이때, 실제 화면 크기는 변경되지 않고, 재배치된 웹 페이지가 표시된다.
(c)를 참조하면, Mobile 모드 웹 페이지(400c)는 header 블록(410c), content 블록(420c), 2개의 sidebar 블록(430c), footer 블록(440c)이 순서대로 수직방향으로 정렬되어 있다.
도 5는 본 발명의 다른 실시예에 따른 사용자 단말이 반응형 사용자 인터페이스를 제공하는 방법을 나타낸 흐름도, 도 6은 본 발명에 따른 구간 조절 기능을 이용하여 웹 페이지를 재배치하는 방법을 설명하기 위한 화면 예시도이다.
도 5를 참조하면, 사용자 단말은 화면에 웹 페이지가 표시된 상태에서(S602), 웹 페이지 구간 조절 기능을 통해 화면 재배치 명령이 입력되면(S604), 조절된 화면 크기와 가장 근사한 화면 배치 모드를 선택한다(S606).
그런 후, 사용자 단말은 선택된 화면 배치 모드에 해당하는 레이아웃 설정값을 확인하고(S608), 그 레이아웃 설정값에 따라 화면의 레이아웃을 재구성한 후(S610), 재구성된 화면에 웹 페이지 구성블록들을 재배치하여 표시한다(S612).
예를 들어, 도 4의 (a)와 같이 웹 페이지가 표시된 화면에서 도 6과 같이 웹페이지를 선택 및 구간 조절 기능을 이용하여 화면의 크기를 조절하면, 사용자 단말은 조절된 화면 크기로 화면 재배치를 요청하는 화면 재배치 명령이라고 인식한다. 그런 후, 사용자 단말은 사용자가 조절한 화면 크기와 가장 근사한 화면 배치 모드를 확인하고, 그 화면 배치 모드에 대한 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, 그 재구성된 화면에 웹 페이지를 재배치하여 표시한다.
예를 들어, 사용자가 조절한 화면 크기가 Mobile 모드의 화면 크기와 가장 근사한 경우, 사용자 단말은 도 4의 (a)와 같은 화면을 도 4의 (c)와 같이 재배치하여 표시한다.
상기와 같이 사용자 단말은 사용자가 화면 크기를 조절할 때, 화면 배치 모드간 화면이 변화되는 레이아웃 설정값을 확인하고, 그 레이아웃 설정값과 근접한 화면 크기의 조절이 있을 때, 사용자가 조절한 화면 크기를 화면 재배치가 일어날 수 있는 근사한 레이아웃 설정값으로 자동 변경하여, 화면을 재구성한다.
도 7은 본 발명의 또 다른 실시예에 따른 사용자 단말이 반응형 사용자 인터페이스를 제공하는 방법을 나타낸 흐름도, 도 8 및 도 9는 본 발명에 따른 화면 재구성시 광고를 노출하는 화면 예시도이다.
도 7을 참조하면, 사용자 단말은 화면에 웹 페이지가 표시된 상태에서(S802), 화면 재배치 명령이 입력되면(S804), 그 화면 재배치 명령에 해당하는 레이아웃 설정값을 획득한다(S806). 이때, 사용자는 기 설정된 버튼을 이용하여 Normal 모드, Narrow 모드, Mobile 모드 중 적어도 하나의 화면 재배치 명령을 선택하거나, 웹 페이지 구간 조절 기능을 통해 화면 재배치 명령을 입력할 수 있다. 그러면, 사용자 단말은 화면 재배치 명령에 해당하는 레이아웃 설정값을 획득할 수 있다.
단계 S806이 수행되면, 사용자 단말은 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하면서, 웹 페이지 구성 블록에 광고를 노출한다(S808). 이때, 사용자 단말은 기 설정된 광고 스케줄링 알고리즘에 따라 웹 페이지 구성 블록에 광고를 노출시킨다. 그리고 웹 페이지는 header, content, sidebar, footer 등의 블록으로 구성되므로, 사용자 단말은 header블록, content 블록, sidebar 블록, footer 블록중 적어도 하나에 광고를 노출시킬 수 있다.
예를 들면, 사용자 단말은 도 8의 (a)와 같이 content 블록(810)을 광고 이미지를 바꾸고, 블럭이 이동하는 transition 시간을 늘려서 광고를 노출한다.
또한, 사용자 단말은 도 8의 (b)와 같이 content 블록(850)에 해당하는 데이터 로딩(865) 시 점진적으로 광고(860)가 사라지도록 할 수 있다. 즉, content 블록에서 data를 로드하는 경우, 비어 있는 부분을 광고 이미지로 대체하고 data가 로드되면서 광고 이미지를 점진적으로 제거할 수 있다.
단계 S808을 수행하면서, 웹 페이지의 재배치가 완료되면(S810), 사용자 단말은 재배치된 웹 페이지를 표시한다(S812).
예를 들어, 현재 웹 페이지가 도 9의 (a) 같이 Normal 모드인 경우를 예로 하여 설명하기로 한다.
(a)를 참조하면, Normal 모드 웹 페이지(900)는 header블록(910), content블록(920), 2개의 sidebar 블록(930), footer 블록(미도시)로 구성되어 있다.
Normal 모드 웹 페이지(900)에서 사용자가 Narrow 모드 화면 재배치 명령을 입력하면, 사용자 단말은 (c)와 같이 재구성된 웹 페이지를 표시하기 전까지 (b)와 같이 content블록(940)에 광고 이미지를 노출시킬 수 있다.
또한, 본 발명의 또 다른 측면에 따르면, 웹 페이지가 표시된 상태에서 화면 재배치 명령이 입력된 경우, 그 화면 재배치 명령을 해석하여 해당 레이아웃 설정값을 획득하는 단계, 상기 획득한 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, 재구성된 화면에 웹 페이지 구성블록들을 재배치하여 표시하는 단계를 포함하는 반응형 사용자 인터페이스 제공 방법이 프로그램으로 기록된 전자장치에서 판독 가능한 기록매체가 제공된다.
이러한 반응형 사용자 인터페이스 제공 방법은 프로그램으로 작성 가능하며, 프로그램을 구성하는 코드들 및 코드 세그먼트들은 당해 분야의 프로그래머에 의하여 용이하게 추론될 수 있다. 또한, 반응형 사용자 인터페이스 제공 방법에 관한 프로그램은 전자장치가 읽을 수 있는 정보저장매체(Readable Media)에 저장되고, 전자장치에 의하여 읽혀지고 실행될 수 있다.
이와 같이, 본 발명이 속하는 기술분야의 당업자는 본 발명이 그 기술적 사상이나 필수적 특징을 변경하지 않고서 다른 구체적인 형태로 실시될 수 있다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적인 것이 아닌 것으로서 이해해야만 한다. 본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 등가개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.
본 발명은 반응형 UI가 해상도(화면 크기)뿐 아니라 사용자의 인터렉션(Interaction)으로 제어될 수 있도록 하여 화면 재배치가 되는 부분을 쉽게 인지할 수 있도록 하는 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체에 적용될 수 있다.
또한, 본 발명은 반응형(Responsive) UI가 해상도(화면 크기) 뿐 아니라 사용자의 Interaction으로 제어되면서 화면 재배치가 되는 짧은 시간동안 광고를 제공할 수 있는 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체에 적용될 수 있다.
100 : 반응형 사용자 인터페이스 제공 장치
110 : 통신부 120 : 사용자 인터페이스부
130 : 사용자 명령 인식부 140 : 화면 설정값 저장부
150 : 화면 구성 제어부 160 : 광고 저장부
170 : 오디오 처리부

Claims (14)

  1. 화면 크기에 따른 레이아웃 설정값이 저장된 화면 설정값 저장부;
    사용자 명령을 입력받는 사용자 인터페이스부;
    상기 사용자 인터페이스부를 통해 화면 재배치 명령이 입력된 경우, 상기 화면 재배치 명령을 해석하여 해당 레이아웃 설정값을 상기 화면 설정값 저장부로부터 획득하는 사용자 명령 인식부; 및
    상기 획득된 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, 그 재구성된 화면에 해당 웹 페이지의 구성블록들을 재배치하여 표시하는 화면 구성 제어부;
    를 포함하는 반응형 사용자 인터페이스 제공 장치.
  2. 제1항에 있어서,
    광고가 저장된 광고 저장부를 더 포함하고,
    상기 화면 구성 제어부는 상기 화면의 레이아웃 재구성 시작부터 재배치된 웹페이지가 표시되기 전까지 웹 페이지 구성블록에 기 설정된 광고 스케줄링 알고리즘에 따라 광고를 노출하는 것을 특징으로 하는 반응형 사용자 인터페이스 제공 장치.
  3. 제1항에 있어서,
    상기 화면 구성 제어부는 광고가 노출되는 동안 효과음을 출력하는 것을 특징으로 하는 반응형 사용자 인터페이스 제공 장치.
  4. 제1항에 있어서,
    상기 화면 구성 제어부는 상기 광고가 표시된 구성블록에 해당하는 데이터 로딩시 점진적으로 광고를 제거하는 것을 특징으로 하는 반응형 사용자 인터페이스 제공 장치.
  5. 제1항에 있어서,
    상기 화면 구성 제어부는 화면 재배치 명령이 입력된 경우, 재배치될 웹 페이지를 현재 표시된 웹 페이지와 투명도를 다르게 설정하여 함께 표시하는 것을 특징으로 하는 반응형 사용자 인터페이스 제공 장치.
  6. 제1항에 있어서,
    상기 화면 재배치 명령은 기 설정된 버튼을 이용하여 Normal 모드, Narrow 모드, Mobile 모드 중 적어도 하나의 화면 배치 모드 선택을 통해 입력되거나, 웹 페이지 구간 조절 기능을 통해 입력된 것을 특징으로 하는 반응형 사용자 인터페이스 제공 장치.
  7. 제1항에 있어서,
    상기 사용자 명령 인식부는 기 설정된 버튼을 이용하여 Normal 모드, Narrow 모드, Mobile 모드 중 하나의 화면 재배치 명령이 입력된 경우, 상기 화면 설정값 저장부로부터 화면 재배치 명령에 해당하는 웹 페이지의 미디어 쿼리를 확인하고, 그 미디어 쿼리를 해석하여 웹페이지 구성블록들의 레이아웃 설정값을 획득하는 것을 특징으로 하는 반응형 사용자 인터페이스 제공 장치.
  8. 제1항에 있어서,
    상기 사용자 명령 인식부는 웹 페이지 구간 조절 기능을 통해 화면 재배치 명령이 입력된 경우, 조절된 화면 크기와 가장 근사한 화면 배치 모드를 확인하고, 그 확인된 화면 배치 모드에 해당하는 레이아웃 설정값을 획득하는 것을 특징으로 하는 반응형 사용자 인터페이스 제공 장치.
  9. 제1항에 있어서,
    상기 화면 설정값 저장부에는 Normal 모드, Narrow 모드, Mobile 모드 각각에 대한 웹 페이지 구성블록들의 레이아웃 설정값이 미디어 쿼리(media query)로 지정되어 있는 것을 특징으로 하는 반응형 사용자 인터페이스 제공 장치.
  10. 반응형 사용자 인터페이스 제공 장치가 반응형 사용자 인터페이스를 제공하는 방법에 있어서,
    (a) 웹 페이지가 표시된 상태에서 화면 재배치 명령이 입력된 경우, 그 화면 재배치 명령을 해석하여 해당 레이아웃 설정값을 획득하는 단계; 및
    (b) 상기 획득한 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, 재구성된 화면에 웹 페이지 구성블록들을 재배치하여 표시하는 단계;
    를 포함하는 반응형 사용자 인터페이스 제공 방법.
  11. 제10항에 있어서,
    상기 (a) 단계는,
    Normal 모드, Narrow 모드, Mobile 모드 중 하나의 화면 재배치 명령이 입력된 경우, 입력된 화면 재배치 명령에 해당하는 화면 배치 모드를 판단하는 단계; 및
    상기 판단된 화면 배치 모드에 해당하는 미디어 쿼리를 해석하여 웹 페이지 구성 블록들의 레이아웃 설정값을 획득하는 단계를 포함하는 것을 특징으로 하는 반응형 사용자 인터페이스 제공 방법.
  12. 제10항에 있어서,
    상기 (a) 단계는,
    웹 페이지 구간 조절 기능을 통해 화면 재배치 명령이 입력된 경우, 조절된 화면 크기와 가장 근사한 화면 배치 모드를 확인하는 단계; 및
    상기 확인된 화면 배치 모드에 해당하는 미디어 쿼리를 해석하여 웹 페이지 구성 블록들의 레이아웃 설정값을 획득하는 단계를 포함하는 것을 특징으로 하는 반응형 사용자 인터페이스 제공 방법.
  13. 제10항에 있어서,
    상기 (b) 단계는,
    상기 화면의 레이아웃 재구성 시작부터 재배치된 웹페이지가 표시되기 전까지 웹 페이지 구성 블록에 기 설정된 광고 스케줄링 알고리즘에 따라 광고를 노출하는 것을 특징으로 하는 반응형 사용자 인터페이스 제공 방법.
  14. 웹 페이지가 표시된 상태에서 화면 재배치 명령이 입력된 경우, 그 화면 재배치 명령을 해석하여 해당 레이아웃 설정값을 획득하는 단계; 및
    상기 획득한 레이아웃 설정값에 따라 화면의 레이아웃을 재구성하고, 재구성된 화면에 웹 페이지 구성블록들을 재배치하여 표시하는 단계를 포함하는 반응형 사용자 인터페이스 제공 방법이 프로그램으로 기록된 전자장치에서 판독 가능한 기록매체.
KR20120089492A 2012-08-16 2012-08-16 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체 KR20140023534A (ko)

Priority Applications (5)

Application Number Priority Date Filing Date Title
KR20120089492A KR20140023534A (ko) 2012-08-16 2012-08-16 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체
US14/396,319 US20150088669A1 (en) 2012-08-16 2013-07-31 Apparatus and method for providing responsive user interface and electronic device-readable recording medium therefor
CN201710532310.1A CN107273344A (zh) 2012-08-16 2013-07-31 提供响应用户界面的装置和方法
PCT/KR2013/006917 WO2014027773A1 (ko) 2012-08-16 2013-07-31 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체
CN201380023353.7A CN104272237B (zh) 2012-08-16 2013-07-31 提供响应用户界面的装置和方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR20120089492A KR20140023534A (ko) 2012-08-16 2012-08-16 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체

Publications (1)

Publication Number Publication Date
KR20140023534A true KR20140023534A (ko) 2014-02-27

Family

ID=50101315

Family Applications (1)

Application Number Title Priority Date Filing Date
KR20120089492A KR20140023534A (ko) 2012-08-16 2012-08-16 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체

Country Status (4)

Country Link
US (1) US20150088669A1 (ko)
KR (1) KR20140023534A (ko)
CN (2) CN104272237B (ko)
WO (1) WO2014027773A1 (ko)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20160025127A (ko) * 2014-08-26 2016-03-08 삼성에스디에스 주식회사 다국어 지원을 위한 웹 서비스 시스템 및 방법
WO2016171362A1 (ko) * 2015-04-22 2016-10-27 하영식 웹 페이지 출력방식 변경 장치 및 방법
KR20160138345A (ko) * 2015-05-25 2016-12-05 삼성전자주식회사 웹 페이지에 기초한 정보 제공 방법 및 장치
WO2017150751A1 (ko) * 2016-03-04 2017-09-08 엄지홍 배경 프레임과 반투명 레이아웃을 이용한 화면 구성 방법
KR20230073900A (ko) * 2021-11-19 2023-05-26 조영욱 웹페이지 제작 서비스 제공 방법 및 그 전자장치
KR102608077B1 (ko) * 2022-10-05 2023-11-30 조영욱 다양한 해상도에 대응하는 ai 기반의 웹페이지 제작 서비스 제공 방법 및 그 전자장치

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9792014B2 (en) 2013-03-15 2017-10-17 Microsoft Technology Licensing, Llc In-place contextual menu for handling actions for a listing of items
JP2015090570A (ja) * 2013-11-06 2015-05-11 ソニー株式会社 情報処理装置および制御方法
US20160132301A1 (en) 2014-11-06 2016-05-12 Microsoft Technology Licensing, Llc Programmatic user interface generation based on display size
US10949075B2 (en) 2014-11-06 2021-03-16 Microsoft Technology Licensing, Llc Application command control for small screen display
WO2016190584A1 (ko) * 2015-05-25 2016-12-01 삼성전자 주식회사 웹 페이지에 기초한 정보 제공 방법 및 장치
CN109213782B (zh) * 2018-10-31 2020-12-08 新华三大数据技术有限公司 搜索界面的配置、显示方法、装置及通信设备
US11907023B2 (en) * 2021-04-23 2024-02-20 Ricoh Company, Ltd. Information processing system, information processing apparatus, terminal device, and display method

Family Cites Families (32)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6034661A (en) * 1997-05-14 2000-03-07 Sony Corporation Apparatus and method for advertising in zoomable content
CN1306434C (zh) * 2000-11-20 2007-03-21 侯世昌 网络上自动播放声音广告的方法
US20020077900A1 (en) * 2000-12-14 2002-06-20 Thompson Tiffany A. Internet protocol-based interstitial advertising
CN1902653A (zh) * 2003-11-03 2007-01-24 Google公司 使广告能够跟随用户至其他网页的系统和方法
DE10351351B4 (de) * 2003-11-04 2007-03-22 Siemens Ag Verfahren und System zur dynamischen Generierung von User Interfaces
US20050119935A1 (en) * 2003-12-01 2005-06-02 International Business Machines Corporation System and method for managing the display of unsolicited instant web advertisements
US20050216846A1 (en) * 2004-03-26 2005-09-29 Mika Kalenius Normal versus small screen rendering with given URL
US7599989B2 (en) * 2005-01-24 2009-10-06 Microsoft Corporation System and method for gathering and reporting screen resolutions of attendees of a collaboration session
WO2006120493A1 (en) * 2005-05-11 2006-11-16 Nokia Corporation User-defined changing of page representations
US7890881B1 (en) * 2005-07-29 2011-02-15 Adobe Systems Incorporated Systems and methods for a fold preview
US9317302B2 (en) * 2006-01-30 2016-04-19 International Business Machines Corporation Method and algorithm for content layout across diverse and dynamic displays
TW200820020A (en) * 2006-10-14 2008-05-01 Era Digital Media Co Automatically collapsing advertising module
CN101295302B (zh) * 2007-04-25 2014-04-09 百度在线网络技术（北京）有限公司 广告投放系统及方法
KR100844070B1 (ko) * 2007-05-09 2008-07-07 엘지전자 주식회사 탭브라우징 이동통신 단말기 및 그 제어방법
US8516365B2 (en) * 2007-06-15 2013-08-20 Microsoft Corporation Dynamically laying out images and associated text using pre-defined layouts
CN101339549A (zh) * 2007-07-03 2009-01-07 周磊 一种广告方法和系统
US7953275B1 (en) * 2007-08-20 2011-05-31 Adobe Systems Incorporated Image shader for digital image modification
US7760405B2 (en) * 2007-08-30 2010-07-20 Business Objects Software Ltd Apparatus and method for integrating print preview with data modeling document editing
KR100962441B1 (ko) * 2008-01-15 2010-06-14 포항공과대학교 산학협력단 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스화면 편집 방법 및 장치
US20090199127A1 (en) * 2008-01-31 2009-08-06 Microsoft Corporation Previewing target display areas
KR20090124383A (ko) * 2008-05-30 2009-12-03 주식회사 현대오토넷 능동형 에이브이엔 시스템 및 그 제어방법
CN101365117B (zh) * 2008-09-18 2010-12-29 中兴通讯股份有限公司 一种自定义分屏模式的方法
US9087337B2 (en) * 2008-10-03 2015-07-21 Google Inc. Displaying vertical content on small display devices
US8738431B2 (en) * 2008-11-20 2014-05-27 Qualcomm Incorporated Mobile advertising syndication
JP2010165201A (ja) * 2009-01-16 2010-07-29 Canon Inc レイアウト装置、レイアウト方法、及びレイアウトプログラム
CN101996206B (zh) * 2009-08-11 2013-07-03 阿里巴巴集团控股有限公司 一种呈现网页页面的方法、装置及系统
CN101996068A (zh) * 2009-08-11 2011-03-30 上海汉光知识产权数据科技有限公司 可预存使用模式的动态调整用户界面元素的系统
US20110106615A1 (en) * 2009-11-03 2011-05-05 Yahoo! Inc. Multimode online advertisements and online advertisement exchanges
US20110209046A1 (en) * 2010-02-11 2011-08-25 Zheng Huang Optimizing web content display on an electronic mobile reader
CN107102721A (zh) * 2010-04-23 2017-08-29 意美森公司 用于提供触觉效果的系统和方法
KR101143458B1 (ko) * 2010-08-30 2012-05-23 유상규 휴대폰 디스플레이 인식에 따른 휴대폰의 인터넷 브라우징 모드 제어 방법 및 그 인터넷 브라우징 모드 제어 시스템
US20150234798A1 (en) * 2012-06-01 2015-08-20 Google Inc. System and method for changing a web ui application appearance based on state through css selector cascading

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20160025127A (ko) * 2014-08-26 2016-03-08 삼성에스디에스 주식회사 다국어 지원을 위한 웹 서비스 시스템 및 방법
WO2016171362A1 (ko) * 2015-04-22 2016-10-27 하영식 웹 페이지 출력방식 변경 장치 및 방법
KR20160138345A (ko) * 2015-05-25 2016-12-05 삼성전자주식회사 웹 페이지에 기초한 정보 제공 방법 및 장치
WO2017150751A1 (ko) * 2016-03-04 2017-09-08 엄지홍 배경 프레임과 반투명 레이아웃을 이용한 화면 구성 방법
KR20230073900A (ko) * 2021-11-19 2023-05-26 조영욱 웹페이지 제작 서비스 제공 방법 및 그 전자장치
KR102608077B1 (ko) * 2022-10-05 2023-11-30 조영욱 다양한 해상도에 대응하는 ai 기반의 웹페이지 제작 서비스 제공 방법 및 그 전자장치

Also Published As

Publication number Publication date
CN104272237B (zh) 2017-10-24
US20150088669A1 (en) 2015-03-26
WO2014027773A1 (ko) 2014-02-20
CN107273344A (zh) 2017-10-20
CN104272237A (zh) 2015-01-07

Similar Documents

Publication Publication Date Title
KR20140023534A (ko) 반응형 사용자 인터페이스 제공 장치, 방법, 및 그에 대한 전자장치에서 판독 가능한 기록매체
US11348201B2 (en) Electronic device having rollable display and method of controlling the same
EP2897028B1 (en) Display device and method for controlling the same
US20180285471A1 (en) Page caching method and apparatus
RU2409834C2 (ru) Интерфейс пользователя для различных дисплеев
US9626077B2 (en) Method, system for updating dynamic map-type graphic interface and electronic device using the same
US20120127192A1 (en) Method and apparatus for selective display
US20150061968A1 (en) User terminal apparatus, method for controlling user terminal apparatus thereof, and expanded display system
US20160147429A1 (en) Device for resizing window, and method of controlling the device to resize window
US8832591B2 (en) Grid display device and grid display method in mobile terminal
KR102410472B1 (ko) 웹 페이지에 기초한 정보 제공 방법 및 장치
KR101952171B1 (ko) 전자기기 및 그의 웹 히스토리 표시 방법
KR20150072819A (ko) 전자장치에서 디지털 콘텐츠를 디스플레이하기 위한 방법 및 장치
CN112004122B (zh) 电子装置以及其控制方法
EP3716036A1 (en) Display apparatus and control method thereof
US8018519B2 (en) Camera module and method for personalizing on-screen display interface
KR101638963B1 (ko) 디스플레이 장치 및 그 제어 방법
CN110909274B (zh) 页面浏览方法、装置及电子设备
JP5954936B2 (ja) 携帯端末装置
US20140223339A1 (en) Method and electronic device for controlling dynamic map-type graphic interface
US20160299673A1 (en) Display apparatus and display method
KR101198231B1 (ko) 휴대단말기에서의 웹 페이지 표시방법 및 이를 위한휴대단말기
JP6070829B2 (ja) 表示制御装置、情報処理装置、表示制御方法、表示制御プログラム及び情報処理システム
KR20190055489A (ko) 전자 장치 및 그 제어 방법
US20130176289A1 (en) Display switch method and portable device thereof

Legal Events

Date Code Title Description
A201 Request for examination
WITB Written withdrawal of application