컬러 피커
EmDash CMS 안에서 편집자 친화적인 시각 설정을 위한 컬러 피커 필드 위젯을 추가합니다.
플러그인
컬러 피커
EmDash CMS 안에서 편집자 친화적인 시각 설정을 위한 컬러 피커 필드 위젯을 추가합니다.
제품 상세
- 카테고리
- 에디터 경험
- 상태
- 사용 가능
- 버전
- 베타에 포함
Color Picker는 편집 경험에 초점을 둔 플러그인으로, 컬러 피커 필드 위젯을 추가해 관리자가 일반 텍스트 필드에 hex를 직접 입력하지 않고도 브랜드 색을 시각적으로 구성할 수 있게 합니다. EmDash 플러그인이 무거운 통합뿐 아니라 일상적인 편집 UX도 개선할 수 있음을 보여 줍니다. EmDash 저장소의 packages/plugins/color를 참고하세요.
설치
- EmDash 관리자에서 Color Picker 플러그인을 켭니다.
- 콘텐츠 모델이나 스키마에서 디자이너가 색을 고를 필드(테마 액센트, 버튼 색, 카테고리 배지 등)에 컬러 위젯을 연결합니다.
- 관리 UI를 미리 보고 피커가 렌더링되고 저장 시 값이 유지되는지 확인합니다.
구성
보통 다음을 정의합니다.
- 기본 색상 — 새 항목에 대한 브랜드에 안전한 시작점.
- 허용 형식 — 테마가 소비하는 hex, RGB 또는 CSS 변수.
- 대비·접근성 힌트 — 알려진 배경에 대해 WCAG 대비를 맞춰야 할 때 필드 설명에 메모를 추가하는 팀도 있습니다.
예(개념): 마케팅 템플릿이 primaryColor와 secondaryColor를 #2563eb, #64748b로 저장하고, 빌드 시점에 Astro 컴포넌트의 CSS 변수로 참조할 수 있습니다.
사용 시나리오
- 테마 맞춤 — 캠페마다 약간 다른 액센트가 필요하지만 새 배포는 피하고 싶은 마케팅 사이트.
- 디자인 시스템 — 인라인 스타일로 흩어지지 않고 구조화된 필드에 팔레트를 둡니다.
- 화이트 라벨 — 파트너가 정한 가드레일 안에서 색을 고릅니다.
운영 팁
- 색이 프런트엔드 토큰에 어떻게 매핑되는지 문서화해 엔지니어가 중복 하드코딩하지 않게 하세요.
- 의료 브랜드 사이트에서 네온 그린을 막아야 한다면 저장 시 검증하세요.
- 콘텐츠 내보낼 때 색 필드를 포함해 재가져오기에서 스타일이 사라지지 않게 하세요.