안드로이드 Compose Material 2 컬러 정보를 알아보자
개인 광고 영역
Material Design은 크게 버전 2와 버전 3로 나눠지는데, 일반적으로 M2는 Material로 명시되어 있다.
안드로이드 12와 함께 나온 디자인이 머트리얼 3인데, 안드로이드 스튜디오에서 컴포즈 관련 새로운 프로젝트 생성 시에 함께 나오는 머트리얼 버전은 2이다.(안드로이드 스튜디오 패치 시 변경될 수 있다)
머트리얼 2와 3는 차이가 있다.
- 색상에 대한 층이 머트리얼 3가 더 넓다.(하지만 모든 컬러를 구글의 기본 컴포넌트에서 활용하지는 않는다)
- style 관련을 피그마 정보와 쉽게 연동되어 읽기 쉽다.
- titleSmall, headlineLarge 와 같은 형태이다.
- 3에서는 다이나믹 컬러를 제공한다. 일반적인 회사에서는 특별히 선호하지는 않을 것 같다.
- 머트리얼 3에서 폴드 대응을 하기 위한 별도 라이브러리를 제공한다.
- 머트리얼 3 용 Exo player 용 라이브러리도 제공한다.
지금 선택한다면 3를 선택하는 건 나쁘지 않다. 하지만 2를 선택하여 활용하는 경우도 많을 것 같아 이 글을 간단하게 정리해두려고 한다.
- 3에는 아직 BottomSheet가 포함되어 있지 않아 결국 2와 3를 함께 활용해야 할 수 있다.
이 글에서 알아볼 내용
- 머트리얼 2의 색상 정보
- isLight가 뭘까?
Material Design 2 colors 정보를 알아보기 전에
시작하기 전에 단점을 먼저 써보려 한다. 여기에 isLight가 포함되어 있는데, 이 값의 의미가 뭘까?
class Colors(
isLight: Boolean
)
이 값은 현재 Theme 정보가 Light인지 Dark인지를 말하는 것이다. 이 정보를 통해 ripple 효과 기준이 바뀐다.
그리고 일부 색상 정보에서는 색상 자체를 반전 시키기도 하는데, 아래와 같은 코드가 일부 존재한다.
이는 TopAppBar에서 활용되는 컬러 정보이다.
val Colors.primarySurface: Color get() = if (isLight) primary else surface
이와 같은 옵션은 Material Design 3에서는 제거되었다.
Material Design 2의 Theme Colors
Material Design 2에서의 컬러 정보는 생각보다 많지는 않다. 하지만 이 컬러 값이 어디에서 활용되고 있는지를 알아야 색상을 적용할 수 있기 때문에 적어둔다.
기본적으로 이름 앞에 on이 붙어있는 애들은 모두 기본값 위에 올라가는 컬러에 해당한다.
primary 색상 정보
- primary : xml에서의 primary와 동일하다. 말 그대로 강조 색상이다.
- Button 배경색
- TopAppBar 배경 색상(isLight true인 경우 만 활용)
- onPrimary : primary 위에 올라가는 텍스트 및 아이콘 색상에 해당한다. 아래 이미지에서는 버튼의 텍스트 색상, TopAppBar에서도 텍스트와 이미지 색상에 해당한다.
- primaryVariant : 안드로이드에서는 StatusBar의 색상이 TopAppBar의 배경색과 다르게 표기하는 것이 기본이다. 추가로 Snackbar의 액변 버튼에서도 이 값을 isLight false 일 때 활용한다.
하지만 대부분의 디자인 요구사항에 iOS처럼 하나로 통일되어지는 색상을 원하는데, 이 값을 primary와 동일하게 처리하든지 primary의 값을 status에 지정해 주면 되겠다.
System UI Controller for Jetpack Compose을 활용해서 System UI 부분의 색상을 지정해 주면 되겠다.
Surface
- surface : Surface는 정말 많이 활용되는 컬러 값이다. TopAppBar의 경우 isLight false 이면 이 값을 활용하기도 한다. 활용처를 나열해 보면
- AlertDialog 배경
- Backdrop 배경
- BottomSheet 배경
- Button 배경
- Card 배경
- CheckBox 체크 마크
- Chip 배경
- Surface의 기본 배경
- Switch : Uncheck 상태
정말 많이 활용된다.
참고로 머트리얼 컴포넌트인 Composable Surface는 전역적으로 사용되는데, Scaffold에서도 Surface를 활용한다. 하지만 색상을 다 지정하도록 만들어져있어, Composable 상황에 따라 색상 값이 지정된다.
- onSurface : Surface 위에 올라가는 기본 텍스트 이미지 컬러 정보이다. 하지만 컴포넌트별로 onSurface를 배경으로 활용하기도 한다. 꼭 on이라고 전경 위 컬러는 아니라는 사실…
TextField에서는 onSurface를 배경으로 alpha를 변경하여 활용하는데 backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = BackgroundOpacity),이와 같다.
이 경우 onSurface가 배경인 상태이다.
Focus 상태인 경우 primary 색상도 보인다.
surface 컬러가 가장 많이 활용되는데 정말 다양한곳에서 다양한 컬러로 활용된다. 이 값을 하나 변경하면 영향도 또한 크다.
그렇기에 컴포넌트 만들 때 색상을 잘 분리해서 적용하는것이 좋다.(Light, Dark 테마를 만들어야 하기 때문에)
Secondary
- secondary : primary의 다른 색상이다. 활용하는 곳을 나열해 보겠다.
- CheckBox : check 상태의 값 표현
- RadioButton : Radio 선택 상태 값
- 플로팅 액션 버튼 배경 색상
기본으로 활용하는 곳은 이와 같다. 이렇게 활용되는 정보만 보면 반전 정도라고 생각할 수 있겠다.
- secondaryVariant : secondary 컬러의 강조 색상
- Switch의 선택 상태 색상
- onSecondary : Secondary 위에 올라가는 텍스트 색상
Background
- background : Compose의 틀인 Scaffold에서 이 컬러를 활용한다.
- Scaffold
- BottomSheetScaffold
- onBackground : background 위에 올라가는 텍스트 색상
Error
- error : TextField 오류 케이스에서 이 값을 활용
- onError : error 위에 올라가는 텍스트 색상
정리하면
머트리얼 2에서는 이 많은 색상 정보를 매우 다양한 곳에서 활용하고 있다. 결국 세세한 부분까지 모두 활용하는 게 쉽지 않다는 이야기다.
ThemeColors는 CompositionLocalProvider에 등록해 내부에서 활용할 수 있다. MaterialTheme가 아닌 CustomTheme를 가져와 활용하는 형태여야겠지만
아무래도 기본 컬러 정보로는 충분히 우리만의 UI를 표현하는데 부족함이 있고, secondary, surface가 어디에서 사용되는지 직접적으로 알기는 어렵다.
그래서 필요하다면 다 분리해 우리만의 ThemeColors를 만들어주는 것도 좋은 선택이다.
하지만 신경 쓰지 않고, CustomText를 활용하지 않아도 기본 색상이 나왔으면 한다면 Material를 잘 따라주는 것이 좋다.
좀 많은 시간이 들어가긴 하지만 잘 구현해두면 Theme 활용도를 높일 수 있다.
가장 좋은 결론은 내부용 디자인 시스템을 구축하거나, 디자인 시스템이 없더라도 개발자가 Composable 매핑을 통해 이를 대체 활용할 수 있다.
마무리
Material 2 기반의 색상에 대해서 간단하게 정리해 보았다.
하지만 Theme만 가지고 잘 활용할 수 있는 것은 아니다. 머트리얼 2에서 제공하는 컴포넌트도 잘 활용해야 하기 때문에 매핑을 선택하는 것이 좋다.
매핑이 처음에 좀 많이 힘들지만 이런 Theme 컬러가 어디에서 활용되는지 모르고도 할 수 있는 가장 쉬운 선택이니깐 말이다.
xml 형태의 매핑, 커스텀을 만드는 과정보다 컴포즈 매핑이 더 쉽다. 결국 디자인 시스템 구축도 compose가 더 쉽다는 이야기다.
lint를 통해 기본이 아닌 우리만의 컴포넌트 활용할 수 있도록 만드는 것도 좋다. lint는 android now in android 프로젝트를 참고할 수 있다.
Android - now in android - lint
Comments