UI 컴포넌트 교육 자료

모바일 애플리케이션 개발에 필요한 UI 컴포넌트, 속성, 액션에 대한 종합 가이드

개요

UI 요소

  • Text, Button, Icon Button
  • Input, Radio Button, Check Box
  • Dropdown, Selector, Form
  • Slider, Divider, Date/Time Picker
  • Table, Progress Bar

UI 속성 요소

  • Padding
  • Margin

UI 액션 요소

  • Click (Tap, Touch)
  • Drag
  • Gesture
  • Keyboard

고급 컴포넌트

  • Card View, List View, Grid View
  • Scroll View, Infinite Scroll
  • Drawer, Bottom Navigation, Bottom Sheet
  • App Bar, Tab Bar, FAB
  • Search Bar, Hero, Splash Page, WebView

Text

정의

Text는 사용자 인터페이스에서 정보를 표시하는 기본적인 요소입니다. 다양한 크기, 두께, 색상으로 표현할 수 있으며, 제목, 본문, 레이블 등 다양한 용도로 사용됩니다.

사용 사례

  • 제목 (Heading): 페이지나 섹션의 제목
  • 본문 (Body): 주요 내용의 표시
  • 레이블(Label): 입력 필드나 버튼 등의 설명
  • 캡션 (Caption): 이미지나 표에 대한 설명
  • 링크 (Link): 클릭 가능한 텍스트

Button

정의

Button은 사용자가 액션을 트리거할 수 있는 인터랙티브 요소입니다. 클릭하거나 탭하면 지정된 작업을 수행합니다.

주요 사례

  • 양식 제출 (Form submission)
  • 대화 상자 확인/취소 (Dialog confirmation/cancellation)
  • 페이지 이동 (Navigation)
  • 기능 활성화/비활성화 (Feature toggle)
  • 프로세스 시작/중지 (Process start/stop)

Icon Button

정의

Icon Button은 텍스트 대신 아이콘을 사용하는 버튼입니다. 공간을 절약하면서도 직관적인 의미를 전달할 수 있습니다.

사용 사례

  • 툴바 (Toolbar)에서의 액션 버튼
  • 소셜 미디어 상호작용 (좋아요, 공유 등)
  • 컴팩트한 UI가 필요한 모바일 인터페이스
  • 네비게이션 컨트롤 (홈으로 가기 등)
  • 상태 토글 (음소거/음소거 해제, 북마크 등)

Outlined Button

정의

Outlined Button은 배경이 없고 테두리 외곽선을 사용하여 강조하는 버튼입니다. 일반적으로 보조 액션이나 덜 중요한 액션에 사용됩니다.

사용 사례

  • 보조 액션 (Secondary actions)
  • 취소 버튼 (Cancel buttons)
  • 필터 토글 (Filter toggles)
  • 옵션 선택 (Option selection)
  • 시각적으로 덜 강조되어야 하는 액션

Input / TextField

정의

Input(또는 TextField)은 사용자로부터 텍스트 데이터를 입력받는 UI 요소입니다. 다양한 형식의 데이터를 텍스트, 숫자, 이메일, 비밀번호 등을 수집할 수 있습니다.

사용 사례

  • 로그인/회원가입 양식
  • 검색 필드
  • 연락처 정보 수집
  • 설문조사 및 피드백 양식
  • 결제 정보 입력
  • 데이터 필터링 옵션

Radio Button

정의

Radio Button은 사용자가 여러 옵션 중 하나를 선택할 수 있는 UI 요소입니다. 동일한 그룹 내에서는 한 번에 하나의 라디오 버튼만 선택할 수 있습니다.

사용 사례

  • 단일 선택이 필요한 설문조사 질문
  • 성별, 연령대 등의 인구통계학적 정보 수집
  • 배송 방법, 결제 방법 선택
  • 특정 옵션 중 하나 선택
  • 필터링 옵션 (정렬 기준 등)

Check Box

정의

Check Box는 사용자가 여러 옵션 중 여러 개를 선택할 수 있는 UI 요소입니다. 각 체크박스는 독립적으로 선택하거나 해제할 수 있습니다.

주요 사례

  • 다중 선택이 필요한 설문조사 질문
  • 필터 옵션 선택 (여러 카테고리 선택)
  • 이용약관 동의
  • 특정 옵션 활성화/비활성화
  • 할 일 목록(To-do list)의 완료 표시
  • 다중 항목 선택 (이메일, 파일 등)

Dropdown

정의

Dropdown은 클릭하면 옵션 목록을 표시하는 UI 요소입니다. 공간을 절약하면서 여러 옵션을 제공할 수 있습니다.

주요 사례

  • 네비게이션 메뉴
  • 설정 메뉴
  • 정렬 및 필터 옵션
  • 언어 선택
  • 사용자 프로필 메뉴
  • 컨텍스트 메뉴 (우클릭 메뉴)

Selector

정의

Selector(또는 Select)는 여러 옵션 중 하나를 선택할 수 있는 드롭다운 형태의 UI 요소입니다. 드롭다운 메뉴처럼 보이며, 주로 공간 절약이 중요시되어 있습니다.

