스타일 사용 시 권장사항과 금지사항

이 페이지에서는 코드베이스 전반에서 일관성을 유지하는 스타일을 사용하는 권장사항과 API를 설계할 때 Google에서 따른 원칙을 설명합니다.

배송 중지 진행

다음 권장사항을 따르세요.

권장: 시각적 요소에는 스타일을 사용하고 동작에는 수정자를 사용하세요.

시각적 구성 (배경, 패딩, 테두리)에는 스타일 API를 사용하고 클릭 로직, 동작 감지, 접근성과 같은 동작에는 수정자를 사용합니다.

해야 함: 디자인 시스템에서 스타일 매개변수 노출

자체 맞춤 디자인 시스템 구성요소의 경우 수정자 매개변수 뒤에 Style 객체를 노출해야 합니다.

@Composable
fun GradientButton(
    modifier: Modifier = Modifier,
    // ✅ DO: for design system components, expose a style modifier to consumers to be able to customize the components
    style: Style = Style
) {
    // Consume the style
}DosDonts.kt

권장: 시각적 매개변수를 스타일로 대체

컴포저블의 매개변수를 단일 Style 매개변수로 대체하는 것이 좋습니다. 예를 들면 다음과 같습니다.

// Before
@Composable
fun OldButton(background: Color, fontColor: Color) {
}

// After
// ✅ DO: Replace visual-based parameters with a style that includes same properties
@Composable
fun NewButton(style: Style = Style) {
}DosDonts.kt

해야 함: 애니메이션 스타일 우선순위 지정

수정자보다 성능이 향상된 애니메이션을 사용하여 상태 기반 스타일 지정에는 내장된 animate 블록을 사용합니다.

권장: '마지막 쓰기 우선' 활용

style 속성은 스택되지 않고 덮어쓰기된다는 점을 활용하세요. 이를 사용하면 여러 매개변수가 필요 없이 기본 구성요소 테두리나 배경을 재정의할 수 있습니다.

하지 말아야 할 일

다음 패턴은 권장되지 않습니다.

안 됨: 상호작용 로직에 스타일 사용

스타일 내에서 onClick 또는 동작 감지를 처리하려고 시도하지 마세요. 스타일은 상태에 기반한 시각적 구성으로 제한되므로 비즈니스 로직을 처리해서는 안 됩니다. 대신 상태에 따라 다른 시각적 요소만 있어야 합니다.

잘못된 예: 기본 스타일을 기본 매개변수로 제공

스타일 매개변수는 항상 style: Style = Style를 사용하여 선언해야 합니다.

@Composable
fun BadButton(
    modifier: Modifier = Modifier,
    // ❌ DON'T set a default style here as a parameter
    style: Style = Style { background(Color.Red) }
) {
}DosDonts.kt

'기본' 매개변수를 포함하려면 수신 매개변수 스타일을 정의된 기본값과 병합합니다.

@Composable
fun GoodButton(
    modifier: Modifier = Modifier,
    // ✅ Do: always pass it as a Style, do not pass other defaults
    style: Style = Style
) {
    // ...
    val defaultStyle = Style { background(Color.Red) }
    // ✅ Do Combine defaults inside with incoming parameter
    Box(modifier = modifier.styleable(styleState, defaultStyle, style)) {
      // your logic
    }
}DosDonts.kt

안됨: 레이아웃 기반 컴포저블에 스타일 매개변수 제공

컴포저블에 스타일을 제공할 수 있지만 레이아웃 기반 컴포저블이나 화면 수준 컴포저블은 스타일을 허용하지 않을 것으로 예상됩니다. 소비자 관점에서 이 수준에서 스타일이 어떤 역할을 하는지 명확하지 않기 때문입니다. 스타일은 레이아웃이 아닌 구성요소를 위해 설계되었습니다.

스타일 사용 시 권장사항과 금지사항 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.