웹사이트를 만들거나 디자인할 때 UI(User Interface) UI 용어를 정확히 이해하는 것이 중요합니다. 하지만 용어가 너무 많아 헷갈리는 경우가 많죠? 🤔
이번 글에서는 웹 UI 디자인에서 자주 사용하는 기본 용어들을 정리해 보았습니다. 웹 개발자, 디자이너, 기획자라면 꼭 알아야 할 핵심 개념들을 쉽게 정리했으니, 함께 확인해 보세요! 🚀
📌 1. UI 용어 UI (User Interface) & UX (User Experience) 기본 개념
✅ UI (사용자 인터페이스)란?
- 사용자가 웹사이트나 앱을 사용할 때 눈으로 보거나, 클릭하고, 입력하는 모든 요소
- 버튼, 메뉴, 아이콘, 입력 폼 등이 포함됨
✅ UX (사용자 경험)란?
- 사용자가 웹사이트나 앱을 이용하면서 느끼는 경험 전반
- “이 웹사이트 사용하기 편리해?” “내가 원하는 정보를 쉽게 찾을 수 있어?” 같은 요소
✔ **UI는 웹사이트의 ‘겉모습’, UX는 ‘경험’**이라고 이해하면 쉬워요!
📌 2. 웹 UI 구성 요소 (Web UI Components)
🖥️ 1) 네비게이션 (Navigation) 관련 용어
| 용어 | 설명 |
|---|---|
| 메뉴(Menu) | 사용자가 클릭해서 원하는 페이지로 이동할 수 있는 항목 |
| 네비게이션 바(Navigation Bar) | 웹사이트 상단에 위치하는 메뉴 바 |
| 드롭다운 메뉴(Dropdown Menu) | 클릭하면 추가 옵션이 나타나는 메뉴 |
| 햄버거 메뉴(Hamburger Menu) | 모바일 UI에서 많이 쓰이는 세 줄 아이콘 형태의 메뉴 |
🔘 2) 버튼 & 입력 요소 (Forms & Buttons)
| 용어 | 설명 |
|---|---|
| 버튼(Button) | 클릭 시 특정 액션을 수행하는 UI 요소 |
| CTA(Call to Action) | “지금 가입하기”, “더 알아보기” 같은 행동을 유도하는 버튼 |
| 토글 버튼(Toggle Button) | ON/OFF 기능을 제공하는 버튼 |
| 체크박스(Checkbox) | 여러 개의 옵션을 선택할 수 있는 체크 형태 입력 요소 |
| 라디오 버튼(Radio Button) | 한 가지 옵션만 선택 가능한 입력 요소 |
| 입력 필드(Input Field) | 사용자가 텍스트를 입력할 수 있는 박스 |
| 플레이스홀더(Placeholder) | 입력 필드 안에 표시되는 설명 텍스트 |
📌 3) 콘텐츠 영역 (Content Area) 관련 용어
| 용어 | 설명 |
|---|---|
| 히어로 이미지(Hero Image) | 웹사이트 상단에 배치된 큰 배너형 이미지 |
| 카드(Card UI) | 정보나 콘텐츠를 박스 형태로 정리하는 디자인 |
| 모달 윈도우(Modal Window) | 화면 위에 뜨는 팝업 창, 닫기 전까지 뒤 화면 조작 불가 |
| 툴팁(Tooltip) | 특정 요소에 마우스를 올리면 나오는 작은 설명 창 |
| 아코디언(Accordion) | 클릭하면 열리고 닫히는 UI 패널 |
| 탭(Tabs) | 여러 개의 콘텐츠를 하나의 영역에서 전환해 볼 수 있는 기능 |
📌 4) 스크롤 & 페이지 레이아웃 관련 용어
| 용어 | 설명 |
|---|---|
| 고정 헤더(Fixed Header) | 스크롤을 내려도 화면 상단에 고정되는 헤더 |
| 패럴랙스 스크롤(Parallax Scroll) | 스크롤할 때 배경과 콘텐츠가 다른 속도로 움직이는 효과 |
| 무한 스크롤(Infinite Scroll) | 스크롤할 때 새로운 콘텐츠가 계속 로딩되는 방식 |
| 페이징(Pagination) | 콘텐츠를 여러 페이지로 나누고, 페이지 버튼을 제공하는 방식 |
📌 3. 반응형 웹 & UI 반응 관련 용어
| 용어 | 설명 |
|---|---|
| 반응형 웹(Responsive Web) | 화면 크기에 따라 자동으로 UI가 조정되는 웹 디자인 |
| 그리드 시스템(Grid System) | 화면을 여러 개의 컬럼으로 나누어 디자인하는 방식 |
| 플렉스박스(Flexbox) | CSS 레이아웃 방식 중 하나로, 요소 정렬을 쉽게 하는 기술 |
| 호버 효과(Hover Effect) | 마우스를 올렸을 때 발생하는 UI 변화 |
| 터치 제스처(Touch Gesture) | 모바일에서 스와이프, 핀치 줌 같은 터치 동작 |
📌 4. UI/UX 디자인 원칙 & 개념 UI 용어
🎨 1) UI 디자인 원칙
| 용어 | 설명 |
|---|---|
| 가독성(Legibility) | 글씨가 잘 보이고 읽기 쉬운지 |
| 접근성(Accessibility) | 장애가 있는 사용자도 쉽게 이용할 수 있는지 |
| 일관성(Consistency) | 전체 디자인이 통일된 느낌을 주는지 |
| 직관성(Intuitiveness) | 사용자들이 쉽게 이해하고 사용할 수 있는지 |
🔎 2) UX 관련 개념
| 용어 | 설명 |
|---|---|
| 사용자 여정(User Journey) | 사용자가 웹사이트에서 이동하는 흐름 |
| A/B 테스트(A/B Testing) | 두 가지 디자인을 비교하여 더 나은 것을 선택하는 방법 |
| 퍼소나(Persona) | 웹사이트를 사용할 대표적인 가상의 사용자 모델 |
| 마이크로 인터랙션(Micro Interaction) | 버튼 클릭, 로딩 애니메이션 같은 작은 UI 반응 |
🎯 기본 UI 용어를 알아야 웹이 보인다!
✔ UI = 사용자 인터페이스 (웹사이트에서 사용자가 보는 모든 것!)
✔ UX = 사용자 경험 (웹사이트가 얼마나 편리하고 만족스러운지!)
✔ UI 디자인 요소 = 버튼, 입력 필드, 네비게이션 바, 카드 UI 등
✔ 반응형 & 접근성 고려 = 모든 기기에서 잘 보이고, 누구나 쉽게 이용할 수 있도록!
웹 UI 용어를 정확히 이해하면 웹사이트를 더 쉽게 설계하고, 사용자 친화적인 디자인을 만들 수 있습니다. 😊
혹시 추가로 궁금한 UI/UX 용어가 있다면 댓글로 질문 주세요! 🙌
📢 📌 관련 글 추천
🔗 웹디자인 초보를 위한 UI/UX 개념 정리
🔗 반응형 웹이란? 웹사이트 최적화 가이드
💡 이 글이 유익했다면 좋아요 & 공유 부탁드립니다! 😊