KR101115497B1

KR101115497B1 - 웹페이지의 저작에 있어서 오브젝트 선택을 지원하기 위한 방법, 시스템 및 프로그램

Info

Publication number: KR101115497B1
Application number: KR1020097010228A
Authority: KR
Inventors: 요시오 호리우치
Original assignee: 인터내셔널 비지네스 머신즈 코포레이션
Priority date: 2006-12-28
Filing date: 2007-12-20
Publication date: 2012-02-27
Also published as: US20150019977A1; CN101578576A; JPWO2008081733A1; WO2008081733A1; EP2116925B1; JP4959722B2; EP2116925A4; US20080163102A1; US11288337B2; CA2666305C; CA2666305A1; KR20090087451A; CN101578576B; EP2116925A1; US8850332B2

Abstract

본 발명에 있어서, 웹페이지의 저작에 있어서, 편집 화면의 WYSIWYG 성을 손상하지 않고, 태그 선택을 용이하게 행할 수 있도록 하는 것을 목적으로 한다.

본 발명은, 웹페이지의 저작에 있어서 오브젝트 선택을 지원하는 것으로, 웹페이지의 편집 화면에 있어서의 사용자 동작에 따라, 오브젝트 선택을 위한 기준점을 결정하고, 기준점을 둘러싸는 기준 영역을 설정하며, 기준 영역에 포함되는 뷰 오브젝트 중, 기준점에 가장 가까운 뷰 오브젝트를 기준 뷰 오브젝트로서 선택하고, 기준 영역에 포함되는 뷰 오브젝트 중, 기준 뷰 오브젝트에 관련되는 뷰 오브젝트를 선택하여, 기준 뷰 오브젝트를 나타내는 제1 직사각형 및 관련되는 뷰 오브젝트를 나타내는 제2 직사각형을, 오브젝트 선택을 위한 공간을 사이에 두게 하고, 기준 뷰 오브젝트 및 관련되는 뷰 오브젝트와는 별도로 묘화한다.

Description

웹페이지의 저작에 있어서 오브젝트 선택을 지원하기 위한 방법, 시스템 및 프로그램{METHOD, SYSTEM, PROGRAM FOR ASSISTING OBJECT SELECTION WHEN WEB PAGE IS AUTHORED}

본 발명은, 웹페이지의 저작(authoring)에 관한 것으로, 특히, 웹페이지의 저작에 있어서 오브젝트 선택을 지원하기 위한 방법, 시스템 및 프로그램에 관한 것이다.

웹페이지는 태그베이스의 마크업 언어(HTML, XML, JSP 등)로 기술된다. 웹페이지의 편집에 있어서, 태그의 삽입이나 삭제, 태그의 특성 조작 등의 편집 작업은 기본적으로 태그베이스, 즉 편집 대상의 태그를 선택함으로써 행해진다. 많은 툴이 태그를 브라우저로 보는 것과 동등하게 시각화한 편집 화면(이하 WYSIWYG 편집 화면이라고 부름)을 제공하고, 편리성을 향상시키고 있다. 그러나, 최근의 웹페이지는 복잡하고, 또한 태그가 시각적으로 간극없이 치밀하게 배치되어 작성되고 있기 때문에, WYSIWYG 편집 화면에서 편집 대상인 태그를 선택하는 것이 곤란하다. 태그의 영역이 완전히 중복되어 있거나 하면, 어떤 지점을 클릭했을 때에 그 태그가 선택될지는 사용자로서는 매우 알기 어렵다.

예컨대, 도 1에 도시하는 바와 같은 간단한 편집 화면이라도, 그 HTML 소스 파일은 도 2에 도시하는 바와 같이 상자 구조로 되어 있고, 편집 화면의 일부를 클릭한 것만으로는 원하는 태그를 선택할 수 없는 경우가 있다. 그 때문에, 종래의 웹페이지 저작 툴, 예컨대 본 출원인의 Page Designer(비특허 문헌 1 참조)는, HTML의 태그를 계층 표시하는 특별한 사용자 인터페이스(UI)를 가지고 있다. 그러나, 이 UI는 통상의 트리이고, WYSIWYG 편집 화면의 레이아웃이 반영된 것이 아니다.

도 2와 같은 소스 코드를 직접 표시하면, 태그의 선택은 간단히 되지만, 소드 코드 표시가 WYSIWYG 편집 화면과는 동떨어져 있기 때문에, 선택한 태그의 영역이 실제의 웹페이지의 어디에 위치하고 있는지는, 잠깐 보는 것만으로는 알 수 없다. 또한, 편집 화면 상에, 태그의 오픈/클로즈용의 아이콘을 표시하는 등 하여, 편집 화면 내에서의 태그 선택의 편리성을 향상시키는 수법도 알려져 있지만, 이것은 페이지 전체의 WYSIWYG성을 도외시한 수법이다.

