[아티클] 필수 UI 용어

2025. 7. 3. 09:43
728x90

 

1. 주제

 

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

 

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

웹 및 앱 개발에 관심이 있다면 UX/UI 관련 용어와 개념들을 필수로 익혀야 합니다. 프론트엔드 개발자, UI 디자이너뿐만 아니라 기획자도 유저 인터페이스 구성 요소에 대한 이해가 바탕이 되어

www.codeit.kr

 

2. 내용 요약

 

레이아웃 관련 UI 요소

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

 

 

메뉴 관련 UI 요소

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

 

 

콘텐츠 표시 관련 UI 요소

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

 

 

선택 관련 UI 요소

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

 

 

기타 UI 요소

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

 

3. 코멘트


a. 좋았던 점

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

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

 

b. 아쉬웠던 점

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

 

c. 알게 된 개념

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

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

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

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

 

728x90

BELATED ARTICLES

more