디자인 시스템 버튼 상태 질문입니다.

Question

디자인 시스템 contenent 설명해주시는도중에 버튼의 상태인 normal / hover / press / focus / disabled 상태로 나타내셨고   text Field 상태를 blank / filled / activated / error 로 표현하셨는데요   normal , press, disabled 등 몇가지는 어느정도 알겠는데 hover focus activated 등등 무슨 상태를 표현하는 단어인건지 사전을 찾아봐도 정확히 감이오질않습니다.   normal / hover / press / focus / disabled blank / filled / activated / error 이상태들이 정확히 무슨상태인지 여쭈어 봐도될까요?

에릭 · Answer

안녕하세요. 질문 감사합니다. 알고 있다고 말씀하신 normal / press / disabled 외 다른 상태에 대해서 아래 확인 부탁드립니다. press: 버튼을 손가락으로 (PC에서는 마우스로) 눌렀을 때의 상태입니다. focus: 이 상태는 대부분의 웹사이트를 방문하셨을 때에 키보드로 Tab을 눌렀을 때에 오브젝트에 Focus가 이동이 됩니다. 이렇게 오브젝트에 focus가 된 상태를 말합니다. disabled: 비활성화된 상태입니다. 버튼 또는 텍스트 필드를 임의적으로 비활성화를 시켜야 할 때가 있습니다. 이 상태를 말합니다. blank: 이것은 텍스트 필드에 아무런 텍스트를 입력하기 전 상태를 말합니다. 이 경우 특히 hint text가 있는데 실제 입력된 텍스트가 아닌 만큼 많은 경우 옅은 회색을 사용합니다. filled: 텍스트 필드에 텍스트가 입력된 후의 상태를 말합니다. activated: Text field를 마우스 또는 (모바일의 경우) 손으로 누르게 되었을 때에 활성화된 상태, 즉, 텍스트를 입력할 수 있는 상태입니다. error: 어떤 잘못된 입력을 했을 때를 말합니다. 예를 들어 전화번호를 입력해야 되는데 번호를 입력하는 것이 아니라 알파벳 글자를 입력한다면 사용자로 하여금 잘못된 것을 알려야 하는데요. 이럴 때에 error가 된 상태와 메시지를 전달해야 합니다. 감사합니다.