[Lymo 개발일지 #4] React Native로 기기에서 재생 중인 미디어 세션 가로채기

1️⃣ Lymo 개발일지 #1: https://parkcool.tistory.com/8

2️⃣ Lymo 개발일지 #2: https://parkcool.tistory.com/12

3️⃣ Lymo 개발일지 #3: https://parkcool.tistory.com/14

4️⃣ Lymo 개발일지 #4: 현재 글

지난 세 편의 일지를 통해 AI와 백엔드, 그리고 데이터 스트리밍을 완성하는 과정을 보여드렸습니다. 이제 사용자의 눈에 보이는 부분인 프론트엔드 개발기로 넘어갈 차례입니다.

 

오늘 다룰 주제는 Lymo의 정체성과도 같은 기능이자, 개발 과정에서 가장 많은 애를 썼던 부분입니다. 바로 기기에서 재생되는, 즉 다른 음악 스트리밍 앱에서 나오는 음악을 실시간으로 가로채는 기능입니다.

 

🕵️ 미디어 세션 가로채기

1편에서 말씀드렸다시피, Lymo의 핵심적인 기능 중 하나는 사용자가 평소 쓰던 음악 앱(스포티파이, 유튜브 뮤직, 멜론 등)을 그대로 쓸 수 있다는 점입니다. 음악 앱에서 재생 중인 음악 정보를 가져와서 Lymo에서는 그 곡의 해석 정보만을 제공하는 것입니다. 하지만 이 기능을 구현하려니 시작부터 거대한 벽에 부딪혔습니다.

 

출처: https://proandroiddev.com/the-layers-of-the-android-security-model-90f471015ae6

안드로이드를 포함한 대부분의 OS에서는 보안을 위해 앱과 앱 사이를 분리하는 샌드박스 아키텍처를 적용하고 있습니다. 즉, 기본적으로 Lymo는 스포티파이에서 지금 무슨 노래를 재생 중인지 알 수 없습니다.

 

하지만 방법이 전혀 없는 것은 아니었습니다. 다행히도 안드로이드에서는 MediaSessionManager라는 API를 제공합니다.

 

안드로이드에서 상단 바를 내리면 나오는 미디어 알림에는 곡 제목, 아티스트, 앨범 아트 정보 등 곡에 대한 메타데이터가 담겨 있습니다. MediaSessionManager를 이용하면 다른 앱에서도 현재 재생 중인 음악 정보를 가져올 수 있습니다.

 

그러나 이 정보를 마음대로 가져올 수는 없습니다. 미디어 세션도 결국 알림 정보의 일종이고, 알림 정보에 접근한다는 것은 보안상 매우 민감한 문제 중 하나이기 때문입니다. 만약 앱들이 알림 정보에 마음대로 접근할 수 있도록 허용해버린다면, 내 카톡 알림을 나도 모르는 사이에 모르는 사람이 가로채갈 수도 있는 무서운 일이 일어날 수도 있게 됩니다.

 

그래서 갤럭시 기기에 탑재된 One UI 기준으로, 알림 접근 허용 권한은 '특별한 접근'이라는 설정 화면 깊숙한 곳에서 조작할 수 있습니다. 그만큼 민감하고 중요한 권한이라는 것이죠.

 

☺️ 친절한 UX

하지만 사용자더러 설정 → 애플리케이션 → 우측 상단 점 세 개 버튼 → 특별한 접근 화면 → 알림 접근 허용 → Lymo 앱 허용 해달라고 할 수는 없는 노릇이었습니다. 보시다시피 경로가 너무 복잡하고 어렵잖아요. 다행히 이 화면까지 한 번에 모셔다드리는(?) 메소드를 안드로이드에서 제공하고 있었습니다.

 

그래서 저는 Lymo가 알림 접근 권한을 부여받지 못 했으면 설정 화면으로 바로 이동할 수 있도록 하는 UI를 구현하였습니다. 위 사진에 있는 '알림 접근 허용하기'를 누르면 터치 한 번에 권한을 허용할 수 있는 설정 화면으로 바로 이동하여 권한을 부여할 수 있는 것이죠.

 

🌉 Expo Native Modules로 다리 놓기

이번 문단에서는 조금 기술적인 얘기를 해보겠습니다. React Native는 JS로 네이티브 앱을 만들 수 있도록 하는 라이브러리입니다. 그래서 Kotlin 코드로 작성한 네이티브 모듈의 기능을 사용하기 위해서는 둘을 연결하는 '다리'가 필요합니다.

 

카메라 사용, 마이크 접근, 알림 띄우기와 같이 자주 사용되는 네이티브 기능들은 이미 JS에서 바로 사용할 수 있도록 한 라이브러리가 많이 공개되어 있습니다. 이런 라이브러리는 JS에서 바로 사용할 수 있도록 '다리'까지 이미 잘 구축된 상태입니다. 하지만 제가 구현하고자 하는 '알림 접근'은 매우 특수한 기능입니다. 그래서 이미 누가 만들어 둔 공개된 라이브러리가 없었습니다. 즉, 제가 Kotlin 코드는 물론 JS에 이를 연결하는 다리까지 직접 구현해야 한다는 뜻이었습니다.

 

저는 이 프로젝트를 Expo 환경에서 개발하고 있는데요. 다행히 Expo는 Native Modules라는 세련된 방식을 통해 네이티브 기능을 JS에서 사용할 수 있도록 하고 있었습니다.

 

전통적인 React Native 앱들은 JS와 네이티브 사이에서 데이터를 주고받을 때 브릿지를 통과해야 했습니다. 모든 데이터를 JSON 문자열로 직렬화해서 보내고, 반대편에서 다시 역직렬화하는 과정은 필연적으로 오버헤드를 발생시켰습니다.

 

하지만 Expo Native Modules가 사용하는 JSI (JavaScript Interface) 방식은 다릅니다. 이는 자바스크립트 엔진이 네이티브 객체에 직접 접근할 수 있게 해주는 C++ 기반의 인터페이스입니다. 쉽게 말해, 중간에 데이터를 포장해서 택배로 보내는 과정 없이, 네이티브와 자바스크립트가 같은 방에 앉아 직접 대화하는 아키텍처를 만든 셈입니다.

 

더불어 동기 호출이 가능해지고 네이티브 코드 작성이 좀 더 편해지는 등 부가적인 이점도 챙길 수 있었습니다.

 

🏃 Headless JS로 백그라운드 작업 수행하기

저는 사용자가 스포티파이나 유튜브 뮤직으로 음악을 재생하면, 그 음악의 해석에 대한 궁금증을 유발하는 알림을 띄우는 기능도 구현하고자 하였습니다. 단순히 사용자의 요청에 의해서만 곡의 해석을 제공하면 사용자들이 앱을 사용하는 빈도가 떨어질 것 같았거든요.

 

위 스크린샷에서 보시다시피 단순히 '이 곡의 해석을 확인해보세요' 같은 고정된 메시지가 아니라, 곡의 내용에 따라 매번 다른 메시지를 생성하고자 하였습니다. 즉, 서버에서 구동되는 LLM을 이용하여야 했기 때문에 서버로의 요청을 보내 메시지를 받아와야 했던 것이었죠.

 

앱의 재방문율을 높일 수 있는 좋은 전략이라고 생각했습니다. 하지만 이 기능 역시 구현이 쉽지만은 않았습니다. 앱이 꺼져 있을 때에도 미디어 세션을 계속 감지하기 위해서는 백그라운드의 영역을 만져야 하기 때문입니다.

 

안드로이드는 배터리 절약을 위해 화면이 꺼지거나 백그라운드로 넘어간 React Native 앱의 자바스크립트 엔진을 가차 없이 꺼버립니다. 앱이 꺼지면 아무리 네이티브에서 음악 변화를 감지해도, 정작 가사를 가져오고 메시지를 가져오고 알림을 띄울 JS가 작동하지 않는 것이죠.

 

이 문제를 해결해준 것이 바로 Headless JS입니다. Headless JS는 앱의 UI가 없어도 백그라운드에서 자바스크립트를 실행할 수 있게 해주는 기술입니다. 제가 이를 이용하여 구현한 기능의 작동 원리는 다음과 같습니다:

1. 네이티브 감지: 네이티브 단의 `MediaNotificationListenerService`가 음악 앱의 알림 변화를 감지합니다.
2. JS 깨우기: 곡 정보가 바뀌면 네이티브 엔진은 `MediaHeadlessTaskService`를 실행합니다. 이때 서비스는 잠자고 있던 JS를 잠시 깨웁니다.
3. 수행: 잠에서 깬 JS는 전달받은 곡 정보를 가지고 백엔드에 메시지를 요청하고 그 메시지로 알림을 띄웁니다.
4. 다시 취침: 작업이 끝나면 자바스크립트 엔진은 다시 잠듭니다.

 

➡️ 정리 및 다음 단계

이로써 Lymo는 음악을 감지하는 기능을 갖게 되었습니다. 단순히 예쁜 UI를 넘어, 안드로이드 시스템의 깊은 곳을 접근하는 네이티브 기능을 구현하는 것은 결코 쉽지 않았습니다. 하지만 그만큼 개발자로서 소중한 경험이었던 것 같습니다.

 

이제 주요 기능을 모두 구현했으니, 다음 일지에서는 이 기능 위에 감성을 입히는 과정을 다뤄보려 합니다. 앨범 아트의 색상을 추출해 화면 전체의 분위기를 바꾸는 시각적 효과부터, 가사 동기화 로직까지... Lymo 개발기의 마지막을 장식할 프론트엔드 UI/UX 최적화 이야기로 돌아오겠습니다.

 

오늘도 긴 글 끝까지 읽어주셔서 감사합니다!