KR101787586B1

KR101787586B1 - 그래픽 객체의 조작

Info

Publication number: KR101787586B1
Application number: KR1020147030811A
Authority: KR
Inventors: 벤저민 엔 딜츠
Original assignee: 루씨드 소프트웨어 인코포레이티드
Priority date: 2010-10-01
Filing date: 2011-09-30
Publication date: 2017-10-18
Also published as: GB201307780D0; WO2012045024A2; US9881404B2; KR20130116882A; US20180108164A1; US20120081389A1; KR20140145614A; KR101787588B1; US9019275B2; US20150193957A1; GB2498487A; KR101525906B1; WO2012045024A3; KR20160102580A

Abstract

일 예로, 디스플레이 상에서 그래픽 객체들을 렌더링하는 방법은 개별 레이어들 내에 복수의 그래픽 객체들 각각을 렌더링하는 단계를 포함한다. 복수의 그래픽 객체들은 제 1, 제 2, 제 3 그래픽 객체를 포함한다. 제 2 그래픽 객체는 제 1 그래픽 객체와 직접 링크되고 제 3 그래픽 객체는 제 2 그래픽 객체와 직접 링크된다. 본 방법은 직접 링크된 그래픽 객체에 영향을 주도록 그래픽 객체들 중 하나를 조작하는 사용자 입력을 수신하는 단계를 추가로 포함한다. 본 방법은 조작된 그래픽 객체에 직접 링크되지 않은 그래픽 객체들을 리렌더링하지 않고 조작된 그래픽 객체 및 직접 링크된 그래픽 객체를 리렌더링하는 단계를 추가로 포함한다.

Description

그래픽 객체의 조작{MANIPULATING GRAPHICAL OBJECTS}

본 발명은 일반적으로 그래픽 객체들에 관한 것이다. 좀 더 구체적으로, 일부 실시예들은 복잡한 그래픽 객체들을 렌더링(rendering)하고 조작(manipulating)하는 것에 관한 것이다.

네이티브 브라우저 기능을 사용하여 웹 애플리케이션들에 그래픽 객체를 드로잉(drawing), 디스플레이(displaying) 및/또는 조작(manipulating)하기 위한 종래 기술들은 느리다. 이는 객체가 스크린 상을/스크린을 가로질러 움직이거나 사용자가 그래픽 객체와 상호작용할 때 나타난다.

일반적으로 사용자가 보는 전체 작업 영역은 객체가 움직일 때마다 리드로잉(redrawing)된다. 이는 네이티브 브라우저 드로잉 능력의 기존 구현들 때문이다. HTML5 캔버스 엘리먼트의 경우, 전체 드로잉 영역은 단일 레스터 디바이스이며 대부분의 변화에 대한 스크래치(scratch)로부터 리드로잉되어야 한다. SVG(scalable vector graphics)의 경우, 최종 객체 디스플레이를 표현하기 위한 구성에 대한 가장 간단한 변화조차도 브라우저에게 전체 장면을 "리플로우(re-flow)"하거나 리-랜더링(re-rendering)할 것을 요구할 수 있다.

따라서 브라우저로 전달된 그래픽 애플리케이션들의 응답은 종종 형편없으며, 좋지 못한 사용자 경험을 야기하는 시각적 정지(latency) 또는 지연(lga)을 자주 가져온다. 대안으로, 사용자에게 어떤 변화가 일어나는지에 대한 실시간 동적 뷰를 제공하는 대신, 많은 웹 기반 애플리케이션들은 변화가 완료되기 전에 이루어지는 잠정적인 변화의 제한된 표현만을 제공한다. 예를 들어, 사용자가 객체를 클릭하고 그것을 움직이기 위하여 마우스로 드래그한 경우, 많은 애플리케이션들은 객체의 윤곽 또는 그림자가 사용자의 마우스 커서를 따라 움직이는 것만을 도시하고; 사용자가 (이동을 확정하기 위해) 클릭을 해제했을 때만 객체-및 페이지-가 새로운 위치에 다시 그려지며, 따라서 페이지의 나머지 부분이 업데이트된다.

결과적으로, 웹을 통하여 전송된 많은 "리치 인터넷 애플리케이션들"은 예를 들어 그래픽 요소들의 렌더링 및 그래픽 요소들과의 상호작용을 허용하기 위하여 가상 머신 상에서 동작하는 미리 컴파일된 코드의 사용하는 플래시, 자바, 실버라이트인 브라우저 플러그인과 같은 비-네이티브 브라우저 기술들을 사용한다. 그러나, 플래시와 같은 플러그인에서, 코드에 변화가 이루어질 때마다, 코드는 .swf ("small Web Format" 또는 "Shock Wave Flash") 파일로 다시 컴파일되어 서버로 업데이트되어야 한다. 따라서 최종 사용자는 전체 애플리케이션 바이너리를 다시 다운로드해야 한다. 이러한 기술들은 요구되는 플러그인을 지원하는 이러한 플랫폼에 대한 애플리케이션의 개발 또한 제한한다.

플래시와 같은 적절한 플러그인을 설치하는 것은 또한 애플리케이션들이 웹 사이트들 또는 웹 애플리케이션들에 공통인 표준형 제어를 사용하는 것을 제한한다. 이는 플래시 애플리케이션들의 전체 사용자 경험을 다른 웹 애플리케이션들의 사용자 경험과 상당히 다르게 하여, 사용자에게 오인과 혼란을 야기할 수 있다.

그들의 폐쇄된, 컴파일된 특성 때문에 플래시 및 다른 기술들로 다른 개발자들에게 애플리케이션의 확장을 생성할 수 있도록 하는 것은 어렵다. 게다가, 다른 브라우저들 또는 다른 파일 타입들을 가로질러 일치하는 그래픽 출력을 생성하는 것은 어렵다. 예를 들어, 다른 브라우저들은 그래픽에 대하여 다른 렌더링 기술을 사용하기 때문에-인터넷 익스플로어(Internet Explorer)는 VML을 사용하는 반면, 많은 다른 브라우저들은 캔버스를 지원한다- 서로 다른 브라우저에 걸쳐 일관된 출력을 나타내는 애플리케이션들을 구축하는 것은 어렵다. 주요 과제는 서로 다른 브라우저들, 파일 포맷들, 또는 이미지 생성 라이브러리들과 같은 다른 출력 디바이스들이 공통된 렌더링 기능의 다른 서브셋들을 구현하는 것이다. 게다가, 사용자가 (프린팅을 위한 벡터 PDF, 또는 PNG와 같은 이미지 포맷들과 같은) 서로 다른 포맷들에 대하여 브라우저에서 보는 것을 일관된 방식으로 출력하여 브라우저에서 나타난 것이 PDF/PNG와 같도록 하는 것 또한 과제이다.

여기에 청구된 주제는 상술한 환경에서만 동작하고 상술한 단점만을 해결하는 실시예로 한정되지 않는다. 대신, 이러한 배경은 오직 여기에 기술된 실시예들이 실행될 수 있는 하나의 예시적인 기술 영역을 설명하기 위하여 제공된 것이다.

일반적으로, 여기에 기술된 일부 실시예들은 그래픽 객체들을 렌더링하고 조작하는 것에 관한 것이다.

일 실시예에서, 디스플레이 상에서 그래픽 객체들을 렌더링하는 방법은 개별 레이어들 내에 복수의 그래픽 객체들 각각을 렌더링하는 단계를 포함한다. 상기 복수의 그래픽 객체들은 제 1, 제 2, 제 3 그래픽 객체를 포함한다. 제 2 그래픽 객체는 제 1 그래픽 객체와 직접 링크되고 상기 제 3 그래픽 객체는 제 2 그래픽 객체와 직접 링크된다. 상기 방법은 또한 직접 링크된 그래픽 객체에 영향을 주도록 그래픽 객체들 중 하나를 조작하는 사용자 입력을 수신하는 단계를 포함한다. 상기 방법은 또한 조작된 그래픽 객체에 직접 링크되지 않은 그래픽 객체들을 리-렌더링하지 않고 조작된 그래픽 객체 및 직접 링크된 그래픽 객체를 리렌더링하는 단계를 포함한다.

다른 실시예에서, 그래픽 객체들을 표현하고 렌더링하는 방법은 레이어의 로컬 그래픽 컨텍스트 내에 렌더링되도록 그래픽 객체를 렌더링하기 위하여 그래픽 객체의 속성들을 정의하는 복수의 세트로 정보를 분리하는 단계를 포함한다. 상기 방법은 또한 글로벌 좌표 프레임을 정의하는 글로벌 그래픽 컨텍스트를 갖는 특정 뷰포트 위치에서 레이어를 생성하는 단계를 포함한다. 상기 방법은 또한 글로벌 그래픽 컨텍스트와 매칭시키기 위하여 상기 로컬 그래픽 컨텍스트를 변환 및 스케일링하는 단계를 포함한다. 상기 방법은 또한 글로벌 좌표 프레임을 사용하여 레이어에서 특정 뷰포트 위치에서 글로벌 객체를 렌더링하는 단계를 포함한다.

또 다른 실시예에서, 애플리케이션의 동작을 데몬스트레이션(demonstration)하는 방법은 컴퓨팅 디바이스에 연결된 하나 이상의 사용자 입력 디바이스들로부터 컴퓨팅 장치에 의해 실행가능한 애플리케이션의 데몬스트레이션을 시작하는데 유효한 사용자 입력을 수신하는 단계를 포함한다. 상기 방법은 시뮬레이션된 사용자 행동들에 근거하여 상기 애플리케이션을 위한 입력을 발생시키는 것에 의해 데몬스트레이션을 실행하는 단계를 포함한다. 상기 방법은 발생된 입력을 사용하여 어플리케이션을 실행하는 단계를 포함한다. 상기 발생된 입력을 사용하여 애플리케이션을 실행하는 단계는 제 1 발생 입력에 응답하여 컴퓨팅 디바이스에 연결된 디스플레이 상에 복수의 그래픽 객체들을 생성 및 렌더링하는 단계를 포함한다. 상기 발생된 입력을 사용하여 애플리케이션을 실행하는 단계는 또한 상기 복수의 그래픽 객체들 중 하나 이상을 조작하는데 유효한 제 2 발생 입력에 응답하여, 조작에 의해 영향을 받지 않는 복수의 그래픽 객체들 모두를 연속적으로 디스플레이하면서 조작이 일어날 때마다 실질적으로 실시간으로 조작에 의해 영향을 받는 복수의 그래픽 객체들 중 하나 이상을 디스플레이 상에 업데이트 및 리렌더링하는 단계를 포함한다.

또 다른 실시예에서, 디스플레이 상에 그래픽 객체를 렌더링하는 방법은 제 1 레이어에서 렌더링된 제 1 그래픽 객체가 디스플레이 상에 드로잉되게 하는 사용자 입력을 수신하는 단계를 포함한다. 상기 방법은 또한 제 1 레이어와는 다른 제 2 레이어에서 렌더링된 제 2 그래픽 객체가 디스플레이 상에 드로잉되게 하는 사용자 입력을 수신하는 단계를 포함하며, 렌더링된 제 1 및 제2 그래픽 객체는 디스 플레이 상에 동시에 보여질 수 있다. 상기 방법은 또한 제 1 및 제 2 그래픽 객체들과 연결되고, 제 1 및 제 2 레이어와는 다른 제 3 레이어에서 렌더링된 커넥터가 디스플레이 상에 드로잉되게 하는 사용자 입력을 수신하는 단계를 포함한다. 상기 방법은 또한 상기 커넥터에 의해 제 2 그래픽 객체와 연결된 제 1 그래픽 객체를 조작하는 사용자 입력을 수신하는 단계를 포함한다. 상기 방법은 또한 실질적으로 실시간 조작에 응답하여 조작 동안 상기 제 1 그래픽 객체, 제 2 그래픽 객체 및 커넥터를 연속적으로 업데이트 및 렌더링하는 단계를 포함한다. 연속적인 업데이트 및 렌더링 동안, 제 2 레이어의 제 2 그래픽 객체를 리드로잉하지 않고, 제 1 레이어에서 제 1 그래픽 객체가 리드로잉되고 제 3 레이어에서 커넥터가 리드로잉된다.

또 다른 실시예에서, 디스플레이 상에서 그래픽 정보를 렌더링하는 방법은 그래픽 객체의 속성들을 정의하는 복수의 정보 아이템들을 포함하는 중간 데이터 구조로 그래픽 객체를 렌더링하기 위한 데이터를 저장하는 단계를 포함한다. 상기 방법은 또한 복수의 정보 아이템들에 근거하여 그래픽 객체의 속성들을 렌더링하는 단계를 포함한다. 상기 방법은 또한 렌더링된 속성들에 근거하여 디스플레이 상에 그래픽 객체를 디스플레이하는 단계를 포함한다. 상기 방법은 또한 상기 복수의 정보 아이템들 중 적어도 일부가 변경되도록 하는 사용자 입력을 수신하는 단계를 포함한다. 상기 방법은 또한 변경된 정보 아이템들에 근거하여, 그래픽 객체의 속성들 중 전부가 아닌 일부를 리렌더링하는 단계를 포함한다.

본 발명의 다른 특징들 및 이점들은 이하의 상세한 설명에 개시될 것이며 부분적으로 상세한 설명으로부터 자명하거나 본 발명의 실시예에 의하여 학습될 수 있다. 본 발명의 특징들 및 이점들은 첨부된 청구범위에 구체적으로 명시된 수단들 및 조합들에 의해 실현되거나 습득될 수 있다. 본 발명의 이러한 그리고 다른 특징들은 이하의 상세한 설명 및 첨부된 청구범위로부터 좀 더 명확해지거나 이하에 개시된 발명의 실시에 의해 학습될 수 있다.

본 명세서 내용 중에 포함되어 있음

