# CMS 디자인 시스템 ## CMS 디자인 시스템 인터페이스 미리보기 환경설정 하나를 수정하고, 초안을 저장하거나 취소한 다음 데이터를 제출하지 않고 로컬 검토를 완료해 보세요. ## CMS 디자인 시스템 디자인 참조 CMS Core 18.1.0에서 core-theme.css와 컴포넌트 CSS를 공개했습니다. 일반 문서의 설명과 다를 경우 버전이 명시된 산출물을 우선합니다. 미리보기에서는 Arial 대체 글꼴과 애플리케이션별 48rem 셸을 사용합니다. ### 색상 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --color-base | #262626 | 버전이 명시된 Core 텍스트 값입니다. 이전 개요 문구에는 #333으로 표기되어 있습니다. | | --color-primary / primary-darker | #0071bc / #004f84 | 동작 및 상호작용 시 어두운 색상 참조입니다. | | --color-error / success | #e31c3d / #12890e | 상태 색상에는 항상 텍스트 설명을 함께 표시하세요. | | --color-border | #d9d9d9 | --review__border-color에도 사용됩니다. | | --color-focus-dark / focus-light | #bd13b8 / #ffffff | 테마의 포커스 색상 참조입니다. | | --color-background / gray-lightest | #ffffff / #f2f2f2 | 페이지 및 밝은 보조 표면입니다. | ### 타이포그래피 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --font-family-body / heading | Open Sans, Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif | 18.1.0의 정확한 글꼴 순서이며, 미리보기에서는 Arial로 대체됩니다. | | --font-size-sm / md / lg / xl / 2xl | .875 / 1 / 1.125 / 1.3125 / 1.5rem | 루트 크기 16px 기준 14 / 16 / 18 / 21 / 24px입니다. | | --font-size-3xl--mobile / 3xl | 1.875 / 2.25rem | 30 / 36px입니다. | | --font-size-4xl--mobile / 4xl | 2.25 / 3rem | 36 / 48px입니다. | | --font-size-5xl--mobile / --tablet / 5xl | 2.25 / 3 / 3.75rem | 36 / 48 / 60px입니다. | | --font-line-height-base / heading | 1.5 / approximately 1.3 | 테마의 제목 값은 1.2999999523162842로 저장됩니다. | ### 간격, 그리드 및 모양 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --spacer-half / 1 / 2 / 3 | 4 / 8 / 16 / 24px | 유틸리티의 숫자 수정자는 8px를 곱해 계산합니다. | | --spacer-4 / 5 / 6 / 7 | 32 / 40 / 48 / 56px | 더 큰 레이아웃 간격입니다. | | --grid-columns | 12 | 그리드 구성입니다. | | --grid-gutter-width / grid-form-gutter-width | 32 / 16px | 현재 테마에서는 일반 여백과 양식 여백을 구분합니다. | | --site-max-width | 1104px | 테마 컨테이너 참조입니다. | | --site-margins / site-margins-mobile | 3rem / 1.5rem | 기본 루트 크기 기준 48 / 24px입니다. | | --radius-default / medium / large | 3 / 4 / 8px | 모든 경우에 적용되는 단일 반경 값은 없습니다. | ### 반응형 경계값 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | sm | 544px | 모바일 우선 소형 접두사입니다. | | md | 768px | 중형 접두사입니다. | | lg | 1024px | 대형 접두사입니다. | | xl | 1280px | 특대형 접두사입니다. | ## CMS 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## CMS 디자인 시스템 Core 또는 하위 테마 선택 ### 이 패키지는 하나의 브랜드 스킨이 아니라 여러 테마로 구성됩니다 > CMS Core는 공통 인터페이스 기반을 제공하며, Healthcare.gov, Medicare.gov, CMS.gov용 하위 시스템은 별도로 제공됩니다. 이 참조 문서는 @cmsgov/design-system 18.1.0과 해당 버전의 core-theme.css를 기준으로 합니다. 하위 테마에서 제공하는 색상, 로고 또는 컴포넌트가 Core 규칙에 자동으로 포함되는 것은 아닙니다. 예제에서는 중립적인 알림 환경설정 워크플로를 사용하며 공식 정부 배너와 브랜드 식별 표시는 제외했습니다. React, Preact, 웹 컴포넌트, 수동 HTML/CSS 통합 경로가 있습니다. 문서에서는 내장 동작이 유용한 경우 JavaScript 컴포넌트를 권장하며, 웹 컴포넌트 모음은 일부 항목만 포함합니다. 독립형 예제에서는 실제 Core CSS와 편집·저장·취소를 위한 애플리케이션 JavaScript를 사용합니다. CSS가 유효성 검사, 라우팅 또는 영속성을 구현한다고 주장하지 않습니다. 지원 사양 읽기 ## CMS 디자인 시스템 버전이 명시된 테마 읽기 ### 스타일시트 두 개 모두 포함 index.css는 컴포넌트 규칙을 정의하고 core-theme.css는 해당 규칙에 사용할 변수를 제공합니다. 테마를 생략하면 유효한 클래스 이름에 대응하는 값이 없어질 수 있습니다. 반대로 Core 타이포그래피를 설명하면서 Medicare 테마를 가져오면 페이지가 렌더링되더라도 잘못된 결과를 보여 주게 됩니다. 이 설정은 두 에셋을 모두 동일한 18.1.0 릴리스에서 가져옵니다. 이 가이드에서 숫자 값을 확인할 때는 버전이 지정된 테마를 기준으로 합니다. 예를 들어 --color-base는 #262626이지만, 일반적인 타이포그래피 설명에는 여전히 #333이 언급됩니다. 테마에서 --grid-gutter-width는 --spacer-4(32px)이고, --grid-form-gutter-width는 --spacer-2(16px)입니다. 거터가 16px이라는 일반적인 설명을 모든 그리드 유형에 적용해서는 안 됩니다. 실제 레이아웃을 재현할 때는 이러한 차이가 중요합니다. 지원 사양 읽기 ## CMS 디자인 시스템 Core 타이포그래피와 계층 구조 ### 하나의 글꼴 계열, 명확한 역할별 크기 Core는 제목과 본문에 Open Sans를 사용합니다. 18.1.0 테마의 대체 글꼴 목록은 Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial을 거쳐 sans-serif로 이어집니다. 로컬 견본에서는 외부 글꼴 파일을 요청하지 않도록 Arial을 명시적으로 사용하므로, 전체 공식 타이포그래피와 글꼴 메트릭이 다릅니다. 본문 기본 크기는 1rem이며 줄 높이는 1.5입니다. 크기 변수에는 16px 루트 기준 14, 16, 18, 21, 24px이 포함되며, 그보다 큰 반응형 역할도 있습니다. 3xl은 모바일에서 30px, 그 외에는 36px이고, 4xl은 모바일에서 36px, 그 외에는 48px입니다. 5xl은 모바일에서 36px, 태블릿에서 48px, 가장 큰 역할에서는 60px입니다. 이 값은 테마에 정의된 크기이지, 모든 페이지 제목에 가장 큰 크기를 사용해도 된다는 뜻이 아닙니다. 의미에 맞는 제목 요소와 적절한 유틸리티 또는 ds-content 매핑을 사용하세요. 지원 사양 읽기 ## CMS 디자인 시스템 간격과 반응형 레이아웃 ### 8픽셀 리듬과 중간 단계 --spacer-1부터 --spacer-7까지는 8픽셀 단위로 8–56px에 대응합니다. --spacer-half는 4px이고 --spacer-none은 0입니다. 따라서 ds-u-margin--2와 같은 클래스는 2rem이 아니라 16px을 의미합니다. 리뷰 행의 기본 CSS에는 세로 여백 16px과 아래쪽 테두리 2px이 적용됩니다. 따라서 답변마다 주변 폼에 패딩이 있는 카드를 추가할 필요는 없습니다. 버전이 지정된 테마에서 Core 사이트의 최대 너비는 1104px이며, 사이트 여백은 3rem, 모바일 여백은 1.5rem입니다. 이 견본에서는 짧은 리뷰 행 두 개를 표시하기 위해 더 작은 48rem 너비의 읽기 영역을 사용합니다. 이는 애플리케이션의 너비 설정이지 새로운 CMS 토큰이 아닙니다. 지원 사양 읽기 ### CMS 중단점 접두사 사용 문서에 명시된 경계값은 sm 544px, md 768px, lg 1024px, xl 1280px입니다. 레이아웃과 일부 유틸리티 계열은 ds-u-lg-display--none과 같이 이러한 접두사를 지원합니다. 모든 컴포넌트 클래스에 반응형 변형이 있다고 가정하지 마세요. 모바일에서는 리뷰의 긴 값이 줄바꿈되어도 Edit 컨트롤이 화면 밖으로 밀려나지 않아야 합니다. 필요한 경우 미리보기에서 애플리케이션 작업 행도 세로로 배치합니다. 지원 사양 읽기 ## CMS 디자인 시스템 리뷰 행 구조와 API ### 레이블, 값, 맥락에 맞는 편집 이동 경로 Review는 검토 가능한 항목 하나를 감쌉니다. 제목 수준은 기본적으로 h3이며 headingLevel로 지정할 수 있고, 그 뒤에 현재 값을 나타내는 자식 요소가 옵니다. editHref는 이동할 경로를 지정하며, 값이 없으면 편집 링크를 표시하지 않습니다. editAriaLabel은 반복해서 표시되는 Edit 링크에 명확하고 구별되는 접근성 이름을 제공합니다. 18.1.0 타입 선언에는 editText, onEditClick, editContent도 있으며, 사용자 지정 editContent를 지정하면 기본 링크 대신 해당 내용이 표시됩니다. React 예제에서는 공개된 선언에서 확인한 실제 props를 사용합니다. 예시 경로는 애플리케이션에서 구현해야 하는 임의의 경로입니다. 기본 CSS 대안은 ds-c-review, ds-c-review__content, ds-c-review__heading 구조를 보여 주지만, 탐색과 업데이트는 여전히 애플리케이션에서 관리해야 합니다. ``` import { Review } from '@cmsgov/design-system'; import '@cmsgov/design-system/css/index.css'; import '@cmsgov/design-system/css/core-theme.css'; export default function ContactReview() { return

Contact preferences

Large print

English
; } ``` 코드 참조 지원 사양 읽기 ## CMS 디자인 시스템 개별 항목 편집과 섹션 편집 ### 수정 경로를 예측하기 쉽게 유지 CMS 양식 리뷰 패턴은 답변 하나를 편집하는 경우와 섹션 전체를 편집하는 경우를 구분합니다. 알림 형식이나 언어처럼 서로 독립적인 기본 설정은 개별 항목 편집에 적합합니다. 가구 구성원과 각 구성원의 관계처럼 서로 연관된 답변은 애플리케이션이 일관성을 함께 다시 계산할 수 있도록 섹션 단위로 편집해야 할 수 있습니다. 공식 지침에는 섹션 수준의 Edit를 제목 옆에 배치하는 기능은 Review 컴포넌트 자체에서 구현하지 않는다고 명시되어 있습니다. 미리보기에서는 선택한 행의 입력 필드만 표시합니다. Save를 선택하면 해당 값만 업데이트되고, 포커스는 편집을 시작한 Edit 컨트롤로 돌아갑니다. Cancel을 선택하면 입력 중인 변경 사항을 취소합니다. 편집기가 열린 동안에도 화면에 표시되는 기존 답변은 그대로 유지됩니다. 편집 양식이 나타났다는 이유만으로 성공을 알리지 않고, 실제 변경이 이루어진 경우에만 해당 변경을 상태 메시지로 안내합니다. - 입력 단계와 리뷰 단계에서 질문 레이블과 순서를 동일하게 유지하세요. - 화면에 표시되는 링크가 Edit이더라도 각 행에 맥락을 나타내는 편집 이름을 제공하세요. - 관련 답변을 함께 변경해야 한다면 단일 행 컴포넌트 외부에서 섹션 편집을 구현하세요. 지원 사양 읽기 ## CMS 디자인 시스템 리뷰, 완료, 실제 처리 여부 ### 리뷰는 제출 확인 영수증이 아닙니다 Review는 편집 가능한 양식 답변에 적합하며 검색 결과를 대신하지 않습니다. 실제 제출 흐름에서는 리뷰 후 최종 제출 작업을 제공해야 합니다. 영수증을 표시하기 전에 해당 작업이 백엔드에서 실제로 처리되었는지 확인해야 합니다. 이 견본에서는 대신 Complete local review를 제공하며, 아무것도 제출되거나 저장되지 않는다고 명시합니다. Core는 기본 파랑 #0071bc, 오류 빨강 #e31c3d, 성공 초록 #12890e, 테두리 회색 #d9d9d9을 구분합니다. 저장된 기본 설정은 색상뿐 아니라 텍스트로도 표시합니다. 포커스에는 테마의 밝은색 및 어두운색 포커스 참조값을 사용합니다. Edit를 최소한의 컨트롤처럼 스타일링하더라도 포커스 표시를 제거하지 마세요. 키보드로 마지막 상태에 접근할 수 있으며, 해당 상태가 리뷰 행을 지우지는 않습니다. 지원 사양 읽기 ## CMS 디자인 시스템 안전한 설치와 확장 ### 완전한 CSS 경로와 실제 컴포넌트 경로 고정된 패키지를 설치하고 패키지 내보내기를 통해 css/index.css와 css/core-theme.css를 가져오세요. React 사용자는 패키지 루트에서 Review를 가져오며, Preact 사용자는 /preact 진입점을 사용할 수 있습니다. 이 예제에는 Sass 컴파일이 필요하지 않습니다. 정적 CSS을 복사하는 경우 상대 글꼴 및 이미지 에셋 경로를 유지하거나, 이 견본처럼 지원되는 대체 글꼴을 명시적으로 선택하세요. CMS 네임스페이스는 ds-l- 레이아웃, ds-c- 컴포넌트, ds-u- 유틸리티를 구분합니다. 애플리케이션 클래스가 문서화되지 않은 공식 컴포넌트인 것처럼 보여서는 안 됩니다. 미리 보기에서 읽기 셸과 인라인 편집기는 로컬 조합이며, 리뷰 행과 버튼은 배포된 스타일을 사용합니다. 1. 일치하는 Core 컴포넌트와 테마 CSS를 불러온 다음 리뷰 행 두 개를 렌더링합니다. 2. 각 편집 작업을 제어형 편집기에 연결하고, 저장하거나 취소한 뒤 포커스를 돌려줍니다. 3. 데스크톱과 모바일 너비에서 값 변경, 임시 수정 내용 폐기, 로컬 작업 완료를 테스트합니다. 지원 사양 읽기 ## CMS 디자인 시스템 컴포넌트 예시 ### 서로 독립적인 리뷰 행 두 개 실제 18.1.0 React 속성입니다. 이를 사용하는 애플리케이션은 연결된 편집 경로를 구현해야 합니다. ``` import { Review } from '@cmsgov/design-system'; import '@cmsgov/design-system/css/index.css'; import '@cmsgov/design-system/css/core-theme.css'; export default function ContactReview() { return

Contact preferences

Large print

English
; } ``` 코드 참조 - Review의 기본 제목 수준은 h3입니다. - editContent는 기본 편집 링크를 대체하며, 해당 링크를 표시하려면 editHref가 필요합니다. ### 네이티브 CSS 리뷰 구조 애플리케이션이 상호작용을 담당하는 경우 유용한 수동 HTML 통합입니다. ```

Notice format

Large print

Edit
``` 코드 참조 ### 완전한 독립 실행형 예시 전체 문서에 레이아웃, 컨트롤 및 초기화가 포함되어 있습니다. 링크된 예시 아카이브의 압축을 풀면 정확한 상대 경로의 벤더 에셋을 얻을 수 있습니다. 그런 다음 HTTP로 제공하세요. ``` Notice preferences — CMS Core specimen

CMS Core component example

Review your notice preferences

Check these fictional preferences before completing the local review. This example does not collect health information or contact details.

Notice preferences

Notice format

Standard print

Preferred language

English

``` 코드 참조 - Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다. - 벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다. ## CMS 디자인 시스템 AI 에이전트 설정 ### 구현 시작점 게시된 18.1.0 메타데이터와 타입에서 패키지 내보내기 및 Review 속성을 확인했습니다. React 예시는 통합용으로 제공됩니다. 독립형 미리 보기는 네이티브 CSS와 로컬 애플리케이션 JavaScript를 실행합니다. Sources에 있는 완전한 실행 예제 ZIP에는 미리 보기에 필요한 정확한 종속성과 전체 문서도 포함되어 있습니다. 압축을 풀고 해당 디렉터리에서 python3 -m http.server 8080을 실행한 다음 http://localhost:8080/cms.html을 엽니다. 모듈 기반 예제를 file://로 열지 마세요. ``` // npm install @cmsgov/design-system@18.1.0 import { Review } from '@cmsgov/design-system'; import '@cmsgov/design-system/css/index.css'; import '@cmsgov/design-system/css/core-theme.css'; export default function ContactReview() { return