사용 사례

  • 국가, 지역 선택
  • 카테고리 선택
  • 날짜, 시간 범위 선택
  • 정렬 옵션 선택
  • 언어 선택
  • 테마 선택

Form

정의

Form은 사용자로부터 데이터를 수집하기 위한 여러 입력 요소를 그룹화한 UI 컴포넌트입니다. 텍스트 필드, 체크박스, 라디오 버튼 등 다양한 입력 요소를 포함할 수 있습니다.

사용 사례

  • 로그인/회원가입
  • 연락처 정보 수집
  • 설문조사
  • 결제 정보 입력
  • 검색 필터
  • 설정 구성

Slider

정의

Slider는 사용자가 지정된 범위 내에서 값을 선택할 수 있는 UI 요소입니다. 드래그 가능한 핸들을 사용해 값을 조절합니다.

사용 사례

  • 볼륨 조절
  • 밝기, 대비 등 시각적 설정
  • 가격 범위 필터
  • 줌 레벨 조절
  • 진행 상태 표시 및 조절
  • 수치 입력 (키, 무게 등)

Divider

정의

Divider(또는 Separator)는 콘텐츠나 섹션을 시각적으로 구분하는 가로 또는 세로 선입니다. UI의 구조와 계층을 명확하게 하는 데 도움을 줍니다.

주요 사례

  • 콘텐츠 섹션 구분
  • 메뉴 항목 구분
  • 폼 섹션 구분
  • 카드 내부 콘텐츠 구분
  • 헤더와 본문 구분
  • 리스트 구분

Date Picker

정의

Date Picker는 사용자가 날짜를 선택할 수 있는 캘린더 형태의 UI 요소입니다. 날짜 입력을 직관적이고 사용하기 쉽게 만들어줍니다.

주요 사례

  • 예약 시스템 (호텔, 항공권 등)
  • 일정 관리자 캘린더
  • 이벤트 계획
  • 생년월일 입력
  • 날짜 범위 필터
  • 프로젝트 마감일 설정

Time Picker

정의

Time Picker는 사용자가 시간을 선택할 수 있는 UI 요소입니다. 시, 분, 초와 AM/PM을 선택할 수 있는 인터페이스를 제공합니다.

사용 사례

  • 예약 및 회의 예약
  • 알람 설정
  • 작업 시간 설정
  • 배송 시간 선택
  • 일정 관리
  • 타이머 설정

Table

정의

Table은 행과 열로 구성된 데이터를 표시하는 UI 요소입니다. 구조화된 정보를 효과적으로 보여주는 데 사용됩니다.

사용 사례

  • 데이터 목록 표시
  • 사용자 관리 대시보드
  • 재고 관리
  • 금융 데이터 표시
  • 일정 및 시간표
  • 비교 차트

Progress Bar

정의

Progress Bar는 작업의 진행 상태를 시각적으로 표시하는 UI 요소입니다. 사용자에게 작업이 얼마나 완료되었는지 알려줍니다.

사용 사례

  • 파일 업로드/다운로드 진행 상태
  • 양식 작성 진행 상태
  • 설치 프로세스
  • 페이지 로딩 표시
  • 목표 달성 진행 상태
  • 단계별 프로세스 표시

Padding & Margin

정의

Padding과 Margin은 UI 요소의 공간을 제어하는 CSS 속성입니다.

  • Padding: 요소의 내부 여백으로, 요소의 내용과 테두리 사이의 공간입니다.
  • Margin: 요소의 외부 여백으로, 요소의 테두리와 주변 요소 사이의 공간입니다.

주요 사례

  • 요소 간 간격 조정
  • 텍스트와 컨테이너 사이의 공간 조정
  • 레이아웃 구성
  • 요소 정렬
  • UI 요소의 가독성 향상
  • 반응형 디자인 구현

Click / Tap / Touch

정의

사용자가 요소를 짧게 누르거나 터치하는 기본적인 상호작용입니다. React에서는 주로 onClick 이벤트로 처리되며, 디바이스 플랫폼에 따라 다음과 같이 부릅니다.

  • Click: 주로 데스크톱, 마우스 환경
  • Tap: 주로 모바일 디바이스 환경
  • Touch: 터치스크린에서의 일반적인 터치 제스처

주요 특징

  • 가장 기본적이며 널리 사용되는 상호작용 방식
  • 사용자가 액션을 실행하도록 명확한 시각적 피드백이 필요
  • 호버(Hover) 상태는 데스크탑에서 사용 가능하나 모바일에서는 불가능
  • 접근성을 위해 충분한 터치 영역(44x44px 권장)이 필요

Drag (드래그)

정의

드래그(Drag)는 요소를 클릭하고 마우스 버튼을 누른 상태에서 위치를 변경하는 사용자 인터랙션 방식입니다. React에서는 마우스 이벤트나 HTML5 Drag & Drop API를 사용하여 구현되며, 주로 아이템 재정렬, 위치 변경, 요소의 이동 등에 사용됩니다.

