커서(cursor)의 역사는 1960년대 후반 더글러스 엥겔바트(Douglas Englebart)가 세상에 마우스와 그래픽 사용자 인터페이스(GUI)를 선보인 '모든 데모의 어머니(The Mother of All Demos)'로 거슬러 올라갑니다. 마우스 커서는 컴퓨터 화면에서 현재 위치를 시각적으로 보여 주는 도구이자, 사용자 경험(UX) 관점에서 화면의 특정 지점에서 무엇을 할 수 있는지, 또는 컴퓨터가 지금 어떤 작업을 하고 있는지 알려 주는 훌륭한 수단입니다.
이 글에서는 웹 페이지에서 마우스 커서를 활용해 사이트의 사용자 경험을 개선하는 다양한 방법을 소개합니다.
CSS cursor 속성 문법(Syntax)
CSS 선택자에서 기본 화살표 대신 다른 커서를 지정하려면 다음과 같은 문법을 사용합니다.
cursor: [ url(1.png), url(2.png) ], etc.,
<필수 키워드 값>
첫 번째 대괄호 안에는 쉼표로 구분된 URL 목록이 들어가며, 이 값은 선택 사항입니다. 덕분에 커스텀 커서를 사용할 수 있는데, 인터넷에는 자신만의 고유한 커서를 만들 수 있도록 도와 주는 제작 도구가 다양하게 마련되어 있습니다.
쉼표로 구분된 목록은 브라우저가 첫 번째 URL부터 차례로 로드를 시도한다는 의미입니다. 첫 번째 항목을 찾지 못하거나 URL이 잘못된 경우에는 목록을 순차적으로 내려가며 작동하는 항목을 찾고, 끝내 성공하지 못하면 마지막에 지정한 필수 키워드 값으로 대체됩니다.
즉, URL이 포함된 첫 번째 매개변수는 생략할 수 있지만 두 번째 매개변수는 반드시 포함해야 합니다. 이 키워드는 해당 위치에 표시할 커서 유형을 지정하는 역할을 합니다. 대표적인 값은 아래 예제에서 확인할 수 있습니다.
주요 cursor 키워드 값 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 커스텀 커서 예제</title>
<style>
table {
width: 100%;
text-align: center;
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
}
thead th {
width: 32%;
background: lightblue;
padding: 10px;
}
tr:nth-child(even) {
background-color: lightgrey;
}
td {
width: 32%;
height: 50px;
padding: 10px;
}
td.test {
color: red;
font-weight: bold;
}
td#auto { cursor: auto; }
td#cell { cursor: cell; }
td#crosshair { cursor: crosshair; }
td#default { cursor: default; }
td#none { cursor: none; }
td#pointer { cursor: pointer; }
td#help { cursor: help; }
td#progress { cursor: progress; }
td#wait { cursor: wait; }
td#text { cursor: text; }
td#vertical-text { cursor: vertical-text; }
td#zoom-in { cursor: zoom-in; }
td#zoom-out { cursor: zoom-out; }
</style>
</head>
<body>
<table>
<thead>
<th>커서 유형</th>
<th>설명</th>
<th>직접 테스트</th>
</thead>
<tr>
<td>auto</td>
<td>상황(context)에 따라 적절한 커서를 자동으로 판단해 표시합니다.</td>
<td class="test" id="auto">테스트</td>
</tr>
<tr>
<td>default</td>
<td>일반적으로 화살표이며, 사용 중인 플랫폼에 따라 달라집니다.</td>
<td class="test" id="default">테스트</td>
</tr>
<tr>
<td>help</td>
<td>도움말이 제공됨을 나타냅니다.</td>
<td class="test" id="help">테스트</td>
</tr>
<tr>
<td>none</td>
<td>커서가 표시되지 않습니다.</td>
<td class="test" id="none">테스트</td>
</tr>
<tr>
<td>pointer</td>
<td>링크나 버튼 위에서 클릭할 수 있음을 알리는 데 가장 널리 사용됩니다.</td>
<td class="test" id="pointer">테스트</td>
</tr>
<tr>
<td>progress</td>
<td>포인터와 wait가 결합된 형태로, 다른 작업이 진행되는 동안에도 UI와 상호작용할 수 있음을 나타냅니다.</td>
<td class="test" id="progress">테스트</td>
</tr>
<tr>
<td>text</td>
<td>텍스트를 선택(드래그)할 수 있음을 사용자에게 알립니다.</td>
<td class="test" id="text">테스트</td>
</tr>
<tr>
<td>wait</td>
<td>컴퓨터가 처리 중이며 사용자가 UI와 상호작용할 수 없음을 나타냅니다.</td>
<td class="test" id="wait">테스트</td>
</tr>
<tr>
<td>zoom-in</td>
<td>대상을 확대할 수 있음을 사용자에게 알립니다.</td>
<td class="test" id="zoom-in">테스트</td>
</tr>
<tr>
<td>zoom-out</td>
<td>대상을 축소할 수 있음을 사용자에게 알립니다.</td>
<td class="test" id="zoom-out">테스트</td>
</tr>
</table>
</body>
</html>
위 코드는 사용 가능한 커서 값 중 일부만 담고 있습니다. 그 밖의 값은 MDN 문서를 참고하시기 바랍니다.
함께 알아두면 좋은 커서 값
- crosshair: 십자선 모양으로, 정밀한 좌표 선택이 필요한 경우 사용합니다.
- move: 요소를 드래그해 이동할 수 있음을 나타냅니다.
- grab / grabbing: 요소를 잡아 끌 수 있음(또는 잡고 있는 상태임)을 나타냅니다.
- not-allowed: 해당 작업이 허용되지 않음을 나타냅니다.
- cell: 스프레드시트처럼 셀 단위 선택이 가능함을 나타냅니다.
마무리
오늘은 웹사이트에 커서를 적용해 사용자 경험을 개선하는 몇 가지 방법을 살펴보았습니다. 페이지의 각 지점에서 무엇을 할 수 있는지 커서로 표시해 주면, 사용자는 사이트를 탐색할 때 어떤 일이 일어날지 명확히 예측할 수 있습니다. 물론 여기서 소개한 것 외에도 더 많은 커서 옵션이 존재합니다.
자신의 필요에 맞게 커서를 커스터마이징하는 다양한 방법을 직접 실험해 보시길 권합니다. 그리고 잊지 마세요. 커서는 UX의 절반일 뿐이라는 사실을요. 나머지 절반은 사용자가 커서에 기대하는 동작을 실제로 구현하는 것이며, 이 내용은 다음 기회에 다루겠습니다. 즐거운 코딩 되세요!
부트캠프 참여자의 81%가 참여 이후 IT 분야 취업 전망에 대한 자신감이 높아졌다고 응답했습니다. 오늘 자신에게 맞는 부트캠프를 찾아보세요.
부트캠프 수료생은 평균적으로 부트캠프 시작부터 첫 직장 취업까지 6개월 이내에 경력 전환을 완료했습니다.