네이티브 CFPB 5.10.2 CSS 및 Expandable JavaScript, 패키지 기본값 CSS 원문 추출, 시스템 글꼴 대체 설정, 원본 애플리케이션 콘텐츠를 사용합니다. · 구현 레퍼런스
02
CFPB 디자인 시스템 디자인 참조
CFPB 패키지 5.10.2 컴파일 버전 CSS 및 ES 모듈, 최신 공개 기반 가이드입니다. 데모는 네이티브 Expandable 클래스와 JavaScript를 사용합니다. 전역 기본값 CSS은 게시된 모듈의 기본 스타일 문자열에서 원문 그대로 복사했으며, 시스템 글꼴 대체 설정을 사용합니다. 글꼴 크기 조정과 제목 행간은 문서 표와 버전이 지정된 코드가 다른 경우 코드에 따릅니다. CFPB의 로고나 제휴 관계를 암시하지 않습니다.
CFPB는 편집형 정보 구조와 양식 및 정보 공개 컴포넌트를 결합합니다. 그리드, 타이포그래피 계층 구조, 작고 대문자로 표시되는 슬러그 제목은 익숙한 녹색만큼이나 중요한 요소입니다. 이 예시는 독창적인 읽기 워크시트입니다. 핵심 안내는 계속 표시하고, 선택적 설명에는 네이티브 Expandable을 사용합니다. 금융 권고, 민원 제출 양식 또는 정부 서비스가 아닙니다.
패키지는 공개되어 있지만 정부 인장과 CFPB의 정체성에는 별도의 사용 제한이 적용됩니다. 코드를 재사용해도 서비스가 공식 서비스가 되는 것은 아닙니다. 따라서 이 예시에는 인장, 로고, 공식 사이트 배너 또는 정부 헤더 모방 요소가 없습니다.
최신 글꼴 가이드는 2025년 7월 Avenir Next에서 변경된 Source Sans 3를 안내합니다. 이 로컬 예시에는 외부 호스팅 글꼴 의존성이 없으며, 컴파일된 시스템 글꼴 대체 설정을 사용합니다. 실제 브랜드 구현에서는 문서화된 라이선스 글꼴 믹스인을 통해 승인된 글꼴 파일을 제공해야 합니다.
공개된 제목 표와 현재 기본 스타일 문자열은 서로 일치하지 않습니다. 패키지 5.10.2에서 H1은 2.125em, 행간은 1.25이므로 루트 크기가 16px일 때 34/42.5가 됩니다. 표에 기재된 줄 높이 60px와는 다릅니다. 위 참고 자료는 실행 가능한 소스를 따릅니다. 제목 정규화에도 수준별 조정값이 적용되므로, 간소화된 표를 전역 재정의로 사용하지 마세요.
문단은 약 66자, 문단 간격은 15px로 유지하세요. 제목은 간결한 H5/슬러그 형식을 제외하고 문장형 대소문자를 사용합니다. 이렇게 하면 모든 문단을 카드에 넣지 않아도 가이드 문서를 훑어보기 쉽게 만들 수 있습니다.
컴파일된 CSS에는 --black, --green, --pacific과 단계별 보조 색상군이 포함됩니다. 텍스트에는 검은색을 사용하고, Pacific은 한눈에 알아보기 쉬운 상호작용 단서를 제공합니다. Expandable의 옅은 회색 배경은 읽기 영역의 경계일 뿐, 비활성 상태를 나타내지 않습니다. 기본 슬러그 제목은 얇은 회색 전폭 선과 짧고 두꺼운 초록색 선을 조합합니다.
워크시트의 주요 읽기 영역은 의도적으로 흰색으로 유지합니다. 섹션 구분선에는 초록색을 사용하고, 진행 횟수는 일반 텍스트로 표시합니다. 완료하거나 체크한 항목은 초록색과 빨간색을 구별하지 않아도 이해할 수 있어야 합니다. 팔레트의 모든 색상에 성공이나 오류의 의미를 임의로 부여하지 마세요.
문서화된 그리드는 12개 열, 고정된 30px 거터, 최대 너비 1230px로 구성됩니다. 모바일 바깥 여백은 15px이며, 더 큰 레이아웃에서는 30px을 사용합니다. 미리보기에서는 이를 901px 이상일 때 8열 읽기 영역과 4열 작업 체크리스트로 구성하고, 그보다 좁으면 체크리스트를 문서 아래에 배치합니다. 이 분할은 공개된 그리드를 활용한 애플리케이션 구성일 뿐, 공식 범용 페이지 템플릿은 아닙니다.
페이지 너비를 더 넓힐 수 있더라도 긴 텍스트의 최대 너비는 66ch로 유지합니다. 버튼은 줄바꿈되며, 사이드바에는 고정 높이나 중첩 스크롤 영역을 두지 않습니다. 설명을 펼치면 일반 문서의 높이가 늘어나므로, 이 구성은 리소스 페이지에 삽입된 미리보기에서도 그대로 사용할 수 있습니다.
레거시 Expandable 루트에는 __header 버튼, __label, __content 영역이 포함됩니다. 버튼이 포커스 대상입니다. 이 예시에서는 span으로 레이블을 제공하고, 장식용 더하기/빼기 표시는 접근 가능한 이름에서 제외합니다. 라이브러리는 초기화 시 확장 상태와 동작 훅을 할당하며, 애플리케이션은 이를 중복으로 변경하지 않습니다.
--background 및 --border 수정자가 프레임 형태를 적용합니다. --padded 수정자는 레이블도 더 크게 표시하는 확장형 스타일이며, 모든 디스클로저에 적용해야 하는 것은 아닙니다. 핵심 워크시트 안내는 숨겨진 패널 밖에 둡니다. 독자는 선택 설명을 펼치기 전에 과업을 이해해야 합니다.
html
<div class="o-expandable o-expandable--background o-expandable--border">
<button class="o-expandable__header" type="button">
<span class="o-expandable__label">Keep the question specific</span>
<span class="o-expandable__cues" aria-hidden="true">
<span class="o-expandable__cue-open">+</span>
<span class="o-expandable__cue-close">−</span>
</span>
</button>
<div class="o-expandable__content">
<p>Describe the document and the words you want explained.</p>
</div>
</div>
기본 라이브러리가 디스클로저 상태를 관리합니다. 워크시트는 일반 체크박스 세 개의 값과 그에 따른 개수를 관리합니다. 패널을 열어도 과업이 완료 처리되지 않으며, 과업을 체크해도 정보가 접히지 않습니다. 두 상태는 의도적으로 별도로 관리합니다. 콘텐츠가 보인다는 사실만으로 이해했다고 볼 수는 없습니다.
5.10.2 인스턴스는 expand, collapse, isExpanded를 제공합니다. 공개 Expandables 페이지에는 이전 버전의 toggleTargetState 참조가 있으므로, 이 가이드에서는 실제 버전의 API를 사용합니다. 모두 펼치기와 모두 접기는 초기화된 인스턴스를 순회합니다. 독자가 두 설명을 비교할 수 있도록 이 경우에는 패널을 각각 독립적으로 두는 편이 좋습니다.
초기화 동작을 통해 재설정 기능은 모든 체크박스 값을 지우고 패널을 접습니다 API. 제출 확인을 임의로 생성하지는 않습니다. 모든 체크박스 변경 후 키보드 포커스를 이동하지 않고, 정중한 알림용 상태 요소로 진행 상황을 알립니다.
고정된 버전의 패키지를 설치하고, 컴파일된 에셋 두 개를 정적 디렉터리에 복사한 다음 모듈 스크립트로 Expandable을 가져오세요. 공개된 5.10.2 index.js에는 ES 내보내기가 포함되어 있으므로, 이전 통합 예시의 클래식 스크립트 태그를 그대로 복사하면 구문 오류가 발생합니다. 또한 레거시 Expandable 루트를 자동으로 초기화하지도 않습니다.
컴포넌트 스타일시트만으로는 페이지 전체에 적용되는 제목 및 본문 규칙을 제공하지 않습니다. 프로덕션 프로젝트에서는 공식 통합 가이드에 나온 대로 패키지의 기본 SCSS를 컴파일할 수 있습니다. 이 독립형 예시는 대신 동일하게 공개된 모듈에 포함된 정확한 기본 CSS 문자열을 별도로 문서화된 로컬 파일에 보관합니다. 이는 로컬 패키징 방식일 뿐, 새로 공개된 CFPB 진입점이 아닙니다.
아이콘 참조가 포함된 소스 SCSS를 빌드한다면, 프로젝트 문서에 안내된 PostCSS SVG 대체 기능을 포함하세요. 컴파일된 스냅샷에서는 이미 해당 참조가 처리되어 있습니다. --cfpb-background-icon-svg를 해결하지 못하는 Sass 전용 설정을 임의로 만들지 마세요.
5.10.2를 설치하고 로컬에서 제공하는 에셋과 함께 TERMS.md를 보관하세요.
컴포넌트 CSS와 선택한 전역 기본 스타일을 불러오고, 글꼴을 명시적으로 설정하세요.
모듈을 가져온 뒤 마크업이 준비되면 컨테이너를 초기화하고, 반환된 인스턴스에 애플리케이션 동작을 연결하세요.
좁은 화면에서는 기본 스타일에 따라 기본 제목 크기가 줄어들고, 체크리스트가 문서 아래에 배치됩니다. 데스크톱 화면에서는 두 열 구성으로 선택적 읽기 자료와 작업 메모를 함께 볼 수 있습니다. 접힌 상태만 확인하지 말고, 모든 패널을 펼친 상태에서도 두 화면을 테스트하세요.
Tab 키로 각 네이티브 버튼에 이동한 다음 Enter 또는 Space 키를 눌러 전환하세요. 라이브러리가 aria-expanded를 업데이트하고 숨겨진 콘텐츠가 탭 순서에서 제외되는지 확인하세요. 그런 다음 작업 두 개를 선택하고 모든 설명을 열었다 닫은 뒤, 초기화할 때까지 선택 개수가 2개로 유지되는지 확인하세요. 이러한 테스트로는 스크린샷만으로 확인할 수 없는 애플리케이션과 라이브러리 간 상태 충돌을 찾아낼 수 있습니다.
이 로컬 예제는 데이터를 저장하거나 분석하거나 네트워크로 전송하지 않으며, 실제 개인정보도 사용하지 않습니다. 네이티브 컴포넌트를 사용했다는 사실만으로 결과 사이트의 적합성이 보장되지는 않습니다. 이를 도입하는 서비스에서 대비, 콘텐츠, 브라우저 지원, 보조 기술 동작을 계속 검토해야 합니다.
이 예제는 패키지에서 그대로 추출한 기본 스타일을 사용하며, 해당 스타일은 공급업체의 SOURCE.md에 기록되어 있습니다.
완전한 독립 실행형 예시
전체 문서에 레이아웃, 컨트롤 및 초기화가 포함되어 있습니다. 링크된 예시 아카이브의 압축을 풀면 정확한 상대 경로의 벤더 에셋을 얻을 수 있습니다. 그런 다음 HTTP로 제공하세요.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>CFPB reading worksheet specimen</title><link rel="stylesheet" href="vendor/cfpb-5.10.2/index.css"><link rel="stylesheet" href="vendor/cfpb-5.10.2/base-extracted.css"><style>*{box-sizing:border-box}body{margin:0;background:#fff}main{max-width:1230px;margin:auto;padding:30px}header{max-width:66ch;margin-bottom:30px}.layout{display:grid;grid-template-columns:2fr 1fr;gap:30px}.article{min-width:0}.o-expandable{margin:15px 0}.toolbar{display:flex;gap:15px;flex-wrap:wrap;margin:15px 0}.notes{border-top:5px solid var(--gray-40);padding-top:15px}.notes label{display:flex;gap:10px;margin:20px 0;align-items:flex-start}.notes input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--pacific)}.o-expandable__content p{max-width:66ch}.eyebrow{color:var(--gray);font-size:14px}.note{font-size:14px;margin-top:30px;color:var(--gray)}button{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pacific);outline-offset:3px}@media(max-width:900px){.layout{grid-template-columns:1fr}}@media(max-width:600px){main{padding:20px 15px}}</style><main><header><p class="eyebrow">Independent educational specimen · CFPB components</p><h1>Make your question easier to answer</h1><p>Use this reading worksheet to organize a question about an unfamiliar document. No information is submitted or saved.</p></header><div class="layout"><section class="article" id="guide"><div class="m-slug-header"><h2 class="m-slug-header__heading">Before a conversation</h2></div><p>A useful question identifies the document, quotes the unclear wording, and says what you want explained. Keep account numbers and other private details out of this practice worksheet.</p><div class="toolbar"><button id="open-all" class="a-btn a-btn--secondary">Open all explanations</button><button id="close-all" class="a-btn a-btn--secondary">Close all</button></div><div class="o-expandable o-expandable--background o-expandable--border">
<button class="o-expandable__header" type="button">
<span class="o-expandable__label">Keep the question specific</span>
<span class="o-expandable__cues" aria-hidden="true">
<span class="o-expandable__cue-open">+</span>
<span class="o-expandable__cue-close">−</span>
</span>
</button>
<div class="o-expandable__content">
<p>Describe the document and the words you want explained.</p>
</div>
</div><div class="o-expandable o-expandable--background o-expandable--border">
<button class="o-expandable__header" type="button">
<span class="o-expandable__label">Separate a question from a request</span>
<span class="o-expandable__cues" aria-hidden="true">
<span class="o-expandable__cue-open">+</span>
<span class="o-expandable__cue-close">−</span>
</span>
</button>
<div class="o-expandable__content">
<p>“What does this label mean?” asks for an explanation. “Please send a copy” asks for an action. Writing them separately makes the desired response easier to identify.</p>
</div>
</div><p class="note">Original practice content. This example does not provide financial advice or represent a CFPB service.</p></section><aside class="notes"><h2>Your working notes</h2><p>Use the checklist as a local memory aid.</p><label><input type="checkbox">I can name the document I am asking about.</label><label><input type="checkbox">I have identified the wording I want explained.</label><label><input type="checkbox">I know whether I need an explanation or an action.</label><p id="count" role="status" aria-live="polite">0 of 3 notes checked</p><button id="reset" class="a-btn">Reset worksheet</button></aside></div></main><script type="module">import {Expandable} from './vendor/cfpb-5.10.2/index.js';const panels=Expandable.init(document.querySelector('#guide'));document.querySelector('#open-all').onclick=()=>panels.forEach(x=>x.expand());document.querySelector('#close-all').onclick=()=>panels.forEach(x=>x.collapse());const checks=[...document.querySelectorAll('input[type=checkbox]')];const update=()=>document.querySelector('#count').textContent=checks.filter(x=>x.checked).length+' of 3 notes checked';checks.forEach(x=>x.onchange=update);document.querySelector('#reset').onclick=()=>{checks.forEach(x=>x.checked=false);update();panels.forEach(x=>x.collapse())};window.demoReady=true;</script></html>
Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다.
벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다.
04
CFPB 디자인 시스템 에이전트 설정
구현 시작점
로컬 데모는 네이티브 5.10.2 컴파일 모듈과 CSS을 실행합니다. npm 복사 절차는 프로젝트용으로 제공됩니다. 소스 SCSS를 빌드하는 경우에는 문서에 안내된 아이콘 처리도 필요합니다. Sources의 전체 실행 예제 ZIP에는 정확한 미리보기 종속 항목과 전체 문서도 포함되어 있습니다. 해당 디렉터리에 압축을 푼 다음 python3 -m http.server 8080을 실행하고 http://localhost:8080/cfpb.html을 여세요. 모듈 기반 예제는 file://로 열지 마세요.
bash / HTML
npm install --save-exact @cfpb/[email protected]
# Copy the published compiled files as static assets:
mkdir -p public/vendor/cfpb
cp node_modules/@cfpb/cfpb-design-system/dist/index.css public/vendor/cfpb/
cp node_modules/@cfpb/cfpb-design-system/dist/index.js public/vendor/cfpb/
# In the HTML document:
<link rel="stylesheet" href="/vendor/cfpb/index.css">
<!-- Supply project global/base typography separately. -->
<script type="module">
import { Expandable } from '/vendor/cfpb/index.js';
const panels = Expandable.init(document.querySelector('#guide'));
document.querySelector('#open-all').addEventListener('click', () => {
panels.forEach(panel => panel.expand());
});
document.querySelector('#close-all').addEventListener('click', () => {
panels.forEach(panel => panel.collapse());
});
</script>
프로젝트를 위한 프롬프트
에이전트 프롬프트
실제 5.10.2 Expandable 모듈을 사용해 CFPB에서 영감을 받은 독립적인 편집용 워크시트를 만드세요. 필수 헤더·레이블·콘텐츠 구조, 전체 열기 및 전체 닫기 기능, 접기·펼치기 상태가 바뀌어도 값이 유지되는 일반 체크박스 목록을 포함하세요. 12열 그리드에서 8/4 비율로 구성하고 901px 미만에서는 세로로 쌓이도록 하세요. 모바일 여백은 15px, 본문 너비는 66ch로 설정하세요. 기본 타이포그래피는 컴포넌트 CSS과 별도로 제공하세요. CFPB 로고를 추가하거나 금융 조언 또는 가짜 제출 기능을 제공하지 마세요. ESM 번들을 클래식 스크립트로 가져오지 마세요.
05
CFPB 디자인 시스템 출처 및 범위
독립적인 구현 참고 자료입니다. 네이티브 패키지 컴포넌트 사용이 CFPB와의 제휴를 의미하지는 않습니다. 교육용으로 새로 작성한 콘텐츠이며 금융 조언이나 제출 기능을 제공하지 않습니다. 재사용하기 전에 TERMS.md를 확인하세요.
