KR20150032093A - 사용자 인터페이스를 편집하는 단말기 및 방법 - Google Patents

사용자 인터페이스를 편집하는 단말기 및 방법 Download PDF

Info

Publication number
KR20150032093A
KR20150032093A KR20130112135A KR20130112135A KR20150032093A KR 20150032093 A KR20150032093 A KR 20150032093A KR 20130112135 A KR20130112135 A KR 20130112135A KR 20130112135 A KR20130112135 A KR 20130112135A KR 20150032093 A KR20150032093 A KR 20150032093A
Authority
KR
South Korea
Prior art keywords
cell
grid
item
editing
user
Prior art date
Application number
KR20130112135A
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 KR20130112135A priority Critical patent/KR20150032093A/ko
Priority to US14/487,970 priority patent/US20150082211A1/en
Publication of KR20150032093A publication Critical patent/KR20150032093A/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/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]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/33—Intelligent editors
    • 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

Abstract

사용자 인터페이스를 편집하는 단말기는 사용자의 입력을 수신하는 입력부; 사용자의 입력에 따라 편집 가능한 그리드를 제공하고, 그리드에 연결할 그래픽 아이템 및 특정 기능을 매핑하는 UI 편집 모듈; 및 UI 편집 모듈에 의해 구성된 UI를 표시하는 표시부를 포함한다. 이에 따라, 단말기 상의 UI를 사용자의 요구 및 취향에 따라 다양하게 편집할 수 있다.

Description

