KR101567455B1 - 쌍방향 사용자 인터페이스 정의 - Google Patents

쌍방향 사용자 인터페이스 정의 Download PDF

Info

Publication number
KR101567455B1
KR101567455B1 KR1020107006259A KR20107006259A KR101567455B1 KR 101567455 B1 KR101567455 B1 KR 101567455B1 KR 1020107006259 A KR1020107006259 A KR 1020107006259A KR 20107006259 A KR20107006259 A KR 20107006259A KR 101567455 B1 KR101567455 B1 KR 101567455B1
Authority
KR
South Korea
Prior art keywords
graphics
state
interactive
user interface
full
Prior art date
Application number
KR1020107006259A
Other languages
English (en)
Other versions
KR20100082826A (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 프로스케이프 테크놀로지즈, 인크.
Publication of KR20100082826A publication Critical patent/KR20100082826A/ko
Application granted granted Critical
Publication of KR101567455B1 publication Critical patent/KR101567455B1/ko

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)
  • Stored Programmes (AREA)

Abstract

하나 이상의 상태들 및 하나 이상의 쌍방향 요소를 포함하는 쌍방향의 사용자 인터페이스를 정의하기 위한 방법과 시스템이 개시된다. 본 방법의 예시적인 실행은 쌍방향 사용자 인터페이스의 각 상태에 대한 쌍방향 사용자 인터페이스의 하나의 전체 화면 그래픽들을 입력하는 단계와, 하나 이상의 쌍방향 요소들 각각에 대한 상기 쌍방향 사용자 인터페이스 내의 영역을 정의하는 단계와, 각각의 쌍방향 요소의 각 상태의 그래픽 표시를 가능하게 하는 컴퓨터 판독가능한 코드 또는 그래픽들을 자동으로 생성하는 단계를 포함한다. 본 방법은 하나 이상의 쌍방향 요소 각각에 대응하여 정의된 쌍방향 사용자 인터페이스의 영역의 기하학적 특징과 위치 정보를 저장하는 단계를 더 포함할 수 있다. 저장된 기하학적 특징 및 위치 정보가 이용되어 쌍방향 사용자 인터페이스의 편집과 수정을 용이하게 할 수 있다.

Description

