KR101239943B1 - 유저 인터페이스 제작 시스템 및 제작 방법 - Google Patents

유저 인터페이스 제작 시스템 및 제작 방법 Download PDF

Info

Publication number
KR101239943B1
KR101239943B1 KR1020110095843A KR20110095843A KR101239943B1 KR 101239943 B1 KR101239943 B1 KR 101239943B1 KR 1020110095843 A KR1020110095843 A KR 1020110095843A KR 20110095843 A KR20110095843 A KR 20110095843A KR 101239943 B1 KR101239943 B1 KR 101239943B1
Authority
KR
South Korea
Prior art keywords
component
viewport
property
axis
alignment
Prior art date
Application number
KR1020110095843A
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 KR1020110095843A priority Critical patent/KR101239943B1/ko
Application granted granted Critical
Publication of KR101239943B1 publication Critical patent/KR101239943B1/ko

Links

Images

Classifications

    • 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/34—Graphical or visual programming
    • 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]

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

본 발명은 유저 인터페이스 제작 시스템 및 제작 방법에 관한 것으로, 상세하게는 사용자가 작업 뷰포트 상에서 컴포넌트 배치 및 레이아웃 변경 등의 작업을 수행하면, 서로 다른 회전 속성 및 해상도 속성을 가진 다수 개의 결과 뷰포트에 작업 결과가 실시간으로 디스플레이되도록 하여, 애플리케이션의 디자인, 개발 및 유지보수의 효율이 향상되도록 하는 유저 인터페이스 제작 시스템 및 제작 방법에 관한 것이다.

Description