비특허 문헌 1: "Page Designer", http://www-06.ibm.com/jp/software/ websphere/developer/wsad/workshop/pdf/8.pdf

전술한 바와 같이, 종래의 태그 선택은, 웹페이지 편집 화면의 WYSIWYG성을 손상하거나, 혹은 그것을 무시하여 행해지고 있었다.

따라서 본 발명의 목적은, 웹페이지의 저작에 있어서, 편집 화면의 WYSIWYG 성을 손상하지 않고, 태그 선택을 용이하게 행할 수 있도록 하는 것에 있다.

본 발명은, WYSIWYG 편집 화면 상에서, 웹페이지의 태그를 어떻게 하여 선택할 것인지의 과제를 해결하는 것이다. 웹페이지의 저작에 있어서 태그를 선택한다고 하는 것은, 실제로는, 그 태그에 의해 지정되는 뷰 오브젝트를 편집 대상으로서 선택한다고 하는 것이기 때문에, 본 명세서에서는, 태그의 선택과, 뷰 오브젝트(단순히 오브젝트라고 하는 경우도 있음)의 선택을 동의어인 것으로 한다.

본 발명의 제1 형태에 따르면, 웹페이지의 저작에 있어서 오브젝트 선택을 지원하기 위한 방법으로서, 웹페이지의 편집 화면에 있어서의 사용자 동작에 따라, 오브젝트 선택을 위한 기준점을 결정하는 단계와, 상기 기준점을 둘러싸는 기준 영역을 설정하는 단계와, 상기 기준 영역에 포함되는 뷰 오브젝트 중, 상기 기준점에 가장 가까운 뷰 오브젝트를 기준 뷰 오브젝트로서 선택하는 단계와, 상기 기준 영역에 포함되는 뷰 오브젝트 중, 상기 기준 뷰 오브젝트에 관련되는 뷰 오브젝트를 선택하는 단계와, 상기 기준 뷰 오브젝트를 나타내는 제1 직사각형 및 상기 관련되는 뷰 오브젝트를 나타내는 제2 직사각형을, 오브젝트 선택을 위한 공간을 사이에 두게 하여, 상기 기준 뷰 오브젝트 및 상기 관련되는 뷰 오브젝트와는 별도로 묘화(描畵)하는 단계를 포함하는 방법이 제공된다.

본 발명의 제2 형태에 따르면, 웹페이지의 저작에 있어서 오브젝트 선택을 지원하기 위한 장치로서, 웹페이지의 편집 화면에 있어서의 사용자 동작에 따라, 오브젝트 선택을 위한 기준점을 결정하는 기준점 결정부와, 상기 기준점을 둘러싸는 기준 영역을 설정하는 기준 영역 설정부와, 상기 기준 영역에 포함되는 뷰 오브젝트 중, 상기 기준점에 가장 가까운 뷰 오브젝트를 기준 뷰 오브젝트로서 선택하는 기준 뷰 오브젝트 선택부와, 상기 기준 영역에 포함되는 뷰 오브젝트 중, 상기 기준 뷰 오브젝트에 관련되는 뷰 오브젝트를 선택하는 관련 뷰 오브젝트 선택부와, 상기 기준 뷰 오브젝트를 나타내는 제1 직사각형 및 상기 관련되는 뷰 오브젝트를 나타내는 제2 직사각형을, 오브젝트 선택을 위한 공간을 사이에 두게 하여, 상기 기준 뷰 오브젝트 및 상기 관련되는 뷰 오브젝트와는 별도로 묘화하는 묘화부를 포함하는 장치가 제공된다.

본 발명의 제3 형태에 따르면, 웹페이지의 저작에 있어서 오브젝트 선택을 지원하기 위한 프로그램으로서, 웹페이지의 편집 화면에 있어서의 사용자 동작에 따라, 오브젝트 선택을 위한 기준점을 결정하는 단계와, 상기 기준점을 둘러싸는 기준 영역을 설정하는 단계와, 상기 기준 영역에 포함되는 뷰 오브젝트 중, 상기 기준점에 가장 가까운 뷰 오브젝트를 기준 뷰 오브젝트로서 선택하는 단계와, 상기 기준 영역에 포함되는 뷰 오브젝트 중, 상기 기준 뷰 오브젝트에 관련되는 뷰 오브젝트를 선택하는 단계와, 상기 기준 뷰 오브젝트를 나타내는 제1 직사각형 및 상기 관련되는 뷰 오브젝트를 나타내는 제2 직사각형을, 오브젝트 선택을 위한 공간을 사이에 두게 하여, 상기 기준 뷰 오브젝트 및 상기 관련되는 뷰 오브젝트와는 별도로 묘화하는 단계를 컴퓨터에 실행시키기 위한 프로그램이 제공된다.