본 발명의 상술한 그리고 다른 이점들 및 특징들을 좀 더 명확히 하기 위하여, 본 발명의 좀 더 구체적인 설명이 첨부된 도면에 도시된 특정 실시예들을 참조하여 제공될 것이다. 이러한 도면들은 본 발명의 전형적인 실시예들을 도시하기 위한 것일 뿐 본 발명의 범위를 제한하기 위한 것으로 고려되지 않을 것이다. 본 발명은 첨부된 도면의 사용을 통하여 추가적인 특징 및 세부사항과 함께 기술되고 설명될 것이다.
도 1은 일부 실시예에 따른 사용자 인터페이스의 뷰포트를 도시한다.
도 2a 내지 2b는 도 1의 뷰포트에서 렌더링될 수 있는 일부 객체들의 예를 도시한다.
도 3은 일부 실시예들이 구현될 수 있는 클라이언트 디바이스의 예시적인 하드웨어 구성을 도시한다.
도 4는 객체가 일부 실시예에 따라 어떻게 렌더링될지를 나타내고 설명하기 위하여 사용되는 예시적인 중간 데이터 구조를 나타낸다.
도 5a 내지 5l은 객체가 렌더링될 수 있는 예시적인 사용자 인터페이스의 양태들을 도시한다.
도 6a는 클라이언트 디바이스의 디스플레이에서 그래픽 객체들을 렌더링하기 위한 예시적인 방법의 플로우차트이다.
도 6b는 클라이언트 디바이스의 디스플레이에서 그래픽 객체들을 렌더링하기 위한 다른 예시적인 방법의 플로우차트이다.
도 7a는 클라이언트 디바이스의 디스플레이에서 그래픽 객체를 표현 및 렌더링하기 위한 예시적인 방법의 플로우차트이다.
도 7b는 객체의 텍스트를 편집하기 위한 예시적인 방법의 플로우차트이다.
도 8은 디스플레이 상의 그래픽 객체를 렌더링하기 위한 예시적인 방법의 플로우차트이다.
도 9는 어플리케이션의 동작을 데몬스트레이션하기 위한 예시적인 방법의 플로우차트이다.

I. 제 1 실시예

먼저, 도 1을 참조하여 한 실시예가 개시된다. 도 1은 일부 실시예들에 따라 사용자 인터페이스("UI")의 뷰포트(100)를 도시한다. 뷰포트(100)는 이하에서 UI 뷰포트(100)라 한다. UI 뷰포트(100)는 제 1, 제 2 및 제 3 객체(101, 102, 103)를 포함한다. 도시된 실시예에서, 제 1 및 제 2 객체(101, 102)가 서로 직접 연결되며, 제 2 및 제 3 객체(102, 103)가 서로 직접 연결된다. 본 명세서에서 사용되는 바와 같이, 2개의 객체들이 임의의 중간 객체 없이 서로 연결된다면, 2개의 객체들은 서로 "직접" 연결된다.

추가적으로, 제 1 객체(101)는 프로세스 블록이다. 제 2 객체(102)는 커넥터이다. 제 3 객체(103)는 판단(decision) 블록이다. 더 상세하게, 객체들(101-103)은 임의의 객체일 수 있다.

도 2a 및 2b는 도 1의 뷰포트(100)에서 렌더링될 수 있는 일부 객체들의 예를 도시한다. 도 2a 및 2b에 도시된 객체들은 라이브러리 내의 다른 객체들과의 관련성(correspondence)을 기초로 라이브러리들로 구성된다. 예컨대, 도 2a에 도시된 대로, 플로우차트 라이브러리(201)는 흐름도(flowchart)에서 사용되는 객체들을 포함한다. 도 2a에 도시된 다른 라이브러리들은 컨테이너 라이브러리(202), 모양 라이브러리(203), 사용자 인터페이스 라이브러리(204), 조직 차트(organizational chart) 라이브러리(205), 통합 모델링 언어("UML") 클래스 다이어그램 라이브러리(206), UML 시퀀스 라이브러리(207), UML 상태/활동 라이브러리(208), UML 사용 케이스(use case) 라이브러리(209), 네트워크 라이브러리(210), 전자기기 라이브러리(211) 및 오디오 장비 라이브러리(212)를 포함한다. 도 2b에 도시된 다양한 라이브러리들은 표준 라이브러리(213), 스마트폰 엘레먼트 라이브러리(214), 스마트폰 컨트롤 라이브러리(215) 및 스마트폰 아이콘 라이브러리(216)를 포함한다.

일부 실시예는 대안으로 또는 추가적으로 도 2a 내지 2b에 도시되지 않은 다양한 다른 형태의 객체들을 포함할 수 있다. 예로써, 이들 다른 객체들은 가족 관계도(family tree) / 가계도(genograms) / 지노그래픽(genographs), 타임라인(timelines), 교육적 활용(예컨대, 벤(Venn) 다이어그램, 수학 및 문법 교육, 쓰기 교육용 스토리보드 등), 비즈니스 프로세스 모델, 타임라인, 공간 배치(room layout) / 인테리어 디자인, 평면도(floorplans), 조경(landscaping) / 조경 디자인, 의복(apparel) / 패션 등과 관련된 객체를 포함할 수 있으나, 이에 국한되지 않는다.

대안으로 또는 추가적으로, 일부 실시예는 사용자에 의해 선택되거나 사용자 또는 사용자 그룹과 관련된 이미지 및/또는 다른 객체들을 포함할 수 있다. 예로써, 사용자는 클라이언트 디바이스에 국부적으로 저장된 이미지 또는 다른 객체, 및/또는 다른 곳(예컨대, 공중 인터넷을 포함하나 이에 국한되지 않는 네트워크)에서 저장되거나 이용가능한 이미지 또는 다른 객체들을 선택할 수 있으나, 이에 국한되지 않는다. 일부 실시예에 따르면, 이들 객체는, 예컨대 클라이언트 데스크탑 또는 로컬 파일 시스템과 같은 다양한 소스 위치 중 임의의 하나로부터 또는 클라이언트 디바이스에 디스플레이되는 웹 페이지로부터 뷰포트(100)로 이들 객체를 "드래그 앤 드롭(dragging and dropping)"함으로써 선택될 수 있다. 마찬가지로, 현재 공지되거나 추후 개량된 임의의 방법에 따라, 객체들 및/또는 라이브러리들은, 가령 업무 그룹(예컨대, 회사 로고(logos), 이미지, 템플릿 등), 친구 그룹이나 친구로 추측되는 그룹, 공통의 또는 유사한 관심을 갖는 (공지되거나 추측되는) 그룹과 같은 그룹에 의해 선택될 수 있거나 그룹으로 관련지어질 수 있다. 이런 다른 실시예들에서, 객체들의 라이브러리로의 조직화는 사용자가 더 쉽게 원하는 객체를 찾아낼 수 있도록 하는 역할을 할 수 있다. 다른 실시예에서는, 객체들이 라이브러리로 구성되지 않는다.

하나 이상의 라이브러리(201 내지 216)는 도 1의 UI 뷰포트(100)와 동일한 UI로 툴바(toolbar)에 제공될 수 있다. 이런 다른 실시예들에서, 사용자는 툴바로부터 객체를 드래그하여 UI 뷰포트(100)의 특정 위치에 드롭함으로써 UI 뷰포트(100)의 특정 위치에 객체를 생성할 수 있다. 대안으로 또는 추가적으로, 특정 객체를 생성하는 사용자에 응답하여, 그 특정 객체에 뒤따를 가능성이 있는 한 세트의 객체들이 UI 뷰포트(100)에서 사용자에게 제시된다. 그 세트로부터 객체들 중 하나를 선택하는 사용자에 응답하여, 사용자가 드래그 앤드 드롭 동작을 수행하지 않고 특정 객체에 뒤이어서, 선택된 객체가 UI 뷰포트(100)에 생성된다.

도 1을 다시 참조하면, 객체들(101 내지 103) 각각은, 도 1에 각 객체를 둘러싼 파선으로 표시된 해당 제 1 레이어(104), 제 2 레이어(105) 또는 제 3 레이어(106) 내에 렌더링된다. 각 레이어(104 내지 106)은 도 1의 예에서 단일 객체(101 내지 103)를 포함한다. 대안으로 또는 추가적으로, 각 레이어(104 내지 106)은 한 객체 이상을 포함한다. 일부 실시예로, 각 레이어(104 내지 106)은 HTML5 캔버스 엘리먼트(canvas element) 또는 본 명세서에 기술되는 기능을 제공하는데 적합한 다른 레이어이다. 추가적으로, 도 1의 예에서 각 레이어(104 내지 106)은 그 내부에 렌더링되는 해당 객체(101 내지 103)보다 약간 더 크다.

UI 뷰포트(100)는 클라이언트 디바이스의 디스플레이 상에 디스플레이된다. 클라이언트 디바이스는 가령 키보드, 마우스 등과 같은 하나 이상의 입력 장치를 가지고/가지거나, 디스플레이가 사용자 입력을 수신할 수 있는 터치스크린 디스플레이일 수 있다. 도시된 실시예에서, UI 뷰포트(100)가 디스플레이되는 클라이언트 디바이스는 UI 뷰포트(100) 내의 마우스 커서(107)로 나타난 마우스를 포함한다. 마우스 또는 다른 입력 장치는 사용자가 현재의 예에서 객체들(101 내지 103)을 조작할 수 있도록 한다. 요컨대, 예를 들어, 사용자는 마우스를 조종하거나 터치스크린 인터페이스를 사용하여 객체들(101 내지 103) 중 하나를 이동시키거나 크기를 조정하거나, 2개의 객체를 서로 연결하거나, 객체의 일부 다른 속성을 변경할 수 있다.

일부 실시예에 따르면, 다른 레이어들(104 내지 106) 내에 객체들(101 내지 103)을 렌더링하는 것은, 가령 객체들(101 내지 103) 중 하나가 이동하는 경우와 같이 객체들(101 내지 103) 중 하나가 조작될 때 UI 뷰포트(100)를 리렌더링(re-rendering)하기 위한 프로세싱 오버헤드(processing overhead)를 최소화한다. 이런 다른 실시예에서, 이동한 객체 및 이동한 객체와 직접 연결된 하나 이상의 객체들은 각각의 레이어에서 리렌더링되는 반면, 이동한 객체와 직접 연결되지 않은 다른 객체들은 리렌더링되지 않는다.

예컨대, 제 1 객체(101)가 이동하는 경우, 제 1 객체(101)는 제 1 레이어(104)에서 계속 리렌더링된다. 제 2 객체(102)는 제 1 객체(101)와 직접 연결되기 때문에, 제 2 객체(102)는 제 1 객체(101)의 이동에 의해 일부 실시예에서 영향을 받는다. 따라서, 제 1 객체(101)가 이 예에서 이동하는 동안, 제 2 객체(102)는 제 2 레이어(105)에서 계속 리렌더링된다. 더욱이, 제 3 객체(103)는 제 1 객체(101)와 직접 연결되어 있지 않기 때문에, 제 3 객체(103)는 리렌더링되지 않는다.

II. 하드웨어 구성

다음으로, 도 3을 살펴보면, 클라이언트 디바이스(300) 또는 다른 컴퓨팅 디바이스에 대한 하드웨어 구성의 한 예가 구현가능한 일부 실시예로 개시된다. 클라이언트 디바이스(300)는 예컨대, 서버(304)와 네트워크(302)로 통신하도록 구성될 수 있다. 클라이언트 디바이스(300)는 가령 마이크로프로세서와 같은 중앙 처리 유닛(306)과, 시스템 버스(308)를 통해 상호연결되는 다수의 다른 유닛들을 포함한다. 다른 유닛들은 읽기 전용 메모리("ROM")(310), 랜덤 액세스 메모리("RAM")(312), 디스크 저장 유닛(316)과 같은 주변 장치와 시스템 버스(308)를 연결하기 위한 입출력("I/O") 어댑터(314), 키보드(320)와 연결하기 위한 사용자 인터페이스 어댑터(318), 마우스(322), 스피커(324), 마이크로폰(326), 버스(308)로의 터치스크린 인터페이스(327) 및/또는 다른 사용자 인터페이스 장치들, 네트워크(302)로 통신하기 위한 통신 어댑터(328) 및 버스(308)와 디스플레이 장치(332)를 연결하기 위한 디스플레이 어댑터(330)를 포함한다.

일반적으로 클라이언트 디바이스(300)는 가령 Microsoft Windows OS(예컨대, 7, Vista, XP), MAC OS, Unix OS, Linux OS, 모바일 OS(예컨대, iPhone OS, Windows Mobile, Symbian, Android OS, Blackberry OS 등) 또는 다른 적합한 OS와 같이, 그 내부에 상주하는 적합한 운영 시스템("OS")을 가진다. 당업자는 본 명세서에 개시된 실시예들이 본 명세서에 명시적으로 언급한 것 이외의 플랫폼 및 운영 시스템에서 대안적으로 구현될 수 있다는 점을 인식할 것이다.

일부 실시예로, 클라이언트 디바이스(300)는 웹 브라우저를 실행하여 서버(304)에 의해 호스팅된 웹 페이지를 다운로드하고 웹 페이지와 상호작용한다. 웹 브라우저는 RAM(312)로 로딩되거나 일부 다른 컴퓨터 저장 매체에 저장될 수 있고, 예컨대 CPU(316)에 의해 실행될 수 있다. 서버(304)에 의해 클라이언트 디바이스(300)로 제공된 하나 이상의 웹 페이지는 런타임 스크립트(runtime script)를 포함할 수 있다. 런타임 스크립트는 일부 예에서 JavaScript일 수 있다. 대안으로 또는 추가적으로, 런타임 스크립트는 본 명세서에 기술된 하나 이상의 방법을 수행하도록 하는 클라이언트 디바이스(300)에 의해 실행가능한 명령어를 포함할 수 있다.

III. 객체 표현(Object Representation)

