NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


<button> 요소와 <label> 요소의 커서는 어떤 형태이어야 하는가?

본문 건너 뛰기

그동안은 단순히 “커서 모양만으로 클릭 가능하다는 것을 예측할 수 있으면 좋겠다.” 라고만 생각했습니다. 즉, <button>, <label> 모두 {cursor:pointer} 스타일로 처리해 왔는데 주변에서 이런 방식에 이의를 제기했던 사람은 없었습니다.

개인적 경험에 비춰 봐도 커서 모양이 나를 혼란에 빠트린 적은 없었거든요. 이래도 그만 저래도 그만 아주 사소한 문제일 수 있는데 사람들이 별로 관심을 두지 않는 문제라서 더 흥미롭게 느껴지네요.

W3C CSS cursor 명세와 함께 구글, 페이스북, 애플 웹 사이트를 돌아보고 내린 결론은 다음과 같습니다.

“가능하다면 W3C 권장 표준을 따르는 것이 좋겠다. 그럴 수 있을 것 같다. 그래도 될 것 같다.”

#1
표준에서 {cursor:pointer} 값은 링크를 가리킵니다. “The cursor is a pointer that indicates a link.” 라고 명시해 두었는데요. 따라서 앞으로 가능한 한 이 규칙에 따르려고 합니다.

#2
하지만 커서 모양만 놓고 봤을 때 문서 여백에 해당하는 <body> 요소와 <button>, <label> 요소의 커서 모양이 {cursor:default} 형태로 동일하다는 것은 좋은 사용자 경험이 아닐 거라고 생각합니다.

#3
커서 모양은 표준이 있으므로 따르고, 콘텐츠 스타일에는 표준이 없으므로 <button>, <label> 요소에 커서 모양 이외 다른 시각적 단서를 남기는 것이 좋겠습니다. 예를 들면 <button>, <label> 요소에 커서를 올렸을 때 해당 요소에 배경 색이나 명도를 다르게 처리함으로써 클릭할 수 있다는 시각적 단서를 남기고 사용자에게 확신을 줄 수 있을 것이라고 생각합니다.

“가능하다면 W3C 권장 표준을 따르는 것이 좋겠다. 그럴 수 있을 것 같다. 그래도 될 것 같다.”

영감을 주었던 글: 세상에서 가장 쪼잔한 질문 – 체크박스 옆 라벨 커서는 어떻게 만들어야 할까?

분류: CSS,웹 디자인,웹 표준 | 2016년 9월 7일, 3:29 | 정찬명 | 댓글: 3개 |
트랙백URI - http://naradesign.net/wp/2016/09/07/2197/trackback/

3개의 댓글이 있습니다.

  1. MPRUER.K 댓글:

    일반적으로 배워왔던 내용을 아무 의심 없이 그대로 사용해왔는데… 글을 보고 다시한번 생각하게 되네요!
    좋은 글 감사합니다!

  2. hoho_kim 댓글:

    당연하다고 생각했었는데 ^^
    매번 좋은 정보 주시고 눈팅만 하고 갔었는데 흔적 남기고 갑니다.

  3. 익명 댓글:

    좋은 정보 감사합니다.

    checkbox에 배경색이 생기니 가독성이 확 사네요

    항상 사용자 입장에서 생각한다는게 쉽지 않은거 같네요

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님