본 발명은, 웹페이지의 저작에 있어서, 그 WYSIWYG 편집 화면에서의 오브젝트 선택을 지원하는 것이지만, 웹페이지의 저작에서는 어디까지나 편집 대상은 WYSIWYG 편집 화면이라고 하기 때문에, 본 발명은, 편집 작업중 일관하여 결과물과 동등한 화면을 편집 대상으로 할 수 있도록 하고 있다.

도 1은 본 발명의 지원의 대상이 되는 웹페이지의 간단한 예를 도시하는 도면.

도 2는 도 1에 도시한 웹페이지의 HTML 소스 파일을 도시하는 도면.

도 3은 본 발명의 실시 환경의 일례를 도시하는 도면.

도 4는 본 발명에 따른 클라이언트의 기능 구성예를 도시하는 블록도.

도 5는 본 발명에 따른 클라이언트의 동작을 도시하는 흐름도.

도 6은 도 1에 도시한 웹페이지를 태그 구조와 함께 도시하는 도면.

도 7은 도 1에 도시한 웹페이지에 있어서 기준 영역을 설정할 때의 상황을 도시하는 도면.

도 8은 도 2에 도시한 HTML 소스 파일을 트리 형식으로 도시하는 도면.

도 9는 본 발명에 따른 클라이언트의 묘화부에 의한 선택 오브젝트 및 관련 아이콘의 묘화의 기본 개념을 도시하는 도면.

도 10은 본 발명에 따른 클라이언트의 묘화부에 의한 실제의 묘화 결과의 일례를 도시하는 도면.

도 11은 본 발명에 따른 클라이언트로서 실장 가능한 데이터 처리 시스템의 일례를 도시하는 블록도.

본 발명의 실시환경의 일례를 도 3에 도시한다. 도시한 시스템(10)은, 네트워크(12)에 접속된 서버(14) 및 클라이언트(16)를 포함하여, 서버(14)에 저장되어 있는 웹페이지를 클라이언트(16)에 의해 편집하도록 되어 있다. 네트워크(12)는, 인터넷, 로컬 영역 네트워크(LAN), 광역 네트워크(WAN) 등 임의의 네트워크라도 좋다. 네트워크에 복수의 클라이언트를 접속하고, 웹페이지를 공동으로 편집하는 것도 가능하다. 이러한 편집 형태는, 웹 컬래버레이션 혹은 단순히 컬래버레이션이라고 불리고 있고, 웹페이지의 저작에 한정되지 않으며, 여러 가지 분야에서 활용되고 있다. 본 발명의 실시가, 도 3과 같은 네트워크 환경뿐만 아니라, 독립형의 클라이언트라도 가능한 것은 물론이다.

본 발명에 따라 웹페이지의 저작을 행하는 클라이언트(106)의 기능 구성예를 도 4에 도시한다. 클라이언트(106)는 기억부(20), 기준점 결정부(22), 기준 영역 설정부(24), 기준 뷰 오브젝트 선택부(26), 관련 뷰 오브젝트 선택부(28) 및 묘화부(21)를 구비하고 있다. 기억부(20)는, 서버(14)로부터 네트워크(12)를 통해 얻은 웹페이지의 데이터(예컨대 HTML 소스 파일)를 기억한다. 기준점 결정부(22)는, 웹페이지의 편집 화면에 있어서의 사용자 동작에 따라, 오브젝트 선택을 위한 기준점을 결정한다. 기준 영역 설정부(24)는, 기준점 결정부(22)에 의해 결정된 기준점을 둘러싸는 기준 영역을 설정한다. 기준 뷰 오브젝트 선택부(26)는, 기준 영역 설정부에 의해 설정된 기준 영역에 포함되는 뷰 오브젝트 중, 기준점에 가장 가까운 뷰 오브젝트를 기준 뷰 오브젝트로서 선택한다. 관련 뷰 오브젝트 선택부(28)는, 기준 영역 설정부에 의해 설정된 기준 영역에 포함되는 뷰 오브젝트 중, 기준 뷰 오브젝트에 관련되는 뷰 오브젝트를 선택한다. 묘화부(30)는, 기준 뷰 오브젝트를 나타내는 제1 직사각형 및 관련되는 뷰 오브젝트를 나타내는 제2 직사각형을, 오브젝트 선택을 위한 공간을 사이에 두게 하여, 기준 뷰 오브젝트 및 관련되는 뷰 오브젝트 와는 별도로 묘화하고, 묘화 결과를 클라이언트(106)의 디스플레이(도시하지 않음)에 출력한다.