도 1에 대해 상술한 바와 같이, 일부 실시예는 다른 레이어들(104 내지 106) 내에 객체들(101 내지 103)을 렌더링함으로써 프로세싱 오버헤드를 최소화한다. 대안으로 또는 추가적으로, 프로세싱 오버헤드(processing overhead)는 객체를 그 객체의 다른 속성을 정의하는 다수의 정보 세트로 렌더링하기 위한 정보를 분리시킴으로써 최소화될 수 있다. 렌더링 정보를 다른 속성을 정의하는 정보 세트로 분리함으로써, 하나의 속성으로의 변경은 다른 정보 세트에 의해 정의된 다른 속성을 리렌더링하지 않고 그 하나의 속성을 리렌더링하여 이루어질 수 있다.

이런 다른 예에서, 렌더링된 각 객체는 그 객체가 렌더링되는 방법을 나타내는 중간 데이터 구조(intermediate data structure)에서 표현된다. 예컨대, 도 4는 한 객체가 어떻게 렌터링될 수 있는지를 표현하고 나타내는데 사용되는 한 예의 중간 데이터 구조(400)를 도시한다. 중간 데이터 구조(400)는 그 객체의 속성을 정의하는 복수의 정보 세트들(402 및 404)을 포함한다. 이 예에서, 제 1 정보 세트(402)는 대개 객체의 윤곽(outline)을 정의하며, 제 2 정보 세트(404)는 대개 객체의 리치 텍스트(rich text) 영역을 정의한다.

더 상세하게, 제 1 정보 세트(402)는 객체의 윤곽을 구성하는 라인의 하나 이상의 컬러(406), 윤곽을 구성하는 라인의 웨이트(weight)(408), 윤곽을 구성하는 라인의 그라디언트(gradient)(410)(예컨대, 실선형, 파선형, 점선형), 윤곽으로 둘러싼 영역의 모양(412), 윤곽으로 둘러싼 영역의 필 컬러(fill color)(414), 필 컬러의 필 그라디언트(fill gradient)(416) 및 필 컬러의 투명도(418)를 정의한다.

모양(412) 정보는 객체의 윤곽의 형태를 정의하는 하나 이상의 명령을 포함할 수 있다. "이동(Move)", "라인(line)", "2차 베지어 곡선(quadratic Bezier curve)" 및 "폐쇄 형태(close shape)" 명령들이 객체의 윤곽의 형태를 정의하는 모양(412) 정보에 포함될 수 있는 명령의 예들이다.

제 1 정보 세트(402)는 중간 데이터 구조(400)로 표현되는 객체에 따라 상술한 렌더링 정보의 일부 또는 전부를 생략할 수 있다. 예컨대, 필 컬러(414), 필 그라디언트(416) 및 투명도(418)는 일부 예에서 도 1의 커넥터(102)와 같은 객체에 대한 제 1 정보 세트(402)로부터 생략될 수 있다. 본 발명의 다른 실시예는 도 4에 도시되지 않은, 가령 툴바 객체 또는 다른 객체에 포함되는 다수의 버튼을 정의하는 렌더링 정보, 코너 효과(예컨대, 코너를 얼마나 완만하거나 둥글게 만들 것인지)를 정의하는 렌더링 정보, 객체의 기하학적 변환(예컨대, 회전각, 스트레치, 스큐)을 정의하는 렌더링 정보, 하나 이상의 효과(예컨대, 객체 아래의 드롭 섀도우(drop shadow), 드롭 섀도우의 크기, 투영각 또는 두께, 돌출 효과(extrusion effects)와 같은 3-D 효과)를 정의하는 렌더링 정보, 단일 객체를 생성하는 다른 객체들의 부울 조합(Boolean combinations)을 정의하는 렌더링 정보 등 또는 이들의 결합과 같으나 이에 국한되지 않는, 추가적인 또는 다른 렌더링 정보를 포함할 수 있다. 더 일반적으로, 중간 데이터 구조(400)에 포함된 렌더링 정보는 객체를 렌더링하는 방법을 결정하는데 사용될 수 있는 임의의 유형의 정보를 포함할 수 있다.

제 2 정보 세트(404)는 객체 윤곽과 관련하여 리치 텍스트가 렌더링되고 리치 텍스트의 표준 표현(canonical representation)(422)인 범위 내에서, 하나 이상의 바운딩 박스(bounding box)(420)를 정의한다. 일부 실시예에서, 리치 텍스트의 표준 표현(422)은 하나 이상의 컬러, 폰트, 볼드(bold), 이탤릭(italics), 밑줄(underline), 크기 또는 리치 텍스트의 다른 태양을 특정하는 리치 텍스트의 확장형 마크업 언어("XML") 표현이다. 이런 임의의 다른 실시예에서, XML은 하이퍼텍스트 마크업 언어("HTML")와 다소 유사하며, 임의의 유효한 HTML로부터 도출될 수 있다. 텍스트는 표준 표현을 HTML과 같은 리치 텍스트로 바꾸고, 브라우저 기반 또는 다른 애플리케이션 기반 리치-텍스트 에디터를 통해 텍스트를 편집하는데 효과적인 사용자 입력을 수신한 후, 그 결과를 표준 표현으로 다시 바꿈으로써 편집된다.

일부 예에서는 파일 내의 각 객체에 대한 복잡한 렌더링 정보를 도 4의 중간 데이터 구조(400)에 포함된 제한된 정보로 분해함으로써, 출력 파일의 파일 유형 또는 파일을 열람하는데 사용되는 브라우저나 다른 애플리케이션에 관계 없이 일관된 출력이 보장된다. 예컨대, 일부 웹 브라우저가 원을 그리는 것을 지원하는 반면, 휴대용 문서 포맷("PDF")은 이를 지원하지 않는다. 2차 베지어 곡선을 사용하여 원을 모방함으로써, 중간 데이터 구조(400)는 PDF 포맷에서 웹 브라우저에 의해 원이 항상 렌더링되도록 하며, 다른 포맷에서나 다른 브라우저에 의해서도 마찬가지이다.

대안으로 또는 추가적으로, 렌더링 정보를 중간 데이터 구조에 포함된 제한된 정보로 분해함으로써, 객체의 속성이 변경되는 경우 객체의 프로세싱은 더 감소할 수 있고, 객체의 렌더링은 더 빨라진다. 예컨대, 객체의 윤곽만이 변경되는 경우, 객체의 텍스트의 리렌더링 없이 그 윤곽만 리렌더링될 수 있다. 또 다른 예로써, 객체의 텍스트만이 변경되는 경우, 객체의 윤곽의 리렌더링 없이 그 텍스트만 리렌더링될 수 있다. 변경에 의해 영향을 받는 객체의 속성만을 리렌더링함으로써, 소정의 변경에 의해 영향을 받는 속성이 무엇이든지 객체의 모든 속성을 리렌더링하는 것에 비하여, 객체를 렌더링하는 프로세싱 전력 및 시간이 상대적으로 더 감소한다.

정보 세트(402, 404) 및 렌더링 정보(406, 408, 410, 412, 414, 416, 418, 420, 422)는 단지 예로써 제공되며, 본 발명을 제한하는 것으로 해석되어서는 안 된다. 예컨대, 본 발명의 실시예들에 따라 중간 데이터 구조(400)는 2개의 정보 세트(402, 404) 이상 및/또는, 가령 (예로써 이에 국한되지 않는) 객체의 의미론적 속성(semantic attributes)을 통상 정의하는 정보 세트나 다른 정보 세트와 같은, 정보 세트들(402, 404)과는 다른 정보 세트들을 포함할 수 있다. 마찬가지로, 본 발명의 다양한 실시예들에 따라 렌더링 정보는, 가령 (예로써 이에 국한되지 않는) 객체가 인터페이스를 표현하는지 정의하는 렌더링 정보, 객체가 디스플레이된 문서 버전 및 프린트된 문서 버전 모두가 아닌 이들 중 하나에 포함되는지 정의하는 렌더링 정보, 객체와 관련된 다수의 드롭-다운 아이템(drop-down items)을 정의하는 렌더링 정보, 통합 자원 식별자("URI")를 정의하는 렌더링 정보 또는 다른 렌더링 정보와 같은, 다른 및/또는 추가적인 렌더링 정보를 포함할 수 있다.

IV. 사용자 인터페이스

도 5a 내지 5l은 일부 실시예들에 따라 객체들이 렌더링될 수 있는 한 예인 UI(500)의 태양들을 도시한다. UI(500)는 웹 브라우저나 다른 적합한 애플리케이션을 통해 제공될 수 있다. 도 5a 내지 5c에 도시된 바와 같이, UI(500)는 문서가 디스플레이되는 UI 뷰포트(502)를 포함한다. 문서는 도 1의 객체들(101 내지 103)을 포함한다. 마우스 커서(107)는 UI(500)를 조종하도록 사용자에 의해 작동되는 마우스를 표현한다. 다른 실시예로, 사용자는 터치스크린 인터페이스를 사용하여 UI(500)를 조종한다. 그러나, 임의의 다른 적합한 입력 수단이 UI(500)를 조종하는데 구현될 수 있다는 점을 인식하면서, 간소화를 위해 UI(500)와의 상호작용은 마우스/마우스 커서(107)의 관점에서 기술될 것이다.

도 2a-2b의 하나 이상의 객체 라이브러리들(201-216)이 UI(500)의 왼쪽 가장자리를 따라 스크롤 가능한 툴바(504)에 제공된다. 선택적으로, 각 객체 라이브러리(201-216)는 객체 라이브러리(201-216)의 이름(예컨대, "FLOWCHART", "CONTAINER", "SHAPES" 등)을 포함하는 헤더를 클릭함으로써 접혀지거나 확장될 수 있다. 대안으로 또는 추가적으로, 툴바(504)의 아래에 제공되는 버튼(506)이 툴바(504)로부터 객체 라이브러리(201-216)를 완전히 제거하거나 새로운 객체 라이브러리(201-216)를 툴바(504)에 추가하는데 사용될 수 있다.

일부 실시예에 따르면, 또 다른 툴바(508)가 UI 뷰포트(502) 상에 제공된다. 선택적으로, 툴바(508)에서 이용가능한 버튼은 객체가 선택되는지에 따라 및/또는 객체의 유형에 따라 변한다. 예컨대, 도 5a의 예에서는 UI(500)에 디스플레이되는 어떠한 객체(101-103)도 선택되지 않는다. 이 예에서, 툴바(508)에 제공되는 다양한 버튼들(510, 512, 514, 516)은 사용자가 UI(500)에 생성된 새로운 객체에 대한 디폴트 설정들(default settings)을 설정할 수 있도록 한다. 디폴트 설정이든 아니든 간에 UI(500)에 생성된 각 객체의 설정은 객체를 표현하는 중간 데이터 구조(400)(도 4)의 정보 세트들(402, 404)(도 4) 등에 의해 정의된 속성을 결정한다.

도 5a의 도시된 실시예에서, 사용자는 디폴트 텍스트 설정, 디폴트 블록 설정, 디폴트 라인 설정 및/또는 디폴트 테마 설정을 설정하는데 툴바(508)에 제공된 버튼들(510, 512, 514, 516)을 사용할 수 있다. 더 상세하게, 버튼(510)은 가령 새로운 객체에 포함된 텍스트의 컬러, 폰트, 강조(예컨대, 볼드/이탤릭/밑줄) 또는 크기와 같은 디폴트 텍스트 설정들을 설정하는데 사용된다. 버튼(512)은 가령 새로운 블록 객체의 필 컬러, 윤곽 컬러 또는 윤곽 두께와 같은 디폴드 블록 설정들을 설정하는데 사용된다. 버튼(514)은 가령 새로운 커넥터의 라인 컬러, 라인 두께, 라인 그라디언트 또는 라인 스타일(예컨대, 곡선, L자형, 직선)과 같은 디폴트 라인 설정들을 설정하는데 사용된다. 버튼(516)은 가령 새로운 객체의 코너 스타일(예컨대, 직각, 완만함, 원형) 및 필 그라디언트 스타일(예컨대, 그라디언트 없음, 연한 그라디언트, 강한 그라디언트)과 같은 디폴트 테마 설정들을 설정하는데 사용된다. 도 5a의 특정 디폴트 설정 및 도 5b 및 5c의 설정은 단지 예로써 기술되며, 본 발명을 제한하는 것으로 해석해서는 안 된다.

대안으로, 도 5b의 예에서, 제 3 객체(103)가 선택되었고, 제 3 객체(103)를 둘러싸는 하이라이트로 표시된다. 따라서, 도 5b의 툴바(508)는 제 1 또는 제 2 객체(101, 102)의 설정에 영향을 끼치지 않고, 사용자가 선택된 제 3 객체(103)의 설정을 설정할 수 있도록 하는 버튼(518, 520)을 제공한다. 버튼(518)의 일부는 도 5a의 버튼(510)의 일부와 유사하며, 가령 컬러, 폰트, 강조 또는 크기와 같은 설정을 설정하는데 사용될 수 있고, 선택된 제 3 객체(103)에 포함된 텍스트의 정렬(예컨대, 왼쪽, 중앙, 오른쪽)을 선택하는데 추가적으로 사용될 수 있다. 버튼(520)은 도 5a의 버튼(512)과 유사하며, 가령 선택된 제 3 객체(103)의 윤곽 컬러, 윤곽 두께 또는 필 컬러와 같은 블록 설정들을 설정하는데 사용될 수 있다.