쌍방향 사용자 인터페이스 정의{DEFINING AN INTERACTIVE USER INTERFACE}
본 발명은 일반적으로 쌍방향의 컴퓨터 사용자 인터페이스들을 정의하기 위한 방법 및 시스템에 관한 것이다.
본 출원은 본 명세서에서 원용되고 있는 2007년 8월 22일 출원된 발명의 명칭이 "쌍방향 사용자 인터페이스 정의(DEFINING AN INTERACTIVE USER INTERFACE)"인 미국 가출원 제60/957,354호에 기초하여 우선권을 주장한다.
쌍방향 어플리케이션은 예컨대 버튼과 같이 일반적으로 쌍방향 요소들로 이루어진 사용자 인터페이스를 갖는다. 쌍방향 요소들은 일반적으로 사용자의 동작에 응답하는 다양한 상태를 갖는다. 사용자는 인터페이스 내에서 포인터를 다양한 위치에 두기 위해 일반적으로 컴퓨터 마우스인 포인팅 장치를 이용할 수 있다. 마우스 포인터를 쌍방향 요소(롤오버, rollover) 위에 두는 것과 같은 사용자의 동작에 응답하여, 다른 상태의 쌍방향 요소를 나타내기 위해 마우스 포인터 아래의 쌍방향 요소는 다른 그래픽으로 표시될 수 있다.
관례상, 쌍방향 인터페이스 내의 쌍방향 요소들은 오직 하나의 상태(정상 상태) 또는 두 가지 상태(정상 상태 및 롤오버 상태)를 갖는 정도로 간단할 수도 있고, 네 가지 상태(정상 상태, 롤오버 상태, 눌림 상태 및 사용 불가 상태) 이상의 상태들을 갖는 정도로 복잡할 수도 있다. 쌍방향 인터페이스의 제작자는 임의의 정의된 요소에 다양한 소정 기능들을 결합시킬 수 있다.
오늘날, 쌍방향 어플리케이션은 일반적으로 "절단 및 배치(cutting and placing)"로 알려진 방법에 의해 구축된다. 우선, 마이크로소프트(등록상표)(Microsoft®) 페인트(Paint) 또는 어도비(등록상표)(Adobe®) 포토샵(등록상표)(Photoshop®)과 같은 그래픽 생성 및 편집 소프트웨어가 인터페이스의 전반적인 외관 및 레이아웃을 만드는 데 이용된다. 각각의 개별 쌍방향 요소들의 각 상태에 대한 그래픽들은 일반적으로 전체 레이아웃으로부터 해당 요소를 정의하고 절단한 후, 개별 파일로서 저장함으로써 생성된다. 버튼과 같은 두 가지 상태 요소의 경우, 이는 통상 정상 상태로 표시되지만 이후 마우스 위치에 응답하여 롤오버 상태로 표시된다. 제작자는 버튼의 롤오버 상태에 대해 적어도 하나의 이미지와 정확한 기하학적 위치에서 버튼의 표준 이미지를 포함하는 배경 이미지를 수동으로 생성하여 저장한다. 이 방법은 복수의 쌍방향 요소가 요구되는 경우와 같이, 쌍방향 인터페이스가 복잡한 경우, 많은 그래픽 파일들을 절단하여 배치해야 한다. 특정 예로서, 복수의 상태를 갖는 여러 요소들을 포함하는 인터페이스의 경우, 생성을 요하는 이미지 "I"의 개수는 I=(E×(S-1))+1이며, 이때 "E"는 인터페이스에서 쌍방향 요소들의 개수이고 "S"는 상태들의 수이다(모든 요소들은 동일한 수의 상태들을 갖는다고 가정). 다른 예들은 각각의 개별적 쌍방향 요소의 각 상태에 대해 그래픽이 생성되도록 요구한다. 이런 다른 예들의 경우, 제작자가 생성하고 관리해야만 하는 그래픽의 수는 I=(E×S)+1로 증가한다.
구축 과정의 두 번째 단계는 인터페이스 내의 적절한 기하학적 위치에 생성된 이미지들을 배치할 것을 요구한다. 최종 인터페이스를 생성하기 위해, 제작자는 일반적으로 어도비(Adobe®) 플래시(등록상표)(Flash®) 또는 마이크로소프트 비쥬얼스튜디오(등록상표)(Visual Studio®)와 같은 제2 소프트웨어 어플리케이션을 필요로 한다. 제작자는 이런 툴들을 이용하여 배경 그래픽에 대해 각각의 쌍방향 요소의 각 상태에 대한 개별 이미지를 배치함으로써, 전체 레이아웃 내에서 요소들의 정확한 최초 위치에 쌍방향 요소의 각 상태 이미지를 다시 배치하고자 시도한다. 절단 단계에서 개별 그래픽 파일들이 각 요소에 대해 생성되어 저장될 때, 이 파일들은 크기 정보만을 보유하고, 요소가 절단된 전체 인터페이스에 관련된 위치 정보는 보유하지 않는다. 파일에 고유한 위치 정보가 없기 때문에, 제작자는 일반적으로 여러 번의 고생스러운 시도와 실수를 통해 의도하는 모양이 달성되도록 그래픽의 완성된 개별 조각들을 각각 수동으로 늘어 놓아야만 한다.
마지막으로, 사전 결정된 기능이 사용자 입력에 응답하여 각 요소의 각 상태에 할당되도록 하기 위해, 각각의 쌍방향 요소의 각 상태에 대한 그래픽을 조립하고 기능성을 정의해야만 한다. 출력 플랫폼에 따라서, 이런 정의 작업은 전체 인터페이스에서 요소 층을 재결합하는 동안 또는 별도의 단계로서 수행될 수 있다. 전체 프로세스는 시간 소모적이고 실수하기가 쉬워서 "절단 및 배치" 작업과 정의 및 재결합 작업을 비효율적이고 고생스럽게 만든다. 만일 제작자가 나중에 하나 이상의 요소의 하나 이상의 상태에 대해 이미지를 변경하고자 하거나 어떤 상태를 추가하고자 할 경우, 각각의 요소들을 "절단 및 배치"하고 정의 및 재결합하는 전체 프로세스가 완전히 다시 수행되어야만 한다.
본 발명은 쌍방향 사용자 인터페이스를 정의하기 위한 시스템을 제공하며, 하나 이상의 상태를 갖는 쌍방향 사용자 인터페이스의 적어도 하나의 전체 화면 그래픽들을 입력하기 위한 그래픽 유저 인터페이스(graphical user interface)를 포함한다. 적어도 하나의 전체 화면 그래픽들 각각은 쌍방향 사용자 인터페이스의 하나의 상태와 관련될 수 있다. 적어도 하나의 전체 화면 그래픽들 중 임의의/각각의 전체 화면 그래픽 내에서 표시되는 하나 이상의 쌍방향 요소들 중 임의의/각각의 쌍방향 요소에 대응하는 쌍방향 사용자 인터페이스 내에서 영역을 한정하기 위한 쌍방향 그래픽 툴이 포함될 수 있다. 하나 이상의 쌍방향 요소들 각각에 대응하여 정의된 쌍방향 사용자 인터페이스의 영역의 기하학적 특징 및 위치 정보를 저장하기 위한 데이터 저장 장치가 포함될 수 있다. 또한, 하나 이상의 정의된 쌍방향 요소들 각각의 각 상태를 표시할 수 있도록 하는 컴퓨터 판독가능한 코드 또는 그래픽들을 자동으로 생성하기 위하여 출력 제너레이터가 포함될 수 있다.
본 발명의 일 양태에 따르면, 하나 이상의 정의된 쌍방향 요소들 각각의 각 상태에 대한 코드 또는 그래픽들은 각각의 상태에 대해 입력된 각각의 전체 화면 그래픽들과 각각의 쌍방향 요소에 대해 정의되어 저장된 기하학적 특징 및 위치 정보로부터 생성된다. 다른 양태에 따르면, 하나 이상의 정의된 쌍방향 요소들 각각의 각 상태에 대한 그래픽들은 각각의 쌍방향 요소에 대해 정의되고 저장된 기하학적 특징 및 위치 정보에 의해 범위가 정해진 각각의 상태에 대해 입력된 전체 화면 그래픽들의 일부에 대응한다.
또 다른 양태에 따르면, 상기 출력 제너레이터에 의해 생성된 컴퓨터 판독가능한 코드는 각각의 상태 및 각각의 쌍방향 요소에 대한 사용자 입력에 응답하여 각각의 쌍방향 요소에 대해 쌍방향 사용자 인터페이스 내에서 정의된 영역에서 하나 이상의 쌍방향 요소들 각각의 각 상태를 컴퓨터가 표시할 수 있도록 한다. 시스템의 특정 실시예들에서, 쌍방향 사용자 인터페이스는 웹브라우저에서 표시된다.
본 발명의 시스템은 쌍방향 사용자 인터페이스의 하나의 상태에 대해 적어도 하나의 전체 화면 그래픽들 각각의 관련을 정의하기 위한 제2 그래픽 툴을 더 포함할 수 있다. 각각의 쌍방향 요소들의 각각의 상태에 기능성을 할당하기 위한 제3 그래픽 툴이 더 포함될 수 있다.
본 발명은 머신(machine)에 의해 적어도 부분적으로 실행되는 쌍방향 사용자 인터페이스를 정의하기 위한 방법을 제공한다. 본 방법은 하나 이상의 상태와 하나 이상의 쌍방향 요소를 갖는 쌍방향 사용자 인터페이스의 각 상태에 대해 쌍방향 사용자 인터페이스의 하나의 전체 스크린 그래픽들을 입력하는 단계와, 하나 이상의 쌍방향 요소들 각각에 대한 쌍방향 사용자 인터페이스 내의 영역을 정의하는 단계와, 각각의 쌍방향 요소의 각 상태의 그래픽 표시를 가능하게 하는 컴퓨터 판독가능한 코드 또는 그래픽들을 자동으로 생성하는 단계를 포함할 수 있다.
상기 방법의 일 실시예에서, 추가의 단계는 하나 이상의 쌍방향 요소들 각각에 대응하여 정의된 쌍방향 사용자 인터페이스의 영역의 기학학적 특성 및 위치 정보를 저장할 수 있다. 다른 실시예에서, 하나 이상의 정의된 쌍방향 요소들 각각의 각 상태에 대한 코드 또는 그래픽들은 각각의 상태에 대해 입력된 각각의 전체 화면 그래픽들과 각각의 쌍방향 요소에 대해 정의되고 저장된 기하학적 특징 및 위치 정보로부터 생성된다. 또 다른 실시예에서, 하나 이상의 정의된 쌍방향 요소들 각각의 각 상태에 대한 그래픽들은 각각의 쌍방향 요소에 대해 정의되고 저장된 상기 기하학적 특징 및 위치 정보에 의해 범위가 정해진 각각의 상태에 대해 입력된 전체 화면 그래픽들의 일부에 대응한다.
본 발명의 일 양태에서, 생성된 컴퓨터 판독가능한 코드는 각각의 상태 및 각각의 쌍방향 요소에 대한 사용자의 입력에 응답하여 각각의 쌍방향 요소에 대해 정의된 쌍방향 사용자 인터페이스 내의 영역에서 하나 이상의 쌍방향 요소들 각각의 각 상태를 컴퓨터가 표시할 수 있도록 한다. 다른 양태에서, 쌍방향 사용자 인터페이스는 웹브라우저에서 표시된다.
본 발명의 일 실시예에서, 쌍방향 사용자 인터페이스를 편집하는 추가의 단계는 추가 또는 교정될 각각의 쌍방향 요소에 대해 쌍방향 사용자 인터페이스 내의 영역을 정의하는 단계와, 추가 및 교정된 쌍방향 요소들을 포함하는 각각의 쌍방향 요소의 각 상태의 그래픽 표시를 가능하게 하는 컴퓨터 판독가능한 코드를 자동으로 생성하는 단계를 포함한다. 다른 실시예에서, 쌍방향 사용자 인터페이스를 편집하는 추가의 단계는 추가 또는 교정될 쌍방향 사용자 인터페이스의 각 상태에 대해 쌍방향 사용자 인터페이스의 하나의 전체 화면 그래픽들을 입력하는 단계와, 저장된 기하학적 특징으로부터 하나 이상의 쌍방향 요소들 각각에 대응하는 위치 정보를 검색하는 단계와, 추가 또는 교정된 전체 화면 그래픽들에 기초하여 각각의 쌍방향 요소의 각 상태의 그래픽 표시를 가능하게 하는 컴퓨터 판독가능한 코드를 자동으로 생성하는 단계를 포함한다.
본 발명은 적어도 일부가 머신에 의해 실행되는 쌍방향 사용자 인터페이스를 정의하기 위한 제2의 방법을 제공한다. 본 방법은 하나 이상의 상태 및 하나 이상의 쌍방향 요소를 갖는 쌍방향 사용자 인터페이스의 각 상태에 대해 쌍방향 사용자 인터페이스의 하나의 전체 화면 그래픽들을 입력하는 단계와, 쌍방향 사용자 인터페이스 내에 하나 이상의 쌍방향 요소들 각각에 대한 영역을 정의하는 단계와, 각각의 쌍방향 요소의 각 상태에 대해 개별 그래픽을 자동으로 생성하는 단계를 포함한다.
본 발명의 제2 방법의 일 양태에서, 각각의 쌍방향 요소의 각 상태에 대한 개별 그래픽은 각 상태에 대한 전체 화면 그래픽들과 각각의 쌍방향 요소에 대해 정의된 영역으로부터 생성된다. 다른 양태에서, 각각의 쌍방향 요소의 각 상태에 대한 개별 그래픽은 각각의 쌍방향 요소에 대해 정의된 영역에 의해 범위가 정해진 각 상태에 대한 상기 전체 화면 그래픽들의 일부이다.
제2 방법의 일 실시예는 하나 이상의 쌍방향 요소들 각각에 대응하여 정의된 쌍방향 사용자 인터페이스의 영역의 기하학적 특징 및 위치 정보를 저장하는 단계를 더 포함한다. 다른 실시예에서, 본 발명은 각각의 쌍방향 요소에 대해 그리고 각각의 상태에 대한 사용자 입력에 응답하여 쌍방향 사용자 인터페이스 내에서 정의된 영역에서 각각의 개별 그래픽을 컴퓨터가 표시하도록 하는 쌍방향 사용자 인터페이스의 컴퓨터 판독가능한 코드를 생성하는 단계를 더 포함한다.
본 발명은 도면과 결합한 다음의 설명을 참조하여 더욱 잘 이해될 것이다.
도 1은 본 발명이 실시될 수 있는 예시적인 컴퓨팅 환경을 도시한다.
도 2는 본 발명의 일 실시예에 따른 시스템 메모리에서 본 발명의 구성요소들의 일 예를 도시한다.
도 3은 본 발명의 일 실시예에 따른 비휘발성 컴퓨터 판독가능한 매체에 저장된 본 발명의 구성요소들의 일 예를 도시한다.
도 4는 본 발명의 방법 단계들의 양태들을 도시한 흐름도이다.
도 5a와 도 5b는 "절단 및 배치"하는 방법들의 일 예를 도시한다.
도 6a와 도 6b는 본 발명의 일 양태에 따라 도 5a와 도 5b에 도시된 바와 같은 동일한 쌍방향 요소들을 생성하기 위한 입력으로 이용되는 두 가지 예시적인 전체 화면 그래픽들을 도시한다.
도 7은 디자인 모드에서 본 발명의 일 실시예에 따른 예시적인 그래픽 인터페이스를 도시한다.
도 8a와 도 8b는 프리뷰 모드에서 본 발명의 일 실시예에 따른 예시적인 그래픽 인터페이스들을 도시한다.
컴퓨팅 환경의 예
도 1과 다음의 논의는 본 발명의 예시적 실시예가 실현될 수 있는 적절한 컴퓨팅 환경에 대해 간단한 일반적인 설명을 제공하기 위한 것이다. 그러나 모든 종류의 소형, 휴대용 및 다른 컴퓨팅 장치들이 본 발명과 연계하여 사용될 수 있음은 물론이다. 이하에서는 일반적인 목적의 컴퓨터를 설명하지만, 이는 일례에 불과하다. 또한, 본 발명은 네트워크 서버 정보 처리 상호 운용 및 상호 작용을 갖는 씬 클라이언트(thin client) 상에서 작업가능할 수 있다. 이에 따라, 본 발명의 예시적 실시예는 클라이언트 장치가 거의 없는 또는 최소한의 클라이언트 리소스들이 연루된 네트워크 호스트 서비스들의 환경, 예를 들어, 클라이언트 장치들이 월드 와이드 웹(WWW)에 대해 단지 브라우저 또는 인터페이스로서 역할을 하는 네트워크 환경에서 실시될 수 있다.
필수적이지는 않지만, 본 발명은 개발자 또는 시험자에 의해 사용되기 위한 용도로, 어플리케이션 프로그래밍 인터페이스(API)를 통해 구현되고 그리고/또는 하나 이상의 컴퓨터(예를 들어, 클라이언트 워크 스테이션들, 서버들 또는 기타 장치들)에 의해서 실행되고 있는 것으로, 프로그램 모듈들과 같이 컴퓨터에 의해 실행가능한 명령어의 일반적인 문맥으로 설명되는 네트워크 브라우징 소프트웨어에 포함될 수 있다. 일반적으로, 프로그램 모듈은 특정 업무를 수행하거나 특정 추상적 데이터 유형을을 구현하는 루틴, 프로그램, 객체, 콤포넌트, 데이터 구조 등을 포함한다. 통상적으로, 프로그램 모듈의 기능성은 다양한 실시예에서 바라는 대로 결합되거나 분산될 수 있다. 더욱이, 당업자는 본 발명이 다른 컴퓨터 시스템 구성 요소들을 이용하여 실행될 수 있음을 이해할 것이다. 본 발명과 함께 사용하기에 적절할 수 있는 기타 공지된 컴퓨팅 시스템, 환경 및/또는 구성으로는 개인용 컴퓨터(PC), 서버 컴퓨터, 소형 또는 랩탑 장치, 다중 프로세서 시스템, 마이크로프로세서 기반 시스템, 프로그램 가능한 소비자 가전, 네트워크 PC, 미니 컴퓨터, 메인프레임 컴퓨터 등이 있으며, 이에 한정되지 않는다. 또한, 본 발명의 일 실시예는 통신 네트워크나 기타 데이터 전송 매체를 통해 링크되는 원격 처리 장치들에 의해 작업이 수행되는 분산된 컴퓨팅 환경에서 구현될 수 있다. 분산된 컴퓨팅 환경에서, 프로그램 모듈은 메모리 저장 장치를 포함하는 로컬 및 원격 컴퓨터 저장 매체 모두에 마련될 수 있다.
따라서 도 1은 본 발명이 실행될 수 있는 적절한 컴퓨팅 환경(100)의 예를 도시한 것이며, 위에서 명확히 하였지만, 컴퓨팅 시스템 환경(100)은 적절한 컴퓨팅 환경의 일 예일 뿐이고 본 발명의 용도 또는 기능성의 범위에 대해 어떤 한정을 하고자 함이 아니다. 컴퓨팅 환경(100)은 예시적인 연산 환경(100)에 도시된 구성요소들의 어느 하나 또는 조합과 관련하여 어떤 의존성이나 요건을 갖는 것으로 해석되어서도 안 된다.
도 1을 참조하면, 본 발명을 실행하기 위한 시스템의 예는 컴퓨터(110) 형태의 일반 목적의 컴퓨팅 장치를 포함한다. 컴퓨터(110)의 구성요소로는 처리부(120)와, 시스템 메모리(130)와, 시스템 메모리를 포함하는 다양한 시스템 구성부품들을 처리부(120)에 연결하는 시스템 버스(121)가 있을 수 있으며, 이에 한정되지 않는다. 시스템 버스(121)는 다양한 버스 구조들 중 어느 하나를 이용하는 메모리 버스 또는 메모리 컨트롤러, 주변 버스 및 로컬 버스를 포함하는 여러 유형의 버스 구조들 중 어느 하나일 수 있다. 예컨대, 다음에 한정되지 않지만, 이런 구조는 산업 표준 구조(ISA) 버스, 마이크로 채널 구조(MCA) 버스, 확장된 산업 표준 구조(EISA) 버스, 영상 전자 표준 협회(VESA) 로컬 버스, 주변장치 연결(PCI) 버스(중2층(mezzanine) 버스로도 알려짐), 및 PCI-익스프레스 버스를 포함한다.
컴퓨터(110)는 통상적으로 다양한 컴퓨터 판독가능한 매체를 포함한다. 컴퓨터 판독가능한 매체는 컴퓨터(110)에 의해 억세스 가능한 임의의 가용 매체일 수 있고, 휘발성 및 비휘발성, 분리형 및 비분리형 매체를 모두 포함한다. 예컨대, 다음에 한정되지 않지만, 컴퓨터 판독가능한 매체는 컴퓨터 저장 매체와 통신 매체를 포함할 수 있다. 컴퓨터 저장 매체는 컴퓨터 판독가능한 명령어, 데이터 구조, 프로그램 모듈 또는 기타 데이터와 같은 정보의 저장을 위한 임의의 방법 또는 기술로 구현된 휘발성 및 비휘발성, 분리형 및 비분리형 매체를 모두 포함한다. 컴퓨터 저장 매체는 랜덤 억세스 메모리(RAM), 판독 전용 메모리(ROM), 전기적 소거형 프로그램가능한 판독 전용 메모리(EEPROM), 플래시 메모리 또는 다른 메모리 기술, 컴팩트 디스크 판독 전용 메모리(CDROM), 디지털 다기능 디스크(DVD) 또는 다른 광 디스크 기억장치, 마그네틱 카세트, 마그네틱 테이프, 마그네틱 디스크 기억장치 또는 다른 마그네틱 기억장치, 또는 원하는 정보를 저장하는데 이용될 수 있고 컴퓨터(110)에 의해 억세스 가능한 임의의 다른 매체를 포함하며, 이에 한정되는 않는다. 통신 매체는 통상적으로 컴퓨터 판독가능한 명령어, 데이터 구조, 또는 반송파나 기타 전송 메커니즘과 같이 변조된 데이터 신호의 프로그램 모듈 또는 기타 데이터를 실시하고 임의의 정보 전달 매체를 포함한다. "변조된 데이터 신호"라는 용어는 신호에 정보를 암호화하는 방식으로 설정 또는 변경된 특성들 중 하나 이상을 갖는 신호를 의미한다. 예컨대, 다음에 한정되지 않지만, 통신 매체는 유선 네트워크 또는 직접-유선 연결과 같은 유선 매체, 음향, 무선 주파수(RF), 적외선과 같은 무선 매체 및 다른 무선 매체를 포함한다. 상술한 임의의 것들의 조합 또한 컴퓨터 판독가능한 매체의 범위에 포함시켜야 할 것이다.
시스템 메모리(130)는 ROM(131) 및 RAM(132)과 같은 휘발성 및/또는 비휘발성 메모리 형태의 컴퓨터 저장 매체를 포함한다. 시동 동안과 같이 컴퓨터(111) 내의 구성요소들 간의 정보 전달을 돕는 기본 루틴들을 포함하는 기본 입/출력 시스템(BIOS, 133)은 통상적으로 ROM(131)에 저장된다. RAM(132)은 통상적으로 처리부(120)에 즉시 억세스 가능하고 그리고/또는 처리부(120)에 의해 현재 실행 중인 데이터 및/또는 프로그램 모듈을 담고 있다. 예컨대, 다음에 한정되지 않지만, 도 1은 운영 시스템(134), 응용 프로그램(135), 기타 프로그램 모듈(136) 및 프로그램 데이터(137)를 도시한다. RAM(132)은 기타 데이터 및/또는 프로그램 모듈을 포함할 수 있다.
또한, 컴퓨터(110)는 기타 분리형/비분리형, 휘발성/비휘발성 컴퓨터 저장 매체를 포함할 수 있다. 단지 예로서, 도 1은 비분리형, 비휘발성 마그네틱 매체에 대해 판독하거나 기록하는 하드 디스크 드라이브(141)와, 분리형, 비휘발성 마그네틱 디스크(152)에 대해 판독하거나 기록하는 마그네틱 디스크 드라이브(151)와, CD롬 또는 기타 광학 매체와 같은 분리형 비휘발성 광 디스크(156)에 대해 판독하거나 기록하는 광 디스크 드라이브(155)를 도시한다. 본 작업 환경의 예에서 이용될 수 있는 기타 분리형/비분리형, 휘발성/비휘발성 컴퓨터 저장 매체로는 마그네틱 테이프 카세트, 플래시 메모리 카드, 디지털 다기능 디스크, 디지털 영상 테이프, 고체 RAM, 고체 ROM 등이 있으며, 이에 한정되지 않는다. 하드 디스크 드라이브(141)는 통상적으로 인터페이스(140)와 같은 비분리형 메모리 인터페이스를 통해 시스템 버스(121)에 연결되고, 마그네틱 디스크 드라이브(151)와 광 디스크 드라이브(155)는 통상적으로 인터페이스(150)와 같은 분리형 메모리 인터페이스에 의해 시스템 버스(121)에 연결된다.
위에서 논의하고 도 1에 도시한 드라이브들 및 이들과 관련된 컴퓨터 저장 매체는 컴퓨터 판독가능한 명령어, 데이터 구조, 프로그램 모듈 및 컴퓨터(110)를 위한 기타 데이터의 저장장치를 제공한다. 도 1에서, 예를 들어, 하드 디스크 드라이브(141)는 운영 시스템(144), 응용 프로그램(145), 기타 프로그램 모듈(146) 및 프로그램 데이터(147)를 저장하는 것으로서 예시된다. 이런 구성들은 운영 시스템(134), 응용 프로그램(135), 기타 프로그램 모듈(136) 및 프로그램 데이터(137)와 동일 하거나 다를 수 있음은 물론이다. 운영 시스템(144), 응용 프로그램(145), 기타 프로그램 모듈(146) 및 프로그램 데이터(147)에는 여기에서 최소한도로 다른 복제임을 설명하기 위하여 다른 번호들이 주어졌다. 사용자는 일반적으로 마우스, 트랙볼 또는 터치 패드로 지칭되는 포인팅 장치(161) 및 키보드(162)와 같은 입력 장치를 통해서 컴퓨터(110)에 명령과 정보를 입력할 수 있다. 기타 입력 장치들(미도시)은 마이크로폰, 조이스틱, 게임 패드, 위성 접시, 스캐너 등을 포함할 수 있다. 이런 그리고 다른 입력 장치들은 주로 시스템 버스(121)에 연결된 사용자 입력 인터페이스(160)를 통해 처리부(120)에 연결되지만, 병렬 포트, 게임 포트 또는 범용 직렬 버스(USB)와 같은 다른 인터페이스와 버스 구조들에 의해 연결될 수 있다.
모니터(191)나 다른 유형의 표시 장치가 영상 인터페이스(190)와 같은 인터페이스를 통해 시스템 버스(121)에 또한 연결된다. 모니터(191)와 더불어, 컴퓨터들은 또한 출력 주변장치 인터페이스(195)를 통해 연결될 수 있는 스피커와 프린터(미도시)와 같은 다른 주변 출력 장치들을 포함할 수 있다.
컴퓨터(110)는 원격 컴퓨터(180)와 같은 하나 이상의 원격 컴퓨터들에 대한 논리적 연결을 이용한 네트워크 환경에서 작업할 수 있다. 원격 컴퓨터(180)는 개인용 컴퓨터, 서버, 라우터, 네트워크 PC, 피어(peer) 장치 또는 기타 일반 네트워크 노드일 수 있고, 도 1에는 단지 메모리 저장 장치(181)만 도시되었지만, 통상적으로 컴퓨터(110)에 대해 상술한 많은 또는 모든 구성요소들을 포함한다. 도 1에 도시된 논리적 연결은 근거리 통신망(LAN, 171) 및 원거리 통신망(WAN, 173)을 포함하지만, 그 밖의 네트워크를 포함할 수 있다. 이런 네트워크 환경은 사무실, 엔터프라이즈-와이드(enterprise-wide) 컴퓨터 네트워크, 인트라넷 및 인터넷에서 평범한 것이다.
근거리 통신망 네트워크 환경에서 이용되는 경우, 컴퓨터(110)는 네트워크 인터페이스 또는 어댑터(170)를 통해 근거리 통신망(171)에 연결된다. WAN 환경에서 이용되는 경우, 컴퓨터(110)는 통상적으로 인터넷과 같은 WAN(173)을 통해 통신을 수립하기 위한 수단을 일반적으로 포함한다. 네트워크 환경에서, 컴퓨터(110) 또는 그 부분들에 대해 도시된 프로그램 모듈은 원격 메모리 저장 장치에 저장될 수 있다. 예컨대, 다음에 한정되지 않지만, 도 1은 메모리 장치(181)에 상주하고 있는 원격 어플리케이션 프로그램들(185)을 도시된다. 원격 어플리케이션 프로그램(185)은 원격 저장 장치(181) 또는 월드 와이드 웹에 억세스 가능한 다른 저장 장치에 상주하는 컨텐츠를 제공하는 마이크로소프트 인터넷 정보 서비스(등록상표)(Internet Information Services®, IIS) 및 아파치 HTTP 서버를 포함하며, 이에 한정되지 않는다. 도시된 네트워크 연결들은 예시적인 것으로 컴퓨터들 간에 통신 연결을 수립하는 다른 수단들이 이용될 수 있음을 알 수 있을 것이다.
당업자라면 컴퓨터(110)나 기타 클라이언트 장치들이 컴퓨터 네트워크의 일부로서 배치될 수 있음을 알 수 있을 것이다. 이런 점에서, 본 발명은 임의의 개수의 메모리 또는 저장부를 갖는 임의의 컴퓨터 시스템과 임의의 개수의 저장부 또는 볼륨에서 발생하는 모든의 어플리케이션 및 프로세스과 관련된다. 본 발명의 실시예는 원격 또는 국부적 저장 장치를 갖는, 네트워크 환경에 배치된 서버 컴퓨터와 클라이언트 컴퓨터를 갖는 환경에 적용될 수 있다. 본 발명은 프로그램 언어 기능성, 해석 및 실행 능력들을 갖는 자체 작동식 컴퓨팅 장치에 적용될 수도 있다.
본 발명
본 발명의 인터페이스 정의 소프트웨어(카빙 스테이션, Carving Station)는 정보를 독특하게 조직하고 쌍방향 사용자 인터페이스를 정의하는 프로세스의 많은 부분을 자동화함으로써 쌍방향 어플리케이션의 생성에 대한 새로운 접근을 소개한다. 본 발명의 자동화 프로세스는 임의의 플랫폼에 대해 주문 제작(customize)될 수 있다. 바람직한 실시예로, 카빙 스테이션은 쌍방향 인터페이스의 작성을 위한 디자인 모드와, 생성된 쌍방향 인터페이스의 시각화 및 확인을 위한 프리뷰 모드를 제공한다.
도 2는 본 발명의 일 실시예에 따른 시스템 메모리(130)에서 카빙 스테이션의 콤포넌트들을 도시한다. 본 실시예에서, 카빙 스테이션(210)은 시스템 메모리(130)에 응용 프로그램(135) 중 어느 하나로서 상주한다. 그래픽 유저 인터페이스 콤포넌트(211)는 그래픽을 입력하기 위해 제공되고, 그래픽 툴(212)은 쌍방향 요소들의 정의를 위해 제공된다. 마지막으로, 코드 제너레이터(213)가 출력 코드 및 그래픽들의 생성을 위해 마련된다. 필요한 경우, 시각화 프로그램(220)과 같은 그 밖의 프로그램 모듈(136)이 구성의 시각화 및 확인을 위해 마련된다. 프로그램 데이터(137)는, 선택된 출력 플랫폼에 의해 요구될 경우, 입력 그래픽(230), 정의된 쌍방향 요소들(조각 배열(Carved Geometry), 240)의 크기와 위치 데이터, 배경 그래픽(250) 및 출력 요소 그래픽(260)을 포함하며, 이에 한정되지 않는다.
도 3은 하드 드라이브와 같은 비휘발성 컴퓨터 판독가능한 매체 장치(141)에 저장된, 카빙 스테이션의 콤포넌트들에 대한 일 실시예를 예시한다. 카빙 스테이션 프로그램(310)과 그 콤포넌트들(그래픽(311) 입력을 위한 그래픽 유저 인터페이스, 쌍방향 요소들(312) 정의를 위한 그래픽 툴, 그리고 코드 또는 그래픽(313) 출력을 위한 코드 제너레이터)은 컴퓨터 판독가능한 매체(141)에 응용 프로그램(145)으로서 저장되고, 실행시에 시스템 메모리(130)에 판독될 수 있다. 또한, 컴퓨터 판독가능한 매체는 구성의 시각화 및 확인을 위한 시각화 프로그램(320)의 사본(copy)과 같은 기타 프로그램 모듈(146)을 포함할 수 있다. 프로그램 데이터(147)는, 출력 플랫폼에 의해 요구될 경우, 입력 그래픽(330), 정의된 요소(조각 배열, 340)의 크기와 위치 데이터, 배경 그래픽(350) 및 쌍방향 요소(360)를 위한 그래픽을 포함하며, 이에 한정되지 않는다.
도 4는 본 발명의 방법 단계들의 양태들을 도시한 흐름도이다. 본 발명의 플랫폼 포괄 실시예에서, 쌍방향 사용자 인터페이스를 정의하기 위한 컴퓨터적 방법은 쌍방향 사용자 인터페이스의 각 상태에 대한 쌍방향 사용자 인터페이스의 하나의 전체 화면 그래픽들을 입력하는 단계(410)와, 하나 이상의 쌍방향 요소들 각각에 대해 쌍방향 사용자 인터페이스 내에 영역을 정의하는 단계(420)와, 각각의 쌍방향 요소의 각 상태의 그래픽 표시를 가능하게 하도록 플랫폼 특정 컴퓨터 판독가능한 코드를 자동으로 생성하는 단계(430)를 포함한다. 또한, 이미 정의된 쌍방향 사용자 인터페이스를 편집하는 것은 교정(442) 또는 추가(444)될 정의된 쌍방향 사용자 인터페이스의 각 상태에 대한 쌍방향 사용자 인터페이스의 하나의 전체 화면 그래픽들을 입력하여 추가 또는 교정될 각각의 쌍방향 요소에 대한 쌍방향 사용자 인터페이스 내에 영역을 정의하는 단계(420)와, 각 쌍방향 요소의 각 상태의 그래픽 표시를 가능하게 하는 컴퓨터 판독가능한 코드를 자동으로 생성하는 단계(430) 포함한다.
보다 상세하게, 제작자는 우선 쌍방향 요소들에 대한 상태들의 개수를 포함하는, 쌍방향 사용자 인터페이스의 레이아웃에 대해 결정한다. 관례상 행해진 바와 같이, 각각의 요소의 각 상태에 대한 개별 그래픽을 입력하는 대신, 제작자는 각 상태에서 표시되는 모든 쌍방향 요소들을 포함하는 하나의 전체 화면 그래픽들을 각 상태에 대해 입력한다(410). 예를 들어, 롤오버 상태의 경우, 제작자는 그 롤오버 상태에서 각 쌍방향 요소를 보여주는 오직 하나의 전체 화면 그래픽을 입력한다. 여기서 이용되는 전체 화면 그래픽은 쌍방향 인터페이스의 전체로 의도된 표시 영역을 차지하는 그래픽이거나 쌍방향 요소들이 상주할 쌍방향 인터페이스의 부분 그래픽일 수 있다.
이에 따라, 제작자가 생성해야 하는 이미지의 개수는 상태의 개수와 같다 (I=E). 따라서, 본 발명은 제작자가 공급하고 관리해야 할, 그래픽과 위치 정보와 같은 개별 데이터 포인트들의 개수를 크게 줄인다. 도 5a와 도 5b는 종래의 "절단 및 배치"하는 방법의 일례를 도시한다. 다섯 개의 두 가지 상태 버튼들을 갖는 인터페이스의 경우, 총 11개의 개별적인 그래픽이 생성되어야 한다(정상 상태(510)의 경우 다섯 개의 버튼 각각에 대한 하나의 그래픽(도 5a), 롤오버 상태(520)의 경우 다섯 개의 버튼 각각에 대한 하나의 그래픽(도 1A), 그리고 하나의 배경 그래픽(530)(도 5b)). 도 6a와 도 6b는 도 5a와 도 5b에 도시한 동일한 다섯 개의 버튼 두 가지 상태 인터페이스를 생성하기 위하여 본 발명에 따라 제작자에 의해 입력된 두 개의 이미지를 도시한다. 카빙 스테이션을 이용하여, 제작자는 단지 정상 상태(610)에서 모든 요소들을 나타낸 정상 상태(620)에 대한 하나의 전체 화면 그래픽들을 입력하고(도 6a), 롤오버 상태(630)에서 모든 요소들을 나타낸 롤오버 상태(640)에 대한 하나의 전체 화면 그래픽을 입력한다(도6b).
이제 도 7을 참조하면, 카빙 스테이션은 디자인 모드(730)에서 입력 그래픽들(311)를 위한 그래픽 유저 인터페이스를 제공한다. 제작자는 생성된 전체 화면 그래픽들 각각을 카빙 스테이션에 입력하고, 그 대응하는 상태에 그래픽을 할당한다(410). 도 7은 디자인 모드(730)에서 본 발명의 바람직한 실시예(710)의 그래픽 유저 인터페이스의 한 화면을 도시한다. 도 7의 실시예에서, 카빙 스테이션(710)은 자체 작동 윈도우 어플리케이션이지만, 본 발명은 다른 어플리케이션들에도 적합할 수 있고, 어도비 포토샵, 플래시 또는 마이크로소프트 비쥬얼 스튜디오와 같은 큰 소프트웨어 패키지의 일 구성일수 있다. 도시된 바와 같이, 인터페이스는 디자인 모드(730)와 프리뷰 모드(830) 간에 선택할 수 있는 옵션을 제작자에게 제공한다(도 8a 및 8b). 제작자는 전체 화면 그래픽들(입력 그래픽들(330))가 위치할 수 있는 소스 아트(source art, 750)의 위치를 지정할 수도 있다. 각각의 전체 화면 그래픽들의 파일명이 각각의 레이어(760)에 대해 대응하는 공간에 입력될 수 있다(각각의 포함된 상태는 레이어를 나타냄). 전체 화면 그래픽들은 디스플레이 영역(790)에서 레이어들로서 표시된다. 본 발명의 일 실시예에서, 카빙 스테이션(710)은 네 가지 상태 레이어(표준 레이어, 마우스 오버(즉, 롤오버) 레이어, 압축 레이어, 사용 불가능 레이어)를 제공한다. 도 7에 도시된 예에서, 단지 두 개의 상태(표준과 마우스 오버)가 이용되는데, 비용 상태는 공백으로 남는다. 제작자는 또한 출력 파일들(760)의 수집을 위한 위치를 저장소(Repository), 파일 시스템(File system), 오라클 데이터베이스(Oracle Database), SQL 서버 데이터베이스, 및 마이크로소프트 컨텐츠 매니저 서버(Content manager server)에 저장하는 것과 같이 지정할 수 있다. 출력 파일(760)은 어도비 플래시 무비(Flash Movie), 파워포인트(등록상표)(PowerPoint®) 파일, HTML 페이지, 마이크로소프트 쉐어포인트 서버 등과 같은 다양한 포맷으로 호환가능하게 만들어질 수 있다.
본 발명의 디자인 프로세스에서 마지막 제작자 단계로서, 제작자는 원하는 개별 쌍방향 요소들에 대응하는 전체 스크린 그래픽들 상에서 영역들을 그래픽적으로 식별하기 위하여 카빙 스테이션(212)에 의해 제공된 툴을 이용한다(420). 도 7의 예에서, 개별 요소들은 직사각형들(780)로 정의된다. 쌍방향 요소들을 정의하도록 선택된 영역들(핫 스팟, hot spots)은 다른 색(770)으로 돋보이게 된다. 각각의 핫 스팟에는 이름이 할당되고 리스트(740)에 표시된다. 모든 상태들(혹은 레이어들)에 대한 모든 쌍방향 요소들이 동시에 정의된다. 전체 화면 그래픽들(조각 배열, 240)에 대해 쌍방향 요소 각각의 크기와 위치 정보는 각 쌍방향 요소를 나타내는 기하학적 영역의 정의에 대해 고유하며, 제작자에 의해 정의될 때 기록 및 저장된다. 따라서, 노력과 실수를 통해 수동적으로 요소들을 배치(또는 교체)해야 하는 요건과 더불어 위치 정보를 대외적으로 보유해야 하는 관습은 폐지된다.
제작자는 쌍방향 인터페이스 정의 프로세스 중 언제든지 그래픽들 모두와 쌍방향 요소들의 위치 및 크기 정보 모두를 포함하는 전체 구성(426)을 정의하고 컴퓨터 판독가능한 매체(147)에 저장할 수 있다. 쌍방향 요소 각각의 각 상태에 대한 기능성은 요소를 정의하는 동안이나 이후에 별도의 단계로서 할당될 수 있다(424). 제작자가 이후에 상태의 모양을 바꾸길 원한다면, 제작자는 단지 각각의 상태(760)에 관련된 최초 그래픽을 교체하면서 원하는 변경을 통합한 전체 화면 그래픽을 입력(442)하기만 하면 된다. 이후 본 발명은 소스 그래픽이 변경되어 자동으로 구성을 갱신하는 것을 탐지한다. 이후, 제작자는 갱신된 구성을 저장할 수 있다. 제작자가 이미 정의된 인터페이스에 상태를 추가하기 원한다면, 제작자는 단지 추가하고자 하는 각각의 상태에 대한 하나의 전체 화면 그래픽들을 입력하고(444), 각각의 전체 화면 그래픽들을 적절한 상태와 관련시킨다(760). 만일 제작자가 쌍방향 요소를 추가하고자 한다면, 제작자는 단지 전체 화면 그래픽들 상에 추가될 쌍방향 요소를 위한 일 영역을 식별한다(420). 새롭게 추가된 요소(740)에 이름이 지정되고, 추가된 쌍방향 요소의 크기와 위치 정보가 자동으로 기록되어 저장된다(426). 따라서 수많은 그래픽들을 공급, 관리 및 배치하거나 쌍방향 사용자 인터페이스 내의 모든 요소 레이어를 정의하고 재결합할 필요가 없다. 본 발명의 디자인 프로세스는 플랫폼 독립형이기 때문에, 제작자는 플랫폼 특정 코딩에 상관없이 인터페이스의 외관에만 집중하면 된다.
프리뷰 모드(830, 도 8a 및 도 8b)는 제작자가 설계된 쌍방향 인터페이스를 시각화하여 확인가능하게 한다(440). 바람직한 실시예에서, 특정 플랫폼은 디자인 프로세스의 초기에 제작자에 의해 선택된다. 프리뷰 모드(830)가 선택되는 경우, 크기 및 위치 정보(조각 배열, 240)와 공급된 소스 그래픽들(230)을 이용하는 카빙 스테이션은 선택된 플랫폼에 대해 구체적인 그래픽들와 코드를 자동으로 생성한다(430). 제작자에 의해 설계된 쌍방향 인터페이스는 의도된 쌍방향 인터페이스 공개의 플랫폼을 위한 고유한 코드로서 프리뷰가 된다. 예를 들어, 제작자가 정규의 웹페이지로서 최종 쌍방향 인터페이스를 공개하도록 선택한다면, 카빙 스테이션은 개별 쌍방향 요소들에 대해 그래픽들을 자동으로 생성할 것이다. 본 구성은 요소 그래픽들의 위치와 크기 정보 둘 다 보유하기 때문에, 카빙 스테이션은 이후 각 쌍방향 요소들의 정확한 레이아웃을 내포하는 그래픽들을 참조하는 HTML 파일을 자동으로 생성한다. 제작자는 위치 정보를 수동으로 입력 또는 조정할 필요가 없다. 일 실시예에서, 선택된 플랫폼에 대한 적절한 뷰어의 예는 카빙 스테이션 프리뷰 창 안에서 불러낸다. HTML 웹 페이지의 예에서, 인터넷 익스플로러(등록상표)(Explorer®)의 웹브라우저 콘트롤이 사용된다. 카빙 스테이션은 디자인 프로세스로를 전혀 변경하지 않고도 마이크로소프트의 .NET, 파워포인트 및 어도비 플래시와 같은 기타 플랫폼에 따르는 쌍방향 인터페이스를 쉽게 출력할 수 있다. 제작자가 설계된 쌍방향 인터페이스에 만족하는 경우, 제작자는 쌍방향 인터페이스를 "공개"하도록 카빙 스테이션에 지시를 내릴 수 있다(450). 모든 대응하는 그래픽들와 코드들은 카빙 스테이션에 의해 자동 생성되어 저장소 디렉토리(720)와 같은 제작자가 정의한 출력 목적지에 저장된다.
도 8a와 도 8b는 프리뷰 모드(830)에서 카빙 스테이션(710)의 한 화면을 도시한다. 도 8a 및 도 8b의 예에서, 생성되어 도 7에 도시된 쌍방향 인터페이스는 프리뷰 영역(870)에 표시된다. 프리뷰 모드(830)의 두 가지 보기(도 8a 및 8b 각각)는 제작자에 의해 정의된 쌍방향 상호작용을 시연하도록 나타낸 것이다. 도 8a에서, 마우스 포인터(850)는 제1 요소의 상부에 위치하고, 제1 버튼은 롤오버 상태(840)로 표시되고 나머지 요소들은 정상 상태(860)로 표시되어 유지된다. 도 8b에서, 마우스 포인터(850)는 제2 요소의 상부에 위치하고, 제2 요소는 롤오버 상태(840)로 표시되며, 제1, 제3, 제4 및 제5 요소들은 정상 상태(860)로 표시된다.
바람직한 실시예에서, 이런 표시는 두 단계 생성 프로세스의 제작자 완료 이후에 자동 파일 생성 작업에 의해 생성된다(즉 각각의 원하는 상태에 대한 전체 화면 그래픽의 제작자 생성 이후와, 각 쌍방향 요소의 기하학적 식별 이후). 각각의 상태에 대한 전체 화면 그래픽들의 제작자 입력 이후 그리고 각 쌍방향 요소에 대한 위치 정보의 제작자 정의(식별) 이후, 카빙 스테이션은 각 요소의 각 상태에 대한 이미지 파일을 자동 생성한다. 이에 따라, 카빙 스테이션은 복수의 이미지를 자동으로 생성하고, 일단 사용자가 "절단 및 배치" 프로세스를 통해 고생스럽게 생성하면, 각 위치 정보를 기록한다. 예를 들어, 도 5a와 도 5b의 예에서, 다섯 개의 두 가지 단계 버튼들을 갖는 인터페이스의 경우, 카빙 스테이션은 정상 상태에 대한 하나의 전체 화면 그래픽들와 롤오버 상태에 대한 하나의 전체 화면 그래픽들의 제작자 입력 이후와, 다섯 개의 쌍방향 요소들의 제작자 식별 이후에 개별적인 10개의 그래픽들(즉, 정상 상태(510)에 대한 다섯 개의 버튼들 각각에 대한 하나의 그래픽과, 롤오버 상태(520)에 대한 다섯 개의 버튼들 각각에 대한 하나의 그래픽)을 자동 생성할 것이다. 그래서, 도 8b에 도시한 바와 같이, 마우스 포인터(850)가 제2 요소의 상부에 위치할 때, 본 발명은 롤오버 상태(840)에서 제2 요소에 대해 자동으로 생성한 파일을 검색하고 이에 따라 프리뷰 영역(870)의 제2 요소 위치에서 그 이미지를 표시한다.
본 발명의 다른 실시예에서, 이런 표시들은 교대로 발생한다. 예를 들어, 도 8b의 예에서 제2 요소의 롤오버 상태(840)에 대한 특정 이미지를 자동으로 생성시킨 다음 특정 이미지를 검색하지 않는 대신, 본 발명은 도 8b의 예에서와 같이 마우스 포인터가 제2요소의 상부에 위치할 때, 제2 요소에 대해 제작자에 의해 미리 정의된 바와 같이 롤오버 상태에 대해 생성되어 저장된 전체 화면 그래픽들을 참조하여 그 각 부분을 제공할 수 있다. 또 다른 실시예는 프리뷰 영역(870, 예를 들어 도5B와 비슷한 모양)에 표시된 정상 상태에 대한 전체 화면 그래픽들을 가질 수 있고, 마우스 포인터(850)가 도 8b의 예와 같이 제2 요소의 상부에 위치할 때, 본 발명은 하부 레이어로서 존재하는 롤오버 상태에 대한 전체 화면 그래픽들을 드러내기 위해 제작자에 의해 미리 위치 정의된 바와 같이 본질적으로 제2 요소를 절단한다. 제2 요소의 위치만 제거되었기 때문에, 사용자가 볼 수 있는 롤오버 상태에 대한 전체 화면 그래픽들의 단지 일부만이 제2 요소 부분이다.
결론적으로, 카빙 스테이션은 최종 쌍방향 인터페이스를 달성하기 위해 각 요소 레이어를 제작자가 수동적으로 정의하고 재결합할 필요가 없도록 하면서, 제작자가 공급하고 관리해야할 개별적인 데이터 포인트와 그래픽 파일의 수를 크게 줄인다. 카빙 스테이션을 이용하는 요소들의 변경 및 추가는 제작자가 "절단 및 배치" 단계를 반복하거나 인터페이스에서 각 요소 레이어에 대한 정의 및 재결합을 반복할 필요가 없도록 한다.
본 발명의 이런 그리고 다른 장점들은 상기 명세서로부터 당업자에게 명확해질 것이다. 따라서, 당업자라면 본 발명의 광의적인 발명 개념에서 벗어나지 않고도 상술한 실시예들을 변경 또는 수정할 수 있음을 알 수 있을 것이다. 따라서, 본 발명은 본 명세서에서 설명한 특정 실시예들에 한정하지 않고, 본 발명의 범위와 정신에 속하는 모든 변경과 수정을 포함하도록 함을 이해해야 할 것이다.