다음으로, 도 5의 흐름도를 참조하여, 클라이언트(16)에 의해 실행되는 웹페이지의 저작에 있어서의 오브젝트 선택 동작을 상세하게 설명한다. 전제로서, 클라이언트(106)의 디스플레이에는, 도 1에 도시하는 웹페이지가 WYSIWYG 편집 화면으로서 표시되어 있고, 도 2의 소스 코드가 클라이언트(16)의 기억부(20)에 기억되어 있는 것으로 한다. 단, 도면의 소스 코드에 있어서 1에서 62까지의 행 번호는 설명을 위해 편의상 붙인 것으로, 실제의 소스 코드에는 포함되어 있지 않다.

동작의 상세로 이동하기 전에, 도 6을 참조하여, 도 1의 웹페이지의 태그 구조에 대해 간단히 설명해 둔다. 도 6은 도 2의 소스 코드에 있어서의 오픈 태그로부터 대응하는 클로즈 태그까지의 영역을 직사각형으로 도시한 것이다. 웹페이지를 구성하는 테이블(50)은, 「Menu」 및 「Contents」라고 하는 2개의 색인(52A, 52B)을 포함하는 제1 행 54A(도 2의 소스 코드의 행 8～11에 대응)과, 색인을 포함하지 않는 제2 행 54B(도 2의 소스 코드의 행 12～58에 대응)을 포함한다. 행 54B는 내부에 6개의 문자열을 포함하는 제1 데이터 셀(56A)(도 2의 소스 코드의 행 13～44에 대응)과, 내부에 3개의 이미지를 포함하는 제2 데이터 셀(테이블)(56B)(도 2의 소스 코드의 행 45～57에 대응)을 포함한다. 또, 테이블(50)은, 실제로는 그 내부에 tbody의 영역을 포함하지만, 여기서는 생략하고 있다. 다른 테이블도 마찬가지이다.

제1 데이터 셀(56A)은 테이블(58)(도 2의 소스 코드의 행 14～43에 대응)을 포함하고, 테이블(58)은, 4개의 행 60A(도 2의 소스 코드의 행 16～32에 대응), 60B(도 2의 소스 코드의 행 33～35에 대응), 60C(도 2의 소스 코드의 행 36～38에 대응) 및 60D(도 2의 소스 코드의 행 39～41에 대응)를 포함한다. 행 60A는, 그 내부에 데이터 셀(61)(도 2의 소스 코드의 행 17～31에 대응) 및 테이블(63)(도 2의 소스 코드의 행 18～30에 대응)을 포함하고, 테이블(63)은, 「Sun」, 「Cloud」 및 「Moon」이라고 하는 데이터 셀을 각각 포함하는 3개의 행을 포함한다. 행 60B는 「Item1」이라고 하는 데이터 셀(도 2의 소스 코드의 행 34)을 포함하고, 행 60C는 「Item2」라고 하는 데이터 셀(도 2의 소스 코드의 행 37)을 포함하며, 행 60D는 「Item3」이라고 하는 데이터 셀(도 2의 소스 코드의 행 40)을 포함한다.

제2 데이터 셀(56B)은 테이블(62)(도 2의 소스 코드의 행 46～56에 대응)을 포함하고, 테이블(62)은 2개의 행 64A(도 2의 소스 코드의 행 48～51에 대응) 및 64B(도 2의 소스 코드의 행 52～54에 대응)를 포함한다. 행 64A는, Sun의 이미지를 포함하는 데이터 셀(66A)(도 2의 소스 코드의 행 49에 대응) 및 Cloud의 이미지를 포함하는 데이터 셀(66B)(도 2의 소스 코드의 행 50에 대응)을 포함하고, 행 64B는, Moon의 이미지를 포함하는 데이터 셀(68)(도 2의 소스 코드의 행 53에 대응)을 포함한다.

도 5로 되돌아가, 최초의 단계 S1에서, 클라이언트(16)는, 도 1의 편집 화면상에서 오브젝트(태그) 선택을 위한 사용자 동작이 있었는지의 여부를 체크한다. 이 사용자 동작은 사전에 정의되어 있고, 예컨대, 마우스의 우측 버튼을 클릭한 상태로 Ctrl키를 누르는 동작을 오브젝트 선택의 트리거로 할 수 있다. 물론, 다른 마우스/키 조작을 오브젝트 선택의 트리거로서 정의해 두어도 좋다.

사용자 동작이 있으면, 단계 S2에서, 기준점 결정부(22)는 오브젝트 선택을 위한 기준점을 결정한다. 기준점 결정부(22)는, 예컨대, 캐럿(caret) 또는 마우스 커서의 위치를 기준점으로 하여 결정할 수 있다. 기준점이 결정되면, 다음 단계 S3에서, 기준 영역 설정부(24)가 기준점을 둘러싸는 기준 영역을 설정한다. 이 기준 영역은, 기준점의 근방의 몇 개인가의 오브젝트를 선택할 수 있는 소정의 크기로 설정된다. 예컨대, 기준점을 중심으로 하여, 편집 화면의 종횡 3분의 1의 크기로 설정할 수 있다. 그 일례를 도 7에 도시한다. 도 7에 있어서, 편집 화면(70) 상에서 커서(74)가 도시한 장소에 위치하고 있으면, 굵은 선(76)으로 나타내는 기준 영역이 설정된다. 도 7의 예에서는, 기준 영역(76)은 직사각형으로 되어 있지만, 반드시 직사각형일 필요는 없다.

