[아티클] 필수 UI 용어

 

1. 주제

 

꼭 알아 둬야 할 필수 UI 용어 20가지

꼭 알아야 둬야 할 필수 UI 용어 20가지

 

2. 내용 요약

 

레이아웃 관련 UI 요소

요소	설명
헤더	웹 상단 영역, 로고/메뉴/검색 포함
푸터	웹 하단 영역, 회사 정보/약관/정책 등 포함

 

 

메뉴 관련 UI 요소

요소	설명
GNB	전체 페이지의 공통 메인 메뉴, 최상단에 위치
LNB	서브 메뉴, 카테고리별 하위 항목 제공
햄버거 메뉴	주로 모바일 메뉴 아이콘 (☰), 클릭 시 메뉴 펼쳐짐
아코디언	리스트 접고 펼치기 기능
브레드크럼	현재 위치를 경로로 표시 (예: 홈 > 상품 > 전자기기)

 

 

콘텐츠 표시 관련 UI 요소

요소	설명
팝업	화면 위에 뜨는 새 창, 사용자 주의 집중
모달	팝업과 비슷, 상위 레이어 띄우는 방식, 최근에는 팝업 대신 모달을 사용하는 추세
카드	사각형 박스 형태로 콘텐츠 구성
캐러셀	이미지/콘텐츠 슬라이드 형태로 순환
페이지네이션	콘텐츠를 여러 페이지로 분할, 하단에 이동 버튼
툴팁	마우스 오버 시 뜨는 안내 문구, 말풍선 형태

 

 

선택 관련 UI 요소

요소	설명
드롭다운 리스트	펼치기 버튼으로 다중 옵션 중 선택
라디오 버튼	하나만 선택 가능
체크 박스	다중 선택 가능
토글	on/off 등 2가지 상태 전환
슬라이더	범위 내 값 조절 가능

 

 

기타 UI 요소

요소	설명
입력 필드	사용자 텍스트 입력 공간, 유효성 검사 가능
CTA	클릭 유도 버튼

 

3. 코멘트

a. 좋았던 점

- 이름은 몰랐지만 자주 봤던 UI 요소들이 어떤 전문 용어로 불리는지 알게 되어서 좋았다

- 각 요소를 설명할 때 적절한 화면 예시로 용어를 함께 보여줘서 이해하는데 도움이 되었다. 

 

b. 아쉬웠던 점

- 아직 익숙하지 않은 용어나 기능들이 많아서 처음에는 조금 어렵게 느껴졌다.

 

c. 알게 된 개념

- 팝업과 모달의 차이점을 알게 되었다. 

(팝업은 새로운 브라우저 창, 모달은 같은 화면 위에 뜨는 창)

- 콘텐츠를 표시하는 방식이 다양하다는 것을 알게 되었다. 

(카드, 캐러셀, 페이지네이션 등)