블로그 · 디자인
버튼 상태를 몇 개로 나눌지 정하는 기준
상태를 많이 만들수록 화면은 친절해 보이지만 관리할 것도 늘어납니다. CoUI에서 버튼 상태를 정할 때 쓰는 기준을 정리했습니다.
시안 확인용 예시 글입니다. 실제 게시 전 내용을 검토합니다.
01
기본 네 가지에서 시작합니다
모든 버튼은 네 가지 상태를 가집니다. 키보드 포커스는 따로 세지 않고, 어느 상태에서든 위에 겹쳐 보이는 표시로 둡니다.
- 기본 눌러도 되는 상태
- 호버 포인터를 올렸을 때
- 누름 누르고 있는 동안
- 비활성 지금은 누를 수 없을 때
02
사용자가 구분해야 할 때만 늘립니다
로딩 상태는 결제나 제출처럼 응답이 늦을 수 있는 버튼에만 둡니다. 선택된 상태는 토글이나 필터처럼 눌린 결과가 화면에 남을 때만 만듭니다.
03
색만으로 구분하지 않습니다
비활성은 색과 함께 흐린 테두리와 보조 문구로 알리고, 로딩은 문구나 아이콘이 함께 바뀝니다. 라이트와 다크 두 모드에서 모든 상태의 대비를 같이 확인합니다.
다른 글
전체 글 보기
함께 만들 사람을 찾습니다
일하는 방식과 복지는 채용 페이지에서 볼 수 있습니다.
채용 보기