도 5로 되돌아가, 기준 영역이 설정되면, 다음 단계 S4에서, 기준 뷰 오브젝트 선택부(26)가, 기준 영역에 포함되는 뷰 오브젝트 중, 기준점에 가장 가까운 오브젝트를 기준 뷰 오브젝트로서 선택한다. 기준점에 가장 가까운 오브젝트로는, 기준점을 포함하는 오브젝트, 기준점의 옆에 경계선이 있는 오브젝트 등이 해당되고, 도 2와 같은 트리 구조를 고려함으로써 선택된다. 도 6 및 도 7의 예로 설명하면, 커서(74)의 위치에 의해 표시되는 기준점이 문자열 「Sun」을 포함하는 데이터 셀(58A)의 위치에 있기 때문에, 기준 뷰 오브젝트 선택부(26)는, 데이터 셀(58A)을 기준 뷰 오브젝트로서 선택하여도 좋다.

기준 뷰 오브젝트가 선택되면, 다음 단계 S5에서, 관련 뷰 오브젝트 선택 부(28)가, 기준 영역에 포함되는 뷰 오브젝트 중, 기준 뷰 오브젝트 선택부(26)에 의해 선택된 기준 뷰 오브젝트에 관련되는 뷰 오브젝트를 선택한다. 이 관련 뷰 오브젝트는, 기준 뷰 오브젝트의 형제 오브젝트, 부모 오브젝트 및 아이 오브젝트 중의 적어도 하나이다. 다음으로, 도 8에 도시하는 트리 구조를 참조하면서, 관련 뷰 오브젝트의 선택에 대해 설명한다.

도 8은 도 2의 소스 코드를 트리 형식으로 도시한 것으로, 기억부(20)는 이 트리 구조도 기억하고 있다. 트리의 각 노드와 소스 코드의 행 번호의 관계는 이하와 같이 되어 있다.

body82(루트 노드) :행5～61

table84 :행6～60

tr86A :행8～11

tr86B :행12～58

th88A :행9

th88B :행10

td90A :행13～44

td90B :행45～57

Menu91 :행9

Contents92 :행10

table93 :행14～43

table94 :행46～56

tr96A :행16～32

tr96B :행33～35

tr96C :행36～38

tr96D :행39～41

tr98A :행48～51

tr98B :행52～54

td99 :행17～31

td101 :행34

td102 :행37

td103 :행40

td105A :행49

td105B :행50

td104 :행53

table100 :행18～30

Item1 108 :행34

Item2 110 :행37

Item3 112 :행40

Sun의 이미지 114 :행49

Cloud의 이미지 116 :행50

Moon의 이미지 118 :행53

tr106A :행20～22

tr106B :행23～25

tr106C :행26～28

td120 :행21

td122 :행24

td124 :행27

Sun126 :행21

Clould128 :행24

Moon130 :행27

관련 뷰 오브젝트 선택(28)은, 기억부(20)에 기억되어 있는 소스 코드의 트리 구조로부터, 기준 영역에 포함되는 복수의 뷰 오브젝트 중, 기준 뷰 오브젝트의 형제 오브젝트, 부모 오브젝트 및 아이 오브젝트를 순서대로 탐색하고, 부모 오브젝트 또는 아이 오브젝트가 발견되면, 그 형제 오브젝트, 부모 오브젝트 및 아이 오브젝트를 순서대로 탐색하여, 이하 마찬가지의 단계를 오브젝트가 발견되지 않게 될 때까지 반복한다.

구체예로 설명하면, 도 6 및 도 7의 예에서는, 문자열 「Sun」을 포함하는 데이터 셀(58A)이 기준 뷰 오브젝트로서 선택되어 있기 때문에, 관련 뷰 오브젝트 선택부(28)는, 우선 도 7의 기준 영역(76)에 포함되는 오브젝트 중에서, 데이터 셀(58A)의 형제 오브젝트를 탐색한다. 데이터 셀(58A)은, 도 8에서는 노드(120)에 대응하고 있지만, 노드(120)는 형제를 가지고 있지 않기 때문에, 관련 뷰 오브젝트 선택부(28)는, 다음으로, 노드(120)의 부모 및 아이를 탐색한다. 노드(120)는 노드(106A) 및 노드(126)를 각각 부모 및 아이로서 갖고 있고, 어느 것이나 기준 영역(76)에 포함되어 있기 때문에, 관련 뷰 오브젝트 선택부(28)는 이들을 관련 뷰 오브젝트로서 선택한다.

