디자인 시스템의 역동적인 영역에서 강력하고 접근하기 쉬운 색상 팔레트는 제품의 정체성과 사용자 경험을 근본적으로 형성하는 중추적인 초석입니다. 다음 기사에서는 디자인 시스템의 색상 팔레트를 감사하고 변환하는 복잡한 프로세스, 즉 조화, 접근성 및 일관성의 특성을 결합하려는 여정에 대해 설명합니다. 이 여정에는 엄격한 테스트가 수반되었을 뿐만 아니라 미학과 포괄성을 완벽하게 결합하는 팔레트를 만들기 위해 도구 도구를 활용하는 것도 포함되었습니다. 1. 출발점 평가 이미 존재하는 색상 팔레트나 디자인 시스템에서 시작하는 경우 기존의 모든 색상과 음영을 조합하는 것부터 여정이 시작될 수 있습니다. 나는 거기에서 시작했고 아주 일찍부터 이 팔레트가 패치워크 어셈블리처럼 보였고 접근성 표준에 대한 조화와 준수가 매우 부족하다는 것이 분명해졌습니다. 따라서 최신 접근성 표준에 맞춰 팔레트를 다시 생각해야 하는 필요성이 대두되었습니다. 기존 팔레트가 있는지 여부에 관계없이 초기 단계에는 제품 또는 디자인 시스템의 시각적 정체성과 기능적 특성을 고정시키는 협상할 수 없는 색상을 식별하는 것도 포함될 수 있습니다. 또한 협상할 수 없는 사항을 식별하거나 기존 색상 팔레트에 대한 변경 사항을 승인하는 데 참여해야 하는 이해관계자(예: 마케팅 팀, 기타 디자이너 및 제품 관리자, 긴밀히 협력하는 프런트 엔드 개발자)를 식별할 수 있는 좋은 시기이기도 합니다. 디자인 시스템과 함께). 내 경우에는 다음이 포함됩니다. 브랜딩 색상: 단순한 시각적 미학을 넘어 브랜드와 연결되는 색상입니다. 이들의 통합은 브랜드 일관성을 유지하는 동시에 회사가 옹호하는 핵심 가치를 사용자에게 심어줍니다. 의미 색상: 기능적으로 필수적인 의미 색상은 중요한 정보, 오류 처리 및 양식 유효성 검사를 조명합니다. 특히 이 색상 범주에서 접근성 지침을 준수하는 것은 포괄적인 인터페이스에 매우 중요합니다. 산업 또는 상황별 색상: 디자인 시스템이 광범위한 상태 내에서 작동하는 도구를 충족시키는 경우 색상 조합을 사용하여 이러한 상태를 나타내는 것은 조치의 긴급성을 전달하는 데 중추적인 역할을 할 수 있습니다. 접근성 지침뿐만 아니라 업계 표준을 준수하는 것은 포괄적이고 친숙한 인터페이스에 중추적인 역할을 할 수 있습니다. 2. 올바른 도구 활용 타협할 수 없는 몇 가지 색상에서 벗어나 일관된 팔레트를 구성하는 복잡한 과정을 탐색하면서 다양한 오픈 소스 도구에서 도움을 구하게 되었습니다. 이에 대한 예는 Wildbit Labs의 Accessible Palette 입니다 . 이 도구를 사용하면 기본 색상(예: 회사 브랜드 색상)을 입력할 수 있으며 이를 통해 접근 가능한 색상 변형의 스펙트럼이 생성됩니다. Wildbit Labs의 액세스 가능한 팔레트 이를 통해 서로 조화롭게 작동하고 시행착오를 최소화하는 접근 가능한 색상을 찾는 프로세스가 간소화되었습니다. Wildbit Labs의 Accessible Palette는 제가 진행하는 동안 매우 귀중한 것으로 입증된 기존 도구의 한 예일 뿐입니다. 3. 팔레트와 컴포넌트의 조화 Wildbit Labs의 Accessible Palette로 생성된 색상을 검증하려면 Able — Friction Free Figma 플러그인 또는 EightShapes Contrast Grid 도구 와 같은 다양한 도구를 활용해야 했습니다 . Able — Friction Free Figma 플러그인은 각 색상을 다른 색상 및 다양한 배경에 대해 테스트하는 것을 용이하게 하여 다양한 사용 사례에 대한 접근성을 보장합니다. Figma 플러그인을 사용한 테스트: Able — 마찰 없는 접근성 마찬가지로 Color.Review 도구 또는 EightShapes Contrast Grid 도구와 같은 도구는 WCAG 2.0 최소 대비를 준수하는지 다양한 전경색과 배경색 조합을 테스트할 때 매우 유용했습니다 . 이러한 색상을 실제 UI 구성 요소로 변환하려면 많은 테스트가 필요했습니다. 경고 및 태그와 같이 원래 색상 팔레트의 색상 조합을 사용하는 까다로운 구성 요소를 해결하는 것이 출발점이었습니다. 접근성을 유지하면서 창의적인 타협이 필요한 특정 구성 요소를 사용하여 접근성 및 미적 문제가 해결되었습니다. 3.2 업계 또는 상황별 색상 조화 디자인 시스템이 이러한 상태나 심각도를 나타내기 위해 색상 조합을 사용하여 광범위한 상태 내에서 작동하는 도구를 제공하는 경우 구성 요소 및 색상 조합의 세심한 테스트가 특히 중요하다는 것을 알게 될 것입니다. 제 경우에는 취약성 심각도 색상 내에서 명확한 구별과 최적의 대비를 유지하는 문제를 해결할 때 이것이 매우 중요했습니다. 상황별 색상에 대한 VizPalette를 통한 접근성 확인 이 과제는 다양한 분야의 디자이너와 제품 관리자가 참여하는 공동 노력을 촉발시켰습니다. 우리는 함께 구별 가능성의 미묘한 차이를 탐구하고 잠재적인 문제를 꼼꼼하게 식별하고 평가했습니다. 이 프로세스를 통해 우리는 더 어두운 톤을 독창적으로 선택하고 전경-배경 색상 쌍을 개선하여 복잡성을 능숙하게 탐색했습니다. 이러한 미묘하면서도 강력한 조정은 팔레트를 조화롭게 만들어 최종 디자인의 선명도를 높이고 포괄성을 강화하는 데 기여했습니다. 4. 미래의 요구사항 해결 강력한 기본 팔레트가 확립되면서 초점은 미래 요구 사항을 예측하는 것으로 옮겨졌습니다. 앞서 언급한 Wildbit 도구를 활용하여 가까운 미래와 그리 멀지 않은 미래에 필요하다고 알고 있는 추가 태그 및 데이터 시각화 요소를 수용할 수 있도록 팔레트를 확장했습니다. VizPalette 와 같은 도구를 사용하여 더욱 개선된 결과, WCAG 2.0 대비 표준을 준수하면서 대규모 데이터 세트를 시각화하기 위한 다양한 요구 사항과 사용 사례를 조화롭게 충족하는 범주형 및 순차적 팔레트가 탄생했습니다 . 5. 새로운 팔레트에 전념하기 이 프로세스의 정점은 디자인 시스템의 컬러 팔레트 2.0의 탄생으로 이어졌습니다. 이전 버전과 대조되는 이 팔레트는 조화와 결속력을 발산합니다. 통일된 색조 진행을 통해 디자인 요소 전반에 걸쳐 원활한 통합이 가능해졌습니다. 브랜드 아이덴티티와 의미론적 논리에 충실한 이 팔레트는 접근성 표준을 꾸준히 준수하여 수직 및 수평 색상 순서를 모두 수용합니다. 이 시점에서 필요한 것은 이전에 식별된 이해관계자를 모아 결과적인 새 팔레트에 대한 최종 비평과 검증을 받는 것입니다. 이 단계를 완료하는 데 시간이 좀 걸릴 수 있으며 새 팔레트의 색상을 적용한 Figma 디자인 시스템 파일의 분기를 만들어 동료와 이해관계자에게 색상과 음영이 어떻게 변경되는지 보여줄 수 있는 것이 좋습니다. 실제처럼 보입니다. 이렇게 하면 직접적이고 명확한 피드백을 더 쉽게 받을 수 있습니다. 다양한 이해관계자의 동의를 얻는 것이 좋습니다. 디자인 시스템에 대한 그들의 입력은 모든 사람이 공통 디자인 언어가 단일 개인이나 팀이 아닌 사람들의 커뮤니티에 의해 구축된 것처럼 느끼게 해주기 때문입니다. 주인의식을 가지면 모든 사람이 디자인 지침과 색상 사용을 훨씬 쉽게 준수할 수 있습니다. 6. 구현 검토 및 비평 프로세스가 완료되면 포함된 피드백으로 팔레트를 다듬고 계속해서 디자인 코드/구성 요소 저장소 및 Figma 파일에 대한 변경 사항을 구현하여 모든 사람이 최신 조정 사항으로 디자인 시스템을 계속 사용할 수 있도록 해야 합니다. . 이는 디자인 시스템의 색상 팔레트를 제품의 미적 매력을 향상시킬 뿐만 아니라 모든 사용자의 포용성과 접근성을 촉진하는 강력한 도구로 변환하는 것을 의미합니다. 최종 발언 결론적으로, 디자인 시스템의 색상 팔레트를 개선하는 여정을 시작하는 것은 창의성과 포괄성을 결합하는 다차원적인 작업입니다. 기존 팔레트를 신중하게 평가하고, 접근 가능한 색상 도구를 활용하고, 색상을 UI 요소와 조화시키고, 이해관계자와 협력하여 미학과 접근성의 언어를 조화롭게 표현하는 팔레트를 구축합니다. 일관성과 명확성에 대한 약속을 바탕으로 진행되는 이 세심한 프로세스는 제품의 시각적 매력을 향상시킬 뿐만 아니라 보다 포괄적인 디지털 환경으로의 문을 열어주는 팔레트로 완성됩니다. 각 색상과 색조를 신중하게 선택하고 엄격한 테스트를 거쳐 능력에 관계없이 모든 사용자가 쉽게 제품과 상호 작용할 수 있는 환경을 조성합니다. 디자이너로서 우리는 아름답고 접근하기 쉬운 디지털 경험을 형성하는 힘을 발휘합니다. 디자인 시스템의 색상 팔레트를 변화시키는 이러한 여정을 통해 우리는 미학과 유용성 사이의 격차를 해소하고 궁극적으로 모든 사용자의 소속감을 조성합니다. 따라서 우리가 선택하는 모든 색상이 더욱 밝고 포용적인 디지털 미래를 만들 수 있도록 계속해서 의도적으로 창조해 갑시다.