[번역] 안드로이드 스타일 적용하기 : 테마와 스타일

이 글은 안드로이드 공식 Medium 블로그에 있는 글인 Android Sytling: Themes vs Styles를 개인적인 학습을 목적으로 번역 한 글입니다.

혹시 번역이 틀렸거나 의견이 있으시면 아래 댓글로 알려주세요.

 

---

안드로이드 스타일 시스템은 당신의 앱의 시각적 디자인을 표현할 때 강력한 방법을 제공합니다. 하지만 사용법을 제대로 이해하지 못하고 사용하면 잘못 이용될 수 있습니다. 제대로 사용하게 되면 테마와 스타일을 제공하고 유지보수하는기 매우 쉬우며, 브랜딩을 개선할 때 부담이 적고, 간단하게 다크모드를 제공할 수 있습니다. 이 글은 Chris Banes와 저(Nick Butcher)의 안드로이드 스타일을 이해하기 쉽게 설명하는 첫 글입니다. 이 글들을 읽고 나면 스타일을 제공하는데 머리가 덜 아플겁니다.

 

이 글에서는, 스타일 시스템의 구성요소인 Theme와 Style에 대해서 알아 볼 예정입니다.

 

Theme != Style, 테마와 스타일은 다릅니다.

테마와 스타일은 모두 <style> 문법을 사용합니다. 하지만, 매우 다른 목적을 제공합니다. 테마와 스타일 모두 key-value를 저장한다고 봐도 됩니다. Key는 attribute(속성)를 나타내고, value는 resouce(리소스)를 나타냅니다. 각각에 대해 살펴보도록 합시다.

 

What’s in a style? 스타일이란 무엇인가?

스타일은 view attribute(뷰 속성)의 모음입니다. 스타일을 Map<view attribute, values>라고 생각해도 되요. key들은 View attribute들이에요. 예를 들어 widget에 선언되는 속성들, 즉 layout파일에 선언된 것들이요. 스타일은 한 타입의 widget을 나타냅니다. 왜냐하면 widget 종류별로 다른 attribute를 선언할 수 있기 때문입니다.

 

Style은 view 속성의 모음입니다. 한가지 타입의 widget을 나타냅니다. 

 

보시다시피, 스타일의 각각의 key는 layout에서 설정할 수 있는 것들입니다.

 

스타일을 만들어서 사용하는 것이 여러가지 뷰에서 재사용하고, 유지보수하는데 편리합니다.

 

사용법

스타일은 레이아웃의 각 View에서 사용됩니다. 

View에는 한가지 스타일만 적용됩니다. (웹에서 여러 css를 컴포넌트에 적용할 수 있는 다른 스타일 적용 시스템과 다릅니다. )

Scope

하나의 view에 적용 된 style은 오직 해당 view에만 적용이 됩니다. 즉, 그 뷰 안에 포함되어 있는 다른 뷰(children)에는 적용되지 않습니다. 예를 들어서, 3개의 버튼을 포함하고 있는 ViewGroup이 있다고 합시다. ViewGroup의 InlineAction 스타일은 버튼에 적용되지 않습니다. 스타일에 의해 제공되는 것들은, layout에 직접 적용됩니다. (resolved using the styling precedence order).

 

테마란?

테마는 style과 layout 등에 적용될 수 있는 리소스들의 집합니다. 이것들은 Android 리소스에 의미있는 이름들로 구성되어 있기 때문에 이를 참조할 수 있습니다. 에를 들어서, colorPrimary는 지정된 색상의 의미있는 이름입니다. 

이런 리소스들은 Theme Attribute(테마 속성)이라고도 합니다. 테마는 Map<theme attribute, resource>와 같은 형식이라고 볼 수 있습니다.  theme Attribute들은 view attribute들과 다릅니다. 왜냐하면 이 속성들은 하나의 view의 속성을 나타내지 않기 때문입니다. 이 이름들로 지정된 값들은 앱 전체에 적용될 수 있습니다. 테마는 이 이름의 리소스들에 구체적인 값들을 제공합니다. 위의 예시와 같이 colorPrimary 속성은 이 테마의 primary color를 청록색이란 것을 나타냅니다. 테마를 통해 추상적인 리소스를 제공함으로써, 다른 테마들에 구체적인 값들을 제공할 수 있습니다. (예를 들어서 colorPrimary를 orange로 제공하는 것과 같이요)

 

테마는 앱 전체적으로 적용되는 리소스의 집합을 일컫습니다. 

 

테마는 interface(인터페이스)와 비슷합니다. 인터페이스를 통한 프로그래밍은 implementation을 통해서 여러개의 public을 상속받을 수 있으며, 다른 implementation을 제공합니다. 테마는 이와 비슷한 역할을 합니다. layour과 sytle을 theme attribute를 통해 작성함으로써, style과 layout을 다른 테마로 사용할 수 있으며, 다른 리소스를 제공할 수도 있습니다. 

 

러프하게, 슈도코드로 나타내면 아래와 같습니다.

MyView가 각각의 변수들을 생성하지 않고 그려지는 방식을 나타낸 것입니다. 

사용법

Activity 또는 View/ViewGroups와 같은 Context를 나타내는 곳에서 Component의 Theme를 정의하는 방법입니다.