다음으로, 관련 뷰 오브젝트 선택부(28)는, 부모 노드(106A)의 형제를 탐색한다. 도 8의 예에서는, 노드(106A)는 노드(106B 및 106C)를 형제로서 갖고 있고, 더구나 이들은 기준 영역(76)에 포함되어 있기 때문에, 관련 뷰 오브젝트 선택부(28)는 이들을 관련 뷰 오브젝트로서 선택한다. 또한, 관련 뷰 오브젝트 선택부(28)는, 노드(106A, 106B 및 106C)의 부모, 노드(106B 및 106C)의 아이를 탐색하여, 노드(100, 122, 124, 128 및 130)를 선택한다. 이하 마찬가지로 하여, 관련 뷰 오브젝트 선택부(28)는, 기준 영역에 포함되는 관련 뷰 오브젝트가 없어질 때까지, 형제, 부모 및 아이의 탐색을 계속한다. 또, 본 발명에서는, 형제, 부모 및 아이의 탐색은 임의의 순서로 행하여도 좋고, 반드시 형제를 최초에 탐색해야 하는 것은 아니다.

탐색이 끝나면, 관련 뷰 오브젝트 선택부(28)는, 선택한 오브젝트를 도 8에 도시하는 바와 같은 트리 구조의 형태로 기억부(20)에 기억하고, 또한 어느 것이 기준 뷰 오브젝트인지를 나타내는 포인터를 묘화부(30)에 제공한다.

관련 뷰 오브젝트의 선택이 끝나면, 최후의 단계 S6에서, 묘화부(30)는, 기준 뷰 오브젝트를 나타내는 제1 직사각형 및 관련 뷰 오브젝트를 나타내는 제2 직사각형을, 오브젝트 선택을 위한 공간을 사이에 두게 하여, 기준 뷰 오브젝트 및 관련되는 뷰 오브젝트와는 별도로, 예컨대 팝업 UI로서 묘화한다. 혹은, WYSIWYG 편집 화면의 관련 부분을 일시적으로 재기록하도록 하여도 좋다. 묘화의 일례를 도 9에 도시한다. 묘화부(30)는, 우선 최초에, 포인터에 의해 지정된 기준 뷰 오브젝트를 나타내는 제1 직사각형(200)을, 원래의 기준 뷰 오브젝트의 레이아웃 결과를 이용하여 묘화한다. 직사각형(200)의 크기는, 웹페이지 편집 화면의 크기나, 기준 뷰 오브젝트 및 관련 뷰 오브젝트의 위치를 고려하여 적절하게 결정하면 좋다. 직사각형(200)은, 예컨대 문자열 「AAAAAAABBBBBBBBCCCC」가 절첩에 의해 「AAAAAAABBBBB」와 「BBBCCCC」로 나뉘어져 있었던 경우에는, 2개의 직사각형이 되지만, 본 발명은, 이러한 직사각형의 조합도 포함하는 것으로 한다.

다음으로, 관련 뷰 오브젝트가 부모 오브젝트인 경우에는, 묘화부(30)는, 그 관련 뷰 오브젝트를 나타내는 제2 직사각형(202)을, 오브젝트 선택을 위한 공간(도 9에 사선으로 나타냄)을 비우고 묘화한다. 사용자는, 예컨대 직사각형(202)의 경계선을 클릭함으로써, 관련 뷰 오브젝트를, 따라서 원하는 태그를 가선택할 수 있다. 그 때문에, 경계선을 어느 정도의 굵기로 묘화해 두는 것이 바람직하다. 공간의 폭은, 적절하게 결정하면 좋다. 예컨대 웹페이지의 디폴트 폰트의 높이를 어림잡아 결정할 수 있다. 관련 뷰 오브젝트 선택부(28)가 작성한 트리 구조를 더듬어 올라가는 것에 따라 얻어지는 부모의 수가 많기 때문에, 팝업 UI가 지나치게 커지는 경우에는, 도중에 부모의 묘화를 그만두고, 그 대신에, 부모가 있는 것을 나타내는 아이콘(204)을 예컨대 좌측 상에 또한 표시한다.

아이 오브젝트인 경우에는, 기준 뷰 오브젝트의 직사각형(200)의 내부에 제2 직사각형을 그리게 되지만, 그 경우도 직사각형(200)과의 사이에 소정의 공간을 비우고 묘화한다. 마찬가지로, 관련 뷰 오브젝트 선택부(28)가 작성한 트리 구조를 더듬어 내려가는 것에 따라 얻어지는 아이(자손)의 수가 많기 때문에, 직사각형(200)의 내부에 그릴 수 없게 된 경우에는, 아이가 있는 것을 나타내는 아이콘(206)을 예컨대 직사각형(200)의 내부에 또한 표시한다. 사용자가 아이콘(204 또는 206)을 클릭하면, 묘화부(30)는 생략되어 있었던 부모 오브젝트 또는 아이 오브젝트를 새로운 기준 뷰 오브젝트로서, 전체를 재묘화한다. 또한, 직사각형(200)의 내부에 여유가 있으면, 최종적인 아이 오브젝트의 내에 대응하는 문자 또는 이미지를 묘화하여도 좋다. 또, 기준 뷰 오브젝트가, 각각이 형제인 복수의 아이 오브젝트를 가지고 있고, 이들이 많은 자손을 가지고 있었기 때문에, 직사각형(200)의 내부에 그릴 수 없게된 경우에는, 각각의 아이의 직사각형의 내부에 아이콘(206)이 표시되게 된다.

