Cursor, Pointer, 17세기 천문 도구에서

한 줄로

화면 위 마우스 위치를 표시하는 작은 아이콘입니다. 두 단어는 어원이 다릅니다.

Cursor

라틴어 currere (달리다)에서 cursor (달리는 자)가 됩니다. 17세기 천문 도구의 미끄러지는 부속에서 사용됩니다. 슬라이드 자(slide rule)의 움직이는 부분도 cursor입니다.

1960년대 컴퓨터 터미널의 깜빡이는 텍스트 위치(텍스트 cursor)에 적용됩니다. 1970년대 마우스 화살표에도 같은 단어가 사용됩니다.

Pointer

영어 그대로 "가리키는 것"입니다. 1970년대 Xerox PARC에서 GUI를 만들 때 화면의 화살표를 가리키는 단어로 쓰입니다.

두 단어의 미세한 차이

Cursor: 텍스트 입력 위치(깜빡이는 막대)와 마우스 위치를 모두 의미합니다. Pointer: 마우스가 가리키는 화살표만을 의미합니다.

실제로는 거의 혼용됩니다. CSS의 cursor 속성이 마우스 모양을 모두 정의합니다.

.button { cursor: pointer; }  /* 손가락 모양 */
.text { cursor: text; }       /* I-beam */
.loading { cursor: wait; }    /* 모래시계 */

종류

Default: 화살표입니다. Pointer: 손가락 모양으로 클릭 가능 영역을 의미합니다. Text: I-beam으로 텍스트 입력이 가능함을 의미합니다. Wait: 모래시계나 스피너로 시스템이 바쁨을 표시합니다. Move: 사방 화살표로 드래그가 가능함을 표시합니다. Not-allowed: 금지 마크입니다.

모바일에서

터치 디바이스에는 cursor가 없습니다. 다만 iPadOS 13.4 (2020)에서 트랙패드와 마우스를 지원하면서 cursor가 부활합니다. 다만 데스크탑과 다른 디자인입니다. 원형 점이 인터랙티브 요소 위에서 그 요소 모양으로 변형됩니다.

바이브 메이커가 챙길 한 가지

클릭 가능한 모든 요소에 cursor: pointer를 적용합니다. CSS 한 줄이지만 affordance를 명확히 합니다. 기본값은 default라서 손가락이 안 나타나는 경우가 많습니다.

관련

Mouse, Affordance, Signifier