드래그 상호작용 유형

  • 요소 위치 변경(자유 이동)
  • 목록 순서 변경(드래그 앤 드롭)
  • 크기 조절 (리사이징)
  • 캔버스 요소 드래그(디자인 툴)
  • 파일 드래그(파일 시스템 상호작용)

구현 고려사항

  • 드래그 중인 상태를 시각적으로 표시
  • 드롭 가능한 영역 표시
  • 드래그 중에는 부드러운 애니메이션 적용
  • 터치 기기에서의 드래그 지원
  • 접근성을 위한 키보드 대체 옵션 제공

Gesture (제스처)

의의

제스처(Gesture)는 터치스크린이나 트랙패드를 통해 손가락의 움직임을 해석하여 인터페이스를 제어하는 방식입니다. React에서는 Touch Events API와 마우스 이벤트를 조합하여 구현하며, 일반적으로는 탭, 스와이프, 핀치/스프레드, 더블 탭, 길게 누르기 등이 포함됩니다.

일반적인 제스처 유형

  • 탭(Tap): 클릭과 동일, 요소 선택
  • 더블 탭(Double Tap): 확대/축소, 특별 기능 활성화
  • 길게 누르기(Long Press): 컨텍스트 메뉴, 추가 액션 표시
  • 스와이프(Swipe): 페이지 전환, 목록 삭제
  • 핀치(Pinch)/스프레드(Spread): 확대/축소
  • 회전(Rotate): 이미지나 요소 회전
  • 멀티터치: 여러 손가락을 사용한 복합 동작

구현 고려사항

  • 다양한 기기에서의 일관성 보장
  • 접근성 고려 (키보드 제어 방식 제공)
  • 시각적 피드백으로 제스처 인식 표시
  • 제스처 간의 충돌 방지 (탭과 스와이프의 구분)
  • 성능 최적화 (이벤트 디바운싱, 쓰로틀링)
  • 사용자 교육 및 도움말 고려

Keyboard (키보드)

의의

키보드 입력은 물리적인 또는 가상 키보드를 통해 애플리케이션과 통신하는 방식입니다. React에서 KeyboardEvent를 통해 처리하며, 데스크톱 환경에서 주요 입력 방식이며, 모바일 환경에서 키보드 입력 및 기능 사용 기능을 입력합니다.

일반적인 키보드 입력

  • 단축키: Ctrl+C (복사), Ctrl+V (붙여넣기) 등
  • 네비게이션: Tab (다음 요소), Shift+Tab (이전 요소)
  • 전송: Enter 등
  • 취소: Escape 등
  • 방향키: 이동, 메뉴 탐색 및 선택
  • 페이지 이동: Page Up, Page Down
  • 아이템 선택: Space, Enter

접근성 고려사항

  • 모든 기능을 키보드만으로도 사용 가능해야 합니다
  • 포커스 상태가 시각적으로 명확하게 표시되어야 합니다
  • 일관성 있는 패턴 사용
  • 키보드 트랩 방지 (요소에 갇히지 않도록)
  • 단축키는 일관된 패턴 사용
  • 스크린리더 호환성 보장
  • 키보드 내비 제공 (사용 가능한 단축키 목록 제공)

Card View (카드 뷰)

개요

카드 뷰는 관련된 정보를 담는 컨테이너로, 주로 이미지, 제목, 간략한 설명과 액션을 포함합니다. 정보를 시각적으로 구분하고 그룹화하여 사용자가 콘텐츠를 쉽게 스캔하고 인터랙션할 수 있게 합니다.

주요 구성 요소

  • 제목: 간결하고 명확한 제목
  • 이미지/아이콘: 시각적 요소 (선택 사항)
  • 설명: 간략한 내용 요약
  • 액션 버튼: 인터랙션 요소
  • 메타데이터: 태그, 날짜, 작성자 등

사용 사례

  • 상품 목록 (이커머스)
  • 뉴스 블로그 글
  • 소셜 미디어 피드
  • 대시보드 정보 패널
  • 사용자 프로필
  • 포트폴리오 프로젝트 시각화

List View (리스트 뷰)

의의

리스트 뷰는 항목들을 세로로 나열하는 UI 패턴으로, 주로 텍스트와 간단한 컨트롤로 구성됩니다. 사용자들이 여러 항목을 검색하고 선택하며 작업을 수행하는 효율적인 방법을 제공합니다.

일반적인 용도

  • 이메일 메시지, 알림 표시
  • 설정 옵션 나열
  • 작업 목록 관리
  • 검색 결과 표시
  • 연락처 목록 관리
  • 콘텐츠 카테고리 검색

주요 특징

  • 스크롤 가능한 리스트
  • 클릭 가능한 인터페이스
  • 롱프레스 컨텍스트 작업
  • 선택/비선택 상태 UI
  • 다양한 밀도 레이아웃 지원
  • 드래그 앤 새로고침 풀 스크롤 지원

Grid View (그리드 뷰)

Grid View란?

