프로젝트 소개

AI DIAL UI Kit은 EPAM Systems가 개발한 프로덕션 준비 완료된 React 컴포넌트 라이브러리로, AI DIAL 인터페이스 개발을 간소화하기 위해 설계되었습니다. 최신 React(19+), TypeScript(5.0+), Vite, Tailwind CSS로 구축되었으며, Button, Input, Dropdown 등 기본 컴포넌트 모음을 제공하여 개발자가 요소를 빠르게 재사용하고 AI DIAL 애플리케이션 전반에서 디자인 일관성을 유지할 수 있게 합니다. 주요 기능은 다음과 같습니다: - **통합 사용자 경험**: AI DIAL 애플리케이션 전반에서 디자인 일관성 보장 - **고도로 사용자 정의 가능한 테마**: CSS 사용자 정의 속성을 활용한 심층 테마 설정, 구성 가능한 배경 레이어, 텍스트 색상, 모서리 반경 지원 - **접근성**: WCAG 2.5.5(Level AAA) 대상 크기 준수를 포함한 포괄적인 접근성 지원, 레이아웃 충돌로 인해 더 큰 대상이 문제가 되는 컨트롤에 대해서는 문서화된 예외 사항 포함 - **Storybook 문서**: 시각적 테스트, 접근성 테스트 도구, 반응형 디자인 테스트를 갖춘 대화형 컴포넌트 문서 및 개발 플레이그라운드 - **충분한 테스트**: Vitest와 React Testing Library를 사용한 포괄적인 테스트 커버리지(70% 이상) - **개발자 경험**: ESLint, Prettier, Husky를 활용하여 유지보수 가능한 코드 품질 유지 - **배포 준비**: NPM 패키지(@epam/ai-dial-ui-kit)로 배포되어 손쉬운 통합 지원 - **트리 셰이킹 지원**: 필요한 컴포넌트만 가져와 번들 크기 감소 - **Next.js 통합**: Next.js 애플리케이션과의 원활한 통합 - **AI 에이전트 MCP 서버**: AI 에이전트가 컴포넌트, 타입, 훅, 유틸리티를 프로그래밍 방식으로 탐색할 수 있는 내장 Model Context Protocol 서버로, AI 어시스턴트가 정확하고 타입 안전한 컴포넌트 코드를 생성할 수 있게 지원 이 라이브러리는 CSS 사용자 정의 속성을 통해 구성 가능한 모서리 반경을 갖춘 표준 및 소형 컨트롤을 모두 지원합니다. 추가 CSS import가 필요한 선택적 Markdown 편집기 컴포넌트도 포함되어 있습니다. 프로젝트 구조는 components, styles, types 디렉터리로 깔끔하게 구성되어 있습니다. 사전 요구 사항으로는 Node.js >= 22.2.0 및 npm >= 10.7.0이 필요합니다. 이 프로젝트는 Apache 2.0 라이선스를 따르며, 더 넓은 AI DIAL 생태계의 일부로, 메인 AI-DIAL 프로젝트가 모든 AI DIAL 프로젝트의 진입점 역할을 합니다.