대안으로, 도 5c의 예에서, 제 2 객체(102)가 선택되었고, 제 2 객체(102)를 둘러싸는 하이라이트로 표시된다. 따라서, 도 5c의 툴바(508)는 제 1 또는 제 3 객체(101, 103)의 설정에 영향을 끼치지 않고, 사용자가 선택된 제 2 객체(102)의 설정을 설정할 수 있도록 하는 버튼(522, 524)을 제공한다. 버튼(522)의 일부는 도 5a의 버튼(510)의 일부와 유사하며, 가령 선택된 제 2 객체(102)에 포함된 텍스트의 폰트, 강조 또는 크기와 같은 텍스트 설정을 설정하는데 사용될 수 있다. 버튼(524)의 일부는 도 5a의 버튼(514)의 일부와 유사하며, 가령 라인 컬러, 라인 두께, 라인 그라디언트 또는 라인 스타일과 같은 라인 설정들을 설정하는데 사용될 수 있고, 선택된 제 2 객체(102)의 시작/끝 스타일(예컨대, 무형(none), 화살표(arrow), 속이 빈 화살표(hollow arrow), 개방형 화살표(open arrow))을 설정하거나, 하기의 도 5h 및 5i에 대해 기술되는 바와 같이 선택된 제 2 객체(102)의 형태를 편집하는데 추가적으로 사용될 수 있다.

도 5b를 참조하면, 제 3 객체(103)가 렌더링되는 제 3 레이어(106)은 제 3 객체(103)를 둘러싸는 파선으로 표시된다. 파선이 레이어들(104-106)의 일부 또는 전부를 식별하는 용도로 도 1, 5b 및 본 명세서의 다른 도면들에 제공되지만, 본 발명의 몇몇 실시예에서는 레이어들이 UI(500)에서 사용자에게 통상 보이지 않으며, 단지 본 발명의 태양을 설명하기 위해 편의상 도면들에 제공된다.

일부 실시예에서, 가령 제 3 객체(103)와 같은 객체들은 가령 제 3 레이어(106)과 같은 해당 레이어에 대한 UI(500)상에 렌더링된다. 예컨대, 레이어의 크기 및 위치는 객체의 크기 및 위치에 해당할 수 있다. 예컨대, 이런 다른 실시예에서 사용자가 제 3 객체(103)를 조작할 때, 제 3 레이어(106)도 그에 따라 변경될 수 있다. 이와 관련하여, 객체를 포함하는 레이어는 레이어 및 객체를 조작하는데 사용될 수 있는 하나 이상의 컨트롤들(controls)을 포함할 수 있다. 또한, 일부 실시예에 따르면, 컨트롤들은 레이어의 특정 영역에 위치되며, 특정 사용자 입력에 응답하여 하이라이트 표시될 수 있다. 예컨대, 컨트롤들은 객체를 선택하는 사용자에 응답하여, 컨트롤에 해당하는 영역상을 배회하는 마우스 커서(107)에 응답하여 또는 이들 모두에 응답하여 하이라이트 표시될 수 있다.

예컨대, 도 5b의 도시된 실시예에서, 제 3 레이어(106)는 제 3 레이어(106)의 4개의 코너에 배치되는 리사이징(resizing) 컨트롤들(526a-526d)(일괄하여, "리사이징 컨트롤(526)") 및 제 3 객체(103)의 4개의 코너에 인접한 제 3 레이어(106)에 배치되는 특정 연결 컨트롤들(528a-528d)(일괄하여, "연결 컨트롤(528)")을 포함한다. 이 예에서, 리사이징 컨트롤(526) 및 연결 컨트롤(528)은 제 3 객체(103)를 선택하는 사용자에 응답하여 하이라이트 표시된다.

리사이징 컨트롤(526)은, 예컨대 사용자가 마우스 커서(107)를 리사이징 컨트롤(526) 중 하나로 이동시키고, 마우스 커서(107)가 리사이징 컨트롤(526) 상에서 움직이는 동안 왼쪽 마우스 버튼을 누르고 있으며, 제 3 레이어(106)의 크기를 조정하는데 효과적인 방향으로 마우스 커서(107)와 리사이징 컨트롤(526)을 드래그하고, 제 3 레이어(106)이 원하는 크기에 있을 때 왼쪽 마우스 버튼의 누름을 해제함으로써, 제 3 레이어(106) 및 제 3 객체(103)의 크기를 조정하는데 사용될 수 있다. 예컨대, 리사이징 컨트롤(526a)을 클릭하고 왼쪽 및/또는 위쪽으로 드래그하는 것은 제 3 레이어(106) 및 제 3 객체(103)의 크기를 증가시키는 반면, 리사이징 컨트롤(526a)을 클릭하고 오른쪽 및/또는 아래쪽으로 드래그하는 것은 제 3 레이어(106) 및 제 3 객체(103)의 크기를 감소시킨다.

사용자가 마우스 버튼을 누르고, 마우스 커서(107)를 다른 위치로 드래그하며, 마우스 버튼의 누름을 해제하는 행위를 본 명세서에서 "클릭 앤드 드래그(clicking and dragging)"라 할 수 있다. 관련된 입력 장치 및/또는 입력 장치의 설정에 따라 사용자의 다른 행위들이 마찬가지로 클릭 및 드래그 행위가 될 수 있다.

연결 컨트롤(528)은, 예컨대 사용자가 마우스 커서(107)를 연결 컨트롤(528) 중 하나에 위치시키고, 생성된 커넥터가 종료되는 말단 위치로 마우스 커서(107)를 클릭 앤드 드래그함으로써, 커넥터를 제 3 레이어(106)으로 부착하여 제 3 객체(103)에 부착하는데 사용될 수 있다. 일부 실시예로, 생성된 커넥터는 마우스 커서(107)가 연결 컨트롤(528)으로부터 기결정된 거리로 드래그된 후에 UI(500)에 렌더링되는데, 이런 생성된 커넥터는 연결 컨트롤(528)에서 시작하고 마우스 커서(107)에서 종료한다. 대안으로 또는 추가적으로, 왼쪽 마우스 버튼의 누름이 해제될 때까지 그리고 사용자가 UI(500)에 대해 마우스 커서(107)를 드래그하는 동안, 생성된 커넥터는 UI(500)에 계속 리렌더링되며, 리렌더링될 때마다 이동하는 마우스 커서(107)에 인접한 위치에서 종료한다.

도 5b의 예에서, 리사이징 컨트롤(526) 및 특정 연결 컨트롤(528)은 제 3 객체(103)를 선택하는 사용자에 응답하여 하이라이트 표시된다. 대안으로 또는 추가적으로, 리사이징 컨트롤(526), 연결 컨트롤(528) 및/또는 이전(translation) 컨트롤은 객체가 선택되었는지 여부에 관계 없이, 컨트롤에 해당하는 영역 상을 움직이는 마우스 커서(107)에 응답하여 하이라이트 표시된다.

예컨대, 도 5d에서, 제 1 레이어(104)의 4개 코너에 있는 리사이징 컨트롤(530)(단지 하나의 리사이징 컨트롤(530)만이 도 5d에 표시됨) 및 제 1 객체(101)의 4개 측면에 있는 제 1 레이어(104) 상의 연결 컨트롤(532)(단지 하나의 연결컨트롤(532)만이 도 5d에 표시됨)은, 제 1 객체(101)가 선택되지 않더라도 제 1 레이어(104)의 임의의 부분 상을 움직이는 마우스 커서(107)에 응답하여 나타날 수 있다. 일부 실시예로, 제 1 레이어(104)의 임의의 부분 상을 움직이는 마우스 커서(107)에 응답하는 리사이징 컨트롤(530) 및 연결 컨트롤(532)의 디스플레이는 마우스 커서(107)가 제 1 레이어(104) 및 제 1 객체(101)의 해당 컨트롤을 가능하게 하도록 이동될 수 있다는 것을 시각적으로 나타낸다.

UI 뷰포트(502) 내의 리사이징 컨트롤(530) 및 연결 컨트롤(532)의 디스플레이는 제 1 레이어(104) 및 제 1 객체(101)에 대하여 이용가능한 컨트롤들의 일부를 하이라이트 표시하는 역할을 한다. 대안으로 또는 추가적으로, 특정 영역에서 활성화될 수 있는 특정 컨트롤은 마우스 커서(107)가 특정 영역 상을 움직임에 따라 마우스 커서(107)가 특정 영역에 있는 동안 해당 컨트롤이 활성화될 수 있다는 것을 나타낼 때, 마우스 커서(107)의 모양을 변경함으로써 하이라이트 표시될 수 있다.

예컨대, 리사이징 컨트롤(530) 중 하나에 인접한 제 1 레이어(104)의 영역 상을 움직이는 마우스 커서(107)에 응답하여, 마우스 커서(107)가 리사이징 커서(107A)로 나타나는 영역 내의 어느 지점으로든 클릭 앤드 드래그함으로써 제 1 레이어(104) 및 제 1 객체(101)의 크기가 변경될 수 있다는 것을 사용자에게 시각적으로 표시하는 리사이징 커서(107A)로서 나타나도록, 마우스 커서(107)가 변경될 수 있다.

대안으로 또는 추가적으로, 연결 컨트롤(532) 중 하나에 인접한 제 1 레이어(104)의 영역 상을 움직이는 마우스 커서(107)에 응답하여, 마우스 커서(107)가 연결 커서(107B)로 나타나는 영역 내의 어느 지점으로든 클릭함으로써 커넥터가 제 1 레이어(104) 및 제 1 객체(101)와 연결되고/되거나 제 1 레이어 및 제 1 객체로부터 개시될 수 있다는 것을 사용자에게 시각적으로 표시하는 연결 커서(107B)로서 나타나도록, 마우스 커서(107)가 변경될 수 있다. (계속하여 연결 커서(107B)로 나타나도록 하거나 드래그 중 마우스 커서(107)로 다시 되돌아오도록 할 수 있는) 연결 커서(107B)를 말단 위치로 드래그하는 것에 응답하여, 클릭이 발생한 영역 내의 연결점에서 제 1 레이어(104) 및 제 1 객체(101)와 연결되고, 말단 위치에서 종료되는 커넥터가 생성될 수 있다.

도 5b에서 연결 컨트롤(528)은 제 3 레이어(106) 및 제 3 객체(103)의 코너 상의 분리된 점으로 도시되고, 도 5d에서 연결 컨트롤(532)은 제 1 레이어(104) 및 제 1 객체(101)의 4개 측면 상의 분리된 점으로 도시되나, 본 발명의 일부 실시예에서 연결 컨트롤은 하나 이상의 추가적인 위치들에 제공될 수 있고/있거나, 도 5b 및 5d에 도시된 것과 다른 위치들에 제공될 수 있다는 점을 유의해야 한다. 예컨대, 연결 컨트롤은 객체 또는 해당 레이어의 하나 이상의 가장자리를 따라 위치하는 추가의 분리된 점들에서 제공될 수 있다. 대안으로 또는 추가적으로, 연결 컨트롤은 객체 또는 해당 레이어의 하나 이상의 가장자리를 따라 연속적으로 제공될 수 있다. 일부 예시적인 실시예의 이런 다른 태양들에 관한 추가적인 상세한 설명이 도 5k에 대하여 하기에 제공된다.

대안으로 또는 추가적으로, 제 1 객체(101)의 가장 근접한 리사이징 컨트롤(530), 연결 컨트롤(532) 또는 텍스트 필드(text field)로부터 기결정된 거리 이상 떨어져 있는 제 1 레이어(104)의 영역 상을 움직이는 마우스 커서(107)에 응답하여, 마우스 커서(107)는 이전 커서(107C)로 나타나도록 변경될 수 있다. 이전 커서(107C)는 마우스 커서(107)가 이전 커서(107C)로 나타나는 영역 내의 어느 지점으로든 클릭함으로써 제 1 레이어(104) 및 제 1 객체(101)가 UI 뷰포트(502)의 다른 위치로 이동될 수 있다는 것을 사용자에게 시각적으로 표시한다. (계속하여 이전 커서(107C)로 나타나도록 하거나 드래그 중 마우스 커서(107)로 다시 되돌아오도록 할 수 있는) 이전 커서(107C)를 드래그하는 것에 응답하여, 제 1 레이어(104) 및 제 1 객체(101)는 커서(107C 또는 107)가 드래그되는 어느 곳이든 UI 뷰포트(502) 상에서 이동된다.

도 5d는 예컨대, 마우스 커서(107), 리사이징 커서(107A), 연결 커서(107B) 및 이전 커서(107C)와 같은 4개의 다른 커서들을 동시에 도시하나, 일부 실시예에 따라 임의의 소정의 시간에 단지 하나의 커서(107, 107A, 107B 또는 107C)만이 일반적으로 UI(500)에 나타난다. 추가적인 도면의 필요를 방지하고 마우스 커서(107)의 모양이 마우스 커서(107)가 레이어 상을 움직이는지에 따라 및/또는 마우스 커서(107)가 움직이는 레이어의 특정 영역에 따라 변할 수 있다는 것을 설명하기 위해 편의상 커서(107, 107A, 107B 및 107C)가 도 5d에서 동시에 도시된다.

도 5e는 본 발명의 일부 태양에 따라 객체들을 포함한 문서의 생성이 어떻게 간소화될 수 있는지를 도시한다. 예컨대, 마우스 커서(107)를 제 3 객체(103)의 연결 컨트롤(528A) 상에 위치시키고 마우스 커서(107)가 도 5e에 위치한 말단 위치로 마우스 커서(107)를 클릭 앤드 드래그하는 사용자에 응답하여, 사용자가 미리 수동적으로 커넥터 드로잉 모드(connector drawing mode)를 선택하지 않고도 커넥터(534)가 자동 생성된다. 도 5e에 도시된 바와 같이, 커넥터(534)는 연결 컨트롤(528A)에 해당하는 연결점에서 시작하고 그 연결점에서 제 3 객체(103)와 연결되며, 마우스 커서(107)의 말단 위치 근처에서 종료한다.

