비활성

정의

비활성은 어떤 요소가 지금 이 순간에는 동작하지 않는다는 것을 보여 주는 상태입니다. 보통 색을 흐리게 낮추고, 마우스를 올리면 커서가 금지 표시로 바뀌며, 눌러도 아무 반응이 없습니다. 이렇게 시각적으로 힘을 빼 두면 사용자는 굳이 눌러 보지 않고도 이건 지금 쓸 수 없다는 것을 알아챕니다. 필수 항목을 아직 안 채운 제출 버튼이나, 이미 최대 수량에 도달해 더는 못 누르는 증가 버튼처럼, 특정 조건이 갖춰지기 전까지 잠시 잠가 두는 자리에 쓰입니다. 즉 비활성은 요소를 없애지 않으면서도 지금은 손대지 말라고 정중히 선을 긋는 방법입니다.

왜 중요한가

비활성 상태는 사용자가 지금 할 수 없는 일에 시간을 낭비하지 않도록 미리 막아 주는 안내판입니다. 만약 눌리지 않는 버튼이 멀쩡한 버튼과 똑같이 생겼다면, 사용자는 눌러 보고 아무 일도 없어 당황하고, 자기가 뭘 잘못했나 자책하기도 합니다. 반대로 흐릿하게 처리된 버튼은 지금은 때가 아니라는 뜻을 조용히 전해, 헛된 클릭과 혼란을 줄여 줍니다. 다만 비활성에는 함정이 있습니다. 왜 못 쓰는지 이유를 알려 주지 않으면, 사용자는 화면 앞에서 막힌 채 다음 무엇을 해야 할지 몰라 그냥 떠나 버릴 수 있습니다. 그래서 잘 만든 비활성은 단순히 막는 데서 그치지 않고, 무엇을 하면 다시 쓸 수 있는지까지 함께 알려 줍니다. 막는 것과 안내하는 것을 한 몸으로 다룰 때 비로소 비활성은 벽이 아니라 길잡이가 됩니다.

흔한 실수

• 왜 비활성인지 이유를 전혀 알려 주지 않는 것입니다. 흐릿한 버튼만 덩그러니 있으면 사용자는 무엇을 채워야 눌리는지 몰라 막막해합니다. 필수 항목을 채우면 활성화된다는 식의 짧은 안내 한 줄이 큰 차이를 만듭니다.
• 오직 색만 흐리게 해서 구분하는 것입니다. 색으로만 구분하면 색각 이상이 있는 사용자는 활성과 비활성을 알아보기 어려우므로, 명도 차이나 다른 단서도 함께 두어야 합니다.
• 비활성 버튼을 완전히 없애 버리거나 위치를 옮기는 것입니다. 눌러야 할 것이 사라지면 사용자는 애초에 그 기능이 존재했는지조차 모르게 되고, 조건을 갖춘 뒤에도 그 기능을 찾지 못해 헤맵니다.

실무 팁

• 왜 지금 쓸 수 없는지 이유를 함께 알려 주세요. 필수 항목을 채우면 활성화된다는 식의 한 줄 안내나 툴팁만 있어도, 사용자는 답답해하지 않고 다음 할 일을 바로 찾습니다.
• 색만 흐리게 하지 말고 명도까지 뚜렷이 낮춰, 색각 이상이 있는 사용자도 활성과 비활성을 또렷이 구분할 수 있게 하세요. 대비는 접근성의 기본입니다.
• 비활성 요소는 눌러도 반응하지 않게 확실히 막되, 화면에서 지우지는 말고 흐리게 남겨 두세요. 자리를 지켜 두어야 사용자가 그 기능의 존재와 활성화 조건을 인지합니다.

관련 개념