Prev
Back
피그마 [Core System - Setting] 페이지에서, 우측 디자인 패널의 Color Styles를 확인합니다.
Edit Style 아이콘을 선택하면 해당 색상을 변경할 수 있습니다.
변경한 색상은 전체 디자인시스템 에셋 및 컴포넌트에 일괄 적용됩니다.
Brand color / Brand sub color / Point color / Alert / Gradient 컬러를 브랜드 무드에 맞게 변경할 수 있습니다.
Darkmode를 지원하는 경우에는 [Dark] 색상도 함께 적용해줍니다.
Primary는 서비스 전반의 메인 컬러 요소로 활용됩니다.
컴포넌트에서 메인 버튼, 활성화 컬러, 아이콘 메인 컬러, 메뉴 탭 강조 표시 등의 요소로 활용됩니다. 따라서 텍스트에 활용될 수 있는 점을 유의해 명시성이 떨어지는 컬러는 지양하는 것이 좋습니다.
Secondary , Tertiary 컬러는, 메인 색상 안에서 위계가 있는 컨텐츠의 Variation이 필요한 경우 활용되는 색상입니다.
제품 내부에서 색상 차를 활용해 컨텐츠 위계를 구분할 필요가 없는 경우, 해당 컬러는 지정하지 않아도 좋습니다.
Brand Color에 대응해 색상을 적용합니다.
주로 Hover 색상, Duotone icon, 배경 색상 등에 활용됩니다.
Brand Color에서 Secondary , Tertiary 를 적용하지 않았을 경우, Secondary Sub , Tertiary Sub 도 미지정 할 수 있습니다.
Icon, Top Banner 등의 컴포넌트에 구분되는 포인트 요소로 활용됩니다.
Alert 과는 다르게 구분되어 사용이 필요하며, Point Sub는 대응되는 색상으로 적용합니다.
Text Input, 유효성검사, Success, Error 등의 요소로 활용되는 색상입니다.
Sub Color도 대응되는 색상으로 적용합니다.
Icon, Floating action button 등의 컴포넌트에 활용되는 그라디언트 색상입니다.
Prymary, Primary Sub, Gradient Point1, Gradient Point2 ****색상을 조합해 그라데이션을 생성할 수 있습니다.
좌우 / 상하 / 대각선 형태로 그라데이션을 적용할 수 있습니다.
회색조 그리고 시스템 영역에 활용되는 컬러로, lightmode , Darkmode 에 전부 1:1 대응합니다.
Grayscale / Background / Modal / Dim / Button Text 색상이 포함됩니다.
명도 대비 및 시스템에 최적화 된 설정 색상이므로, 특별한 경우가 아닌 경우 이 영역은 수정하지 않는 것을 원칙으로 합니다. 그러나 해당 가이드가 브랜드 무드에 적합하지 않거나, 경우에 따라 필요한 색상을 변경 적용할 수 있습니다.
White, Black, Gray 6단계를 포함하며, 다크모드의 경우 1:1 대응합니다.
다크모드 대응 시 배경 색상이 Black이 아닌 Dark Gray 톤으로 적용되기 때문에, lightmode 에서도 White로 배경을 적용하지 않고, Background 컬러를 지정해 개별 적용합니다.
페이지의 레이어 겹침 및 위계에 따라 Primary / Secondary / Tertiary 로 색상이 구분됩니다.
다크모드 대응 시 1:1 대응을 위해, 모달 컬러를 별도 지정합니다.
Dim 컬러를 지정합니다. 50%, 20% 투명도 두 가지 종류를 활용하고 있습니다.
Button 컴포넌트에 쓰이는 Text Color를 지정합니다. Grayscale 컬러로 해당 텍스트 색상을 지정하는 경우, 다크모드 1:1 대응 시 디자인 의도와 다르게 텍스트 색상이 변경될 수 있기 때문에 별도 지정합니다.
색상 관련 더 자세한 내용은 Colors 페이지를 참고하세요.
Color Setting 과 동일하게, 피그마 [Core System - Setting] 페이지에서 우측 디자인 패널의 Text Styles를 확인합니다.
Edit Style 아이콘을 선택해 Typeface 및 Size 등의 정책을 변경할 수 있습니다.
피그마 [Example - Navigation] 페이지를 열어 Logo 프레임으로 이동합니다.
가이드에 맞춰 이미지를 대치하면, 반응형 기준에 따라 헤더 컴포넌트 전체에 해당 로고가 적용됩니다.
컬러 변경시 우측 디자인 탭에서, 문서에 지정된 Brand Color를 지정합니다.
헤더 관련 자세한 내용은 Header 페이지를 참고하세요.
상단 Color Setting을 완료하면, 해당 컬러 시스템에 따라 아이콘 색상이 일괄 적용 / 변경됩니다.
아이콘은 분류 기준에 따라 사이즈를 맞춰, 컴포넌트를 새로 지정하고 추가할 수 있습니다.
