KR102302089B1 - 마우스 포인터 변경 방법 - Google Patents

Abstract

본 발명은 마우스 포인터 변경 방법에 관한 것으로, 본 발명의 일 실시예에 따른 마우스 포인터 변경 방법은, 웹브라우저를 이용하여 웹사이트에 접속되는 단계; 상기 웹브라우저 상에 마우스 포인터의 이미지가 나타나지 않도록 설정되는 단계; 상기 마우스 포인터의 위치 좌표를 추적되는 단계; 및 상기 마우스 포인터의 위치 좌표에 새로운 이미지가 나타나도록 설정되는 단계를 포함할 수 있다. 본 발명에 의하면, 별도의 프로그램을 이용하지 않고, 사용자가 웹사이트에 접속하여 마우스 포인터를 웹브라우저 상에 위치하는 것으로, 마우스 포인터의 이미지를 변경할 수 있어, 컴퓨터의 자원을 거의 사용하지 않은 상태에서 마우스 포인터를 변경할 수 있는 효과가 있다.

Description

마우스 포인터 변경 방법{CHANGING METHOD OF MOUSE POINTER}

본 발명은 마우스 포인터 변경 방법에 관한 것으로, 더욱 상세하게는 웹사이트에서 마우스 커서의 이미지를 변경할 수 있는 마우스 포인터 변경 방법에 관한 것이다.

마우스는 컴퓨터 등에서 주요한 입력 장치로, 마우스를 이동시켜 모니터 등의 화면에 출력되는 포인터의 위치를 이동시키고, 모니터 화면에 출력되는 버튼 등을 눌러 특정 기능을 수행하기 위한 장치이다. 이러한 마우스의 포인터는 통상 화살표 모양의 이미지로 커서의 위치를 표시한다.

이러한 마우스 포인터의 이미지는 사용하는 오퍼레이팅 시스템(operating system, 이하 OS)에 따라 다르게 표시될 수 있다. 그리고 OS에서 마우스 포인터의 이미지를 변경할 수 있는데, 이는 OS에서 제공하거나 사용자가 등록한 이미지로 변경할 수 있다. 그렇지만, 이렇게 OS에서 이미지를 변경하면, 마우스 포인터의 이미지가 지속적으로 변경되어 유지되고, 새로운 이미지로 변경하기 위해서는 다시 설정 과정을 거쳐야 하는 등 번거로운 과정을 거쳐야 하는 문제가 있다.

이렇게 OS에서 마우스 포인터를 변경하지 않고, 소정의 소프트웨어를 이용하여 마우스 포인터의 이미지를 변경하거나 기능을 추가하는 기술이 대한민국 공개특허 제10-2007-01002717호에 개시된다. 그런데, 이렇게 소프트웨어를 이용하여 마우스 포인터를 변경하기 위해서는 상시적으로 해당 소프트웨어가 컴퓨터에서 실행되어 있어야 하는 문제가 있다.

대한민국 공개특허 제10-2007-0100217호 (2007.10.10)

본 발명이 해결하고자 하는 과제는, 웹사이트에 사용자가 접속할 때, 별도의 소프트웨어나 프로그램이 구동되지 않아도 웹사이트에서의 마우스 포인터의 이미지를 변경할 수 있는 마우스 포인터 변경 방법을 제공하는 것이다.

본 발명의 일 실시예에 따른 마우스 포인터 변경 방법은, 웹브라우저를 이용하여 웹사이트에 접속되는 단계; 상기 웹브라우저 상에 마우스 포인터의 이미지가 나타나지 않도록 설정되는 단계; 상기 마우스 포인터의 위치 좌표를 추적되는 단계; 및 상기 마우스 포인터의 위치 좌표에 새로운 이미지가 나타나도록 설정되는 단계를 포함할 수 있다.

이때, 상기 웹사이트에 접속되면, 상기 웹사이트에 접속된 웹브라우저 상에 마우스 포인터가 배치되는 단계를 더 포함하고, 상기 마우스 포인터의 이미지가 나타나지 않도록 설정되는 단계는, 상기 웹브라우저 상의 마우스 포인터의 이미지가 나타나지 않도록 설정될 수 있다.

그리고 상기 마우스 포인터가 상기 웹브라우저를 벗어나면, 상기 새로운 이미지가 나타나도록 설정된 마우스 포인터는 상기 웹브라우저에 소정의 위치에 정지될 수 있다.

여기서, 상기 웹사이트에 접속되는 단계는, 상기 웹사이트에 모바일 단말기에서 접속된 것인지 판단하는 단계; 및 상기 모바일 단말기에서 접속된 것으로 판단되면, 상기 웹브라우저에 상기 마우스 포인터가 표시되지 않도록 설정하는 단계를 포함하고, 상기 모바일 단말기에서 접속되지 않은 것으로 판단되면, 상기 마우스 포인터의 이미지가 나타나지 않도록 설정되는 단계가 수행될 수 있다.

