[UI 용어 정리] 텍스트 필드/박스/로딩 관련

텍스트 필드 관련 부분

 

텍스트 필드
- ​칸 안에 글자를 입력하는 형태
- 텍스트 박스, 인풋 박스, 입력 피드, 텍스트 인풋 박스, 텍스트 에어리어라고도 불림

 

* Text Area [텍스트 에리어]

: 2줄 이상의 긴 텍스트를 입력해야하는 (내용입력, 문의사항입력 등) 경우에 사용되는 큰 텍스트 입력 영역

출처 : https://blog.naver.com/dldlfduek/222549009210

​플레이스 홀더
- 입력 필드안에 짧은 구문으로 어떻게 입력하는지를 안내하는 정보
- 실제 문자를 입력하면 사라짐

 

레이블

- 입력 필드 상단이나 좌측에 입력할 정보가 무엇인지 설명해주는 문구

출처 : https://blog.naver.com/dldlfduek/222549009210

 

 

로딩 관련

Progress Indicator (프로그래스 인디케이터)
- 컨텐츠가 로딩되고 있음을 시각적으로 알리는 컨트롤
- 크게 로딩이 완료되는 시기를 예측 가능한 타입과 불가능한 두 타입으로 나눌 수 있음

 

​Throbber (트로버)
- 로딩이 완료되는 시기를 예측하기 어려운 경우 제공되는 컨트롤

- 스피닝 휠 (spinning wheel), 스피너스, 로딩아이콘, 로더, 로딩 인디케이터, 액티브 인디케이터 라고 불리기도 함

출처 : https://blog.naver.com/dldlfduek/222549009210

프로그래스 인디케이터 (Progress indicator)
- 시간이 걸리는 작업에서의 진행상황을 보여줄때 사용
- 프로그레스 바와 진행바, 상태바라고 불림

출처 : https://blog.naver.com/dldlfduek/222549009210

 

 

박스 관련

콤보 박스

- 드롭다운 + 텍스트 인풋 박스 + 리스트 박스가 통합된 형태

- 텍스트를 입력하면 관련 내용이 아래로 펼쳐짐

(좌) 출처 : https://simsim2.tistory.com/15    (우) 출처 : https://oriyong.tistory.com/57

 

툴팁(Tooltip)

- 사용자가 마우스를 올렸을 때 추가로 표시되는 정보

- 보통은 마우스 오버 시 1~2초 후에 표시

- 버튼의 용도를 확인할 수 있게 도와줌 (이미지를 버튼으로 사용했을때 등)

출처 : https://oriyong.tistory.com/57

 

스피너(Spinner)

- 숫자를 입력할 때 자주 사용

- 입력창 + 위아래 버튼

출처 : https://oriyong.tistory.com/57

 

기타

딤드 (Dimmed)
- 라이트 박스 때 배경을 어둡게 처리하는 것

출처 : https://blog.naver.com/dldlfduek/222549009210

 

트리메뉴

- 목록이 계층 구조를 가지고 있을 경우 활용

출처 : https://oriyong.tistory.com/57