<div id="readability-page-1" class="page"><div>
                    <hr>
                    

<hr><p>
                    개인 광고 영역
</p>

                    <hr>
                    <p>Material Design은 크게 버전 2와 버전 3로 나눠지는데, 일반적으로 M2는 Material로 명시되어 있다.</p>

<ul>
  <li><a href="https://m2.material.io/">Material Design</a></li>
  <li><a href="https://m3.material.io/">Material Design 3</a></li>
</ul>

<p>안드로이드 12와 함께 나온 디자인이 머트리얼 3인데, 안드로이드 스튜디오에서 컴포즈 관련 새로운 프로젝트 생성 시에 함께 나오는 머트리얼 버전은 2이다.(안드로이드 스튜디오 패치 시 변경될 수 있다)</p>

<p>머트리얼 2와 3는 차이가 있다.</p>

<ul>
  <li>색상에 대한 층이 머트리얼 3가 더 넓다.(하지만 모든 컬러를 구글의 기본 컴포넌트에서 활용하지는 않는다)</li>
  <li>style 관련을 피그마 정보와 쉽게 연동되어 읽기 쉽다.
    <ul>
      <li>titleSmall, headlineLarge 와 같은 형태이다.</li>
    </ul>
  </li>
  <li>3에서는 다이나믹 컬러를 제공한다. 일반적인 회사에서는 특별히 선호하지는 않을 것 같다.</li>
  <li>머트리얼 3에서 폴드 대응을 하기 위한 별도 라이브러리를 제공한다.</li>
  <li>머트리얼 3 용 Exo player 용 라이브러리도 제공한다.</li>
</ul>

<p>지금 선택한다면 3를 선택하는 건 나쁘지 않다. 하지만 2를 선택하여 활용하는 경우도 많을 것 같아 이 글을 간단하게 정리해두려고 한다.</p>

<ul>
  <li>3에는 아직 BottomSheet가 포함되어 있지 않아 결국 2와 3를 함께 활용해야 할 수 있다.</li>
</ul>





<h3>이 글에서 알아볼 내용</h3>

<ul>
  <li>머트리얼 2의 색상 정보</li>
  <li>isLight가 뭘까?</li>
</ul>





<h2>Material Design 2 colors 정보를 알아보기 전에</h2>

<p>시작하기 전에 단점을 먼저 써보려 한다. 여기에 <code>isLight</code>가 포함되어 있는데, 이 값의 의미가 뭘까?</p>

<div><pre><code>class Colors(
    isLight: Boolean
)
</code></pre></div>

<p>이 값은 현재 Theme 정보가 <code>Light</code>인지 <code>Dark</code>인지를 말하는 것이다. 이 정보를 통해 ripple 효과 기준이 바뀐다.</p>

<p>그리고 일부 색상 정보에서는 색상 자체를 반전 시키기도 하는데, 아래와 같은 코드가 일부 존재한다.</p>

<p>이는 <code>TopAppBar</code>에서 활용되는 컬러 정보이다.</p>

<div><pre><code>val Colors.primarySurface: Color get() = if (isLight) primary else surface
</code></pre></div>

<p>이와 같은 옵션은 Material Design 3에서는 제거되었다.</p>



<h2>Material Design 2의 Theme Colors</h2>

<p>Material Design 2에서의 컬러 정보는 생각보다 많지는 않다. 하지만 이 컬러 값이 어디에서 활용되고 있는지를 알아야 색상을 적용할 수 있기 때문에 적어둔다.</p>

<p>기본적으로 이름 앞에 <code>on</code>이 붙어있는 애들은 모두 기본값 위에 올라가는 컬러에 해당한다.</p>



<h3>primary 색상 정보</h3>

<ul>
  <li>primary : xml에서의 primary와 동일하다. 말 그대로 강조 색상이다.
    <ul>
      <li>Button 배경색</li>
      <li>TopAppBar 배경 색상(isLight true인 경우 만 활용)</li>
    </ul>
  </li>
  <li>onPrimary : primary 위에 올라가는 텍스트 및 아이콘 색상에 해당한다. 아래 이미지에서는 버튼의 텍스트 색상, TopAppBar에서도 텍스트와 이미지 색상에 해당한다.</li>
</ul>

<p><img src="https://thdev.tech/images/posts/2023/01/Android-Compose-Material/image_01.png" alt="image_01"></p>

<p><img src="https://thdev.tech/images/posts/2023/01/Android-Compose-Material/image_02.png" alt="image_02"></p>

<ul>
  <li>primaryVariant : 안드로이드에서는 StatusBar의 색상이 TopAppBar의 배경색과 다르게 표기하는 것이 기본이다. 추가로 Snackbar의 액변 버튼에서도 이 값을 isLight false 일 때 활용한다.</li>
</ul>

<p><img src="https://thdev.tech/images/posts/2023/01/Android-Compose-Material/image_03.png" alt="image_03"></p>

<p>하지만 대부분의 디자인 요구사항에 iOS처럼 하나로 통일되어지는 색상을 원하는데, 이 값을 primary와 동일하게 처리하든지 primary의 값을 status에 지정해 주면 되겠다.</p>

<p><a href="https://google.github.io/accompanist/systemuicontroller/">System UI Controller for Jetpack Compose</a>을 활용해서 System UI 부분의 색상을 지정해 주면 되겠다.</p>



<h3>Surface</h3>

<ul>
  <li>surface : Surface는 정말 많이 활용되는 컬러 값이다. TopAppBar의 경우 isLight false 이면 이 값을 활용하기도 한다. 활용처를 나열해 보면
    
  </li>
</ul>

<p>정말 많이 활용된다.</p>