Grid View는 2차원 격자 형태로 아이템들을 배치하는 레이아웃 컴포넌트입니다. 이미지 갤러리, 상품 목록, 카드 레이아웃 등에 주로 사용됩니다.

주요 특징

  • • 반응형 디자인: 화면 크기에 따라 자동으로 열 수 조정
  • • 균등한 크기: 모든 아이템이 일정한 크기를 유지
  • • 스크롤 지원: 내용이 많을 때 자동으로 스크롤 제공
  • • 터치 친화적: 모바일 디바이스에서 직관적인 탐색

사용 사례

  • • 사진 갤러리 및 이미지 앨범
  • • 상품 카탈로그 및 쇼핑몰 상품 진열
  • • 앱 아이콘 그리드(홈스크린)
  • • 포트폴리오 및 작품 표시
  • • 뉴스 기사 썸네일 레이아웃

구현 시 고려사항

  • • 적절한 이미지 비율과 크기 설정
  • • 로딩 상태 및 플레이스홀더 제공
  • • 접근성을 위한 적절한 내비게이션 지원
  • • 성능 최적화를 위한 가상화(Virtualization) 고려
  • • 스크롤 위치 유지 및 무한 스크롤 기능 고려

Scroll View (스크롤뷰)

정의

스크롤뷰는 화면에 표시 가능한 영역보다 많은 콘텐츠를 담을 수 있는 컨테이너로 사용자가 스크롤하여 내용을 탐색할 수 있게 합니다. 수직, 수평, 또는 양방향 스크롤을 지원합니다.

스크롤뷰 종류

  • 수직 스크롤(Vertical Scroll)

    위아래로 스크롤하는 가장 일반적인 형태

  • 수평 스크롤(Horizontal Scroll)

    좌우로 스크롤하는 형태, 갤러리나 캐러셀에 자주 사용

  • 양방향 스크롤(Both Directions)

    수직과 수평 모두 스크롤 가능한 형태, 큰 데이터 표에 사용

  • 페이지 스크롤(Paging)

    한 번에 한 페이지씩 스크롤되는 형태

고려사항

  • 스크롤바 디자인과 가시성
  • 스크롤 성능 최적화(특히 많은 아이템을 표시할 때)
  • 스크롤 위치 저장 및 복원
  • 풀-투-리프레시(Pull-to-refresh) 같은 상호작용 추가
  • 스크롤 이벤트 처리 (지연 로딩, 애니메이션 등)
  • 스크롤 스냅 포인트(Snap Points) 설정
  • 키보드 내비게이션과 접근성

구현 시 접근성

  • 스크롤 위치 표시기를 제공하여 현재 위치 인식 쉽게
  • 스크롤 상단으로 이동 버튼으로 긴 콘텐츠 탐색 지원
  • 키보드 탐색(방향키, Page Up/Down) 지원
  • 스크롤 애니메이션을 부드럽게 처리
  • 중요 정보는 스크롤 없이 볼 수 있도록 배치
  • 콘텐츠 로딩 상태를 명확히 표시
  • 터치 제스처와 마우스를 모두 고려한 설계

Infinite Scroll (무한 스크롤)

무한 스크롤이란?

무한 스크롤을 사용하면 페이지 단위의 전달을 없이 자동으로 추가 콘텐츠를 로드하는 UX 패턴입니다. 별도로 페이지 이동이나 '더보기' 버튼 없이 연속적인 콘텐츠 탐색 경험을 제공합니다.

구현 방식

  • • Intersection Observer API: 요소가 뷰포트에 들어오는지 감지하는 현대적인 방식
  • • 스크롤 이벤트: 스크롤 위치를 추적하는 전통적인 방식 (성능 주의)
  • • 가상화(Virtualization): 대량의 데이터에 대해 보이는 부분만 렌더링
  • • 페이지네이션 API 활용: 서버에서 페이지 단위 커서 기반 페이지네이션 호출

사용 사례

  • • 소셜 미디어 피드 (Facebook, Twitter, Instagram 등)
  • • 검색 결과 목록
  • • 제품 카탈로그
  • • 뉴스 피드
  • • 이미지 갤러리
  • • 댓글 섹션

장단점 비교

장점
  • • 연속적인 탐색 경험
  • • 페이지 전환 없음
  • • 사용자 참여 증대
  • • 모바일 친화적
단점
  • • 성능 이슈 가능성
  • • 특정 위치 찾기 어려움
  • • 접근성 문제 발생 가능
  • • SEO 최적화 어려움

구현 시 고려사항

  • • 로딩 상태 표시기 제공
  • • 에러 처리 및 재시도 메커니즘
  • • 메모리 사용량 관리(데이터가 많을 경우)
  • • 디바운싱(debouncing) 또는 스로틀링(throttling) 활용
  • • 초기 로드 시간 최적화
  • • SEO 및 접근성 고려

Drawer (드로어)

의의

