앱 테마란 무엇인가요 - 개요
앱 테마는 전체 앱, 뷰 또는 액티비티 전반에 걸쳐 시각적 일관성을 만드는 색상 팔레트와 속성의 모음입니다. 앱 테마를 사용하면 다양한 패널, 스타일, 레이아웃, 타이포그래피, 미리 제공되는 테마 위젯을 선택하고 구성하여 애플리케이션의 모양과 느낌을 정의할 수 있습니다. 또는 커스텀 테마 파일을 만들 수도 있습니다.
App Builder 테마
App Builder는 UI 생성에 디자인 시스템 접근 방식을 채택하고 있으며 앱 테마를 다운로드하여 앱 수준에서 적용할 수 있습니다. 단일 테마 선택으로 테마가 전체 애플리케이션에 즉시 전역적으로 적용됩니다. 전역 테마를 사용하면 유지하기 어려운 로컬 스타일을 만들 필요가 없습니다.
App Builder 테마 전환
Material, Fluent 또는 Bootstrap을 기반으로 하는 6개의 내장 앱 테마가 있습니다. 각 테마에는 어두운 버전과 밝은 버전이 있습니다. 도구상자에서 테마 카드를 선택하여 시도해볼 수 있습니다.
테마 간 전환
Material vs. Fluent vs. Bootstrap
Material에서 Fluent로 전환할 때 컴포넌트의 모양이 달라집니다. 예를 들어, Material의 입력 필드에 대한 플로팅 레이블 스타일이 고정 레이블로 전환됩니다. 그리고 스위치도 시각적으로 다릅니다. 다른 변경 사항들은 더 미묘하지만, 그것들도 있습니다.
앱 테마를 커스터마이징하고 적용하는 방법
브랜드에 맞는 커스텀 앱 테마를 만들 수 있습니다. 이를 위해 새로운 테마를 만들고 기본 테마 중 하나를 시작점으로 선택합니다. 색상 팔레트는 선택한 기본 및 보조 색상을 기반으로 자동으로 생성됩니다. 타이포그래피와 관련하여, 현재는 내장된 글꼴 세트를 제공하고 있지만 향후 버전에서 더 많은 창의적 제어를 추가할 계획입니다. 편집을 완료한 후 앱 테마를 저장하여 변경 사항을 적용합니다.
새로운 테마 만들기
테마 간 전환
앱 테마를 선택한 후 컨테이너에 채우기 색상을 적용하면, 색상 선택기는 이제 선택된 테마의 팔레트를 반영합니다. 이를 통해 브랜드 속성이 앱 수준에서 결정되고 유지되는 디자인 시스템 접근 방식을 충실하게 유지할 수 있으며, UI를 만드는 사람에 따라 임의로 결정되지 않습니다.
레이아웃의 모양 변경
향후에는 커스텀 색상을 추가하는 방법을 포함할 예정이지만, 이는 부차적인 사용 사례입니다. 현재로서는 레이아웃의 모양을 더 커스터마이징하고 커스텀 색상을 사용하여 앱을 추가로 재스타일링하고 싶다면 항상 측면의 입력 필드에 색상 코드를 입력할 수 있습니다. 편집기에서 만든 앱 수준의 테마는 앱을 생성할 때 플랫폼 규격 방식으로 유지됩니다. 또한 향후에 테마를 매우 간단하게 변경할 수 있습니다.
App Builder를 사용하면 Flex 레이아웃을 활용할 수 있으며, 커스텀 레이아웃의 더 쉽고 빠른 생성을 위한 고급 위치 지정 기능을 제공합니다. 이렇게 하면 만든 앱이 모든 화면 크기에 적응할 것입니다. 반면 절대 레이아웃과 비교하면 하나의 화면 크기에만 특정 디자인을 얻게 됩니다.
추가 자료
GitHub