Claims (20)

  1. 쌍방향 사용자 인터페이스에서 사용될 하나 이상의 쌍방향 요소들을 위한 그래픽들을 생성하고 정의하는 시스템으로써,
    복수의 전체 화면 그래픽들을 입력하기 위한 그래픽 유저 인터페이스로서, 상기 복수의 전체 화면 그래픽들 각각은 하나의 상태와 관련되고, 상기 쌍방향 사용자 인터페이스에서 사용될 동일한 상태의 하나 이상의 쌍방향 요소들의 각각에 대해 정의될 영역을 포함하고, 상기 하나 이상의 쌍방향 요소들 각각은 상기 복수의 전체 화면 그래픽들의 총 개수와 동일한 상태들의 총 개수를 갖는, 그래픽 유저 인터페이스;
    모든 상태들에 대한 상기 하나 이상의 쌍방향 요소들의 각각이 동시에 정의되도록 상기 복수의 전체 화면 그래픽들 각각 내에 디스플레이된 상기 하나 이상의 쌍방향 요소들의 각각에 대해 정의된 영역을 주는 쌍방향 그래픽 툴;
    상기 하나 이상의 쌍방향 요소들의 각각에 대해 정의된 영역의 상기 전체 화면 그래픽들에 관한 기하학적 특징 및 위치 정보를 저장하기 위한 데이터 저장 장치; 및
    상기 하나 이상의 쌍방향 요소들의 각각의 각 상태에 대해 정의된 영역의 컴퓨터 판독가능한 코드 또는 그래픽들을 자동으로 생성하는 출력 제너레이터(generator)로서, 상기 하나 이상의 쌍방향 요소들의 각각의 각 상태에 대해 정의된 영역의 그래픽들은 동일한 상태의 각 전체 화면 그래픽 및 각 쌍방향 요소에 대해 저장된 상기 기하학적 특성 및 위치 정보로부터 생성되는, 출력 제너레이터를 포함하는 쌍방향 사용자 인터페이스에서 사용될 하나 이상의 쌍방향 요소들을 위한 그래픽들을 생성하고 정의하는 시스템.
  2. 삭제
  3. 청구항 1에 있어서,
    상기 하나 이상의 쌍방향 요소들 각각의 각 상태에 대해 정의된 영역의 그래픽들은, 상기 각각의 쌍방향 요소에 대해 저장된 상기 기하학적 특징 및 위치 정보에 의해 범위가 정해진 각각의 상태에 대해 입력된 상기 전체 화면 그래픽들의 일부에 대응하는, 쌍방향 사용자 인터페이스에서 사용될 하나 이상의 쌍방향 요소들을 위한 그래픽들을 생성하고 정의하는 시스템.
  4. 청구항 1에 있어서,
    상기 출력 제너레이터에 의해 생성된 컴퓨터 판독가능한 코드는, 상기 각각의 상태 및 상기 각각의 쌍방향 요소에 대한 사용자 입력에 응답하여 상기 각각의 쌍방향 요소에 대해 쌍방향 사용자 인터페이스 내에서 정의된 상기 영역에서 상기 하나 이상의 쌍방향 요소들 각각의 각 상태를 컴퓨터가 표시할 수 있도록 하는, 쌍방향 사용자 인터페이스에서 사용될 하나 이상의 쌍방향 요소들을 위한 그래픽들을 생성하고 정의하는 시스템.
  5. 청구항 1에 있어서,
    상기 쌍방향 사용자 인터페이스는 웹브라우저에서 표시되는 쌍방향 사용자 인터페이스에서 사용될 하나 이상의 쌍방향 요소들을 위한 그래픽들을 생성하고 정의하는 시스템.
  6. 청구항 1에 있어서,
    상기 쌍방향 사용자 인터페이스의 하나의 상태에 대해 상기 적어도 하나의 전체 화면 그래픽들 각각의 관련을 정의하기 위한 제2 그래픽 툴을 더 포함하는 쌍방향 사용자 인터페이스에서 사용될 하나 이상의 쌍방향 요소들을 위한 그래픽들을 생성하고 정의하는 시스템.
  7. 청구항 1에 있어서,
    상기 각각의 쌍방향 요소들의 각각의 상태에 기능성을 할당하기 위한 제3 그래픽 툴을 더 포함하는 쌍방향 사용자 인터페이스에서 사용될 하나 이상의 쌍방향 요소들을 위한 그래픽들을 생성하고 정의하는 시스템.
  8. 쌍방향(interactive) 사용자 인터페이스에서 사용될 하나 이상의 쌍방향 요소들을 위한 그래픽들을 생성하고 정의하기 위한 적어도 일부가 머신에 의해 실행되는 방법으로서,
    복수의 전체 화면 그래픽들을 그래픽 유저 인터페이스로 입력하는 단계로서, 상기 복수의 전체 화면 그래픽들 각각은 하나의 상태와 관련되고, 상기 복수의 전체 화면 그래픽들 각각은 동일한 상태의 하나 이상의 쌍방향 요소들의 각각에 대해 정의될 영역을 포함하는, 입력하는 단계;
    모든 상태들에 대한 상기 하나 이상의 쌍방향 요소들 각각이 동시에 정의되도록 상기 복수의 전체 화면 그래픽들 각각 내에 상기 하나 이상의 쌍방향 요소들 각각에 대한 영역을 정의하는 단계;
    상기 전체 화면 그래픽들에 관하여, 상기 하나 이상의 쌍방향 요소들의 각각에 대해 정의된 영역의 기하학적 특징 및 위치 정보를 저장하는 단계; 및
    상기 하나 이상의 쌍방향 요소들 각각의 각 상태에 대해 정의된 영역의 컴퓨터 판독가능한 코드 또는 그래픽들을 자동으로 생성하는 단계로서, 상기 하나 이상의 쌍방향 요소들의 각각의 각 상태에 대해 정의된 영역의 그래픽들은 동일한 상태에 대해 입력된 각 전체 화면 그래픽 및 각 쌍방향 요소에 대해 정의된 영역의 저장된 상기 기하학적 특성 및 위치 정보로부터 생성되는, 생성하는 단계를 포함하는 방법.
  9. 삭제
  10. 청구항 8에 있어서,
    상기 쌍방향 사용자 인터페이스를 편집하는 추가의 단계는,
    각 추가 또는 교정될 상태에 대한 그래픽 유저 인터페이스로 하나의 전체 화면 그래픽들을 입력하는 단계;
    상기 하나 이상의 쌍방향 요소들 각각에 대해 정의된 영역의 상기 저장된 기하학적 특징, 위치 정보를 검색하는 단계; 및
    상기 하나 이상의 쌍방향 요소들의 각 추가 또는 교정될 상태에 대해 정의된 영역의 컴퓨터 판독가능한 코드 및 그래픽들을 자동으로 생성하는 단계를 더 포함하는 방법.
  11. 삭제
  12. 청구항 8에 있어서,
    상기 하나 이상의 쌍방향 요소들 각각의 각 상태에 대한 그래픽들은 상기 각각의 쌍방향 요소에 대해 정의되고 저장된 기하학적 특징 및 위치 정보에 의해 범위가 정해진 각각의 상태에 대해 입력된 상기 전체 화면 그래픽들의 일부에 대응하는 방법.
  13. 청구항 8에 있어서,
    상기 컴퓨터 판독가능한 코드는 상기 각각의 상태 및 상기 각각의 쌍방향 요소에 대한 사용자의 입력에 응답하여 상기 각각의 요소에 대해 정의된 영역의 상기 하나 이상의 쌍방향 요소들 각각의 각 상태에 대한 그래픽들을 생성하는, 방법.
  14. 청구항 8에 있어서,
    상기 쌍방향 사용자 인터페이스는 웹브라우저에서 표시되는, 방법.
  15. 청구항 8에 있어서,
    추가 또는 교정될 각각의 쌍방향 요소에 대해 상기 쌍방향 사용자 인터페이스 내의 영역을 정의하는 단계; 및
    상기 추가 및 교정된 쌍방향 요소들을 포함하는 각각의 쌍방향 요소의 각 상태의 컴퓨터 판독가능한 코드 및 그래픽들을 자동으로 생성하는 단계를 더 포함하는, 방법.
  16. 하나 이상의 쌍방향 요소들을 포함하는 쌍방향 사용자 인터페이스에서 사용될 하나 이상의 쌍방향 요소들을 위한 그래픽들을 생성하고 정의하기 위한 적어도 일부가 머신에 의해 실행되는 방법으로서, 상기 각 쌍방향 요소는 복수의 상태들을 갖고,
    각 상태에 대해 하나의 전체 화면 그래픽을 그래픽 유저 인터페이스로 입력하는 단계로서, 각 상태에 대한 상기 전체 화면 그래픽은 동일한 상태의 상기 하나 이상의 쌍방향 요소들을 나타내는, 입력하는 단계;
    모든 상태들에 대한 상기 하나 이상의 쌍방향 요소들 각각이 동시에 정의되도록 상기 전체 화면 그래픽 내에 상기 하나 이상의 쌍방향 요소들 각각에 대한 영역을 정의하는 단계; 및
    상기 하나 이상의 쌍방향 요소들 각각의 각 상태에 대한 개별적인 그래픽을 자동으로 생성하는 단계로서, 상기 하나 이상의 쌍방향 요소들의 각각의 각 상태에 대한 상기 개별적인 그래픽은 각 상태에 대한 상기 전체 화면 그래픽 및 각 쌍방향 요소에 대해 정의된 영역으로부터 생성되는, 생성하는 단계를 포함하는 방법.
  17. 삭제
  18. 청구항 16에 있어서,
    각각의 쌍방향 요소의 각 상태에 대한 상기 개별 그래픽은 정의된 상기 영역에 의해 범위가 정해진 상기 각 상태에 대한 상기 전체 화면 그래픽들의 일부인, 방법.
  19. 청구항 16에 있어서,
    상기 하나 이상의 쌍방향 요소들 각각에 대응하는 정의된 영역의 기하학적 특징 및 위치 정보를 저장하는 단계를 더 포함하는 방법.
  20. 청구항 16에 있어서,
    상기 각 상태에 대한 사용자 입력에 대응하여 각각의 쌍방향 요소에 대한 각 개별적인 그래픽에 대한 컴퓨터 판독가능한 코드를 생성하는 단계를 더 포함하는 방법.