선택적으로, 커넥터(534)가 연결되는 객체에 기반하여 및/또는 제 3 객체(103)에 연결된 임의의 다른 커넥터들(534)이 이미 생성되었는지에 기반하여, 제 1 기결정된 텍스트(536)가 커넥터(534)에 자동으로 위치(populate)된다. 이런 경우, 제 3 객체(103)가 흐름도의 판단 블록(decision block)이고 판단 블록은 종종 "Yes" 경로 및 "No" 경로로 이어지나, 제 1 커넥터(534)는 자동으로 "Yes" 텍스트와 함께 위치될 수 있고, 제 3 객체(103)에 연결되는 다음 커넥터가 자동으로 "No" 텍스트와 함께 위치될 수 있다. 대안으로, 제 1 커넥터(534)는 자동으로 "No" 텍스트와 함께 위치될 수 있고, 제 3 객체(103)에 연결되는 다음 커넥터가 자동으로 "Yes" 텍스트와 함께 위치될 수 있다. 대안으로 또는 추가적으로, 사용자는 판단 블록(또는 다른 객체)에 연결되는 커넥터들이 "Yes"나 "No" 이외에 일부 다른 기결정된 텍스트와 함께 자동으로 위치되도록 설정할 수 있다.

대안으로 또는 추가적으로, 사용자가 커넥터(534)를 종료하는 소기의 말단 위치에서 마우스 커서(107)의 누름을 해제하는 것에 응답하여, 객체들의 세트(538)가 말단 위치 근처 또는 UI 뷰포트(502)의 다른 곳에서 사용자에게 UI 뷰포트(502) 내에 제시된다. 특정 실시예에서, 객체들의 세트(538)는 새로운 팝업(pop-up)이나 컨텍스트 메뉴(context menu)에서 사용자에게 제시된다. 객체들의 세트(538)는 문서, 그려지는 다이어그램 또는 문서의 유형, 사용자 기록(user history) 또는 선호도, 설정, 열린 객체 라이브러리나 최근에 또는 종종 사용된 객체 라이브러리 등에 이미 포함된 객체들(101-103 및/또는 534)을 기초로, 문서에 부가되거나 커넥터(534)에 연결될 가능성이 있는 객체들을 포함할 수 있다. 예컨대, 도 5e에 도시된 예에서, 모든 객체들(101-103 및 534)은 흐름도 객체이며 사용자가 흐름도를 생성하고 있다는 것을 나타내기 때문에, 말단 위치에 인접한 UI 뷰포트(502)에 제시된 객체들의 세트(538)는 흐름도 객체들을 포함할 수 있다.

객체들의 세트(538)가 UI 뷰포트(502)에 제시된 후, 사용자는 세트(538)로부터 특정 객체를 선택할 수 있다. 사용자 선택에 응답하여, 선택된 객체는 생성되고, 말단 위치에 인접한 커넥터(534)에 연결되며, UI 뷰포트(502)에 렌더링된다. 예컨대, 객체들의 세트(538)의 좌측 상부 코너에 제시된 객체는 프로세스 블록(process block)을 표현한다. 사용자가 프로세스 블록의 표현을 선택하면, 도 5f의 프로세스 블록(540)이 생성되고, 말단 위치에 인접한 커넥터(534)와 연결되며, UI 뷰포트(502)에 렌더링된다. 본 발명의 특정 실시예에 따르면, 객체들의 세트(538) 내의 객체의 순서 및 모양은 현재 공지된 또는 추후 개량된 기술을 사용하여 사용자의 기록 또는 선호도를 감지한 것을 기초로 또는 사용자의 선택을 기초로, 자동으로 조정될 수 있다. 예컨대, 사용자가 특정 유형의 테두리 컬러(border color), 필 컬러 및/또는 텍스트 스타일/크기/컬러를 갖는 특정 유형의 객체를 빈번히 사용한다면, 사용자는 객체들의 세트(538)에 이런 특성을 갖는 객체를 부가할 수 있거나, 자동으로 이런 객체가 부가될 수 있다.

도 5f는 객체가 위치조정되는 동안 일부 실시예에 따라 제공되는 정렬 힌트(alignment hint)의 예를 추가적으로 도시한다. 도 5f의 예에서, 판단 블록(542)은 위치조정되는 과정에 있다. 판단 블록은 수직축(544)과 수평축(546) 모두를 포함한다. 마찬가지로, 제 1 객체(101)는 수직축(548) 및 정렬 힌트 라인(550)과 동일선상에 있는 수평축(미도시)을 포함한다. 사용자가 판단 블록(542)의 위치를 조정할 때, 판단 블록(542)의 수평축(546)이 제 1 객체(101)의 수평축으로부터 기결정된 거리 내에 있는 경우 정렬 힌트 라인(550)은 UI 뷰포트(502)에 자동으로 디스플레이될 수 있다. 일부 예에서, 정렬 힌트 라인(550)이 디스플레이되는 동안 사용자가 판단 블록(542)의 누름을 해제한다면, 수평축(546)이 정렬 힌트 라인(550)과 동일선상에 있도록 판단 블록(542)은 제 1 객체(101)와 일직선으로 스냅(snapped)된다.

대안으로 또는 추가적으로, 판단 블록(542)이 제 1 객체(101)의 상하로 이동되면서 판단 블록(542)의 수직축(544)이 제 1 객체(101)의 수직축(548)으로부터 기결정된 거리 내에 접근하는 경우, 수직 정렬 힌트 라인이 디스플레이된다. 더 일반적으로, 제 1 객체가 이동되면서 제 1 객체의 수직축, 수평축 또는 다른 축이 제 2 객체의 해당 수직축, 수평축 또는 다른 축의 기결정된 거리 내로 접근하는 경우, 수직, 수평 및/또는 다른 정렬 힌트 라인들이 일부 예에서 디스플레이된다.

도 5g는 커넥터가 또 다른 객체와 연결가능함을 표시하는, UI 뷰포트(502) 내에서 제공될 수 있는 표시부(indicator)의 예를 도시한다. 특히, 제 1 객체(101)와 연결된 커넥터(552)는 제 1 객체(101)의 연결 컨트롤(532)을 클릭하고 마우스 커서(107)를 소기의 말단 위치로 드래그함으로써 생성된다. 이런 경우, 말단 위치는 판단 블록(542)의 상부 연결 컨트롤(556) 근처에 있다.

도 5g의 도시된 실시예에서, 커넥터(552)가 UI 뷰포트(502) 상에서 드래그 되다가 마우스 커서(107)가 상부 연결 컨트롤(556)을 둘러싸는 기결정된 영역 내로 접근하는 경우, 상부 연결 컨트롤(556)을 중심으로 하고 상부 연결 컨트롤을 하이라이트 표시하는 원을 포함하는 표시부(558)가 디스플레이된다. 표시부(558)는 상부 연결 컨트롤(556)에 해당하는 연결점에서 커넥터(552)가 판단 블록(542)과 연결가능하다는 것의 시각적 표시를 제공한다. 표시부(558)가 디스플레이되는 동안 커넥터(552)를 해제하는 행위는 사용자가 상부 연결 컨트롤(556)에서 커넥터(552)와 판단 블록(542)을 연결하기를 원한다는 것의 사용자에 의한 승인으로 볼 수 있다. 상술한 바와 같이, 본 발명의 일부 실시예에 따라 연결 컨트롤은 객체들(예컨대, 판단 블록(542))의 가장자리를 따라 연속적으로 위치할 수 있으므로, 도 5에 도시된 연결 컨트롤들은 연결 컨트롤의 (완전한 세트가 아닌) 예시적인 세트이다.

선택적으로, 도 5g에 도시된 바와 같이, 커넥터(552)가 UI 뷰포트(502)에 드래그되는 동안, UI 뷰포트(502) 내의 객체들의 일부 또는 전부에서 일부 연결 컨트롤들은 커넥터(552)에 대한 적어도 일부의 잠재적인 말단 위치의 예비적 표시를 사용자에게 제공하도록 디스플레이된다.

도 5h 및 5i는 일부 실시예에 따라 제공되는, 가령 커넥터(552)와 같은 커넥터들의 라인 편집의 예를 도시한다. 이런 일부 다른 실시예에서, 가령 커넥터(552)와 같은 곡선이 곡선들과 부착되는 블록으로 접근할 때 알맞게 보이도록 자동으로 곡선을 그리는 2차 베지어 곡선의 세트들로 표현될 수 있다.

특정 실시예에 따르면, 커넥터(552)가 먼저 생성될 때, 각각 커넥터(552)의 시작과 끝인 2개의 컨트롤 포인트(560, 562)를 가진다. 라인 편집 모드(line editing mode)를 선택하는 사용자에 응답하여, 각 컨트롤 포인트(560, 562)를 통과하는 컨트롤 바(564, 566)가 UI 뷰포트(502)에 디스플레이된다. 일부 실시예에서 각 컨트롤 바(564, 566)의 각은 일반적으로 커넥터가 해당 컨트롤 포인트(560, 562)에 접근할 때 커넥터(552)의 각을 결정한다. 각 컨트롤 바(564, 566)의 길이는 결정된 각으로 해당 컨트롤 포인트(560, 562)에 접근하는 커넥터(552)의 길이의 양을 일반적으로 결정할 수 있다.

컨트롤 바(564, 566)를 클릭하고 컨트롤 바(564, 566)를 해당 컨트롤 포인트(560, 562)에 대해 회전함으로써, 사용자는 컨트롤 바(564, 566)의 각을 변경할 수 있으므로, 커넥터가 해당 컨트롤 포인트(560, 562)에 접근할 때 커넥터(552)의 각을 변경할 수 있다. 대안으로 또는 추가적으로, 컨트롤 바(564, 566)를 클릭하고 컨트롤 바의 말단의 크기를 조정함으로써, 사용자는 결정된 각으로 해당 컨트롤 포인트(560, 562)에 접근하는 커넥터(552)의 길이의 양을 일반적으로 변경할 수 있다. 예컨대, 도 5i는 컨트롤 바들(564, 566) 모두의 각과 길이가 변경되었고, 더 나아가 커넥터(552)로의 해당 변화를 설명하는 예를 도시한다.

대안으로 또는 추가적으로, 예컨대 컨트롤 포인트(568)에 대한 소기의 위치에서 커넥터(552)를 클릭함으로써, 사용자가 가령 사용자에 의해 추가된 컨트롤 포인트(568)와 같은 새로운 컨트롤 포인트를 추가할 수 있다. 사용자에 의해 추가된 컨트롤 포인트(568)는 일반적으로 커넥터(552)가 통과하는 UI 뷰포트(502) 내의 포인트를 정의할 수 있다. 선택적으로, 사용자에 의해 추가된 컨트롤 포인트(568)는 사용자에 의해 추가된 컨트롤 포인트(568)를 클릭 앤드 드래그함으로써 위치조정될 수 있다. 추가적으로, 사용자에 의해 추가된 컨트롤 포인트(568)와 관련된 컨트롤 바(570)는 컨트롤 포인트(560, 562)와 관련된 컨트롤 바(564, 566)와 동일한 기능을 제공할 수 있다.

도 5j는 일부 실시예에 따라 교차하는 커넥터들(102, 572)에 대한 취급의 예를 도시한다. 도 5j에 도시된 바와 같이, 커넥터(572)는 또한 커넥터에 해당하는 제 2 객체(102) 상에 교차한다. 커넥터(572)는 커넥터(572)가 제 2 객체(102) 상에 교차하고 제 2 객체와 연결되지 않는다는 것을 표시하는 점프 피처(jump feature)(574)를 포함한다.

일부 예에서, 특정 커넥터 상에 교차하거나 특정 커넥터 상에 교차하도록 위치조정되는 커넥터(572)와 같은 다른 커넥터가 생성되는 경우, 가령 점프 피처(574)와 같은 점프 피처가 가령 제 2 객체(102)와 같은 특정 커넥터에 부가된다. 따라서, 특정 커넥터의 속성들 중 어느 것도 다른 커넥터의 생성 또는 위치조정에 의해 변경되지 않지만, 그래도 다른 커넥터의 생성 또는 위치조정은 최종 렌더링된 기존의 커넥터가 생성되는 방식에 영향을 줄 수 있다. 그래서, 일부 실시예들은 이전의 렌더링 이후 어느 커넥터가 변경되었는지 추적하고, 변경에 의해 영향을 받을 수 있는 임의의 다른 커넥터들을 식별하는 전처리 루틴(preprocesssing routine)을 추가적으로 실행한다.

전처리 루틴은 점프 피처가 어느 한쪽에 부가되어야 하는지와 같은, 2개의 커넥터가 실제로 교차하는지를 결정하는 하나 이상의 테스트를 포함할 수 있다. 예컨대, 전처리 루틴은 2개의 커넥터가 실제로 교차하는지를 결정하는 연산량이 많은(computationally heavy) 커넥터 교차 테스트를 포함할 수 있다. 대안으로 또는 추가적으로, 전처리 루틴은 AABB 테스트에서의 긍정으로 실질적인 커넥터 교차 테스트가 이어지는, 2개의 커넥터가 잠재적으로 오버랩되는지 결정하는 연산량이 적은 축-정렬 바운딩 박스(axis-aligned bounding box, "AABB") 테스트를 포함한다. 대안으로 또는 추가적으로, AABB 테스트는 단지 제 2 AABB 테스트에서 긍정되어야만 실질적인 커넥터 교차 테스트가 이어지는, 제 1 AABB 테스트로부터의 그릇된 긍정을 제거하도록 하는 회전 좌표 프레임(rotated coordinate frame) 내의 제 2 AABB 테스트가 이어질 수 있다.

오버랩되는 것으로 확인된 모든 커넥터는 변경되는 것으로 표시될 수 있으며, 렌더링할 때 커넥터의 업데이트가 필요한지 결정하는 리프로세싱(reprocessing)의 일부가 표시된 커넥터에서 실행된다. 전처리 루틴이 커넥터들의 오버래핑의 관점에서 기술되었지만, 더 일반적으로 전처리 루틴은 서로 잠재적으로 오버랩되는 객체들의 임의의 세트에 적용가능하다.

연결 컨트롤은, 예컨대 객체들(103, 101) 각각의 특정 위치에서 4개의 분리된 연결 컨트롤들(528(도 5b) 및 532(도 5d))을 각각 나타내는 도 5b 및 5d에 대하여 이미 기술되었다. 그러나, 상술한 바와 같이, 대안으로 또는 추가적으로 특정 실시예에서, 연결 컨트롤은 객체의 가장자리를 따라 다른 위치에 불연속적으로 또는 연속적으로 제공될 수 있다.

