[1편] 버튼에는 손 모양 커서가 없어야 합니다. (Buttons shouldn’t have a hand cursor)

이 글은 번역 글입니다.
원본 링크 -Buttons shouldn’t have a hand cursor- 입니다.
이것은 1편입니다. 그리고 총 3편의 시리즈로 되어있습니다. 번역은 순차적으로 작업할 예정입니다. 작업이 완료되면 이 글 상단과 하단에 링크를 연결하겠습니다.
presentation

시작합니다!

손(포인터) 커서는 클릭 가능함을 의미한다는 믿음이 있지만 이것은 잘못된 것이며 잠재적으로 문제가 될 수 있습니다.
손이 클릭 가능하다는 뜻은 아닙니다.
브라우저가 버튼 (및 다른 요소)에 포인터 커서(pointer cursor)를 제공하지 않는 것은 우연이 아닙니다. 커서가 의도적이지 않기 때문입니다. 다음 스크린 샷을 참조하십시오.
presentation
Mac OS에서 Chrome의 Google 검색 페이지
거의 모든 요소는 (메뉴, 탭, 공백, 브라우저 버튼, 북마크 바 및 Google의 검색 창) 상호 작용하고 클릭할 수 있는 요소가 대부분이며, 그것들은 포인터 커서(pointer cursor)가 없습니다.
위에 표시되지 않은 대화형 및 클릭 가능 요소가 더 있습니다: select menus, sliders, checkboxes, radios, labels, images, empty space (예:마우스 오른쪽 단추 클릭- 보기 소스) and text - 역시, 이것들 중 어떤 것들도 포인터 커서(pointer cursor)를 가지고 있지 않습니다.
운영 체제도 마찬가지입니다. 버튼을 포함한 다양한 요소를 탭, 드래그, 선택, 누르기, 왼쪽 클릭, 오른쪽 클릭 등으로 선택할 수 있습니다. 그러나 위에 표시된 포인터 커서(pointer cursor)로 버튼을 나타내지 않습니다.
presentation
사용권 계약은 링크이며 포인터 커서(pointer cursor)를 가져옵니다. 버튼은 없습니다.
인식력은 커서에 관계없이 사물이 보이는 방식으로 제공됩니다. 커서는 마우스와 같은 포인팅 장치를 사용하여 가리키는 경우에만 사용할 수 있습니다.
이것을 예로 들면, 체크 박스가 절대로 둥글지 않고-checkboxes are never round (라디오 버튼이 정사각형이 되지 않는) 이유입니다. 이것은 또한 링크가 일반적으로 밑줄을 그어야 하는 이유이기도 합니다. 이것이 링크가 실제로 손 모양 커서(hand cursor)를 가지고 있는 이유입니다.

그들이 말하는 것

Microsoft’s design guides에서는 취약성에 대해 설명합니다.
텍스트와 그래픽 링크는 그들의 취약성 때문에 손 모양[...] 포인터를 사용합니다. 링크는 밑줄이나 특수 배치와 같은 링크임을 나타내는 다른 시각적 단서를 가질 수 있지만 손 포인터를 가리키는 것이 링크의 명확한 표시입니다.
혼동을 피하려면 다른 용도로 핸드 포인터를 사용하지 않는 것이 중요합니다. 예를 들어, 명령 버튼(command buttons)에는 이미 강력한 기능이 있으므로 손 포인터가 필요하지 않습니다. 핸드 포인터는 "이 대상은 링크입니다"를 의미해야 하며 다른 대상은 없습니다.
Apple의 휴먼 인터페이스 지침(Apple’s Human Interface Guidelines)에 따르면 "콘텐츠가 URL 링크 일 때"손 모양 커서를 사용해야 합니다. W3C 사용자 인터페이스 지침(W3C User Interface guidelines)은 "커서가 링크를 가리키는 포인터입니다"라는 동일한 내용을 다시 말합니다.

핸드 커서(hand cursor)는 링크 용입니다.

손 (그리고 종종 밑줄 친 텍스트)은 링크를 나타냅니다. 링크는 버튼이 아닙니다. 링크는 웹과 함께 제공되었습니다. 사용자가 다른 점을 이해하도록 돕기 위해 손 모양 커서가 제공됩니다. 여분의 단서 역할을 합니다. 이유는 다음과 같습니다.
  1. 링크를 클릭하면 웹 페이지 또는 리소스가 열립니다.
  2. (데스크톱에서) 링크를 마우스 오른쪽 클릭하고 (버튼으로는 할 수없는) 많은 일을 할 수 있습니다. 새 탭 / 창에서 열기, 링크 저장, 주소 복사, 독서 목록에 추가, 책갈피 추가 등.
  3. (모바일 기기에서) 링크를 탭 하여 누르고 있으면 이전 시점과 비슷한 컨텍스트 메뉴가 표시됩니다.
  4. 링크는 또한 다른 곳으로 가고 있다고 나에게 알려줍니다. 나는 어떤 데이터도 수정하거나 변경(modifying any data or making changes) 하지 않을 것입니다 (버튼이 할 것 같은).

마치며

버튼에 손 모양의 커서(hand cursor)가 있으면 사용자가 링크를 사용하지 않은 경우 링크와 상호 작용하고 있음을 미묘하게 암시합니다. 사용자가 가리킬 때 시각적 피드백을 제공하려면 배경색과 다른 스타일 변경 사항을 사용하면 됩니다. 잘 설계된 버튼은 사용자가 뭔가를 한다는 것을 깨닫는 데 도움이 되는 손 모양 커서가 필요하지 않습니다.
핸드 커서(hand cursor)는 링크용으로 예약되어 있습니다. 이것은 그들의 행동이 독특하기 때문입니다. 브라우저 및 운영 체제는 당신을 위해 일해 왔습니다.
웹이 등장한 이래로 이러한 방식으로 링크가 항상 처리되었습니다. 이것은 혁신이 필요 없는 웹의 관습입니다. 브라우저에서 다룰 수 있다는 것을 쉽게 알 수 있습니다. 그러면 실제 문제를 해결할 수 있습니다.

저는 Form Design Patterns라는 책을 쓰고 있습니다. 이것이 언제 풀어 놓이는지 알고 싶다면 여기에 가입하십시오.
presentation
이 글은 번역 글입니다. 원본 링크입니다.

presentation

presentation
안녕하세요! Early adopter입니다.
제 번역 블로그를 자주 찾아 주셔서 감사드립니다.저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
페이스북의 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
혹시나 저랑 함께 "보버"에서 디자인 번역 공장 연재를 해주실 유저분 계시면 리뷰나, 페북 어디에서든 메시지 주세요!!! 외롭습니다
함께 작업했으면 좋겠습니다^^ 연락 간절히 기다립니다.

presentation

번역 글 추천(신청) 받습니다.
안녕하세요.
일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일 정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.