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