KoliBri에 오신 것을 환영합니다

"접근 가능한 HTML 표준"

KoliBri는 전통적인 의미의 디자인 시스템이 아닙니다. 오히려 우리는 HTML5 표준을 독립적이고 접근 가능한 웹 컴포넌트로 확장합니다. 이는 디자인이나 브랜딩과 무관하게 작동하는 새로운 HTML 요소입니다. 이러한 원자적 컴포넌트는 모든 디자인 라이브러리, 프레임워크 또는 스타일 가이드가 필요에 따라 재사용하고 테마를 적용할 수 있는 기반을 형성합니다.

KoliBri는 "component library for accessibility(접근성을 위한 컴포넌트 라이브러리)"의 약자이며, Informationstechnikzentrum Bund (ITZBund)에서 재사용 및 지속적인 개발을 위해 오픈 소스로 공개했습니다.

비전

우리는 재사용 가능한 웹 컴포넌트를 사용하여 HTML을 접근 가능하게 만들고, 이를 통해 사용성과 접근성을 보장합니다.

미션

HTML 웹 표준 자체는 가능한 한 오래 지속되고 견고하도록 매우 "개방적으로" 명시되어 있습니다. 따라서 HTML 구성이 쉽게 접근 가능하거나, 의미론적이거나, 유효하지 않은 경우가 종종 발생합니다.

KoliBri는 W3C의 웹 표준을 직접 기반으로 하며(프레임워크 독립적), 접근성을 위한 WCAG 표준 및 BITV의 일반적인 참조 구현체이자 다중 테마 지원이 가능한 프레젠테이션 계층으로 구현되었습니다. 기술적 참조나 데이터 전송 기능은 없습니다. 즉, KoliBri는 정적 웹사이트뿐만 아니라 다양한 기업 디자인 및 스타일 가이드를 사용하는 동적 웹 애플리케이션 구현에도 동일하게 재사용할 수 있어 오픈 소스로서 매우 흥미롭습니다.

로드맵

KoliBri는 항상 최신 메이저 릴리스를 위한 개선 사항, 새로운 기능 및 미래 지향적인 혁신을 위해 적극적으로 노력하고 있습니다. 동시에, 선택된 LTS 릴리스는 버그 수정과 관련하여 유지 관리됩니다.

gantt
    title LTS & STS
    dateFormat YYYY-MM-DD

    0.x Initial implementation :, 2020-07-01, 17M
    1.x (LTS)                  :, 2021-12-01, 3y
    2.x (LTS)                  :,  2023-12-01, 3y
    3.x (STS)                  :crit , 2024-12-01, 15M
    4.x (LTS)                  :, 2025-12-01, 3y
    5.x (STS)                  :crit , 2026-12-01, 15M
    6.x (LTS)                  :, 2027-12-01, 3y

설치

pnpm을 사용하여 패키지를 설치하세요:

pnpm install

빌드를 한 번 실행하여 컴포넌트를 생성하세요:

pnpm -r build

빠른 시작

기본 테마를 설치하고 컴포넌트를 등록하세요:

pnpm add @public-ui/components @public-ui/theme-default

import { register } from '@public-ui/components';
import { defineCustomElements } from '@public-ui/components/loader';
import { DEFAULT } from '@public-ui/theme-default';

register(DEFAULT, defineCustomElements);

CSS 사용자 정의 속성 충돌 방지

KoliBri 테마는 사용자가 디자인과 느낌을 조정할 수 있도록 몇 가지 CSS 사용자 정의 속성을 노출합니다. 이러한 속성은 Shadow DOM 내부에서도 전역으로 유지되기 때문에, 너무 많이 사용하면 호스트 페이지에 정의된 변수와 충돌할 수 있습니다.

외부에서 재정의해야 하는 값에 대해서만 네임스페이스가 지정된 사용자 정의 속성을 사용하세요. 내부 계산의 경우 추가적인 CSS 속성 대신 SASS 변수를 사용하세요. 이렇게 하면 컴포넌트가 견고하게 유지되고 예기치 않은 스타일 누출을 방지할 수 있습니다.

협업 및 협력

KoliBri의 초점은 작고(원자적), 매우 유연하며 고도로 재사용 가능한 HTML 구성(예: 버튼)에 있습니다. 우리는 더 높은 수준의 HTML 구조나 컴포넌트(분자, 유기체 또는 템플릿)에 재사용할 수 있는 접근 가능하고 의미론적이며 유효한 표준 구현을 제공합니다. 이러한 원자적 컴포넌트야말로 우리가 기술과 지식을 결합하여 협업하고 협력해야 할 영역입니다. 기본 컴포넌트에 대한 시너지 효과를 통해 주제별 콘텐츠에 더 집중할 수 있습니다.

함께 KoliBri를 더 좋게 그리고 더 다채롭게 만들어 봅시다!

문서로 계속하기…

기여

버그 리포트와 풀 리퀘스트를 환영합니다. 시작하기 전에 기여 가이드를 읽어주세요.

SLSA/출처

우리는 이 저장소에서 게시되는 npm 패키지에 대해 SLSA 빌드 레벨 3을 목표로 합니다. 릴리스는 OIDC 기반 ID를 사용하여 GitHub Actions에서 빌드되고 npm 출처(--provenance)와 함께 게시되어, 게시된 아티팩트에 대한 검증 가능한 증명을 생성합니다. 릴리스 단계 및 npm 출처 구성은 게시 워크플로우를 참조하세요.

검증 예시

# Inspect provenance metadata for a published package
pnpm view @public-ui/components dist.provenance

# (Optional) Verify signatures/provenance if your npm client supports it
pnpm audit signatures --package=@public-ui/components@<version>

리소스

• 시작하기

• 기여하기

• 행동 강령

• 알려진 문제

• 보안