🌟 디테일의 간격 시리즈! [✏️ 토글 버튼과 액션 버튼의 구분] (👀간단 요약) 📌 토글 버튼과 액션 버튼이 동일하게 보여선 안되는 이유 ✓ 토글 버튼과 액션 버튼에 같은 색상을 적용하는 실수가 잦음 ✓ 모든 토글 버튼이 액션 버튼처럼 보이게 돼서 시각적인 노이즈 증가 ✓ 액션 버튼이 강하게 보이지 않아 눈에 잘 띄지 않게 됨 ✓ 동일한 컬러를 적용하면 사용자가 선택된 상태를 나타내는 토글 버튼을 클릭 가능한 것으로 착각 ✓ 액션 버튼과 동일한 색상을 적용하면 사용자가 실수로 그 버튼을 클릭하게 만들기 쉬움 📌 어떻게 구분해야 할까? : 서로 다른 컬러 활용 ✓ 토글과 액션 버튼은 서로 부딪치지 않는 디자인을 적용해야 ✓ 선택된 토글 버튼은 해당 옵션이 선택된 상태라는 사실만 알려줘야 함 ✓ 토글이나 액션 버튼을 사용할 때 서로 다른 결과가 나오리라는 것을 사용자가 예측 가능 ✓ 시각적인 노이즈를 제거할 수도 있고 사용자가 동작하는 버튼을 쉽게 인지 가능 📌 어떻게 구분해야 할까? : 높이와 깊이 적용 ✓ 색상을 사용하지 않고 토글 버튼의 선택된 상태를 확실히 구분할 수 있음 ✓ 토글 버튼의 명도를 다르게 적용해서 높이와 깊이를 만들 수 있음 ✓ 명도를 밝게 적용한 버튼이 더 가까이 있는 것처럼 느껴짐 ✓ 가까이 있는 것처럼 느껴지는 버튼은 선택된 상태로 느껴짐 📌 어떻게 구분해야 할까? : 텍스트 레이블의 대비 ✓ 색상 대비와 폰트 두께의 차이를 둠으로써 사용자는 한눈에 버튼의 상태를 인지 할 수 있음 ✓ 선택된 상태의 레이블은 더 어두운 그레이와 두꺼운 서체를 사용하는 등 ✓ 레이블의 대비를 버튼의 높이 차이와 같이 적용한다면 상태의 차이를 좀 더 명확하게 전달 가능 📌 요약 ✓ 토글 버튼과 액션 버튼은 구분이 되도록 보여야 한다. ✓ 동일한 디자인을 적용하면 사용자가 버튼의 용도를 혼동할 수 있다. ✓ 색상을 다르게 할 수 없으면 높이와 깊이의 차이를 이용하라. ✓ 어두운 명도는 더 멀리 있는 것처럼 보이고, 밝은 명도는 가까이 있는 것처럼 보인다. ✓ 가장 가까이 있는 것처럼 보이는 버튼이 활성화된 버튼처럼 보인다. ✓ 위에 겹쳐져 있는 것처럼 보이면 높이와 깊이의 차이가 더 잘 느껴진다. ✓ 배경 버튼보다 모서리와 코너를 안쪽으로 집어넣으면 위에 놓여있는 것처럼 보인다. ✓ 더 빠른 인지를 위해 레이블 텍스트에 대비를 주어라. (👋중요한 이유가 뭔가요?) 토글이란 하나의 설정 값에서 다른 값으로 바꿔주는 역할을 합니다. 중요한 건 두 가지 상태밖에는 없는 상황에서 쓰인다는 점인데요. 대표적으로 알림을 켜고 끄는 경우가 있습니다. 문제는 이 토글이 둘 중 하나를 선택하거나 값을 변경하는 행동으로 보여지지 않고 다음 화면으로 이동하거나 다른 행동을 할 수 있는 것으로 보여지는 때 인데요. 이런 상황을 어떻게 벗어날 수 있는지 자세히 정리한 글이라 코멘트를 작성하게 되었습니다. 정해진 목적에 따라 활용하는 것이 첫번째임을 잊지 않기 위한 마음으로요!