0. 하드코딩 된 Dp 사이즈의 문제

@Composable
fun LoginScreen(state: LoginState) {
    Column {
        TextField(
            value = state.email,
            onValueChange = { /* ... */ },
            modifier = Modifier.width(300.dp)
        )
    }
}

이는 디바이스의 가로 크기에 따라 의도치 않은 모습으로 보이거나, 잘못된 동작을 할 수 있음.

1. widthIn/heightIn의 사용

// GOOD
@Composable
fun LoginScreen(state: LoginState) {
    Column {
        TextField(
            value = state.email,
            onValueChange = { /* ... */ },
            modifier = Modifier
                **.widthIn(max = 400.dp)**
                .fillMaxWidth()
        )
    }
}

이처럼 400Dp 내에서 상대적인 사이즈를 가지도록 설정할 수 있음.

되도록 상대적인 값을 쓰도록 노력하자.