[노먼닐슨 그룹] 이거 뭐라고 불러요: UI 용어 사전 中

디자이너라면 꼭 알아야 할 UI 용어 사전

 

21. Icon (아이콘)

• 화면에서 특정 아이템이나, 액션, 아이디어를 시각적으로 표현한 작은 그래픽 요소
• 아이템을 통해 특정 사용 가능한 동작이나 도구를 표시 (eg. 휴지통 아이콘 → 삭제, 펜 아이콘 → 수정)
• 사용자가 의미를 파악하도록 텍스트와 함께 사용하는 것이 권장됨

 

22. Input Control (인풋 컨트롤)

• 사용자가 시스템에 정보를 입력할 수 있는 모든 UI 요소
• 인풋 박스, 체크 박스, 라디오 버튼, 슬라이더, 토글, 데이트 픽커 등이 모두 이에 해당

 

23. Input Stepper (인풋 스테퍼)

• 미리 정의된 작은 단위로 점진적으로 숫자를 증가/감소하는데 사용하는 입력 컨트롤
• 일반적으로 숫자 양쪽에 배치된 두개의 버튼으로 구성 (-, + 또는 위쪽 화살표와 아래쪽 화살표)
• 몇몇은 숫자를 직접 입력할 수 있도록 텍스트 인풋을 같이 넣어 구성하기도 함

cf. 인풋 스테퍼 기본 동작 가이드

Design Guidelines for Input Steppers

 

24. Knob (노브)

• 라디오나 앰프의 볼륨 조절 장치같은 물리적 요소 = 노트에서 영감을 받은 UI 요소
• 원 모양의 UI 안에서 제어 값을 넣을 수 있을 때 사용하는 범위 제어 UI

 

25. Lightbox (라이트 박스)

• 오버레이의 한 형태: 전체 화면을 차지하지않는 오버레이
• 이미지나 비디오 등 미디어 콘텐츠를 강조하여 표시할 때 사용
• 배경을 어둡게 처리하고 중앙에 콘텐츠를 띄워 사용자 주의를 집중시키는 방식으로 구현
• cf. 오버레이 vs 라이트박스

정의	페이지 위 겹쳐지는 콘텐츠 박스	오버레이의 한 형태로, 미디어 콘텐츠를 강조하여 표시
목적	다양한 정보 표시, 입력 폼, 알림 등	이미지, 비디오 등 미디어 콘텐츠 확대 표시
배경 처리	흐리게 하거나 비활성화	어둡게 처리
사용자 상호작용	다양한 형태	콘텐츠 보기 및 닫기

 

26. Link (링크)

• 페이지 내에 한 위치에서 다른 위치나 다른 페이지나 또 완전히 다른 사이트로 이동할 수 있게하는 UI 요소
• 클릭 가능성을 나타내기위해 색상과 밑줄이 있는 눈에 띄는 형식으로 표시됨

27. Listbox (리스트박스)

• 선택 가능한 항목을 컨테이너 안에 표시하는 입력 컨트롤의 한 유형
• 박스 안을 스크롤하면 모든 옵션을 볼 수 있고, 세로로 한개씩 옵션을 표시함
• 선택할 수 있는 옵션 수에 따라 1개 또는 복수 선택이 가능
• 항상 열린 상태로 표시되고 복수 선택이 되는 게 드롭다운 박스와 가장 큰 차이
• cf. 리스트박스 vs 드롭다운 

  옵션 표시 방식	항상 표시	클릭 시 표시
  선택 가능 수	단일 또는 복수 가능	단일 선택만 가능
  공간 활용	더 많은 공간 필요	공간 절약형
  사용자 상호작용	키보드 및 마우스 지원, 복잡한 인터렉션 가능	주로 마우스 클릭으로 선택
  사용 예시	필터링 옵션, 다중 선택 리스트 등	폼 입력, 설정 메뉴 등

28. Megamenu (메가 메뉴)

• 핸들 아래에 나타나는 네모낳고 커다란 메뉴
• 주로 메인 네비게이션 메뉴로 사용됨

29. Menu (메뉴)