유저 인터페이스 제작 시스템 및 제작 방법{Creating system for user interface for application and creating method for the same}
본 발명은 유저 인터페이스 제작 시스템 및 제작 방법에 관한 것으로, 상세하게는 사용자가 작업 뷰포트 상에서 컴포넌트 배치 및 레이아웃 변경 등의 작업을 수행하면, 서로 다른 회전 속성 및 해상도 속성을 가진 다수 개의 결과 뷰포트에 작업 결과가 실시간으로 디스플레이되도록 하여, 애플리케이션의 디자인, 개발 및 유지보수의 효율이 향상되도록 하는 유저 인터페이스 제작 시스템 및 제작 방법에 관한 것이다.
최근 안드로이드폰, 아이폰과 같은 스마트 폰 및 태블릿 PC와 같은 디지털 평판 디스플레이를 사용하는 포터블 기기가 다양하게 개발 및 출시되고 있다. 그런데, 각각 다른 OS(operating system)을 사용하는 기기는 물론이고, 동일한 OS를 활용하는 각각의 기기들도 해상도가 일정하지 않다.
따라서, 스마트 폰 및 태블릿 PC에서 구동되는 애플리케이션을 제작함에 있어, 처음부터 해상도 변화에 대응하도록 제작하지 않은 경우, 특정 해상도(기준 해상도)에 적합하게 구성된 레이아웃을 다른 해상도에 적용 시켰을 때, 화면이 정상적으로 표시되지 않는다는 문제점이 존재한다. 예를 들어, 크기 속성 조절 기능(Scaling)을 사용하지 않는 경우, 애플리케이션을 기준 해상도보다 해상도가 큰 화면에 표시하면, 해상도가 증가된 영역이 텅 비어 버리는 현상이 발생하였다. 또는 크기 속성 조절 기능(Scaling)을 사용하지 않는 경우, 애플리케이션을 기준 해상도보다 해상도가 작은 화면에 표시하면, 화면의 구성이 모두 표현되지 않는 현상이 발생하였다. 또는, 크기 속성 조절 기능(Scaling)을 사용하고, 애플리케이션을 기준 해상도보다 해상도가 큰 화면에 표시할 경우, 보간(blending) 알고리즘에서 발생하는 정보 손실로 인해 화면의 품질이 저하되는 현상이 발생하였다. 이와 같은 현상은 LCD(Liquid Crystal Display)나 OLED(Organic Light Emitting Diodes)와 같은 디지털 디스플레이에서 특히 두드러지게 나타난다.
또는, 크기 속성 조절 기능(Scaling)을 사용하고, 애플리케이션을 기준 해상도보다 해상도가 작은 화면에 표시할 경우, 보간(blending) 알고리즘에서 발생하는 정보 손실로 인해 화면의 품질이 저하되는 현상이 발생하였다. 이는 특히 텍스트의 가독성을 크게 저하하는 원인이 되었다.
한편, 기존의 UI 빌더(User Interface Builder)의 형태는 다음과 같다. 여기서, UI빌더란 애플리케이션의 GUI(Graphic User Interface)를 제작하기 위한 프로그램 또는 애플리케이션 등을 의미한다.
먼저, 1개의 결과 뷰포트에서 1개의 해상도를 지원하는 UI 빌더가 존재하였다. 예를 들어, 애플(Apple)사의 애플리케이션 개발도구인 X-code에 포함된 UI빌더가 이와 같은 형태의 대표적인 경우이며, 애플리케이션이 다양한 해상도를 지원할 필요가 없는 경우에 해당한다. 이 경우, 다양한 해상도에 대한 대응이 불가능하다는 문제점이 존재하였다.
다음으로, 1개의 결과 뷰포트에서 여러 해상도를 지원하는 UI 빌더가 존재하였다. 즉, 안드로이드 OS용 애플리케이션처럼 다양한 해상도를 지원할 필요가 있는 경우, 일반적으로 탭바(Tab-bar)와 같은 컨트롤을 통해 뷰포트를 공유하면서 여러 해상도의 레이아웃을 확인할 수 있는 기능을 제공한다. 이 경우, 여러 해상도에 대한 작업 결과를 디스플레이할 수 있기는 하지만, 어떤 컴포넌트를 배치하거나 수정하였을 때 그 결과가 다른 해상도에서 어떻게 표현되는지 한 번에 알기 어렵고, 이는 개발 효율을 떨어뜨리고, 제품의 품질에도 좋지 않은 영향을 준다는 문제점이 존재하였다.
전술한 배경기술은 발명자가 본 발명의 도출을 위해 보유하고 있었거나, 본 발명의 도출 과정에서 습득한 기술 정보로서, 반드시 본 발명의 출원 전에 일반 공중에게 공개된 공지기술이라 할 수는 없다.
본 발명은 사용자가 작업 뷰포트 상에서 컴포넌트 배치 및 레이아웃 변경 등의 작업을 수행하면, 서로 다른 회전 속성 및 해상도 속성을 가진 다수 개의 결과 뷰포트에 작업 결과가 실시간으로 디스플레이되도록 하여, 애플리케이션의 디자인, 개발 및 유지보수의 효율이 향상되도록 하는 유저 인터페이스 제작 시스템 및 제작 방법을 제공하는 것을 목적으로 한다.
본 발명은 사용자 입력 신호를 수신하는 사용자 인터페이스부; 단말기 상에 디스플레이되는 작업 뷰포트(viewport) 및 하나 이상의 결과 뷰포트(viewport) 각각의 디스플레이 속성을 제어하는 뷰포트 속성 제어부; 상기 작업 뷰포트 상에 배치되는 하나 이상의 컴포넌트의 디스플레이 속성을 제어하는 컴포넌트 속성 제어부; 상기 사용자 인터페이스부로부터의 입력 신호에 의하여, 상기 작업 뷰포트 상에 하나 이상의 컴포넌트가 배치되거나, 상기 배치된 하나 이상의 컴포넌트의 레이아웃(layout)이 변경되면, 상기 하나 이상의 결과 뷰포트 상에 상기 컴포넌트의 배치 또는 상기 컴포넌트의 레이아웃의 변경이 실시간으로 적용되어 디스플레이되도록 제어하는 제어부;를 포함하는 유저 인터페이스 제작 시스템을 제공한다.
본 발명에 있어서, 상기 뷰포트 속성 제어부는 상기 작업 뷰포트 및 상기 하나 이상의 결과 뷰포트 각각의 회전 속성을 제어하는 회전 속성 제어부 및 상기 작업 뷰포트 및 상기 하나 이상의 결과 뷰포트 각각의 해상도 속성을 제어하는 해상도 속성 제어부 중 하나 이상을 포함할 수 있다.
여기서, 상기 회전 속성은 랜드스케이프 모드(Landscape Mode) 및 포트레이트 모드(Portrait Mode)를 포함할 수 있다.
여기서, 상기 제어부는, 상기 작업 뷰포트의 상기 회전 속성 또는 해상도 속성 중 하나 이상의 속성이 변경되면, 상기 하나 이상의 결과 뷰포트 상의 상기 컴포넌트의 레이아웃이 실시간으로 변경되도록 제어할 수 있다.
본 발명에 있어서, 상기 컴포넌트 속성 제어부는 상기 작업 뷰포트 상에 배치되는 하나 이상의 컴포넌트 각각의 정렬 속성을 제어하는 정렬 속성 제어부 및 상기 작업 뷰포트 상에 배치되는 하나 이상의 컴포넌트 각각의 크기 속성을 제어하는 크기 속성 제어부 중 하나 이상을 포함할 수 있다.
여기서, 상기 정렬 속성은 X축 좌측 정렬(Xalign = Left), X축 가운데 정렬(Xalign = Center), X축 우측 정렬(Xalign = Right), Y축 상단 정렬(Yalign = Top), Y축 가운데 정렬(Yalign = Middle), Y축 하단 정렬(Yalign = Bottom) 중 하나 이상의 속성을 포함할 수 있다.
여기서, 상기 크기 속성은 X축 크기 가변(Xscale=True), X축 크기 고정(Xscale=False), Y축 크기 가변(Yscale=True), Y축 크기 고정(Yscale=False) 중 하나 이상의 속성을 포함할 수 있다.
본 발명에 있어서, 상기 제어부는, 상기 작업 뷰포트 상에 하나 이상의 컴포넌트가 배치되거나, 상기 배치된 하나 이상의 컴포넌트의 레이아웃(layout)이 변경되면, 상기 컴포넌트의 상기 정렬 속성 및 크기 속성에 따라, 상기 하나 이상의 결과 뷰포트 상에 상기 컴포넌트가 배치되거나 또는 상기 컴포넌트의 레이아웃이 변경되도록 제어할 수 있다.
다른 측면에 관한 본 발명은 단말기 상에서 유저 인터페이스(user interface) 제작 애플리케이션이 실행되는 단계; 상기 단말기 상에 작업 뷰포트(viewport) 및 하나 이상의 결과 뷰포트(viewport)가 디스플레이되는 단계; 상기 작업 뷰포트 상에 하나 이상의 컴포넌트가 배치되거나, 상기 배치된 하나 이상의 컴포넌트의 레이아웃(layout)이 변경되는 단계; 상기 하나 이상의 결과 뷰포트 상에 상기 컴포넌트의 배치 또는 상기 컴포넌트의 레이아웃의 변경이 실시간으로 적용되어 디스플레이되는 단계;를 포함하는 유저 인터페이스 제작 방법을 제공한다.
본 발명에 있어서, 상기 작업 뷰포트 및 상기 하나 이상의 결과 뷰포트 각각의 회전 속성 또는 해상도 속성 중 하나 이상의 속성이 변경 가능하도록 형성될 수 있다.
여기서, 상기 회전 속성은 랜드스케이프 모드(Landscape Mode) 및 포트레이트 모드(Portrait Mode)를 포함할 수 있다.
여기서, 상기 작업 뷰포트의 상기 회전 속성 또는 해상도 속성 중 하나 이상의 속성이 변경되면, 상기 하나 이상의 결과 뷰포트 상의 상기 컴포넌트의 레이아웃이 실시간으로 변경될 수 있다.
본 발명에 있어서, 상기 작업 뷰포트 상에 배치되는 하나 이상의 컴포넌트는 각각 정렬 속성 또는 크기 속성 중 하나 이상의 속성을 가질 있다.
여기서, 상기 정렬 속성은 X축 좌측 정렬(Xalign = Left), X축 가운데 정렬(Xalign = Center), X축 우측 정렬(Xalign = Right), Y축 상단 정렬(Yalign = Top), Y축 가운데 정렬(Yalign = Middle), Y축 하단 정렬(Yalign = Bottom) 중 하나 이상의 속성을 포함할 수 있다.
여기서, 상기 크기 속성은 X축 크기 가변(Xscale=True), X축 크기 고정(Xscale=False), Y축 크기 가변(Yscale=True), Y축 크기 고정(Yscale=False) 중 하나 이상의 속성을 포함할 수 있다.
여기서, 상기 작업 뷰포트 상에 하나 이상의 컴포넌트가 배치되거나, 상기 배치된 하나 이상의 컴포넌트의 레이아웃(layout)이 변경되면, 상기 컴포넌트의 상기 정렬 속성 및 크기 속성에 따라, 상기 하나 이상의 결과 뷰포트 상에 상기 컴포넌트가 배치되거나 또는 상기 컴포넌트의 레이아웃이 변경될 수 있다.
이와 같은 본 발명에 의해서, 애플리케이션의 디자인, 개발 및 유지보수의 효율이 향상되는 효과를 얻을 수 있다.
도 1은 본 발명의 일 실시예에 따른 유저 인터페이스 제작 시스템을 개략적으로 나타내는 블록도이다.
도 2는 도 1의 유저 인터페이스 제작 시스템을 이용하여 단말기 상에서 애플리케이션이 구동되고 있는 모습을 나타내는 도면이다.
도 3은 본 발명의 일 실시예에 따른 유저 인터페이스 제작 방법을 상세히 나타내는 흐름도이다.
도 4 내지 도 6은, 작업 뷰포트의 해상도가 (100 * 100)에서 (200 * 200)으로 변경되었을 때, 작업 뷰포트 상에서 상기 해상도의 변경이 실시간으로 적용되어 디스플레이된 결과를 나타내는 도면이다.
도 7 내지 도 10은, 도 1의 유저 인터페이스 제작 시스템을 이용하여 작업 뷰포트 상에서 컴포넌트의 레이아웃이 변경되었을 때, 복수 개의 결과 뷰포트 상에서 상기 컴포넌트의 레이아웃의 변경이 실시간으로 적용되어 디스플레이된 결과를 나타내는 도면이다.
이하, 첨부한 도면을 참고로 하여 본 발명의 실시예에 대하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 상세히 설명한다. 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다.
도 1은 본 발명의 일 실시예에 따른 유저 인터페이스 제작 시스템을 개략적으로 나타내는 블록도이고, 도 2는 도 1의 유저 인터페이스 제작 시스템을 이용하여 단말기 상에서 애플리케이션이 구동되고 있는 모습을 나타내는 도면이다.
도 1 및 도 2를 참조하면, 본 발명의 일 실시예에 따른 유저 인터페이스 제작 시스템(100)은 사용자 인터페이스부(110), 제어부(120), 뷰포트 속성 제어부(130), 컴포넌트 속성 제어부(140) 및 데이터베이스(150)를 포함한다.
여기서, 유저 인터페이스 제작 시스템(100)은 UI 빌더(User Interface Builder) 애플리케이션이 설치 및 구동될 수 있는 다양한 종류의 단말기를 의미한다. 즉, 유저 인터페이스 제작 시스템(100)은 퍼스널 컴퓨터(personal computer), 태블릿 퍼스널 컴퓨터(tablet personal computer), 이동 전화(mobile telephone), 스마트폰(smart phone), 전화(telephone), 및 퍼스널 디지털 보조장치(personal digital assistant)와 같은 클라이언트 컴퓨팅 환경들과 실질적으로 동일한 구성요소일 수 있다.
사용자 인터페이스부(110)는 사용자 입력 신호를 수신하는 역할을 수행한다. 상세히, 사용자 인터페이스부(110)는 사용자로부터의 입력 신호를 수신하는 동시에 사용자에게 출력 신호를 출력하는 역할을 수행하며, 키보드, 마우스, 모니터 등을 포함할 수 있다. 또한, 사용자 인터페이스부(110)는 태블릿 퍼스널 컴퓨터(tablet personal computer)의 터치 스크린 등일 수도 있다.
뷰포트 속성 제어부(130)는 단말기 상에 디스플레이되는 작업 뷰포트(viewport) 및 하나 이상의 결과 뷰포트(viewport) 각각의 디스플레이 속성을 제어하는 역할을 수행한다. 이와 같은 뷰포트 속성 제어부(130)는 작업 뷰포트(210) 및 하나 이상의 결과 뷰포트(220)(230)(240) 각각의 회전 속성을 제어하는 회전 속성 제어부(131) 및 작업 뷰포트(210) 및 하나 이상의 결과 뷰포트(220)(230)(240) 각각의 해상도 속성을 제어하는 해상도 속성 제어부(132)를 포함한다.
그리고, 컴포넌트 속성 제어부(140)는 상기 작업 뷰포트 상에 배치되는 하나 이상의 컴포넌트의 디스플레이 속성을 제어하는 역할을 수행한다. 이와 같은 컴포넌트 속성 제어부(140)는 작업 뷰포트(210) 상에 배치되는 하나 이상의 컴포넌트(216) 각각의 정렬 속성을 제어하는 정렬 속성 제어부(141) 및 작업 뷰포트(210) 상에 배치되는 하나 이상의 컴포넌트(216) 각각의 크기 속성을 제어하는 크기 속성 제어부(142)를 포함한다.
이를 더욱 상세히 설명하면 다음과 같다.
유저 인터페이스 제작 시스템(100)을 이용하여 단말기 상에서 애플리케이션이 구동되고 있는 모습을 나타내는 도 2를 참조하면, 단말기 상에는 하나의 작업 뷰포트(210)와 복수 개의 결과 뷰포트(220)(230)(240)가 디스플레이된다. 그리고, 뷰포트 들의 일 측에는 작업 뷰포트(210)에 배치될 컴포넌트를 선택할 수 있는 컴포넌트 선택부(250)가 디스플레이된다. 여기서, 뷰포트(viewport)란 컴퓨터 그래픽스(CG)에서 화상을 생성하는 렌더링(rendering) 과정에서 투영 변환한 도형을 실제로 표시하는 직사각형의 영역을 의미한다.
작업 뷰포트(210)는 작업 뷰포트 해상도 속성 설정부(211)와, 작업 뷰포트 회전 속성 설정부(212)와, 디스플레이 영역(215)과, 컴포넌트(216)를 포함한다. 또한, 각각의 결과 뷰포트(220)(230)(240)는 결과 뷰포트 해상도 속성 설정부(221)(231)(241)와, 결과 뷰포트 회전 속성 설정부(222)(232)(242)와, 디스플레이 영역(225)(235)(245)과, 컴포넌트(226)(236)(246)를 포함한다.
작업 뷰포트 해상도 속성 설정부(211)와 결과 뷰포트 해상도 속성 설정부(221)(231)(241)는 각각의 뷰포트의 디스플레이 영역(215)(225)(235)(245)의 해상도 속성을 설정 및 변경하는 역할을 수행한다. 즉, 해상도 속성 설정부는 도 2에 도시된 바와 같이 셀렉트 박스 형태로 구비되어, 각 뷰포트의 해상도 속성을 설정 및 변경할 수 있도록 구비되는 것이다. 여기서 도면에는 해상도 속성 설정부가 셀렉트 박스 형태로 구비되는 것으로 도시되어 있으나, 본 발명의 사상은 이에 제한되지 아니하며, 원하는 해상도를 직접 입력하는 등과 같은 다양한 방식이 가능할 것이다.
작업 뷰포트 회전 속성 설정부(212)와 결과 뷰포트 회전 속성 설정부(222)(232)(242)는 각각의 뷰포트의 디스플레이 영역(215)(225)(235)(245)의 회전 속성을 설정 및 변경하는 역할을 수행한다. 즉, 회전 속성 설정부는 도 2에 도시된 바와 같이 셀렉트 박스 형태로 구비되어, 각 뷰포트의 회전 속성을 설정 및 변경할 수 있도록 구비되는 것이다. 여기서 도면에는 회전 속성 설정부가 셀렉트 박스 형태로 구비되는 것으로 도시되어 있으나, 본 발명의 사상은 이에 제한되지 아니하며, 원하는 회전 속성을 직접 입력하는 등과 같은 다양한 방식이 가능할 것이다.
여기서, 설정할 수 있는 회전 속성은 랜드스케이프 모드(Landscape Mode) 및 포트레이트 모드(Portrait Mode)를 포함할 수 있다. 랜드스케이프 모드(Landscape Mode)란, 화면이 가로 방향으로 길게 놓이고, 애플리케이션의 레이아웃이 그에 맞추어 표시되는 상태를 의미한다. 한편, 포트레이트 모드(Portrait Mode)한 화면이 세로 방향으로 길게 놓이고, 애플리케이션의 레이아웃이 그에 맞추어 표시되는 상태를 의미한다. 또한 이외에도 다양한 회전 속성이 설정가능하도록 제공될 수도 있다.
컴포넌트 선택부(250)는 작업 뷰포트(210)의 디스플레이 영역(215)에 배치될 컴포넌트를 선택할 수 있도록, 선택가능한 컴포넌트들이 디스플레이되는 영역을 의미한다. 여기서, 컴포넌트란 버튼, 테이블, 라디오 버튼, 콤보 박스, 텍스트 박스 등과 같이 화면 구성을 위한 표시 객체를 의미한다. 예를 들어, 사용자는 마우스를 이용하여 컴포넌트 선택부(250)에 디스플레이된 컴포넌트들 중 작업 뷰포트(210)의 디스플레이 영역(216) 상에 배치하고자 하는 컴포넌트를 드래그 앤 드롭(drag and drop) 방식으로 선택하여 배치할 수 있다.
한편 도면에는 도시되지 않았지만, 작업 뷰포트(210) 상에 배치된 각각의 컴포넌트(216)는 그 정렬 속성 및 크기 속성을 설정할 수 있도록 형성된다. 예를 들면, 작업 뷰포트(210) 상에 배치된 컴포넌트(216)를 우(右)-클릭하여 정렬 속성 설정 기능 또는 크기 속성 설정 기능을 선택할 경우, 팝업(pop-up) 형태로 컴포넌트(216)의 정렬 속성 및 크기 속성 설정 창(미도시)가 디스플레이될 수도 있다.
여기서, 컴포넌트의 정렬 속성이란 뷰포트 상에 배치된 컴포넌트의 정렬 기준을 어디에 둘 것인지를 결정하는 속성이다. 여기서 각각의 컴포넌트에 대해 선택가능한 정렬 속성의 예시로는, X축 좌측 정렬(Xalign = Left), X축 가운데 정렬(Xalign = Center), X축 우측 정렬(Xalign = Right), Y축 상단 정렬(Yalign = Top), Y축 가운데 정렬(Yalign = Middle), Y축 하단 정렬(Yalign = Bottom)을 들 수 있다.
예를 들어, 컴포넌트의 정렬 속성으로써 X축 좌측 정렬(Xalign = Left)이 설정되면, 화면의 왼쪽 모서리를 기준으로 컴포넌트의 배치가 변경된다. 즉, 정렬 속성이 X축 좌측 정렬일 경우, 화면의 가로 해상도가 변경되어도 해당 컴포넌트의 기준 x좌표는 변경되지 않는다. 한편, 컴포넌트의 정렬 속성으로써 X축 가운데 정렬(Xalign = Center)이 설정되면, 화면의 가로 해상도가 변경될 경우 dx의 1/2만큼 컴포넌트의 기준 x좌표가 조정된다. 즉, 화면 해상도가 변경될 때 해당 컴포넌트는 화면의 수평 중심을 기준으로 좌표가 결정되는 것처럼 표현된다. 한편, 컴포넌트의 정렬 속성으로써 X축 우측 정렬(Xalign = Right)이 설정되면, 화면의 오른쪽 모서리를 기준으로 컴포넌트의 배치가 변경된다. 즉, 화면의 가로 해상도가 변경되는 값(=dx) 만큼 컴포넌트의 기준 x좌표가 조정된다.
한편, 컴포넌트의 정렬 속성으로써 Y축 상단 정렬(Yalign = Top)이 설정되면, 화면의 상단 모서리를 기준으로 컴포넌트의 배치가 변경된다. 즉, 정렬 속성이 Top인 경우 화면의 세로 해상도가 변경되어도 해당 컴포넌트의 기준 y좌표는 변경되지 않는다. 한편, 컴포넌트의 정렬 속성으로써 Y축 가운데 정렬(Yalign = Middle)이 설정되면, 화면의 세로 해상도가 변경될 경우 dy의 1/2만큼 컴포넌트의 기준 y좌표가 조정된다. 즉, 화면 해상도가 변경될 때 해당 컴포넌트는 화면의 수직 중심을 기준으로 좌표가 결정되는 것처럼 표현된다. 한편, 컴포넌트의 정렬 속성으로써 Y축 하단 정렬(Yalign = Bottom)이 설정되면, 화면의 하단 모서리를 기준으로 컴포넌트의 배치가 변경된다. 즉, 화면의 가로 해상도가 변경되는 값(=dy) 만큼 컴포넌트의 기준 y좌표가 조정된다.
여기서, X축에 대한 정렬 속성과 Y축에 대한 정렬 속성은 서로 독립적으로 선택가능하다. 즉, X축에 대한 정렬 속성 세 가지 중 하나와, Y축에 대한 정렬 속성 세 가지 중 하나를 각각 선택하여 조합하는 것이 가능하다.
여기서, X축에 대한 정렬 속성과 Y축에 대한 정렬 속성으로써 총 6가지 속성을 기술하였으나, 본 발명의 사상은 이에 제한되지 아니하며, 컴포넌트의 배치 및 이동에 맞추어 다양한 종류의 정렬 속성들이 설정될 수 있을 것이다.
한편, 컴포넌트의 크기 속성이란 화면 해상도가 변경되거나 컴포넌트의 레이아웃이 변경될 경우, 뷰포트 상에 배치된 컴포넌트의 크기를 결정하기 위한 속성이다. 여기서 각각의 컴포넌트에 대해 선택가능한 크기 속성의 예시로는, X축 크기 가변(Xscale=True), X축 크기 고정(Xscale=False), Y축 크기 가변(Yscale=True), Y축 크기 고정(Yscale=False)을 들 수 있다.
예를 들어, 컴포넌트의 정렬 속성으로써 X축 크기 가변(Xscale=True)이 설정되면, 화면 해상도가 변경되거나 컴포넌트의 레이아웃이 변경될 경우, 컴포넌트의 X 방향 크기를 조정하여, 화면의 가로 해상도가 변경될 경우, dx만큼 컴포넌트의 폭(width)을 조정한다. 한편, 컴포넌트의 정렬 속성으로써 X축 크기 고정(Xscale=False)이 설정되면, 화면 해상도가 변경되거나 컴포넌트의 레이아웃이 변경될 경우, 컴포넌트의 X 방향 크기를 조정하지 않으며, 따라서 화면의 가로 해상도가 변경되어도 컴포넌트의 폭(width)을 조정하지 않는다.
한편, 컴포넌트의 정렬 속성으로써 Y축 크기 가변(Yscale=True)이 설정되면, 화면 해상도가 변경되거나 컴포넌트의 레이아웃이 변경될 경우, 컴포넌트의 Y 방향 크기를 조정하여, 화면의 세로 해상도가 변경될 경우, dy만큼 컴포넌트의 높이(height)를 조정한다. 한편, 컴포넌트의 정렬 속성으로써 Y축 크기 고정(Yscale=False)이 설정되면, 화면 해상도가 변경되거나 컴포넌트의 레이아웃이 변경될 경우, 컴포넌트의 Y 방향 크기를 조정하지 않으며, 따라서 화면의 세로 해상도가 변경되어도 컴포넌트의 높이(height)를 조정하지 않는다.
여기서, X축에 대한 크기 속성과 Y축에 대한 크기 속성은 서로 독립적으로 선택가능하다. 즉, X축에 대한 크기 속성 두 가지 중 하나와, Y축에 대한 크기 속성 두 가지 중 하나를 각각 선택하여 조합하는 것이 가능하다.
여기서, X축에 대한 크기 속성과 Y축에 대한 크기 속성으로써 총 4가지 속성을 기술하였으나, 본 발명의 사상은 이에 제한되지 아니하며, 컴포넌트의 배치 및 이동에 맞추어 다양한 종류의 크기 속성들이 설정될 수 있을 것이다.
한편, 제어부(120)는 사용자 인터페이스부(110)로부터의 입력 신호에 의하여, 작업 뷰포트(210)의 디스플레이 영역(215) 상에 하나 이상의 컴포넌트(216)가 배치되거나 또는 배치된 하나 이상의 컴포넌트(216)의 레이아웃(layout)이 변경되면, 복수 개의 결과 뷰포트(220)(230)(240)의 디스플레이 영역(225)(235)(245) 상에 컴포넌트(216)의 배치 또는 컴포넌트(216)의 레이아웃의 변경이 실시간으로 적용되어 디스플레이되도록 제어하는 역할을 수행한다.
한편, 데이터베이스(150)는 뷰포트 데이터베이스(151) 및 컴포넌트 데이터베이스(152)를 포함할 수 있다. 여기서, 뷰포트 데이터베이스(151)는 작업 뷰포트(210) 및 결과 뷰포트(220)(230)(240) 각각의 회전 속성 및 해상도 속성 등을 저장할 수 있다. 그리고, 컴포넌트 데이터베이스(152)는 작업 뷰포트(210)에 배치된 각 컴포넌트(216)의 회전 속성 및 해상도 속성 등을 저장할 수 있다.
도 4 내지 도 6은, 작업 뷰포트의 해상도가 (100 * 100)에서 (200 * 200)으로 변경되었을 때, 작업 뷰포트 상에서 상기 해상도의 변경이 실시간으로 적용되어 디스플레이된 결과를 나타내는 도면이다.
도 4 내지 도 6은 작업 뷰포트(210)의 디스플레이 영역(215)의 해상도가 (100 * 100)에서 (200 * 200)이다.
도 4은 컴포넌트(216)의 크기 속성은 설정되어 있지 않다고 가정하고, 정렬 속성이 변화함에 따른 컴포넌트(216)의 위치 변경을 나타낸다.
즉, 컴포넌트(216)의 정렬 속성이 X축 좌측 정렬(Xalign = Left) 및 Y축 상단 정렬(Yalign = Top)로 설정되어 있을 경우, 작업 뷰포트(210)의 디스플레이 영역(215)의 해상도가 (100 * 100)에서 (200 * 200)으로 변화하면, 변화된 작업 뷰포트(250) 상에서 컴포넌트(256a)는 좌측 상단에 정렬되어 위치하게 되며, 컴포넌트(256a)의 크기에는 변화가 없다.
한편, 컴포넌트(216)의 정렬 속성이 X축 가운데 정렬(Xalign = Center) 및 Y축 가운데 정렬(Yalign = Middle)로 설정되어 있을 경우, 작업 뷰포트(210)의 디스플레이 영역(215)의 해상도가 (100 * 100)에서 (200 * 200)으로 변화하면, 변화된 작업 뷰포트(250) 상에서 컴포넌트(256e)는 가운데에 정렬되어 위치하게 되며, 컴포넌트(256a)의 크기에는 변화가 없다.
한편, 컴포넌트(216)의 정렬 속성이 X축 우측 정렬(Xalign = Right) 및 Y축 하단 정렬(Yalign = Bottom)로 설정되어 있을 경우, 작업 뷰포트(210)의 디스플레이 영역(215)의 해상도가 (100 * 100)에서 (200 * 200)으로 변화하면, 변화된 작업 뷰포트(250) 상에서 컴포넌트(256i)는 우측 하단에 정렬되어 위치하게 되며, 컴포넌트(256a)의 크기에는 변화가 없다.
더불어, X축 정렬에 대한 세 가지 속성(X축 좌측 정렬(Xalign = Left), X축 가운데 정렬(Xalign = Center), X축 우측 정렬(Xalign = Right))과 Y축 정렬에 대한 세 가지 속성(Y축 상단 정렬(Yalign = Top), Y축 가운데 정렬(Yalign = Middle), Y축 하단 정렬(Yalign = Bottom)) 각각에 대한 다양한 조합이 가능하다 할 것이다.
도 5는 컴포넌트(316)의 정렬 속성은 설정되어 있지 않다고 가정하고, 크기 속성이 변화함에 따른 컴포넌트(316)의 위치 변경을 나타낸다.
즉, 컴포넌트(316)의 크기 속성이 X축 크기 고정(Xscale=False) 및 Y축 크기 고정(Yscale=False)으로 설정되어 있을 경우, 작업 뷰포트(310)의 디스플레이 영역(315)의 해상도가 (100 * 100)에서 (200 * 200)으로 변화하면, 변화된 작업 뷰포트(350a) 상에서 컴포넌트(356a)의 크기 및 위치에는 변화가 없다.
한편, 컴포넌트(316)의 크기 속성이 X축 크기 가변(Xscale=True) 및 Y축 크기 고정(Yscale=False)으로 설정되어 있을 경우, 작업 뷰포트(310)의 디스플레이 영역(315)의 해상도가 (100 * 100)에서 (200 * 200)으로 변화하면, 변화된 작업 뷰포트(350b) 상에서 컴포넌트(356b)의 X축 방향의 크기는 X축 방향의 해상도 증가량만큼 증가하고, Y축 방향의 크기는 변화없으며, 디스플레이 영역(355b)에 대한 컴포넌트(356b)의 우측 상단 모서리의 위치에는 변화가 없다.
한편, 컴포넌트(316)의 크기 속성이 X축 크기 고정(Xscale=False) 및 Y축 크기 가변(Yscale=True)으로 설정되어 있을 경우, 작업 뷰포트(310)의 디스플레이 영역(315)의 해상도가 (100 * 100)에서 (200 * 200)으로 변화하면, 변화된 작업 뷰포트(350c) 상에서 컴포넌트(356c)의 Y축 방향의 크기는 Y축 방향의 해상도 증가량만큼 증가하고, X축 방향의 크기는 변화없으며, 디스플레이 영역(355c)에 대한 컴포넌트(356c)의 우측 상단 모서리의 위치에는 변화가 없다.
한편, 컴포넌트(316)의 크기 속성이 X축 크기 가변(Xscale=True) 및 Y축 크기 가변(Yscale=True)으로 설정되어 있을 경우, 작업 뷰포트(310)의 디스플레이 영역(315)의 해상도가 (100 * 100)에서 (200 * 200)으로 변화하면, 변화된 작업 뷰포트(350d) 상에서 컴포넌트(356d)의 X축 방향의 크기는 X축 방향의 해상도 증가량만큼 증가하고, Y축 방향의 크기는 Y축 방향의 해상도 증가량만큼 증가하고, 디스플레이 영역(355d)에 대한 컴포넌트(356d)의 우측 상단 모서리의 위치에는 변화가 없다.
도 6은 컴포넌트(416)의 정렬 속성 및 크기 속성이 모두 설정되어 있을 경우의 컴포넌트(416)의 위치 변경을 나타낸다.
즉, 컴포넌트(416)의 정렬 속성이 X축 우측 정렬(Xalign = Right) 및 Y축 상단 정렬(Yalign = Top)로 설정되어 있고, 컴포넌트(416)의 크기 속성이 X축 크기 고정(Xscale=False) 및 Y축 크기 가변(Yscale=True)으로 설정되어 있을 경우, 작업 뷰포트(410)의 디스플레이 영역(415)의 해상도가 (100 * 100)에서 (200 * 200)으로 변화하면, 변화된 작업 뷰포트(450) 상에서 컴포넌트(456)의 Y축 방향의 크기는 Y축 방향의 해상도 증가량만큼 증가하고, X축 방향의 크기는 변화없으며, 변화된 작업 뷰포트(450) 상에서 컴포넌트(456)는 우측 상단에 정렬되어 위치하게 되는 것이다.
이하에서는 본 발명의 유저 인터페이스 제작 시스템이 실제 적용되는 적용예에 대해서 설명하도록 한다.
도 7 내지 도 10은, 도 1의 유저 인터페이스 제작 시스템을 이용하여 작업 뷰포트 상에서 컴포넌트의 레이아웃이 변경되었을 때, 복수 개의 결과 뷰포트 상에서 상기 컴포넌트의 레이아웃의 변경이 실시간으로 적용되어 디스플레이된 결과를 나타내는 도면이다. 도 7 내지 도 10에서 작업 뷰포트(210)의 디스플레이 영역(215)의 해상도가 (100 * 100)이고, 제1 결과 뷰포트(220)의 디스플레이 영역(225)의 해상도가 (100 * 100)이고, 제2 결과 뷰포트(230)의 디스플레이 영역(235)의 해상도가 (200 * 100)이고, 제3 결과 뷰포트(240)의 디스플레이 영역(245)의 해상도가 (100 * 200)이고, 제4 결과 뷰포트(250)의 디스플레이 영역(255)의 해상도가 (200 * 200)이다.
도 7은 컴포넌트(216)에는 정렬 속성 및 크기 속성이 설정되어 있지 않은 경우, 작업 뷰포트(210) 상에서 컴포넌트(216)가 화살표 A 방향으로 X축 방향으로 30, Y축 방향으로 30만큼 이동되었을 때의 각 결과 뷰포트(220)(230)(240)(250)의 변화를 나타내는 도면이다. 이 경우, 결과 뷰포트(220)(230)(240)(250) 상에서 컴포넌트(226)(236)(246)(256)의 위치 및 크기에는 변화가 없음을 볼 수 있다.
도 8은 컴포넌트(216)의 정렬 속성은 X축 우측 정렬(Xalign = Right) 및 Y축 하단 정렬(Yalign = Bottom)로 설정되어 있고, 크기 속성은 설정되어 있지 않은 경우, 작업 뷰포트(210) 상에서 컴포넌트(216)가 화살표 A 방향으로 X축 방향으로 30, Y축 방향으로 30만큼 이동되었을 때의 각 결과 뷰포트(220)(230)(240)(250)의 변화를 나타내는 도면이다. 이 경우, 결과 뷰포트(220)(230)(240)(250) 상에서 컴포넌트(226)(236)(246)(256)의 크기에는 변화가 없고, 위치는 우측 하단으로 이동되었음을 볼 수 있다.
도 9는 컴포넌트(216)의 크기 속성은 X축 크기 가변(Xscale=True) 및 Y축 크기 가변(Yscale=True)으로 설정되어 있고, 정렬 속성은 설정되어 있지 않은 경우, 작업 뷰포트(210) 상에서 컴포넌트(216)가 화살표 A 방향으로 X축 방향으로 30, Y축 방향으로 30만큼 이동되었을 때의 각 결과 뷰포트(220)(230)(240)(250)의 변화를 나타내는 도면이다. 이 경우, 결과 뷰포트(220)(230)(240)(250) 상에서 컴포넌트(226)(236)(246)(256)의 디스플레이 영역(225)(235)(245)(255)에 대한 우측 하단 모서리의 위치는 변화가 없고, 크기는 작업 뷰포트(210)와의 해상도의 차이만큼 변화하였음을 볼 수 있다.
도 10은 컴포넌트(216)의 정렬 속성은 X축 우측 정렬(Xalign = Right) 및 Y축 상단 정렬(Yalign = True)로 설정되어 있고, 컴포넌트(216)의 크기 속성은 X축 크기 고정(Xscale=False) 및 Y축 크기 가변(Yscale=True)으로 설정되어 있는 경우, 작업 뷰포트(210) 상에서 컴포넌트(216)가 화살표 A 방향으로 X축 방향으로 30, Y축 방향으로 30만큼 이동되었을 때의 각 결과 뷰포트(220)(230)(240)(250)의 변화를 나타내는 도면이다. 이 경우, 결과 뷰포트(250) 상에서 컴포넌트(256)의 디스플레이 영역에 대한 X축 방향의 위치는 오른쪽 정렬이고, Y축 방향의 위치는 상단 정렬이며, X축 방향 크기는 변화가 없고, Y축 방향 크기는 작업 뷰포트(210)와의 해상도의 차이만큼 변화하였음을 볼 수 있다.
이와 같은 본 발명에 의하여, 작업 뷰포트(210) 상에서 컴포넌트를 새롭게 배치하거나 또는 컴포넌트의 레이아웃을 변경할 경우, 서로 다른 해상도를 가진 다수 개의 결과 뷰포트(220)(230)(240)(250) 상에서 컴포넌트의 레이아웃의 변경을 실시간으로 확인할 수 있다. 따라서, 하나의 애플리케이션이 다양한 해상도의 디지털 디스플레이 기기에서 사용상 위화감 없는 레이아웃을 표현해내도록 하는 개발 작업을 돕기 위한 도구로 활용되는 효과를 얻을 수 있다. 또한 애플리케이션 개발자가 실시간으로 화면 구성 문제를 인지하고 해결할 수 있도록 도와주어, 개발 및 유지보수에 투입되는 노력을 크게 절감할 수 있다.
이하에서는 본 발명의 일 실시예에 따른 유저 인터페이스 제작 방법에 대해서 상세히 설명하도록 한다.
도 3은 본 발명의 일 실시예에 따른 유저 인터페이스 제작 방법을 상세히 나타내는 흐름도이다. 도 1, 도 2 및 도 3을 참조하면, 본 발명의 일 실시예에 따른 유저 인터페이스 제작 방법은 애플리케이션이 실행되는 단계(S110 단계), 작업 뷰포트 및 하나 이상의 결과 뷰포트가 디스플레이되는 단계(S120 단계), 디스플레이된 작업 뷰포트 및 하나 이상의 결과 뷰포트에 회전 속성 및 해상도 속성을 설정하는 단계(S130 단계), 각 컴포넌트에 정렬 속성 및 크기 속성 부여되는 단계(S140 단계), 작업 뷰포트 상에 컴포넌트가 배치되는 단계(S150 단계), 하나 이상의 결과 뷰포트 상에 배치된 컴포넌트가 디스플레이(S160 단계), 작업 뷰포트 상에서 컴포넌트의 레이아웃이 변경되는 단계(S170 단계) 및 하나 이상의 결과 뷰포트 상에 변경된 레이아웃이 적용된 컴포넌트가 디스플레이(S180 단계)를 포함한다.
먼저, 유저 인터페이스 제작 시스템(100) 내에서 UI 빌더(User Interface Builder) 애플리케이션이 실행(S110 단계)된다. 그러면, 퍼스널 컴퓨터(personal computer), 태블릿 퍼스널 컴퓨터(tablet personal computer) 등의 디스플레이 장치 상에 디스플레이된 애플리케이션 실행 화면상에 작업 뷰포트(도 2의 210 참조) 및 하나 이상의 결과 뷰포트(도 2의 220, 230, 240 참조)가 디스플레이(S120 단계)된다.
이와 같이, 작업 뷰포트(210) 및 하나 이상의 결과 뷰포트(220)(230)(240)가 디스플레이된 상태에서, 작업 뷰포트(210) 및 하나 이상의 결과 뷰포트(220)(230)(240)에 회전 속성 및 해상도 속성을 설정(S130 단계)한다.
상세히, 작업 뷰포트 해상도 속성 설정부(211)와 결과 뷰포트 해상도 속성 설정부(221)(231)(241)는 각각의 뷰포트의 디스플레이 영역(215)(225)(235)(245)의 해상도 속성을 설정 및 변경하는 역할을 수행한다. 즉, 해상도 속성 설정부는 도 2에 도시된 바와 같이 셀렉트 박스 형태로 구비되어, 각 뷰포트의 해상도 속성을 설정 및 변경할 수 있도록 구비된다. 또한, 작업 뷰포트 회전 속성 설정부(212)와 결과 뷰포트 회전 속성 설정부(222)(232)(242)는 각각의 뷰포트의 디스플레이 영역(215)(225)(235)(245)의 회전 속성을 설정 및 변경하는 역할을 수행한다. 즉, 회전 속성 설정부는 도 2에 도시된 바와 같이 셀렉트 박스 형태로 구비되어, 각 뷰포트의 회전 속성을 설정 및 변경할 수 있도록 구비된다. 여기서, 설정할 수 있는 회전 속성은 랜드스케이프 모드(Landscape Mode) 및 포트레이트 모드(Portrait Mode)를 포함할 수 있다.
다음으로, 각 컴포넌트에 정렬 속성 및 크기 속성 부여(S140 단계)된다.
상세히, 컴포넌트의 정렬 속성이란 뷰포트 상에 배치된 컴포넌트의 정렬 기준을 어디에 둘 것인지를 결정하는 속성이다. 여기서 각각의 컴포넌트에 대해 선택가능한 정렬 속성의 예시로는, X축 좌측 정렬(Xalign = Left), X축 가운데 정렬(Xalign = Center), X축 우측 정렬(Xalign = Right), Y축 상단 정렬(Yalign = Top), Y축 가운데 정렬(Yalign = Middle), Y축 하단 정렬(Yalign = Bottom)을 들 수 있다.
한편, 컴포넌트의 크기 속성이란 화면 해상도가 변경되거나 컴포넌트의 레이아웃이 변경될 경우, 뷰포트 상에 배치된 컴포넌트의 크기를 결정하기 위한 속성이다. 여기서 각각의 컴포넌트에 대해 선택가능한 크기 속성의 예시로는, X축 크기 가변(Xscale=True), X축 크기 고정(Xscale=False), Y축 크기 가변(Yscale=True), Y축 크기 고정(Yscale=False)을 들 수 있다.
다음으로, 작업 뷰포트 상에 컴포넌트가 배치(S150 단계)되면, 하나 이상의 결과 뷰포트 상에 배치된 컴포넌트가 디스플레이(S160 단계)된다. 즉, 제어부(120)는 사용자 인터페이스부(110)로부터의 입력 신호에 의하여, 작업 뷰포트(210)의 디스플레이 영역(215) 상에 하나 이상의 컴포넌트(216)가 배치되면, 복수 개의 결과 뷰포트(220)(230)(240)의 디스플레이 영역(225)(235)(245) 상에 컴포넌트(216)의 배치가 실시간으로 적용되어 디스플레이되도록 제어하는 역할을 수행한다.
다음으로, 작업 뷰포트 상에서 컴포넌트 레이아웃이 변경되면(S170 단계), 하나 이상의 결과 뷰포트 상에 변경된 레이아웃이 적용된 컴포넌트가 디스플레이(S180 단계)된다. 즉, 제어부(120)는 사용자 인터페이스부(110)로부터의 입력 신호에 의하여, 작업 뷰포트(210)의 디스플레이 영역(215) 상에서 배치된 하나 이상의 컴포넌트(216)의 레이아웃(layout)이 변경되면, 복수 개의 결과 뷰포트(220)(230)(240)의 디스플레이 영역(225)(235)(245) 상에 컴포넌트(216)의 레이아웃의 변경이 실시간으로 적용되어 디스플레이되도록 제어하는 역할을 수행한다.
이와 같은 본 발명에 의하여, 작업 뷰포트(210) 상에서 컴포넌트를 새롭게 배치하거나 또는 컴포넌트의 레이아웃을 변경할 경우, 서로 다른 해상도를 가진 다수 개의 결과 뷰포트(220)(230)(240)(250) 상에서 컴포넌트의 레이아웃의 변경을 실시간으로 확인할 수 있다. 따라서, 하나의 애플리케이션이 다양한 해상도의 디지털 디스플레이 기기에서 사용상 위화감 없는 레이아웃을 표현해내도록 하는 개발 작업을 돕기 위한 도구로 활용되는 효과를 얻을 수 있다. 또한 애플리케이션 개발자가 실시간으로 화면 구성 문제를 인지하고 해결할 수 있도록 도와주어, 개발 및 유지보수에 투입되는 노력을 크게 절감할 수 있다.
본 명세서에서는 본 발명을 한정된 실시예를 중심으로 설명하였으나, 본 발명의 범위 내에서 다양한 실시예가 가능하다. 또한 설명되지는 않았으나, 균등한 수단도 또한 본 발명에 그대로 결합되는 것이라 할 것이다. 따라서 본 발명의 진정한 보호범위는 아래의 특허청구범위에 의하여 정해져야 할 것이다.
100: 유저 인터페이스 제작 시스템 110: 사용자 인터페이스부
120: 제어부 130: 뷰포트 속성 제어부
140: 컴포넌트 속성 제어부 150: 데이터베이스