KR1020107006259A 2007-08-22 2008-08-22 쌍방향 사용자 인터페이스 정의 KR101567455B1 (ko)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
US95735407P 2007-08-22 2007-08-22
US60/957,354 2007-08-22

Publications (2)

Publication Number Publication Date
KR20100082826A KR20100082826A (ko) 2010-07-20
KR101567455B1 true KR101567455B1 (ko) 2015-11-13

Family

ID=40378692

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020107006259A KR101567455B1 (ko) 2007-08-22 2008-08-22 쌍방향 사용자 인터페이스 정의

Country Status (11)

Country Link
US (1) US9442703B2 (ko)
EP (1) EP2193451A4 (ko)
JP (1) JP5416112B2 (ko)
KR (1) KR101567455B1 (ko)
CN (1) CN101821730B (ko)
AU (1) AU2008288768B2 (ko)
BR (1) BRPI0815701A2 (ko)
CA (1) CA2697347A1 (ko)
HK (1) HK1147581A1 (ko)
MX (1) MX2010002064A (ko)
WO (1) WO2009026535A1 (ko)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9069575B2 (en) * 2008-03-25 2015-06-30 Qualcomm Incorporated Apparatus and methods for widget-related memory management
US9110685B2 (en) 2008-03-25 2015-08-18 Qualcomm, Incorporated Apparatus and methods for managing widgets in a wireless communication environment
US8875008B2 (en) 2010-11-11 2014-10-28 Microsoft Corporation Presentation progress as context for presenter and audience
US8799866B2 (en) 2011-05-31 2014-08-05 International Business Machines Corporation Automatic generation of user interfaces
US8954933B2 (en) 2011-05-31 2015-02-10 International Business Machines Corporation Interactive semi-automatic test case maintenance
CN107507614B (zh) * 2017-07-28 2018-12-21 北京小蓦机器人技术有限公司 结合ui执行自然语言命令的方法、设备、系统与存储介质
EP3438952A1 (en) * 2017-08-02 2019-02-06 Tata Consultancy Services Limited Systems and methods for intelligent generation of inclusive system designs
JP6854785B2 (ja) * 2018-02-06 2021-04-07 三菱電機株式会社 ユーザインターフェース設計装置
CN110727483A (zh) * 2018-07-16 2020-01-24 西门子股份公司 生成辅助用户与应用程序进行交互的工具的设备和方法

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040243931A1 (en) 2001-06-30 2004-12-02 Kris Stevens Internet interface & integration language system and method

