Ui 기본 구성 요소

UI (User Interface) 구성 요소란,
사용자가 디지털 제품(앱, 웹 등)과 상호작용할 때 화면에 직접 보이는 모든 인터페이스 컴포넌트를 의미한다.

주요 UI 컴포넌트

App Bar (Top App Bar)

화면 상단에 위치
앱의 성격에 따라 검색창, 로고, 알림 아이콘, 프로필 등 다양한 기능 배치

Bottom Navigation

화면 하단에 위치
앱의 주요 메뉴 이동 담당
보통 아이콘 + 짧은 텍스트 레이블 함께 사용

Search Bar (검색 바)

검색 입력창
텍스트 입력 + 추천 검색어 + 자동완성 등 기능 지원

Tab Bar (탭 바)

화면 전환을 위한 내비게이션 요소
여러 화면(섹션)을 빠르게 오가도록 지원

Check Box (체크박스)

다중 선택 가능
On/Off 개념도 포함
‘Tick box’라고도 불림

Radio Button (라디오 버튼)

여러 옵션 중 하나만 선택할 때 사용
Toggle Button / Switch (토글, 스위치)
On/Off 전환 기능
설정 값 변경, 상태 변경에 주로 활용

Tooltip (툴팁)

사용자가 특정 요소에 마우스 오버 시 1~2초 후 나타나는 설명
아이콘만 있을 때 보조 설명으로 자주 사용됨

Card (카드)

단일 주제에 대한 콘텐츠와 관련 작업 표시
이미지, 텍스트, 버튼 등 다양한 요소를 묶어 표현

Banner (배너)

중요한 정보나 메시지를 강조
상단/하단에 노출되며 이벤트, 알림 등에 사용

Button (버튼)

사용자 입력을 전달하는 핵심 요소
크기, 색상, 상태(활성/비활성)에 따라 스타일 구분

Slider (슬라이더)

볼륨, 밝기 등 연속적인 값 조정에 사용

Snackbar (스낵바)

화면 하단에 일시적으로 나타남
간단한 피드백 + 버튼 동반 가능
지속시간 길고, 사용자 조작 시 유지되기도 함
이름 유래: 간식을 먹듯 가볍게 제공되는 정보

Toast (토스트)

화면 상단/하단에 잠깐 나타남
2~3초 뒤 자동 사라짐, 사용자 입력 불필요
이름 유래: 구워진 토스트가 잠깐 나타났다 사라지는 모습

Drawer (드로어)

화면 측면에서 슬라이드되어 나오는 내비게이션 메뉴
햄버거 메뉴 아이콘과 함께 자주 사용됨

Modal (모달, 팝업창)

화면 위에 뜨는 대화형 창
사용자 조작(닫기, 확인 등)이 필요

Notifications (알림)

앱/서비스가 사용자에게 전달하는 메시지
푸시 알림, 인앱 알림 등 다양한 형태

Progress (진행 상태)

작업이 진행 중임을 알려주는 시각적 요소
로딩바, 스피너 등

Skeleton (스켈레톤 UI)

콘텐츠가 로드되기 전, 레이아웃 가이드를 제공하는 뼈대 화면
로딩 대기 중에도 사용자가 불편하지 않도록 도와줌

느낀 점
UI 컴포넌트는 단순히 시각적 장식이 아니라 직관성, 기능성, 일관성을 담아
사용자 경험을 설계하는 핵심 도구다!!! 아직까지 이름이 매치가 안되어서~~
클론하면서 외워줘야겠다 ㅎㅎ

++
각 요소는 구글의 Material Design, 애플의 Human Interface Guidelines처럼
기업별 가이드라인에 따라 세부 규격(고도값, 패딩, 컬러 등)이 정해져 있다.

과제

1. 컴포넌트 리서치 및 레퍼런스 모으기

2. 피그마로 컴포넌트 만들어보기

느낀 점
아주 다양한 디자인들이 있지만, 사용자에게 혼란을 주지 않기 위해서 비슷한 레이아웃 안에서 디자인의 변화를 준다. 오토 레이아웃을 통해 하나씩 만들어보니, 패딩이나 스패이싱이 잘 잡히면서 너무 편했다! 이후 개발할 때도 아주 편리할 것 같다는 생각이 들었다.

3. 유튜브 뮤직 클론 디자인

느낀 점
오토레이아웃을 통해 하나씩 계층을 잡아서 작업하다 보니 정말 구조가 깔끔하게 잡혔다!
어떻게 묶어야 할지 작업하다보니 감이 오는 것 같다 ㅎㅎ

회고

여러가지 컴포넌트들을 배우고 만드는 과정이 재미있었다!
나 적성에 맞을지두?!
오토레이아웃도, 피그마도 점점 감이 잡혀가고 있는 것 같다.
여러 레퍼 보면서 클론 해봐야지~!

#피그마 재밌당