Claims (16)

  1. 사용자 입력 신호를 수신하는 사용자 인터페이스부;
    단말기 상에 디스플레이되는 작업 뷰포트(viewport) 및 하나 이상의 결과 뷰포트(viewport) 각각의 디스플레이 속성을 제어하는 뷰포트 속성 제어부;
    상기 작업 뷰포트 상에 배치되는 하나 이상의 컴포넌트의 디스플레이 속성을 제어하는 컴포넌트 속성 제어부;
    상기 사용자 인터페이스부로부터의 입력 신호에 의하여, 상기 작업 뷰포트 상에 하나 이상의 컴포넌트가 배치되거나, 상기 배치된 하나 이상의 컴포넌트의 레이아웃(layout)이 변경되면, 상기 하나 이상의 결과 뷰포트 상에 상기 컴포넌트의 배치 또는 상기 컴포넌트의 레이아웃의 변경이 실시간으로 적용되어 디스플레이되도록 제어하는 제어부;를 포함하고,
    상기 컴포넌트 속성 제어부는 상기 작업 뷰포트 상에 배치되는 하나 이상의 컴포넌트 각각의 정렬 속성을 제어하는 정렬 속성 제어부 및 상기 작업 뷰포트 상에 배치되는 하나 이상의 컴포넌트 각각의 크기 속성을 제어하는 크기 속성 제어부 중 하나 이상을 포함하는 유저 인터페이스 제작 시스템.
  2. 제 1 항에 있어서,
    상기 뷰포트 속성 제어부는 상기 작업 뷰포트 및 상기 하나 이상의 결과 뷰포트 각각의 회전 속성을 제어하는 회전 속성 제어부 및 상기 작업 뷰포트 및 상기 하나 이상의 결과 뷰포트 각각의 해상도 속성을 제어하는 해상도 속성 제어부 중 하나 이상을 포함하는 유저 인터페이스 제작 시스템.
  3. 제 2 항에 있어서,
    상기 회전 속성은 랜드스케이프 모드(Landscape Mode) 및 포트레이트 모드(Portrait Mode)를 포함하는 것을 특징으로 하는 유저 인터페이스 제작 시스템.
  4. 제 2 항에 있어서,
    상기 제어부는, 상기 작업 뷰포트의 상기 회전 속성 또는 해상도 속성 중 하나 이상의 속성이 변경되면, 상기 하나 이상의 결과 뷰포트 상의 상기 컴포넌트의 레이아웃이 실시간으로 변경되도록 제어하는 것을 특징으로 하는 유저 인터페이스 제작 시스템.
  5. 삭제
  6. 제 1 항에 있어서,
    상기 정렬 속성은 X축 좌측 정렬(Xalign = Left), X축 가운데 정렬(Xalign = Center), X축 우측 정렬(Xalign = Right), Y축 상단 정렬(Yalign = Top), Y축 가운데 정렬(Yalign = Middle), Y축 하단 정렬(Yalign = Bottom) 중 하나 이상의 속성을 포함하는 것을 특징으로 하는 유저 인터페이스 제작 시스템.
  7. 제 1 항에 있어서,
    상기 크기 속성은 X축 크기 가변(Xscale=True), X축 크기 고정(Xscale=False), Y축 크기 가변(Yscale=True), Y축 크기 고정(Yscale=False) 중 하나 이상의 속성을 포함하는 것을 특징으로 하는 유저 인터페이스 제작 시스템.
  8. 제 1 항에 있어서,
    상기 제어부는, 상기 작업 뷰포트 상에 하나 이상의 컴포넌트가 배치되거나, 상기 배치된 하나 이상의 컴포넌트의 레이아웃(layout)이 변경되면, 상기 컴포넌트의 상기 정렬 속성 및 크기 속성에 따라, 상기 하나 이상의 결과 뷰포트 상에 상기 컴포넌트가 배치되거나 또는 상기 컴포넌트의 레이아웃이 변경되도록 제어하는 것을 특징으로 하는 유저 인터페이스 제작 시스템.
  9. 단말기 상에서 유저 인터페이스(user interface) 제작 애플리케이션이 실행되는 단계;
    상기 단말기 상에 작업 뷰포트(viewport) 및 하나 이상의 결과 뷰포트(viewport)가 디스플레이되는 단계;
    상기 작업 뷰포트 상에 하나 이상의 컴포넌트가 배치되거나, 상기 배치된 하나 이상의 컴포넌트의 레이아웃(layout)이 변경되는 단계;
    상기 하나 이상의 결과 뷰포트 상에 상기 컴포넌트의 배치 또는 상기 컴포넌트의 레이아웃의 변경이 실시간으로 적용되어 디스플레이되는 단계;를 포함하고,
    상기 작업 뷰포트 상에 배치되는 하나 이상의 컴포넌트는 각각 정렬 속성 또는 크기 속성 중 하나 이상의 속성을 가지는 것을 특징으로 하는 유저 인터페이스 제작 방법.
  10. 제 9 항에 있어서,
    상기 작업 뷰포트 및 상기 하나 이상의 결과 뷰포트 각각의 회전 속성 또는 해상도 속성 중 하나 이상의 속성이 변경 가능하도록 형성되는 것을 특징으로 하는 유저 인터페이스 제작 방법.
  11. 제 10 항에 있어서,
    상기 회전 속성은 랜드스케이프 모드(Landscape Mode) 및 포트레이트 모드(Portrait Mode)를 포함하는 것을 특징으로 하는 유저 인터페이스 제작 방법.
  12. 제 10 항에 있어서,
    상기 작업 뷰포트의 상기 회전 속성 또는 해상도 속성 중 하나 이상의 속성이 변경되면, 상기 하나 이상의 결과 뷰포트 상의 상기 컴포넌트의 레이아웃이 실시간으로 변경되는 것을 특징으로 하는 유저 인터페이스 제작 방법.
  13. 삭제
  14. 제 9 항에 있어서,
    상기 정렬 속성은 X축 좌측 정렬(Xalign = Left), X축 가운데 정렬(Xalign = Center), X축 우측 정렬(Xalign = Right), Y축 상단 정렬(Yalign = Top), Y축 가운데 정렬(Yalign = Middle), Y축 하단 정렬(Yalign = Bottom) 중 하나 이상의 속성을 포함하는 것을 특징으로 하는 유저 인터페이스 제작 방법.
  15. 제 9 항에 있어서,
    상기 크기 속성은 X축 크기 가변(Xscale=True), X축 크기 고정(Xscale=False), Y축 크기 가변(Yscale=True), Y축 크기 고정(Yscale=False) 중 하나 이상의 속성을 포함하는 것을 특징으로 하는 유저 인터페이스 제작 방법.
  16. 제 9 항에 있어서,
    상기 작업 뷰포트 상에 하나 이상의 컴포넌트가 배치되거나, 상기 배치된 하나 이상의 컴포넌트의 레이아웃(layout)이 변경되면,
    상기 컴포넌트의 상기 정렬 속성 및 크기 속성에 따라, 상기 하나 이상의 결과 뷰포트 상에 상기 컴포넌트가 배치되거나 또는 상기 컴포넌트의 레이아웃이 변경되는 것을 특징으로 하는 유저 인터페이스 제작 방법.
