1. 전체 과정과 지금 하고 있는 것

• 전체 과정: 작은 컴포넌트부터 컴포즈로 변경하기
• item_video.xml
• item_video_header.xml
• layout_player_control.xml
• RecyclerView 어댑터 → LazyColumn/LazyRow로 전환

2. 기존 xml

코드 스플릿을 통해서 본 녀석은 이런 식으로 생겼다.
재생화면의 아래쪽에 보이는 다른 영상들 리스트의 아이템에 해당하는 컴포넌트이다.

3. 본격적인 전환

ItemVideo를 생성해주자.

그리고 이 뷰를 두 개로 나눠서 보면 이미지뷰 부분과 아래의 영상 설명 행이기 때문에, Column을 만들어준다.

@Composable
fun ItemVideo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {

    }
}

이렇게 만든 Column에는 이미지가 두 개가 들어가는데, 여기에 AsyncImage를 사용하도록 하자. 여기에 coil 라이브러리를 이용할 것이다. coil은 글라이드와 같은 이미지 라이브러리이다. 코틀린, 컴포즈와 잘 통합되어 있기 때문에 이를 이용할 것이다. 참고로 네트워크 이미지를 가지고 오는 건 Preview에서 볼 수 없다.

coil을 아래와 같이 의존성을 추가해준다.

• gradle/libs.versions.toml

  [versions]
  coil = "3.1.0"
  
  [libraries]
  coil-core = { module = "io.coil-kt.coil3:coil", version.ref = "coil" }
  coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil" }
  coil-network-okhttp = { module = "io.coil-kt.coil3:coil-network-okhttp", version.ref = "coil" }

• 앱수준 build.gradle.kts

  dependencies {
      implementation(libs.coil.core)
      implementation(libs.coil.compose)
      implementation(libs.coil.network.okhttp)
  }

AsyncImage를 통해서 비디오 썸네일뷰를 생성해준다.

이미지 사이즈는 fillMaxWidth로 화면 너비를 가득 채우고, aspectRatio로 동영상 비율의 정석, 16:9로 맞췄다. 이건 원래 코드에도 있는 부분이다.

프리뷰에서는 네트워크 이미지가 불러와지지 않기 때문에, error 속성으로 이미지뷰가 잘 들어와 있음을 확인했다.

이제 그 아래의 비디오 설명 행을 만들어보자.

기존의 xml 코드를 보면 12 dp 씩 padding이 있으니 그대로 반영해준다.

그리고 비디오 썸네일처럼 똑같이 AsyncImage를 만들고, 크기는 36dp씩 지정해주기.
여기는 maxWidth 같은 거 없다!!

중간 간격은 Spacer을 이용해준다. Flutter에도 SizedBox 속성 같은 게 있는 게, 이게 margin 보다 훨 편하다.

옆에 비디오 제목과 기타 설명을 적기 위한 Column을 만들어줄건데, 이때 weight라는 속성을 이용할 것이다. 레이아웃을 1f로 설정해 기존에 존재하는 뷰의 height만큼의 height를 가진다. 기존 xml의 layout_weight와 비슷한 속성이다.

텍스트 뷰는 어려운 부분은 딱히 없고 overflow 속성을 통해서 Ellipsis(... 표시) 설정을 해줄 수 있다.

이렇게 전환에 성공했다. 좌는 xml 미리보기, 오른쪽은 Compose 미리보기인데 거의 복사 수준 아닌가!!

4. 다음에는

item_video_header.xml을 바꿔볼 것이다. 아직까지는 난이도 별 5개 중에 1개 정도에 해당하기 때문에 크게 어려운 점이 없다!