Sass를 사용한 테마
개요
Angular 용 IgniteUI는 머티리얼 디자인 원칙을 기반으로 구성 요소 디자인을 기반으로 하므로 구성 요소의 색상, 크기, 타이포그래피, 전반적인 모양과 느낌을 Google에서 기본 테마로 만든 구성 요소에 최대한 가깝게 만들려고 노력합니다. 머티리얼 디자인 시스템은 계속 변화하고 주요 변경 사항 구현에서 벗어나지 않으며, 이는 궁극적으로 우리가 출시하는 구성 요소의 스타일을 작성하고 수정하는 방법에 영향을 미칩니다. Microsoft Fluent, Bootstrap 및 자체 Indigo Design 시스템 등 3가지 추가 테마를 지원하므로 머티리얼 디자인 시스템을 적용하는 것은 간단한 작업이 아닙니다. 이를 위해서는 매우 다양한 구성 요소 스타일을 생성할 수 있는 매우 모듈식이고 구성 가능하며 유지 관리가 가능한 기반을 구축해야 했습니다. 우리는 또한 기존 브라우저와 새 브라우저를 모두 지원해야 하므로 Sass는 변수, 함수 및 믹스인의 내장 시스템을 만들 수 있는 도구를 제공하여 이러한 노력에 엄청난 도움이 되었습니다.
테마 지정에 대한 우리의 접근 방식은 테마 스키마, 팔레트, 타이포그래피, 원형률, 고도 및 애니메이션과 같은 여러 개념을 기반으로 합니다. 그런 다음 이러한 개념을 혼합하여 최종 테마를 생성합니다. 각 개념은 더욱 세분화되어 스타일링에 대한 보다 세분화된 접근 방식을 허용합니다.
우리는 디자인 시스템의 특정 측면이 손상되지 않도록 하고 싶기 때문에 우리가 노출하는 API를 사용하여 모든 것을 변경하고 스타일을 완전히 다시 작성하는 것을 허용하지 않습니다. 그러나 좀 더 자세히 살펴보면 가능합니다.
우리는 귀하가 테마 엔진을 실제로 제어할 수 있다는 느낌을 받을 수 있도록 모든 단일 개념과 관련 API를 자세히 설명할 것입니다.
메모
Sass 테마 라이브러리는 강력하지만 대부분의 사람들은 기본 테마를 사용자 정의하기 위해 몇 가지 CSS 변수만 수정하면 됩니다. 먼저 CSS 변수 문서를 읽어 보시기 바랍니다. 더 깊은 수준에서 생성된 테마를 수정하려는 경우에만 Sass를 사용해야 합니다. 동일한 구성 요소에 대해 여러 가지 재사용 가능한 테마 변형을 생성해야 하거나 앱에서 사용하는 구성 요소에 대한 스타일만 포함하도록 생성된 CSS를 트리 셰이크해야 하는 경우가 좋은 예입니다.
팔레트
우리가 이해해야 할 첫 번째 개념은 팔레트입니다. 모든 시각적 도구와 마찬가지로 색상은 응용 프로그램 간 주요 차별화 요소입니다. 머티리얼 디자인 가이드라인은 특정 기본 색상에 대한 색조, 밝기, 채도 범위의 사전 정의된 색상 팔레트를 규정합니다. 그럴만한 이유가 있습니다. 그들은 배경색과 전경 텍스트 색상 간의 색상 일치와 대비가 잘 이루어지길 원합니다. 이는 훌륭하지만 동시에 제한적입니다. 귀하의 브랜딩과 일치하는 머티리얼 가이드라인을 기반으로 자신만의 맞춤형 팔레트를 갖고 싶다면 아마도 운이 좋지 않을 것입니다. 우리는 이것이 문제라는 것을 인식하고 귀하가 제공하는 기본 색상에서 머티리얼과 유사한 팔레트를 생성하는 알고리즘을 발명했습니다. 또한 팔레트의 각 색상에 대해 대비 텍스트 색상을 생성합니다.
스키마
두 번째 중요한 개념은 테마 스키마를 중심으로 이루어집니다. 테마 스키마는 개별 구성 요소 테마에 대한 레시피와 같습니다. 개별 구성 요소 테마에 사용해야 하는 팔레트 색상과 전체적인 원형도 및 그림자가 무엇인지에 대한 정보를 제공합니다. 예를 들어, 구성 요소 구성표는 사용자가 구성 요소 테마에 어떤 팔레트를 전달하는지 상관하지 않고 요소의 배경색이 primary 색상의 500 변형이어야 함을 구성 요소 테마에 알려줍니다.
타이포그래피
타이포그래피는 Sass 테마 라이브러리의 별도 모듈이며 개별 구성 요소 테마와 분리되어 있습니다. 비록 우리가 선택할 수 있는 기본 글꼴이 있지만, 우리는 정말로 여러분이 모든 단일 방식으로 애플리케이션의 스타일을 지정할 수 있는 기능을 제공하고 싶습니다. 타이포그래피는 매우 중요한 부분입니다. 앱에서 글꼴 모음, 제목, 부제목, 버튼, 본문 텍스트 등의 크기와 두께를 변경하는 방법을 제공합니다.
진원도
Sass 테마 시스템은 각 구성 요소의 최소 및 최대 원형률을 정의합니다. CSS의 맥락에서 border-radius 라는 용어에 더 익숙할 수도 있습니다. 원형도는 border-radius 사용하여 구성 요소 요소의 스타일을 지정한다는 점에서 유사하지만 테마 시스템의 맥락에서 원형도는 0과 1 사이의 숫자입니다. 원형도가 0인 구성 요소는 최소 테두리 반경을 사용합니다. 구성 요소 테마에 정의된 대로 0이거나 0이 아닌 값일 수 있습니다. 마찬가지로 원형률을 1로 설정하면 테두리 반경이 구성 요소에 허용되는 최대 반경으로 설정됩니다. 최소 및 최대 테두리 반경은 구성 요소 테마 자체에서 정의되지만 기본 원형 값은 구성 요소 스키마에서 설정됩니다.
표고
고도는 각 구성 요소 테마의 다양한 부분에 대해 설정되는 그림자입니다. 머티리얼 디자인 지침에 규정된 대로 25(0-24) 수준을 기반으로 합니다. 유한한 수의 그림자를 가지면 애플리케이션에서 깊이 계층을 정의하는 일관된 방법을 가질 수 있습니다. Sass에서는 box-shadows 값으로 사용하고 나중에 구성 요소 테마로 전달하는 24개 고도 수준의 맵으로 정의됩니다. 구성 요소 스키마는 특정 요소가 사용해야 하는 고도 수준에 대한 일반 정보를 테마에 제공합니다.
애니메이션
일부 구성 요소는 키프레임 전환과 애니메이션을 사용하여 상태 변경을 명확하게 전달합니다. 우리는 애플리케이션 전체에서 가져오고 사용할 수 있는 키프레임 애니메이션과 타이밍 기능의 거대한 라이브러리를 포함합니다. 그들은 트리쉐이킹(treeshaken)되어 있으므로 동일한 애니메이션 믹스인을 두 번 포함하면 출력 스타일시트에 단일 CSS 선언만 생성됩니다.
테마
마지막으로 구성 요소 테마가 있습니다. 팔레트, 스키마, 입면도, 진원도 및 애니메이션은 테마에서 사용되지 않으면 그 자체로는 큰 도움이 되지 않습니다. 우리는 전체 애플리케이션과 그 안에 있는 모든 구성 요소의 스타일을 지정하는 개별 구성 요소 및 전역 테마에 대한 테마를 제공합니다. 팔레트와 스키마를 전역 테마에 전달하기만 하면 나머지는 저희가 처리해 드립니다. 물론 사용자 정의 스키마, 고도를 생성하고 구성요소 테마 믹스인에 다양한 원형율 및 색상 값을 전달하여 원하는 대로 각 구성요소의 스타일을 개별적으로 지정할 수 있습니다.
추가 리소스
개념을 알아보세요:
애플리케이션 전체 테마를 만드는 방법을 알아보세요.
구성 요소별 테마를 만드는 방법을 알아보세요.
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub