필수 UI 용어 20가지

레이아웃 관련 UI 요소

• 헤더(Header)

  웹페이지의 상단 영역을 의미합니다. 주로 사이트 로고와 메인 메뉴, 검색 버튼 등이 포함되죠.

  네이버 쇼핑

• 푸터(Footer)

  웹페이지의 하단 영역입니다. 자세한 업체 정보, 개인정보 정책, 이용약관, 소셜 미디어 링크 등이 포함됩니다.

  네이버 쇼핑

메뉴 관련 UI 요소

• GNB(Global Navigation Bar)

  GNB는 웹사이트 내의 모든 페이지에서 동일하게 적용되는 메인 메뉴입니다. 주로 웹사이트 최상단에 위치하고, 주요 메뉴로 빠르게 이동할 수 있는 링크를 포함하고 있습니다.

  네이버 공식 홈페이지

• LNB(Local Navigation Bar)

  LNB는 GNB 메인 메뉴를 누르거나 마우스를 올려놨을 때 나타나는 서브 메뉴를 의미합니다. 최상위 카테고리의 하위 메뉴로 이동할 수 있죠.

  

  네이버 공식 홈페이지

• 햄버거 메뉴(Hamburger Menu)

  마치 햄버거처럼 세 개의 가로선이 쌓여있는 모양의 메뉴 버튼입니다. 상단 사이드에 위치하여 여러 가지 기능을 펼쳐서 볼 수 있도록 해주는데요. 주로 모바일 앱에서 사용되고, 웹사이트에서도 종종 사용되는 경우를 볼 수 있습니다.

  네이버 포털 메인

• 아코디언(Accordion)

  리스트를 펼쳤다가 접을 수 있는 요소입니다. 세부 항목들을 제한된 공간에 담아야 할 때, 해당 요소를 사용하면 효과적으로 깔끔한 레이아웃을 구성할 수 있죠.

  코드잇 강의실

• 브레드크럼(Breadcrumb)

  사용자가 사이트 내에서 구조상 어디에 있는지 알려주는 UI 요소입니다. '빵 부스러기'라는 용어의 뜻처럼, 사용자가 지나온 경로를 포함하여 현재 위치를 직관적으로 보여주는데요. 지나온 패스를 클릭하여 이전 위치로 돌아갈 수도 있어 더욱 편리한 UX를 제공할 수 있습니다.

  코드잇 커뮤니티

콘텐츠 표시 관련 UI 요소

• 팝업(Pop-up)

  팝업은 기존 화면 위에 나타나는 또 다른 브라우저 페이지입니다. 주로 사용자의 이목을 집중시키고 중요한 정보를 전달할 때 사용하죠. 인터넷에서 '팝업 차단'과 같은 문구를 자주 보셨을 텐데요. 이처럼 팝업은 브라우저 옵션을 통해 열리지 않도록 강제할 수 있습니다.

  메가스터디

• 모달(Modal)

  팝업과 같은 목적으로 사용되는 모달은 기존 화면 위에 띄워지는 추가적인 레이어를 의미합니다. 새로운 웹페이지가 아닌, 같은 브라우저 페이지 내에서 상위 레이어를 띄우는 방식이죠. 모달은 브라우저 옵션과 상관없이 동작하기 때문에 최근에는 팝업 대신 모달을 주로 사용하는 추세입니다.

  코드잇

• 카드(Card)

  직사각형 카드 형태의 요소 안에 내용을 담는 것을 의미합니다. 카드형 UI를 사용하면 다양한 종류의 콘텐츠를 깔끔하고 정돈된 방식으로 보여줄 수 있습니다.

  코드잇 수업 탐색

• 캐러셀(Carousel)

  캐러셀의 사전적 의미는 '회전목마'입니다. 즉, 하나의 섹션에서 여러 콘텐츠가 순환되며 노출되는 UI 요소인데요. 주로 슬라이드 형태로 이미지 혹은 영상이 일정한 간격으로 나열되어 보입니다.

  

  SSG닷컴

• 페이지네이션(Pagenation)

  콘텐츠를 여러 페이지로 나누어 전후 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소입니다. 보통 페이지 하단에 위치하고, 리스트 요소가 많아 상하 스크롤이 길어질 경우 페이지네이션으로 표현합니다.

  코드잇 수업 탐색

• 툴팁(Tooltip)

  사용자에게 어떤 요소에 대해 간단한 부연 설명이나 가이드를 제공할 때 사용합니다. 특정 요소를 클릭하거나 그 위에 마우스 커서를 올려놓으면 주로 말풍선 형태로 등장합니다.

  

  코드잇 토픽

선택 관련 UI 요소

• 드롭 다운 리스트(Drop Down List)

  드롭 다운 리스트는 버튼을 클릭했을 때 여러 선택지가 펼쳐지고 그중 하나의 옵션을 선택하도록 하는 요소입니다. 여러 선택지를 항상 펼쳐놓지 않고 간결한 UI를 구성할 수 있습니다.

  

  Google Material Design

• 라디오 버튼(Radio Button)

  여러 선택지 중 하나의 옵션만 선택하도록 할 때 사용하는 요소입니다. 주로 원 안에 색이 칠해지는 형태로 표현되는 것이 특징이죠.

  

  Google Material Design

• 체크박스(Check Box)

  라디오 버튼과 달리, 체크박스는 여러 옵션을 다중 선택할 수 있도록 하는 요소입니다. 주로 네모박스 안에 체크표시가 있는 형태로 표현됩니다.

  

  Google Material Design

• 토글(Toggle)

  서로 반대되는 두 가지 상태 중 하나를 선택할 때 사용하는 요소로, '스위치(Switch)' 개념과 유사한데요. '켜기/끄기', '활성/비활성', '라이트 모드/다크 모드'와 같은 항목에 적용할 수 있습니다.

  

  Google Material Design

• 슬라이더(Slider)

  사용자가 제한된 범위 내에서 값을 선택할 수 있게 하는 요소입니다. 가로 방향의 막대 위에서 사용자가 아이콘을 선택하여 움직이며 특정 값을 지정할 수 있도록 하는데요. 볼륨, 밝기 조절 기능에서 자주 볼 수 있죠.

  

  Google Material Design

기타 UI 요소

• 입력 필드(Input Field)

  사용자가 키보드를 사용해 직접 텍스트를 입력하고 편집할 수 있는 섹션입니다. 검색창, 로그인 창, 회원가입 창 등에서 자주 보이는 요소이죠. 필수 내용을 입력하지 않거나 정해진 양식에 어긋나게 입력한 경우 '유효성 검사'를 통해 오류 상태를 표시할 수도 있습니다.

  

  코드잇 로그인

• CTA(Call To Action)

  사용자가 방문, 가입, 구매 등의 액션을 취할 수 있도록 클릭을 유도하는 버튼을 의미합니다. 고객 행동 및 판매 촉진과 밀접한 UI 요소이기 때문에, 마케팅 측면에서 중요하게 다뤄집니다.

  

  쿠팡플레이

UX/UI 디자인 역량, 효과적으로 기르는 방법?

좋은 UX를 제공하는 서비스를 개발하기 위해서는, 여러 UI 용어를 아는 것뿐만 아니라 UI 디자인 원칙을 배우고 디자이너의 시각을 갖추는 것도 중요합니다. UI 디자인에 대한 감각을 기르고 싶다면, 코드잇의 Figma로 시작하는 UI 디자인 로드맵을 들어보세요. 현업에서 많이 사용되는 디자인 툴 Figma 사용법을 익히고 회원가입 및 구독 페이지, 숙박 서비스 페이지를 직접 만들며 UI 디자인과 친해질 수 있어요.

Figma로 시작하는 UI 디자인 로드맵으로 시작하기 >>