Family Cites Families (21)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5801687A (en) * 1994-09-30 1998-09-01 Apple Computer, Inc. Authoring tool comprising nested state machines for use in a computer system
US5708845A (en) * 1995-09-29 1998-01-13 Wistendahl; Douglass A. System for mapping hot spots in media content for interactive digital media program
US5742768A (en) * 1996-07-16 1998-04-21 Silicon Graphics, Inc. System and method for providing and displaying a web page having an embedded menu
US5845299A (en) * 1996-07-29 1998-12-01 Rae Technology Llc Draw-based editor for web pages
US6081263A (en) * 1997-10-23 2000-06-27 Sony Corporation System and method of a user configurable display of information resources
SG90027A1 (en) * 1998-03-03 2002-07-23 Sony Kihara Res Ct Inc Image editing device and method
US7139970B2 (en) * 1998-04-10 2006-11-21 Adobe Systems Incorporated Assigning a hot spot in an electronic artwork
JP3530390B2 (ja) * 1998-07-30 2004-05-24 日本電信電話株式会社 地図図形変形方法、地図図形変形装置および地図図形変形プログラムを記録した記録媒体
US6230174B1 (en) * 1998-09-11 2001-05-08 Adobe Systems Incorporated Method of generating a markup language document containing image slices
GB9907367D0 (en) * 1999-03-30 1999-05-26 Zyris Plc System, method and tool for generating navigation bars
US6476834B1 (en) * 1999-05-28 2002-11-05 International Business Machines Corporation Dynamic creation of selectable items on surfaces
JP2001067059A (ja) * 1999-08-25 2001-03-16 Matsushita Electric Ind Co Ltd グラフィカルユーザインタフェース(gui)装置及びgui部品情報生成装置
US20030025730A1 (en) * 2001-08-03 2003-02-06 Brennan Declan M. Method for defining look and feel of a user interface obviating the requirement to write programming language code
CN1316345C (zh) * 2001-12-27 2007-05-16 皇家飞利浦电子股份有限公司 一种使用户能够与用于表示多个用户可控制选项的gui交互的方法
US20040095388A1 (en) * 2002-11-15 2004-05-20 Rocchetti Robert J. Method and apparatus for creating user interfaces for computing devices
EP1555598A1 (en) * 2004-01-14 2005-07-20 Deutsche Thomson-Brandt Gmbh Method for generating an on-screen menu
US7434153B2 (en) * 2004-01-21 2008-10-07 Fuji Xerox Co., Ltd. Systems and methods for authoring a media presentation
JP2006024089A (ja) * 2004-07-09 2006-01-26 Fuji Photo Film Co Ltd グラフィカルユーザインターフェースの部品画像作成方法及び装置
JP2006092079A (ja) * 2004-09-22 2006-04-06 Aoyama Planning Arts:Kk プレゼンテーションシステムおよび再生切替方法、プログラム
US7773864B2 (en) * 2005-08-29 2010-08-10 Sony Corporation Slicing interactive graphic data in disc authoring
KR100886337B1 (ko) * 2006-11-23 2009-03-02 삼성전자주식회사 이미지 내 선택 영역을 일괄 저장하는 장치 및 이미지정보의 문서화 장치

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040243931A1 (en) 2001-06-30 2004-12-02 Kris Stevens Internet interface & integration language system and method

