[아티클] 필수 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
'UXUI > 아티클' 카테고리의 다른 글
[아티클] 사용자의 결정을 이끄는 UX 심리학 법칙 (3) | 2025.07.11 |
---|---|
[아티클] 삶의 질을 높여주는 10가지 UX 사례 (0) | 2025.07.10 |
[아티클] 멘탈모델과 러닝커브를 잊지 마라 (0) | 2025.07.09 |
[아티클] 서비스 기획 단계부터 UX 디자이너가 필요한 이유 (0) | 2025.07.08 |
[아티클] 디지털 피로도 해소를 위한 UX 디자인 (1) | 2025.07.04 |