[UX원칙#21] 버튼 색상 적용 UX 원칙 가이드라인

버튼 색상 적용 UX 원칙 가이드라인 

앤서니의 [버튼 색상 적용 UX 원칙 가이드라인] 소개하고자 합니다. 

실수로 잘못된 버튼을 클릭해본 경험이 있으신가요? 

사용자가 올바른 방향으로 안내받지 못할 경우, 모달 윈도에서 잘못된 판단을 내리기 쉽습니다. 그럼에도 불구하고 많은 모달은 서로 다른 액션을 명확히 구분하지 않으면서 사용자에게 행동을 유도합니다.

어떤 행동을 취해야 할지 명확하게 보여주지 않으면 사용자는 확신을 가지지 못하게 되고, 이는 과업 수행의 속도를 늦출 수 있습니다. 더욱이, 사용자가 잘못된 행동을 선택하게 되어 과업에서 이탈하는 상황이 발생할 수도 있습니다. 따라서, 서로 다른 버튼 간의 명확한 색상 대비는 사용자가 정확한 버튼을 선택하는 데 큰 도움이 됩니다. 디자인에서의 명확성과 직관성은 사용자의 경험에 매우 중요한 요소입니다. 

1. 긍정적, 중립적, 부정적 행동

모든 버튼은 다음 세 가지 행동(actions) 유형 중 하나로 분류됩니다.

모달 윈도에는 보통 세 가지 종류의 행동이 함께 나타납니다. 사용자가 이 서로 다른 행동을 쉽게 구분할 수 있도록 하려면, 버튼 사이의 색상 대비를 활용해야 합니다. 이렇게 하면 사용자가 어떤 버튼이 어떤 행동을 의미하는지 더 잘 이해할 수 있습니다.

2. 긍정적 행동에는 가장 높은 대비 효과를

(1) 긍정적인 행동 버튼의 중요성

긍정적인 행동은 사용자가 작업을 완료하는 데 필수적이므로, 사용자에게 명확히 인식될 수 있어야 합니다. 이를 위해 가장 높은 색상 대비를 주어 쉽게 선택할 수 있도록 하는 것이 중요합니다. 이는 사용자가 실수 없이 올바른 선택을 할 수 있도록 도와줍니다.

(2) 중립적 및 부정적 행동 버튼의 색상 대비

중립적이거나 부정적인 행동 버튼은 상대적으로 낮은 색상 대비를 제공해야 합니다. 이렇게 하면 사용자가 긍정적인 행동과 구분할 수 있도록 하여, 실수로 부정적인 행동을 선택하는 것을 방지합니다. 이 원칙은 사용자가 각 버튼의 의도를 명확히 이해하도록 돕습니다.

(3) 차가운 배경색과 흰색 텍스트

긍정적인 행동 버튼에 차가운 배경색(파란색, 녹색, 보라색 등)과 흰색 텍스트를 사용하는 이유는, 차가운 색상이 시각적으로 편안함을 주고 버튼이 과하게 튀지 않도록 하기 때문입니다. 흰색 텍스트는 시각적으로 더 잘 보이므로, 사용자가 버튼을 쉽게 인식하고 클릭할 가능성을 높입니다.

(4) 부정적 행동 버튼의 배경색 사용 금지

중립적 또는 부정적 행동 버튼에 배경색을 사용하지 않는 이유는, 배경색이 추가되면 색상 대비가 비슷해져 버튼 간의 구분이 어려워질 수 있기 때문입니다. 대신 두꺼운 테두리를 사용하면, 버튼이 배경과 잘 어우러지면서도 긍정적인 행동 버튼과의 경쟁을 피할 수 있습니다. 이는 사용자에게 혼란을 주지 않고, 주의력을 분산시키지 않게 됩니다. 

3. 부정적 행동에 가장 높은 대비 효과를 줘야 하는 경우

(1) 부정적인 행동 버튼의 대비 효과
부정적인 행동 버튼이 긍정적인 행동 버튼보다 높은 대비 효과를 가져서는 안 되는 이유는, 긍정적인 행동이 자주 사용되고 안전한 선택이기 때문입니다. 사용자가 부정적인 행동을 긍정적인 행동으로 착각하지 않도록 하기 위해서 입니다. 이를 통해 사용자가 올바른 결정을 내릴 수 있도록 돕습니다.

(2) 부정적인 행동과 중립적인 행동의 조합
부정적인 행동 버튼이 중립적인 행동 버튼과 함께 있을 경우, 부정적인 행동 버튼에 더 높은 대비 효과를 주는 것이 필요합니다. 이렇게 함으로써 사용자가 부정적인 선택을 쉽게 인식하고 주의할 수 있게 만듭니다.

(3) 따뜻한 색상의 사용
부정적인 행동 버튼에 따뜻한 색상을 배경으로 사용하는 것은 해당 버튼이 눈에 잘 띄게 만들어 사용자가 클릭하기 전에 다시 한 번 생각하게 만드는 효과를 줍니다. 빨강, 오렌지, 노란색 같은 색상은 시각적으로 강렬하여 사용자의 주의를 끌고, 이를 통해 부정적인 행동에 대한 경각심을 높이는 역할을 합니다.

4. 중립적 행동에는 가장 낮은 대비 효과를

(1) 중립적 행동의 존재

모달 윈도에서 중립적 행동 버튼은 항상 긍정적 또는 부정적 행동과 함께 나타납니다. 이는 사용자가 선택할 수 있는 행동의 범위를 제공하기 위함입니다. 중립적 행동은 긍정적이나 부정적인 선택이 아닌, 추가적인 옵션을 제시하는 역할을 합니다.

(2) 가장 낮은 대비 효과

중립적 행동 버튼에는 가장 낮은 대비 효과를 주어야 합니다. 이는 사용자가 중립적 행동을 긍정적이나 부정적인 행동과 혼동하지 않도록 하기 위함입니다. 버튼 간의 경쟁을 피하고, 중립적인 선택이 부각되지 않도록 하여 사용자가 필요한 행동을 쉽게 인식하게 합니다.

(3) 검은색 두꺼운 테두리

중립적 행동 버튼에 검은색 두꺼운 테두리만 사용하면, 사용자는 이 버튼이 중립적 행동을 나타낸다는 것을 쉽게 이해할 수 있습니다. 배경색이 없으면 긍정적이나 부정적 행동 버튼과의 시각적 혼란을 줄일 수 있습니다.

(4) 회색 테두리와 텍스트 사용 금지

버튼의 테두리와 텍스트를 회색으로 만들면, 사용자가 이를 사용할 수 없는 비활성 버튼으로 오해할 수 있습니다. 이는 사용자 경험을 저해할 수 있으므로 피해야 합니다. 대신, 버튼이 전체 배경색과 대비되도록 디자인하여 활성화 상태임을 명확히 보여줘야 합니다. 이는 사용자가 버튼을 클릭할 수 있다는 것을 직관적으로 이해하도록 돕습니다.

결론

색상 대비가 명확하게 보인다면, 긍정적, 중립적, 부정적 행동이 공존할 수 있습니다. 대비가 더욱 뚜렷할수록 사용자는 Task를 더 빠르게 완료할 수 있습니다.

색상은 사용자 인터페이스에서 중요한 역할을 하며, 단순한 심미성을 넘어서 사용자의 행동을 안내하는 도구로서의 기능을 수행합니다.