사용자 인터페이스를 편집하는 단말기 및 방법{TERMINAL AND METHOD FOR EDITING USER INTERFACE}
본 발명은 사용자 인터페이스를 편집하는 단말기 및 방법에 관한 것으로서, 더욱 상세하게는 사용자가 사용자 인터페이스를 다양하게 편집할 수 있는 단말기 및 방법에 관한 것이다.
최근 스마트 폰이 발전함에 따라 사용자들은 스마트 폰 상에서 다양한 기능들을 실행한다. 또한, 스마트 폰 뿐만 아니라 내비게이션, 태블릿 컴퓨터 등 터치 스크린 기능이 결합된 모바일 장치가 대중화되고 있다.
이러한 모바일 장치에서 메뉴 화면이나 대기 화면, 리스트 및 플레이어나 뷰어 같은 사용자 인터페이스(user interface; 이하 UI) 화면은 팝업 창, 아이콘 또는 텍스트 메뉴로 소프트웨어적으로 미리 프로그램되어 있기 때문에 사용자가 임의로 UI 화면을 바꿀 수 없었다.
다만, 제조사가 정한 범위 내에서 메뉴 화면 등과 같은 일부 기능 내에서 해당 아이콘의 변경과 같이 UI를 설정할 수는 있다. 그러나, 이미 정해져 있는 특정 사이즈의 셀(cell)을 선택한 후 해당 셀에 대해서만 그래픽적 요소를 적용하거나, 이미 설정된 그리드의 레이아웃 중 하나를 선택하여 제한된 레이아웃 내에서만 그래픽적 편집이 가능하였다.
따라서, UI 구성에 디자인적 한계가 있으므로, 사용자의 요구 및 취향에 따라 UI를 다양하게 편집할 수 있는 기능이 요구된다.
이에, 본 발명의 기술적 과제는 이러한 점에서 착안된 것으로 본 발명의 목적은 UI를 다양하게 편집할 수 있는 단말기를 제공하는 것이다.
본 발명의 다른 목적은 상기 단말기에서 UI를 편집하는 방법을 제공하는 것이다.
상기한 본 발명의 목적을 실현하기 위한 일 실시예에 따른 사용자 인터페이스를 편집하는 단말기는, 사용자의 입력을 수신하는 입력부; 상기 사용자의 입력에 따라 편집 가능한 그리드를 제공하고, 상기 그리드에 연결할 그래픽 아이템 및 특정 기능을 매핑하는 UI 편집 모듈; 및 상기 UI 편집 모듈에 의해 구성된 UI를 표시하는 표시부를 포함한다.
본 발명의 실시예에서, 상기 UI 편집 모듈은, 상기 사용자의 입력에 따라 상기 그리드를 편집하고, 그래픽 아이템을 매핑하는 그리드 관리부; 및 상기 그리드 관리부에 의해 구성된 상기 그리드에 링크된 기능을 실행하는 링크 실행부를 포함할 수 있다.
본 발명의 실시예에서, 상기 그리드 관리부는, 상기 그리드의 레이아웃을 처리하여 편집 가능한 셀 단위로 구분하는 그리드 레이아웃 처리부; 및 상기 각 셀의 그래픽적 요소를 부가하는 그래픽 처리부를 포함할 수 있다.
본 발명의 실시예에서, 상기 그리드 레이아웃 처리부는, 상기 그리드의 셀들을 병합하는 셀 병합부; 상기 그리드의 셀을 분할하는(split) 셀 분할부; 및 상기 그리드의 셀 간격을 조절하는 셀 간격 조절부를 포함할 수 있다.
본 발명의 실시예에서, 상기 그래픽 처리부는, 제1 셀의 아이템을 제2 셀로 복사할 수 있다.
본 발명의 실시예에서, 상기 그래픽 처리부는, 상기 아이템이 위치하는 영역에 포함되는 적어도 두 개의 셀들 중 상기 아이템이 차지하는 비율이 가장 높은 셀에 상기 아이템을 복사할 수 있다.
본 발명의 실시예에서, 상기 그래픽 처리부는, 제1 셀의 아이템을 제2 셀로 이동할 수 있다.
본 발명의 실시예에서, 상기 각 셀은 배경 이미지 층, 꾸미기 층 및 프레임 층 중 적어도 하나의 그래픽층과 링크 층으로 구성될 수 있다.
본 발명의 실시예에서, 상기 그래픽 처리부는, 편집되는 셀을 포커싱하고, 상기 셀이 상기 표시부에 모두 표시될 수 있도록 화면을 자동으로 스크롤할 수 있다.
본 발명의 실시예에서, 상기 표시부는, 상기 사용자의 입력을 감지하는 터치 인식부를 포함할 수 있다.
상기한 본 발명의 목적을 실현하기 위한 다른 실시예에 따른 사용자 인터페이스를 편집하는 방법은, 사용자의 입력에 따른 UI 편집 기능을 실행하는 단계; 셀 단위의 그리드(grid)를 제공하는 단계; 사용자의 입력에 따라 상기 그리드를 편집하는 단계; 및 상기 편집된 그리드에 그래픽 아이템 및 특정 기능을 매핑하는 단계를 포함한다.
본 발명의 실시예에서, 상기 사용자 인터페이스를 편집하는 방법은, 상기 편집된 그리드 및 상기 특정 기능을 저장하는 단계를 더 포함할 수 있다.
본 발명의 실시예에서, 상기 그리드를 편집하는 단계는, 상기 그리드의 셀들을 병합하는 단계를 포함할 수 있다.
본 발명의 실시예에서, 상기 그리드를 편집하는 단계는, 상기 그리드의 셀을 분할하는 단계를 포함할 수 있다.
본 발명의 실시예에서, 상기 그리드를 편집하는 단계는, 상기 그리드의 셀을 분할하는 단계를 포함할 수 있다.
본 발명의 실시예에서, 상기 그리드를 편집하는 단계는, 상기 그리드의 셀 간격을 조절하는 단계를 포함할 수 있다.
본 발명의 실시예에서, 상기 편집된 그리드에 그래픽 아이템 및 특정 기능을 매핑하는 단계는, 제1 셀의 아이템을 제2 셀로 복사하는 단계를 포함할 수 있다.
본 발명의 실시예에서, 상기 제1 셀의 아이템을 제2 셀로 복사하는 단계는, 상기 아이템이 위치하는 영역에 포함되는 적어도 두 개의 셀들 중 상기 아이템이 차지하는 비율이 가장 높은 셀에 상기 아이템을 복사할 수 있다.
본 발명의 실시예에서, 상기 편집된 그리드에 그래픽 아이템 및 특정 기능을 매핑하는 단계는, 제1 셀의 아이템을 제2 셀로 이동하는 단계를 포함할 수 있다.
본 발명의 실시예에서, 상기 편집된 그리드에 그래픽 아이템 및 특정 기능을 매핑하는 단계는, 편집되는 셀이 상기 표시부에 모두 표시될 수 있도록 화면을 자동으로 스크롤하는 단계를 포함할 수 있다.
이와 같은 사용자 인터페이스를 편집하는 단말기 및 방법에 따르면, UI를 편집하기 위한 그리드 레이아웃을 선택하는 기능 및 셀을 그래픽적으로 꾸미는 기능을 제공하여 사용자가 효율적으로 UI를 편집할 수 있다. 따라서, 사용자의 요구 및 취향에 따라 다양한 디자인의 UI 구성이 가능하다.
도 1은 본 발명의 일 실시예에 따른 단말기의 블록도이다.
도 2는 도 1의 단말기에서 그리드 셀의 병합 모드를 보여주는 화면들이다.
도 3은 도 1의 단말기에서 그리드 셀의 분할 모드를 보여주는 화면들이다.
도 4는 도 1의 단말기에서 그리드 셀의 셀 간격 조절 모드를 보여주는 화면들이다.
도 5는 본 발명의 일 실시예에 따른 사용자 인터페이스를 편집하는 방법의 순서도이다.
도 6 및 도 7은 도 1의 단말기에서 셀의 그래픽적 요소의 편집을 보여주는 화면들이다.
도 8은 셀의 그래픽적 요소의 레이어를 보여주는 개념도이다.
도 9는 셀 포커스의 자동 스크롤을 보여주는 개념도이다.
이하, 도면들을 참조하여 사용자 인터페이스를 편집하는 단말기 및 방법의 바람직한 실시예들을 보다 상세하게 설명하기로 한다.
도 1은 본 발명의 일 실시예에 따른 단말기의 블록도이다. 도 2는 도 1의 단말기에서 그리드 셀의 병합 모드를 보여주는 화면들이다. 도 3은 도 1의 단말기에서 그리드 셀의 분할 모드를 보여주는 화면들이다. 도 4는 도 1의 단말기에서 그리드 셀의 셀 간격 조절 모드를 보여주는 화면들이다.
도 1을 참조하면, 본 발명에 따른 단말기(1, terminal)는 사용자의 입력을 수신하여 이에 따른 이벤트를 감지하는 입력부(10), 사용자 인터페이스(user interface; 이하 UI)의 편집 기능을 제공하는 UI 편집 모듈(30) 및 화면을 표시하는 표시부(50)를 포함한다.
상기 단말기(1)는 고정되거나 이동성을 가질 수 있으며, UE(user equipment), MS(mobile station), MT(mobile terminal), UT(user terminal), SS(subscriber station), 무선기기(wireless device), PDA(personal digital assistant), 무선 모뎀(wireless modem), 휴대기기(handheld device) 등 다른 용어로 불릴 수 있다.
상기 단말기(1)는 무선 통신을 지원하는 장치로서, 스마트 폰, 휴대 전화, 태블릿 컴퓨터, 노트북, 넷북, 피디에이(PDA), 피엠피(PMP), 피에스피(PSP), 엠피쓰리(MP3) 플레이어, 이북(e-book) 리더, 내비게이션, 스마트 카메라, 전자사전, 전자시계, 게임기 등 다양한 형태의 모바일(mobile) 장치뿐만 아니라 데스크 탑 컴퓨터, 스마트 TV, 프린터, 팩스 등의 모든 통신 기능이 부가된 전자 장치를 포함할 수 있다.
상기 단말기(1)는 운영체제(Operation System; OS)를 기반으로 다양한 응용 프로그램을 실행할 수 있다. 상기 운영체제는 응용 프로그램이 단말기의 하드웨어를 사용할 수 있도록 하기 위한 시스템 프로그램으로서, 안드로이드 OS, iOS, 윈도우 모바일 OS, 바다 OS, 심비안 OS, 블랙베리 OS 등 모바일 컴퓨터 운영체제 및 윈도우 계열, 리눅스 계열, 유닉스 계열, MAC, AIX, HP-UX 등 컴퓨터 운영체제를 모두 포함할 수 있다.
상기 응용 프로그램은 단말 장치를 이용하여 특정한 작업을 수행할 수 있도록 개발된 프로그램으로서, 각종 애플리케이션 및 서비스 객체뿐 아니라 게임, 동영상, 사진 등의 각종 멀티미디어 컨텐츠(contents) 또는 상기 멀티미디어 컨텐츠를 실행하는 이미지 뷰어, 동영상 재생기 등의 실행 프로그램을 모두 포함할 수 있다.
상기 단말기(1)는 상기 표시부(50)를 통해 응용 프로그램을 표시하거나 사용자에게 UI를 제공할 수 있다. 상기 표시부(50)는 액정 디스플레이(Liquid Crystal Display; LCD) 패널, 플라즈마 디스플레이 패널(Plasma Display Panel; PDP), 유기발광 다이오드(Organic Light-Emitting Diode; OLED) 디스플레이 패널 등을 포함할 수 있다.
또한, 사용자 입력을 처리하기 위하여 터치 스크린 기능이 상기 표시부(50)에 포함되거나 별도의 터치 패드 장치로 제공될 수 있다. 이와 다르게, 상기 단말기(1)는 상기 표시부(50)와 별도로 형성되어 사용자의 입력을 받는 키패드 등의 입력부(미도시)를 포함할 수도 있다.
상기 UI 편집 모듈(30)은 그리드 관리부(300) 및 링크 실행부(400)를 포함한다. 상기 UI 편집 모듈(30)은 상기 단말기(1)에 내장된 모듈일 수도 있으며, 상기 단말기(1)에 설치된 애플리케이션의 형태일 수도 있다. 상기 UI 편집 모듈(30)은 효율적인 편집을 위해 편집 툴(tool) 인터페이스를 상기 표시부(50)를 통해 제공할 수 있다.
상기 그리드 관리부(300)는 UI를 편집하기 위한 일체의 메뉴 및 인터페이스를 사용자에게 제공하고, 사용자는 이를 이용하여 직관적으로 UI의 레이아웃 및 그래픽을 디자인할 수 있다. 본 발명에서 UI는 애플리케이션의 아이콘(icon), 위젯(widgets), 썸네일(thumbnail), 홈 스크린 화면 등을 모두 포함한다.
상기 그리드 관리부(300)는 사용자의 입력에 대응하는 이벤트에 따라 그리드(grid)를 제공하고, 상기 그리드를 편집 가능한 셀(cell) 단위로 구분하고(separate), 상기 각 셀의 그래픽적 요소를 처리한다. 이를 위해, 상기 그리드 관리부(300)는 상기 그리드의 레이아웃을 처리하여 편집 가능한 셀 단위로 구분하는 그리드 레이아웃 처리부(310) 및 상기 각 셀의 그래픽적 요소를 부가하는 그래픽 처리부(330)를 포함한다.
상기 그리드 레이아웃 처리부(310)는 상기 그리드의 셀 병합 모드, 셀 분할 모드, 셀 간격 조절 모드를 제공하고, 각각의 태스크(task)를 실행하기 위한 셀 병합부(311), 셀 분할부(313) 및 셀 간격 조절부(315)를 포함한다. 상기 셀 병합 모드, 상기 셀 분할 모드, 상기 셀 간격 조절 모드는 각각 다른 사용자 입력에 따라 실행될 수 있다.
우선 셀 병합 모드를 설명하기 위해 도 2를 참조하면, 그리드의 레이아웃을 편집하기 위해 제공되는 화면(500)에는 그리드(550)가 제공된다. 예를 들어, 상기 그리드는 6 X 8의 셀들로 이루어진다. 또한, 편집에 필요한 각종 메뉴가 제공되는데, 병합 메뉴(510), 분할 메뉴(520), 슬라이더(570), 취소 메뉴(530) 및 저장 메뉴(540) 등이 제공된다. 그러나 상기 그리드의 행렬 수 및 상기 메뉴들은 예시에 불과하며 필요에 따라 삭제, 변경, 추가가 가능하다.
도 2(a)를 참조하면, 사용자의 제1 입력(I11)에 따른 이벤트에 의해 셀들을 병합한다. 예를 들어, 상기 제1 입력(I11)은 드래그(drag)일 수 있다. 셀들을 드래그 시, 첫번째 선택 셀과 마지막 선택 셀까지 대각선으로 이었을 때, 상기 대각선을 포함하는 사각형 내부의 셀들이 병합될 수 있다. 도 2(a)에서 제1 입력(I11)에 대응하는 셀들이 병합되어 도 2(b)의 A 셀을 구성한다. 또한, 도 2(b)에서 제1 입력(I12)에 대응하는 셀들이 병합되어 도 2(c)의 B 셀을 구성한다.
마찬가지로, 도 2(c)에서 제1 입력(I13)에 대응하는 셀들이 병합되어 도 2(d)의 C 셀을 구성한다. 결과적으로, 도 2(d)는 셀 병합 태스크가 완료된 화면으로서, 상기 그리드(550)는 각각 편집 가능한 A 셀, B 셀, C 셀로 구분되는 레이아웃을 형성한다.
도 2에서는 사용자의 드래그 입력에 따라 셀들을 병합하였으나, 상기 입력은 이벤트를 생성하는 인터페이스로서, 다양하게 채용할 수 있다. 이와 같이, 사용자는 제공되는 그리드에 제약받지 않고, 직관적인 조작으로 그리드를 병합하여 다양한 그리드의 레이아웃을 디자인할 수 있다.
셀 분할(split) 모드를 설명하기 위해 도 3를 참조하면, 그리드의 레이아웃을 편집하기 위해 제공되는 화면(500)에는 셀로 분할된 편집 화면(560)이 제공된다. 도 3(a)를 참조하면, 사용자의 제2 입력(I21)에 따른 이벤트에 의해 셀들을 분할한다. 예를 들어, 상기 제2 입력(I21)은 탭(tap)일 수 있다. 셀을 탭하면, 해당 셀이 작은 셀들로 분할된다. 분할된 셀들은 미리 정해진 그리드의 형태로 분할되거나 사용자가 선택한 그리드의 형태로 분할될 수 있다.
도 3(a)에서 A 셀에 입력된 제2 입력(I21)에 따라 도 3(b)과 같이 A 셀 부분이 다수의 셀들로 분할된다. 또한, 도 3(b)에서 B 셀에 입력된 제2 입력(I22)에 따라 도 3(c)과 같이 B 셀 부분이 다수의 셀들로 분할된다.
마찬가지로, 도 3(c)에서 C 셀에 입력된 제2 입력(I23)에 따라 도 3(d)과 같이 C 셀 부분이 다수의 셀들로 분할된다. 결과적으로, 도 3(d)에서 보여지는 바와 같이, 상기 셀로 분할된 편집 화면(560)의 A 셀, B 셀, C 셀은 그리드(550)로 재분할된 레이아웃을 갖는다. 여기서, 상기 그리드(550)의 셀들은 각각 편집이 가능하다.
도 3에서는 사용자의 탭 입력에 따라 셀들을 분할하였으나, 상기 입력은 이벤트를 생성하는 인터페이스로서, 다양하게 채용할 수 있다. 이와 같이, 사용자는 제공되는 그리드에 제약받지 않고, 직관적인 조작으로 그리드를 분할하여 다양한 그리드의 레이아웃을 디자인할 수 있다.
셀 간격 조절 모드를 설명하기 위해 도 4를 참조하면, 그리드의 레이아웃을 편집하기 위해 제공되는 화면(500)에는 셀로 분할된 편집 화면(560)이 제공된다. 또한, 셀 간격 조절을 위한 슬라이더(570)가 제공되고, 간격을 좁히는 방향 및 넓히는 방향을 직관적으로 알 수 있는 가이드(571, 572)가 제공될 수 있다.
도 4(a)를 참조하면, 사용자의 제3 입력(I31)에 따른 이벤트에 의해 셀들의 간격을 조절한다. 예를 들어, 상기 제3 입력(I31)은 상기 슬라이더(570)의 드래그일 수 있다. 상기 슬라이더(570)의 드래그를 길게 하면, 상기 셀들의 간격이 넓어지고, 상기 슬라이더(570)의 드래그를 짧게 하면, 상기 셀들의 간격이 좁아지는 등 드래그의 정도에 따라 셀 간격을 제어할 수 있다.
도 4(a)에서 예를 들어, 상기 슬라이더(570)를 제1 방향으로 드래그하는 제3 입력(I31)에 따라 도 4(b)과 같이 셀들 간의 간격이 넓어진다. 또한, 도 4(b)에서 상기 슬라이더(570)를 상기 제1 방향으로 더 드래그(제3 입력(I32))하면, 도 4(c)와 같이 셀들 간의 간격이 더 넓어진다. 상기 제1 방향은 셀 간격이 넓게 도시된 가이드(572)를 향하는 방향이다.
반대로, 도 4(c)에서 상기 슬라이더(570)를 상기 제1 방향과 반대 방향인 제2 방향으로 드래그하는 제3 입력(I33)에 따라 도 4(a)와 같이 셀들 간의 간격이 좁아진다. 상기 제2 방향은 셀 간격이 좁게 도시된 가이드(571)를 향하는 방향이다.
이와 같이, 사용자는 제공되는 그리드에 제약받지 않고, 직관적인 조작으로 셀 간격을 조절하여 다양한 그리드의 레이아웃을 디자인할 수 있다.
도 5는 본 발명의 일 실시예에 따른 사용자 인터페이스를 편집하는 방법의 순서도이다.
본 실시예에 따라 사용자 인터페이스를 편집하는 방법은, 도 1의 단말기(1)와 실질적으로 동일한 구성에서 진행될 수 있다. 따라서, 도 1의 단말기(1)와 동일한 구성요소는 동일한 도면부호를 부여하고, 반복되는 설명은 생략한다.
도 5를 참조하여, 단말기(1)의 그리드 레이아웃 처리부(310)에서 수행하는 셀 병합, 셀 분할 및 셀 간격 조절 태스크 실행에 대해 설명한다. 먼저, 대기 화면 또는 다른 프로그램을 실행하는 도중(단계 S00) 사용자에 의해 UI를 편집하기 위한 태스크(task) 실행 요청이 있는지 판단한다(단계 S10). 만일 태스크 실행 요청이 있는 경우 단말기는 태스크를 실행하기 위한 화면을 제공한다(단계 S11). 예를 들어, 상기 화면은 편집하기 위한 셀 단위의 그리드(grid)를 제공할 수 있다.
이어, 사용자가 선택한 편집 모드를 판단한다(단계 S12). 상기 편집 모드 선택은 메뉴를 제공하고 사용자가 선택할 수도 있고, 사용자의 입력에 따른 이벤트에 따라 판단할 수도 있다.
셀 병합 모드가 선택된 경우, 셀 병합을 위한 화면을 표시하고(단계 S21), 특정 셀을 드래그한 경우(단계 S22), 두 개 이상의 셀을 드래그 하였는지 판단한다(단계 S23). 두 개 이상의 셀을 드래그한 경우, 다수의 셀을 하나의 셀로 병합한다(단계 S24). 셀 병합 모드는 도 2를 참조한다.
셀 분할 모드가 선택된 경우, 셀 분할을 위한 화면을 표시하고(단계 S31), 특정 셀을 탭한 경우(단계 S32), 상기 셀이 병합되어 있는 셀인지 판단한다(단계 S33). 병합되어 있는 셀인 경우 다수의 셀로 재분할한다(단계 S34). 셀 분할 모드는 도 3을 참조한다.
또한, 사용자가 슬라이더를 조작한 경우(단계 S41), 셀 간격 조절 모드의 선택으로 판단한다. 이어, 슬라이더의 조작 방향을 판단하고(단계 S42), 제1 방향일 경우 셀 간격을 넓히고(단계 S44), 제2 방향일 경우 셀 간격을 좁힌다(단계 S43). 셀 병합 모드는 도 4를 참조한다.
상기 그리드의 셀 병합 모드, 셀 분할 모드, 셀 간격 조절 모드에서 구분된 셀들 및 그리드의 레이아웃을 저장하고(단계 S13), 태스크를 완료할 수 있다(단계 S14).
이와 같이, 사용자는 제공되는 그리드에 제약받지 않고, 직관적인 조작으로 셀을 분할 및 병합할 수 있고, 셀 간격을 조절하여 다양한 그리드의 레이아웃을 디자인할 수 있다.
그리드의 레이아웃 편집이 완료되면, 사용자는 편집 가능한 각 셀에 그래픽적 요소를 부가하여 디자인할 수 있다. 사용자는 각 셀 단위로 편집이 가능하다. 이하에서는 셀의 그래픽적 편집을 설명한다.
도 6 및 도 7은 도 1의 단말기에서 셀의 그래픽적 요소의 편집을 보여주는 화면들이다. 도 8은 셀의 그래픽적 요소의 레이어를 보여주는 개념도이다. 도 9는 셀 포커스의 자동 스크롤을 보여주는 개념도이다.
도 6은 아이템의 복사 및 이동에 대한 매뉴얼을 보여준다. 도 6(a)를 참조하면, 그래픽적 편집을 위한 화면(600)이 제공되고, 각각 편집 가능한 A 셀, B 셀 및 C 셀로 구분된다. 또한, 데코레이션 아이콘(610) 및 아이템들을 제공하는 테이블(620) 등이 제공될 수 있다. 사용자가 A 셀에 있는 아이템(110)에 제4 입력(I4)를 입력하면, A 셀이 포커싱되고 상기 아이템(110)이 선택된다. 상기 아이템(110)은 스티커, 아이콘, 프레임, 그림, 형상, 도면, 텍스트 등 상기 단말기(1)에서 사용되는 그래픽적 요소를 모두 포함할 수 있다.
상기 아이템(110)에 연속으로 제5 입력(I5)을 입력하면 상기 아이템(110)이 복사된다. 상기 아이템(110)의 복사와 동시에, 상기 테이블(620)은 숨겨질 수 있다. 상기 제4 입력(I4)과 상기 제5 입력(I5)은 각각 더블 탭(double tap) 또는 드래그로써 연속하는 일련의 동작일 수 있다. 사용자의 입력이 감지되는 셀은 포커싱(focusing)될 수 있다.
도 6(b)는 상기 아이템(110)이 C 셀로 복사되는 과정에서 복사된 아이템(130)이 플로팅(floating)된 화면을 보여주며, 상기 복사된 아이템(130)을 C 셀까지 드래그하는 경우, 도 6(c)와 같이 상기 아이템(110)이 C 셀로 복사된다. 또한, 도 6(c)의 복사된 아이템(130)을 B 셀로 이동하기 위한 제6 입력(I6)를 입력하면, 상기 아이템(130)이 도 6(d)와 같이 B 셀로 이동한다. 상기 제6 입력(I6)은 상기 복사된 아이템(130)을 C 셀에서 B 셀까지 드래그하는 것일 수 있다.
이어, 제7 입력(I7)(예를 들어, 릴리즈(release))를 입력하면, 도 6(e)와 같이 상기 복사된 아이템(130)이 B 셀에 안착한다. 그러나, 상기 입력들은 예시들에 불과하며, 사용자의 손가락, 터치펜 등을 이용한 다양한 형태의 입력을 적용할 수 있다.
도 7은 복사된 아이템(130)이 여러 셀에 걸쳐있는 경우의 그래픽 처리에 대한 예시이다. 도 7(a)를 참조하면, 그래픽적 편집을 위한 화면(600)에서 상기 아이템(130)이 A 셀, B 셀 및 C 셀의 일부를 차지하고 있다. 이 경우, 도 7(b)와 같이 상기 아이템(130)이 차지하는 비율을 계산한다. 본 예시에서는 B 셀의 비율이 가장 높으므로, B 셀이 포커싱된다. 이후, 상기 아이템(130)은 도 7(C)와 같이, B 셀에 복사되어 적용된다.
도 8을 참조하면, 편집이 완료되어 생성된 UI(700)의 예이다. 상기 UI(700)는 그래픽적 편집에 의해 적어도 하나의 그래픽 층(601, 602, 603)과 링크층(401)을 가진다. 상기 링크층(401)은 사용자에 의해 해당 영역이 선택되면 연결된 특정 기능이 실행되거나 해당 기능을 실행하는 애플리케이션이나 프로그램이 실행되는 층이다. 상기 링크층(401)은 상기 링크 실행부(400)에 의해 생성되나 편의상 함께 도시하였다.
상기 그래픽 층은 셀의 배경이 되는 이미지 또는 컬러 등을 설정하는 배경 이미지 층(601), 스티커, 도형, 텍스트와 같은 꾸미기 요소를 추가하는 꾸미기 층(602), 액자와 같이 셀의 테두리를 꾸미는 프레임 층(603) 등을 포함할 수 있다. 상기 그래픽 층들은 필요에 따라 삭제, 변경, 추가가 가능하며, 각 층은 편집 모드에 따라 선택, 이동 및 변경이 가능하다.
도 9를 참조하면, 그래픽적 편집을 위한 화면(600)에서 다수개의 셀들(D, E, F, G, H)의 영역(900)이 상기 화면(600)보다 클 경우, 자동 스크롤 기능으로 사용자가 편집하는 셀을 모두 볼(viewing) 수 있도록 해주는 기능을 보여준다.
도 9(a)와 같이 D 셀이 편집될 때, D 셀이 포커싱되면서 상기 영역(900)이 좌측으로 스크롤되어, 사용자에게 D 셀 전체를 보여준다. 마찬가지로, 도 9(b)와 같이 E 셀이 편집될 때, E 셀이 포커싱되면서 상기 영역(900)이 우측으로 스크롤되어, 사용자에게 E 셀 전체를 보여준다.
도 9(c) 내지 도 9(e)와 같이, F 셀, G 셀, H 셀이 각각 편집될 때, 사용자에게 편집되는 셀 전체를 제공하기 위해 자동으로 스크롤 된다. 예를 들어, 포커싱된 셀은 타이틀 바(title bar) 하단을 시작점으로 보여질 수 있다.
이와 같이, 제한된 화면(600)에서도 사용자는 편집 중인 셀의 풀(full) 화면을 볼 수 있으므로, 효율적인 편집이 가능하다.
편집 가능한 셀 단위로 그래픽적 편집이 완료되면 UI가 생성되고, 상기 링크 실행부(400)는 상기 각 셀에 특정 기능의 메뉴를 링크시킨다. 상기 셀을 선택하면 링크 항목 메뉴가 제공되고, 사용자가 메뉴에서 하나의 항목을 선택하면 해당 항목에 링크된다. 링크층(401, 도 8참조)은 보이지 않는(invisible) 층일 수 있으나, 이와 달리 보여지는(visible) 그래픽 층으로 형성할 수도 있다.
상기 링크 실행부(400)는 각 UI별로 맵핑되는 항목을 저장한다. 이후, 상기 UI가 탭되면, 실제로는 링크층(401)이 탭되면서 특정 기능을 실행하는 항목으로 링크를 실행한다. 예를 들어, 생성된 UI에 카메라 기능을 링크해 두면, 상기 UI를 선택할 경우 카메라 기능이 실행되고, 생성된 UI에 웹 브라우저를 링크해 두면, 상기 UI를 선택할 경우 웹 브라우저가 실행된다.
이에 따라, 사용자는 특정 애플리케이션, 특정 기능, 특정 태스크를 실행하기 위한 UI를 독창적으로 디자인할 수 있고, 이러한 UI를 통해 직관적인 단말기 사용이 가능하다.
본 발명에 따르면, UI를 다양하게 편집할 수 있을 뿐만 아니라 단말기의 OS의 틀을 벗어나 홈스크린을 다양하게 디자인할 수 있다. 또한, 종래에 이미 만들어진 탬플릿 내에 사진을 삽입하고 특정 영역에 텍스트를 입력하는 제한적인 디자인에서 벗어나, 모바일 카드, 청첩장, 초대장 등을 독창적으로 디자인할 수 있으며, 이 경우 URL 링크를 걸어 페이지를 연동시킬 수 있다.
또한, 종래에는 제공되는 그리드 내에만 사진 삽입이 가능하였던 앨범제작에 있어서도, 사용자가 직접 앨범을 꾸미고 다양한 레이아웃을 디자인 할 수 있다. 나아가, 모바일 웹 페이지에서 포트 폴리오, 개인 웹 사이트 등을 사용자의 요구 및 취향에 맞춰 다양한 디자인을 창조할 수 있다.
상기와 같이, 본 발명에 따른 사용자 인터페이스를 편집하는 단말기 및 방법에 따르면, 레이아웃 및 그래픽 편집 기능 및 링크 기능을 제공하여 사용자가 효율적으로 UI를 구성할 수 있고, 직관적인 입력으로 인해 편리하게 유니크한 결과물을 도출할 수 있다.
이상에서는 실시예들을 참조하여 설명하였지만, 해당 기술 분야의 숙련된 당업자는 하기의 특허 청구의 범위에 기재된 본 발명의 사상 및 영역으로부터 벗어나지 않는 범위 내에서 본 발명을 다양하게 수정 및 변경시킬 수 있음을 이해할 수 있을 것이다.
1: 단말기 10: 입력부
30: UI 편집 모듈 300: 그리드 관리부
310: 그리드 레이아웃 처리부 311: 셀 병합부
313: 셀 분할부 315: 셀 간격 조절부
330: 그래픽 처리부 400: 링크 실행부
50: 표시부

