Flipper: 개념, 기능 및 활용

Flipper란 무엇인가?

Flipper는 2018년 Facebook(Meta)이 만든 오픈소스 모바일 앱 디버깅 플랫폼입니다. 이 프로젝트는 원래 Sonar라는 이름으로 회사 내부 사용을 위해 만들어졌지만, 2019년 Meta가 MIT 라이선스로 소스 코드를 공개했습니다. 플랫폼은 Electron 기반 데스크톱 애플리케이션과 Android 및 iOS 프로젝트에 통합되는 SDK의 두 가지 구성 요소로 이루어져 있습니다.

Flipper와 다른 디버깅 도구의 주요 차이점은 모듈식 아키텍처입니다. 모놀리식 디버거 대신 개발자는 프로젝트에 실제로 필요한 플러그인만 연결합니다. 이렇게 하면 앱의 부하가 줄어들고 인터페이스가 간소화됩니다. 디버거는 개발자가 선택한 항목만 표시합니다. Android Studio에는 내장 프로파일러가 있지만 ADB를 통해서만 작동하며 Flipper와 같은 수준의 사용자 지정을 제공하지 않습니다.

Meta에 따르면 Flipper는 회사 내 2000개 이상의 프로젝트에서 사용되며 Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite 및 기타 인기 라이브러리와의 통합을 지원합니다. 이 플랫폼은 Android API 16+ 및 iOS 11+와 호환됩니다.

Flipper 아키텍처: 데스크톱-기기 통신 작동 방식

Flipper 아키텍처는 클라이언트-서버 모델을 기반으로 합니다. 데스크톱 애플리케이션이 서버 역할을 하고 모바일 기기가 클라이언트 역할을 합니다. USB 또는 TCP/IP를 통해 연결이 설정된 후 WebSocket 기반 Flipper 프로토콜을 사용하여 양방향 메시지 교환이 시작됩니다.

Android 측에서는 android-client 라이브러리가 통신을 제공하며 트래픽 터널링에 ADB를 사용합니다. iOS 클라이언트는 idb(iOS Device Bridge)를 통해 연결됩니다. 이는 Xcode 없이 iOS 기기와 상호 작용하기 위한 Meta의 자체 개발입니다. 앱 내에서 각 플러그인은 FlipperClient에 등록되고 데스크톱 counterpart와 자체 통신 채널을 받습니다.

데이터 전송 프로세스는 다음과 같이 작동합니다. 기기의 플러그인이 FlipperClient를 통해 이벤트를 보내면 클라이언트가 이를 JSON으로 직렬화하고 WebSocket을 통해 데스크톱으로 전송합니다. 데스크톱 애플리케이션이 메시지를 역직렬화하고 인터페이스의 해당 플러그인으로 보냅니다. Meta의 기술 블로그(2024)에 따르면 USB 연결 시 메시지 전송 지연 시간은 15밀리초 미만입니다.

Flipper 설치 및 구성 방법

Flipper 설치는 데스크톱 애플리케이션 설치, 프로젝트에 SDK 추가, 디버거 실행의 세 단계로 이루어집니다. 데스크톱 애플리케이션은 공식 웹사이트 fbflipper.com에서 다운로드합니다. Windows, macOS, Linux용 빌드가 dmg, exe, AppImage 형식으로 제공됩니다. 설치 후 애플리케이션은 ADB를 통해 연결된 기기를 자동으로 검색합니다.

Android 프로젝트의 경우 Flipper는 build.gradle의 종속성을 통해 연결됩니다. 데스크톱 클라이언트 버전과 일치하는 Flipper 버전을 지정하고 사용 중인 라이브러리에 대한 플러그인을 추가해야 합니다. 다음은 Kotlin 프로젝트의 구성 예시입니다:

// build.gradle (앱)
val flipperVersion = "0.265.0"

dependencies {
    debugImplementation("com.facebook.flipper:flipper:$flipperVersion")
    debugImplementation(
        "com.facebook.flipper:flipper-network-plugin:$flipperVersion"
    )
    debugImplementation(
        "com.facebook.flipper:flipper-litho-plugin:$flipperVersion"
    )
}

