[웹 활용팁] 버튼색상에도 정답이 있다.

웹 페이지에서 "회원에게만 공개되는 내용입니다. 로그인 해주세요." 라는 창이 뜬 경험은 한번 쯤 있을 텐데요. 그럴 때 뜨는 창을 "모달윈도우(Modal Window)"라 부릅니다. 즉, 모달 창은 일반적으로 사용자의 명령을 인식하기 위해서나, 긴급 상황을 알리기 위해 많이 사용됩니다. 이 기능 사용자가 진행하던 작업의 흐름을 흐트러트리기에 버튼 기능은 더욱 중요합니다. 

버튼은 3가지 성격으로 나뉩니다. 

1. positive : 화면의 변화를 주거나 정보를 추가하는 버튼 (전송하기, 더보기) 

2. Neutral: 화면의 변화가 없는 버튼, 화면으로 되돌아가는 버튼 (예를 들면 "취소하기"버튼을 말합니다.)

3. Negative: 삭제, 리셋, 추가정보를 차단하는 버튼

그럼 3가지의 버튼마다 컬러는 어떻게 지정하는 것이 좋은지 알아봅시다. 

positive action button :  높은 명암차이를 이용해 주목성을 높이세요. 

positive 버튼은 높은 명암 차를 이용하며, 블루와 그린, 바이올렛 같은 차가운 색상을 사용합니다. 차가운 계열의 색은 시각적으로 사용자의 눈을 편안하게 합니다. 그리고 텍스트는 흰색을 사용하여 잘 읽히도록 합니다. 이때 positive 옆에 있는 neutral, negative 버튼은 배경을 채우지 않은 외곽선으로만 표현합니다. 이런 형태로 표현한다면 다른 주요 버튼보다 사용자의 주의를 끌지 않아 올바른 선택을 도와줍니다.

Negative action button : positive 버튼 옆은 명암차이를 낮게, neutral의 버튼 옆은 명암차이를 높게 하세요.

negative 버튼은 positive 버튼보다 낮은 명암 차를 이용해 눈에 덜 띄게 합니다. 하지만 만약 negative 버튼이 neutral 버튼 옆에 위치한다면 높은 명암 차를 이용해 표현합니다. 그리고 배경은 레드나, 오렌지, 옐로우 등 따뜻한 색상으로 채워줍니다. 따뜻한 계열의 색은 시각적으로 화면에서 전진하는 듯한 효과를 주므로 사용자가 클릭하기 전에 한번 더 생각하게 합니다.

Neutral action button : 낮은 명암 차를 이용해 다른 기능의 버튼보다 눈에 덜 띄도록 해주세요.

다소 덜 중요한 neutral 버튼은 낮은 명암 차를 주어 다른 주요 버튼과 혼동을 방지합니다. 색을 채우지 않은 배경과 외곽선만 블랙으로 표현하면 충분합니다. 여기서 주의할 점은 외곽선을 색을 옅은 그레이로 할 경우 클릭할 수 없는 비활성화 버튼처럼 보이는 단점이 있습니다. 

이처럼 색에 따라 사용자의 인지 정도의 차이가 생깁니다. 심미적으로 예뻐서 색상을 사용하는 경우도 있지만, 좀 더 색상의 성격을 이해한 UI가 사용자에게 편리함을 가져다줄 수 있습니다.  

출처: uxmovement

by 종달새발자국