Android Weekly #-588 "컴포넌트의 워크플로우 최적화 - Blueprint"

UI 컴포넌트의 워크플로우 최적화 방법(치수의 시각화 Blueprint 라이브러리) 글이 매우 중요하고 실용적인 글이라 생각해 2개 작성하겠습니다.

 

https://proandroiddev.com/blueprint-visualizing-paddings-in-jetpack-compose-eb62413c6d74

Blueprint — visualizing paddings in Jetpack Compose

 

소개

 

Android Jetpack Compose로 사용자 지정 UI 컴포넌트 개발 워크플로우를 최적화하는 방법에 대한 글입니다. 전통적인 Constraint Layout의 일부 장점과, Compose의 등장과 그 특징에 대해 이야기합니다.

 

 

 

내용

 

• Constraint Layout: Android Studio에서 UI 구성 요소 간의 패딩을 즉시 시각화할 수 있었습니다. 그림과 함께 패딩 값이 표시됐기 때문에 개발자들에게 매우 유용했습니다.
• Jetpack Compose: Compose는 코드 내에서 직접 UI를 작성하는 새로운 방식을 도입했습니다. 초기에는 큰 변화로 느껴졌지만, 개발자의 생산성 증가와 Android Studio의 Preview 기능 덕분에 이전 방식의 대부분의 단점이 해결되었습니다.
  
  
• 문제점: 복잡한 디자인 시스템 컴포넌트를 만들 때, 실시간 미리보기에서 차원의 시각화가 필요했습니다. 여러 구성 요소의 패딩 값을 정확히 알기 어려웠습니다.
  
  
• Blueprint 라이브러리: Constraint Layout의 시각적 에디터의 Blueprint 모드와 유사한 기능을 제공하기 위해  라이브러리를 작성하기로 결정했습니다. 이 라이브러리는 DSL 기반의 정의를 사용하여 UI의 치수 정보를 시각화합니다.
  
  

 

1. 대상 UI를 Blueprint 합성 가능한 형태로 감싸기
2. Modifier.blueprintId(id: String) modifier로 자식 표시
3. Blueprint 정의 쓰기

 

Blueprint(
    blueprintBuilder = {
        widths {
            group {
                "item0".right lineTo "item1".left
                "item0" lineTo "item0"
                "item2" lineTo "item3"
            }
        }
        heights {
            group { "item0Icon" lineTo "item0Text" }
            group { "item0" lineTo "item0" }
            group(End) { "item3Icon".bottom lineTo "item3Text".top }
        }
    }
) {
    val items = remember { listOf("Songs", "Artists", "Playlists", "Settings") }
    NavigationBar {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                modifier = Modifier.blueprintId("item$index"),
                icon = { Icon(Modifier.blueprintId("item${index}Icon"), TODO()) },
                label = { Text(Modifier.blueprintId("item${index}Text"), TODO()) },
                selected = index == 0,
                onClick = { TODO() }
            )
        }
    }
}

결과물

출처 : https://proandroiddev.com/blueprint-visualizing-paddings-in-jetpack-compose-eb62413c6d74

 

• 작동 원리: blueprintId 수정자를 사용하여 각 대상의 LayoutCoordinates를 수집하고, 이러한 정보를 기반으로 Blueprint가 대상 컴포저블 위에 그려집니다.

 

 

정리

 

선언형 UI가 아니었을 때 마우스로 어느 정도 맞춘 뒤 xml로 조정했는데 그 과정에서 정확한 수치값이 있어 편리했었습니다.("그것만") 그러나 Compose의 경우 preview로만 개발하는 것이 완벽한 사이즈에 도달할 수 없는 느낌이였습니다.
Blueprint 라이브러리의 경우 번거로움은 있겠지만, 이러한 선언형 UI의 단점을 조금 보완해 줄 수 있을 것 같습니다. 지금 단계(취준생)에서는 사용해 볼 만한 사이즈가 아니긴 하지만, 언젠가 분명 필요해지거나 필수가 되는 날이 올 것만 같아 글을 작성해 둡니다.

 

 

 

 

 

 

 

 

 

https://androidweekly.net/

Android Weekly - Free weekly Android & Kotlin development newsletter