[Compose] Surface에 Alpha 컬러를 적용했는데, 색상이 깨지는 문제

- 상위 컴포저블로 Surface를 활용한 컴포넌트에 알파 값이 적용된 컬러를 적용했더니 아래처럼 색상이 깨지는 문제가 발생했다.

Surface(
    modifier = Modifier
        .height(size.value)
        .clip(RoundedCornerShape(dimensionResource(R.dimen.corner_radius_06)))
        .tbRipple { onClick.invoke() },
    color = if (isDisabled) colorResource(R.color.color_system_fill_disabled_light) else colorResource(appearance.color),
    contentColor = colorResource(R.color.white),
    shadowElevation = 8.dp
) {
   ... 
}

- Surface에서 위와 같은 이슈가 발생한 이유는 Surface가 여러 스타일 요소를 동시에 적용하는데, 알파 컬러 효과가 전체에 영향을 주지 못하기 때문인 것으로 파악된다.

Surface
├── Modifier (계속 쌓임)
│   ├── clip(shape)
│   ├── background(color) ← applyTonalElevation(color, elevation)
│   ├── shadow(elevation)
│   ├── clickable (선택적)
│   └── semantics
└── content (BoxScope)

 

- 더군다나 불필요한 Elevation을 부여함으로써 그림자 효과와 겹치는 것이 문제일 것으로 생각한다.

 

- 단순 Layout + Modifier 변형 구조를 사용하는 Box 컴포저블로 대체하여 정상적으로 효과가 적용되는 것을 확인할 수 있었다.

Box(
    modifier = Modifier
        .height(size.value)
        .clip(RoundedCornerShape(dimensionResource(R.dimen.corner_radius_06)))
        .tbRipple { onClick.invoke() }
        .background(
            if (isDisabled) colorResource(R.color.color_system_fill_disabled_light)
            else colorResource(appearance.color)
        )
) { ... }