이번엔 컴포넌트 위주의 용어를 정리해 나갈 예정이다.
컴포넌트, 엘리먼트 혼용되어 있으나 UI에 사용되는 요소라는 측면에서 간단하게 컴포넌트라고 칭하고 분류하였다.
UI 구조 측면에서 정리한 용어는 지난 1편(https://tamisandbox.tistory.com/3)
에 작성해 두었다.
1. 텍스트박스 (Text Box)
텍스트 입력 필드(Text Input Field), 인풋박스라고도 많이 사용된다.
사용자가 직접 텍스트를 입력하는 박스를 말하며 검색바, ID/PW를 입력바 모두 텍스트박스다.
텍스트박스의 짝꿍처럼 붙어있는 요소로 플레이스홀더(Placeholder)가 있다.
이 곳에 어떤 텍스트를 입력해야 하는지 가이드를 주기 위한 UX적 요소로
텍스트박스에 아무것도 입력하지 않은 상태에서 보이는 연한 가이드 문구가 그것이다.
2. 드롭다운 (Dropdown)
숨어있던 선택 항목이 버튼을 클릭하거나/커서를 올렸을 때 아래로 펼쳐지는 요소다.
펼쳐진 항목 중 특정 항목을 선택하면 기본값이 선택한 항목으로 변경된다.
기본값 대신 placeholder로 대체할 수 있다.
실무에서 드롭다운리스트, 드롭다운메뉴, 드롭다운박스 등으로 말하는 분들도 있다.
3. 콤보박스 (Combo Box)
콤보박스는 드롭다운에서 텍스트 입력 기능이 추가된 것이다.
드롭다운에서 선택할 수도 있지만 직접 입력하여 변경할 수도 있다.
드롭다운과 마찬가지로 기본값 대신 placeholder로 지정해 두고
입력, 선택이 모두 가능하다는 안내문구를 작성해 두어도 된다.
오피스용 툴이나 디자인 툴에서 숫자 값을 변경할 때 확인이 가능하다.
4. 아코디언 (Accordion)
위에서 설명한 2. 드롭다운(Dropdown)과 헷갈려 혼용하는 경우가 있다.
아코디언은 상위 메뉴에 귀속되는 하위 메뉴를 숨기고/펼칠 수 있는 기능으로 이해하면 편하다.
그래서 UI 표현 역시 펼쳐짐과 동시에 아래쪽 메뉴를 밀어내고, 접어서 감추면 다시 밀려간 메뉴가 원복 된다. (드롭다운은 기존 화면 위에 덮어서 펼쳐진다.)
개발자나 디자이너가 작업을 할 때 List라는 레이어가 있다.
개발이나 디자인 시 모듈화, 그룹화를 많이 하는데 그룹안에 있는 내용을 펼쳐보고 다시 감추는 부분들이 아코디언이라고 생각하면 된다.
아코디언은 꼭 메뉴 외에도 용도에 따라 다양하게 사용된다.
제목만 노출하고 콘텐츠 내용을 숨기는 용도, 컨테이너 형태의 옵션 값 중 대표 옵션만 노출하고 상세옵션은 아코디언을 사용해 감추기도 한다.
5. 픽커 (Picker)
대표적으로 Date Picker, Time Picker가 있다.
Date Picker은 날짜를 입력할 때 선택할 수 있도록 달력을 열어주는 경우가 데이트 피커다.
Time Picker은 말그대로 시간을 선택하기 쉽도록 해 준 것으로
특정 숫자를 선택할 때 빠르게 선택할 수 있는 요소다.
6. 스텝퍼 (Stepper)
숫자로 수치를 조정하는(높이, 회전각, 크기 등) 경우 좌/우, 상/하, 플러스/마이너스 등으로 수치값을 정밀하게 조정할 수 있도록 하는 요소다.
다만 이 경우 스텝퍼로 조정가능한 수치 단위를 지정하는 부분도 필요하다.
예를 들어 1씩 증감할지, 0.1씩 증감할지, 10씩 증감할지와 같은 부분이다.
서비스 성격에 맞게 유저를 고려하여 활용하면 된다.
7. 체크박스 (Check Box)
체크박스는 다수의 옵션 중 다중선택 기능을 제공한다.
체크박스와 라디오버튼에 대한 설명은 늘 붙어서 나온다.
둘의 차이점은 쉽게 말해 체크박스는 다중선택, 라디오버튼은 단일선택이 가능하다는 점이다.
신입 면접용 질문이나 정보처리기사 시험에도 둘의 차이점을 자주 묻는다ㅎㅎ
(나는 경력 면접에서도 최근 대기업 PL 면접관으로부터 질문받은 경험이 있다.)
8. 라디오버튼 (Radio Button)
옵션박스 라고도 부른다.
앞서 말했듯 다수의 옵션 중 단일선택을 하는 버튼이다.
9. 토글 (Toggle)
스위치(Swich)라고도 쓰인다. 개인적으로 개발자와 커뮤니케이션할 때 토글 표기를 훨씬 선호했다.
특정 기능을 켜고 끌 때 사용되며, On/Off를 생각하면 기능 이해가 쉽다.
화면 전환에도 사용된다. A화면/B화면을 토글로 개발하여 보여주는 경우도 있다.
10. 스피너 (Spinner)
사용자가 직접 마우스 휠, 드래그, 터치 등으로 원하는 값을 선택할 수 있는 기능이다.
입력과 컨트롤이 혼합되어 있다고 할 수 있다.
11. 다이얼 (Dial)
드래그 혹은 클릭 동작으로 값이나 속성을 조절하는 형태이다.
최근에 자주 사용되지는 않지만, 스피커 볼륨조절 같은 경우 쓰이는 경우가 있다.
12. 슬라이더 (Slider)
값이나 속성을 변형할 수 있는 바(bar) 이다.
버튼을 드래그해 값을 조절한다.
다른 컴포넌트와 달리 사용자가 직관적으로 입력값의 제한 범위를 인지할 수 있는 컨트롤러다.
13. 툴팁 (Tool Tip)
기능에 대한 안내, 설명, 번역용어 등을 마우스호버나 특정 아이콘을 눌렀을 때 노출되는 기능이다.
말풍선 형태로 제작되는 경우가 많다.
마우스 호버 또는 정보 확인 버튼을 눌러 확인할 수 있도록 노출하는 방법이 있고,
튜토리얼 코치마크와 같이 페이지에 접근했을 때 최초에 자동으로 노출되도록 하는 방법이 있다.
14. 배지 (Badge)
배지는 단독으로 사용되지 않고 콘텐츠, 버튼, 아이콘 등에 겹쳐진 형태로 표시된다.
해당 버튼이 Beta 버전임을 알리거나, 사용자 알림에 신규 소식이 있음을 나타내는 표시, 새로운 메일이 온 개수, 신규 콘텐츠의 new 표기 모두 배지라고 할 수 있다.
배지는 다양하게 활용된다.
제한된 환경에서 깔끔하게 디자인을 고려하여 정보를 전달이기 때문이다.
- 카운트 : 숫자를 카운트하거나 총수량을 나타낼 때 사용한다.
새로운 메일, 새로운 알림 건수 표기 같은 예시가 있다.
- 상태 : 신규 콘텐츠, 인기 콘텐츠, 진행 중, 종료 등 상태를 표시한다.
- 로고/타이틀 : 특정 서비스의 Beta버전임을 표기, 서비스 로고를 배지로 만들어 상품이나 콘텐츠에 표기하거나 하는 활용도 있다.
- 점 : 단순한 점 모양 배지를 색상을 달리함으로 정보를 알리는 역할을 하기도 한다.
'UXUI' 카테고리의 다른 글
| UI/UX 용어정리 (1)UI 구조중심 (0) | 2025.12.08 |
|---|