피드백에 기반한 뮤직비디오 UX 개선

요구사항

매주 배포한 데모 앱을 통해 테스터로부터 앱 사용 시 뮤직비디오를 찾기가 힘들다는 피드백을 받았다.

기존에는 화면을 아래로 내려서 뮤직비디오 존재 여부를 확인하고 위로 쓸어올려야했기 때문이다.

BEFORE

Dec-05-2024 18-32-30 1.gif

1️⃣ 뮤직비디오 썸네일 애니메이션

타일러 1.gif

에스파 1.gif

개선 방법을 고민하던 중 뮤직비디오 존재 여부를 스크롤로 내리지 않아도 볼 수 있도록 화면 옆에 애니메이션을 적용한 손잡이를 만들었다.

화면 옆에 보여지는 이미지는 뮤직비디오와 자연스럽게 이어지는 경험을 위해 뮤직비디오 썸네일 이미지를 채택했다.

배경과 썸네일이 모두 검정색이어서 안보일 경우를 고려해 흰색 테두리 영역을 설정했다.

테두리를 border로 설정한다면 오른쪽 직선 영역까지 표시되기 때문에, padding을 주는 방식으로 설정했다.

@Composable
internal fun MusicVideoKnob(
    thumbnail: String,
    modifier: Modifier
) {
    val infiniteTransition = rememberInfiniteTransition(label = "infinite repeatable")
    val offsetX by infiniteTransition.animateFloat(
        initialValue = 8f,
        targetValue = 0f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 600, easing = FastOutSlowInEasing),
            repeatMode = RepeatMode.Reverse
        ),
        label = "infinite repeatable"
    )

    Surface(
        modifier = modifier
            .size(width = 16.dp, height = 320.dp)
            .offset(x = offsetX.dp),
        color = White,
        shape = RoundedCornerShape(topStart = 30.dp, bottomStart = 30.dp)
    ) {
        AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data(thumbnail.toImageUrlWithSize(Size(560, 320)))
                .build(),
            contentDescription = stringResource(R.string.pick_swipe_icon_description),
            modifier = Modifier
                .fillMaxSize()
                .padding(vertical = 2.dp)
                .padding(start = 2.dp)
                .clip(RoundedCornerShape(topStart = 30.dp, bottomStart = 30.dp)),
            placeholder = ColorPainter(Color.Transparent),
            error = ColorPainter(Color.Transparent),
            contentScale = ContentScale.Crop,
        )
    }
}

2️⃣ Pager로 화면 전환

손잡이 영역을 작게 잡았더니 안드로이드의 다른 제스쳐와 겹치는 경우가 있었다.