KR101985073B1 - 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템 - Google Patents

웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템 Download PDF

Info

Publication number
KR101985073B1
KR101985073B1 KR1020170053590A KR20170053590A KR101985073B1 KR 101985073 B1 KR101985073 B1 KR 101985073B1 KR 1020170053590 A KR1020170053590 A KR 1020170053590A KR 20170053590 A KR20170053590 A KR 20170053590A KR 101985073 B1 KR101985073 B1 KR 101985073B1
Authority
KR
South Korea
Prior art keywords
node
tree
selection
web page
canvas
Prior art date
Application number
KR1020170053590A
Other languages
English (en)
Other versions
KR20180119898A (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 윤대혁
Priority to KR1020170053590A priority Critical patent/KR101985073B1/ko
Publication of KR20180119898A publication Critical patent/KR20180119898A/ko
Application granted granted Critical
Publication of KR101985073B1 publication Critical patent/KR101985073B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop

Landscapes

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

Abstract

본 발명은 웹페이지 상에 개시되는 트리개체에서 최소한의 사용자 동작으로 최대한의 개체를 선택할 수 있는 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템을 제공한다.
이를 위해, 본 발명의 실시예에 따른 웹페이지상에 구현된 트리개체의 다중선택 방법은, 서버를 통해 웹페이지 상에 트리 관리를 수행할 수 있는 공간인 캔버스의 범위를 설정하고 출력하는 제1 단계; 상기 서버를 통해 상기 캔버스 상의 트리를 구성하는 개체들 각각의 이름과 목표 정보를 저장하고, 각 개체와 소정 거리를 두고 상기 이름을 노드 형태로 상기 캔버스 상에 출력하는 제2 단계; 상기 노드의 선택을 위한 사용자 입력인 드래그가 발생하는 경우, 상기 서버는 영역모드를 실행하고, 상기 드래그가 시작된 지점부터 현재 드래그가 진행 중인 지점까지의 영역을 소정의 도형 형태로 실시간으로 상기 캔버스 상에 출력하고, 상기 드래그가 종료되면 출력되었던 상기 영역을 제거하는 제3 단계; 상기 서버를 통해 상기 드래그의 영역에 일부 또는 전체가 포함되는 노드에 대해서는 선택된 노드로 선정하고 선택되지 않은 노드와 다른 상태로 표시하는 제4 단계; 를 포함하고, 상기 제4 단계는, 상기 선택된 노드에 대한 배경, 테두리 또는 글자의 색 또는 모양을 변경하여 출력하는 것을 특징으로 한다.
이를 통해, 웹페이지 상의 트리에서 사용자의 키 입력 또는 드래그 동작을 통해 다중선택을 효과적으로 진행할 수 있고, 이에 따라 각자 다른 부모개체 밑에 분포된 대량의 자식개체를 선택할 수 있고, 추가적으로 선택된 개체들에 대한 이동/복사/삭제와 같은 일괄작업을 효율적으로 수행할 수 있도록 한다.

Description

웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템{METHOD OF MULTIPLE SELECTING TREE ENTITY ON WEB PAGE AND SYSTEM THEREOF}
본 발명은 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템에 관한 것으로, 보다 자세하게는 웹페이지에 트리방식으로 출력된 개체들을 효과적으로 다중 선택할 수 있는 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템 방법에 관한 것이다.
트리 방식을 사용하는 대표적인 로컬프로그램은 파일탐색기, 즐겨찾기와 목차색인 등이 있는데, 인터넷이 발전하면서 이런 프로그램들이 웹하드, 인터넷 즐겨찾기와 온라인 메뉴얼 등 웹페이지 상에서도 사용이 가능하도록 확장되는 추세에 있다.
여기서 파일탐색기와 웹하드의 경우에는 작업창 좌측에 트리 방식으로 폴더들을 출력하여 주고 우측에는 좌측에서 선택된 폴더에 속하는 바로 아래 계층의 폴더나 파일들을 리스트 방식 또는 바둑판 방식으로 출력해 주고 있다.
또한, 즐겨찾기와 인터넷 즐겨찾기 경우에는 작업창 좌측에 폴더와 즐겨찾기들이 트리방식으로 나열되어 있고 우측에는 좌측에서 선택된 링크에 접속하여 웹페이지를 출력해주는 것이 주요 기능이며 서비스에 따라 트리관리를 우측에서 할 수 있도록 해 주고 있다.
또한, 목차색인과 온라인 메뉴얼은 작업창 좌측에 목차나 항목들이 트리방식으로 나열되어 있고 우측에는 좌측에서 선택된 개체에 해당하는 내용물을 출력해 주고 있다.
현재 이런 대부분의 트리 관련 로컬프로그램과 웹서비스들은 트리에서 한 번에 한 개의 개체만 선택이 가능하게 되어 있다.
이에 대한 보완책으로 종래 기술들은 트리에 체크박스를 제공하고 있거나 파일탐색기 방식을 채용하여 작업창 우측에 개체들을 출력하여 드래그 영역지정을 통해 다중선택이 가능하도록 하고 있다.
그러나, 서로 각기 다른 부모(상위) 개체와 서로 다른 깊이에 배치된 각 1,000개의 개체를 새로 생성된 개체의 아래로 이동시키는 경우, 상기 종래 기술들 대부분은 1,000개의 개체를 일일이 이동시켜 주어야 하므로 여전히 한계점이 존재한다.
또한, 체크박스를 사용하는 방식의 경우에도 체크박스 1,000개를 모두 선택해주고 나서 이동시켜 주어야 하고, 기본적으로 체크박스는 웹페이지 상에서 자리를 차지하는 공간 측면에서 비효율성을 가지며, 트리가 번잡해져서 사용자의 시각적 피로를 유발한다는 단점을 가진다.
또한, 파일탐색기 방식은 작업창 좌측에서 선택된 한 개의 부모(상위)개체에 대해서만 적용이 되는 것이므로 이동 작업이 끝나면 다시 다른 부모개체를 찾아서 자식(하위)개체들을 이동시키는 과정을 반복해야 한다. 그리고 기본적으로 파일탐색기는 전체 항목을 한 화면에 볼 수 없고, 다중선택과 같은 작업을 위해서는 트리의 자식개체를 보기 위한 추가적 작업공간을 필요로 한다는 단점이 있다.
또한, 웹페이지는 웹 해석기가 지정한 범위 내에서만 구현할 수 있어서, 로컬프로그램과 같이 사용자 편의성을 향상시킨 상태를 구현하기가 매우 어렵거나 불가능한 경우가 많다.
이러한 이유 때문에 대부분의 웹페이지 서비스들은 로컬프로그램처럼 드래그 다중선택, 드래그 개체이동, 특정 키(F2키)를 이용한 이름 바꾸기, 창과 창사이의 개체이동 등과 같은 사용자 편의를 거의 제공하지 못하고 있는데 웹하드, 인터넷 즐겨찾기와 온라인 메뉴얼과 같은 트리구조를 사용하는 웹서비스도 마찬가지 실정이다.
또한, 트리개체에 드래그를 통한 다중선택은 로컬프로그램과 웹페이지 모두 전용 객체가 없어서, 직접 개발 시 각 개체별 성격, 상태, 출력, 위치, 스크롤상태, 사용자 이벤트와의 상호작용 등의 요소를 모두 고려해야 하는 어려움이 있는 것에 비해, 비록 사용자가 좀 더 번거롭게 되더라도 구현방법이 널리 알려지고 전용 객체도 있어서 운영이 안정적인 파일탐색기 방식으로 대체하려는 경향이 대부분이다.
따라서 트리구조를 사용하는 종래 서비스 대부분은 로컬프로그램 상에서든 웹페이지 상에서든 모두, 트리를 정보 구조를 파악하기 위한 용도로만 사용하여 트리 출력에만 집중되고 있는 상황이다. 그리고 트리자체를 운영하는 방식에서도 드래그를 통한 개체의 이동만 있을 뿐 드래그를 이용한 다중선택을 하는 편리한 방법은 언급도 되지 않고 있다.
종래 기술의 일 예로, 한국공개특허 제10-2012-0133875호 (2012. 12. 11 공개) '지도기반의 다층 구조를 갖는 웹페이지 메뉴 컨트롤을 위한 사용자 인터페이스 제공방법 및 그 시스템' 발명이 개시되어 있는데, 이 종래 기술은 지리 정보를 기초로 하여 웹페이지 메뉴 컨트롤 인터페이스를 제공하는데, 지도 정보를 기초로 하여 보다 효율적인 웹페이지 메뉴 컨트롤 인터페이스를 구현하고자 하는 발명이나, 근본적으로 다른 종래 기술과 마찬가지로 웹페이지 상에 나타나는 트리개체에 대한 다중 선택의 방법을 제안하고 있지 못하고 있으므로, 결국 종래 기술의 한계점인 사용자의 불편함(다중 선택 방법 제공의 부재)을 해결할 수 없다고 할 것이다.
따라서, 상기와 같은 종래 기술들의 한계점을 효과적으로 해결할 수 있는 기술 개발이 절실히 요구된다고 할 것이다.
본 발명은 위에서 언급된 종래 기술들의 한계점을 해결하기 위해 웹페이지 상에 개시되는 트리개체에서 최소한의 사용자 동작으로 최대한의 개체를 선택할 수 있는 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템을 제공하고자 한다.
본 발명이 해결하고자 하는 과제는 이상에서 언급된 과제로 제한되지 않는다. 언급되지 않은 다른 기술적 과제들은 이하의 기재로부터 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 명확하게 이해될 수 있을 것이다.
본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법은, 서버를 통해 웹페이지 상에 트리 관리를 수행할 수 있는 공간인 캔버스의 범위를 설정하고 출력하는 제1 단계; 상기 서버를 통해 상기 캔버스 상의 트리를 구성하는 개체들 각각의 이름과 목표 정보를 저장하고, 각 개체와 소정 거리를 두고 상기 이름을 노드 형태로 상기 캔버스 상에 출력하는 제2 단계; 상기 노드의 선택을 위한 용자 입력인 드래그가 발생하는 경우, 상기 서버는 영역모드를 실행하고, 상기 드래그가 시작된 지점부터 현재 드래그가 진행 중인 지점까지의 영역을 소정의 도형 형태로 실시간으로 상기 캔버스 상에 출력하고, 상기 드래그가 종료되면 출력되었던 상기 영역을 제거하는 제3 단계; 상기 서버를 통해 상기 드래그의 영역에 일부 또는 전체가 포함되는 노드에 대해서는 선택된 노드로 선정하고 선택되지 않은 노드와 다른 상태로 표시하는 제4 단계; 및 노드 계속 선택을 위한 사용자 입력이 있고, 추가적인 드래그가 발생하면, 상기 서버를 통해 상기 선택되지 않은 노드에 대한 선택을 위한 계속 선택 모드를 실행하는 제5 단계를 포함하는 것을 특징으로 한다.
또한, 상기 제2 단계는, 상기 트리의 크기가 상기 캔버스 영역보다 상하로 큰 경우에는 상하 스크롤바를 표시하고, 좌우로 큰 경우에는 좌우 스크롤바를 표시하여 상기 캔버스 상에 상기 트리를 출력하는 것을 특징으로 한다.
또한, 상기 제4 단계는, 상기 선택된 노드에 대한 배경, 테두리 또는 글자의 색 또는 모양을 변경하여 출력하는 것을 특징으로 한다.
또한, 상기 제 5단계의 노드 계속 선택을 위한 사용 입력은, 사용자에 의해 입력되는 키 입력 또는 상기 웹페이지 상에 표시되는 소정의 메뉴 선택 입력을 포함하는 것을 특징으로 한다.
또한, 상기 제5 단계 후 상기 계속 선택 모드 해지를 위한 사용자 입력인 키 입력 또는 상기 웹페이지 상에 표시되는 소정의 메뉴 선택 입력이 있으면, 상기 서버를 통해 계속 선택 모드를 해지하는 제6 단계를 더 포함하는 것을 특징으로 한다.
또한, 상기 제5 단계는, 상기 트리의 상태가 상기 계속 선택 모드인 경우에, 상기 영역모드가 종료되고 새로운 노드가 선택되면 선택된 해당 노드들을 선택으로 처리하고 기존에 선택되었던 노드의 상태도 선택으로 유지하는 것을 특징으로 한다.
또한, 상기 제3 단계는, 상기 드래그의 시작이 상기 노드가 포함되지 않는 여백에서 시작할 경우에 상기 영역 모드를 실행하는 것을 특징으로 한다.
본 발명의 일 측면에 따르면, 웹페이지 상의 트리에서 사용자의 키 입력 또는 드래그 동작을 통해 다중선택을 효과적으로 진행할 수 있고, 이에 따라 각자 다른 부모개체 밑에 분포된 대량의 자식개체를 선택할 수 있고, 추가적으로 선택된 개체들에 대한 이동/복사/삭제와 같은 일괄작업을 효율적으로 수행할 수 있도록 한다.
또한, 한 번에 한 개씩만 선택하여 작업할 수밖에 없었던 기존 트리방식에 비하여 사용자의 작업 피로도를 매우 크게 감소시킬 수 있다.
또한, 기존 체크박스 방식을 통한 다중 선택 방법에 비하여 대상 개체들을 모두 선택해야 하는 수고를 크게 감소시키고, 공간소모와 시각적 번잡함을 효과적으로 제거할 수 있다.
또한, 기존 파일탐색기처럼 작업창 우측에서 일렬방식으로 출력된 개체들 중 대상 개체를 드래그로 다중 선택하여 처리한 후 다시 다른 부모의 자식 개체를 찾아서 동일 작업을 반복하는 스트레스를 크게 감소시키고, 자식개체들을 따로 나열하는 공간의 소모도 효과적으로 제거할 수 있다.
본 발명의 효과는 상술한 효과들로 제한되지 않는다. 언급되지 않은 효과들은 본 명세서 및 첨부된 도면으로부터 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에게 명확히 이해될 수 있을 것이다.
도 1은 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법이 이루어지는 시스템 구성을 도시한 블록도이다.
도 2는 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법이 이루어지는 시스템의 각 구성이 실제 웹페이지 상에 구현된 상태를 도시한 개념도이다.
도 3은 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법의 초기화 화면을 도시한 것이다.
도 4는 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법에서 영역모드가 실행 중인 상태를 도시한 것이다.
도 5는 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법에서 영역모드를 통해 트리 상의 노드를 다중 선택한 상태를 도시한 것이다.
도 6은 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법에서 각기 다른 부모개체와 각기 다른 계층에 있는 노드들을 계속해서 추가로 다중 선택하는 상태를 도시한 것이다.
본 발명의 다른 이점 및 특징, 그리고 그것들을 달성하는 방법은 첨부되는 도면과 함께 상세하게 후술 되는 실시 예를 참조하면 명확해질 것이다. 그러나 본 발명은 이하에서 개시되는 실시 예에 한정되는 것이 아니라 서로 다른 다양한 형태로 구현될 수 있으며, 단지 본 실시 예는 본 발명의 개시가 완전하도록 하고, 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 발명의 범주를 완전하게 알려주기 위해 제공되는 것이며, 본 발명은 청구항의 범주에 의해 정의될 뿐이다.
만일 정의되지 않더라도, 여기서 사용되는 모든 용어들(기술 혹은 과학 용어들을 포함)은 이 발명이 속한 종래 기술에서 보편적 기술에 의해 일반적으로 수용되는 것과 동일한 의미를 갖는다. 일반적인 사전들에 의해 정의된 용어들은 관련된 기술 그리고/혹은 본 출원의 본문에 의미하는 것과 동일한 의미를 갖는 것으로 해석될 수 있고, 그리고 여기서 명확하게 정의된 표현이 아니더라도 개념화되거나 혹은 과도하게 형식적으로 해석되지 않을 것이다.
한편, 본 명세서 전체에서 사용되는 '~부' 등의 용어는 적어도 하나의 기능이나 동작을 처리하는 단위를 의미할 수 있다. '~부' 안에서 제공되는 기능은 더 작은 수의 구성요소들로 분리되거나, 다른 '~부'와 통합되는 형태로 제공될 수 있다.
본 명세서에서 공지된 구성에 대한 일반적인 내용에 관한 설명은 본 발명의 요지를 흐리지 않기 위해 생략될 수 있다.
본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템은 GUI(시각적 사용자 조작방법)의 영역에 속한다.
명령을 타이핑하여 입력하던 기존의 커맨드라인 방식에 화면상 출력된 개체나 명령을 사용자가 마우스나 터치 등의 직관적 입력으로 선택 또는 실행하는 방식이 추가된 조작방법을 GUI라 하는데, 본 발명은 화면에 출력된 트리방식의 개체를 GUI로 조작하는 방법에 속한다.
또한, 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템은 웹페이지 영역에서 구현되는 것으로서 로컬프로그램과는 구분되는 기술영역에 속한다.
또한, 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템은, 웹브라우저가 기본적으로 바로 해석할 수 있는 언어로 작성되어 출력되도록 웹페이지를 구현한 기술에 속한다는 것을 정의하며, 앞에 언급된 언어라 함은 대표적으로 HTML, JAVASCRIPT, CSS 등이 있으며 이 후에 언급되는 언어라는 표현과 웹페이지라는 표현은 앞에 설명된 것들을 의미한다.
또한, GUI기반 프로그램을 만들 때 기본적으로 로컬프로그램은 운영체제에서 제공하는 API(응용프로그램 제작방법)에 맞춰서 제작해야 하는 반면, 웹페이지는 W3C(세계웹협회)의 웹문서표준에 맞춰서 제작해야 하므로, 상호간에는 이질성이 존재한다고 할 수 있다.
또한, 로컬프로그램은 GUI개발을 위해 운영체제 제작사에서 시스템 대부분의 요소에 접근이 가능한 각종 편의 객체를 API로 제공해주고 있으며, 반면에 웹페이지는 웹문서 작성이 주목적이라서 기본적으로 시스템에 접근자체가 되지 않고, GUI제작을 위한 편의객체 또한 거의 없기 때문에 직접 제작해야 하고 경우에 따라서는 로컬프로그램과 같은 수준의 GUI를 제작하지 못하는 경우도 많이 발생한다.
따라서, 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템은, 로컬프로그램처럼 트리컨트롤/선택컨트롤과 같은 편의객체가 없기 때문에, 제작할 때 상황별로 캔버스의 동작, 트리의 동작, 드래그의 동작, 부모자식개체의 상태 및 사용자 이벤트와의 상호작용과 같이 모든 개체의 기능을 직접 제작해야 한다는 환경적 제약이 있는 기술분야에 해당한다고 할 것이다.
이하 본 발명의 실시예에 대해 첨부된 도면을 기초로 상세히 설명한다.
먼저 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법이 이루어지는 시스템 구성에 대해 도 1을 기초로 이하에서 설명한다.
도 1은 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법이 이루어지는 시스템 구성을 도시한 블록도이다.
도 1에 도시된 바와 같이, 본 발명의 실시예에 따른 웹페이지상에 구현된 트리개체의 다중 선택 방법을 위한 시스템은 서버(100)와 단말 장치로 이루어지고, 여기서 단말 장치는 PC 등 웹페이지가 디스플레이부에 표시될 수 있는 장치를 포함한다.
또한, 마우스 버튼이 눌려진 상태나 터치화면에 손가락을 누른 상태로 마우스나 손가락을 이동시키는 것을 드래그라 하고, 드래그 도중 눌려졌던 해당 마우스 버튼이 올라오거나 터치화면에서 해당 손가락을 떼는 것을 드래그 종료라고 한다.
또한, 서버(100)는 구체적으로, 캔버스부(10), 트리부(20), 드래그부(30), 제어부(40)를 포함한다.
캔버스부(10)는 웹페이지 상에 트리 관리를 수행할 수 있는 공간인 캔버스의 범위를 설정하고 출력한다.
또한, 트리부(20)는 캔버스 상의 트리를 구성하는 개체들 각각의 이름과 목표 정보를 저장하고, 각 개체와 소정 거리를 두고 이름을 노드 형태로 캔버스 상에 출력한다.
또한, 제어부(40)는 트리의 크기가 상기 캔버스 영역보다 상하로 큰 경우에는 상하 스크롤바를 표시하고, 좌우로 큰 경우에는 좌우 스크롤바를 표시하여 캔버스 상에 트리를 출력할 수 있다.
또한, 드래그부(30)는 노드의 선택을 위한 사용자 입력인 드래그가 발생하는 경우 영역모드를 실행하고, 드래그가 시작된 지점부터 현재 드래그가 진행 중인 지점까지의 영역을 소정의 도형 형태로 실시간으로 캔버스 상에 출력하고, 드래그가 종료되면 출력되었던 영역을 제거한다.
또한, 드래그부(30)는 드래그의 시작이 노드가 포함되지 않는 여백에서 시작할 경우에 영역 모드를 실행한다. 즉, 특정 노드 선택을 위해 실행되는 영역 모드는 사용자의 드래그 입력이 여백에서 시작될 경우에만 실행된다.
또한, 제어부(40)는 영역 모드 실행 중에 드래그가 캔버스부(10)의 영역을 벗어나게 될 때 해당 방향으로 캔버스 보다 커서 보이지 않았던 트리가 있다면 스크롤바의 스크롤 위치를 해당 방향으로 일정속도로 이동시켜 주고 영역 모드 도형의 시작점과 트리부(20)의 트리를 해당 방향의 반대 방향으로 일정속도로 이동시켜 준다. 즉, 영역 모드 실행 중에도 스크롤 이동이 가능하게 하여 한 번의 영역 모드로 숨어 있던 노드까지 최대한 많은 노드를 선택할 수 있도록 한다.
또한, 제어부(40)는 드래그의 영역에 일부 또는 전체가 포함되는 노드에 대해서는 선택된 노드로 선정하고 선택되지 않은 노드와 다른 상태로 표시한다. 구체적으로 제어부(40)는 선택된 노드에 대한 배경, 테두리 또는 글자의 색 또는 모양을 변경하여 출력할 수 있다.
또한, 제어부(40)는 드래그의 영역에 일부 또는 전체가 포함되는 노드에 대해서는 선택된 노드로 선정하고 선택되지 않은 노드와 다른 상태로 표시한다. 구체적으로 제어부(40)는 선택된 노드에 대한 배경, 테두리 또는 글자의 색 또는 모양을 변경하여 출력할 수 있다.
또한, 제어부(40)는 드래그의 영역 모드가 실행되면 기존에 선택으로 선정된 모든 노드들의 선정여부를 해제하고, 선택되지 않은 노드와 동일한 상태로 표시 상태를 되돌린다.
또한, 제어부(40)는 선택으로 선정 또는 해제되는 특정 노드가 자식 노드를 가지고 있을 때는 해당 자식 노드들도 특정 노드와 같은 방법으로 표시 상태를 변화시켜 준다.
또한, 제어부(40)는 선택으로 선정 또는 해제되는 특정 노드의 부모 노드들 중 하나라도 선택으로 선정된 상태라면 해당 노드의 표시 상태를 변경하지 않는다.
또한, 제어부(40)는 노드 계속 선택을 위한 사용자 입력이 있고, 추가적인 영역 모드가 발생하면, 선택되지 않은 노드에 대한 선택을 위한 계속 선택 모드를 실행한다.
또한, 제어부(40)는 노드 계속 선택을 위한 사용 입력으로, 사용자에 의해 입력되는 키 입력 또는 웹페이지 상에 표시되는 소정의 메뉴 선택 입력을 선택적으로 채택하여 적용시킬 수 있다.
또한, 제어부(40)는 계속 선택 모드 실행 후, 계속 선택 모드 해지를 위한 사용자 입력인 키 입력 또는 웹페이지 상에 표시되는 소정의 메뉴 선택 입력이 있으면, 계속 선택 모드를 해지한다.
또한, 제어부(40)는 트리의 상태가 계속 선택 모드인 경우에, 드래그의 영역 모드가 실행되어도 기존에 선택되었던 노드의 상태는 선택으로 유지 되도록 한다.
또한, 제어부(40)는 트리의 상태가 계속 선택 모드인 경우에, 영역모드가 종료되고 새로운 노드가 선택되면 선택된 해당 노드들을 선택으로 처리하고 기존에 선택되었던 노드의 상태도 선택으로 유지되도록 한다.
또한, 제어부(40)는 트리의 상태가 계속 선택 모드인 경우에, 영역모드가 종료되고 기존에 선택으로 선정되어 있던 노드가 또 선택되면 해당 노드들의 선정여부를 해제하고, 선택되지 않은 노드와 동일한 상태로 표시 상태를 되돌린다.
다음으로 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법이 이루어지는 시스템의 각 구성이 실제 웹페이지 상에서 어떻게 구현되는지에 대해 도 2를 기초로 설명한다.
도 2는 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법이 이루어지는 시스템의 각 구성이 실제 웹페이지 상에 구현된 상태를 도시한 개념도이다.
도 2에 도시된 바와 같이, 본 발명의 실시예에 따른 시스템을 이루는 캔버스부(10), 트리부(20) 및 드래그부(30)는 웹페이지 상에서 캔버스와 트리와 노드들을 생성하고 관리하는 기능을 수행한다.
즉, 캔버스부(10)는 트리 관리를 할 수 있는 캔버스의 범위를 정하고 웹페이지 상에 캔버스를 출력한다.
또한, 트리부(20)는 개체들 각각의 이름과 목표정보를 저장하고 이름을 출력한다. 또한, 편의상 이 후 트리부(20)에 있는 각각 개체들을 노드(Node)라는 별도 명칭을 부여할 수 있다.
또한, 드래그부(30)는 드래그 입력이 시작된 지점부터 현재 드래그가 진행 중인 지점까지의 영역을 도형의 형태로 실시간 출력하고, 영역모드가 종료되면 출력되었던 도형을 제거하는 영역모드를 관리한다.
다음으로, 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법에 대해 도 3 내지 6을 기초로 이하에서 상세히 설명한다.
도 3은 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법의 초기화 화면을 도시한 것이고, 도 4는 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법에서 영역모드가 실행 중인 상태를 도시한 것이고, 도 5는 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법에서 영역모드를 통해 트리 상의 노드를 다중 선택한 상태를 도시한 것이며, 도 6은 본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법에서 각기 다른 부모개체와 각기 다른 계층에 있는 노드들을 계속해서 추가로 다중 선택하는 상태를 도시한 것이다.
본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법은 기본적으로, 4개의 단계로 이루어질 수 있고, 추가적으로 2개의 단계가 추가되어 실시될 수 있다.
즉, 서버를 통해 웹페이지 상에 트리 관리를 수행할 수 있는 공간인 캔버스의 범위를 설정하고 출력하는 제1 단계, 서버를 통해 상기 캔버스 상의 트리를 구성하는 개체들 각각의 이름과 목표 정보를 저장하고, 각 개체와 소정 거리를 두고 이름을 노드 형태로 캔버스 상에 출력하는 제2 단계, 노드의 선택을 위한 사용자 입력인 드래그가 발생하는 경우, 서버는 영역모드를 실행하고, 드래그가 시작된 지점부터 현재 드래그가 진행 중인 지점까지의 영역을 소정의 도형 형태로 실시간으로 캔버스 상에 출력하고, 드래그가 종료되면 출력되었던 영역을 제거하는 제3 단계, 서버를 통해 드래그의 영역에 일부 또는 전체가 포함되는 노드에 대해서는 선택된 노드로 선정하고 선택되지 않은 노드와 다른 상태로 표시하는 제4 단계로 이루어 질 수 있다.
여기서 제2 단계는, 트리의 크기가 캔버스 영역보다 상하로 큰 경우에는 상하 스크롤바를 표시하고, 좌우로 큰 경우에는 좌우 스크롤바를 표시하여 캔버스 상에 트리를 출력한다.
또한, 제3 단계는, 드래그의 시작이 노드가 포함되지 않는 여백에서 시작할 경우에 영역 모드를 실행할 수 있다.
또한, 제3 단계는, 영역 모드 실행 중에 드래그가 캔버스의 영역을 벗어나게 될 때, 해당 방향으로 캔버스 보다 커서 보이지 않았던 트리가 존재하는 경우 스크롤바의 스크롤 위치를 해당 방향으로 일정 속도로 이동시켜 주고, 영역 모드에서 표시되는 도형의 시작점과 트리를 해당 방향의 반대 방향으로 일정 속도로 이동시켜 주어, 사용자의 드래그 동작이 효과적으로 이루어질 수 있도록 할 수 있다.
또한, 제3 단계는, 드래그의 영역 모드가 실행되면 기존에 선택으로 선정된 모든 노드들의 선정여부를 해제하고, 선택되지 않은 노드와 동일한 상태로 표시 상태를 되돌리는 과정을 수행한다.
또한, 제4 단계는, 선택된 노드에 대한 배경, 테두리 또는 글자의 색 또는 모양을 변경하여 출력할 수 있다.
또한, 제4 단계는, 선택 과정을 통해 선정 또는 해제되는 특정 노드가 자식(하위) 노드를 가지고 있을 때는 해당 자식 노드들도 특정 노드와 같은 방법으로 표시 상태를 변화시킨다.
또한, 제4 단계는, 선택 과정을 통해 선정 또는 해제되는 특정 노드의 부모(상위) 노드들 중 하나라도 선택으로 선정된 상태라면 해당 노드의 표시 상태가 변경되지 않도록 한다.
추가로 노드 계속 선택을 위한 사용자 입력이 있고, 추가적인 드래그가 발생하면, 서버를 통해 선택되지 않은 노드에 대한 선택을 위한 계속 선택 모드를 실행하는 제5 단계; 이 후에 계속 선택 모드 해지를 위한 사용자 입력인 키 입력 또는 웹페이지 상에 표시되는 소정의 메뉴 선택 입력이 있으면, 서버를 통해 계속 선택 모드를 해지하는 제6 단계를 추가적으로 더 포함할 수 있다.
또한, 제5 단계의 노드 계속 선택을 위한 사용자 입력은, 사용자에 의해 입력되는 키 입력 또는 웹페이지 상에 표시되는 소정의 메뉴 선택 입력을 포함할 수 있다.
또한, 제5 단계는, 트리의 상태가 계속 선택 모드인 경우에, 영역모드가 종료되고 새로운 노드가 선택되면 선택된 해당 노드들을 선택으로 처리하고 기존에 선택되었던 노드의 상태도 선택으로 유지할 수 있다.
또한, 제5 단계는, 트리의 상태가 계속 선택 모드인 경우에, 드래그의 영역 모드가 실행되어도 기존에 선택되었던 노드의 상태는 선택 상태로 유지 되도록 한다.
또한, 제5 단계는, 트리의 상태가 계속 선택 모드인 경우에, 영역 모드가 종료되고 기존에 선택으로 선정되어 있던 노드가 또 선택되면 해당 노드들의 선정 상태를 해제하고, 선택되지 않은 노드와 동일한 상태로 표시 상태를 되돌린다.
본 발명의 실시예에 따른 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법은 이와 같은 단계들로 실시될 수 있고 이하에서는 도 3 내지 도 6에 도시된 내용을 기초로 각 단계가 웹페이지 상에서 실제로 구현되는 실시예를 살펴본다.
먼저 도 3에 도시된 바와 같이, 제2 단계 과정은 제어부(40)를 통해 초기화를 수행하는 것에 대해서 트리부(20)에 저장된 노드들을 출력순서 순으로 위에서 아래로 정렬하고 계층이 내려갈수록 좌측에서 우측으로 일정간격 띄워서 정렬하여 캔버스에 출력할 수 있다.
또한, 트리부(20)는 제어부(40)의 제어 동작을 통해 트리의 크기가 캔버스영역보다 상하로 큰 경우에는 Y축 스크롤바를 삽입하고, 좌우로 큰 경우에는 X축 스크롤바를 삽입하여 트리가 캔버스영역을 초과하지 않도록 할 수 있다. 이를 통해 제한된 공간을 최대한 활용할 수 있다.
다음으로, 도 4는 본 발명의 실시예에 따른 영역모드가 실행중인 화면인데, 제3 단계는, 캔버스의 노드가 아닌 여백지점에서 사용자의 드래그 시작 이벤트가 발생했을 때 제어부(40)의 제어 동작을 통해 드래그부(30)가 영역모드를 실행한다.
다음으로, 도 5는 본 발명의 실시예에 따른 영역모드를 통해 트리상의 노드를 다중 선택한 화면인데, 제4 단계는, 노드를 선택으로 처리할 때는 해당 노드의 배경이나 테두리 또는 글자색 등 출력을 바꾸어주고, 노드를 선택해지로 처리할 때는 해당 노드가 선택될 때 적용되었던 출력을 선택 전으로 되돌려 준다.
또한, 사용자의 드래그 종료 이벤트가 발생하면 드래그부(30)에서 출력했던 도형과 영역이 겹쳐지는 노드는 해당 노드를 선택으로 처리하고, 영역이 겹쳐지지 않는 노드는 해당 노드를 선택해지로 처리하고, 드래그부(30)의 영역모드를 종료시킨다.
마지막으로 도 6은 본 발명의 실시예에 따른 각기 다른 부모개체와 각기 다른 계층에 있는 노드들을 계속해서 추가로 다중선택 하는 모습을 도시하고 있다.
제5 단계는, 사용자가 특정 키보드 동작이나 특정 메뉴를 선택하면 트리상태를 계속 선택 모드로 설정하고, 트리상태가 계속 선택 모드인 상태에서 드래그부(30)의 영역모드가 종료되었을 때 새로운 노드가 선택되면 해당 노드들을 선택으로 처리하고 기존에 선택되었던 노드의 상태도 선택으로 유지를 하여 마치 선택이 추가된 것처럼 처리할 수 있다.
그리고, 트리 상태가 계속 선택 모드인 상태에서 드래그부(30)의 영역모드가 종료되었을 때 새로운 노드가 선택하지 않았어도 기존에 선택되었던 노드의 상태를 변경시키지 않는다. 즉, 제6 단계의 계속 선택 모드 해지 입역이 없으면 계속적인 선택이 이루어질 수 있도록 한다.
이상의 실시예들은 본 발명의 이해를 돕기 위하여 제시된 것으로, 본 발명의 범위를 제한하지 않으며, 이로부터 다양한 변형 가능한 실시예들도 본 발명의 범위에 속할 수 있음을 이해하여야 한다. 따라서, 본 발명의 기술적 보호범위는 청구범위의 기술적 사상에 의해 정해져야 할 것이며, 본 발명의 기술적 보호범위는 청구범위의 문언적 기재 그 자체로 한정되는 것이 아니라 실질적으로는 기술적 가치가 균등한 범주의 발명에 대하여까지 미치는 것임을 이해하여야 한다.
10 : 캔버스부 20 : 트리부
30 : 드래그부 40 : 제어부
100 : 서버

Claims (7)

  1. 웹페이지 상에서 구현되고 온라인 즐겨찾기에 적용되는 트리개체를 다중 선택하는 방법에 있어서,
    서버를 통해 웹페이지 상에 트리 관리를 수행할 수 있는 공간인 캔버스의 범위를 설정하고 출력하는 제1 단계;
    상기 서버를 통해 상기 캔버스 상의 트리를 구성하는 개체들 각각의 이름과 목표 정보를 저장하고, 각 개체와 소정 거리를 두고 상기 이름을 노드 형태로 상기 캔버스 상에 출력하는 제2 단계;
    상기 노드의 선택을 위한 사용자 입력인 드래그가 발생하는 경우, 상기 서버는 영역모드를 실행하고, 상기 드래그가 시작된 지점부터 현재 드래그가 진행 중인 지점까지의 영역을 소정의 도형 형태로 실시간으로 상기 캔버스 상에 출력하고, 상기 드래그가 종료되면 출력되었던 상기 영역을 제거하는 제3 단계;
    상기 서버를 통해 상기 드래그의 영역에 일부 또는 전체가 포함되는 노드에 대해서는 선택된 노드로 선정하고 선택되지 않은 노드와 다른 상태로 표시하는 제4 단계; 를 포함하고,
    상기 제4 단계는, 상기 선택된 노드에 대한 배경, 테두리 또는 글자의 색 또는 모양을 변경하여 출력하고,
    상기 제3 단계는, 상기 드래그의 시작이 상기 노드가 포함되지 않는 여백에서 시작할 경우에 상기 영역 모드를 실행하고,
    상기 제 4 단계는, 상기 선택된 또는 선택되지 않은 노드( 이하 ‘ 제1 노드’ 라 한다 )가 트리 상에 연결된 하위 노드 (이하 ‘자식 노드’라 한다) 를 가지고 있을 때는 상기 자식 노드도 상기 제1 노드와 같은 상태로 표시를 변화시키고, 상기 선택된 또는 선택되지 않은 노드( 이하 ‘ 제2 노드’ 라 한다 )가 트리 상에 연결된 하나 이상의 상위 노드( 이하 ‘부모 노드’라 한다) 를 가지고 상기 부모 노드 중 하나 이상이 선택된 상태이면 상기 제2 노드의 표시 상태가 변경되지 않도록 하는 것을 특징으로 하는 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법.
  2. 제1 항에 있어서,
    상기 제2 단계는,
    상기 트리의 크기가 상기 캔버스 영역보다 상하로 큰 경우에는 상하 스크롤바를 표시하고, 좌우로 큰 경우에는 좌우 스크롤바를 표시하여 상기 캔버스 상에 상기 트리를 출력하는 것을 특징으로 하는 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법.
  3. 제1 항에 있어서,
    노드 계속 선택을 위한 사용자 입력이 있고, 추가적인 드래그가 발생하면, 상기 서버를 통해 상기 선택되지 않은 노드에 대한 선택을 위한 계속 선택 모드를 실행하는 제5 단계;를 추가적으로 포함하는 것을 특징으로 하는 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법.
  4. 제3 항에 있어서,
    상기 제 5단계의 노드 계속 선택을 위한 사용 입력은, 사용자에 의해 입력되는 키 입력 또는 상기 웹페이지 상에 표시되는 소정의 메뉴 선택 입력을 포함하는 것을 특징으로 하는 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법.
  5. 제4 항에 있어서,
    상기 제5 단계 후 상기 계속 선택 모드 해지를 위한 사용자 입력인 키 입력 또는 상기 웹페이지 상에 표시되는 소정의 메뉴 선택 입력이 있으면, 상기 서버를 통해 계속 선택 모드를 해지하는 제6 단계를 더 포함하는 것을 특징으로 하는 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법.
  6. 제3 항에 있어서,
    상기 제5 단계는,
    상기 트리의 상태가 상기 계속 선택 모드인 경우에, 상기 영역모드가 종료되고 새로운 노드가 선택되면 선택된 해당 노드들을 선택으로 처리하고 기존에 선택되었던 노드의 상태도 선택으로 유지하는 것을 특징으로 하는 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법.
  7. 삭제
KR1020170053590A 2017-04-26 2017-04-26 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템 KR101985073B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020170053590A KR101985073B1 (ko) 2017-04-26 2017-04-26 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020170053590A KR101985073B1 (ko) 2017-04-26 2017-04-26 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템

Publications (2)

Publication Number Publication Date
KR20180119898A KR20180119898A (ko) 2018-11-05
KR101985073B1 true KR101985073B1 (ko) 2019-05-31

Family

ID=64329233

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020170053590A KR101985073B1 (ko) 2017-04-26 2017-04-26 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템

Country Status (1)

Country Link
KR (1) KR101985073B1 (ko)

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2000322473A (ja) * 1999-05-06 2000-11-24 Fuji Xerox Co Ltd 情報管理方法および装置

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20160020750A (ko) * 2014-08-14 2016-02-24 윤대혁 향상된 웹페이지 트리목록 관리 시스템

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2000322473A (ja) * 1999-05-06 2000-11-24 Fuji Xerox Co Ltd 情報管理方法および装置

Also Published As

Publication number Publication date
KR20180119898A (ko) 2018-11-05

Similar Documents

Publication Publication Date Title
JP6018045B2 (ja) 選択したデータの一時的な書式設定とグラフ化
US6025844A (en) Method and system for creating dynamic link views
US7512898B2 (en) User interface with multi-state menu
JP5792287B2 (ja) オプションを選択するためのスピンコントロールユーザインターフェース
US6874128B1 (en) Mouse driven splitter window
US7506268B2 (en) User interface with visual tracking feature
US8078979B2 (en) Web page editor with element selection mechanism
RU2554395C2 (ru) Система и способ для выбора вкладки в браузере с вкладками
US8438495B1 (en) Methods and systems for creating wireframes and managing containers
US20160210268A1 (en) Methods and systems for managing visual text objects using an outline-like layout
US20090319948A1 (en) Automated editing of graphics charts
JP5527521B2 (ja) 階層構造表示装置、階層構造表示方法および階層構造表示制御プログラム
AU2007312951A1 (en) Web application for debate maps
US11227105B1 (en) Method and apparatus for structured documents
JP5025833B1 (ja) シーケンスプログラム作成装置
JP2018501568A (ja) データ処理装置および木構造を描画する方法
US20180232349A1 (en) Inserting new elements in a tabular data structure
JP5634140B2 (ja) 情報処理装置、表示方法、およびプログラム
US7930648B1 (en) Expanded stack view
KR101985073B1 (ko) 웹페이지 상에서 구현되는 트리개체를 다중 선택하는 방법 및 시스템
Cisco Objective View Editor
Cisco Objective View Editor
Cisco Objective View Editor
Cisco Objective View Editor
JPH0384661A (ja) 文書作成装置

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E90F Notification of reason for final refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant