Color Picker
EmDash CMS 내에서 편집자 친화적인 시각적 구성을 위해 색상 선택기 필드 위젯을 추가하세요.
플러그인
Color Picker
EmDash CMS 내에서 편집자 친화적인 시각적 구성을 위해 색상 선택기 필드 위젯을 추가하세요.
Color Picker는 편집자 경험에 초점을 맞춘 플러그인입니다. 색상 선택기 필드 위젯을 추가하여 관리자가 일반 텍스트 필드에 16진수 코드를 입력하는 대신 브랜드 색상을 시각적으로 구성할 수 있습니다. 이는 EmDash 플러그인이 대규모 통합을 위한 것일 뿐만 아니라 일상적인 편집 UX도 향상시킨다는 것을 보여줍니다. EmDash 저장소의 packages/plugins/color를 참조하세요.
설치
- EmDash 관리자에서 색상 선택기 플러그인을 활성화합니다.
- 콘텐츠 모델 또는 스키마에서 디자이너가 색상을 선택해야 하는 필드(테마 강조, 버튼 색상, 카테고리 배지)에 색상 위젯을 연결합니다.
- 관리 UI를 미리 보고 선택기가 저장 시 값을 렌더링하고 유지하는지 확인합니다.
구성
일반적으로 다음을 정의합니다.
- 기본 색상 — 새 항목의 브랜드 안전 시작점입니다.
- 허용되는 형식 — 테마에서 사용하는 항목에 따라 16진수, RGB 또는 CSS 변수입니다.
- 대비 또는 접근성 힌트 — 일부 팀에서는 특정 색상이 알려진 배경과 WCAG 대비를 충족해야 하는 경우 필드 설명에 메모를 추가합니다.
예(개념): 마케팅 템플릿은 빌드 시 설정된 CSS 변수를 통해 Astro 구성 요소에서 참조되는 primaryColor 및 secondaryColor를 #2563eb 및 #64748b로 저장할 수 있습니다.
사용 시나리오
- 테마 사용자 정의 — 새로운 배포 없이 각 캠페인에 약간 다른 악센트가 필요한 마케팅 사이트입니다.
- 디자인 시스템 — 분산된 인라인 스타일 대신 구조화된 필드 내에서 팔레트 선택을 유지합니다.
- 화이트 라벨 제품 — 파트너는 귀하가 정의한 가드레일 내에서 색상을 선택합니다.
운영 팁
- 엔지니어가 중복을 하드코딩하지 않도록 색상이 프런트엔드 토큰에 매핑되는 방식을 문서화합니다.
- 헬스케어 브랜드 사이트에서 네온 그린을 차단해야 하는 경우 저장 시 값을 검증합니다.
- 콘텐츠를 내보낼 때 마이그레이션 체크리스트에 색상 필드를 포함시켜 다시 가져올 때 스타일이 손실되지 않도록 하세요.
레지스트리 상태(2026-10-21 확인): 당일 확인한 EmDash 공개 레지스트리 결과에서 이 항목을 찾지 못했습니다. 참고할 수 있도록 기존 페이지 주소는 유지합니다.