KR1020110095843A 2011-09-22 2011-09-22 유저 인터페이스 제작 시스템 및 제작 방법 KR101239943B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020110095843A KR101239943B1 (ko) 2011-09-22 2011-09-22 유저 인터페이스 제작 시스템 및 제작 방법

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020110095843A KR101239943B1 (ko) 2011-09-22 2011-09-22 유저 인터페이스 제작 시스템 및 제작 방법

Publications (1)

Publication Number Publication Date
KR101239943B1 true KR101239943B1 (ko) 2013-03-06

Family

ID=48181209

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020110095843A KR101239943B1 (ko) 2011-09-22 2011-09-22 유저 인터페이스 제작 시스템 및 제작 방법

Country Status (1)

Country Link
KR (1) KR101239943B1 (ko)

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2005339443A (ja) * 2004-05-31 2005-12-08 Internatl Business Mach Corp <Ibm> 解像度が異なる複数のウィンドウを表示するためのシステム、方法およびプログラム
KR20070044102A (ko) * 2005-10-24 2007-04-27 강기용 3차원 텍스타일 디자인 방법, 및 텍스타일 디자인프로그램을 기록한 컴퓨터-판독가능 저장매체

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2005339443A (ja) * 2004-05-31 2005-12-08 Internatl Business Mach Corp <Ibm> 解像度が異なる複数のウィンドウを表示するためのシステム、方法およびプログラム
KR20070044102A (ko) * 2005-10-24 2007-04-27 강기용 3차원 텍스타일 디자인 방법, 및 텍스타일 디자인프로그램을 기록한 컴퓨터-판독가능 저장매체