형제 오브젝트인 경우에는, 기준 뷰 오브젝트와는 중복되어 있지 않기 때문에, 전술한 바와 같은 고려는 불필요하지만, 기준 뷰 오브젝트의 직사각형과 형제 오브젝트의 직사각형 사이의 공간을 전술한 바와 같이 결정하여도 좋다.

묘화부(30)가 묘화한 최종적인 팝업 UI의 예를 도 10에 도시한다. 도시한 팝업 UI(250)는 도 1의 편집 화면을 포함하는 윈도우와는 별도의 위치에 표시하여도 좋고, 또한 기준 영역과 중복되지 않는 범위에서 일부 중첩하여 표시하여도 좋다. 팝업 UI(250)는, 기준 뷰 오브젝트 및 관련 뷰 오브젝트의 직사각형이 묘화된 태그 윈도우와, 선택된 태그의 상황을 나타내는 필드(254 및 256)을 포함하고 있다. 필 드(254)는, 사용자에 의해 현재 가선택되어 있는 태그의 명칭을 포함하고, 필드(256)는 가선택된 태그를 나타내는 프리뷰 영역이다. 도 10의 예에서는, 강조 표시용의 굵은 선(252)으로 나타내는 태그가 가선택되어 있다. 사용자는, 태그 윈도우에 표시되어 있는 특정한 직사각형을 클릭하거나, 또는 필드(254)의 우단에 표시되어 있는 상향 또는 하향의 삼각에 의해 선택 태그를 상위 방향 또는 하위 방향으로 찾아가는 것에 의해, 특정한 태그를 가선택할 수 있다. 사용자는, 원하는 태그에 도달한 때에, 예컨대 Enter 키를 누름으로써, 선택을 확정할 수 있다. 그 경우, 도 1의 편집 화면에 있어서, 선택을 확정한 태그에 대응하는 영역을 어떠한 형태로 강조 표시해 두면, 사용자는 실제의 화면의 어느 부분이 선택되어 있는지를 용이하게 알 수 있다.

클라이언트(16)로서 실장 가능한 데이터 처리 시스템의 구성예를 도 11에 도시한다. 데이터 처리 시스템(300)은 PCI 로컬 버스 아키텍쳐를 채용하고 있다. 도시의 예에서는, PCI 버스를 채용하고 있지만, AGP이나 ISA라고 하는 다른 버스 아키텍쳐를 채용하여도 좋다. 프로세서(302) 및 메인 메모리(304)는 PCI 브릿지(308)를 통해 PCI 로컬 버스(306)에 접속되어 있다. PCI 브릿지(308)는, 프로세서(302)용의 통합 메모리 컨트롤러 및 캐쉬 메모리도 포함하고 있어도 좋다. PCI 로컬 버스(306)에의 추가의 접속은, 콤포넌트의 직접 접속에 의해, 또는 확장 보드를 통해 행할 수 있다. 도시의 예에서는, LAN 어댑터(310), SCSI 호스트 버스 어댑터(312) 및 확장 버스 인터페이스(314)가, 콤포넌트의 직접 접속에 의해 PCI 로컬 버스(306)에 접속되어 있다. 이에 비해, 오디오 어댑터(316), 그래픽 어댑터(318) 및 오디오/비디오 어댑터(319)는, 확장용 슬롯에 삽입된 확장 보드에 의해 PCI 로컬 버스(306)에 접속되어 있다. 확장 버스 인터페이스(314)는 키보드겸 마우스 어댑터(320), 모뎀(322) 및 추가의 메모리(324)를 위한 접속을 제공한다. SCSI 호스트 버스 어댑터(312)는 하드 디스크 드라이브(326), 테이프 드라이브(328) 및 CD-ROM 드라이브(330)를 위한 접속을 제공한다. 전형적인 PCI 로컬 버스의 실장에서는 3개 또는 4개의 PCI 확장용 슬롯 혹은 확장용 커넥터를 구비하고 있다.