• 옵션 및 액션의 모음으로, 작업을 수행하거나 탐색하는데 사용되는 UI
• 메뉴 바에 모든 항목들이 다 보이거나 혹은 확장할 수 있음

 

30. Menu Bar (메뉴 바)

• 항목들이 항상 가로 또는 세로 형태로 표시되는 메뉴 유형
• 툴바나 네비게이션 바가 대표적인 예

 

31. Nevigation Bar (네비게이션 바)

• 바 형태의 탐색 메뉴 유형
• 가장 일반적인 탐색 UI 중 하나

 

32. Nevigation Menu (네비게이션 메뉴)

• 탐색 옵션 제공하는 메뉴
• 확장 가능함

 

33. Overlay (오버레이)

• 페이지 위에 콘텐츠를 표시하는데 사용하는 UI
• 모달 또는 비모달 방식으로 전체 화면 또는 일부 화면 덮기가 가능
• 오버레이가 페이지 전체를 차지하면 일반 페이지와 혼동되기 쉽기때문에 주의해야함
• cf. 오버레이 VS 팝업
  

  기본 정의	현재 화면 위에 반투명하거나 불투명한 레이어를 덧씌우는 UI 구성 요소	새 브라우저 창 또는 브라우저 내부의 작은 창
  화면 내부 여부	현재 페이지 내에서 작동 (DOM 내부)	브라우저 밖의 별도 창일 수 있음 (window.open 등)
  사용 의도	집중 유도, 흐름 차단, 중요 정보 표시 (예: 모달)	알림, 광고, 외부 링크, 경고 등 비주기적 정보 전달
  컨텍스트 유지	흐름 일부 유지됨 (반투명 배경 등)	흐름을 강제로 중단하거나 방해할 수 있음
  종류 예시	라이트박스, 모달, 사이드 슬라이드 패널	광고 팝업, 브라우저 경고창(alert), 채팅툴 창

 

34. Picker (피커)

• 여러 옵션에서 단일 값을 선택할 수 있게 하는 UI 요소
• 일부 픽커는 데이터 유형에 특화되어있음

 

35. Pie Menu (파이 메뉴)

• 모든 메뉴 항목이 핸들을 중심으로 원 안에 배치되는 확장형 메뉴
• 모든 항목이 핸들과 거의 같은 거리에 위치해 항목에 각각 도달하는 시간이 동일함

 

36. Popup, Popover (팝업, 팝오버)

• 화면 전체를 차지하지 않는 오버레이
• apple에서는 팝오버라고 사용함
• cf. 오버레이 vs 모달 vs 팝업 

  구분	오버레이	모달	팝업
  기본 역할	화면 위 표시되는 레이어 전반을 통칭, 모달 및 라이트박스의 배경 scrim area 가 대표적 형태	오버레이 위 콘텐츠 박스 자체	브라우저 외부 또는 내부의 독립된 UI 컴포넌트로 별도 창 형태로 뜨는 알림 또는 정보창
  사용 맥락	모달 또는 라이트박스에 보조로 사용	정보 입력, 확인, 경고 등 집중 요구 시	흐름을 끊고 사용자를 전환시키거나 메시지를 전달하는 용도
  UI 위치	전체 화면 또는 컨테이너 덮음	오버레이 위 중앙 또는 특정 위치	브라우저 외부 또는 부유형 내부 창
  동작 특징	단독 사용은 드묾	모달 닫기 전까지 다른 작업 할 수 없음	별도 포커스, 배경과 무관함
  예시	scrim area	“삭제하시겠습니까?" 확인 창	광고 팝업, 인증을 위한 새 창

 

37. Popup Tip, Tool Tip (팝업 팁, 툴팁)

• 사용자가 i 또는 ? 아이콘 탭하면 나타나는 간략하고 유익한 메시지를 표시하는 작은 오버레이 (흐름을 차단하기에 모달은 아님)
• 배경 인터렉션 가능, 팝업 팁 외 영역 자유롭게 터치 가능
• 문맥적인 정보 보충, 툴팁 대체용으로 사용

 

 

📍 노먼닐슨 그룹 UI 용어 사전을 한국어로 조금 더 쉽게 다듬어 번역했습니다.
출처/원문: https://www.nngroup.com/articles/ui-elements-glossary