예컨대, 도 5k는 객체(576)의 각 가장자리의 중점에 위치한 연결 컨트롤들(578A-578D)(일괄하여, "연결 컨트롤(578)")을 포함하는 객체(576)를 도시한다. 특정 실시예에 따르면, 객체(576)는 객체(576)의 가장자리를 따라 다른 분리된 위치에 있거나 객체(576)의 가장자리의 임의의 포인트에서 연속적으로 이용가능한 하나 이상의 추가적인 연결 컨트롤을 더 포함할 수 있다.

객체(576)의 하부 가장자리에 위치한 하나의 추가적인 연결 컨트롤(580)이 도 5k에 도시된다. 일부 실시예에 따르면, 연결 컨트롤(580)의 위치는 연결 컨트롤(580)을 중심으로 하는 표시부(580)에 의해 식별된다. 표시부(580)는 커넥터(584)의 말단부(584A)가 연결 컨트롤(580)의 기결정된 거리 내로 드래그되는 경우 나타날 수 있다. 도 5k가 연결 컨트롤(578) 이외의 단일의 추가적인 연결 컨트롤(580)의 위치를 식별하지만, 특정 실시예에서 객체(576)는 커넥터의 말단부가 추가적인 연결 컨트롤의 기결정된 거리 내로 드래그되는 경우 가령 표시부(580)와 같은 표시부에 의해 식별가능한 다수의 추가적인 연결 컨트롤을 가진다. 따라서, 본 발명의 실시예는 가령 커넥터와 같은 객체가 도 5b 및 5d의 연결 컨트롤들(528 및 532)과 같은 4개의 분리된 연결 컨트롤 중 하나만이 아니라, 객체의 임의의 위치에 시각적으로 연결되도록 한다.

일부 실시예에 따르면, 가령 커넥터(572)에 포함된 텍스트(586)와 같은 객체에 포함된 텍스트는 객체를 따라 이동될 수 있으며, 텍스트가 이동될 때마다 실시간으로 계속 업데이트/렌더링될 수 있다. 예컨대, 도 5k에 도시된 바와 같이, 커넥터(572)의 텍스트(586)는 제 2 객체(102)의 오른쪽에 위치한다. 그러나, 텍스트(586)는 커넥터(572)를 따라, 가령 도 5l에 도시된 제 2 객체(102)의 왼쪽으로의 새로운 위치와 같은 커넥터(572)의 임의의 위치로 이동될 수 있다.

도 5k 및 5l은 커넥터(572)의 라인 내에 위치한 텍스트(586)를 도시하나, 다른 실시예에서 텍스트(586)는 커넥터(572)의 라인 내가 아닌 커넥터에 인접하여 위치할 수 있다. 예컨대, 텍스트(586)는 커넥터(572)의 임의의 부분인 위쪽, 아래쪽, 왼쪽 또는 오른쪽으로 즉시 이동될 수 있다.

도 5l은 한 커넥터(588)와 또 다른 커넥터(572)의 연결을 추가적으로 도시한다. 즉, 커넥터는 다른 커넥터들과 연결되는 것에 대해 배타적이지 않다. 실제로, 커넥터들과 다른 객체들은 통상 임의의 다른 커넥터 또는 다른 객체와 연결될 수 있다. 도시된 실시예에서, 커넥터(588)의 말단부(588A)가 사용자에 의해 이동될 때, 말단부(588A)가 커넥터(572) 상의 포인트로부터 기결정된 거리 내에 있는 경우, 커넥터(588)가 표시부(590)의 중심에 있는 커넥터(572) 상의 포인트에서 커넥터(572)와 연결될 수 있다는 것을 표시하는 표시부(590)가 나타날 수 있다.

도 5e-5g 및 5j-5k에 도시된 바와 같이, 가령 커넥터(534, 572)와 같은 일부 커넥터는 가령 텍스트 필드(536(도 5e) 및 586(도 5k))와 같은 텍스트 필드를 포함할 수 있다. 대안으로 또는 추가적으로, 커넥터는 다수의 텍스트 필드를 포함할 수 있다. 예컨대, 도 5l에 도시된 바와 같이, 커넥터(584)는 2개의 텍스트 필드(592, 594)를 포함한다. 더 일반적으로, 각 커넥터는 필요에 따라, 거의 텍스트 필드를 포함하지 않거나 하나 이상의 텍스트 필드를 포함할 수 있다.

본 발명의 다양한 실시예들이 마우스와 같은 입력 장치로 사용자에 의해 수행되는 행위와 관련하여 기술되었다. 대안으로 또는 추가적으로, 본 명세서에 기술된 실시예들은 가령 마우스나 터치스크린 인터페이스(멀티-터치 성능을 갖는 것들 포함)와 같은 임의의 입력 장치 등을 통해 클라이언트 디바이스에 의해 수신된 사용자 입력과 관련하여 기술될 수 있다. 일반적으로, 사용자 입력은 사용자에 의해 수행된 행위를 나타내는 데이터 및/또는 신호를 포함한다. 당업자는 본 명세서의 내용을 통해 입력 장치로 사용자에 의해 수행된 행위와 클라이언트 디바이스에 의해 수신된 사용자 입력 사이의 관계를 이해할 수 있을 것이다.

V. 예시적인 동작 방법

도 6a-7b를 참조하면, 본 발명의 몇몇 실시예들에 따른 동작의 다양한 예시적인 방법들이 설명되어 있다. 당업자는 본 명세서에 개시된 프로세스 및 방법에 대해 상기 프로세스 및 방법으로 수행되는 행위들이 본 명세서에 개시된 것과는 다른 순서로 실행될 수 있음을 알게 될 것이다. 더욱이, 개략적 행위 및 동작은 단지 예로서 주어지며 상기 행위 및 동작 중 일부는 선택적이거나, 몇몇의 행위 및 동작들과 결합되거나, 개시된 실시예들의 핵심으로부터 벗어남이 없이 추가 행위 및 동작들로 확장될 수 있다.

도 6a는 도 3의 디스플레이(332) 및 클라이언트 디바이스(300)와 같은 클라이언트 디바이스의 디스플레이에 그래픽 객체를 렌더링하기 위한 예시적인 방법(600)의 흐름도이다. 필요치는 않으나, 몇몇 실시예에서, 방법(600)은 상기 방법(600)을 수행하기 위한 명령어를 포함한 런타임 스크립트를 실행하는 클라이언트 디바이스에 응답해 클라이언트 디바이스에 의해 실행되고, 클라이언트 디바이스 상에 실행되는 웹브라우저가 로딩한 웹페이지에 있는 런타임 스크립트가 상기 클라이언트 디바이스에 제공된다. 가령 자바스크립트와 같은 런타임 스크립트는 네이티브 브라우저(native browser), 네이티브 폼 엘레먼트(native form element), 및 네이티브 웹 기능과 상호작용하도록 구성된다. 플래시와 같은 기술들보다 자바스크립트를 이용하는 이점 중 하나는 자바스크립트 애플리케이션이 공개 응용 프로그램 인터페이스(application programming interfaces, "APIs")를 통해 쉽게 확장될 수 있다는 것이다. 그러나, 보다 일반적으로, 상기 방법(600)과 관련해 기술된 하나 이상의 행위들은 클라이언트 시스템, 서버 시스템 등과 같은 하나 이상의 컴퓨팅 시스템에 의해 구현될 수 있듯이 하드웨어, 소프트웨어, 또는 이들의 조합으로 수행될 수 있다. 추가로, 상기 방법(600)이 도 1의 특정 실시예에 국한되지 않는 것을 전제로, 도 1의 객체(101-103) 및 레이어(104-106)과 관련해 방법(600)을 언급할 것이다.

상기 방법(600)은 각각의 레이어(104-105) 내에 복수의 객체(101-103)를 렌더링(602)함으로써 시작된다. 제 2 객체(102)는 제 1 객체(101)에 직접 링크되고, 제 3 객체(103)는 제 2 객체(102)에 직접 링크된다. 몇몇 실시예에 따르면, 각각의 객체(101-103)는 각 객체(101-103)에 대해 해당 중간 데이터 구조(400)(도 4)를 기초로 각각의 레이어(104-105) 내에 렌더링된다(602). 대안으로 또는 추가로, 각각의 객체(101-103)는 상기 객체(101-103)가 포함되는 각각의 레이어(104-105)에 대해 참조로 렌더링된다.

상기 방법(600)은 직접 링크된 객체(101-103)에 영향을 끼치는 식으로 객체(101-103) 중 하나를 조작하는 사용자 입력을 수신함으로써(604) 계속된다. 본 예에서, 사용자 입력은 도 1에 도시된 위치로부터 새 위치(미도시)로 제 1 객체(101)를 이동하는데 유효하다. 대안으로 또는 추가로, 제 1 객체(101)를 조작하는 사용자 입력은 제 1 레이어(104)을 조작하는 사용자 입력을 포함한다.

상기 방법(600)은 제 1 객체(101)에 직접 링크되지 않은 제 3 객체(103)를 리렌더링(re-rendering)하지 않고 조작된 제 1 객체(101)와 상기 제 1 객체(101)에 직접 링크된 제 2 객체(102)를 리-렌더링(606)함으로써 처리된다. 몇몇 실시에에서, 조작된 제 1 객체(101)와 직접 연결된 제 2 객체(102)는 제 1 객체(101)가 조작되는 동안 거의 실시간으로 리렌더링된다.

도 6a에 도시되지 않았으나, 다양한 다른 행위들 및 동작들이 다양한 방법들(600)들에 포함될 수 있다. 가령, 이미 상술한 바와 같이, 레이어(104-106)은 상기 레이어에 포함된 객체(101-103)보다 약간 더 클 수 있고, 각 레이어(104-106)은 리사이징(resizing) 컨트롤, 이전 컨트롤, 및 연결 컨트롤 중 적어도 하나를 포함한다. 이 예에서, 상기 방법(600)은 디스플레이에 표시되는 마우스 커서(107)가 특정 컨트롤러에 해당하는 레이어(104-106) 영역 위로 떠다니게 하고, 가령 도 5d를 참조로 기술된 바와 같이, 특정 컨트롤을 강조하는 사용자 입력을 수신하는 단계를 더 포함할 수 있다.

또 다른 예에서, 제 1 레이어(104) 및 제 3 레이어(106) 각각은 제 1 및 제 3 레이어(104,106)의 연결 컨트롤(532,528)에 해당하는 연결점을 포함할 수 있다. 또한, 도 5f 및 5g의 제 1 객체(101) 및 판단 블록(542)이 도 5g의 커넥터(552)를 만들기 전에 생성된 방식과 유사하게, 제 1 및 제 3 객체(101,103)는 제 2 객체(102)를 만들기 전에 생성될 수 있다. 이 예에서, 상기 방법(600)은 제 2 객체(102)를 생성 및 렌더링하기 전에 제 1 객체(101)의 연결점으로부터 시작하는 제 2 객체(102)의 생성을 개시하는 사용자 입력을 수신하는 단계와 제 3 객체(103)의 연결점에 제 2 객체(102)를 종료하는 사용자 입력을 수신하는 단계를 더 포함할 수 있으며, 여기서 제 2 객체(102)는 해당 연결점들에서 제 1 객체(101)와 제 3 객체(103)에 연결된 커넥터이다. 몇몇 실시예에서, 제 1 객체(101)의 연결점으로부터 제 2 객체(102)의 생성을 개시하는 사용자 입력은 제 2 객체(102)를 드로잉하기 위해 커넥터 드로잉 모드를 사전에 수동으로 선택하는 단계 없이 연결점을 선택하는 사용자 행위를 나타낸다.

대안으로 또는 추가로, 및 앞선 구절의 예에 이어서, 상기 방법(600)은 제 2 객체(102)를 종료하는 사용자 입력을 수신하기 전에 제 3 객체(103)의 연결점에서 제 2 객체(102)를 제 3 객체(103)에 링크하는 능력의 도 5g의 표시자(558)와 같은 시각 표시를 제공하는 단계를 더 포함할 수 있다. 상기 방법(600)은 추가로 사용자가 제 3 객체(103)의 연결점에서 제 2 객체(102)를 제 3 객체(103)에 링크하고자 하는 확인을 나타내는 마우스 버튼의 해제를 나타내는 데이터와 같은 사용자 입력을 수신하는 단계와, 그런 후 제 3 객체(103)의 연결점에서 제 2 객체(102)를 제 3 객체(103)에 링크하는 단계를 포함할 수 있다.

또 다른 예로서, 상기 방법(600)은 도 5e 및 5f에 대해 기술된 행위와 도 5e에 나타낸 객체의 세트(538)를 포함할 수 있다. 가령, 도 1과 관련하여 도 5e 및 5f에 대한 행위들 중 일부를 고려하면, 상기 방법(600)은 제 2 및 제 3 객체(102-103)를 렌더링하기 전에 제 1 객체(101)의 연결점으로부터 시작한 제 2 객체(102)의 생성을 개시하는 사용자 입력을 수신하는 단계; 제 2 객체(102)의 제 2 단부의 말단 위치를 식별하는 사용자 입력을 수신하는 단계; 말단 위치를 식별하는 사용자 입력을 수신하는 단계에 응답해, 제 3 객체(103)로서 사용을 위해 세트(538)와 같은 객체의 표현 세트를 디스플레이에 나타내는 단계; 및 제 3 객체(103)의 표현 선택을 포함한 사용자 입력을 수신하는 단계를 포함할 수 있고, 제 2 객체(102)는 제 1 객체(101)의 연결점에 연결된 제 1 단부 및 상기 제 1 단부 맞은편의 제 2 단부를 갖는다.