Similar Documents

Publication Publication Date Title
US10282067B2 (en) Method and apparatus of controlling an interface based on touch operations
KR100818918B1 (ko) 윈도우의 배치를 관리하는 장치 및 그 방법
KR100686165B1 (ko) 오에스디 기능 아이콘을 갖는 휴대용 단말기 및 이를이용한 오에스디 기능 아이콘의 디스플레이 방법
US9870144B2 (en) Graph display apparatus, graph display method and storage medium
RU2010146079A (ru) Прокрутка изображения виртуального рабочего стола
JP6313395B1 (ja) 描画処理方法、描画処理プログラム及び描画処理装置
KR20150032093A (ko) 사용자 인터페이스를 편집하는 단말기 및 방법
US9679353B2 (en) Plan display device that displays enlarged/reduced image of original image with indication and plan display program for displaying same
CN110865763A (zh) 一种支持多屏多输入法应用的方法和装置
US10535118B2 (en) Display apparatus, controlling method thereof, and terminal thereof
US9501206B2 (en) Information processing apparatus
KR101239943B1 (ko) 유저 인터페이스 제작 시스템 및 제작 방법
JP2012222517A (ja) 投影装置、その制御方法及びプログラム
CN110865718A (zh) 一种支持输入法应用在多屏切换的方法和装置
KR20070045061A (ko) 3차원 그래픽 유저 인터페이스를 위한 네비게이션 장치
JP2015153083A (ja) 表示制御プログラム、装置、及び方法
JP6373710B2 (ja) 図形処理装置および図形処理プログラム
JP6526851B2 (ja) 図形処理装置および図形処理プログラム
JP2010203956A (ja) 棒グラフ表示装置
JP5397388B2 (ja) 情報処理装置、情報処理方法およびプログラム
CN111273802A (zh) 一种在屏幕上移动对象的方法及触摸显示装置
JP6655880B2 (ja) 表示制御装置、表示制御方法及びプログラム
JP2015200975A (ja) 情報処理装置、コンピュータプログラムおよび記録媒体
JP2020071838A (ja) 表示システム、及び表示プログラム
US10318053B2 (en) Control device for electronic apparatus and control method for electronic apparatus

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
LAPS Lapse due to unpaid annual fee