드로어(Drawer)는 화면 가장자리에서 슬라이딩하여 나타나는 패널로, 주로 내비게이션이나 추가 컨트롤을 위해 사용됩니다. 일반적으로 햄버거 메뉴 아이콘이나 스와이프 제스처로 열고 닫을 수 있습니다.

드로어 종류

  • 측면 드로어(Side Drawer)

    화면 좌측 또는 우측에서 슬라이드, 주로 내비게이션에 사용

  • 바닥 드로어(Bottom Drawer)

    화면 아래에서 위로 슬라이드, 추가 액션이나 컨텐츠에 사용

  • 상단 드로어(Top Drawer)

    화면 위에서 아래로 슬라이드, 알림이나 검색에 사용

  • 임시 드로어(Temporary Drawer)

    햄버거 아이콘으로 임시로 열고 오버레이 클릭으로 닫힘

  • 영구 드로어(Permanent Drawer)

    항상 화면에 표시되고 닫히지 않음 (주로 데스크톱에서 사용)

사용 패턴

  • 모바일 내비게이션 메뉴
  • 필터 및 정렬 액션
  • 설정 패널
  • 사용자 프로필 드로어
  • 추가 정보 및 상세 설명
  • 미니 장바구니
  • 알림 필터
  • 사이드바 내비게이션

개발자 권장사항

  • 명확한 계층 구조

    드로어는 메인 콘텐츠에 비해 덜 중요한 느낌을 주어야 합니다

  • 직관적인 인터페이스

    열고 닫는 부드럽고 자연스러운 인터페이스 제공

  • 적절한 크기

    화면의 부분적인 영역을 차지하여 컨텍스트 유지

  • 명확한 닫기 방법

    닫기 버튼, 오버레이 영역 또는 스와이프 제스처 등 다양한 닫기 옵션 제공

  • 상태 변환 시

    열리거나 닫힐 때 부드러운 애니메이션으로 상태 변환 표시

  • 콘텐츠 구성

    중요도에 따라 콘텐츠를 구성하고 스크롤이 필요한 경우 분명한 스크롤 표시

Bottom Navigation (하단 네비게이션)

정의

하단 네비게이션은 모바일 앱에서 화면 하단에 위치하는 네비게이션 바로, 앱의 주요 탐색 기능을 제공합니다. 사용자가 항상 쉽게 접근할 수 있는 영역에 주요 기능을 배치하여 사용성을 높이는 UI 패턴입니다.

스타일 가이드

  • 기본형 (Default)

    아이콘과 텍스트 조합, 활성 탭을 강조 표시

  • 레이블형 (Labeled)

    아이콘과 텍스트를 더 구분되도록 배치

  • 시프팅형 (Shifting)

    활성 탭은 확장되고 나머지는 축소, 탭 레이블은 활성 탭에만 표시

  • 아이콘전용 (Icon-only)

    공간 절약을 위해 아이콘만 사용하는 최소화의 디자인

  • 배지형 (Badge)

    알림이나 카운터를 표시하는 배지가 포함된 디자인

디자인 지침

  • 3-5개의 탭으로 제한 (너무 많으면 탐색이 어려움)
  • 앱의 핵심 기능에 집중
  • 명확한 아이콘과 레이블 사용
  • 현재 위치를 명확히 표시
  • 터치 영역 충분히 확보 (최소 48x48dp)
  • 세로 방향(portrait) 사용 시 적합
  • 스크롤 시 동작 여부 고려

사용 예시

  • 소셜 미디어 앱
  • 쇼핑 앱
  • 뉴스/컨텐츠 앱
  • 멀티 기능 앱
  • 탐색이 중요한 앱

구현 시 접근성

  • 아이콘과 텍스트를 함께 사용하여 이해도 향상
  • 탭 전환 시 부드러운 애니메이션 사용
  • 컬러 대비 충분히 확보
  • 스크린 리더 지원을 위한 적절한 aria 속성 사용
  • 포커스 지원 (탭/시프트 키 전환)
  • 홈 버튼이나 뒤로 가기에 대한 적절한 처리
  • 화면 크기에 따른 반응형 대응

Bottom Sheet (바텀 시트)

정의

바텀 시트는 화면 하단에서 올라오는 패널로 화면 아래에서 위로 추가적인 콘텐츠나 작업을 표시합니다. 모달(Modal)처럼 사용하여 문맥에 맞는 화면에서 호출하여 사용하는 UI 패턴입니다.

바텀 시트 유형

  • 기본형 (Standard)

    일반적인 바텀 시트로 추가 정보나 설정을 표시

  • 모달형 (Modal)

    배경을 어둡게 하여 콘텐츠와 인터랙션 차단

  • 확장형 (Expandable)

    드래그 제스처로 높이를 확장 가능한 형태

  • 스크롤형 (Scrollable)

    길이가 긴 콘텐츠를 표시하기 위해 스크롤 제공

  • 액션 시트 (Action Sheet)

    여러 작업 옵션을 리스트로 제공

사용 사례

  • 필터 및 정렬 옵션
  • 댓글 및 리뷰 목록
  • 지도 상세 정보
  • 공유 메뉴
  • 설정 패널
  • 미디어 컨트롤
  • 폼 입력
  • 장바구니 결제