대안으로 또는 추가로, 상기 방법(600) 또는 상술한 변형들 중 어느 하나를 수행하기 위해 도 3의 클라이언트 디바이스(300)와 같은 컴퓨팅 디바이스에 의해 실행될 수 있는 명령어들이 컴퓨팅 디바이스에 의한 실행을 위해 물리적 컴퓨터 판독가능한 저장매체에 저장될 수 있다.

도 6b는 도 3의 디스플레이(332) 및 클라이언트 디바이스(300)와 같이 클라이언트 디바이스에 그래픽 객체를 렌더링하기 위한 또 다른 예시적인 방법(650)의 흐름도이다. 필요치는 않으나, 몇몇 실시예에서, 방법(650)은 클라이언트 디바이스에 의해 실행된다. 그러나, 보다 일반적으로, 상기 방법(650)과 관련해 기술된 하나 이상의 행위들은 클라이언트 시스템, 서버 시스템 등과 같은 하나 이상의 컴퓨팅 시스템에 의해 구현될 수 있듯이 하드웨어, 소프트웨어, 또는 이들의 조합으로 수행될 수 있다.

단계 652에서, 제 1 객체가 제 1 레이어에 렌더링되고 디스플레이에 나타내지게 하는 사용자 입력이 수신된다.

단계 654에서, 제 2 객체가 제 2 레이어에 렌더링되고 디스플레이에 나타내지게 하는 사용자 입력이 수신된다. 몇몇 실시예에서, 양 객체들이 렌더링된 후 제 1 및 제 2 객체 모두가 동시에 사용자에 보일 수 있다.

단계 656에서, 커넥터가 제 3 레이어에 렌더링되고 디스플레이에 나타내지게 하는 사용자 입력이 수신되고, 상기 커넥터는 제 1 및 제 2 객체를 연결시킨다. 몇몇 실시예에서, 커넥터는 제 1 및 제 2 객체 간에 디스플레이 상에 그려진 라인에 응답하는 라인일 수 있으나, 본원의 다른 실시예들에서 커넥터는 또 다른 특성을 갖고/갖거나 다른 형태 또는 형상을 취할 수 있음에 유의하라.

단계 658에서, 커넥터에 의해 제 2 객체에 연결된 제 1 객체를 조작하는 사용자 입력이 수신된다.

단계 660에서, 제 1 객체, 제 2 객체 및 커넥터는 제 1 객체의 조작 동안 거의 실시간으로 연속적으로 업데이트되고 디스플레이된다. 몇몇 실시예에서, 행위(660)는 제 2 레이어의 제 2 객체를 리렌더링하지 않고 제 1 레이어의 제 1 객체와 제 3 레이어의 제 3 객체를 연속적으로 리렌더링하는 단계를 포함한다.

도 7a는 도 3의 디스플레이(332) 및 클라이언트 디바이스(300)와 같이 클라이언트 디바이스의 디스플레이에 그래픽 객체를 나타내고 렌더링하기 위한 예시적인 방법(700)의 흐름도이다. 필요치는 않으나, 몇몇 실시예에서, 방법(700)은 클라이언트 디바이스에 의해 실행된다. 그러나, 보다 일반적으로, 상기 방법(700)과 관련해 기술된 하나 이상의 행위들은 클라이언트 시스템, 서버 시스템 등과 같은 하나 이상의 컴퓨팅 시스템에 의해 구현될 수 있듯이 하드웨어, 소프트웨어, 또는 이들의 조합으로 수행될 수 있다.

상기 방법(700)은 도 4의 정보 세트(402,404)와 같이 객체의 속성을 정의하는 복수의 세트들에 객체를 렌더링하기 위해 정보를 분리하는 단계(702)에 의해 시작된다. 몇몇 실시예에서, 객체는 레이어의 특정 그래픽 컨텍스트에서 렌더링하도록 구성된다. 레이어의 그래픽 컨텍스트는 가령 객체가 결국 렌더링되는 UI 뷰포트에 의해 정의된 글로벌 좌표 프레임 및/또는 스케일과 같거나 다를 수 있는 로컬 좌표 프레임 및/또는 스케일을 정의할 수 있다.

단계 704에서, UI 뷰포트의 특정 위치에 레이어가 생성된다. 상기 UI 뷰포트의 특정 위치는 사용자가 도 5a의 툴바(504)와 같은 툴바로부터 객체를 드래그하는 UI 뷰포트의 위치 또는 사용자가 커넥터를 종료시킴으로써 객체(도 5e)의 표현 세트(538)를 통해 사용자가 말단 위치 부근 등에 객체를 선택 및 생성하게 촉구하는 UI 뷰포트의 위치에 해당할 수 있다.

단계 706에서, 레이어의 그래픽 컨텍스트는 UI 뷰포트의 그래픽 컨텍스트와 일치하게 옮겨지고 증감된다.

단계 708에서, 글로벌 좌표 프레임을 이용한 레이어 내의 UI 뷰포트의 특정 위치에 객체가 랜더링된다. 레이어 내에 객체를 랜더링하는 단계(708)는 복수의 정보 세트에 의해 정의된 객체의 속성들을 개별적으로 렌더링하는 단계를 포함할 수 있다.

도 7에 도시되지 않았으나, 상기 방법(700)의 변형들로 다른 행위 또는 동작들이 추가로 포함될 수 있다. 가령, 방법(700)은 복수의 정보 세트에 의해 정의된 객체의 개별적으로 렌더링된 속성들을 캐싱하는 단계(caching); 특정 세트에 의해 정의된 특정 속성을 변경하는 사용자 입력을 수신하는 것에 응답하여, 복수의 정보 세트에 포함된 다른 세트들에 의해 정의된 다른 속성들을 렌더링하지 않고도 특정 정보 세트에 의해 정의된 특정 속성을 리렌더링하는 단계를 더 포함할 수 있다.

대안으로 또는 추가로, 상기 방법(700) 또는 상술한 변형들 중 어느 하나를 수행하기 위해 도 3의 클라이언트 디바이스(300)와 같은 컴퓨팅 디바이스에 의해 실행될 수 있는 명령들이 컴퓨팅 디바이스에 의한 실행을 위해 물리적 컴퓨터 판독가능한 저장매체에 저장될 수 있다.

도 7b는 도 7a의 방법(700) 또는 본 명세서에 개시된 다른 방법들과 결합될 수 있는 객체의 텍스트를 편집하기 위한 예시적인 방법(750)의 흐름도이다. 도 7b의 예에서, 객체를 렌더링하기 위한 정보는 텍스트의 표준 표현(canonical representations)을 포함한 객체의 리치-텍스트(rich-text) 영역을 정의하는 적어도 하나의 정보 세트를 포함하는 복수의 세트로 분리된다.

단계 752에서, 텍스트의 표준 표현은 리치 텍스트로 변환된다.

단계 754에서, 리치-텍스트를 편집하는데 유효한 사용자 입력이 리치-텍스트 에디터를 통해 수신된다. 리치-텍스트 에디터는 몇몇 실시예에 따르면 웹브라우저 기반의 에디터이다.

단계 756에서, 편집된 리치 텍스트는 편집된 리치 텍스트의 표준 표현으로 변환된다.

몇몇 실시예에서, 텍스트의 표준 표현은 텍스트의 XML 표현이다. 대안으로 또는 추가로, 리치 텍스트는 텍스트의 HTML 표현이다.

도 8은 도 3의 디스플레이(332) 및 클라이언트 디바이스(300)와 같이 클라이언트 디바이스의 디스플레이에 그래픽 정보를 렌더링하는 예시적인 방법(800)의 흐름도이다. 필요치는 않으나, 몇몇 실시예에서, 방법(800)은 클라이언트 디바이스에 의해 실행된다. 그러나, 보다 일반적으로, 상기 방법(800)과 관련해 기술된 하나 이상의 행위들은 클라이언트 시스템, 서버 시스템 등과 같은 하나 이상의 컴퓨팅 시스템에 의해 구현될 수 있듯이 하드웨어, 소프트웨어, 또는 이들의 조합으로 수행될 수 있다.

상기 방법(800)은 그래픽 객체의 속성을 정의하는 복수의 정보 항목을 포함하는 중간 데이터 구조에 그래픽 객체를 렌더링하기 위해 데이터(802)를 저장하는 단계에 의해 시작된다. 중간 데이터 구조의 일예가 도 4의 단계 400에 제공된다. 다양한 예의 정보 항목들도 또한 도 4의 406, 408, 410, 412, 414, 416, 418, 420, 422에 제공된다.

단계 804에서, 그래픽 객체의 속성들은 정보 항목을 기초로 렌더링된다.

단계 806에서, 그래픽 객체는 렌더링된 속성들을 기초로 디스플레이에 나타내진다.

단계 808에서, 정보 항목들 중 적어도 일부가 변하게 하는 사용자 입력이 수신된다.

단계 810에서, 변경된 정보 항목을 기초로, 그래픽 객체의 속성 전부가 아니라 일부가 리렌더링된다. 행위(810)는 가령 그래픽 객체의 속성들 각각이 변경된 정보 항목들에 의해 영향받았는지 여부를 판단하는 단계와 변경된 정보 항목들에 영향받은 것으로 판단된 이들 속성들만을 리렌더링하는 단계를 포함할 수 있다. 대안으로 또는 추가로, 행위(810)는 그래픽 객체의 리치 텍스트 영역을 리렌더링하지 않고 그래픽 객체의 외곽선을 리렌더링하는 단계를 포함할 수 있다. 대안으로 또는 추가로, 행위(810)는 그래픽 객체의 외곽선을 리렌더링하지 않고 그래픽 객체의 리치 텍스트 영역을 리렌더링하는 단계를 포함할 수 있다.

대안으로 또는 추가로, 상기 방법(800) 또는 상술한 변형들 중 어느 하나를 수행하기 위해 도 3의 클라이언트 디바이스(300)와 같은 컴퓨팅 디바이스에 의해 실행될 수 있는 명령들이 컴퓨팅 디바이스에 의한 실행을 위해 물리적 컴퓨터 판독가능한 저장매체에 저장될 수 있다.

상기 제공된 개시를 고려해, 당업자는 본 명세서에 개시된 몇몇 실시예들이 몇몇 응용들에서 객체를 리렌더링하는 것과 관련된 프로세싱 지연 없이 사용자 명령에 응답해 객체들이 거의 즉시 리렌더링되게 할 수 있음을 이해할 것이다. 거의 즉시 객체들을 리렌더링하는 능력은 본 명세서에 개시된 몇몇 방법들을 실행하는 제품의 라이브(live) "데몬스트레이션(demonstraion)"를 가능하게 하도록 레버리지될 수 있다.

이에 대해, 주목되는 바는 많은 웹사이트들과 애플리케이션들은 특정 애플리케이션 또는 서비스가 어떻게 작동하는지에 대한 비디오 데몬스트레이션을 제공한 것이다. 이들 입증들 대부분은 애플리케이션 인터페이스, 애플리케이션 응답 방법, 소정 행위 또는 결과를 달성하기 위한 애플리케이션 사용 방법을 나타내는 비디오 스크린 캡쳐인 사전레코딩 비디오를 포함한다.

그러나, 몇몇 실시예에 따르면, 실제 라이브 데몬스트레이션은 사용자가 동작시 애플리케이션을 보게 클라이언트 디바이스에 제공될 수 있다. 다시 말하면, 데몬스트레이션이 단지 비디오 스크린 캡쳐이기보다, 데몬스트레이션은 동작시 애플리케이션을 나타내기 위해 시뮬레이션된 사용자 행동을 이용한 애플리케이션의 실제 실행이다.

도 9는 설명된 바와 같이 애플리케이션의 동작을 데몬스트레이션하기 위한 예시적인 방법(900)의 흐름도이다. 방법(900)은 몇몇 실시예에서 사용자가 애플리케이션에 접근하기 위해 클라이언트 디바이스에 실행되는 웹브라우저를 이용한 웹페이지를 연 후 시작되고 애플리케이션의 데몬스트레이션을 보기 위한 옵션으로 표현되거나 옵션을 선택한다.

단계 902에서, 가령 클라이언트 디바이스에 의해 애플리케이션의 데몬스트레이션을 시작하는데 유효한 사용자 입력이 수신된다. 단계 904에서, 시뮬레이션된 사용자 행동을 기초로 애플리케이션에 대한 입력을 발생함으로써 데몬스트레이션이 개시된다.

발생된 입력은 행동시 애플리케이션의 데몬스트레이션을 제공하기 위해 발생된 입력을 이용해 실행되는(906) 애플리케이션에 제공된다. 몇몇 실시예에서, 발생된 입력을 이용해 애플리케이션을 실행하는 단계(906)는 조작이 발생할 때 거의 실시간으로 조작에 영향받는 복수의 그래픽 객체들 중 하나 이상을 디스플레이에 업데이트 및 리렌더링하며 제 1 발생 입력 및 복수의 그래픽 객체들 중 하나 이상을 조작하는데 유효한 제 2 발생 입력에 응답하여 컴퓨팅 디바이스에 연결된 디스플레이에 복수의 그래픽 객체들을 생성 및 렌더링하는 단계를 포함한다.

도 9에 나타내지 않았으나, 방법(900)은 데몬스트레이션이 끝난 디스플레이에 대한 표시를 나타내는 단계와, 사용자가 데몬스트레이션 동안 생성된 복수의 그래픽 객체들을 편집하게 허용하는 단계를 더 포함할 수 있다.

도 9의 방법(900)에서 시뮬레이션된 사용자 행동들은 가령 마우스 클릭 및 이동, 키보드로부터 문자를 타이핑하기 위한 자판 누름, (멀티터치 인터페이스를 위한 다수의 동시발생 스와이프를 포함한) 터치스크린 인터페이스를 위한 핑거 스와이프(finger swipe) 등을 포함할 수 있다. 추가로, 시뮬레이션된 사용자 행동으로부터 발생된 입력은 시뮬레이션된 사용자 행동을 실제로 수행하는 사용자로부터 발생한 것일 수 있는 사용자 입력과 같다.