Claims (19)

  1. 사용자의 입력을 수신하는 입력부;
    상기 사용자의 입력에 따라 편집 가능한 그리드를 제공하고, 상기 그리드에 연결할 그래픽 아이템 및 특정 기능을 매핑하는 UI 편집 모듈; 및
    상기 UI 편집 모듈에 의해 구성된 UI를 표시하는 표시부를 포함하는 사용자 인터페이스를 편집하는 단말기.
  2. 제1항에 있어서, 상기 UI 편집 모듈은,
    상기 사용자의 입력에 따라 상기 그리드를 편집하고, 그래픽 아이템을 매핑하는 그리드 관리부; 및
    상기 그리드 관리부에 의해 구성된 상기 그리드에 링크된 기능을 실행하는 링크 실행부를 포함하는 사용자 인터페이스를 편집하는 단말기.
  3. 제2항에 있어서, 상기 그리드 관리부는,
    상기 그리드의 레이아웃을 처리하여 편집 가능한 셀 단위로 구분하는 그리드 레이아웃 처리부; 및
    상기 각 셀의 그래픽적 요소를 부가하는 그래픽 처리부를 포함하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 단말기.
  4. 제3항에 있어서, 상기 그리드 레이아웃 처리부는,
    상기 그리드의 셀들을 병합하는 셀 병합부;
    상기 그리드의 셀을 분할하는(split) 셀 분할부; 및
    상기 그리드의 셀 간격을 조절하는 셀 간격 조절부를 포함하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 단말기.
  5. 제3항에 있어서, 상기 그래픽 처리부는,
    제1 셀의 아이템을 제2 셀로 복사하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 단말기.
  6. 제5항에 있어서, 상기 그래픽 처리부는,
    상기 아이템이 위치하는 영역에 포함되는 적어도 두 개의 셀들 중 상기 아이템이 차지하는 비율이 가장 높은 셀에 상기 아이템을 복사하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 단말기.
  7. 제3항에 있어서, 상기 그래픽 처리부는,
    제1 셀의 아이템을 제2 셀로 이동하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 단말기.
  8. 제3항에 있어서,
    상기 각 셀은 배경 이미지 층, 꾸미기 층 및 프레임 층 중 적어도 하나의 그래픽층과 링크 층으로 구성되는 것을 특징으로 하는 사용자 인터페이스를 편집하는 단말기.
  9. 제3항에 있어서, 상기 그래픽 처리부는,
    편집되는 셀을 포커싱하고, 상기 셀이 상기 표시부에 모두 표시될 수 있도록 화면을 자동으로 스크롤하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 단말기.
  10. 제1항에 있어서, 상기 표시부는,
    상기 사용자의 입력을 감지하는 터치 인식부를 포함하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 단말기.
  11. 사용자의 입력에 따른 UI 편집 기능을 실행하는 단계;
    셀 단위의 그리드(grid)를 제공하는 단계;
    사용자의 입력에 따라 상기 그리드를 편집하는 단계; 및
    상기 편집된 그리드에 그래픽 아이템 및 특정 기능을 매핑하는 단계를 포함하는 사용자 인터페이스를 편집하는 방법.
  12. 제11항에 있어서,
    상기 편집된 그리드 및 상기 특정 기능을 저장하는 단계를 더 포함하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 방법.
  13. 제11항에 있어서, 상기 그리드를 편집하는 단계는,
    상기 그리드의 셀들을 병합하는 단계를 포함하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 방법.
  14. 제11항에 있어서, 상기 그리드를 편집하는 단계는,
    상기 그리드의 셀을 분할하는 단계를 포함하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 방법.
  15. 제11항에 있어서, 상기 그리드를 편집하는 단계는,
    상기 그리드의 셀 간격을 조절하는 단계를 포함하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 방법.
  16. 제11항에 있어서, 상기 편집된 그리드에 그래픽 아이템 및 특정 기능을 매핑하는 단계는,
    제1 셀의 아이템을 제2 셀로 복사하는 단계를 포함하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 방법.
  17. 제16항에 있어서, 상기 제1 셀의 아이템을 제2 셀로 복사하는 단계는,
    상기 아이템이 위치하는 영역에 포함되는 적어도 두 개의 셀들 중 상기 아이템이 차지하는 비율이 가장 높은 셀에 상기 아이템을 복사하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 방법.
  18. 제11항에 있어서, 상기 편집된 그리드에 그래픽 아이템 및 특정 기능을 매핑하는 단계는,
    제1 셀의 아이템을 제2 셀로 이동하는 단계를 포함하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 방법.
  19. 제11항에 있어서, 상기 편집된 그리드에 그래픽 아이템 및 특정 기능을 매핑하는 단계는,
    편집되는 셀이 상기 표시부에 모두 표시될 수 있도록 화면을 자동으로 스크롤하는 단계를 포함하는 것을 특징으로 하는 사용자 인터페이스를 편집하는 방법.