오퍼레이팅 시스템이 프로세서(302)에 의해 동작하고, 도 3의 데이터 처리 시스템(300)에 있어서의 각종 콤포넌트을 제어한다. 오퍼레이팅 시스템은, 마이크로소프트 코퍼레이션으로부터 입수 가능한 윈도즈(R) XP라고 하는 시판의 오퍼레이팅 시스템이라도 좋다. 본 발명에 따른 프로그램은, 오퍼레이팅 시스템을 기초로 런하고, 전술의 각종 기능을 실현한다. 오퍼레이팅 시스템 및 본 발명의 프로그램은, 하드 디스크 드라이브(326) 등의 기억 장치에 저장되어, 프로세서(302)에 의해 실행될 때에 메인 메모리(304)에 로드된다.

당업자이면, 도 11의 하드웨어가 실장 차제에 변할 가능성이 있는 것을 충분히 이해할 수 있다. 플래시 ROM(혹은 동등한 비휘발성 메모리)나 광 디스크 드라이브 등이라고 한, 그 외의 내부 하드웨어나 주변 장치가, 도 11에 도시한 하드웨어에 부가하여, 혹은 이들 대신에, 사용할 수 있다.

이상, 본 발명의 실시형태에 대해 도면을 참조하여 상세하게 설명해 왔지만, 위에서 설명한 실시형태는 예시에 지나지 않고, 특허청구 범위에 기재된 본 발명의 범위를 한정할만한 것이 아니다. 당업자이면, 본 발명의 정신을 일탈하지 않고, 전 술한 실시형태에 대해 여러 가지 수정, 변경을 할 수 있는 것은 용이하게 이해될 것이다.

Claims

웹페이지의 저작에 있어서 오브젝트 선택을 지원하기 위한 방법으로서,

상기 웹페이지의 편집 화면에 있어서의 사용자 동작에 따라, 오브젝트 선택을 위한 기준점을 결정하는 단계와,

상기 기준점을 둘러싸는 기준 영역을 설정하는 단계와,

상기 기준 영역에 포함되는 뷰 오브젝트 중, 상기 기준점에 가장 가까운 뷰 오브젝트를 기준 뷰 오브젝트로서 선택하는 단계와,

상기 기준 영역에 포함되는 뷰 오브젝트 중, 상기 기준 뷰 오브젝트에 관련되는 뷰 오브젝트를 선택하는 단계와,

상기 기준 뷰 오브젝트를 나타내는 제1 직사각형 및 상기 관련되는 뷰 오브젝트를 나타내는 제2 직사각형을, 오브젝트 선택을 위한 공간을 사이에 두게 하여, 상기 기준 뷰 오브젝트 및 상기 관련되는 뷰 오브젝트와는 별도로 묘화하는 단계

를 포함하는 방법.
제1항에 있어서, 상기 기준점을 결정하는 단계는, 캐럿 또는 마우스 커서의 위치를 기준점으로서 결정하는 것을 특징으로 하는 방법.
제1항에 있어서, 상기 기준 영역을 설정하는 단계는, 상기 기준점을 중심으로 하는 소정의 크기의 영역을 설정하는 것을 특징으로 하는 방법.
제1항에 있어서, 상기 관련되는 뷰 오브젝트를 선택하는 단계는, 상기 기준 뷰 오브젝트의 형제 오브젝트, 부모 오브젝트 및 아이 오브젝트 중 적어도 하나를 선택하는 것을 특징으로 하는 방법.
제1항에 있어서, 상기 웹페이지의 데이터를 트리 형식으로 기억하는 단계를 더 포함하는 것을 특징으로 하는 방법.
제1항에 있어서, 상기 묘화하는 단계는, 상기 관련되는 뷰 오브젝트가 상기 기준 뷰 오브젝트의 부모 오브젝트인 경우에는, 상기 제1 직사각형의 외측에 상기 제2 직사각형을 묘화하는 것을 특징으로 하는 방법.
제1항에 있어서, 상기 묘화하는 단계는, 상기 관련되는 뷰 오브젝트가 상기 기준 뷰 오브젝트의 아이 오브젝트인 경우에는, 상기 제1 직사각형의 내측에 상기 제2 직사각형을 묘화하는 것을 특징으로 하는 방법.
제1항에 있어서, 상기 묘화하는 단계는, 상기 제1 직사각형 및 상기 제2 직사각형을 포함하는 팝업 UI를 묘화하는 것을 특징으로 하는 방법.
웹페이지의 저작에 있어서 오브젝트 선택을 지원하기 위한 장치로서,

제1항 내지 제8항 중 어느 한 항의 방법의 각각의 단계들을 수행하는 수단들을 포함하는 장치.
웹페이지의 저작에 있어서 오브젝트 선택을 지원하기 위한 프로그램이 기록된 컴퓨터 판독가능한 기록매체로서,

제1항 내지 제8항 중 어느 한 항의 방법의 각각의 단계들을 컴퓨터에 실행시키기 위한 프로그램이 기록된 컴퓨터 판독가능한 기록매체.