UI 컴포넌트는 웹, 모바일, 데스크톱 등 모든 플랫폼에서 공통으로 활용되는 사용자 인터페이스 요소입니다. 아래에서는 이러한 UI 컴포넌트를 기능별로 분류하고, 각 컴포넌트의 기본 역할과 사용 사례를 설명합니다. 또한 각 컴포넌트가 다양한 플랫폼(Web, Mobile, Desktop)에서 어떻게 사용되는지 간략히 다룹니다.
1. 내비게이션 컴포넌트
내비게이션 컴포넌트는 사용자가 애플리케이션이나 웹사이트 내에서 이동할 수 있도록 돕는 요소들입니다 (예: 메뉴, 탭, 브레드크럼 등). 플랫폼에 따라 화면 크기와 맥락에 맞게 다양한 형태로 제공됩니다.
- 메뉴 (Menu): 사용자가 이동할 수 있는 여러 옵션이나 페이지 링크의 모음입니다. 웹에서는 상단의 내비게이션 바나 드롭다운 메뉴 형태로 많이 나타나고, 모바일 앱에서는 화면 측면에서 슬라이드되어 나오는 햄버거 메뉴 아이콘(≡) 또는 하단의 탭 바 형태로 제공됩니다. 사용자는 메뉴를 통해 앱/사이트의 주요 섹션으로 쉽게 이동할 수 있습니다.
- 내비게이션 바 (Navigation Bar): 보통 화면 상단에 위치하는 고정 막대 형태의 메뉴로, 로고나 제목과 함께 주요 내비게이션 항목들을 포함합니다. 웹 사이트에서는 헤더 영역에 위치하여 전체 사이트 구조를 안내하고, 데스크톱 애플리케이션에서는 메뉴 모음으로 사용되기도 합니다. 모바일 앱의 상단바는 뒤로가기 등의 내비게이션 버튼과 화면 제목을 표시하며, iOS에서는 내비게이션 컨트롤러의 타이틀 바로 활용됩니다.
- 사이드바 / 드로어 메뉴 (Sidebar/Drawer): 화면의 왼쪽이나 오른쪽 측면에 배치되는 세로형 내비게이션 메뉴입니다. 데스크톱 웹에서는 항상 보이는 사이드바로서 여러 섹션의 링크를 나열하고, 모바일에서는 화면 밖에 숨겨져 있다가 햄버거 아이콘을 탭 하면 드로어 메뉴로 슬라이드되어 나타납니다. 사이드바는 추가 탐색 링크나 보조 메뉴(예: 사용자 프로필 메뉴, 설정)를 제공하는 데 유용합니다.
- 브레드크럼 (Breadcrumb): 현재 사용자가 위치한 페이지의 경로를 계층적으로 표시하는 작은 링크 모음입니다. 주로 웹사이트 상단에 나타나며, 상위 카테고리→하위 카테고리→현재 페이지 순으로 탐색 경로를 보여줍니다. 사용자는 브레드크럼을 통해 현재 위치를 파악하고, 이전 단계로 쉽게 이동할 수 있습니다. (모바일 앱에서는 화면 공간 제약으로 브레드크럼 사용이 드물지만, 웹에선 사이트 구조가 깊을 때 많이 활용됩니다.)
- 탭 (Tabs): 동일한 화면 공간에서 콘텐츠를 분할하여 여러 화면을 전환할 수 있게 해주는 컴포넌트입니다. 웹에서는 페이지 상단에 가로로 탭 메뉴를 배치해 클릭 시 아래 콘텐츠 영역이 해당 탭의 내용으로 바뀌고, 데스크톱 애플리케이션(브라우저, 에디터 등)에서는 여러 문서를 하나의 창에서 탭으로 관리합니다. 모바일 앱에서는 하단에 탭 바 형태로 주요 섹션들(예: 홈, 검색, 설정 등)을 나열하거나 상단에 카테고리 탭을 두어 스와이프로 콘텐츠를 전환하도록 합니다. 탭을 사용하면 사용자가 빠르게 화면을 전환하고 현재 어떤 섹션에 있는지 시각적으로 인지하기 쉽습니다.
- 페이지네이션 (Pagination): 콘텐츠를 여러 페이지로 나눠서 보여줄 때, 사용자가 다음/이전 페이지로 이동하거나 특정 페이지 번호로 점프할 수 있도록 해주는 쪽번호 네비게이션입니다. 웹에서는 게시글 목록이나 검색 결과처럼 항목이 많은 경우 하단에 «이전, 1, 2, 3, …, 다음» 링크 형태로 구현됩니다. 사용자는 페이지네이션을 통해 방대한 정보를 단계적으로 탐색할 수 있습니다. 모바일의 경우 화면 크기 때문에 숫자 페이지네이션보다는 무한 스크롤이나 “더 보기” 버튼으로 대체되는 경우가 많지만, 필요한 경우 작은 페이지 버튼이나 페이지 표시자를 사용하기도 합니다.
2. 입력 및 폼 컴포넌트
입력 및 폼 컴포넌트는 사용자가 시스템에 데이터를 입력하거나 액션을 수행하기 위한 인터페이스 요소들입니다 (예: 텍스트 필드, 드롭다운 메뉴, 체크박스 등). 회원가입 폼, 검색창, 설정 화면 등에서 활용되며, 플랫폼별로 입력 방법이나 UI 표현에 차이가 있지만 기본 기능은 공통됩니다.
- 버튼 (Button): 클릭이나 탭을 통해 사용자 액션을 실행하는 기본 컴포넌트입니다. 일반적으로 라벨 텍스트나 아이콘이 표기된 사각형/원 형태로 시각화되어 있으며, 눌렀을 때 폼 제출, 데이터 저장, 페이지 이동 등의 동작이 발생합니다. 웹에서는 마우스로 클릭 가능한 요소로, 모바일에서는 손가락 터치에 반응하도록 크기와 간격이 충분히 확보됩니다. (예: 확인, 취소 버튼, 아이콘만 있는 즐겨찾기 ★ 버튼 등 다양한 변형 존재)
- 텍스트 필드 (Text Field): 한 줄의 텍스트를 입력받는 단일행 입력창입니다. 사용자가 짧은 문자열(이름, 이메일, 검색어 등)을 입력할 때 사용됩니다. 보통 입력 전에는 회색 힌트 문구(placeholder)가 표시되고, 선택하면 키보드 입력을 받을 수 있게 커서가 나타납니다. 모바일에서는 필드를 터치하면 가상 키보드가 올라오고, 데스크톱에서는 물리 키보드로 입력합니다. (검색창이나 로그인 폼의 아이디 입력란 등이 여기에 속합니다.)
- 텍스트 영역 (Text Area): 여러 줄의 텍스트를 입력할 수 있는 다중행 입력 영역입니다. 긴 문장이나 글(댓글, 문의 내용 등)을 받아야 할 때 사용됩니다. 기본적으로 상자가 크고 세로로 늘어나 있으며 입력 내용이 많아지면 스크롤이 가능합니다. 웹과 모바일 모두 유사한 용도로 쓰이나, 모바일 화면에서는 필요 시 자동으로 영역을 늘리거나 별도 입력 화면으로 전환되기도 합니다.
- 체크박스 (Checkbox): 사용자가 다중 선택을 할 수 있는 네모난 토글 버튼입니다. 체크박스를 클릭/탭하면 작은 체크 표시(v)가 나타나거나 사라지며 선택 상태를 표시합니다. 여러 옵션 중 복수선택이 가능할 때 사용하며, 각 체크박스는 개별적으로 on/off가 가능합니다. 모든 플랫폼에서 폼이나 설정 리스트 등에서 흔히 사용되고, 모바일에서는 터치하기 쉽게 체크박스 크기나 간격을 조정합니다. (예: “이용 약관 동의” 체크박스, 필터 옵션 선택 등)
- 라디오 버튼 (Radio Button): 여러 옵션 중 오직 하나만 선택할 수 있도록 하는 동그라미 형태의 선택 버튼입니다. 한 그룹 내 여러 개의 라디오 버튼이 있으며, 사용자가 하나를 선택하면 나머지는 선택 해제되는 상호 배타적 관계입니다. 체크박스와 달리 단일 선택용으로, 설문 문항이나 옵션 선택에 자주 쓰입니다. 웹/데스크톱에서는 작은 원을 클릭하여 점(dot)이 찍히는 형태이고, 모바일에서는 터치에 반응하는 크기로 표시됩니다. (예: 성별 선택 남/여, 배송 옵션 선택 등)
- 토글 스위치 (Toggle Switch): 두 가지 상반된 상태(on/off 또는 활성/비활성)를 전환하기 위한 스위치 형태의 입력입니다. 흔히 슬라이드 스위치 모양으로, 한쪽 끝에서 다른 쪽 끝으로 이동하며 상태를 바꿉니다. 설정 화면에서 기능의 활성화/비활성화를 제어하는 데 많이 사용되며, 모바일(iOS 스타일 스위치 등)에서 특히 빈번히 볼 수 있습니다. 웹에서는 체크박스를 시각적으로 변형하여 토글처럼 보이게 만들거나 별도의 UI 컴포넌트로 구현합니다. (예: 알림 설정 ON/OFF, 다크모드 스위치)
- 드롭다운 목록 (Dropdown List): 화면에는 한 가지 선택된 값만 보이다가, 사용자가 클릭하면 아래로 펼쳐져 여러 옵션 중 하나를 선택할 수 있게 해주는 목록 컴포넌트입니다. 공간 절약에 유리하여 국가 선택, 카테고리 선택처럼 옵션이 많을 때 활용됩니다. 웹에서는 마우스로 상자를 클릭하면 옵션 리스트가 펼쳐지고 항목을 선택할 수 있으며, 모바일 앱에서는 터치 시 화면 하단에 옵션 픽커가 나타나거나 별도 선택 화면으로 이동하여 목록을 보여줍니다. (예: 폼에서 출생년도 선택, 제품 정렬 옵션 등)
- 날짜/시간 피커 (Date/Time Picker): 날짜나 시간을 직관적으로 선택할 수 있게 해주는 전용 입력 컴포넌트입니다. 달력 형태로 월별 일자를 보여주거나 시간 값을 조절할 수 있는 UI로 나타나며, 사용자가 숫자를 직접 입력하지 않아도 날짜/시간 형식을 선택하도록 도와줍니다. 웹에서는 달력 팝업이 뜨고 사용자가 일자를 클릭하는 식으로, 데스크톱에선 OS 기본 날짜 선택 다이얼로그를 띄우기도 합니다. 모바일에서는 휠 형태(iOS의 date picker)로 날짜와 시간을 스크롤하여 고르거나, 작은 캘린더 화면을 띄워 선택합니다. (예: 호텔 예약 체크인 날짜 선택, 일정 앱의 시간 설정)
- 파일 선택 (File Upload): 사용자의 로컬 장치 저장소에서 파일을 선택하여 업로드할 수 있게 하는 컴포넌트입니다. 웹에서는 “파일 선택” 버튼을 누르면 파일 탐색기 대화창이 열리고, 사용자가 파일을 고르면 경로나 파일명이 표시되며 업로드를 진행합니다. 모바일에서는 갤러리나 파일 앱이 열리거나, 사진 첨부의 경우 카메라를 바로 실행시키기도 합니다. 이 컴포넌트는 이미지 업로드, 첨부파일 등록 등에 활용됩니다. (예: 프로필 사진 업로드, 이력서 파일 첨부)
- 슬라이더 (Slider): 막대를 좌우(또는 상하)로 드래그하여 값을 조절할 수 있는 입력 컴포넌트입니다. 사용자가 연속적인 범위 내에서 원하는 값이나 범위를 선택할 때 유용합니다. 예를 들어 음량 조절, 가격 필터 범위 설정 등에 쓰이며, 시작과 끝 범위가 정해져 있고 사용자는 손잡이(handle)를 끌어서 값을 변경합니다. 데스크톱/웹에서는 마우스로 드래그, 모바일에서는 손가락으로 드래그하여 조작하며, 실시간으로 변화량이 반영됩니다.
- 스테퍼 (Stepper): 숫자 등의 값을 단계별로 증감시키는 입력 도구로, 보통 “▲/▼”나 “+/-” 버튼으로 구성된 작은 컴포넌트입니다. 사용자가 값을 직접 입력하는 대신 미리 정의된 단위만큼 증가나 감소시키고자 할 때 사용합니다. 예를 들어 상품 수량 선택 시 “- 1 +” 버튼으로 수량을 조절하거나, 폼에서 작은 숫자 값을 올리고 내릴 때 쓰입니다. 웹과 모바일 모두 존재하며, 모바일에서는 터치하기 쉽게 버튼 간 거리를 두는 등 UI를 조정합니다.
- 검색 필드 (Search Field): 검색어를 입력받기 위한 텍스트 필드로, 돋보기 아이콘과 함께 제공되어 검색 기능임을 나타냅니다. 사용자가 키워드를 입력하고 엔터치거나 아이콘을 누르면 검색이 실행됩니다. 웹에서는 헤더나 사이드바에 배치되어 사이트 내 검색을 제공하거나, 리스트 상단에 필터링용으로 쓰입니다. 모바일 앱에서는 화면 상단에 검색창을 두거나 돋보기 아이콘을 터치하면 검색 필드가 나타나는 방식으로 구현됩니다. 입력 시 실시간 추천이나 자동완성 기능이 딸려있는 경우도 있습니다. (예: 쇼핑몰의 상품 검색창, 주소록 검색 필드)
- 컬러 피커 (Color Picker): 사용자가 색상을 선택할 수 있도록 하는 UI 컴포넌트입니다. 팔레트 형태로 색상을 보여주고 선택하게 하거나, 색상 코드를 직접 입력할 수 있는 필드를 함께 제공합니다. 그래픽 디자인 툴이나 테마 설정 기능 등에 쓰이며, 웹에서는 자바스크립트 라이브러리를 통해 색상 선택기가 팝업으로 나타나기도 하고, 데스크톱 앱에서는 OS 기본 색 선택 창을 띄우기도 합니다. 모바일 앱에서도 색상을 선택해야 하는 경우 작은 팝업이나 전체 화면을 활용한 색상 팔레트 UI를 제공합니다.
3. 컨테이너 및 레이아웃 컴포넌트
컨테이너 및 레이아웃 컴포넌트는 다른 UI 요소들을 담거나 그룹화하여 화면 구조를 만드는 컴포넌트입니다. 관련된 콘텐츠를 한 데 묶어 시각적 구획을 만들고, 제한된 공간을 효율적으로 활용하도록 돕습니다 (예: 카드, 캐러셀, 아코디언 등). 또한 반응형 디자인을 위한 레이아웃 그리드처럼 화면 배치를 잡는 보이지 않는 컴포넌트들도 포함됩니다.
- 카드 (Card): 정보나 기능을 작은 직사각형 패널 하나에 묶어 담은 컨테이너입니다. 카드에는 텍스트, 이미지, 버튼 등 다양한 요소가 포함될 수 있으며, 개별 콘텐츠 항목을 표현하는 단위로 활용됩니다. 예를 들어 뉴스 기사 목록에서 각 기사를 카드로 표현하거나, 상품 목록에서 하나의 상품을 카드로 나타낼 수 있습니다. 카드는 격자(grid)나 리스트 형태로 여러 개가 나열되어도 시각적으로 분리가 잘 되고, 클릭/탭 시 해당 아이템의 상세 페이지로 이동하는 진입점 역할을 합니다. 웹과 모바일 모두에서 인기 있는 디자인 패턴이며, 모바일에서는 화면 너비에 맞춰 1열 카드 리스트로, 태블릿/웹에선 여러 열로 배열하여 공간 활용을 극대화합니다.
- 모달 / 다이얼로그 (Modal/Dialog): 메인 화면 위에 겹쳐 나타나는 팝업 창으로, 사용자에게 중요한 메시지나 추가 입력을 요구할 때 사용됩니다. 배경을 뿌옇게 하거나 비활성화하고 포커스를 이 창에만 주어, 사용자가 모달 창을 닫거나 내용에 대응하기 전까지는 다른 상호작용을 할 수 없게 만드는 것이 일반적입니다. 웹에서는 자바스크립트로 모달을 띄우며, 데스크톱에선 전통적으로 대화상자(dialog box)로 불립니다. 모바일 앱에서는 화면 중앙이나 하단에 나타나는 팝업 시트 형태로 구현되어, 작은 화면에서는 거의 전체 화면을 덮는 모달이 사용되기도 합니다. (예: 삭제 확인 대화상자, 설정에서 추가 옵션을 입력받는 모달 폼 등)
- 아코디언 (Accordion): 여러 개의 패널을 겹쳐 쌓은 리스트로, 한 번에 하나의 패널만 펼쳐 내용을 표시하고 나머지는 접어서 숨기는 방식의 컴포넌트입니다. 각 아코디언 항목은 제목 또는 요약이 보이고, 이를 클릭하면 해당 영역이 확장(expand)되어 상세 내용을 보여주며, 다시 클릭하면 축소됩니다. 한정된 공간에 많은 정보를 담을 때 유용하며, FAQ 페이지에서 질문 목록을 아코디언으로 만들어 클릭 시 답변을 보여주는 경우가 대표적입니다. 모바일에서도 세로 스크롤을 고려하여 아코디언을 쓰면 한번에 하나의 섹션만 화면에 표시되므로 정보 과부하를 줄일 수 있습니다.
- 패널 / 섹션 (Panel/Section): UI에서 의미적으로 연관된 요소들을 묶은 구역 또는 상자를 의미합니다. 예를 들어 설정 화면을 섹션별로 구분하여 각 섹션마다 제목을 두고 관련 설정 스위치를 모아두거나, 대시보드에서 관련 지표들을 하나의 패널 박스로 묶어 구분짓는 식입니다. 패널은 테두리나 배경색으로 구분될 수도 있고 단순히 간격과 헤더 텍스트로 구분되기도 합니다. 웹에선
<fieldset>이나 카드 컴포넌트로 구현할 수 있고, 데스크톱 애플리케이션에선 그룹박스(group box)같이 테두리와 제목이 있는 컨테이너로 쓰입니다. 이처럼 패널/섹션 컴포넌트는 논리적인 그룹화를 통해 UI를 구조화하고 사용자가 관련 내용을 한눈에 이해하도록 돕습니다. - 캐러셀 (Carousel): 한정된 공간에 여러 항목을 슬라이드 형태로 교차 표시하는 컨테이너입니다. 이미지나 카드 리스트 등을 가로로 배열해 두고, 한 번에 하나씩(또는 몇 개씩)만 표시된 후 좌우 내비게이션 버튼이나 스와이프 제스처로 다음 항목을 볼 수 있게 해줍니다. 이를 통해 하나의 영역에 다수의 콘텐츠를 담을 수 있지만, 사용자가 숨겨진 콘텐츠를 반드시 넘겨볼 것이라는 보장이 없으므로 핵심 콘텐츠는 첫 화면에 배치해야 합니다. 웹에서는 홈페이지 배너 슬라이드쇼, 상품 이미지 갤러리 등에 많이 쓰이고, 모바일에서도 튜토리얼 화면을 여러 장 넘기는 형태나 카드 뉴스 등에 활용됩니다. (UX 측면에서 캐러셀 사용 시 넘기는 표시를 명확히 하고 너무 많은 항목을 넣지 않는 등 주의가 필요합니다.)
- 레이아웃 그리드 (Layout Grid): 화면을 일정한 열(columns)과 행(rows) 기반으로 분할하여 정렬된 레이아웃을 만드는 데 사용되는 컨테이너/시스템입니다. 그리드 레이아웃 컴포넌트 자체가 사용자가 직접 보게 되는 UI 요소는 아니지만, 개발자나 디자이너가 UI 요소들을 규칙적으로 배치하도록 도와주는 구조입니다. 예를 들어 웹에서는 12컬럼 그리드 시스템을 적용해 반응형 레이아웃을 구현하고, 데스크톱 앱이나 모바일에서도 오토 레이아웃/제약 조건 등을 통해 다양한 해상도에서 요소들이 적절히 정렬되도록 합니다. 이 카테고리에는 플렉스 박스(Flexbox) 컨테이너, CSS 그리드, VBox/HBox 레이아웃 등이 해당하며, UI 컴포넌트를 일관된 구조로 배치하여 가독성과 미관을 향상시킵니다.
- 탭 컨테이너 (Tab Container): 탭 컴포넌트와 함께 사용되는 컨테이너로, 각 탭별로 표시될 화면 콘텐츠 영역을 담고 있습니다. 사용자가 탭을 전환하면 이 컨테이너의 내용도 해당 탭에 맞게 바뀝니다. 웹에서는 탭들 아래에 영역을 마련하고, 탭 클릭 시 해당 DIV에 해당하는 콘텐츠를 보여주는 식으로 구현합니다. 데스크톱 애플리케이션의 설정 창 등에서도 탭 별로 다른 패널을 보여줄 때 이러한 컨테이너 개념을 사용합니다. 모바일 앱에서는 보통 화면 전환으로 구현되지만, 일부 라이브러리에서는 탭을 누를 때 뷰들을 미리 로드해 두고 보여주는 컨테이너를 관리하기도 합니다. (탭 컨테이너는 개념적으로 다른 컴포넌트를 담는 용기 역할을 한다는 점에서 컨테이너 컴포넌트로 분류됩니다.)
4. 피드백 및 상태 표시 컴포넌트
피드백 및 상태 표시 컴포넌트는 시스템의 현재 상태나 사용자 액션에 대한 결과/피드백을 사용자에게 전달하는 UI 요소들입니다. 로딩 중임을 알리거나 작업 성공/실패 메시지를 보여주는 등, 인터페이스 상에서 상태 변화를 공지하는 역할을 합니다 (예: 알림, 툴팁, 진행 바 등). 이를 통해 사용자 경험을 개선하고, 사용자가 다음에 무엇을 할지 판단할 수 있도록 도와줍니다.
- 로딩 인디케이터 (Loading Indicator): 시스템이 현재 작업을 진행 중임을 나타내는 시각적 표시입니다. 사용자는 이 표시를 보고 기다려야 함을 인지하게 됩니다. 일반적으로 스피너(spinner) 아이콘(회전하는 원이나 모래시계 모양)이나 로딩 바 형태로 구현됩니다. 예를 들어 웹 페이지 로딩 시 화면 중앙에 동그라미가 빙빙 도는 애니메이션을 띄우거나, 브라우저 자체 상단에 진행 막대가 보이기도 합니다. 모바일 앱에서는 데이터 fetch 시 동글뱅이 로딩 스피너가 나타나거나, 콘텐츠를 아래로 당겼을 때(당겨서 새로고침) 상단에 로딩 스피너가 표시됩니다. 로딩 인디케이터는 작업이 아직 완료되지 않았음을 명확히 보여주어 사용자가 앱이 멈춘 것이 아니란 것을 알 수 있게 합니다.
- 알림 / 노티피케이션 (Notification): 새로운 정보나 이벤트를 사용자에게 통지하는 컴포넌트입니다. 예를 들어 새 메시지가 도착했거나 오류가 발생했을 때 화면에 배지나 팝업으로 알려주는 식입니다. 배지(badge) 형태의 알림은 아이콘 구석에 작은 원으로 숫자나 표시를 달아 새로운 항목 수를 나타내고, 배너/토스트 형태의 알림은 화면 상단 또는 하단에 일시적으로 나타나 메시지를 전합니다. 웹에서는 사이트 내 알림 아이콘 (예: 종 모양 아이콘)과 함께 읽지 않은 알림수를 배지로 보여주거나 브라우저 푸시 알림을 사용할 수 있고, 데스크톱 애플리케이션에서는 상태바나 별도 알림 창을 통해 시스템 알림을 표시합니다. 모바일에서는 OS의 푸시 알림 센터를 통해 앱 외부에서도 전달되며, 앱 내부에서는 배너로 나타나거나 아이콘 배지로 표시됩니다. (알림은 정보성으로 단순 표시만 할 수도 있고, 클릭 시 해당 화면으로 이동하는 상호작용을 제공하기도 합니다.)
- 토스트 메시지 (Toast Message): 잠시 나타났다 사라지는 작은 팝업 형식의 메시지로, 사용자 동작에 대한 짧은 피드백을 제공합니다. 화면 하단이나 상단에 겹쳐 나타나며, 몇 초 후 자동으로 사라지는 것이 특징입니다. 사용자가 어떤 액션을 취했을 때 성공 여부나 상태를 알려주는 데 주로 쓰입니다. 예를 들어 “저장되었습니다”, “네트워크에 접속할 수 없습니다” 같은 메시지를 토스트로 보여줍니다. 웹에서도 라이브러리를 통해 토스트를 구현하거나 브라우저의 알림과 유사하게 사용하고, 모바일은 안드로이드의 Toast API처럼 기본 제공되기도 합니다. 토스트 메시지는 사용자 흐름을 방해하지 않으면서 필요한 정보를 전달한다는 장점이 있지만, 금방 사라지므로 중요한 내용이라면 다른 영구적인 표시수단과 병행해야 합니다.
- 경고 대화상자 (Alert Dialog): 중요한 메시지나 확인 작업을 사용자에게 요구할 때 나타나는 모달 형태의 창입니다. 예를 들어 “정말 삭제하시겠습니까?” 같이 사용자의 확인이 필요한 경우나, “저장하지 않고 나가면 변경사항이 사라집니다”처럼 위험을 경고해야 할 경우 사용됩니다. 이 창에는 짧은 메시지 텍스트와 하나 이상의 동작 버튼(예: 확인, 취소)이 포함되며, 사용자가 버튼을 누르면 대화상자가 닫히고 대응하는 액션이 수행됩니다. 웹에서는
alert()같은 브라우저 기본 대화상자를 쓰거나, 커스텀 모달로 구현합니다. 모바일 앱에서는 OS에서 제공하는 표준 Alert Dialog(iOS의 UIAlertController, 안드로이드의 AlertDialog)를 사용하거나, 커스텀 팝업 UI를 사용합니다. 이 컴포넌트는 사용자의 주의 집중을 위해 화면을 잠깐 멈추고 반드시 인지시켜야 할 내용을 전달하는 역할을 합니다. - 툴팁 (Tooltip): 사용자에게 UI 요소에 대한 간단한 설명이나 힌트를 제공하는 작은 떠다니는 레이블입니다. 보통 사용자가 버튼이나 아이콘 등에 마우스를 오버할 때 나타나는 조그만 상자로, 해당 요소의 용도나 추가 정보를 짧게 표시해 줍니다. (예: 텍스트 아이콘 위에 마우스를 올리면 “편집(Edit)”이라는 툴팁이 나오는 것) 모바일에서는 마우스 오버 동작이 없기 때문에, 길게 누르기(long press)나 물음표 아이콘을 눌러 툴팁과 유사한 정보를 표시하기도 합니다. 툴팁은 항상 보이는 것이 아니어서 UI를 깔끔하게 유지하면서도, 사용자에게 필요할 때 추가 안내를 줄 수 있는 수단입니다. 접근성 면에서 키보드 포커스나 화면읽기 지원도 고려되어야 합니다.
- 뱃지 (Badge): 아이콘이나 텍스트 옆에 붙어 작은 표시 또는 숫자를 제공하는 컴포넌트입니다. 일반적으로 동그란 형태에 밝은 색(보통 빨간색) 배경과 흰색 숫자/글자로 새 알림 개수, 미처리 항목 수 등을 표시합니다. 예를 들어 이메일 앱 아이콘에 숫자 5가 표시되면 읽지 않은 메일이 5개 있다는 의미의 뱃지입니다. 뱃지는 상태나 수량 정보를 한눈에 알려주며, 크기가 작아 공간을 거의 차지하지 않으면서 시각적으로 눈에 띄게 디자인됩니다. 웹에서는 네비게이션 메뉴 옆에 “New”라든지 숫자 뱃지를 달아 새로운 콘텐츠가 있음을 표시하거나 장바구니 아이콘 옆에 상품 개수를 보여주고, 모바일 OS 홈 화면의 앱 아이콘 모서리에 뱃지를 표시하기도 합니다. (대개 뱃지는 읽으면 없어지거나 숫자가 갱신되어 실시간 상태를 반영합니다.)
5. 데이터 표시 컴포넌트
데이터 표시 컴포넌트는 각종 데이터나 정보를 시각적으로 표현하는 UI 요소들입니다. 표처럼 구조화된 데이터부터 그래프 같은 시각화 차트, 또는 진행률/상태 수치를 나타내는 요소까지 포괄합니다. 이러한 컴포넌트들은 사용자가 정보를 쉽게 해석하고 비교할 수 있도록 도와주며, 종종 대시보드나 리포트 화면에서 많이 사용됩니다 (예: 테이블, 차트 등).
- 테이블 (Table): 행(row)과 열(column)로 이루어진 격자 형태의 데이터 표시 컴포넌트로, 표 형태로 불립니다. 숫자나 텍스트 데이터 등의 다양한 항목을 체계적으로 정렬하여 보여줄 때 사용됩니다. 예를 들어 재고 목록, 사용자 명단, 재무 데이터 등 다수의 항목에 여러 속성이 있을 경우 테이블로 한 눈에 비교 가능합니다. 웹에서는
<table>태그 또는 그리드 라이브러리를 사용하여 구현하며, 열 헤더를 클릭해 정렬하거나 페이지네이션과 결합해 사용하는 경우가 많습니다. 데스크톱 애플리케이션 (예: 엑셀, 관리 도구)에서 널리 쓰이며, 모바일에서는 작은 화면에 테이블이 한꺼번에 다 보이지 않기 때문에 가로 스크롤 가능 테이블로 만들거나, 카드 리스트 형태로 반응형 변환하여 보여줍니다. - 차트 / 그래프 (Chart/Graph): 수치 데이터를 시각화하여 보여주는 컴포넌트입니다. 대표적으로 막대그래프, 선그래프, 원형차트(pie chart) 등이 있으며, 복잡한 데이터의 추세나 비율을 한눈에 파악할 수 있게 합니다. 예를 들어 매출 변동 추이를 선그래프로 나타내면 숫자 표보다 증감 경향을 쉽게 이해할 수 있고, 카테고리별 비중을 원형차트로 보여주면 각 부분의 크기를 직관적으로 비교할 수 있습니다. 웹에서는 차트 라이브러리(D3.js, Chart.js 등)를 이용해 동적인 그래프를 렌더링하고, 마우스 오버 시 세부 수치를 표시하는 인터랙션을 제공하기도 합니다. 모바일 앱에서도 내부에 차트를 그려주며, 터치로 특정 부분을 선택하면 값을 표시하거나 확대하는 기능을 넣기도 합니다. 차트 컴포넌트는 대시보드 UI의 핵심 요소로, 복잡한 데이터 세트를 사용자 친화적으로 요약해줍니다.
- 프로그레스 바 (Progress Bar): 어떤 작업의 진행 상태나 완료 비율을 나타내는 막대 형태의 컴포넌트입니다. 일정한 막대가 0%에서 100%까지 채워지는 시각적 표현을 통해 작업이 얼마나 진행되었는지 보여줍니다. 파일 업로드, 다운로드, 설치 과정, 다단계 폼의 진행 등에서 활용되며, 사용자는 프로그레스 바를 보고 남은 대기 시간이나 전체 중 현재 진행률을 가늠할 수 있습니다. 웹에서는 진행 상태를 AJAX 응답이나 시간에 맞춰 폭을 늘리는 CSS 애니메이션으로 구현하고, 모바일 앱에서도 ProgressBar 위젯 등을 사용해 유사하게 표시합니다. 때로는 원형으로 진행률을 나타내는 원형 프로그레스(indeterminate spinner와는 다른)도 있으며, 숫자로 퍼센트를 함께 보여주어 정확도를 높이기도 합니다.
- 목록 / 리스트 (List): 유사한 데이터 항목들을 세로로 나열하여 보여주는 컴포넌트입니다. 리스트는 가장 기본적인 데이터 표시 형식으로, 예를 들어 연락처 목록, 채팅 메시지 목록, 게시글 피드 등이 모두 리스트 형태입니다. 각 항목은 간단한 텍스트일 수도 있고 이미지와 텍스트를 함께 포함할 수도 있으며, 항목 사이에 구분선이 있거나 카드 스타일로 약간 두드러지게 만들 수도 있습니다. 모바일에서는 스크롤 가능한 리스트가 앱 UI의 큰 부분을 차지하며 (사용자는 스크롤하면서 항목들을 탐색), 웹에서도 댓글 목록, 검색 결과 목록 등으로 흔히 나타납니다. 리스트 컴포넌트는 필요한 경우 무한 스크롤이나 “더 보기” 버튼과 조합되어 많은 데이터도 단계적으로 보여줄 수 있고, 각 항목을 탭/클릭하면 상세보기로 이동하는 등 내비게이션과도 연결됩니다. (소셜 미디어의 피드(feed)도 일종의 리스트로, 시간순으로 콘텐츠를 나열한 것입니다.)
- 트리 뷰 (Tree View): 계층적인 데이터 구조를 트리 형태로 보여주는 컴포넌트입니다. 폴더 안에 하위 폴더/파일이 있듯이, 부모-자식 관계를 들여쓰기와 펼침/접힘 아이콘으로 표시하여 탐색할 수 있게 합니다. 사용자는 노드를 펼쳐서 자식 항목을 보고, 다시 접어서 숨길 수 있으며, 이를 통해 복잡한 계층 데이터를 한 화면에서 관리할 수 있습니다. 데스크톱 환경에서는 파일 탐색기, 디렉토리 구조, 계층적 메뉴 등에 자주 쓰이고, 웹 앱(특히 관리 도구나 기술 문서 페이지 등)에서도 트리 구조 데이터를 보여줄 때 활용됩니다. 모바일에서는 화면 크기 제약 때문에 트리뷰가 흔치 않지만, 필요 시 단계별 내비게이션(예: 설정 > 하위설정 > 상세설정 식으로 점진적 이동)으로 대체하거나, 트리 구조를 아코디언 리스트 형태로 구현하기도 합니다. (예: 모바일 파일 관리 앱에서 한 레벨씩 이동하거나, 메일 앱에서 폴더 구조를 단계별로 보는 경우)
- 캘린더 (Calendar): 달력 모양으로 날짜들을 그리드 배치하여 표시하는 컴포넌트입니다. 월간 캘린더 뷰를 통해 날짜별 일정을 보여주거나, 날짜 선택을 위한 UI로 쓰입니다. 예를 들어 일정관리 앱에서는 월 달력이 보이며 각 날짜에 일정 유무를 표시하고, 사용자가 특정 날짜를 누르면 해당 날짜의 일정 상세를 보여줍니다. 웹의 예약 시스템에서는 날짜 선택 캘린더를 제공하여 사용자가 체크인 날짜 등을 선택하도록 하고, 범위 선택(날짜 두 개 선택해 기간 설정) 기능이 있는 경우도 있습니다. 모바일에서는 화면 크기에 맞춰 한 달씩 화면에 표시하거나, 일자를 가로 스크롤 리스트로 나타내 일정 선택을 돕기도 합니다. 캘린더 컴포넌트는 날짜 정보 표시와 선택을 시각적으로 직관적이면서도 한눈에 전체 기간을 조망할 수 있게 해줍니다.
6. 미디어 및 기타 인터페이스 컴포넌트
미디어 및 기타 인터페이스 컴포넌트는 멀티미디어 콘텐츠(이미지, 오디오, 비디오 등)를 표시하거나 특수한 상호작용을 제공하는 UI 요소들을 가리킵니다. 앞선 분류에 속하지 않지만 사용자 경험에 중요한 역할을 하는 다양한 컴포넌트들이 이 범주에 포함됩니다. 플랫폼에 따라 기본 제공되는 플레이어를 쓰거나 커스텀 UI를 구현하는 등 형태가 다를 수 있습니다.
- 이미지 (Image): JPEG, PNG 등의 정적 이미지 콘텐츠를 화면에 표시하는 컴포넌트입니다. 웹에서는
<img>태그로 삽입하거나 백그라운드 이미지로 쓰이며, 모바일/데스크톱 앱에서도 이미지 뷰어 또는 아이콘 형태로 사용됩니다. UI에서 사진, 삽화, 아이콘 등 시각적 요소 전달에 널리 활용됩니다. 플랫폼별로 반응형 이미지를 사용하여 해상도에 따라 적절한 크기의 이미지를 로드하거나, 모바일 Retina 디스플레이에서는 고해상도 버전을 표시하는 등 최적화가 중요합니다. 또한 이미지는 종종 라이트박스(lightbox) 기능과 결합되어 클릭하면 확대하거나 갤러리로 넘겨볼 수 있게 하기도 합니다. - 아이콘 (Icon): 작고 단순화된 그래픽 심볼로, 기능이나 개념을 직관적으로 나타내는 요소입니다. 예를 들어 쓰레기통 모양 아이콘은 삭제를, 돋보기 아이콘은 검색을 의미합니다. 아이콘은 버튼 내에 사용되거나, 텍스트 옆에 장식/보조 표식으로 붙거나, 독립적으로 클릭 가능한 아이콘 버튼으로 쓰입니다. 모든 플랫폼에서 UI의 크고 작은 부분에 광범위하게 쓰이며, 일반적으로 벡터(SVG, 폰트 아이콘 등)로 제작되어 확대해도 선명하게 유지됩니다. 적절한 아이콘 사용은 언어에 상관없이 의미 전달을 가능케 하고 UI를 간결하게 만들어주지만, 사용자에게 익숙한 심볼인지 고려해야 합니다.
- 이미지 갤러리 (Image Gallery): 여러 이미지를 모아놓고 보여주는 뷰어 또는 레이아웃 컴포넌트입니다. 썸네일(thumbnail) 형태의 작은 이미지들을 격자로 보여주고 클릭/탭하면 큰 이미지로 보는 포토 갤러리 형태가 일반적입니다. 웹에서는 사진첩 페이지나 상품 상세의 추가 이미지들에 갤러리 UI를 적용하며, 선택한 이미지를 확대 표시하거나 다음/이전으로 넘길 수 있는 슬라이드쇼/캐러셀 형태로 구현합니다. 모바일에서는 화면을 스와이프하여 사진을 넘겨보는 슬라이드 뷰어 형태가 많으며, 두 손가락으로 줌인/아웃 같은 제스처도 지원됩니다. 갤러리는 사용자에게 시각 콘텐츠를 효율적으로 감상하도록 해주는 컴포넌트입니다.
- 비디오 플레이어 (Video Player): 동영상 콘텐츠를 재생할 수 있게 해주는 컴포넌트로, 재생/일시정지 버튼, 재생 위치 표시 막대(타임라인), 볼륨 조절, 전체화면 전환 등의 컨트롤 UI를 포함합니다. 웹에서는
<video>태그 또는 YouTube 임베드 등을 활용하며, 사용자 인터랙션에 따라 일시정지/재생이 가능하고 버퍼링 상태나 재생 시간 등을 표시합니다. 모바일 앱에서는 기본 미디어 플레이어를 임베드하거나 커스텀 UI를 만들어 사용하며, 가로 모드 전체화면 재생, 자막 토글 등의 기능을 제공하기도 합니다. 데스크톱에선 전문 미디어 플레이어(예: VLC)처럼 고급 기능을 넣을 수도 있습니다. 비디오 플레이어 컴포넌트는 스트리밍 영상, 튜토리얼 동영상, 광고 영상 등 다양한 비디오 콘텐츠를 사용자에게 전달하는 데 필수적입니다. - 오디오 플레이어 (Audio Player): 음악이나 음성 파일 등 오디오 콘텐츠의 재생을 위한 컴포넌트입니다. 비디오 플레이어와 유사하게 재생/정지, 시크바(seek bar), 음량 등의 제어 기능을 제공하지만, 영상을 위한 화면 출력은 없거나 파형(waveform) 등 간단한 시각화만 있을 수 있습니다. 웹에서는 HTML5
<audio>태그로 간단히 구현하거나, 플레이리스트/equalizer 등 추가 기능이 필요할 경우 JS로 커스텀 UI를 제작합니다. 모바일 앱의 경우 백그라운드 재생을 지원하며, 잠금화면 제어나 알림 바 컨트롤(안드로이드) 등 OS와 통합되기도 합니다. 오디오 플레이어는 음악 재생 앱, 팟캐스트, 음성 안내 등에서 핵심적으로 사용되며, UX 상 배경 재생이나 이어듣기 편의성 등이 고려됩니다. - 지도 컴포넌트 (Map): 지리정보를 표시하고 사용자가 지도를 탐색할 수 있게 해주는 컴포넌트입니다. 주로 인터랙티브 지도 형태로 구현되어 사용자가 드래그로 지도 위치를 움직이거나, 줌 인/아웃(+/- 또는 핀치 제스처)하여 축척을 변경할 수 있습니다. 웹에서는 구글 지도 API 등을 이용해 웹페이지에 지도를 임베드하고 위치 마커, 정보창 등을 표시합니다. 모바일 앱에서는 지도 SDK(API)를 사용해 지도를 화면 일부 또는 전체에 표시하고, GPS와 연동한 현위치 표시, 터치 이벤트로 장소 정보 보기 등의 상호작용을 제공합니다. 지도 컴포넌트는 위치 기반 서비스(LBS)의 핵심으로, 예를 들면 음식점 찾기 앱에서 주변 식당 위치를 지도에 나타내거나, 물류 앱에서 실시간 배송 추적 경로를 보여주는 데 활용됩니다.
- 아바타 (Avatar): 사용자 또는 객체를 대표하는 작은 이미지 아이콘 컴포넌트입니다. 보통 프로필 사진이나 사용자의 이니셜을 원형 또는 정사각형 틀 안에 담아 표시합니다. UI에서 댓글 목록, 채팅 리스트, 사용자 프로필 카드 등에 각 사용자별 아바타를 붙여 누구인지 식별할 수 있게 합니다. 웹/모바일 할 것 없이 광범위하게 쓰이며, 특정 이미지를 갖지 않을 경우 기본 아이콘(예: 사람 모양 실루엣)을 표시하기도 합니다. 아바타는 크기가 작지만 인터페이스에 개인화된 요소를 부여하여 사용자간 구분을 쉽게 해주고, 클릭 시 프로필 페이지로 이동하는 등 상호작용의 출발점이 되기도 합니다.
#UI컴포넌트 #공통UI컴포넌트 #플랫폼무관UI #내비게이션컴포넌트 #입력및폼컴포넌트 #컨테이너레이아웃컴포넌트 #피드백및상태표시컴포넌트 #데이터표시컴포넌트 #미디어및인터페이스컴포넌트 #웹모바일데스크톱 #사용자인터페이스 #UX디자인 #반응형디자인 #인터랙션디자인 #컴포넌트목록
