Android DataBinding + Hyperion 세팅 완벽 가이드 — 실시간 UI 디버깅

Hyperion이란?

Hyperion은 WillowTree가 만든 Android 디버그 전용 UI 인스펙터 라이브러리입니다.
앱을 실행한 상태에서 View의 속성(텍스트, 색상, 폰트 크기, 여백 등)을 실시간으로 확인할 수 있어 디자인 검수나 DataBinding 결과값 확인에 매우 유용합니다.
별도의 오버레이 패널을 앱 위에 띄우는 방식이라 기존 코드에 거의 영향을 주지 않으며, Release 빌드에서는 완전히 제거됩니다.

왜 DataBinding 환경에 Hyperion이 필요한가?

DataBinding을 사용하면 XML에서 ViewModel의 LiveData나 ObservableField를 직접 바인딩하게 됩니다.
하지만 바인딩된 값이 실제로 View에 어떻게 반영되었는지 확인하려면 매번 로그를 찍거나 Layout Inspector를 열어야 하는 번거로움이 있습니다.
Hyperion의 Attr 플러그인을 활용하면 원하는 View를 탭 한 번으로 눌러 textColor, backgroundColor 등 현재 적용된 속성값을 즉시 확인할 수 있어 디버깅 시간을 크게 단축할 수 있습니다.

의존성 추가

Hyperion은 Debug 빌드에서만 활성화되도록 debugImplementation으로 추가합니다.
Release 빌드에는 no-op 버전을 추가해 앱 크기와 성능에 영향이 없도록 합니다.
아래는 DataBinding 환경에서 주로 사용되는 플러그인 구성입니다.

// app/build.gradle
dependencies {
    // Hyperion 코어
    debugImplementation 'com.willowtreeapps.hyperion:hyperion-core:0.9.34'

    // View 속성 확인 (텍스트, 색상, 폰트 등)
    debugImplementation 'com.willowtreeapps.hyperion:hyperion-attr:0.9.34'

    // 여백 및 크기 측정
    debugImplementation 'com.willowtreeapps.hyperion:hyperion-measurement:0.9.34'

    // 크래시 로그 확인
    debugImplementation 'com.willowtreeapps.hyperion:hyperion-crash:0.9.34'

    // Release 빌드용 no-op (앱 크기 영향 없음)
    releaseImplementation 'com.willowtreeapps.hyperion:hyperion-core-no-op:0.9.34'
}

DataBinding도 함께 활성화되어 있어야 합니다.

android {
    buildFeatures {
        dataBinding true
    }
}

Activity 설정

Hyperion을 활성화하려면 getSystemService를 오버라이드하는 것이 전부입니다.
BaseActivity가 있다면 거기에만 추가하면 모든 하위 Activity에 자동 적용됩니다.
DataBinding과 함께 사용하는 기본 구조는 다음과 같습니다.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }

    // 이 한 줄만 추가하면 Hyperion 활성화
    override fun getSystemService(name: String): Any? {
        return Hyperion.getSystemService(super.getSystemService(name), this)
    }
}

BaseActivity를 사용하는 경우에는 아래처럼 한 곳에만 작성하면 됩니다.

abstract class BaseActivity : AppCompatActivity() {

    override fun getSystemService(name: String): Any? {
        return Hyperion.getSystemService(super.getSystemService(name), this)
    }
}

사용 방법 — 패널 열기 및 View 속성 확인

앱 실행 후 두 손가락으로 아래로 스와이프하면 Hyperion 패널이 화면 하단에서 올라옵니다.
패널에서 Attr 항목을 선택한 뒤 확인하고 싶은 View를 탭하면 해당 View에 현재 적용된 모든 속성이 나열됩니다.
DataBinding으로 바인딩된 textColor나 backgroundColor의 실제 적용값도 이 화면에서 바로 확인할 수 있습니다.

주요 플러그인별 기능은 다음과 같습니다.

플러그인	기능
Attr	View 탭 → textColor, backgroundColor, textSize 등 속성 확인
Measurement	여백(padding, margin), View 크기 측정
Crash	앱에서 발생한 최근 크래시 로그 확인

DataBinding 디버깅 활용 팁

Hyperion은 DataBinding의 결과값을 View 레벨에서 확인하는 데 특히 강력합니다.
예를 들어 ViewModel의 LiveData가 올바르게 업데이트되었는지 확인하고 싶을 때, Attr 탭에서 해당 TextView를 탭하면 현재 text와 textColor가 어떤 값으로 설정되어 있는지 즉시 알 수 있습니다.
디자이너가 지정한 색상 코드와 실제 적용된 색상이 다를 때도 Hyperion으로 빠르게 원인을 파악할 수 있어 협업 효율이 높아집니다.

아래는 DataBinding XML 예시입니다.

<!-- activity_main.xml -->
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="viewModel"
            type="com.example.MainViewModel" />
    </data>

    <TextView
        android:text="@{viewModel.labelText}"
        android:textColor="@{viewModel.textColor}"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</layout>

이 TextView를 Hyperion Attr 탭에서 탭하면 text와 textColor의 현재 적용값을 확인할 수 있습니다.

주의사항 및 마무리

Hyperion은 Debug 빌드에서만 동작하므로 Release 빌드 배포 시 별도의 제거 작업이 필요 없습니다.
단, getSystemService 오버라이드를 빠뜨린 Activity에서는 패널이 열리지 않으므로 BaseActivity 적용 여부를 반드시 확인해야 합니다.
DataBinding + Hyperion 조합은 UI 개발 속도를 크게 높여주는 실용적인 도구 조합입니다.
프로젝트에 도입해 디버깅 시간을 줄이고 더 빠른 UI 개선 사이클을 경험해 보세요.