KR20130112135A 2013-09-17 2013-09-17 사용자 인터페이스를 편집하는 단말기 및 방법 KR20150032093A (ko)

Priority Applications (2)

Application Number Priority Date Filing Date Title
KR20130112135A KR20150032093A (ko) 2013-09-17 2013-09-17 사용자 인터페이스를 편집하는 단말기 및 방법
US14/487,970 US20150082211A1 (en) 2013-09-17 2014-09-16 Terminal and method for editing user interface

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR20130112135A KR20150032093A (ko) 2013-09-17 2013-09-17 사용자 인터페이스를 편집하는 단말기 및 방법

Publications (1)

Publication Number Publication Date
KR20150032093A true KR20150032093A (ko) 2015-03-25

Family

ID=52669178

Family Applications (1)

Application Number Title Priority Date Filing Date
KR20130112135A KR20150032093A (ko) 2013-09-17 2013-09-17 사용자 인터페이스를 편집하는 단말기 및 방법

Country Status (2)

Country Link
US (1) US20150082211A1 (ko)
KR (1) KR20150032093A (ko)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20180034919A (ko) * 2016-09-28 2018-04-05 주식회사 엔씨소프트 디스플레이 디바이스 및 그 제어 방법
KR102646777B1 (ko) * 2023-05-12 2024-03-12 (주)인스웨이브시스템즈 멀티 기기용 반응형 페이지를 위한 그리드 레이아웃 설정 방법 및 이를 수행하는 프로그램