Gradle 동기화 후 Application 클래스에서 FlipperClient를 초기화해야 합니다. 초기화는 디버그 빌드에서 수행됩니다. 릴리스 버전에서는 디버깅 정보가 사용자에게 노출되지 않도록 라이브러리를 연결하지 않아야 합니다.

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        if (BuildConfig.DEBUG) {
            SoLoader.init(this, false)
            AndroidFlipperClient
                .getInstance(this)
                .addPlugin(NetworkFlipperPlugin())
                .start()
        }
    }
}

iOS의 경우 Flipper는 CocoaPods를 통해 추가됩니다. Podfile에는 Flipper 및 FlipperKit 프레임워크와 통신 채널 구성을 위한 Flipper-Folly 및 Flipper-PeerTalk를 지정합니다. pod install 후 시뮬레이터나 기기에서 앱을 실행하면 데스크톱 클라이언트가 자동으로 새 세션을 검색합니다.

연결 확인

앱을 실행한 후 데스크톱 Flipper를 엽니다. 왼쪽 패널에 연결된 기기 목록이 나타납니다. 기기가 표시되지 않으면 ADB가 설치되어 있는지, Android에서 USB 디버깅이 활성화되어 있는지, iOS용 idb 브리지가 실행 중인지 확인하세요. 각 기기는 모델 이름과 OS 버전과 함께 표시됩니다.

Android 및 iOS용 Flipper 플러그인

Flipper 플러그인은 특정 작업을 위해 데스크톱 인터페이스에 패널을 추가하는 모듈식 확장 기능입니다. Meta는 가장 인기 있는 라이브러리용 공식 플러그인을 유지 관리합니다: OkHttp 및 URLSession용 Network Plugin, SQLite 및 Realm용 Database Plugin, View 계층 구조용 Layout Inspector, SharedPreferences Plugin, Crash Reporter.

공식 플러그인 외에도 커뮤니티에서 개발한 서드파티 플러그인 생태계가 있습니다. 예를 들어 Tencent MMKV 스토리지 디버깅용 MMKV Plugin, React Native용 Redux Debugger, 메모리 누수 감지용 LeakCanary Plugin 등이 있습니다. 플러그인은 Maven Central 및 CocoaPods를 통해 배포되며 일반 종속성으로 연결됩니다.

Flipper의 중요한 장점은 사용자 정의 플러그인을 작성할 수 있다는 것입니다. 플러그인은 모바일 앱에 등록되는 클라이언트 측 부분(Kotlin 또는 Swift)과 인터페이스에 UI 패널을 추가하는 데스크톱 측 부분(TypeScript 또는 JavaScript)의 두 부분으로 구성됩니다. Meta는 WebSocket 및 JSON 메시지를 지원하는 사용자 정의 플러그인 생성을 위한 API를 제공합니다.

Android용 주요 플러그인

Flipper를 통한 네트워크 디버깅

Network Plugin은 가장 인기 있는 Flipper 플러그인 중 하나입니다. Android의 OkHttp 또는 iOS의 URLSession을 통과하는 모든 HTTP/HTTPS 요청을 가로채서 데스크톱 인터페이스에 실시간으로 표시합니다. 각 요청에 대해 URL, 메서드, 상태 코드, 요청 및 응답 헤더, 요청 및 응답 본문, 실행 시간 및 크기를 확인할 수 있습니다.

Android에서 Network Plugin을 연결하려면 flipper-network-plugin 종속성을 추가하고 OkHttpClient를 NetworkFlipperPlugin 생성자에 전달하기만 하면 됩니다. Flipper는 자동으로 OkHttpClient를 인터셉터로 래핑합니다. iOS에서는 URLSession 통합 플러그인이 FlipperNetworkInterceptor를 통한 구성이 필요합니다.

val networkPlugin = NetworkFlipperPlugin()
val client = OkHttpClient.Builder()
    .addNetworkInterceptor(networkPlugin)
    .build()

Network Plugin의 주요 기능은 요청 검색 및 필터링 지원입니다. 개발자는 URL, 메서드, 상태 코드 또는 콘텐츠 유형별로 요청을 필터링할 수 있습니다. 인터페이스에서 모든 요청을 강제로 재시도할 수 있습니다. 이는 별도의 curl 요청을 작성하지 않고 엔드포인트를 테스트하는 데 유용합니다. Meta 개발자 설문조사(2024)에 따르면 Network Plugin은 Flipper가 설치된 프로젝트의 78%에서 사용됩니다.

