Amsterdam는 컴포넌트 CSS를 별도로 공개하므로, React 외부에서도 해당 클래스 계약을 구현할 수 있습니다. 스타일시트는 CSS 사용자 지정 속성에 의존하므로, 완전한 테마 없이 가져오면 중요한 치수와 색상이 정해지지 않습니다. 따라서 이 예시에서는 네이티브 스위치 스타일시트와 독자적으로 구성한 완전한 중립 설정을 함께 사용합니다.
저장소는 오픈 소스 패키지와 독점 에셋을 분리합니다. 검토한 토큰 패키지 4.3.0에는 오픈 소스 라이선스에서 제외한다는 별도의 라이선스 고지가 있습니다. Amsterdam Sans, 아이콘, 시 로고에도 각각 별도의 제한 사항이 적용됩니다. 이 가이드에서는 해당 자료가 존재한다는 점만 맥락으로 언급하며, 이를 재배포하거나 공개 npm 다운로드만으로 브랜딩 권한을 제한 없이 얻을 수 있다고 주장하지 않습니다.
참조 표에는 선택한 스위치 스타일시트에서 사용하는 모든 변수가 나와 있습니다. 너비, 썸 치수, 테두리 너비, 색상, 윤곽선 간격, 커서, 호버 효과를 모두 명시적으로 설정했습니다. 이 예시를 위해 독자적으로 정한 값이지, Amsterdam 디자인 토큰을 복사한 것이 아닙니다. 이 구분을 통해 독자는 누락된 테마 요소를 추측하지 않고도 예제를 재현할 수 있습니다.
트랙 너비는 50px, 썸 크기는 22px, 테두리 너비는 3px입니다. 네이티브 checked 상태의 변환은 썸 너비와 테두리 너비를 바탕으로 이동 거리를 계산합니다. 따라서 트랙 너비만 변경하면 썸이 정렬되지 않을 수 있습니다. 관련된 치수를 함께 변경하고 두 상태를 모두 확인하세요.
React 구현은 래퍼, 입력 요소, 연결된 빈 레이블을 렌더링합니다. CSS는 인접 형제 선택자를 사용해 입력 요소의 포커스, 체크, 비활성화 상태에 따라 레이블을 스타일링합니다. 일반 HTML 구현에서도 이 순서를 유지하세요. 입력 요소와 레이블 사이에 설명을 넣으면 해당 선택자가 작동하지 않습니다.
실제 입력 요소는 role="switch"가 지정된 체크박스입니다. 기본 checked 속성과 키보드 동작을 그대로 유지합니다. 시각적 레이블에 텍스트가 없으므로 aria-label 또는 aria-labelledby로 접근 가능한 이름을 제공하세요. 예시에서는 화면에 표시된 설정 제목을 참조하고, aria-describedby로 설명을 연결합니다.
컴포넌트 소스에서 Switch는 즉시 적용되는 이진 설정으로 정의되어 있습니다. 미리보기는 이 동작을 따릅니다. 큰 글씨 설정은 문서의 글자 크기를 바꾸고, 대비 강화 설정은 텍스트와 윤곽선을 바꾸며, 동작 줄이기 설정은 배지가 짧게 나타나는 효과를 없앱니다. 이 페이지의 선택 사항이 계정 서비스에 전송되는 것처럼 보이게 하는 저장 버튼은 없습니다.
기본값 복원은 세 개의 기본 체크 상태를 모두 해제하고 기본 문서 클래스를 다시 적용합니다. 상태 메시지에는 활성화된 설정이 표시됩니다. 페이지를 이동하거나 새로고침해도 설정은 저장되지 않습니다. 실제 서비스에서 설정 저장 기능을 추가할 수 있지만, 설정이 현재 페이지, 기기 또는 계정 중 어디에 적용되는지 명확히 밝혀야 합니다.
스타일시트는 화면에 보이는 입력 요소의 너비를 줄이지만 실제 컨트롤은 그대로 유지합니다. 포커스 선택자는 뒤따르는 레이블에 윤곽선을 표시합니다. 입력 요소를 장식용 div로 바꾸면 기본 폼 의미와 동작을 잃고 키보드 지원을 별도로 구현해야 합니다. 입력 요소에 display:none을 적용하지 마세요.
기본 스타일시트는 prefers-reduced-motion:no-preference일 때만 전환 효과를 사용합니다. 문서 효과도 로컬 스위치와 별개로 운영체제 설정을 따릅니다. 시스템 수준에서 동작을 줄이도록 설정한 사용자가 예시가 차분하게 작동하기 전에 별도의 스위치를 찾아야 해서는 안 됩니다.
확인된 속성을 기준 상태로 사용하고, 관련 없는 시각적 활성 상태를 임의로 만들지 마세요.
각 설정이 문서에 미치는 영향을 보여주도록 2열 레이아웃으로 구성합니다. 애플리케이션별로 설정한 700px 중단점 아래에서는 컨트롤이 미리보기 위에 오도록 쌓입니다. 최대 너비 900px과 간격 32px은 개별 레이아웃 결정이며, 도시 전체에 적용되는 그리드 토큰의 근거가 아닙니다.
중립적인 글꼴은 Arial입니다. 본문 글자 크기는 18px이고 줄 간격은 1.5입니다. 큰 글씨 모드는 문서만 22px로 바꿉니다. 이는 애플리케이션 설정의 예시일 뿐, 브라우저 확대 기능을 대체하거나 해당 크기가 Amsterdam에서 정한 값이라는 뜻은 아닙니다. 긴 레이블은 기본 스위치 너비를 줄이지 않고 줄바꿈됩니다.
기존 React 애플리케이션에서 검증된 Switch는 표준 입력 속성을 받고 ref를 입력 요소로 전달합니다. 제어 방식으로 사용하려면 checked와 onChange를 제공하고, 비제어 방식에서는 defaultChecked를 제공할 수 있습니다. 이 컴포넌트는 애플리케이션 저장 기능이나 계정 설정용 API을 제공하지 않습니다.
독립형 HTML 예시에는 오픈 소스 Switch CSS만 필요합니다. 설정 절차와 전체 코드에 누락된 테마 구성과 로컬 상태 처리 방식이 포함되어 있습니다. 패키지 설치 도구가 종속성으로 독점 에셋을 가져올 수 있지만, 해당 에셋이 디스크에 있다고 해서 가져오거나 배포해도 되는 것은 아닙니다. 함께 제공된 예시에는 선택한 CSS과 해당 오픈 소스 라이선스만 포함됩니다.
도시 디자인 시스템은 지방자치단체 제품의 일관성과 접근성을 높이기 위해 마련되었습니다. 재사용 가능한 코드는 라이선스 범위 안에서 검토하고 수정해 활용할 수 있지만, 로고와 독점 글꼴 및 아이콘 에셋에는 각각 별도의 이용 약관이 적용됩니다. 미리보기에는 독자적인 브랜딩과 중립적인 콘텐츠를 사용해 Amsterdam 서비스로 오인되지 않도록 했습니다.
검증된 범위는 완성된 사용자 지정 테마와 의미 있는 로컬 동작을 갖춘 기본 컴포넌트 하나입니다. 도시 테마 전체를 재구현한 것이 아닙니다. 더 폭넓은 CSS 패키지를 도입하는 실제 제품은 이 Switch 구성을 다른 컨트롤에도 그대로 적용하기보다 추가 컴포넌트에 필요한 모든 변수를 정의하고 테스트해야 합니다.
오픈 소스 CSS만 사용하며, 완성된 독자 테마와 작동하는 HTML 예시가 제공됩니다. 독점 토큰이나 에셋 묶음은 배포되지 않습니다. Sources에 있는 완성된 작동 예제 ZIP에는 미리보기에 필요한 정확한 종속성과 전체 문서도 포함되어 있습니다. 압축을 푼 뒤 해당 디렉터리에서 python3 -m http.server 8080을 실행하고 http://localhost:8080/amsterdam.html을 여세요. 모듈을 사용하는 예시는 file://로 열지 마세요.
bash
npm install @amsterdam/[email protected]
# Copy dist/switch/switch.css into your public assets.
# Load it before the complete original theme configuration below.
# Do not import the proprietary assets or tokens for this neutral example.
프로젝트를 위한 프롬프트
에이전트 프롬프트
Amsterdam 오픈 소스 Switch CSS와 완성된 독자 테마를 사용하세요. 래퍼/입력 요소/인접 레이블 구조, role=switch, 접근 가능한 이름을 유지하세요. 이진 설정은 즉시 적용하고 checked를 상태의 기준으로 사용하세요. 동작 줄이기 설정을 따르고 로컬 설정과 저장되는 계정 설정을 구분하세요. 관련 권한 없이 독점 토큰, 글꼴, 로고 또는 아이콘을 가져오지 마세요.
05
Amsterdam 디자인 시스템 출처 및 범위
독립형 OpenDesign 예시입니다. Amsterdam 브랜드 토큰, Amsterdam Sans, 공식 아이콘과 로고는 포함되지 않습니다.
