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