데이터베이스 및 SharedPreferences 디버깅

Database Plugin은 데스크톱 클라이언트에서 직접 SQLite 및 Realm 데이터베이스에 대한 액세스를 제공합니다. 개발자는 모든 테이블, 스키마 및 내용을 표 형식으로 볼 수 있습니다. 코드를 작성하지 않고도 임의의 SQL 쿼리를 실행하고 레코드를 추가, 편집, 삭제할 수 있습니다. 이는 adb shell을 사용하는 것보다 애플리케이션 상태 디버깅을 훨씬 빠르게 합니다.

SharedPreferences Plugin도 유사하게 작동합니다. Android의 SharedPreferences에 저장된 모든 키와 값을 표시합니다. 편집은 즉시 이루어지며 변경 사항이 앱에 바로 반영됩니다. 그러나 중요한 제한 사항이 있습니다. 앱을 다시 시작하면 Flipper가 다시 연결되고 플러그인을 통해 수행된 모든 변경 사항이 SharedPreferences 파일에 직접 적용되므로 유지됩니다.

iOS의 경우 NSUserDefaults Plugin이 이에 해당합니다. UserDefaults와 함께 작동하며 저장된 모든 키-값 쌍을 표시합니다. 이 플러그인은 문자열, 숫자, 날짜 및 배열 편집을 지원합니다. Flipper가 런타임 인터페이스를 통해 UserDefaults에 액세스하므로 변경 사항이 즉시 적용됩니다.

Layout Inspector 및 로깅

Flipper의 Layout Inspector는 Android의 View 계층 구조를 시각적으로 표시합니다. 개발자는 구성 요소 트리, 해당 속성(너비, 높이, 패딩, 배경, 텍스트)을 확인하고 기기 화면에서 모든 요소를 대화식으로 선택할 수 있습니다. 이는 Android Studio에 내장된 Layout Inspector의 대안이지만 중요한 차이점이 있습니다. Flipper는 앱을 중지하지 않고 실시간으로 계층 구조를 표시합니다.

로깅에는 Logs Plugin이 사용됩니다. Logcat의 모든 로그는 수준(Debug, Info, Warn, Error) 및 태그별 필터링과 함께 데스크톱 인터페이스에 표시됩니다. Android Studio Logcat과 달리 Flipper 인터페이스는 화면을 복잡하게 만들지 않습니다. 로그는 태그별로 그룹화되고 수준별로 강조 표시됩니다. JSON으로 로그 검색 및 내보내기가 지원됩니다.

또 다른 유용한 기능은 React Native 또는 WebView 구성 요소의 JavaScript 코드에서 console.log를 표시하는 Console Plugin입니다. 이는 하이브리드 앱 디버깅을 간소화합니다. 개발자는 하나의 인터페이스에서 기본 로그와 JS 로그를 모두 볼 수 있습니다. 이 플러그인은 소스(Native 또는 JS) 및 로깅 수준별 필터링을 지원합니다.

Flutter 플러그인 구성

Flutter 애플리케이션의 경우 Flipper는 pub.dev의 flipper 패키지를 통해 연결됩니다. flutter_flipper 플러그인은 Dio 네트워킹 계층, SharedPreferences 스토리지 및 Flutter 탐색과의 통합을 제공합니다. 설치하려면 pubspec.yaml에 종속성을 추가하고 앱의 main 함수에서 FlipperClient를 초기화해야 합니다. Flutter 플러그인은 기능 면에서 기본 플러그인보다 여전히 부족하지만 주요 디버깅 시나리오를 다룹니다.

디버깅 중 성능

Flipper는 활성 플러그인 수에 비례하여 기기 및 데스크톱 리소스를 소비합니다. 모든 플러그인이 Android 에뮬레이터에 동시에 연결되면 Meta의 측정(2024)에 따르면 5–10%의 성능 저하가 관찰됩니다. 필요한 플러그인만 연결하고 데스크톱 애플리케이션 인터페이스를 통해 사용하지 않는 플러그인을 비활성화하는 것이 좋습니다.