네이티브 Utrecht CSS 9.0.15 버튼/데이터 목록 컴포넌트, 독자적인 테마 토큰 및 애플리케이션 상호작용. · 구현 레퍼런스
02
NL 디자인 시스템 디자인 참고 자료
구체적인 기여자 구성: @utrecht/component-library-css 9.0.15. 공개 토큰 이름과 클래스는 검토한 라이브러리 API입니다. “예시”로 표시된 숫자 값과 색상은 애플리케이션에만 적용되는 설정이며, 범용 NL Design System 사양이 아닙니다.
NL Design System는 여러 조직의 기여 요소를 조합할 수 있도록 명시적으로 지원하며, 디자인 토큰을 통해 각 조직의 브랜드 스타일을 설명합니다. 따라서 실제로 도입할 때 선택하는 단위는 컴포넌트 구현과 테마의 조합입니다. 이 페이지에서는 Utrecht CSS 기여자의 구현과 독자적인 데모 테마를 선택합니다.
그렇다고 Utrecht가 모든 NL Design System 컴포넌트의 표준 구현이라는 뜻은 아닙니다. 이 선택은 국가 공통 글꼴, 파란색 또는 간격 척도를 지어내지 않으면서도 독자가 재현할 수 있는 방법을 제공합니다. 실제 네이티브 CSS 패키지는 @utrecht/component-library-css 9.0.15입니다.
제공된 테마는 래퍼에 공개 --utrecht-* 사용자 지정 속성을 설정합니다. 버튼은 이 값을 사용하며, 클래스는 컴포넌트 구성을 결정합니다. --_utrecht-로 시작하는 변수는 검토한 CSS의 내부 계산에 사용됩니다. 이를 직접 변경하면 애플리케이션이 구현 세부사항에 종속될 수 있습니다.
예시의 청록색 #005a5b와 보라색 #57328c는 애플리케이션에만 적용되는 독자적인 색상입니다. 이 색상은 특정 지방자치단체의 정체성을 모방하지 않고도 브랜드를 변경할 수 있음을 보여 줍니다. 두 색상 모두 흰색 동작 텍스트를 사용하며, 호버 색조는 별도로 정의합니다. 어느 색상도 공식 NL Design System 토큰 값으로 설명하지 않습니다.
CSS
.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}
데모에서는 문서 읽기에 적합하도록 Arial, sans-serif를 18px 크기와 1.6 행간으로 설정합니다. 첫 번째 테마는 32px 제목과 모서리 반경 4px 버튼을 사용하고, 두 번째 테마는 본문 크기는 동일하게 유지하면서 모서리 반경 8px 버튼과 세리프 제목을 사용합니다. 테마가 바뀌는 것을 분명히 확인할 수 있도록 의도적으로 차이를 두었습니다.
토큰이 없을 때 네이티브 버튼은 대체값으로 최소 블록 크기 44px를 사용합니다. 이 테마에서는 48px와 블록/인라인 패딩을 명시적으로 지정합니다. 이는 추정한 생태계 공통 치수가 아니라 애플리케이션에서 선택한 값을 사용하는 실제 CSS API입니다. 레이아웃은 이 예제에서 제공하는 콘텐츠 최대 너비 56rem과 간격 24px를 사용합니다.
접수 확인서에서는 dl에 .utrecht-data-list와 .utrecht-data-list--rows 수정자를 사용합니다. 각 .utrecht-data-list__item은 dt 키와 dd 값을 묶습니다. rows 수정자는 반응형 그리드, 행 간격 및 테두리를 활성화합니다. 이 수정자가 없으면 기본 데이터 목록에는 해당 레이아웃이 적용되지 않습니다. HTML는 테마가 로드되기 전에도 의미가 유지됩니다.
접수 확인서에는 수령 장소, 참조 번호, 선택한 항목이 표시됩니다. 반복되는 레코드를 나열하는 표가 아닙니다. 각 키는 동일한 요청의 서로 다른 속성을 나타냅니다. 좁은 화면에서는 키와 값이 세로로 쌓입니다. 애플리케이션은 긴 장소 이름이 잘리지 않고 표시되도록 행 토큰을 설정합니다.
.utrecht-button은 기본 컴포넌트를 제공하고, .utrecht-button--primary-action은 기본 액션 스타일 토큰 그룹을 선택합니다. 주변 양식을 제출하지 않는 로컬 액션에는 네이티브 요소에 type=button을 지정해야 합니다. 애플리케이션에서 편집 패널을 열기 전까지 데이터 목록은 읽기 전용으로 유지됩니다.
데모의 ‘수령 장소 변경’ 버튼을 누르면 네이티브 라디오 버튼이 있는 fieldset이 표시됩니다. 저장하면 정의 목록의 값이 업데이트되고, 새로운 장소가 정중한 상태 알림 영역을 통해 안내됩니다. 취소하면 저장된 값을 변경하지 않고 패널을 닫습니다. 이러한 동작은 애플리케이션 코드로 구현해야 합니다. CSS 번들만 설치한다고 해서 구현되는 것은 아닙니다.
테마 선택기는 바깥쪽 래퍼의 data-theme을 변경합니다. 컴포넌트 클래스, 레코드 값, 선택된 라디오 버튼은 그대로 유지됩니다. 이를 통해 화이트 라벨 분리의 구체적인 예를 확인할 수 있습니다. 동일한 접수 확인서와 상호작용에 서로 다른 시각적 아이덴티티를 적용할 수 있습니다.
여기서 테마 전환은 개발용 데모일 뿐, 공공 서비스에서 반드시 제공해야 하는 설정은 아닙니다. 실제 다기관 서비스에서는 신뢰할 수 있는 애플리케이션 설정에 따라 테마를 선택하세요. 테마 값으로 자격 요건이나 유효성 검사, 상태의 의미가 달라져서는 안 됩니다.
NL Design System 릴레이 모델은 기여 항목이 공유 표준을 향해 발전하는 과정을 설명합니다. 커뮤니티 저장소에 컴포넌트가 있다는 사실만으로 모든 구성 방식이 프로덕션에 적합하다고 보장되지는 않습니다. 컴포넌트 문서에서 선택한 구현, 지원 상태, 현재 성숙도를 확인하세요.
미리 보기에는 장소 선택을 위한 범례가 계속 표시되고, 저장된 결과가 안내되며, 편집이 끝나면 처음 실행한 버튼으로 포커스가 돌아갑니다. 테마를 전환해도 포커스는 유지됩니다. 네이티브 라디오 버튼의 키보드 조작과 앱 자체의 포커스 윤곽선으로 화면을 사용할 수 있습니다. 이러한 확인은 기여 컴포넌트의 테스트를 보완할 뿐, 대체하지는 않습니다.
검증된 CSS 패키지를 설치하고 CSS를 지원하는 번들러에서 dist/index.css를 가져온 다음, 테마 스타일시트를 불러옵니다. 여기서 사용하는 CSS 전용 데이터 목록과 버튼에는 React 공급자나 JavaScript 컴포넌트 초기화 코드가 필요하지 않습니다. 기존 애플리케이션 스크립트가 편집, 저장, 취소, 테마 전환을 담당합니다.
번들에 포함된 컴포넌트 소스는 EUPL-1.2 라이선스에 따라 제공됩니다. 배포 시 소스 및 라이선스 고지를 유지하고, 코드 라이선스가 지방자치단체 로고 재사용을 허용한다고 간주하지 마세요. 이 예제는 자체 테마를 사용하며 지방자치단체 표장을 포함하지 않습니다.
Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다.
벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다.
04
NL 디자인 시스템 에이전트 설정
구현 시작점
독립형 미리 보기에서는 동일한 버전의 네이티브 CSS를 로컬에서 불러옵니다. CSS 전용 버튼/데이터 목록 컴포넌트에는 React 공급자가 필요하지 않습니다. 라이브러리와 함께 자체 테마 값을 제공해야 합니다. Sources에 있는 완성된 예제 ZIP에는 미리 보기에 필요한 정확한 의존성과 전체 문서도 포함되어 있습니다. 압축을 푼 디렉터리에서 python3 -m http.server 8080을 실행한 다음 http://localhost:8080/nl-design-system.html을 여세요. 모듈 기반 예제를 file://로 열지 마세요.
bash
npm install @utrecht/[email protected]
# CSS-aware application entry:
# import '@utrecht/component-library-css/dist/index.css';
# import './example-theme.css';
# Wrap the dl/button composition in <main class="example-theme">.
# Add application event handlers for editing and theme selection.
프로젝트를 위한 프롬프트
에이전트 프롬프트
접수 확인용 정의 목록과 기본 버튼에 @utrecht/component-library-css 9.0.15를 사용하세요. 공개 --utrecht-* 토큰으로 자체 래퍼 범위 테마를 제공하고 내부 --_utrecht-* 변수는 수정하지 마세요. 라벨이 있는 라디오 선택 항목, 저장/취소, 정중한 업데이트 안내, 포커스 복귀를 포함해 장소 편집을 구현하세요. 컴포넌트 마크업을 교체하거나 데이터를 잃지 않고 두 번째 자체 테마를 적용해 보세요. 숫자가 포함된 테마 값은 모두 애플리케이션에서 선택한 값임을 명시하세요.
05
NL 디자인 시스템 자료 및 범위
NL Design System는 특정 브랜드에 종속되지 않는 생태계입니다. 이 교육용 예제는 기여자가 만든 구현 하나와 자체 테마 두 가지를 선택했습니다. 국가 차원의 시각적 스타일을 표방하지 않으며 지방자치단체의 아이덴티티도 사용하지 않습니다.