<p>참고로 머트리얼 컴포넌트인 Composable Surface는 전역적으로 사용되는데, Scaffold에서도 Surface를 활용한다. 하지만 색상을 다 지정하도록 만들어져있어, Composable 상황에 따라 색상 값이 지정된다.</p>

<ul>
  <li>onSurface : Surface 위에 올라가는 기본 텍스트 이미지 컬러 정보이다. 하지만 컴포넌트별로 onSurface를 배경으로 활용하기도 한다. 꼭 on이라고 전경 위 컬러는 아니라는 사실…</li>
</ul>

<p>TextField에서는 onSurface를 배경으로 alpha를 변경하여 활용하는데 <code>backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = BackgroundOpacity),</code>이와 같다.</p>

<p>이 경우 onSurface가 배경인 상태이다.</p>

<p><img src="https://thdev.tech/images/posts/2023/01/Android-Compose-Material/image_06.png" alt="image_06"></p>

<p>Focus 상태인 경우 primary 색상도 보인다.</p>

<p><img src="https://thdev.tech/images/posts/2023/01/Android-Compose-Material/image_07.png" alt="image_07"></p>

<p>surface 컬러가 가장 많이 활용되는데 정말 다양한곳에서 다양한 컬러로 활용된다. 이 값을 하나 변경하면 영향도 또한 크다.</p>

<p>그렇기에 컴포넌트 만들 때 색상을 잘 분리해서 적용하는것이 좋다.(Light, Dark 테마를 만들어야 하기 때문에)</p>



<h3>Secondary</h3>

<ul>
  <li>secondary : primary의 다른 색상이다. 활용하는 곳을 나열해 보겠다.
    <ul>
      <li>CheckBox : check 상태의 값 표현</li>
      <li>RadioButton : Radio 선택 상태 값</li>
      <li>플로팅 액션 버튼 배경 색상</li>
    </ul>
  </li>
</ul>

<p>기본으로 활용하는 곳은 이와 같다. 이렇게 활용되는 정보만 보면 반전 정도라고 생각할 수 있겠다.</p>

<ul>
  <li>secondaryVariant : secondary 컬러의 강조 색상
    <ul>
      <li>Switch의 선택 상태 색상</li>
    </ul>
  </li>
  <li>onSecondary : Secondary 위에 올라가는 텍스트 색상</li>
</ul>



<h2>Background</h2>

<ul>
  <li>background : Compose의 틀인 Scaffold에서 이 컬러를 활용한다.
    <ul>
      <li>Scaffold</li>
      <li>BottomSheetScaffold</li>
    </ul>
  </li>
  <li>onBackground : background 위에 올라가는 텍스트 색상</li>
</ul>



<h2>Error</h2>

<ul>
  <li>error : TextField 오류 케이스에서 이 값을 활용</li>
  <li>onError : error 위에 올라가는 텍스트 색상</li>
</ul>



<h2>정리하면</h2>

<p>머트리얼 2에서는 이 많은 색상 정보를 매우 다양한 곳에서 활용하고 있다. 결국 세세한 부분까지 모두 활용하는 게 쉽지 않다는 이야기다.</p>

<p>ThemeColors는 <code>CompositionLocalProvider</code>에 등록해 내부에서 활용할 수 있다. <code>MaterialTheme</code>가 아닌 <code>CustomTheme</code>를 가져와 활용하는 형태여야겠지만</p>

<p>아무래도 기본 컬러 정보로는 충분히 우리만의 UI를 표현하는데 부족함이 있고, secondary, surface가 어디에서 사용되는지 직접적으로 알기는 어렵다.</p>

<p>그래서 필요하다면 다 분리해 우리만의 ThemeColors를 만들어주는 것도 좋은 선택이다.</p>

<p>하지만 신경 쓰지 않고, CustomText를 활용하지 않아도 기본 색상이 나왔으면 한다면 <code>Material</code>를 잘 따라주는 것이 좋다.</p>

<p>좀 많은 시간이 들어가긴 하지만 잘 구현해두면 Theme 활용도를 높일 수 있다.</p>

<p>가장 좋은 결론은 내부용 디자인 시스템을 구축하거나, 디자인 시스템이 없더라도 개발자가 Composable 매핑을 통해 이를 대체 활용할 수 있다.</p>



<h2>마무리</h2>

<p>Material 2 기반의 색상에 대해서 간단하게 정리해 보았다.</p>

<p>하지만 Theme만 가지고 잘 활용할 수 있는 것은 아니다. 머트리얼 2에서 제공하는 컴포넌트도 잘 활용해야 하기 때문에 매핑을 선택하는 것이 좋다.</p>

<p>매핑이 처음에 좀 많이 힘들지만 이런 Theme 컬러가 어디에서 활용되는지 모르고도 할 수 있는 가장 쉬운 선택이니깐 말이다.</p>

<p>xml 형태의 매핑, 커스텀을 만드는 과정보다 컴포즈 매핑이 더 쉽다. 결국 디자인 시스템 구축도 compose가 더 쉽다는 이야기다.</p>

<p>lint를 통해 기본이 아닌 우리만의 컴포넌트 활용할 수 있도록 만드는 것도 좋다. lint는 android now in android 프로젝트를 참고할 수 있다.</p>

<p><a href="https://github.com/android/nowinandroid/tree/main/lint">Android - now in android - lint</a></p>


                    <hr>
                    

<hr>
                </div></div>

꿈 많은 개발자가 되자 - Taehwan

Material Design은 크게 버전 2와 버전 3로 나눠지는데, 일반적으로 M2는 Material로 명시되어 있다.
Material Design
Material Design 3
안드로이드 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

안드로이드 Compose Material 2 컬러 정보를 알아보자

댓글