Material Plus

프로젝트 소개

Material Plus는 다른 구현을 감싸는 대신 Material Design 3 명세를 직접 구현한 React 컴포넌트 라이브러리입니다. 그래서 색 역할과 타이포그래피 스케일, 모양이 명세가 정한 그대로입니다. 여기에 더해지는 것은 Material 프로젝트라면 결국 직접 작성하게 되는 컴포넌트 모음입니다. 한국어 조합 입력을 제대로 처리하는 입력 필드, 사용하는 아이콘 세트와 어울리는 아이콘 래퍼 같은 것들을 따로 떼어 내 문서와 테스트를 붙였습니다.

테마는 한 줄로 정합니다. 소스 색상 하나를 지정하면 Material이 색 구성을 만들어 내는 방식 그대로 모든 색 역할이 따라옵니다. 라이브러리 안에는 페이지 전체에 관여하는 것이 없습니다. 초기화 스타일도, 프로바이더도, 전역 스타일도 없으며, 페이지에 이미 있는 Material 시스템 토큰을 읽습니다. 그래서 이미 Material을 쓰고 있는 프로젝트는 기존 설정을 그대로 두고 부족한 컴포넌트만 얻습니다. 한국어와 일본어, 중국어의 조합 입력은 변경 핸들러가 값을 어떻게 다루든 깨지지 않습니다. 대부분의 Material 입력 필드가 조용히 안고 있는 문제입니다.

패키지는 ESM 전용이고 TypeScript 타입 정의를 제공하며 실제로 트리 셰이킹이 됩니다. 컴포넌트 하나는 몇 킬로바이트인 데 비해 아흔네 개 전부는 64킬로바이트이고, 스타일시트도 같은 방식으로 나뉩니다. 아무 설정 없이 Next.js 서버 컴포넌트 안에서 동작하고 주요 번들러에서 모두 해석되며, 번역은 시작할 때 한 번 넘기는 모듈로 받습니다.

기능

• 문서 지원

• TypeScript 지원

• 다국어 지원

• 테스트로 검증됨

• 접근성 지원

• 다크 모드

• 트리 셰이킹 지원