UI 화면 요소 종류와 이름

오즈코딩스쿨의 10일차 수업 중 배웠던 UI 화면 요소 관련 내용만 따로 정리해보고자 한다. 

 

탐색 & 이동 UI

사용자가 '지금 어디에 있는지, 다음에 어디로 갈지' 이해하게 만드는 요소들

 

브레드크럼

-- 현재 위치를 단계적으로 이해하게 만드는 경로 표시 요소

 

페이지네이션

-- 긴 목록을 여러 페이지로 나눠서 보여줄 때, 현재 위치와 다음 이동 범위를 알려주는 요소

 

인피니티 스크롤

-- 아래로 스크롤할수록 콘텐츠가 계속 자동으로 로드되는 방식

 

메뉴

-- 여러 기능을 모아 보여주는 메뉴 아이콘 패턴 (벤토 메뉴, 햄버거 메뉴, 미트볼 메뉴 ... )

 

 

입력 & 선택 UI

사용자가 입력, 선택, 상태 변경을 하는 interaction 요소

 

 

 

검색 필드 = Search Field (서치 필드)

-- 내비게이션이 길어질수록 더 강력한 우회 경로가 된다.

 

버튼

-- 역할에 따른 위계가 분명해야 하며, 가장 중요한 행동이 시각적으로 먼저 보여야 한다.

 

인풋 필드 (Input Field)

-- 라벨, placeholder, helper, error 가 각각 어떤 역할을 하는지 구분해서 설계해야 한다.

 

 

체크박스

-- 여러 항목 선택

-- 약관 동의 시 전체 선택을 한 번에 켜지게 하거나, 개별적인 선택이 중요한 항목(ex. Todo list) 동작 여부를 구분

 

 

라디오 버튼

-- 한 가지 항목만 선택

-- ex) 결제 수단

 

 

토글 / 스위치

-- 토글은 '지금 상태를 보여주는 것'이고, 버튼은 '다음 행동을 묻는 것'이다. (구분필요!)

-- 지금 상태를 보여주는 토글인지, 다음 행동을 묻는 버튼인지 구분해야 한다.

 

 

칩스 (Chips)

-- 작은 선택지나 상태를 가볍게 보여준다.

-- ex) 필터, 태그, 빠른 선택 UI / 눌러보고 바꾸는 흐름

 

 

선택 / 드롭다운

-- 여러 옵션 중 1개를 고를 때 쓰는 요소 (필터, 정렬, 옵션 선택)

 

 

콘텐츠 & 정보 표시 UI

정보를 어떻게 묶고 보여줄지 결정하는 요소들

 

 

아코디언 (Accordion)

-- 여러 정보를 접고 펼치며 보여줄 때 쓰는 구조

-- FAQ, 상품정보, 설정 메뉴 ... 정보량이 많지만 한 번에 모두 펼칠 필요는 없을 때 

 

캐러셀 (Carousel)

-- 여러 콘텐츠를 가로로 넘기며 보여주는 방식

-- 사용자가 모든 콘텐츠를 확인하지 않을 가능성도 높아, 중요도가 높은 내용은 Carousel 안에만 숨겨두어서는 안된다.

-- 일반적으로 Indicator 와 함께 사용된다. (페이지 인디게이터 / 도트 내비게이션)

 

카드 (Card)

-- 정보를 하나의 덩어리로 묶어 보여줄 때 사용하는 UI

-- 제목, 설명, 가격, 버튼처럼 관련 있는 정보를 묶는다. (근접성의 원리)

 

리스트/테이블 (List/Table)

-- 정보를 순서대로 읽게 하고자 할 때는 List를,

-- 열 단위의 비교가 중요 할 때에는 Table을 사용하는 게 적절하다. 

 

List는 “하나씩 읽기”에 좋다. 예를 들어 강의 목록에서는 사용자가 강의 제목과 설명을 보고 원하는 강의를 선택하면 된다.
Table은 “같은 기준으로 비교하기”에 좋다. 예를 들어 수강생 관리 화면에서는 여러 수강생의 출석률, 과제 제출 여부, 결제 상태를 한눈에 비교해야 하므로 Table이 더 적합하다.

 

 

아이콘 

-- 그래픽을 통일하는 것이 중요하다.

-- 버튼이라면 텍스트나 Tooltip과 함께 보는 편이 안전하다.

 

프로필 / 아바타 

-- 사람 중심 서비스에서 텍스트보다 사용자를 빠르게 구분하게 도와주는 요소

-- List, 협업 화면에서 자주 쓰인다.

 

 

 

상태, 피드백 & 오버레이 UI

사용자의 행동에 반응하고, 현재 상태를 알려주고, 집중을 유도하는 요소

 

 

뱃지

-- 상태 / 수량처럼 짧은 정보를 작게 붙여 보여준다. (아이콘 위에)

-- 너무 많아질 경우 시선을 분산시키므로, 중요한 정보 위주로 표기

 

툴팁(Tooltip)

-- 버튼 / 아이콘의 의미를 설명하는 정보 상자

-- Hover를 하거나, 짧은 탭을 이용한 Interaction과 함께

 

토스트/스낵바 (Toast / Snackbar)

-- 화면 아래쪽 / 한쪽에 보여주는 짧은 피드백 화면

-- 작업 흐름을 끊지 않는 알림 (ex. 임시 저장 되었습니다. / 북마크 되었습니다.)

 

모달/다이얼로그 (Modal / Dialog)

-- 현재 화면 위에 떠서 중요한 결정에 집중하게 하는 오버레이 UI로, 그 아래 화면을 조작할 수 없게 막는다.

-- 정말 중요한 것 위주로 사용 

 

 

로더/스피너 (Loader / Spinner)

-- AI가 나오면서 많이 부각되는 UI로 지금 '처리 중'인 상태를 보여주는 요소

-- Spinner, Skeleton, Dot Loader를 상황에 맞게 사용 

 

 

 

프로그레스바 (Progress Bar)

-- 사용자가 기다리는 시간이 길 때 (ex. 프로그램 설치 시) 안정을 줄 수 있는 장치

 

 

빈 상태 (Empty State)

-- 내용이 없을 때 '왜 없는지' '다음에 무엇을 할지' 에 대한 안내를 해주는 화면

 

 

 

패턴 & 심화 UI

여러 UI 요소가 실제 화면 안에서 조합되는 패턴

 

 

폼 (Form)

-- 입력 순서 > 오류 처리 > 완료 까지의 흐름이 중요하며, 여러 입력 요소가 한 목적을 위해 묶여 있다. 

 

 

피커 (Picker)

-- 특정 값을 골라 입력하게 패턴으로, 선택이 안전한 값일 수록 더 적합하다.

-- ex) 날짜, 시간, 옵션 선택

 

 

슬라이더 (Slider)

-- 연속적인 값을 조절할 때 쓰이는 패턴

-- ex) 볼륨 / 밝기 / 가격 범위 / 거리 

 

 

스테퍼 (Stepper)

-- 정수 단위로 수량 / 단계를 한 칸씩 늘리고 줄이게 하는 패턴

-- ex) 장바구니 수량 변경, 인원 변경

 

플로팅 액션 버튼 (Floating Action Button)

-- 화면 위에 뜬 주요 행동 버튼

-- 매우 강한 주목성을 가지기 때문에, 중요한 행동일 때에만 쓴다. (ex. SNS 커뮤니티에서 글쓰기 버튼 ... )

 

 

 

 

오늘 배운 내용을 바탕으로 UI 요소들에 네이밍을 짓고 그룹핑하는 실습을 해보았다.