2016. 5. 12. 07:50ㆍUI 가벼운 이야기
웹에서 UI를 구성하다보면 별 작은 디테일까지 신경이 쓰일 때가 많다.
브라우저들마다 다 다른 행동을 하는 건 너무 짜증나는 일이지만 어느 정도는 마음을 비운 채로 대하게 되는데, 내가 직접 무언가를 설계하려면 드는 다음과 같은 작은 생각들은, 아 어떤 때는 내가 세상에서 가장 쪼잔한 질문을 하는 사람은 아닌가?하는 생각이 들게 한다.
버튼의 커서
예를 들어,
Quiz 1: 웹 브라우저 상에서 버튼 위에 마우스가 올라가면, 커서는 어떻게 바뀌어야 하는가?
(이 글은 PC에서 마우스 포인터로 읽어야 제대로 이해가 될 듯)
1) 화살표 모양(arrow)일 것이다. 2) 손 모양(pointer)일 것이다. 3) I자 모양(text or caret)일 것이다.
마우스를 올려보면 정답은 1) 화살표 모양이다. 반면 링크는 클릭 가능하다는 점을 알리기 위하여 손모양이 표시된다.
그렇다면 왜 버튼은 손모양이 아니고 화살표일까? 만약 이것을 손모양으로 바꾼다면 사용성이 올라갈까? 내려갈까?
너무 쪼잔한 질문이라 민망하지만, 다행히, 이 바닥에 이런 질문하는 사람이 나 혼자는 아니라는 점이 위안이 되기는 한다. 영문으로 자료를 검색해 보면 너무 많은! 질문과 답변이 올라와 있다.
1. 왜 버튼은 디폴트가 손모양이 아니고 화살표인가?
이것은 PC에 있던 장치를 웹에 그대로 가지고 왔기 때문인 것 같다. 링크의 경우 일반 텍스트와 비슷해서 누르면 클릭이 된다는 점을 분명히 해 줄 필요가 있지만, 버튼은 그 자체로 누를 수 있다는 표시가 너무 강해서 (업계 용어로 affordance라고 한다) 굳이 커서를 바꿀 필요가 없었는데, 그것이 웹으로 오면서 기존 규칙을 따르고 있다는 설명이 가장 그럴 듯 하다. (영어 답변 참고)
2. 그렇다면 이것을 손모양으로 바꾸면 사용성이 올라갈까? 그대로일까? 오히려 나빠질까?
그렇다는 사람, 아니라는 사람 모두 섞여있다. 우선 가장 강력한 목소리 하나를 보자.
Microsoft's Windows desktop applications > Design > Guidelines > Interaction > Mouse and Pointers에서 이렇게 설명한다. (Hand Pointers 항목)
Text and graphics links use a hand or "link select" pointer (a hand with the index finger pointing Screen shot of hand with index finger pointing ) because of their weak affordance .. 중략 ..
To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command buttons already have a strong affordance, so they don't need a hand pointer. The hand pointer must mean "this target is a link" and nothing else.
즉, 링크는 워낙 어포던스가 약하니까 손으로 바꾸더라도, 혼동을 피하기 위해 버튼에서는 (이미 강한 어포던스가 있으므로) 손모양을 쓰지마라!!라고 강조한다. 손모양은 링크에서만 써야지, 다른 곳에서 쓰면 안된다는 것이다. 비록 데스크탑 어플리케이션 가이드지만, 웹에서도 비슷하지 않을까?
물론, 우리 나라의 양대 포털이나 쿠팡 디자이너들은 이 생각에 동의하지 않는 것 같다. 네이버, 다음, 쿠팡 모두 버튼의 기본적인 커서 모양은 화살표가 아니라 손모양이다. 사실 이 생각도 공감이 가는 것이, 아무리 버튼이라도 클릭 가능하다면 분명히 마우스 커서의 변화로 알려주는 것이 좋을 수 있다. 텍스트 링크에 하두 익숙하다보면 이젠 커서가 바뀌지 않으면 약간 의심도 들 정도다. 더군다다 데스크탑도 아니고 웹에 있는 버튼이라면 <국제 표준이나 브라우저 디폴트는 따위는 무시하고> 강제로 CSS를 이용하여 커서를 바꿔 주는 것이 좋지 않을까?
체크박스의 커서
그런데 이 문제가 사실은 좀 더 복잡해지는 영역이 있다. 바로 체크 박스와 라디오 버튼이다.
Quiz 2: 위 세 가지 형태의 체크 박스를 보고 어떤 차이가 있는지, 어떤 것이 브라우저 디폴트인지, 그리고 어떤 것이 사용성이 가장 좋은지 논하시오.
보통 별 고민없이 마구잡이로 만들면 1번처럼 된다. 즉 체크 박스의 디폴트 커서는 화살표이며, 이는 위에서 '버튼'에 대하여 설명한 바와 같다. 다만 1번의 경우 그 옆의 문구를 눌러도 체크가 되지 않는다. 이렇게 만들면 너무 작은 영역의 체크만 강요하게 되는 셈이다. 그래서 원래 제대로 구현하려면 2번처럼 구현해야 한다. 2번은 글자 부분을 클릭해도 체크가 된다. 그런데 문제는 여기서부터이다.
우선 체크박스가 버튼만큼 어포던스가 분명한가? 그래서 화살표로 해도 큰 문제 없을 정도인가? 개인적으로 동의하기 어렵다. 확실히 버튼만큼은 아닌 것 아닐까?
두 번째, 그러면 버튼 옆의 글자(라벨)은 디폴트 커서가 화살표이다. 이 화살표 만으로 (즉 I-beam 혹은 caret이 아닌 것 만으로) 이것이 클릭 가능하다는 점이 분명해 지나? 절대 아니다.
그럼 마지막으로, 체크 박스는 화살표, 옆 글자는 손모양으로 해야 하나? 아니면 둘을 통일해야 하나?
나만 헷갈리는 것이 아니고, 아마 포털의 디자이너들도 헷갈리는 모양이다.
위 그림은 네이버(왼쪽 위), 다음(왼쪽 아래), 그리고 쿠팡(오른쪽)의 로그인창을 복사한 것이다. 나름대로 대표성이 있다고 생각해서 골랐는데, 마침 세 회사의 접근 방식이 모두 달라서 비교를 해 보았다.
네이버 로그인 창
먼저 네이버 로그인창인데 '로그인' 버튼도 손모양, 아래 체크와 체크 라벨 모두 손 모양으로 세 요소 간의 일관성을 유지하고 있다.
위 대략 구현한 것에서 체크박스, '로그인 상태 유지', 그리고 로그인 버튼 및 다른 링크들에 마우스를 올려 보고 클릭해 보면 어떤 느낌일지 알 수 있다. 역시 위에서 얘기한 '모두 클릭 가능함'을 정확하게 설명하는 느낌이다. 물론 반대하는 사람들은 이것이 너무 과도하다고 주장하는 것이고.
(참고로 네이버 로그인 버튼은 눌려지지 않는다. 눌렀을 때 파란 테두리만 나오고, 들어간 느낌은 보이지 않는다. 아주 옅은 회색의 배경색 지정으로 만들었다. 링크는 밑줄이 없는 형태이다.)
다음 로그인 창
| | IP 보안 ON | |
| 회원가입 | 아이디 비밀번호 찾기 | 카카오 로그인 | |
다음, 다음 로그인창인데, '로그인' 버튼은 손모양으로 바꾼 반면 위 체크와 체크 라벨은 모두 화살표로 디폴트를 유지하고 있다.
위 예시에서 여러 요소에 마우스를 올려 보면 느껴볼 수 있다. 버튼이나 링크에 비하여 체크나 체크 라벨은 확실히 누를 수 있을 거라는 느낌이 덜 하지 않나 싶다. 그러나 반대쪽 입장은 이미 두 가지 요소는 인터랙티브한 요소여서 손모양으로 바꾸는 것이 과도하다는 주장이다. 물론 이 주장을 하는 사람들은 '로그인' 버튼도 화살표 커서여야 한다고 주장한다. (참고로 다음의 로그인 버튼은 눌려지지 않는다. 눌렀을 때 파란색 테두리만 나오고 들어간 느낌은 보이지 않는다. 약간의 음영이 들어간 이미지로 만들었다, 링크는 밑줄이 없는 형태이다)
쿠팡 로그인 창
마지막으로 쿠팡인데, '로그인' 버튼은 손모양으로 바꾸었다. 그런데 체크 박스는 화살표로 디폴트를 유지한 반면, 체크 라벨은 손모양으로 바꾸어 버렸다.
역시 여러 가지 요소에 마우스를 올려보면, 느낌을 알 수 있는데, 아마 체크 박스 자체는 표준 권고를 따라서 안 바꾸었지만, 라벨에도 화살표 모양이라는 건 너무 알 수 없다고 생각했는지 라벨만 손모양으로 바꾸었다. 다만 그런 논리라면 '로그인' 버튼은 왜 손모양으로 바꾸었는지 모르겠다. 세 회사 중에 가장 버튼처럼 생겼는데 표준을 따른다면 로그인 버튼도 화살표로 해야 하는 것 같긴 하다.
구현 방법상 작은 차이는 네이버와 다음은 <label for="id" > 같은 형식으로 explicit하게 지정한 반면 쿠팡은 <label>안에 인풋 요소를 넣는 implicit label association을 사용한다는 점이다.
(쿠팡의 로그인 버튼도 눌러지지 않는다. 마우스로 눌렀을 때 파란색 테두리가 생기지만 눌러진 느낌은 보이지 않는다. 버튼은 CSS의 여러 요소를 활용해 만들었다)
세 회사 모두 로그인창 주변의 링크 텍스트는 기본 밑줄을 없애 버렸고 마우스가 올라 갔을 때 밑줄이 나오면서 커서가 손모양으로 바뀌는 변화를 주고 있다. 세 회사 모두 로그인 버튼의 커서는 손모양으로 바꾸었지만, 버튼이 눌리는 효과는 만들지 않았다. 귀찮아서 일까? 별로 중요하지 않다고 생각해서 일까? 아니면 버튼이 아니라 링크라고 생각해서 커서도 손으로 바꾸고 눌린 모습도 안 만든 걸까? (만들려고 마음만 먹으면 CSS로 간단하게 만들어진다)
2016년 4월 2일 현재. 세 회사 로그인창을 HTML 상태 그대로 가져오려고 했지만 똑같이 만들려면 작업이 너무 괴로와서 중요 동작만 비슷하게 만들었다, 물론 각 요소의 작은 디테일들이 인터랙션에 영향을 많이 주는 것을 알고 있지만 작업이 너무 괴로울 것 같아 포기하였는데 혹시라도 중요한 글의 요지에 영향을 미치는 중요한 디테일을 놓쳤다면 댓글 부탁드린다.
세 회사가 나름 이유는. 이유가 있을 것이다. 뭐 없으면 어떤가? 이런 쪼잔한 것까지 어떻게 신경쓰랴..
결론?
어쨌든 각 회사의 섬세한 정책은 잘 모르겠고, UI 디자이너가 취할 수 있는 정책은 세 가지가 있을 것 같다.
1. 가이드라인과 기본 설정을 따르자.
즉 원래의 국제 표준, 가이드라인, 그리고 웹 브라우저 디폴트를 따라야 혼동이 없다. 그렇다면 버튼과 체크 박스 등은 모두 화살표로 둔다. 이 경우 확실한 것 하나는, 체크 박스/라디오 옆 글자(라벨)까지 디폴트로 두어야할지는 모르겠다. 이 부분은 정말 불편하다.
2. 웹에는 모든 것이 다르다.
따라서 모든 클릭 가능한 것은 손모양으로 바꾸어 준다. 아래의 CSS를 넣으면 된다고 한다. (테스트해보지는 않았다)
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer;}
문제는 오랜 역사로 성립된 디폴트값을 이렇게 CSS로 강제적으로 바꾸는 것에 대해 많은 디자이너들이 우려와 불쾌를 표현한다는 점이다. 위 CSS의 출처: Give Clickable Elements a Pointer Cursor를 보시길.
3. 다른 건 다 표준을 따르되, 라벨만 좀 바꾸자
표준에 대한 존중이 중요하다. 하지만 라벨은 너무 사용성이 떨어진다. 그러므로 라벨과 라벨이 있는 체크/라디오만 좀 바꾸자.
이 원칙의 문제는 너무 절충이라는 거? 그래도 개인적으로는 이것이 가장 좋아 보인다. 원래 성격이 그런 듯.
중요한 것은 '우리의 마음'이 이제 화살표 만으로는 '클릭 가능'이라고 잘 생각하지 않는 것 같다는 점이다. 네이버 등 한국 웹 사이트에 길들여져서 그런걸까? 구글은 버튼에 화살표를 쓰고, 페이스북은 버튼에 손모양을 쓴다. 페북에 길들여진 걸까?
다른 디자이너들은 어떻게 생각하는지 궁금하다.
[참고##UI 디테일##]