Contact preferences

Large print

English
; } ``` ### 프로젝트를 위한 프롬프트 ``` CMS Core 18.1.0 리뷰 화면을 만듭니다. index.css와 core-theme.css를 함께 불러옵니다. 각각 독립적으로 편집할 수 있는 답변에는 heading, children, editHref, editAriaLabel을 지정해 Review를 사용합니다. 섹션 단위 편집은 별도의 애플리케이션 조합입니다. 질문 순서와 편집 중인 임시 수정 내용에 관계없이 화면에 표시되는 저장된 값을 유지합니다. 저장하거나 취소한 뒤 포커스를 돌려주고 실제 업데이트를 알립니다. 기본 텍스트 색 #262626, 4px 단위로 절반 간격을 포함한 8px 스페이서, 일반 그리드 여백 32px, 폼 여백 16px 등 Core 토큰을 사용합니다. 자식 테마의 로고를 섞거나 로컬 리뷰가 애플리케이션을 제출하는 것처럼 표현하지 마세요. ``` ## CMS 디자인 시스템 출처 및 범위 Core 테마 기술 참조입니다. 가상의 선호 값과 로컬에서만 적용되는 변경 사항을 사용하며, 건강 관련 자격 조언이나 CMS 제휴, 제출된 양식을 나타내지 않습니다. - CMS Design System 공식 소개, 기초 요소 및 컴포넌트 카탈로그입니다. - 개발자 안내 공식 통합 경로 및 패키지 안내입니다. - 양식 검토 양식 정보를 검토하는 패턴입니다. - 완전한 작동 예시 다운로드 전체 HTML, 로컬 CSS/JavaScript 종속 항목, 제공된 라이선스와 정확한 실행 지침이 포함된 ZIP 파일입니다. 빌드 단계는 필요하지 않습니다. ## CMS 디자인 시스템 관련 리소스 ### Det Fælles Designsystem 완전한 리소스 비교를 통해 덴마크 DKFDS 테마, 실제 Sass 척도, 접근성을 고려한 표 패턴을 살펴보세요. 숫자 정렬, 제출 방식 검색, 결과 없음 상태 복구를 포함합니다. ### 디자인 시스템 .italia Bootstrap Italia의 실제 타이포그래피와 반응형 Stepper 구조, 복구 가능한 로컬 폼 상태를 활용해 읽기 쉬운 서비스 절차를 구현하세요. ### Designsystemet 문자 수 피드백과 프레젠테이션 상태 유지 기능을 갖춘 완전한 작업 설명 편집기를 통해 Designsystemet의 실제 테마 역할, 크기 모드, 네이티브 필드 동작을 살펴보세요. - [구현 레퍼런스](https://design.cms.gov/components/review/) - [출처](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/css/core-theme.css) - [출처](https://design.cms.gov/foundation/layout-grid/responsive-design/) - [지원 사양 읽기](https://design.cms.gov/getting-started/for-developers/) - [지원 사양 읽기](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/css/core-theme.css) - [지원 사양 읽기](https://design.cms.gov/foundation/spacing/) - [지원 사양 읽기](https://design.cms.gov/foundation/layout-grid/responsive-design/) - [코드 참조](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/react-components/types/Review/Review.d.ts) - [지원 사양 읽기](https://design.cms.gov/components/review/) - [지원 사양 읽기](https://design.cms.gov/patterns/Forms/form-review/) - [코드 참조](https://design.cms.gov/components/review/) - [CMS Design System 공식 소개, 기초 요소 및 컴포넌트 카탈로그입니다.](https://design.cms.gov/) - [개발자 안내 공식 통합 경로 및 패키지 안내입니다.](https://design.cms.gov/getting-started/for-developers/) - [양식 검토 양식 정보를 검토하는 패턴입니다.](https://design.cms.gov/patterns/Forms/form-review/)