[Android].Ch2-5. Material Design 3

[Android] Ch2-5. Material Design 3

1. 개요 및 기본 형식

@Composable
fun MyApp() {
    MaterialTheme {  // Material Design 3 테마 스코프 최상위 적용
        // 해당 스코프 내부에 선언된 모든 UI 컴포넌트들은 테마 설정과 규약을 상속받습니다.
        Surface {
            // 커스텀 UI 컴포넌트 구현부
        }
    }
}

• Google의 모바일 시스템 코어 디자인 가이드라인인 Material Design 버전 3를 일컫습니다.
• MaterialTheme 스코프 내부에서는 정의된 색상표 상속, 공용 타이포그래피(폰트 계층), 일반 요소들의 도형 외곽 가이드라인이 자동 렌더링에 반영되어 체계화됩니다.

---

2. 주요 구성 및 테마 요소

1) MaterialTheme 객체 구조

• 앱 전체의 통합적인 색채, 활자, 모양새 규격을 정의하는 매개 시스템입니다.
• 내부 파라미터로 colorScheme, typography, shapes 등을 통합 관리합니다.

  MaterialTheme(
  colorScheme = lightColorScheme(),  // 라이트 모드 기준 색상 지표
  typography = Typography,  // 통일된 텍스트 계층 구조 규약
  shapes = Shapes  // 컴포넌트 라운딩 등 형태의 규약
  ) { }

2) .colorScheme (색상 체계)

• primary: 핵심 지점(최상단 버튼, 강조 배너 등)에 칠해질 주요 시각 색상.
• onPrimary: primary 색상 영역 위쪽에 렌더링될 내부 텍스트나 아이콘들의 명도 대비를 이루는 색상.
• secondary: primary와 분리되어 서브 상호작용 지점을 정의하는 보조 색상.
• background: 앱 최하단 빈 여백의 디폴트 배경 컬러.
• surface: 카드뷰 하얀 배경, 스와이프 다이얼로그 배경 색상.

  MaterialTheme.colorScheme.primary  // 특정 뷰의 백그라운드 컬러로 직접 연동 구성
  MaterialTheme.colorScheme.background  

3) .typography (타이포그래피 규약 적용)

• displayLarge/Medium/Small: 히어로 배너 크기 수준의 제일 거대한 제목 텍스트 속성.
• headlineLarge/Medium/Small: 주요 섹션 요약 헤드라인.
• titleLarge/Medium/Small: 보드 타이틀 및 구역 제목.
• bodyLarge/Medium/Small: 통상 정보나 문서 낭독을 위한 기본 본문 크기 속성.
• labelLarge/Medium/Small: 컴포넌트 하단 자막이나 아이콘 주석용 미니 라벨.

  Text(
  text = "상위 구역의 제목 표출 구역",
  style = MaterialTheme.typography.headlineLarge  // 테마를 통한 통일성 확보
  )

---

3. 구현 형태별 사용 예시

1) MaterialTheme의 전역 적용 (초기화 단계)

최상위 액티비티 구역에서 뷰 전체를 덮는 테마를 선언합니다.

@Composable
fun App() {
    MaterialTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background  // 최상단 배경 속성에 테마 컬러 부여
        ) {
            // 기타 중첩 레이아웃 및 뷰 진입 지점
        }
    }
}

2) 요소별 색채 매핑 활용

요소 디자인 시 색상 상수로 하드코딩하지 않고 시스템 테마 변수를 호출하는 모범 사례 구성입니다.

@Composable
fun ColorExample() {
    Column {
        Text(
            text = "주요 강조 텍스트 내용",
            color = MaterialTheme.colorScheme.primary
        )
        Button(
            colors = ButtonDefaults.buttonColors(
                containerColor = MaterialTheme.colorScheme.secondary
            ),
            onClick = { /* 로직 */ }
        ) {
            Text("서브 동작 버튼")
        }
    }
}

3) 텍스트 규약 통일의 예

각종 마진, 픽셀 등의 텍스트 사이즈를 수작업으로 하지 않고 스타일 상수를 상속시켜 앱 전반의 통일감을 부여합니다.

@Composable
fun TypographyExample() {
    Column {
        Text(text = "메인 큰 제목", style = MaterialTheme.typography.headlineLarge)
        Text(text = "보조 중간 제목", style = MaterialTheme.typography.headlineMedium)
        Text(text = "주요 본문 텍스트 내역", style = MaterialTheme.typography.bodyMedium)
        Text(text = "아이콘 라벨 텍스트", style = MaterialTheme.typography.labelSmall)
    }
}

4) 테마 색채 사용자 정의(Custom) 세팅

브랜드 디자이너가 요청한 공식 색상을 컴포넌트에 주입하는 로직입니다.

val MyColorScheme = lightColorScheme(
    primary = Color(0xFF6200EE),
    secondary = Color(0xFF03DAC6),
    background = Color(0xFFFFFBFE)
)

@Composable
fun CustomThemeApp() {
    MaterialTheme(colorScheme = MyColorScheme) {  // 직접 오버라이딩된 색상 트리구조 적용
        // 본 구간 내부는 모두 0xFF... 기반 컬러 구조로 상쇄 교체됨
    }
}

---

4. 부가 설명

1) 다크 모드(Dark Mode) 적용

다크 모드의 색상 코드를 별도 파생하여 시스템 OS 설정을 감지, 이를 스위칭할 수 있습니다.

val DarkColorScheme = darkColorScheme(
    primary = Color(0xFFBB86FC),
    // 그 외 구성요소 어둡게 변형 
)

2) 브랜드 일관성 확립

MaterialTheme 참조 인프라를 활용해야 향후 클라이언트 리브랜딩 지시 시, 각 소스 수백 군데를 직접 수정할 필요 없이 테마 컴포넌트 1개 구역의 컬러 상수만 전환하여 글로벌 일관성을 구축할 수 있습니다.

3) 시스템 접근성 보장

Material Design 가이드라인 내부 시스템을 기본으로 적용하게 되면 일반적인 요소들의 색상 명암 대비율 제어, 터치 반응 규격 등이 구글 접근성 표준(UI/UX 권장 사항)에 자동 부합하게 변경 최적화됩니다.