# mdui v2 Documentation

mdui is an front-end component library based on Material Design 3, using Web Components, supporting dynamic colors, dark mode, and lightweight efficiency.

## 개발 가이드

- [개요](https://www.mdui.org/ko/docs/2/index.md): mdui는 Web Components 기반 라이브러리로 50여 종의 Material Design 컴포넌트를 제공합니다. 다크 모드, 현지화, TypeScript를 지원하며 현대적인 웹 앱을 빠르게 개발할 수 있는 문서와 플레이그라운드를 제공합니다.
- [설치](https://www.mdui.org/ko/docs/2/getting-started/installation.md): mdui는 npm, pnpm 및 CDN을 통한 설치를 지원합니다. 전체 및 개별 가져오기 옵션을 제공하며, 개별 가져오기 시 프로젝트 크기를 크게 줄일 수 있습니다. 글로벌 빌드와 ES 모듈 버전 사용법을 상세히 안내하여 프로젝트 통합을 돕습니다.
- [빠른 시작](https://www.mdui.org/ko/docs/2/getting-started/usage.md): mdui는 Web Components 기반으로 속성, 프로퍼티, 메서드, 이벤트, 슬롯 및 CSS 사용자 정의 속성 사용법을 다룹니다. 컴포넌트 업데이트와 스타일링 기법을 안내하여 효율적인 개발 방법을 쉽게 익힐 수 있도록 상세히 설명합니다.
- [TypeScript 지원](https://www.mdui.org/ko/docs/2/getting-started/typescript-support.md): mdui는 TypeScript로 작성되어 완벽한 타입 선언을 제공합니다. 모든 컴포넌트와 함수에 타입 정의가 포함되어 자동 완성 및 타입 검사가 가능합니다. 컴포넌트 파일이나 메인 패키지에서 타입을 가져올 수 있어 개발 효율과 품질이 향상됩니다.
- [IDE 지원](https://www.mdui.org/ko/docs/2/getting-started/ide-support.md): mdui는 VS Code 및 WebStorm에 최적화된 지원을 제공합니다. npm 설정이나 확장 프로그램을 통해 코드 자동 완성, 호버 힌트, 속성값 제안을 받을 수 있습니다. HTML 및 CSS 데이터 지원이 포함되어 개발 효율을 크게 향상시켜줍니다.
- [현지화](https://www.mdui.org/ko/docs/2/getting-started/localization.md): mdui는 다국어 지원이 내장되어 있으며 지연 로딩, 미리 로딩, 정적 가져오기 등 언어 팩 로드 방식을 지원합니다. 50개 이상의 공식 언어 팩을 CDN을 통해 활용 가능하며, 현지화 상태 이벤트를 제공하여 글로벌 애플리케이션 구축을 돕습니다.
- [자주 묻는 질문](https://www.mdui.org/ko/docs/2/getting-started/faq.md): mdui 커뮤니티의 빈번한 질문과 공식 답변을 모았습니다. 셀프 클로징 태그 사용법, 컴포넌트 로드 전 숨김 처리 등 주요 이슈를 다룹니다. 상세한 해결책과 코드 예제를 제공하여 개발 중 겪는 어려움을 빠르게 해결할 수 있도록 지원합니다.

## AI 보조 개발

- [LLMs.txt](https://www.mdui.org/ko/docs/2/ai/llms.md): mdui는 llms.txt와 llms-full.txt를 통해 대규모 언어 모델에 정확한 컨텍스트를 제공합니다. 각 문서의 Markdown 버전을 제공하여 직접 복사, 파일 업로드, 온라인 읽기 등 다양한 방식으로 AI 지원 개발의 효율을 높여줍니다.
- [MCP 서버](https://www.mdui.org/ko/docs/2/ai/mcp.md): @mdui/mcp는 Cursor 등 AI 에이전트를 위한 MCP 서버 통합을 제공합니다. 컴포넌트 속성, Material Icons, CSS 사용자 정의 속성 및 문서 내용을 조회할 수 있어 AI 보조 개발의 깊이를 더하고 자동화된 코딩 경험을 향상시켜줍니다.

## 스타일

- [다크 모드](https://www.mdui.org/ko/docs/2/styles/dark-mode.md): mdui의 모든 컴포넌트에는 다크 모드 지원이 내장되어 있습니다. 시스템 테마를 따르거나 수동으로 설정할 수 있으며, CSS 클래스나 setTheme/getTheme 함수로 제어합니다. 전역 또는 국소 테마 재정의를 지원하여 다양한 시나리오에 유연하게 대응합니다.
- [다이내믹 컬러](https://www.mdui.org/ko/docs/2/styles/dynamic-color.md): mdui는 기본 색상으로 밝은/어두운 색상표를 자동 생성합니다. setColorScheme 등 함수로 이미지에서 주요 색상을 추출하고 조화로운 배색을 완성할 수 있어 개인화된 애플리케이션 테마를 손쉽게 구축하도록 돕습니다.
- [글 스타일링](https://www.mdui.org/ko/docs/2/styles/prose.md): mdui는 mdui-prose 및 mdui-table 클래스를 통해 기사와 표 레이아웃을 최적화합니다. 추가 스타일 없이 우아한 글꼴과 간격을 즉시 적용할 수 있으며, Markdown이나 동적 콘텐츠의 가독성을 획기적으로 향상시켜줍니다.
- [디자인 토큰](https://www.mdui.org/ko/docs/2/styles/design-tokens.md): mdui는 글로벌 CSS 사용자 정의 속성을 통해 디자인 토큰 시스템을 구현합니다. 색상, 테두리 반경, 타이포그래피, 애니메이션 등 100개 이상의 토큰을 포함하며, 이를 사용자 지정하여 통일된 디자인 언어를 구축하면 모든 컴포넌트 스타일에 즉시 반영됩니다.

## 프레임워크와 통합

- [React와 통합하기](https://www.mdui.org/ko/docs/2/frameworks/react.md): mdui는 Web Components 기반으로 React에서 HTML 태그처럼 직접 사용할 수 있습니다. TypeScript 기반의 이벤트와 속성 바인딩이 지원되며 React 연동을 위한 실무 가이드와 예제를 상세히 안내합니다.
- [Vue와 통합하기](https://www.mdui.org/ko/docs/2/frameworks/vue.md): mdui는 Vue에서 간단한 설정으로 통합이 가능합니다. Vue 3 예제와 v-model 바인딩, 이벤트 리스너를 상세히 다루며 TypeScript 타입 검사와 IDE 힌트 기능도 지원하여 개발 효율을 높여줍니다.
- [Angular와 통합하기](https://www.mdui.org/ko/docs/2/frameworks/angular.md): mdui는 Angular에서 Web Components 지원을 위해 별도 설정이 필요합니다. 통합 가이드와 예제를 통해 의존성 주입, 양방향 바인딩 등 Angular 기능과의 연동 방법을 안내하며 완전한 TypeScript 타입을 제공합니다.
- [다른 프레임워크와 통합하기](https://www.mdui.org/ko/docs/2/frameworks/others.md): mdui는 Web Components 표준 기반으로 모든 현대적 웹 프레임워크와 호환됩니다. Svelte, Next.js, Nuxt 등을 지원하며 범용 통합 방법과 주요 프레임워크별 연동을 위한 최적의 실무 가이드를 상세히 제공합니다.

## 컴포넌트

- [아바타 컴포넌트 Avatar](https://www.mdui.org/ko/docs/2/components/avatar.md): 아바타는 사용자, 사물 또는 브랜드를 나타냅니다. 이미지, Material Icons 아이콘, 텍스트 등 세 가지 형태를 지원합니다. 크기, 모양(원형/사각형), 이미지 채우기 방식을 설정할 수 있습니다. 사용자 프로필, 댓글, 카드 등에서 자주 사용됩니다.
- [배지 컴포넌트 Badge](https://www.mdui.org/ko/docs/2/components/badge.md): 배지는 숫자나 텍스트로 카운트 및 상태를 표시하며 두 가지 크기를 지원합니다. 주로 아이콘이나 버튼 등에 부착되어 읽지 않은 메시지 수나 새로운 소식 등을 알리는 데 사용됩니다. 최소한의 공간에서 중요한 알림 정보를 효과적으로 전달합니다.
- [하단 앱 바 컴포넌트 BottomAppBar](https://www.mdui.org/ko/docs/2/components/bottom-app-bar.md): 하단 앱 바는 모바일 화면 하단에 탐색 및 작업 버튼을 배치하며 플로팅 액션 버튼(FAB)을 포함할 수 있습니다. 스크롤 시 숨김, 고정 배치, 색상 및 스타일 설정을 지원합니다. 주요 기능을 한곳에 모아 엄지손가락만으로 편리한 조작을 가능하게 합니다.
- [버튼 컴포넌트 Button](https://www.mdui.org/ko/docs/2/components/button.md): 버튼 컴포넌트는 5가지 스타일과 호버, 비활성화, 로딩 등 모든 상호작용 상태를 지원합니다. 아이콘과 링크 기능이 내장되어 있으며 Material Design 3 규격을 준수해 뛰어난 접근성과 양식 지원 기능을 제공합니다.
- [아이콘 버튼 컴포넌트 ButtonIcon](https://www.mdui.org/ko/docs/2/components/button-icon.md): 아이콘 버튼은 보조 작업용으로 네 가지 스타일을 지원하며 클릭 또는 링크로 설정 가능합니다. 상태 피드백, 비활성화, 로딩 상태를 제공하며 도구 모음이나 카드 등에 적합한 경량 디자인으로 인터페이스를 간결하게 유지해줍니다.
- [카드 컴포넌트 Card](https://www.mdui.org/ko/docs/2/components/card.md): 카드는 관련 콘텐츠와 작업을 보여주는 다용도 컨테이너입니다. 세 가지 스타일과 클릭, 링크, 비활성화 상태를 지원하며 다양한 미디어와 텍스트를 유연하게 구성할 수 있어 단독 정보나 목록 형태의 콘텐츠 구성에 적합한 기본 단위입니다.
- [체크박스 컴포넌트 Checkbox](https://www.mdui.org/ko/docs/2/components/checkbox.md): 체크박스는 다중 선택을 지원하며 선택, 미선택, 불확정 상태를 제공합니다. 사용자 지정 아이콘, 비활성화, 유효성 검사 기능이 포함되어 양식 작성이나 권한 설정 등 다양한 선택 시나리오에서 신뢰할 수 있는 인터페이스를 제공합니다.
- [칩 컴포넌트 Chip](https://www.mdui.org/ko/docs/2/components/chip.md): 칩은 입력, 선택, 필터링 등 작업을 나타내며 네 가지 변형을 지원합니다. 삭제, 선택, 클릭, 아이콘 추가 기능이 포함되어 카테고리 분류나 필터 조건 설정 등 다양한 시나리오에서 정보 전달과 상호작용을 돕는 유연한 컴포넌트입니다.
- [원형 프로그레스 컴포넌트 CircularProgress](https://www.mdui.org/ko/docs/2/components/circular-progress.md): 원형 프로그레스는 링 형태로 진행도를 표시하며 확정 값 또는 회전 애니메이션 상태를 제공합니다. 크기, 색상, 두께를 조절할 수 있어 버튼 내 로딩 표시나 페이지 새로 고침 등 좁은 공간에서도 효율적인 피드백을 전달할 수 있습니다.
- [접기 패널 컴포넌트 Collapse](https://www.mdui.org/ko/docs/2/components/collapse.md): 접기는 계층적 콘텐츠를 그룹화하여 펼치거나 접음으로써 공간을 절약합니다. 아코디언 모드와 사용자 지정 트리거를 지원하며 비활성화 설정이 가능합니다. FAQ나 설정 옵션 관리 등 복잡한 내용을 간결하게 구성하는 데 유용한 컴포넌트입니다.
- [대화상자 컴포넌트 Dialog](https://www.mdui.org/ko/docs/2/components/dialog.md): 다이얼로그는 중요한 정보 알림이나 사용자 입력 확인을 위해 사용됩니다. 제목, 설명, 모달 및 전체 화면 모드를 지원하며 헤더와 버튼 구성을 사용자 지정할 수 있습니다. 프로그래밍 방식의 함수도 제공하여 효율적으로 대화창을 구현할 수 있도록 돕습니다.
- [구분선 컴포넌트 Divider](https://www.mdui.org/ko/docs/2/components/divider.md): 구분선은 콘텐츠 영역이나 목록 항목 간을 시각적으로 분리하여 구조화합니다. 가로 및 세로 방향과 들여쓰기 옵션을 지원하며 색상과 간격을 조절할 수 있습니다. 복잡한 인터페이스에서 계층 구조를 명확히 하는 데 필수적인 레이아웃 요소입니다.
- [드롭다운 컴포넌트 Dropdown](https://www.mdui.org/ko/docs/2/components/dropdown.md): 드롭다운은 클릭이나 호버 시 메뉴나 사용자 지정 콘텐츠를 팝업합니다. 다양한 트리거 방식과 자동 위치 조정을 지원하며 열기 지연, 클릭 유지 등의 상세 설정을 통해 풍부한 상호작용을 구현합니다. 범용적인 활용도가 높은 팝업 컴포넌트입니다.
- [플로팅 액션 버튼 컴포넌트 Fab](https://www.mdui.org/ko/docs/2/components/fab.md): 플로팅 액션 버튼(FAB)은 주요 작업을 강조하며 두 가지 형태와 세 가지 크기를 지원합니다. 아이콘, 스타일, 색상을 설정할 수 있고 비활성화 및 로딩 상태를 제공합니다. 핵심 기능을 화면 상단에 띄워 사용자 접근성을 극대화합니다.
- [아이콘 컴포넌트 Icon](https://www.mdui.org/ko/docs/2/components/icon.md): 아이콘은 Material Icons 및 사용자 지정 SVG를 렌더링하며 색상, 크기, 회전 등 스타일 제어를 지원합니다. 버튼이나 내비게이션 등과 함께 사용되어 시각적 이해도를 높여주며 인터페이스 전반의 일관성과 심미성을 더해줍니다.
- [레이아웃 컴포넌트 Layout](https://www.mdui.org/ko/docs/2/components/layout.md): 레이아웃은 페이지의 전체 구조를 정의하며 앱 바, 드로어, 메인 콘텐츠 영역을 유기적으로 배치합니다. 유연한 반응형 그리드 시스템과 중단점 및 간격 설정을 지원합니다. 다양한 화면 크기에 대응하는 현대적인 웹 사이트 프레임워크를 빠르게 구축하게 돕습니다.
- [선형 프로그레스 컴포넌트 LinearProgress](https://www.mdui.org/ko/docs/2/components/linear-progress.md): 선형 프로그레스는 가로 막대 형태로 진행 상황을 표시하며 확정 및 불확정(버퍼) 모드를 지원합니다. 색상, 높이, 스타일의 사용자 지정이 가능하며 파일 업로드, 데이터 로딩, 양식 제출 상태 등을 사용자에게 직관적으로 전달하는 데 적합합니다.
- [목록 컴포넌트 List](https://www.mdui.org/ko/docs/2/components/list.md): 목록은 항목 집합을 세로로 정렬하며 최대 세 줄까지의 텍스트 모드를 지원합니다. 아바타, 아이콘, 버튼, 링크 등을 포함할 수 있고 둥근 모서리와 맞춤 설정이 가능합니다. 네비게이션이나 연락처 등 구조화된 정보를 표시하는 데 최적화되어 있습니다.
- [메뉴 컴포넌트 Menu](https://www.mdui.org/ko/docs/2/components/menu.md): 메뉴는 작업 옵션을 세로 목록으로 보여주며 주로 드롭다운을 통해 실행됩니다. 선택 모드, 그룹화, 단축키 표시, 중첩 메뉴를 지원하며 사용자 지정 콘텐츠와 링크 구성을 통해 컨텍스트 메뉴나 내비게이션 등에서 효율적인 조작 환경을 돕습니다.
- [하단 내비게이션 바 컴포넌트 NavigationBar](https://www.mdui.org/ko/docs/2/components/navigation-bar.md): 내비게이션 바는 모바일 주요 페이지 전환을 담당하며 3~5개 항목으로 구성됩니다. 아이콘, 활성 상태 색상, 배지 표시를 지원하며 스크롤 시 숨김 기능도 제공합니다. 모바일 환경에서 페이지 간 빠른 이동을 돕는 필수적인 내비게이션입니다.
- [내비게이션 드로어 컴포넌트 NavigationDrawer](https://www.mdui.org/ko/docs/2/components/navigation-drawer.md): 내비게이션 드로어는 화면 측면에서 슬라이드하여 나타나며 모달 및 비모달 모드를 지원합니다. 사용자 정보, 목록 항목, 구분선 등을 포함하며 왼쪽이나 오른쪽에 배치 가능합니다. 모바일과 데스크톱 모두에서 깊이 있는 탐색 구조를 제공합니다.
- [측면 내비게이션 레일 컴포넌트 NavigationRail](https://www.mdui.org/ko/docs/2/components/navigation-rail.md): 내비게이션 레일은 태블릿과 데스크톱을 위한 간결한 측면 탐색 환경을 제공합니다. 위치, 레이블 표시, 배지, 활성 상태 등의 설정을 지원하며 수직 정렬이 가능합니다. 공간을 적게 차지하면서도 주요 메뉴에 상시 접근할 수 있도록 설계되었습니다.
- [라디오 컴포넌트 Radio](https://www.mdui.org/ko/docs/2/components/radio.md): 라디오는 상호 배타적 옵션 중 하나만 선택할 수 있게 합니다. 사용자 지정 아이콘과 비활성화 상태를 지원하며, 성별 선택이나 설문 조사 등 단일 항목 응답이 필요한 상황에서 레이블과 함께 구성되어 직관적인 선택 환경을 제공합니다.
- [범위 슬라이더 컴포넌트 RangeSlider](https://www.mdui.org/ko/docs/2/components/range-slider.md): 범위 슬라이더는 두 개의 슬라이더 드래그를 통해 수치 범위를 선택할 수 있게 합니다. 단계 제어, 눈금 및 값 힌트 표시를 지원하며 힌트 숨김이나 표시 형식 지정이 가능합니다. 가격 범위나 시간 기간 설정 등 정밀한 범위 선택에 매우 효과적입니다.
- [셀렉트 컴포넌트 Select](https://www.mdui.org/ko/docs/2/components/select.md): 셀렉트는 드롭다운 목록에서 단일 또는 다중 선택을 지원합니다. 레이블, 도움말, 지우기 버튼 및 유효성 검사 기능을 갖추었으며 접두사/접미사와 아이콘 배치를 사용자 지정할 수 있습니다. 양식 작성 및 데이터 필터링 시 안정적인 입력 환경을 제공합니다.
- [세그먼트 버튼 컴포넌트 SegmentedButton](https://www.mdui.org/ko/docs/2/components/segmented-button.md): 세그먼트 버튼은 단일 또는 다중 선택을 통해 옵션 제공과 뷰 전환을 지원합니다. 아이콘, 링크, 로딩 상태를 포함하며 전체 너비 설정도 가능합니다. 옵션 제어 및 인터페이스 전환을 위한 화면 구성을 효율적으로 도와주는 핵심 컴포넌트입니다.
- [슬라이더 컴포넌트 Slider](https://www.mdui.org/ko/docs/2/components/slider.md): 슬라이더는 값 선택용 컴포넌트로 연속 또는 이산 값 선택, 단계 제어, 눈금 표시를 지원합니다. 유효성 검사 및 자동 포커스 기능이 내장되어 있으며 값 표시 형식을 사용자 지정할 수 있어 볼륨 조절이나 가격 필터링 등에 폭넓게 활용됩니다.
- [스낵바 컴포넌트 Snackbar](https://www.mdui.org/ko/docs/2/components/snackbar.md): 스낵바는 간단한 메시지와 피드백을 화면 하단 등에 제공하며 자동 닫기 및 작업 버튼 설정을 지원합니다. 색상과 위치를 지정할 수 있고 프로그래밍 함수 호출도 가능합니다. 사용자 중단 없이 중요한 작업 결과를 신속하게 전달하는 데 적합합니다.
- [스위치 컴포넌트 Switch](https://www.mdui.org/ko/docs/2/components/switch.md): 스위치는 설정의 켜짐/꺼짐 상태를 즉시 전환하며 시각적 피드백을 제공합니다. 비활성화, 양식 검사, 아이콘 설정을 지원하며 색상과 크기도 사용자 지정할 수 있습니다. 설정 페이지나 권한 제어 등 직관적인 온/오프 조작이 필요한 곳에 적합합니다.
- [탭 컴포넌트 Tabs](https://www.mdui.org/ko/docs/2/components/tabs.md): 탭은 단일 영역에서 여러 콘텐츠 보기를 전환합니다. 두 가지 스타일과 배치 옵션을 제공하며 아이콘, 배지, 활성 표시기 등을 추가해 사용자 지정할 수 있습니다. 카테고리 네비게이션이나 콘텐츠 페이지 전환 시 직관적인 인터페이스를 제공합니다.
- [텍스트 필드 컴포넌트 TextField](https://www.mdui.org/ko/docs/2/components/text-field.md): 텍스트 필드는 비밀번호, 이메일 등 다양한 한 줄 또는 여러 줄 입력을 지원합니다. 레이블, 도움말, 오류 메시지, 지우기 버튼 및 자동 높이 조절 기능을 제공합니다. 완벽한 유효성 검사 지원을 통해 양식 데이터 입력의 편의성과 접근성을 보장합니다.
- [툴팁 컴포넌트 Tooltip](https://www.mdui.org/ko/docs/2/components/tooltip.md): 툴팁은 호버나 포커스 시 추가 정보를 팝업으로 제공하며 일반 텍스트와 리치 텍스트를 모두 지원합니다. 다양한 트리거 방식과 위치 설정, 화살표 스타일 조절이 가능합니다. 기능 설명이나 도움말을 간단히 제공하여 사용자 편의성을 높여줍니다.
- [상단 앱 바 컴포넌트 TopAppBar](https://www.mdui.org/ko/docs/2/components/top-app-bar.md): 상단 앱 바는 페이지 상단에서 제목, 탐색, 작업 버튼을 제공합니다. 다양한 스타일, 고정 브랜딩 효과, 스크롤 반응 애니메이션을 지원하며 아이콘을 자유롭게 배치할 수 있습니다. 앱의 헤더 영역을 통일하고 핵심 문서 기능을 제어하는 역할을 합니다.

## 함수

- [jq 도구 라이브러리](https://www.mdui.org/ko/docs/2/functions/jq.md): mdui는 jQuery 스타일 명세를 갖춘 경량 JavaScript 라이브러리를 내장합니다. 매우 가벼운 용량으로 체이닝, DOM 조작, 이벤트 처리를 제공하며, 별도 설치 없이도 복잡한 스크립트 작업을 쉽고 효율적으로 수행할 수 있는 환경을 만듭니다.
- [dialog 함수](https://www.mdui.org/ko/docs/2/functions/dialog.md): dialog 함수를 이용하면 HTML 작성 없이 JavaScript 호출만으로 대화창을 즉시 열 수 있습니다. 제목, 내용, 버튼 사용자 지정이 가능하며 사용자 응답을 Promise로 반환받아 처리할 수 있어 비동기 프로그래밍 시 매우 효율적이고 간편합니다.
- [alert 함수](https://www.mdui.org/ko/docs/2/functions/alert.md): alert 함수는 window.alert를 대체하는 현대적인 대화창을 제공합니다. HTML 없이 직접 호출하여 경고 창을 띄울 수 있고 제목 및 확인 버튼 텍스트 설정이 가능합니다. mdui 스타일이 적용되어 통일감을 주며 브라우저 렌더링 과정을 차단하지 않아 쾌적합니다.
- [confirm 함수](https://www.mdui.org/ko/docs/2/functions/confirm.md): confirm은 window.confirm을 대체해 HTML 없이 확인 창을 띄웁니다. 결과를 Promise로 받으며 mdui 디자인이 적용됩니다. 페이지를 차단하지 않고 작동해 현대적인 사용자 환경을 구축하는 데 필수적이고 강력한 유틸리티입니다.
- [prompt 함수](https://www.mdui.org/ko/docs/2/functions/prompt.md): prompt은 window.prompt를 기능을 대체하여 입력 다이얼로그를 제공합니다. 타입 설정과 유효성 검사를 지원하며 HTML 없이 사용 가능합니다. 입력값을 Promise로 반환하므로 각종 사용자 데이터 입력 로직을 매우 간소화하고 정밀하게 제어할 수 있습니다.
- [snackbar 함수](https://www.mdui.org/ko/docs/2/functions/snackbar.md): snackbar 함수는 스낵바를 JavaScript로 즉시 호출합니다. HTML 없이 메시지를 띄우며 버튼, 위치, 시간 설정을 지원합니다. 작업 피드백이나 상태 알림을 사용자에게 신속하고 세련되게 전달할 수 있는 직관적이고 효율적인 기능을 제공합니다.
- [getTheme 함수](https://www.mdui.org/ko/docs/2/functions/getTheme.md): getTheme는 페이지나 요소의 현재 테마(light, dark, auto)를 가져옵니다. CSS 선택기나 DOM 요소를 지원하며 테마 상태에 따라 디자인이나 로직을 조정하여 일관된 사용자 경험을 유지하도록 돕는 필수적인 유틸리티입니다.
- [setTheme 함수](https://www.mdui.org/ko/docs/2/functions/setTheme.md): setTheme 함수는 페이지나 특정 요소의 테마를 동적으로 설정합니다. light, dark, auto 모드를 지원하며 특정 영역에 다른 테마를 적용하는 테마 오버라이드도 가능합니다. 이를 통해 웹 앱의 테마 전환 기능을 쉽고 유연하게 구현할 수 있습니다.
- [getColorFromImage 함수](https://www.mdui.org/ko/docs/2/functions/getColorFromImage.md): getColorFromImage는 이미지에서 주요 색상을 추출합니다. setColorScheme와 결합해 테마를 자동 생성하며 앱의 배색이 콘텐츠와 완벽한 조화를 이루도록 돕는 지능적이고 혁신적인 다이내믹 컬러 유틸리티입니다.
- [setColorScheme 함수](https://www.mdui.org/ko/docs/2/functions/setColorScheme.md): setColorScheme는 제공된 색상 값을 기반으로 주요색, 보조색 등 색 구성표를 생성하여 적용합니다. 전역 및 특정 요소 설정을 지원하며 사용자 지정 색상 배열도 가능합니다. 브랜드 맞춤 컬러를 한 번의 호출로 신속하게 완성해줍니다.
- [removeColorScheme 함수](https://www.mdui.org/ko/docs/2/functions/removeColorScheme.md): removeColorScheme는 색상표를 제거하고 기본 배색으로 복원합니다. 페이지나 요소의 테마를 초기화하거나 스타일 구성을 초기 상태로 되돌리고 싶을 때 호출 한 번으로 깔끔하게 처리할 수 있는 유용한 초기화 함수입니다.
- [loadLocale 함수](https://www.mdui.org/ko/docs/2/functions/loadLocale.md): loadLocale은 언어 팩을 로드합니다. 지연 로딩 및 정적 가져오기를 지원하며 setLocale과 연동해 국제화를 구현합니다. 기본 영문 팩은 별도 로드가 필요 없으며 필요한 언어만 로드하여 초기 실행 성능을 최적화합니다.
- [setLocale 함수](https://www.mdui.org/ko/docs/2/functions/setLocale.md): 애플리케이션 언어를 설정하며 비동기 로드를 지원합니다. setLocale 호출 시 새로 고침 없이 컴포넌트 텍스트가 즉시 업데이트되어 매끄러운 다국어 전환이 가능합니다. 상세 내용은 현지화 문서를 참조하십시오.
- [getLocale 함수](https://www.mdui.org/ko/docs/2/functions/getLocale.md): 현재 응용 프로그램의 언어 코드를 가져옵니다. 언어 환경 감지, 리소스 동적 로드, 레이아웃 조정 등에 활용됩니다. "ko", "en" 등 코드를 반환하므로 다양한 조건부 로직과 연동하여 정밀한 국제화 처리를 구현하기에 용이합니다.
- [throttle 함수](https://www.mdui.org/ko/docs/2/functions/throttle.md): 쓰로틀링 함수를 생성해 지정된 간격 내 최대 한 번만 실행되도록 제어합니다. 스크롤이나 리사이즈 등 고빈도 이벤트 처리 최적화에 사용되며 성능을 크게 개선합니다. 함수 호출 빈도를 관리해 불필요한 연산과 시스템 부하를 방지해줍니다.
- [observeResize 함수](https://www.mdui.org/ko/docs/2/functions/observeResize.md): DOM 요소 크기 변화를 감지하며 ResizeObserver 기반으로 작동합니다. 크기 변경 시 콜백을 실행하여 반응형 레이아웃이나 자가 적응형 컨테이너 구현에 적합합니다. 관찰 중지 메서드를 반환해 자원 정리 및 메모리 관리도 간편합니다.
- [breakpoint 함수](https://www.mdui.org/ko/docs/2/functions/breakpoint.md): 현재 창 크기의 브레이크포인트 값을 확인합니다. xs~xxl 6가지 중단점을 지원하며 크기 비교나 범위 판단이 가능합니다. 이를 통해 복잡한 화면 구성 속에서도 디바이스별 최적화된 반응형 레이아웃 로직을 명확하고 쉽게 구현하도록 돕습니다.

## 독립 패키지

- [아이콘 컴포넌트 라이브러리 @mdui/icons](https://www.mdui.org/ko/docs/2/libraries/icons.md): @mdui/icons는 모든 Material Icons를 포함한 독립 아이콘 라이브러리입니다. 각 아이콘이 독립 컴포넌트로 제공되어 필요한 것만 불러올 수 있고 mdui-icon 대비 번들 크기를 줄여줍니다. 리소스 관리와 스타일 지정으로 아이콘 활용성을 높여줍니다.