또한, 상기 웹사이트에는 자바스크립트에 의해 작성된 소스코드가 포함될 수 있다.

그리고 상기 마우스 포인터는 상기 웹사이트에서 최상위에 배치되도록 소스코드가 설정될 수 있다.

또한, 상기 마우스 포인터에 적용된 새로운 이미지는, 동적 이미지가 적용될 수 있다.

이때, 상기 동적 이미지는 마우스에 포함된 복수의 버튼 중 어느 하나 이상이 클릭될 때 동작할 수 있다.

여기서, 마우스 포인터에 적용된 새로운 이미지의 높이는 100%일 수 있다.

본 발명에 의하면, 별도의 프로그램을 이용하지 않고, 사용자가 웹사이트에 접속하여 마우스 포인터를 웹브라우저 상에 위치하는 것으로, 마우스 포인터의 이미지를 변경할 수 있어, 컴퓨터의 자원을 거의 사용하지 않은 상태에서 마우스 포인터를 변경할 수 있는 효과가 있다.

또한, 웹사이트를 운영하는 운영자는 자신의 웹사이트에 접속한 사용자에게 웹사이트만의 개성을 자유롭게 표시할 수 있고, 사용자에게 기억에 남는 인상을 제공할 수 있는 효과가 있다.

도 1은 본 발명의 일 실시예에 따른 마우스 포인터 변경 방법을 설명하기 위한 흐름도이다.
도 2는 본 발명의 일 실시예에 따른 마우스 포인터 변경 방법에 따라 웹사이트에서 마우스 포인터가 변경된 것을 도시한 도면이다.
도 3은 본 발명의 일 실시예에 따른 마우스 포인터 변경 방법에 따라 변경되는 마우스 포인터 이미지의 예들을 도시한 도면이다.

본 발명의 바람직한 실시예에 대하여 첨부된 도면을 참조하여 더 구체적으로 설명한다.

본 발명에서 사용되는 용어는 본 발명에서의 기능을 고려하면서 가능한 현재 널리 사용되는 일반적인 용어들을 선택하였으나, 이는 당 분야에 종사하는 기술자의 의도 또는 판례, 새로운 기술의 출현 등에 따라 달라질 수 있다. 또한, 특정한 경우는 출원인이 임의로 선정한 용어도 있으며, 이 경우 해당되는 발명의 설명 부분에서 상세히 그 의미를 기재할 것이다. 따라서 본 발명에서 사용되는 용어는 단순한 용어의 명칭이 아닌, 그 용어가 가지는 의미와 본 발명의 전반에 걸친 내용을 토대로 정의되어야 한다.

명세서 전체에서 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있음을 의미한다. 또한, 명세서에 기재된 "...부", "모듈" 등의 용어는 적어도 하나의 기능이나 동작을 처리하는 단위를 의미하며, 이는 하드웨어 또는 소프트웨어로 구현되거나 하드웨어와 소프트웨어의 결합으로 구현될 수 있다.

아래에서는 첨부한 도면을 참고하여 본 발명의 실시예에 대하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 상세히 설명한다. 그러나 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 도면 부호를 붙였다.

도 1은 본 발명의 일 실시예에 따른 마우스 포인터 변경 방법을 설명하기 위한 흐름도이다. 그리고 도 2는 본 발명의 일 실시예에 따른 마우스 포인터 변경 방법에 따라 웹사이트에서 마우스 포인터가 변경된 것을 도시한 도면이다.

도 1을 참조하여, 본 발명의 일 실시예에 따른 마우스 포인터를 변경하기 위한 방법에 대해 설명한다.

사용자는 웹브라우저를 이용하여 특정 웹사이트에 접속한다(S101). 이렇게 사용자가 특정 웹사이트에 접속하고, 마우스 포인터가 웹브라우저 상에 배치되는지 확인한다(S103). 이때, 웹브라우저 상에 마우스 포인터가 배치되면, 웹사이트에 적용된 소스에 의해 웹브라우저에서 마우스 포인터의 이미지가 나타나지 않도록 설정된다(S105).

이렇게 마우스 포인터의 이미지가 나타나지 않도록 설정되면, 마우스 포인터의 위치에 대한 좌표를 추적한다(S107). 그리고 추적된 마우스 포인터의 위치에 새로운 이미지가 표시되도록 설정한다(S109). 그에 따라 기존의 마우스 포인터의 이미지는 감춰지고, 새로운 마우스 포인터의 이미지가 웹브라우저에 나타날 수 있다.

