[Android Studio] Button 과 Box

유콩·4일 전
post-thumbnail

컴포즈에서는 기본적으로 클릭 시 리플 효과가 생긴다.
하지만 모든 상황에서 리플 효과가 있는 게 좋을까? 혹은 없는 게 좋을까?
UX적으로,어떤 상황일때 리플이 효과적이고 어떤 상황일 때 리플이 방해가 되는지 한번도 고민해본적이 없어 이번 기회에 글을 적어본다!


해당 화면은 로그인뷰며 보라색 버튼은 로그인 버튼, 아래 회원가입하기 text를 누르면 회원가입뷰로 넘어가게 구성되어 있다.

 Surface(
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)
            .clickable(
                interactionSource = androidx.compose.runtime.remember { MutableInteractionSource() },
                indication = null,
                onClick = onLoginClick
            ),
        shape = RoundedCornerShape(16.dp),
        color = Purple40,
        contentColor = Color.White
    )
    {
        Box(contentAlignment = Alignment.Center)
        {Text(
            text = "Welcome To SOPT"
        )}
    }

이 코드는 리플 효과를 없애기 위해 Surface 와 Box로 감싸주고 indication = null 시각적 효과를 null로 처리했다.

 Button(
        onClick = onLoginClick,
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp),
            shape = RoundedCornerShape(16.dp),
            colors = ButtonDefaults.buttonColors(
                containerColor = Purple40,
                contentColor = Color.White
            ),

            ) {
            Text(
                text = "Welcome To SOPT"
            )
            

반면에 이 코드는 기본적으로 컴포즈에서 제공하는 리플효과가 반영된 Button이다.

사용자 입장에서 리플효과가 있는게 좋을까 없는게 좋을까?

  1. 리플 효과를 제거하는 게 더 좋은 경우
    리플이 오히려 "시각적 소음(Visual Noise)"이 되거나, "콘텐츠를 가리는" 경우
    : 위 사진에 첨부한 회원가입 텍스트 링크 (Text Button / Hyperlink)과 같은 경우에는
    글자 위에 회색 동그라미가 퍼지면 글자가 가려져서 가독성을 해치고 투박해 보일 수 있다.
  2. 리플 효과를 유지해야 하는 경우
    대부분의 솔리드 버튼 (Filled Button)으로 버튼이라고 직관적으로 느낄 수 있는 경우
    :사용자가 "눌렸다"는 확신을 가질 수있고 그것이 로그인 버튼을 텍스트가 아닌 버튼으로 설계한 이유가 아닐까 싶다.


결론!!
리플 효과는 "확실한 클릭감" 제공함
->경우에 따라 리플 효과를 제거했을 때 이는 어플이 렉이 걸린 것처럼 사용자에게 불쾌감을 제공할 수 있으므로 적절하게 사용해야함

0개의 댓글