색상
색상 (Colors)
Ant Design은 색상 시스템을 시스템 레벨 색상 시스템(system-level)과 제품 레벨 색상 시스템(product-level) 두 단계로 해석해요.
출처: 문서
본문
시스템 레벨 색상 시스템은 주로 Ant Financial 디자인에서 기본 색상 팔레트, 중성 색상 팔레트, 데이터 시각화 색상 팔레트를 정의해요. 제품 레벨 색상 시스템은 구체적인 디자인 과정에서, 시스템의 색상에 기반해 요구사항과 기능에 따라 제품의 톤(tone)을 더 정의해요.
색상 모델 (Color Model)
Ant Design 디자인 팀은 HSB 색상 모델로 디자인하는 것을 선호해요. 이렇게 하면 디자이너가 색상을 조정할 때 색상에 대한 명확한 심리적 기대를 갖기 쉬워지고, 팀 내 커뮤니케이션도 촉진돼요.
시스템 레벨 색상 시스템 (System-level Color System)
Ant Design 시스템 레벨 색상 시스템도 "자연스러운" 디자인 언어에서 비롯돼요. 디자이너는 자연 장면을 캡처로 추상화하고 Ant Financial의 기술 유전자와 결합해 독특한 12개 색상을 형성해요. 이후 많은 관찰을 통해 자연광 아래 색상의 변화 법칙을 포착하고, 드로잉 예술 아이디어와 함께 12개 색상을 도출했어요. 중성 색상 팔레트의 정의는 가독성, 미학, 사용성 사이에서 균형을 잡아요.
기본 색상 팔레트 (Base Color Palettes)
Ant Design의 기본 색상 팔레트는 총 120개 색상으로, 12개 주 색상(primary colors)과 그 파생 색상으로 구성돼요. 이 색상들은 기본적으로 백그라운드 애플리케이션 디자인에 필요한 색상 요구를 포함할 수 있어요.
Ant Design의 색상 팔레트는 더 확장할 수 있는 능력도 있어요. 디자이너와 프로그래머의 신중한 작업 끝에, 색상의 자연스러운 변화를 결합한 색상 생성 도구 세트를 만들었어요. 색상 디자인이 더 필요할 때, 디자이너는 일정한 규칙에 따라 주 색상을 정의하기만 하면 파생 색상의 완전한 범위를 자동으로 얻을 수 있어요.
중성 색상 팔레트 (Neutral Color Palette)
데이터 시각화 색상 팔레트 (Data Visualization Color Palette)
데이터 시각화 색상 팔레트는 기본 색상 팔레트와 중성 색상 팔레트에 기반하며, AntV의 "효과적(effective), 명확(clear), 정확(accurate), 아름다움(beautiful)" 원칙에 기반해요. 팔레트 보기
팔레트 생성 도구 (Palette Generation Tool)
위 팔레트들이 요구를 충족하지 못한다면, 아래에서 주 색상을 고를 수 있어요. Ant Design의 색상 생성 알고리즘이 팔레트를 만들어 줘요.
프로그래밍 방식 사용 (Programmatic Usage)
개발자를 위해 JavaScript 사용을 제공해요.
npm install @ant-design/colors
import { blue } from '@ant-design/colors';
console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
console.log(blue.primary); // '#1677FF'
더 많은 API: @ant-design/colors
제품 레벨 색상 시스템 (Product-level Color System)
브랜드 색상 (Brand Color)
브랜드 색상은 제품 특성을 구현하고 아이디어를 전달하는 데 사용되는 가장 직관적인 시각 요소 중 하나예요. 색상을 선택할 때 브랜드 색상이 사용자 인터페이스에서 어떻게 사용되는지 이해하는 것이 중요해요. 기본 색상 팔레트에서 주 색상을 고를 때, 팔레트의 얕은 깊이에서 여섯 번째 색상을 주 색상으로 선택할 것을 권장해요. Ant Design의 브랜드 색상은 기본 색상 팔레트의 파란색에서 비롯되며, 그 Hex 값은 #1677ff예요. 적용 시나리오에는 핵심 동작 지점(key action point), 조작 상태, 중요한 정보 강조, 그래픽 등이 포함돼요.
기능 색상 (Functional Color)
기능 색상은 성공, 오류, 실패, 알림, 링크 등과 같은 명확한 메시지와 상태를 나타내요. 기능 색상 선택은 사용자의 색상에 대한 기본적인 이해를 준수해야 해요. 한 제품 시스템 세트 아래에서 기능 색상을 최대한 일관되게 유지할 것을 제안해요. 사용자의 인지 경험을 방해할 정도로 과도한 커스터마이징을 하면 안 돼요. Ant Design의 기능 색상 팔레트는 오른쪽에 있어요.
중성 색상 (Neutral Color)
중성 색상은 텍스트 인터페이스의 많은 부분에서 주로 사용되며, 배경, 테두리, 구분선 외에도 다른 시나리오에서도 매우 흔해요. 중성 색상 정의는 어두운 배경과 밝은 배경의 차이를 고려해야 하며, WCAG 2.0 표준을 함께 반영해야 해요. Ant Design의 중성 색상은 투명도에 기반하며 오른쪽과 같아요.
엔터프라이즈 제품 디자인의 색상 적용 (Color Application In Enterprise Product Design)
Ant Financial의 백그라운드 애플리케이션 디자인에서 색상에 대한 우리의 태도는 절제돼요. 색상은 정보 전달, 조작 안내, 상호작용 피드백 목적에 더 많이 사용돼요. 운영 효율성을 훼손하지 않고 정보의 명확한 전달에 영향을 주지 않는 이 원칙들 위에서, 합리적인 색상 선택이 핵심이에요. 물론 일러스트레이션과 디스플레이 페이지에서는 이 생각을 적절히 깨는 것도 가능해요.