이를 위해, 웹사이트의 소스코드에는 스크립트 타깃이 되는 ID를 마우스 포인터인 커서로 지정하고, 하기와 같이 소스코드를 작성할 수 있다.

<div class="cursor" id="cursor">

<img class="mouseout" />

<img class="mouseon" />

</div>

그리고 웹브라우저에 마우스 포인터가 무조건 나타나지 않도록 설정하고, 마우스 포인터의 포지션을 fixed하고, z-index의 값을 높게 설정한다. 여기서 z-index는 요소의 위치가 겹칠 경우 순위를 정의하므로, 높은 값이 설정될수록 상위에 배치될 수 있다. 그에 따라 본 실시예에서 z-index를 높게 설정하여 마우스 포인터가 최상위에 배치될 수 있도록 한다.

그리고 마우스 포인터에 적용된 새로운 이미지의 높이가 100%가 되도록 설정할 수 있다. 그에 따라 하기의 소스코드에 "div.cursor {height: 100%;}"를 적용할 수 있다. 물론, 이미지 높이가 100%인 것에 한정되는 것은 아니다.

또한, 마우스 포인터인 커서에 cursor_on이 적용되면, 보이던 out 이미지가 가려지고, 감춰진 on 이미지가 보일 수 있다. 이렇게 마우스 포인터에 새로운 이미지가 나타나도록 하기와 같은 소스코드가 적용될 수 있다.

html, body, html:hover, body:hover, html:active, body:active, *, *:hover, *:active {cursor: none !important;}

div.cursor {

zoom:1 !important;

position: fixed;

z-index: 999999999999999;

background:url('') no-repeat 0 0;

height: 100%;

margin:1px 0 0 1px;

}

div.cursor img {position: absolute;left:0;top: 0;bottom: 0;height: 100%;}

div.cursor img.mouseon,

div.cursor_on img.mouseout {display:none;}

div.cursor_on img.mouseon {display:block;}

또한, 최근에는 웹사이트에 접속하기 위해 컴퓨터 등에서 웹브라우저로 접속하는 경우도 많지만, 스마트폰이나 태블릿 PC 등의 모바일 단말기에서 웹사이트로 접속되는 경우가 많다. 이렇게 모바일 단말기로 웹사이트에 접속하는 경우에는 별도의 마우스 포인터가 표시되지 않도록 하는 것이 바람직하다. 그에 따라 모바일 단말기에서 해당 웹사이트에 접속하는 경우에는, 마우스 포인터가 나타나지 않도록 설정할 수 있다.

그리고 모바일 단말기가 아닌 컴퓨터 등에서 접속하면, 상기에서 설명한 바와 같이, 웹브라우저에서 이동하는 마우스 포인터의 위치를 확인하여, 이를 통해 마우스 포인터의 위치를 추적할 수 있다. 이를 위한 소스코드는 다음과 같다.

$('*').on('mousedown', function () {$('.cursor').addClass('cursor_on');});

$('*').on('mouseup', function () {$('.cursor_on').removeClass('cursor_on');});

if (navigator.userAgent.match(/iPad|iPone|Mobile|UP.Browser|Android|BlackBerry|Windows CE|Nokia|webOS|Opera Mini|SonyEricsson|opera mobi|WindowsPhone|lEMobile|POLARIS/)!=null)

{

var headHTML = document.getElementsByTagName('head')[0].innerHTML;

headHTML += "<style>html, body, *, *:hover, *:active {cursor: auto !important;} div.cursor {display:none !important;} div.cursor * {display:none !important;}</style>";

document.getElementsByTagName('head')[0].innerHTML = headHTML;

} else {

$(function(){// position-cursor */

$("*, html, body").mousemove(function(move){

$(".cursor").css({

top: move.pageY - $(window).scrollTop(),

left: move.pageX

});

});

});

}

이렇게 상기와 같이, 웹브라우저에서 마우스 포인터를 변경한 일례에 대해 도 2에 도시된다. 이때, 마우스 포인터가 웹브라우저에서 벗어나면, 기존에 컴퓨터에서 사용하던 마우스 포인터가 그대로 나타날 수 있다. 이때, 웹브라우저에 표시된 마우스 포인터 이미지는, 웹브라우저 내에 배치되고, 마우스 포인터가 웹브라우저에서 최종 벗어난 위치에 위치할 수 있다.

최근 웹사이트는 사용자의 터치로 웹페이지를 조작할 수 있도록 변경되는 추세에 있다. 그에 따라 웹페이지에 표시되는 버튼의 크기는 사용자의 터치로 쉽게 조작할 수 있는 크기를 가질 수 있다. 일례로, 버튼 등의 크기를 약 1.5cm x 1.5cm의 크기나 약 70픽셀 x 70픽셀의 크기로 형성된다. 그에 따라 마우스의 포인터를 이용하여 정교한 조작을 하지 않아도 웹사이트를 자유롭게 이용할 수 있다.