Also Published As

Publication number Publication date
AU2008288768B2 (en) 2013-09-12
BRPI0815701A2 (pt) 2016-10-11
CN101821730B (zh) 2013-03-13
CA2697347A1 (en) 2009-02-26
JP2010537325A (ja) 2010-12-02
MX2010002064A (es) 2010-06-25
HK1147581A1 (en) 2011-08-12
KR20100082826A (ko) 2010-07-20
CN101821730A (zh) 2010-09-01
WO2009026535A1 (en) 2009-02-26
EP2193451A4 (en) 2012-04-25
US9442703B2 (en) 2016-09-13
US20090187828A1 (en) 2009-07-23
EP2193451A1 (en) 2010-06-09
JP5416112B2 (ja) 2014-02-12
AU2008288768A1 (en) 2009-02-26

Similar Documents

Publication Publication Date Title
KR101567455B1 (ko) 쌍방향 사용자 인터페이스 정의
JP5193042B2 (ja) データベースアプリケーションで選択可能な機能制御を表示するためのコマンドユーザインターフェース
EP3304338B1 (en) System and method for the generation of an adaptive user interface in a website building system
US9037974B2 (en) Creating and editing dynamic graphics via a web interface
RU2368947C2 (ru) Система и способ фильтрации и организации элементов на основе общих свойств
AU2005225130B2 (en) Management and use of data in a computer-generated document
US7236982B2 (en) Computer systems and methods for platform independent presentation design
US7430718B2 (en) Configurable interface for template completion
US7380202B1 (en) Method and system for customizing and personalizing page control content
JPWO2006051905A1 (ja) データ処理装置およびデータ処理方法
JP2007509417A (ja) 静的リストを使用してデータを管理するシステムおよび方法
US6769094B2 (en) Method for generating multimedia projects
JP2002509630A (ja) マルチメディアのプロジェクト管理および制御システム
JPWO2006051904A1 (ja) データ処理装置およびデータ処理方法
US7325197B1 (en) Method and system for providing page control content
US11675748B2 (en) External data repository file integration using a virtual file system
US9785326B2 (en) Defining and tracking an interactive user interface
US20180032317A1 (en) Defining a data input user interface
JPWO2006051906A1 (ja) アーカイバ装置、データ取得装置、およびデータ取得方法
JP2006048521A (ja) 文書検索装置及びその制御方法、並びに制御プログラム
JPH0520046A (ja) プログラム開発支援方法及び装置
Brüning ZBASE User's Guide Version 1.1: an Impedance Data Base Program
CN115794717A (zh) 基于模型的接口设计方法、系统、介质及设备
KR20230016280A (ko) 문서를 구성하는 페이지들을 빠르게 편집할 수 있도록 지원하기 위한 전용 문서 파일을 생성하는 전자 장치 및 그 동작 방법
JP5379390B2 (ja) 文書管理装置、文書管理方法、及び、文書管理プログラム

Legal Events

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