사용자 경험 고려사항

  • 부드럽고 자연스러운 애니메이션
  • 여러 방법으로 닫을 수 있는 옵션 (핸들 드래그, 배경 클릭, X 버튼)
  • 적절한 높이로 중요 콘텐츠 표시
  • 상황에 맞는 정보와 처리
  • 스와이프 제스처 (드래그로 닫기)

구현 팁

  • 위치 기반 스타일로 드래그하여 열고 닫기 구현
  • 변형(transform) 속성으로 성능 최적화된 애니메이션
  • 하단 근처 모서리를 둥글게 만들어 자연스러운 느낌
  • 모바일 환경에서 시각적으로 적절한 위치 조정
  • 하단의 높이(기본, 중간, 최대)로 사용자 경험 개선
  • 스와이프 제스처 처리 (시트 콘텐츠에 따라 달라질 수 있음)

App Bar (앱바)

정의

앱바(App Bar)는 화면 상단에 위치한 컴포넌트로, 현재 화면의 제목과 함께 네비게이션, 검색, 액션 버튼과 같은 주요 기능을 제공합니다. 일반적으로 '툴바(Toolbar)' 또는 '네비게이션 바(Navigation Bar)'라고도 불립니다.

특징

  • 화면 상단에 고정되어 표시됩니다
  • 좌측에는 현재 화면의 제목을 표시합니다
  • 네비게이션 메뉴 버튼, 뒤로 가기 버튼 등을 포함합니다
  • 검색, 공유, 설정 등의 액션 버튼을 우측에 배치합니다
  • 스크롤 시 숨김/표시 기능을 지원할 수 있습니다.
  • 브랜드 색상을 사용하여 앱의 아이덴티티를 강조합니다

앱바 유형

  • 기본형 (Standard)

    가장 일반적인 형태로, 제목과 액션 버튼을 포함합니다

  • 컨텍스트형 (Contextual)

    항목 선택 시 나타나며, 선택된 항목에 대한 액션을 제공합니다

  • 검색형 (Search)

    검색 기능을 강조한 형태로, 검색창이 중앙에 배치됩니다

  • 확장형 (Prominent)

    추가 콘텐츠나 탭을 포함하는 확장된 높이의 앱바입니다.

  • 축소형 (Collapsed)

    스크롤 시 높이가 축소되어 화면 공간을 효율적으로 사용합니다

사용 사례

  • 앱 내 화면 간 이동 및 네비게이션
  • 현재 위치 표시 및 계층 구조 전달
  • 검색 기능 제공
  • 알림, 메시지 등의 상태 표시
  • 설정, 공유, 즐겨찾기 등 자주 사용하는 기능 접근
  • 항목 선택 시 관련 액션 표시
  • 사용자 계정 및 프로필 관리

디자인 지침

  • 액션 버튼은 우선순위에 따라 배치합니다
  • 3-5개의 액션 버튼으로 제한하여 복잡성을 방지합니다
  • 충분한 터치 영역(최소 48x48dp)을 확보합니다
  • 브랜드 색상과 대비를 고려하여 가독성을 확보합니다
  • 반응형으로 설계하여 다양한 화면 크기에 대응합니다
  • 적절한 그림자 및 패딩을 사용하여 시각적 안정감을 제공합니다

탭바(Tab Bar)

정의

탭바(Tab Bar)는 일관된 계층 구조에서 여러 화면을 전환하는 콘텐츠 전환을 위한 네비게이션 컴포넌트입니다. 사용자에게 쉽게 관리할 수 있는 콘텐츠간을 이동할 수 있도록 카테고리별로 구분하여 직관적인 인터페이스를 제공합니다.

탭바 스타일

  • 기본형(Basic)

    일반적인 텍스트만 있는 단순 인디케이터로 구성된 스타일

  • 아이콘 언더라인형(Underline)

    아이콘과 텍스트 결합, 세로로 언더라인 인디케이터 표시

  • 스크롤형 (Scrollable)

    많은 탭 항목을 한번에 가로로 스크롤 가능한 방식

  • 알약형 (Pills)

    둥근 모서리의 태블릿 전체 배경 강조하는 방식

  • 머티리얼형(Material)

    애니메이션 인디케이터가 함께 동작하며 부드럽게 전환

사용 사례

  • 카테고리별 콘텐츠 분류 (뉴스, 스포츠, 엔터테인먼트 등)
  • 설정 페이지의 섹션 구분 (일반, 계정, 알림 등)
  • 상품 상세 페이지의 정보 구분 (상세정보, 리뷰, 문의 등)
  • 소셜 미디어의 피드라인 분류 (프로필, 인기, 추천 등)
  • 다양한 보기 모드 전환 (목록형, 갤러리형, 지도형 등)

접근성 고려사항

  • 충분한 터치 영역으로 가독성 보장
  • 적절한 터치 영역 크기 (최소 48x48dp)
  • 현재 선택된 탭의 명확한 표시
  • 스크린 리더 지원 (ARIA 속성 사용)
  • 키보드 접근성 지원