Families Citing this family (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
USD738901S1 (en) 2012-11-08 2015-09-15 Uber Technologies, Inc. Computing device display screen with graphical user interface
USD753670S1 (en) * 2013-12-30 2016-04-12 Beijing Qihoo Technology Co., Ltd. Display screen with animated graphical user interface
EP3040808B1 (de) * 2015-01-02 2019-11-20 Volkswagen AG Fortbewegungsmittel, Anwenderschnittstelle und Verfahren zur Definition einer Kachel auf einer Anzeigeeinrichtung
KR102648551B1 (ko) 2016-01-28 2024-03-18 삼성전자주식회사 콘텐트를 선택하기 위한 방법 및 그 전자 장치
CN106933444A (zh) * 2017-02-26 2017-07-07 贾占利 应用的分屏方法及装置
JP6979471B2 (ja) * 2018-01-30 2021-12-15 富士フイルム株式会社 電子アルバム装置、電子アルバム装置の作動方法および作動プログラム
CN109683714B (zh) * 2018-12-28 2021-08-31 北京小米移动软件有限公司 多媒体资源管理方法、装置及存储介质
CN110233929A (zh) * 2019-04-25 2019-09-13 维沃移动通信有限公司 一种显示控制方法及终端设备
CN110569095B (zh) 2019-08-09 2021-08-13 荣耀终端有限公司 显示页面元素的方法和电子设备
CN111510646A (zh) * 2020-04-29 2020-08-07 京东方科技集团股份有限公司 拼接屏的视频显示方法、显示装置、计算机设备和介质
WO2022170255A1 (en) * 2021-02-08 2022-08-11 Tracer Imaging Llc System and method for splitting an image across a plurality of tiles

Family Cites Families (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030071848A1 (en) * 1998-12-15 2003-04-17 Michael Carroll System and method for presenting tables in selectable portions
US7155667B1 (en) * 2000-06-21 2006-12-26 Microsoft Corporation User interface for integrated spreadsheets and word processing tables
US20020188632A1 (en) * 2001-06-06 2002-12-12 Ming-Shing Su Table editor for web pages
US8677255B1 (en) * 2004-08-27 2014-03-18 Adobe Systems Incorporated Expanded container view for graphical editing environment
US20110202829A1 (en) * 2010-02-12 2011-08-18 Research In Motion Limited Method, device and system for controlling a display according to a defined sizing parameter
US9003293B2 (en) * 2012-09-28 2015-04-07 Interactive Memories, Inc. Online image and text-based project creation, editing, and order fulfillment service
KR101272867B1 (ko) * 2012-11-30 2013-06-10 (주)인스웨이브시스템즈 모바일 단말기의 그리드 출력 장치 및 그 방법

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20180034919A (ko) * 2016-09-28 2018-04-05 주식회사 엔씨소프트 디스플레이 디바이스 및 그 제어 방법
KR102646777B1 (ko) * 2023-05-12 2024-03-12 (주)인스웨이브시스템즈 멀티 기기용 반응형 페이지를 위한 그리드 레이아웃 설정 방법 및 이를 수행하는 프로그램

Also Published As

Publication number Publication date
US20150082211A1 (en) 2015-03-19

Similar Documents

Publication Publication Date Title
US11422678B2 (en) Method and device for managing tab window indicating application group including heterogeneous applications
KR20150032093A (ko) 사용자 인터페이스를 편집하는 단말기 및 방법
US11048404B2 (en) Information processing apparatus, information processing method, and program
US10042655B2 (en) Adaptable user interface display
CN105683895B (zh) 提供用户交互的用户终端设备及其方法
JP5373011B2 (ja) 電子装置およびその情報表示方法
US9977523B2 (en) Apparatus and method for displaying information in a portable terminal device
EP2503440B1 (en) Mobile terminal and object change support method for the same
KR102033801B1 (ko) 인플레이스 방식으로 값을 편집하는 사용자 인터페이스 제공 기법
KR20110006021A (ko) 휴대 단말기의 스크롤 방법 및 장치
US20130132878A1 (en) Touch enabled device drop zone
US20190369848A1 (en) Method of styling content and touch screen device for styling content
CN109074375B (zh) web文档中的内容选择
JP2012008686A (ja) 情報処理装置および方法、並びにプログラム
TW201324312A (zh) 具有觸摸屏的電子設備及其頁面處理方法
TW201606621A (zh) 具有無縫轉換之合併式閱讀及編輯體驗
CN113918260A (zh) 应用程序显示方法、装置及电子设备
US20150067570A1 (en) Method and Apparatus for Enhancing User Interface in a Device with Touch Screen
US11320983B1 (en) Methods and graphical user interfaces for positioning a selection, selecting, and editing, on a computing device running applications under a touch-based operating system
US20160132478A1 (en) Method of displaying memo and device therefor
JP6102456B2 (ja) 電子文書閲覧システムおよびプログラム
CN113393372A (zh) 桌面壁纸设置方法及装置
CN112765500A (zh) 信息搜索方法及装置
JP5925096B2 (ja) 編集装置、編集装置の制御方法
KR20150060612A (ko) 사용자단말 제어 방법

Legal Events

Date Code Title Description
N231 Notification of change of applicant
E902 Notification of reason for refusal
E601 Decision to refuse application