[UI/UX] 비활성화 상태 버튼 :: 마이구미

이 글은 비활성화(disabled) 상태를 가지는 버튼에 대해 다룬다.
제목만 보면, 주제의 범위가 광범위하다.
글의 핵심이 정해져있지 않을 수 있으나... 그냥 찾아보고 공부한 것들을 끄적끄적 해보려고한다.
개인적인 생각이 많이 담겨져있다는 것을 알아두길 바란다.

 

본인이 고민한 것들을 요약하자면, 다음과 같다.

1. 버튼 태그에 disabled 속성을 사용하면, 커서의 모양이 금지 모양으로 변하면 좋겠다.
2. mui 는 비활성화 상태에 있어서, 왜 기본값으로 커서의 모양을 변경하지 않는것인가?
3. 비활성화 상태의 버튼을 사용하는 것이 정말 사용자에게 유용할까?

 

1, 2 번은 같은 주제이지만, 3번은 직접적으로 연결되어있지는 않다.

1, 2번의 경우에는 비활성화 상태를 조금 더 사용자에게 인지시켜주고 싶은 니즈의 배경을 가진 내용이다.

하지만 실질적으로 커서 모양은 비활성화 상태에 대한 것을 인지시켜주는 것이지, 왜 비활성화 상태를 가지는 것에 대한 피드백을 주는 것은 아니다.

그러한 측면에서 비활성화 상태의 버튼 그리고 그것을 위한 커서 모양이 정말 사용자에게 유용한 것인지? 에 대한 내용을 다룬 것이 3번이다.

---

 

비활성화 상태 관련 내용을 찾아본 계기는 다음과 같다.

 

mui 를 기반으로 사용하는 서비스가 존재하고 있고, 해당 서비스를 작업하던 도중에 비활성화(disabled) 상태의 버튼이라면, 커서의 모양이 금지 표시로 표현되면 좋겠다라고 생각이 들었다.

 

그런데 왜 mui 에서는 기본적으로 비활성화 상태인 경우에는 커서 모양을 변경하지 않지? 라는 의문이 들었다.

 

 

확인해보니, mui 에서는 기본적으로 비활성화의 경우에는 다음과 같은 스타일을 적용하고 있었다.

 

pointer-events: none;
cursor: default;

 

본인이 원하는 커서의 모양이라면, cursor: not-allowed; 로 적용되어있어야한다. (CSS cursor)

mui 쪽에서는 이러한 상황을 공식 문서에서도 설명하였고, 본인이 원하는 방향을 위한 방식도 제공해주고 있었다. (관련 공식 문서)

더 자세한 히스토리를 알 수도 있었고, 많은 논의가 있었던 것으로 보인다.

또한, 다음 버전에서는 관련 기능을 제공하는 검토도 있었고, 계속 진행중인 것으로 보인다.

본인이 간략히 이해한 바로는, OS, 웹 접근성 등 다양한 이슈들이 존재했기도 하지만, 초기부터 작업된 사항으로 인해, 여러가지 이유로 쉽게 작업할 수 없는 영역이라는 느낌도 들었다.

아무튼 mui 쪽에서 비활성화 상태의 경우에는 not-allowed 를 제공하지 않는 이유가 크리티컬한 이슈가 있어서 제공하지 않는 것은 아니라는 것을 확인했다. (antd 의 경우에는 기본적으로 not-allowed 를 적용하고 있다.)

 

---

 

위와 같은 내용을 찾다보니, 많은 글들을 자연스럽게 읽게 되었다.

그러던 과정 중, 비활성화 버튼에 대한 생각을 좀 더 다시 생각해볼만한 글을 발견했다.

 

비활성화 버튼의 경우에는 폼(Form) 구조에서 많이 사용된다.

이러한 상황을 기반으로, 세부적인으로 크게 2가지로 분류해본다.

1. 유효성 검증이 실패한 경우
2. 변경한 값이 없는 경우

 

나이를 입력하는 필드가 존재하고, 저장 버튼이 존재하는 폼이 존재한다고 가정해보자.

나이는 필수로 입력해야하는 필드이다. (미입력시 유효성 검증을 통과하지 못한다)

 

위 상황에서 첫번째 경우를 위한 예제를 확인해보자.

사용자는 등록 페이지를 진입한다.

 

 

나이 필드에 입력된 값이 없기 때문에, 유효성 검증을 통과하지 못한 상태로써, 제출 버튼은 비활성화 상태를 가진다.

서비스에서 별도 피드백을 주고 있지는 않은 상황으로, 사용자는 비활성화 상태의 이유에 대해 간접적으로 유추해야한다.

 

두번째 경우도 동일하다.

등록한 후, 수정을 위해 수정 페이지를 진입한다.

 

 

초기 진입시에는 변경된 이력이 없기 때문에, 제출 버튼은 비활성화 상태를 가진다.

이 경우에도 사용자는 비활성화 상태의 이유에 대해 간접적으로 유추해야한다.

 

결과적으로 비활성화 상태를 가짐으로써, 제출할 수 없다는 것을 사용자에게 인지시켜줄 수 있다.

하지만, 왜 제출할 수 없는지에 대한 피드백은 직접적으로 알려주고 있지 않은 상황이다.

 

그렇다면, 어떻게 개선할 수 있을까?

제출 버튼이 비활성화 상태를 가지느냐? 가지지 않느냐? 2가지 컨셉으로 분류할 수 있다.

 

제출 버튼이 비활성화 상태를 가지지 않는 것은 언제라도 클릭할 수 있다는 의미가 된다.

이것이 의미하는 것은, 수정의 경우에는 클릭한 시점에 변경된 이력이 없다는 얼럿창을 노출할 수 있다.

유효성 검증에 대해서는 각 필드에 대한 검증 실패 메시지를 노출해줄 수 있다.

 

 

비활성화 상태를 가져간다면, 어떻게 할 수 있는가?

제출 버튼이 비활성화 상태를 가졌더라도, 호버(Hover) 시점에 툴팁으로 사용자에게 피드백을 줄 수 있다.

결과적으로 비활성화에 대한 이유를 사용자에게 피드백하는 것으로써, 원하는 목적을 동일하게 충족할 수 있게 된다.

 

 

하지만, 1가지 고민해봐야하는 것이 존재한다.

마우스와 키보드의 사용성이 달라진다.

기본적으로 button 의 disabled 속성은 키보드 탭 이동시 스킵(skip) 되는 대상이다.

그래서 키보드 활용시에는 툴팁을 확인할 수 없게 된다.

이어져서 포커스(focus) 대상도 아니기에, 위와 같은 제약사항들이 존재하게 된다.

 

---

 

아시다시피 어떤 기능이든 상황과 목적에 따라, 최선의 방법은 달라질 수 있다.