디자이너 권장사항

  • 타겟 사용자의 언어 사용 (폰트 크기와 스타일)
  • 한번에 보이는 탭의 적절한 개수 (4-6개 권장)
  • 명확한 라벨 사용 (짧고 직관적인 단어 선택)
  • 아이콘과 텍스트 조합으로 이해도 향상
  • 적절한 여백과 간격으로 가독성 보장
  • 탭 전환 시 부드러운 애니메이션 사용
  • 다양한 디바이스 크기 고려 (탭 좌우 스크롤)

FloatingActionButton (FAB)

정의

Floating Action Button(FAB)은 화면 위에 떠 있는 원형 버튼으로, 사용자가 현재 화면에서 취할 수 있는 주요 액션을 표시합니다. 일반적으로 화면의 오른쪽 하단이나 중앙 하단에 위치하며, 가장 중요하거나 자주 사용하는 작업에 빠르게 접근할 수 있게 합니다.

기본 FAB

일반적인 크기의 원형 버튼으로 아이콘만 표시합니다.

사용 예시:

새 메시지 작성, 새 항목 추가 등 주요 액션

FAB 유형

  • 기본형(Regular FAB)

    지름 56dp의 표준 크기, 주요 액션에 사용

  • 미니형(Mini FAB)

    지름 40dp의 작은 크기, 보조 액션에 사용

  • 확장형(Extended FAB)

    텍스트와 아이콘을 함께 표시하는 직사각형 형태

  • 스피드 다이얼(Speed Dial)

    클릭 시 여러 관련 액션을 보여주는 확장 가능 FAB

위치 및 동작

  • 일반적으로 오른쪽 하단이나 중앙 하단에 위치
  • 스크롤 시에도 항상 보이도록 고정 위치 사용
  • 화면 및 상황 시 자동으로 위치 조정
  • 뷰 전환 시 FAB 액션이 변경될 수 있음
  • FAB은 화면에 표시된 내용과 관련된 액션 제공
  • 접근성을 위한 충분한 터치 영역 확보
  • 시각적 피드백과 애니메이션으로 상호작용 강화

디자인 권장사항

  • Z-축 그림자

    FAB이 떠 있는 효과를 강조하기 위해 그림자 사용

  • 명확한 아이콘 사용

    FAB의 기능을 직관적으로 이해할 수 있는 아이콘 선택

  • 적용된 인터랙션 효과

    애플리케이션의 브랜드 이미지와 디자인 언어 유지

  • 애니메이션 효과

    클릭, 호버, 확장 등 부드러운 애니메이션 사용

  • 모바일 최적화

    터치 조작에 최적화된 크기와 간격 확보

Search Bar (검색바)

의의

검색바(Search Bar)는 사용자가 애플리케이션 내에서 특정 콘텐츠를 검색할 수 있게 해주는 사용자 인터페이스 요소입니다. 일반적으로 텍스트 입력 필드와 검색 아이콘으로 구성되며, 필요에 따라 음성 검색, 필터 옵션 등 추가 기능을 포함하기도 합니다.

검색바 유형

  • 기본형(Basic)

    항상 표시되는 기본적인 검색 필드

  • 확장형(Expandable)

    아이콘을 클릭하면 확장되는 검색바

  • 영구형(Persistent)

    탑바에 통합된 형태의 검색 필드

  • 필터형(With Filters)

    추가 필터 옵션을 포함한 검색바

  • 제안형(Suggestions)

    검색어 입력 시 제안을 표시

주요 구성 요소

  • 검색 아이콘
  • 텍스트 입력 필드
  • 지우기 버튼
  • 음성 검색 버튼 (선택)
  • 필터 옵션 (선택)
  • 추천 검색어 (선택)
  • 최근 검색어 (선택)

Hero (히어로)

정의

히어로(Hero)는 웹사이트의 최상단 화면에 위치하는 큰 배너 영역으로, 사용자의 주목을 끌고 핵심 메시지를 전달하는 주요 섹션입니다. 일반적으로 강렬한 이미지, 영상 또는 그래픽 요소와 함께 헤드라인, 간결한 설명, 그리고 행동 유도 버튼(CTA)으로 구성됩니다.

🖼️

기본 히어로 섹션

웹사이트의 첫인상을 결정하는 히어로 섹션으로 방문자의 주의를 끌고 핵심 메시지를 효과적으로 전달합니다.

기본 히어로 섹션

배경 이미지와 왼쪽 정렬된 텍스트로 구성된 일반적인 히어로 섹션입니다. 대부분의 웹사이트에서 범용적으로 사용됩니다.

사용 시 고려사항:
  • 메시지를 간결하고 명확하게 작성
  • 모바일 화면에 최적화된 반응형 레이아웃 사용
  • 로딩 시간 최적화 (특히 비디오 배경 사용 시)
  • 핵심 콘텐츠의 시각적 요소가 이미지 도용에 주의
  • 명확하고 눈에 띄는 행동 유도 버튼(CTA) 배치