따라서 본 실시예에 따른 마우스 포인터에 적용되는 이미지는 도 2에 도시된 바와 같이, 손 모양의 이미지를 이용하더라도 이질감이 없이 자연스럽게 웹사이트를 이용할 수 있다.

도 3은 본 발명의 일 실시예에 따른 마우스 포인터 변경 방법에 따라 변경되는 마우스 포인터 이미지의 예들을 도시한 도면이다.

도 3의 (a) 내지 도 3의 (h)는 본 실시예에 따라 변경할 수 있는 마우스 포인터의 이미지를 예시적으로 나타낸 것이다. 이처럼 사람의 손 모양과 같은 이미지나 요술봉과 같은 이미지를 이용할 수 있으며, 그 외에도 볼펜, 지팡이, 지시봉 등과 같은 다양한 이미지를 적용할 수 있다.

또한, 별도로 도시하지 않았지만, 마우스의 왼쪽 버튼이나 오른쪽 버튼을 클릭할 때, 마우스 포인터 이미지가 동작하도록 설정할 수 있다.

위에서 설명한 바와 같이 본 발명에 대한 구체적인 설명은 첨부된 도면을 참조한 실시예에 의해서 이루어졌지만, 상술한 실시예는 본 발명의 바람직한 예를 들어 설명하였을 뿐이므로, 본 발명이 상기 실시예에만 국한되는 것으로 이해돼서는 안 되며, 본 발명의 권리범위는 후술하는 청구범위 및 그 등가개념으로 이해되어야 할 것이다.

Claims (8)

1. 사용자의 컴퓨터를 이용한 마우스 포인터 변경 방법이고,
   상기 컴퓨터가, 웹브라우저를 이용하여 웹사이트에 접속되는 단계;
   상기 웹브라우저 상에 마우스 포인터가 배치되면, 상기 웹사이트에 적용된 소스코드에 의하여 상기 웹브라우저 상에 마우스 포인터의 이미지가 나타나지 않도록 설정되는 단계;
   상기 마우스 포인터의 이미지가 나타나지 않도록 설정되면, 상기 마우스 포인터의 위치 좌표가 추적되는 단계;
   상기 추적된 마우스 포인터의 위치 좌표에 새로운 이미지가 나타나도록 설정되는 단계; 및
   상기 웹사이트에 접속되면, 상기 웹사이트에 접속된 웹브라우저 상에 마우스 포인터가 배치되는 단계; 를 더 포함하고,
   상기 마우스 포인터는 상기 웹사이트에서 최상위에 배치되도록 소스코드가 설정되고,
   상기 웹사이트에는 자바스크립트에 의해 작성된 소스코드가 포함되고,
   상기 마우스 포인터에 적용된 새로운 이미지는 동적 이미지가 적용되고, 상기 동적 이미지는 마우스에 포함된 복수의 버튼 중 어느 하나 이상이 클릭될 때 동작하며,
   상기 웹브라우저 상에 마우스 포인터의 이미지가 나타나지 않도록 설정되는 단계는,
   소스코드
   <div class="cursor" id="cursor">
   <img class="mouseout" />
   <img class="mouseon" />
   </div>
   를 이용하여 스크립트 타깃이 되는 ID를 마우스 포인터인 커서로 지정하는 단계;
   를 포함하고,
   상기 마우스 포인터의 위치 좌표에 새로운 이미지가 나타나도록 설정되는 단계는,
   소스코드
   html, body, html:hover, body:hover, html:active, body:active, *, *:hover, *:active {cursor: none !important;}
   div.cursor {
   zoom:1 !important;
   position: fixed;
   z-index: 999999999999999;
   background:url('') no-repeat 0 0;
   height: 100%;
   margin:1px 0 0 1px;
   }
   div.cursor img {position: absolute;left:0;top: 0;bottom: 0;height: 100%;}
   div.cursor img.mouseon,
   div.cursor_on img.mouseout {display:none;}
   div.cursor_on img.mouseon {display:block;}
   를 이용하여 마우스 포인터의 포지션을 고정(fixed)하며, z-인덱스(index)의 값을 높게 설정(여기서 z-index는 요소의 위치가 겹칠 경우 순위를 정의하므로, 높은 값이 설정될수록 상위에 배치)하여 마우스 포인터가 최상위에 배치되고, 상기 마우스 포인터에 적용된 새로운 이미지의 높이가 100%가 되도록 설정하며, 상기 마우스 포인터에 새로운 이미지가 나타나도록 하는 단계;
   를 포함하는 마우스 포인터 변경 방법.
2. 삭제
3. 삭제
4. 삭제
5. 삭제
6. 삭제
7. 삭제
8. 삭제

Images