몇몇 실시예에서, 사용자 행동을 시뮬레이션하는 단계는 디스플레이에 사용자 행동에 따른 출력을 디스플레이하는 단계를 포함한다. 가령, 시뮬레이션된 사용자 행동이 마우스 클릭이면, 디스플레이상에 나타난 마우스 커서의 출현은 마우스 클릭이 발생한 것을 나타내기 위해 변할 수 있다. 대안으로 또는 추가로, 시뮬레이션된 사용자 행동이 마우스 이동이면, 디스플레이상에 나타난 마우스 커서는 디스플레이를 가로질러 움직일 수 있다. 마찬가지로, 시뮬레이션된 사용자 행동이 핑거 스와이프면, 스와이핑 행동 표시가 디스플레이상에 나타날 수 있다. 대안으로 또는 추가로, 시뮬레이션된 사용자 행동이 키보드에 타이핑되면, 문자가 디스플레이에 나타날 수 있다.

따라서, 데몬스트레이션을 보는 사용자는 애플리케이션에서 소정 행동들을 수행하는데 필요한 모든 단계들이 상기 애플리케이션이 실제로 실행되기 때문에 사용자 바로 앞에서 필연적으로 발생된 애플리케이션의 실제 실행을 체험한다. 대조적으로, 애플리케이션 실행의 비디오 표현은 애플리케이션을 정확하게 나타내지 않도록 소정 단계들을 편집 및/또는 생략할 수 있다.

추가로, 애플리케이션이 업데이트되는 경우, 애플리케이션의 초기 버전의 비디오 데몬스트레이션은 구식이 될 것이고 애플리케이션의 새 버전을 정확히 반영하도록 업데이트되어야 한다. 그러나, 본 명세서에 개시된 라이브 데몬스트레이션의 실시예에 따르면, 업데이트할 비디오 데몬스트레이션이 전혀 없다. 대신, 애플리케이션이 업데이트되면, 라이브 데몬스트레이션이 애플리케이션의 실행을 포함하기 때문에 라이브 데몬스트레이션도 또한 반드시 업데이트된다.

또한, 비디오 데몬스트레이션을 보는 사용자의 관점으로부터, 비디오 데몬스트레이션은 문서와 같은 애플리케이션 출력을 생성하기 위한 애플리케이션 사용방법을 사용자에 보여줄 수 있으나, 비디오 데몬스트레이션 그 자체는 애플리케이션 출력을 발생하지 않는다. 가령, 비디오 데몬스트레이션은 문서를 생성 또는 편집하기 위한 애플리케이션 사용 방법을 사용자에게 보여줄 수 있으나, 비디오 데몬스트레이션은 사용자에 의한 편집이나 그렇지 않으면 사용될 수 있는 실제 문서를 생성하지 않는다. 대조적으로, 본 명세서에 기술된 라이브 데몬스트레이션의 실시예들은 실제로 데몬스트레이션 중에 애플리케이션을 실행하기 때문에, 데몬스트레이션 중에 생성 또는 편집된 임의의 문서 또는 객체도 데몬스트레이션이 종료될 때 사용자에 의해 편집 또는 사용될 수 있게 된다.

도 9를 참조하면, 몇몇 실시예에서, 라이브 데몬스트레이션이 애플리케이션을 포함한 웹페이지를 다운로드하는 웹브라우저내에서 발생한다. 사용자가 브라우저 윈도우의 크기와 같이 브라우저 윈도우의 몇몇 측면들을 컨트롤할 수 있기 때문에, 방법(900)의 몇몇 실시예들은 데몬스트레이션 동안 임의의 시각적 출력을 출력하는 애플리케이션에 앞서 브라우저 윈도우의 크기를 검출하는 단계와, 검출된 윈도우 크기를 기초로 시각적 출력을 스케일링하는 단계를 더 포함할 수 있다.

대안으로 또는 추가로, 애플리케이션의 실행에 응답해 사용자에게 나타내진 UI의 몇몇 실시예들은 도 5a-5c 및 버튼(506)을 참조로 상술한 바와 같이 사용자가 와해 및/또는 숨길 수 있는 다른 객체 라이브러리들을 나타낸다. 몇몇의 경우, 라이브 데몬스트레이션은 특정 객체 라이브러리로부터 객체를 포함할 수 있다. 이와 같이, 도 9의 방법(900)은 라이브 데몬스트레이션에 사용된 객체를 포함한 하나 이상의 객체 라이브러리들이 UI에 이용될 수 있는지 판단하는 단계와, 필요하다면 하나 이상의 객체 라이브러리들을 디스플레이하도록 UI를 업데이트하는 단계를 더 포함할 수 있다.

본 개시 덕택에 당업자는 본 명세서에 개시된 본 발명이 다른 많은 시나리오로 구현될 수 있음을 이해할 것이다. 가령, 예제 웹사이트는 사용자가 전자 콜라주(electronic collage) 또는 기타 문서로 제품의 이미지를 드래그 앤 드롭하게 할 수 있다. 제품은 가령 의류 및 악세사리 또는 기타 제품일 수 있다. 본 명세서에 개시된 원리들은 사용자가 새 이미지를 콜라주에 드래그하고, 콜라주에 이미 있는 기존 이미지들에 변경을 가하여, 이미지들을 함께 연결시켜, 웹사이트가 어떻게 작동하는지에 대한 데몬스트레이션을 보여주는 등 또는 그 중 임의로 조합할 경우 이런 웹사이트의 렌더링 속도를 향상시키도록 쉽게 적용될 수 있다. 상기는 단지 본 발명의 원리 중 일부의 특정 적용에 대한 한 가지 특정 예이며, 당업자는 다른 상황에서 본 발명의 원리를 응용하는 방법을 알 것이다.

Ⅵ. 예시적인 실시예의 일반 태양

본 개시 덕택에 당업자는 본 명세서에 기술된 실시예들이 본 명세서에 명백히 개시된 구현들을 너머 다른 구현들에도 적용될 수 있음을 알 것이다. 가령, 몇몇 실시에들은 웹브라우저에서 실행되는 웹페이지에 제공된 런타임 스크립트의 명령어에 의해 구현된 방법으로 기술되어 있으나, 상기 방법 또는 그 변형들은 대안으로 본 명세서에 기술된 것과 유사한 이점을 얻기 위해 전매특허 플러그인(plugin)으로 구현될 수 있다.

또 다른 예로, 본 명세서에 개시된 몇몇 방법들은 래스터 기반의 캔버스 구현을 위해 최적화된다. 그러나, 상기 방법 및 그 변형들은 가령 컨테이너 엘레먼트의 주의 깊은 사용을 통해 "SVG"(Scalable Vector Graphics) 표현과 같이 웹브라우저에서 태그 기반의 벡터 표현용으로 적용될 수 있다.

본 명세서에 기술된 실시예들은 하기에 더 상세히 언급된 바와 같이 다양한 컴퓨터 하드웨어 또는 소프트웨어 모듈을 포함한 특수용 또는 범용 컴퓨터의 사용을 포함할 수 있다.

본 발명의 범위내에 있는 실시예들은 또한 컴퓨터 실행가능한 명령어 또는 저장된 데이터 구조를 운반하거나 갖는 컴퓨터 판독가능 매체를 포함한다. 이런 컴퓨터 판독가능한 매체는 범용 또는 특수용 컴퓨터에 의해 접근될 수 있는 임의의 이용가능한 매체일 수 있다. 예로써 그리고 제한 없이, 이런 컴퓨터 판독가능한 매체는 RAM, ROM, EEPROM, CD-ROM 또는 기타 광디스크 저장장치, 자기 디스크 저장장치, 또는 기타 자기저장 디바이스와 같은 물리적 컴퓨터 판독가능한 저장매체, 또는 컴퓨터 판독가능한 명령어 또는 데이터 구조 형태로 소정의 프로그램 코드 수단을 운반 또는 저장하는데 사용될 수 있으며 범용 또는 특수용 컴퓨터에 의해 접근될 수 있는 임의의 다른 물리적 매체를 포함한다. 정보가 네트워크나 또 다른 통신 연결(유선, 무선 또는 유선이나 무선의 조합)을 통해 컴퓨터에 전달 또는 제공될 경우, 컴퓨터는 컴퓨터 판독가능한 매체로서 연결을 적절히 보여준다. 따라서, 임의의 이런 연결을 컴퓨터 판독가능한 매체라 한다. 상기의 조합도 또한 컴퓨터 판독가능한 매체의 범위내에 포함되어야 한다.

컴퓨터 판독가능한 명령어는 가령 범용 컴퓨터, 특수용 컴퓨터, 또는 특수용 처리 디바이스가 소정의 기능 또는 기능들의 그룹을 수행하게 하는 명령어 또는 데이터를 포함한다. 주제가 구조 특징 및/또는 방법론적 행동에 대한 특정 언어로 기술되었으나, 특허청구범위에 정의된 주제는 상술한 구체적 특징 또는 행동들에 반드시 국한될 필요가 없다. 오히려, 상술한 구체적 특징 및 행동들은 청구항의 발명을 구현하는 예시적인 형태로 개시되어 있다.

본 명세서에 사용된 바와 같이, "모듈" 또는 "구성부품"이라는 용어는 컴퓨팅 시스템에 실행되는 소프트웨어 객체 또는 루틴을 말할 수 있다. 본 명세서에 기술된 다른 구성부품, 모듈, 엔진 및 서비스들은 (가령, 별도의 스레드로서) 컴퓨팅 시스템에 실행되는 객체 또는 프로세스로서 구현될 수 있다. 본 명세서에 기술된 시스템 및 방법은 바람직하게는 소프트웨어로 구현되나, 하드웨어 또는 소프트웨어와 하드웨어를 조합한 구현도 또한 가능하며 고려된다. 본 명세서에서, "컴퓨팅 엔티티"는 본 명세서에서 앞서 정의된 임의의 컴퓨팅 시스템이거나 컴퓨팅 시스템에 운영되는 임의의 모듈 또는 모듈들의 조합일 수 있다.

본 발명은 기술사상과 핵심적 특징으로부터 벗어남이 없이 다른 특정 형태로 구현될 수 있다. 기술된 실시예들은 모든 면에서 단지 예시적이며 제한되는 것으로 간주되지 않아야 한다. 따라서 본 발명은 상술한 설명에 의해서라기보다 특허청구범위로 표현되어 진다. 특허청구범위의 의미 및 등가 범위 내에 있는 모든 변화들도 본 발명의 범위 내에 포함되어야 한다.

Claims

삭제
삭제
삭제
삭제
삭제
삭제
삭제
삭제
삭제
삭제
삭제
삭제
삭제
디스플레이 상에서 그래픽 정보를 렌더링하는 방법으로서,
주어진 그래픽 객체의 속성들을 정의하는 복수의 정보 아이템들을 포함하는 중간 데이터 구조로 주어진 그래픽 객체를 렌더링하기 위한 데이터를 저장하는 단계;
상기 복수의 정보 아이템들에 근거하여 주어진 그래픽 객체의 속성들 모두를 렌더링하는 단계;
렌더링된 속성들에 근거하여 디스플레이 상에 주어진 그래픽 객체를 디스플레이하는 단계;
주어진 그래픽 객체의 그래픽 표현을 편집하기 위하여 상기 복수의 정보 아이템들 중 적어도 일부가 변경되도록 하는 사용자 입력을 수신하는 단계; 및
변경된 정보 아이템들에 근거하여, 주어진 그래픽 객체의 속성들 중 전부가 아닌 일부를 리렌더링하는 단계를 포함하고,
복수의 정보 아이템들은 복수의 세트로 분리되고, 주어진 그래픽 객체의 그래픽 표현은 모든 속성들의 조합에 의하여 결정되는 그래픽 정보 렌더링 방법.
제 14 항에 있어서,
상기 주어진 그래픽 객체의 속성들 중 전부가 아닌 일부를 리렌더링하는 단계는,
주어진 그래픽 객체의 각 속성들이 상기 변경된 정보 아이템들에 의해 영향을 받는지 여부를 결정하는 단계; 및
상기 변경된 정보 아이템들에 의해 영향을 받는 주어진 그래픽 객체의 속성들만 리렌더링하는 단계를 포함하는 그래픽 정보 렌더링 방법.
제 14 항에 있어서,
상기 주어진 그래픽 객체의 속성들 중 전부가 아닌 일부를 리렌더링하는 단계는 주어진 그래픽 객체의 리치 텍스트 영역을 리렌더링하지 않고 주어진 그래픽 객체의 윤곽을 리렌더링하는 단계를 포함하는 그래픽 정보 렌더링 방법.
제 14 항에 있어서,
상기 주어진 그래픽 객체의 속성들 중 전부가 아닌 일부를 리렌더링하는 단계는 주어진 그래픽 객체의 윤곽을 리렌더링하지 않고 주어진 그래픽 객체의 리치 텍스트 영역을 리렌더링하는 단계를 포함하는 그래픽 정보 렌더링 방법.
제 14 항에 있어서,
리렌더링되지 않은 하나 이상의 속성들에 대한 렌더링된 속성에 근거하여 및 리렌더링된 하나 이상의 속성들에 대한 리렌더링된 속성에 근거하여 디스플레이 상에 주어진 그래픽 객체를 디스플레이하는 단계를 더 포함하는 그래픽 정보 렌더링 방법.
제 14 항에 있어서,
주어진 그래픽 객체는 레이어의 로컬 그래픽 컨텍스트 내에 렌더링하도록 구성되고, 방법은:
글로벌 좌표 프레임을 정의하는 글로벌 그래픽 컨텍스트를 갖는 특정 뷰포트 위치에서 레이어를 생성하는 단계;
글로벌 그래픽 컨텍스트와 매칭시키기 위하여 로컬 그래픽 컨텍스트를 변환 및 스케일링하는 단계; 및
글로벌 좌표 프레임을 사용하여 레이어에서 특정 뷰포트 위치에서 그래픽 객체를 렌더링하는 단계를 더 포함하는 그래픽 정보 렌더링 방법.