[UIUX] 디자이너랑 컴할 때 쓰이는 UI 용어 정리

베이직한 용어와 비슷한 용어들 비교 위주로 프로젝트 진행 동안 많이 사용했던 용어들을 헷갈리지 않게 정리해봤다!

📂 Section (예: 추천 상품 구역)
 └── 📦 Module (예: 가로 스크롤 카드 리스트)
      └── 📄 Item (예: 개별 상품 카드)
           ├── 이미지
           ├── 제목 텍스트
           ├── 가격
           └── 버튼

 

 

레이아웃 관련 UI 용어

 

그리드 시스템

 

 

헤더
웹 페이지 상단의 메뉴, 검색, 알림 등이 포함된 섹션

 

 

푸터
웹 페이지 하단의 정보, 정책, 약관 등이 정보성 내용이 포함되는 섹션

 

그리드

• 8dp grid
  • 가장 기본적인 앱 그리드 단위; 대부분의 UI 요소에 활용
• 4dp grid
  • 8dp grid 내에서 더 작은 요소들을 정렬할 때 사용되는 dp 기준
  • Bottom navigation bar의 요소들은 4dp 그리드에 맞춰 정렬

---

UI 컴포넌트 용어

드롭다운(Drop down)

사용자가 하나의 옵션을 선택할 수 있도록 목록을 아래로 펼쳐 보여주는 UI 컴포넌트

 

아코디언(Accordion)

여러 섹션 중 일부만 펼쳐져 내용을 보여주고 나머지는 접힌 상태로 유지되는 UI 컴포넌트

 

 

라디오 버튼(Radio button)

여러 선택지 중 하나만 고를 수 있도록 하는 UI 컴포넌트

 

토글(Toggle)

토글은 두 가지 상태(예: 켜기/끄기)를 스위치처럼 전환할 수 있는 UI 컴포넌트

 

 

툴팁(Tool tip)

사용자가 요소에 마우스를 올리거나 클릭했을 때 나타나는, 간단한 보조 설명을 제공하는 UI 컴포넌트

 

 

픽커(Picker)

날짜, 시간, 색상 등 정해진 값 중에서 하나를 선택할 수 있도록 도와주는 UI 컴포

 

 

슬라이더

사용자가 직접 값을 좌우 또는 상하 등 조절할 수 있는 막대형 UI 컴포넌트입니다.

 

프로그레스바

시스템이 작업 진행 상황을 시각적으로 보여주는 막대형 UI 컴포넌트입니다.

 

 

스피너(Spinner)

로딩 중임을 시각적으로 알려주는 회전 애니메이션 형태의 UI 컴포넌트

 

스텝퍼(Stepper)

숫자 값을 +/- 버튼으로 증가하거나 감소시키는 입력용 UI 컴포넌트

 

 

팝업(Pop-up)

기존 화면 위에 새 창처럼 뜨는 UI로, 사용자의 주의를 끌지만 배경과 상호작용 가능한 경우가 많은 UI 컴포넌트

- 방문자가 특정 페이지에 접속할 때 바로 뜨는 창

- 일시적이며, 사용자의 이용 흐름에 관련 X

- ex. 광고, 경고, 안내 팝업

 

모달(Modal)

기존 화면 위에 뜨되(일종의 레이어를 까는 형태) 배경과의 상호작용을 막고, 사용자가 반드시 처리 후에만 닫을 수 있는 UI 

- 방문자가 특정 버튼 또는 링크를 클릭했을 때 뜨는 창

- 모달이 열리기 이전 화면에서 흐름이 연결

- ex. 필터, 글 작성, 댓글 창

 

 

캐러셀(Carousel)

여러 이미지를 좌우로 넘기며 순서대로 볼 수 있는 슬라이드형 UI 컴포넌트

 

 

페이지네이션(Pagenation)

많은 데이터를 여러 페이지로 나눠서, 사용자가 원하는 페이지를 선택해 볼 수 있게 하는 UI 컴포넌트

 

 

GNB(Global Navigation Bar)

사이트 전체에서 공통으로 사용하는 상단 메뉴바로, 홈, 마이페이지, 설정 등 전역 이동에 사용되는 컴포넌트

 

LNB(Local Navigation Bar)

GNB 아래나 화면 왼쪽 등에 위치하며, 선택한 메뉴의 세부 항목을 탐색할 수 있게 도와주는 로컬 메뉴

 

 

햄버거 메뉴(Hamburger Menu)

가로 3줄 아이콘으로, 전체 메뉴를 숨겨두고 열 때 사용하는 버튼

 

벤토 메뉴 (Bento Menu)

다양한 기능/서비스를 한눈에 보여주고 선택 가능한 그리드형 아이콘 버튼

 

도너 메뉴(Döner Menu)

 

줄의 길이가 점점 짧아지는 모양의 아이콘으로, 추가옵션이나 숨겨진 기능의 목록, 필터 그룹 옵션을 제공하는 버튼

 

케밥 메뉴(Kebab Menu)

세로 점 세 개 아이콘으로, 특정 콘텐츠에 대한 추가 작업 옵션을 제공하는 버튼

 

미트볼 메뉴(Meatballs Menu)

⋯ 모양 아이콘으로, 일반적인 추가 기능 호출용 버튼으로, 도너/케밥과 기능적으로 유사한 버튼

 

 

입력 필드(Input Field)

사용자가 텍스트나 값을 직접 입력할 수 있는 인터랙션 영역

 

CTA(Call To Action)

사용자의 행동을 유도하기 위해 눈에 띄게 강조된 버튼이나 링크

 

플레이스 홀더 (Place holder)

입력 필드에 미리 보이는 예시 텍스트로, 입력 방법이나 내용을 안내

 

레이블(Label)

입력 필드나 UI 요소에 대한 정식 이름이나 설명

 

뱃지(Badge)

숫자나 상태 등을 작게 강조해 표시하는 시각적 요소

 

태그(Tag)

항목을 구분하거나 분류할 수 있도록 붙이는 짧은 키워드 형태의 식별 요소

 

 

+) 화면 구분

스플래시 스크린(Splash Screen)

모바일 앱을 접속할때 로딩 되는 시간동안 표시되는 화면

 

 

온보딩 스크린(Onboarding Screen)

사용자가 서비스를 처음 사용할 때, 서비스에 대한 이해를 돕기 위해 제공되는 화면

 

 

 

 

참고자료

https://www.codeit.kr/articles/UIDictionary

https://careerfoundry.com/en/blog/ui-design/ui-element-glossary/