히어로 섹션 유형

  • 기본형 (Basic Hero)

    배경 이미지와 텍스트, 오버레이를 사용하는 기본 상태

  • 중앙 정렬형 (Centered Hero)

    모든 요소가 중앙으로 정렬되어 깔끔하고 집중적인 레이아웃

  • 분할형 (Split Hero)

    화면을 반으로 나누어 텍스트와 이미지를 균등하게 배치

  • 비디오형 (Video Hero)

    움직이는 영상을 배경으로 사용하여 몰입감을 제공

  • 풀스크린형 (Fullscreen Hero)

    화면 전체를 채우는 큰 히어로 섹션

  • 애니메이션형 (Animated Hero)

    동적 요소와 애니메이션을 사용하는 인터랙티브한 레이아웃

주요 구성 요소

  • 헤드라인 (Headline)

    주요 메시지를 전달하는 강력하고 간결한 제목

  • 서브헤드라인 (Subheadline)

    헤드라인을 보완하는 부가 설명

  • CTA 버튼 (Call-to-Action)

    사용자의 다음 행동을 유도하는 버튼

  • 배경 이미지/비디오 (Background)

    주의를 끌고 메시지를 강화하는 시각적 요소

  • 오버레이 (Overlay)

    텍스트의 가독성을 향상시키기 위한 반투명 레이어

  • 네비게이션 요소 (Navigation)

    히어로 섹션 위에 포함되는 네비게이션 컴포넌트

효과적인 히어로 섹션 작성 팁

  • 명확한 목적 정의

    히어로 섹션이 전달하고자 하는 핵심 메시지와 목표를 명확하게 설정

  • 시각적 계층 구조 설립

    중요한 요소를 시각적으로 강조하여 사용자의 시선 유도

  • 간결하고 강력한 복사 작성

    불필요한 단어 제거하고 핵심 메시지를 명확하게 전달

  • 고품질 이미지 사용

    브랜드 이미지와 맞는 전문적인 관련성과 시각적 요소 선택

  • 모바일 최적화

    다양한 화면 기기에서 효과적으로 동작하는 반응형 레이아웃 사용

  • 로딩 시간 최적화

    이미지 최적화와 지연 로딩 기법으로 성능 향상

  • A/B 테스트 실시

    다양한 변수를 테스트하여 최적의 결과 도출

tsx
// 기본 히어로 섹션 구현

import React from 'react';


const BasicHero: React.FC = () => {
  const handleLearnMore = () => {
    console.log('세부사항 보기 버튼 클릭됨');
  };

  return (
    <div className="h-96 bg-gray-200 flex items-center relative overflow-hidden">
      {/* 배경 이미지 영역 */}
      <div className="absolute inset-0">
        <div className="w-full h-full bg-gray-300 flex items-center justify-center">
          <span className="text-4xl text-gray-500" role="img" aria-label="배경 이미지">🖼️</span>
        </div>
      </div>
      
      {/* 그라디언트 오버레이 */}
      <div className="absolute inset-0 bg-gradient-to-r from-[#49bcf3]/90 to-transparent z-10"></div>
      
      {/* 콘텐츠 */}
      <div className="relative z-20 text-white p-6 max-w-lg">
        <h1 className="text-2xl font-bold mb-2">기본 히어로 섹션</h1>
        <p className="text-white/80 mb-4 text-sm leading-relaxed">
          웹사이트의 첫인상을 결정하는 히어로 섹션으로 방문자의 주의를 끌고 핵심 메시지를 효과적으로 전달합니다.
        </p>
        <button 
          onClick={handleLearnMore}
          className="bg-white text-[#49bcf3] px-6 py-3 rounded-md font-medium text-sm hover:bg-gray-100 transition-colors focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-[#49bcf3]"
        >
          세부사항 보기
        </button>
      </div>
    </div>
  );
};

export default BasicHero;

결론

UI 컴포넌트와 상호작용 방식을 이해하는 것은 효과적인 디자인과 개발의 핵심입니다.

  • ✓
    일관된 언어 사용

    팀 전체가 동일한 UI 언어를 사용하면 소통과 협업이 원활해집니다.

  • ✓
    사용자 경험 중심 설계

    적절한 UI 요소 선택은 직관적이며 사용하기 쉬운 인터페이스로 이어집니다.

  • ✓
    접근성 고려

    다양한 상호작용 방식을 지원하여 모든 사용자가 접근할 수 있는 UI를 구축하세요.

  • ✓
    재사용 가능한 컴포넌트 설계

    잘 설계된 컴포넌트 시스템은 개발 효율성과 디자인 일관성을 향상시킵니다.

다음 단계

UI 디자인 시스템 구축

조직 전체에서 사용할 수 있는 통일된 컴포넌트 라이브러리 개발

사용성 테스트 진행

실제 사용자와 함께 UI 컴포넌트와 상호작용 테스트

최신 UI 트렌드 학습

지속적인 학습을 통해 UI 디자인 역량 향상

감사합니다

1 / 37