ContextThemeWrapper를 이용해서, layout을 inflate 할 때 등에, 테마를 코드 수준으로 이용할 수도 있습니다.

 

Theme의 강점은 어떻게 사용하느냐에 달려있습니다. Theme Attribute들을 참조하여 좀 더 유연한 widget들을 만들 수 있습니다. 다른 테마들은 각각 구체적인 값들을 제공합니다. 예를 들어, background color를 view hierachy에서 설정하게 할 수도 있습니다.

#ffffff 혹은 @color 리소스를 사용하는 것과 같이 정적인 색상을 설정하기보다는, ?attr/themeAttributeName 과 같은 구문을 사용하여 theme에게 색상을 설정하게 맡길 수 있습니다. 이 구문은 이 의미의 속에서 테마에서 골라서 사용한다는 뜻입니다. 이러한 간접적인 방식이 여러가지 다른 동작을 여러 layout 혹은 style을 만들지 않고도 몇몇 색상들을 제공할 수 있게 해 줍니다. (예 : 밝은 테마와 다크테마간의 다른 background color 을 설정할 수 있게 함). 이렇게 theme를 사용하는 대부분은 대부분의 색상은 같지만 단지 몇몇 부분의 색상만 다르곤 합니다. 게다가 테마의 색상 변화를 나머지 부분과 분리할 수 있게 제공해주기도 합니다.

 

스코프

Theme는 Context의 속성으로 접근이 가능하며, Activity, View, ViewGroup과 같은 Context를 얻을 수 있는 곳에서도 접근이 가능합니다. 이 객체들은 Activity에 속해 있는 ViewGroup에 속해있는 View와 같이 트리 형식으로 객체가 존재합니다. 이 트리 형식의 어느곳에나 테마를 설정을 하면, 연속적으로 파생되는 노드들에 적용이 됩니다. 예를 들어서 ViewGroup에 설정하면 그 안에 있는 View에 적용됩니다. 이것이 Style은 하나의 View에만 적용되는 것과의 차이점입니다. 

이러한 동작방식은 꽤 유용합니다. 예를 들어 전체는 라이트테마를 적용하지만, 어떠한 부분만 다크테마를 적용할 수도 있습니다. 이러한 동작방식은 다음 글에서 곧 다루겠습니다. 다음 글을 기다려주세요!

 

이러한 동작방식은 오직 레이아웃이 inflation 할 때에 적용됩니다. 비록 Context가 setTheme 메소드를 제공하고, Theme가 applyStyle을 제공하지만, 이러한 메소드들은 inflation 전에 호출되어야 됩니다. 이미 존재하는 뷰들에 대해서는 테마 및 스타일을 적용하더라도 바로 적용되지 않습니다.

Separate Concerns, 역할 나누기

스타일과 테마의 역할과 상호 작용을 이해함으로써, 스타일 리소스를 관리하기 더욱 더 쉬워집니다.

 

앱에 파란색 테마를 적용해 두었다고 해 봅시다. 하지만 유료 사용자용 몇몇 스크린은 멋진 보라색을 사용하고, 다크테마와 몇몇 특정 색을 제공하고 싶다고 해 봅시다. 스타일만 사용해서 이러한 동작을 하고 싶다면, 유료/무료, 라이트/다크 모두를 위해서, 4개의 스타일을 만들어야 합니다. 스타일은 특정 타입의 뷰(Button, Switch와 같은)에 적용됨으로써, 각각의 뷰에 이러한 순열 치환을 위해서 각각의 뷰에 대해서 모두 만들어야 합니다.

 

 

테마를 사용하지 않으면, Widget들과 Style들의 선언 수가 급격히 증가합니다.

스타일과 테마를 사용하는 대신, 테마를 사용하게 대체함으로써, view 별로 1개의 스타일만 선언할 수도 있습니다. 위의 예시에서는, colorPrimary 속성을 사용함으로써, 각각의 스타일에서는 이를 참조하게 되고, 테마로부터 알맞은 색상 값들을 4개의 테마로부터 자동 적용하게 됩니다. 

 

이러한 접근방법은 당신이 생각했던 style과 theme의 상호작용보다 좀 더 복잡하게 보일 수 있습니다. 하지만 테마의 변화를 스타일과 구분시키는 장점이 있습니다. 만약 당신의 앱을 파란색 테마에서 오랜지색 테마로 바꾸게 된다면, 여러 스타일을 모두 바꿀 필요 없이, 당신은 한 곳에서만 이러한 변경을 테마 변경 한 곳에 적용하면 됩니다. 이상적으로는, view 타입별로 약간의 스타일만 적용해주면 됩니다. 만약 이러한 theme의 장점을 사용하지 않는다면, styles.xml파일은 관리하기 힘들게 될 것이고, 수 많은 비슷한 style들이 정의 될 것이며, 유지보수가 매우 힘들게 될 것입니다.

 

다음 글에서는, 몇몇 많이 사용되는 테마들을 알아보고, 당신만의 테마를 어떻게 사용할 수 있는지 알아보겠습니다.

 

https://medium.com/androiddevelopers/android-styling-common-theme-attributes-8f7c50c9eaba

Android Styling: Common Theme Attributes