디스에이블드(비활성화) 버튼 디자인

비활성화 버튼을 디자인 해보자!

한윤석 (두블링 DOBLING, UI/UX 디자이너)

2년차 주니어 디자이너에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 제가 경험한 디자인 인사이트를 업로드 합니다.

오늘은 비활성화 버튼에 대하여 알아보겠습니다!!

어떻게 디스에이블드 버튼을 디자인하는게 좋을까요??

디스에이블드(비활성화) 버튼 디자인

비활성화 버튼

기존 비활성화 버튼

대부분 기존 비활성화 버튼 아래 이미지 처럼 회색으로 디스에이블드 되어 있습니다.

UI 라이브러리들을 보아도 비활성화는 회색으로 디자인되는 경우가 굉장히 많습니다.

문제점

그러나 비활성화 버튼의 문제점은 디스에이블드에서는 회색이고 에이블드에서는 메인 색상이 노출되기 때문에 두 색상의 차이가 커서 자연스럽지 않고 어색하다는 점이 있습니다.

해결방법

이것을 해결하기 위해서는 버튼을 회색으로 하는 것보다 오퍼시티(투명도)를 낮춰서 기존 컬러를 희미하게 보이게 하는 방법이 있습니다. 이렇게 하면 색상이 비슷하여 훨씬 자연스럽고 인식하기도 좋습니다!

회색이 아니라 오퍼시티 조절로 비활성화 버튼을 디자인 하는 이유

1. 활성화 버튼 색상을 유추할 수 있어 자연스럽다.

비활성화 버튼이 회색이 아닌 기존 색상을 머금고 있으니 활성화 되었을때 색상을 유추해볼 수 있어 사용자가 훨씬 자연스럽게 느낍니다.

2. 회색 비활성활 버튼은 눈에 너무 띈다.

비활성화 버튼이라는게 그 목적에 맞게 최대한 눈에 띄지 않고 희미하게 보여하는데 이상하게되 회색으로 하게 되면 비활성화인 것을 인지할 수 있기는 하지만 오퍼시티를 조절하는 것에 비해서 눈에 너무 띈다는 단점이 있습니다.

3. 회색버튼을 비활성화가 아니라 세컨더리 버튼으로도 많이 활용합니다.

회색버튼을 비활성화가 아니라 세컨더리 버튼(프라이머리가 메인 컬러)으로도 많이 활용하기에 비활성화도 회색으로 두기에는 어려움이 생깁니다.

비활성화 버튼 디자인 꿀팁

오퍼시티

오퍼시티를 20~30% 사이도 두는게 가장 좋습니다. 시각보정을 통해 직접 확인해보며 비활성화 버튼을 만들어 보시죠!!!