모바일 개발자가 TV 앱을 만나면 생기는 일 (Android TV, tvOS, 포커스 처리)

2023년 봄, 에이전트한테서 연락이 왔습니다. 동영상 서비스인데 스마트폰 앱이랑 Android TV 앱을 같이 만들 사람을 찾는다고요. TV 앱은 해본 적이 없다고 하니, 어차피 같은 Android라 괜찮다고 하더군요. 저도 그 말을 믿었습니다.

첫 출근 날, 지급받은 Chromecast with Google TV를 회의실 모니터에 꼽고 빌드한 앱을 띄웠습니다. 화면은 잘 나왔습니다. 그런데 리모컨 방향키를 눌러도 아무 반응이 없었습니다. 위, 아래, 확인. 전부 무반응. 옆자리 리드가 웃으면서 “포커스 안 잡았죠?” 한마디 하는데, 그게 무슨 말인지 그때는 몰랐습니다.

TV에는 손가락이 없습니다. 사용자는 소파에 앉아 리모컨 하나로 앱을 씁니다. 스마트폰에서 당연했던 것들이 생각보다 많이 무너지는데, 그때 미리 알았으면 좋았을 것들을 적어봅니다.

Android TV

제가 들어간 현장은 홈과 검색 화면이 Leanback, 새로 만드는 화면은 Compose for TV였습니다. 지금 구글이 권장하는 건 Compose for TV(androidx.tv)인데, 서비스를 몇 년 운영한 회사라면 Leanback 코드가 남아 있을 확률이 높습니다. 저처럼 둘이 섞인 현장도 흔하고요.

섞여 있으면 화면을 오갈 때 문제가 생깁니다. Leanback 화면에서 Compose 화면으로 갔다가 돌아오면 포커스가 사라져 있는 일이 잦았고, 결국 화면 전환마다 포커스 위치를 직접 지정하는 코드를 넣었습니다. 처음 2주는 기능 개발보다 BrowseSupportFragment와 Presenter 소스를 읽는 시간이 더 길었습니다. Compose만 할 줄 알면 들어갈 수 있는 TV 안건이 꽤 줄어든다는 걸 그때 알았습니다.

모바일에는 없던 설정도 몇 가지 있습니다. 우선 TV 홈 화면에 앱이 뜨려면 LEANBACK_LAUNCHER 카테고리와 배너 이미지가 필요합니다. 저는 배너를 빼먹어서, 설치는 됐는데 홈에 앱이 안 보이는 상황을 반나절 붙잡고 있었습니다. 매니페스트에서 터치스크린을 필수가 아니라고 선언하는 것도 잊기 쉽습니다. 이걸 빼먹으면 스토어에서 TV가 지원 기기로 잡히지 않습니다. 기종에 따라 화면 끝이 잘려 보이기도 해서, 중요한 버튼은 가장자리에서 안쪽으로 들여 둡니다.

에뮬레이터로는 리모컨 감각을 알 수 없습니다. 개인적으로는 스틱형 기기를 하나 사서 집 TV에 꼽아두는 게 제일 빨랐습니다.

tvOS

iOS 앱 견적 감각으로 tvOS 견적을 냈다가 크게 데인 적이 있습니다. 문제는 로그인과 이용약관 화면이었습니다.

tvOS에는 WKWebView가 없습니다. iOS 앱에서 웹뷰 한 장으로 끝나던 약관 화면을 스크롤되는 네이티브 화면으로 새로 만들어야 했고, 로그인도 다시 설계했습니다. 리모컨으로 이메일 주소를 한 글자씩 치게 할 수는 없으니까요. TV 화면에 코드를 띄우고 스마트폰에서 입력하는 방식으로 바꿨는데, 서버 쪽 작업까지 엮이면서 그 화면들만 예상 공수의 두 배 가까이 들었습니다. 그 뒤로 tvOS 견적을 낼 때는 웹뷰를 쓰는 화면이 몇 개인지부터 섷니다.

포커스를 다루는 방식도 Android와 다릅니다. tvOS는 Focus Engine이 다음 포커스를 정하고, 개발자는 그 흐름을 원하는 방향으로 유도하는 쪽에 가깝습니다. 버튼 배치가 대각선으로 어긋나 있으면 방향키를 눌러도 포커스가 넘어가지 않는데, UIKit이면 UIFocusGuide를, SwiftUI면 focusSection()을 써서 길을 만들어 줍니다. 특정 요소로 포커스를 보내고 싶을 때는 @FocusState를 씁니다.

동영상 서비스라면 Apple TV 홈 화면 위쪽에 추천 작품을 띄우는 Top Shelf 확장도 거의 반드시 요구됩니다. 모바일만 하던 사람은 이름도 처음 들어볼 기능이라, 면담 전에 한 번 찾아보고 가면 좋습니다.

포커스 처리

솔직히 TV 앱 개발하면서 제 시간을 제일 많이 잡아먹은 건 포커스였습니다. 지금 생각해도 좀 억울한 버그가 하나 있습니다.

홈 화면에 이어보기 줄이 있었는데, 동영상을 끝까지 보고 홈으로 돌아오면 포커스가 화면 맨 위 메뉴로 튀었습니다. 방금 본 작품 근처에 있어야 할 포커스가 엉뚱한 데 가 있으니, QA 담당자가 매번 버그로 올렸죠. 원인은 이어보기 목록을 새로 받아오면서 리스트를 통째로 갈아 끼운 것이었습니다. 포커스가 붙어 있던 아이템이 새 객체로 바뀌면서 갈 곳을 잃은 거죠. 아이템마다 고정 key를 주고, 마지막으로 선택한 작품 ID를 기억해 듀다가 복귀할 때 그 자리로 포커스를 돌려주는 식으로 고쳤습니다.

고치는 건 하루면 됐습니다. 문제는 재현이었습니다. 재생을 끝까지 마쳐야 재현되니, 테스트용 짧은 영상이 준비되기 전까지는 매번 시크바를 끝까지 밀어야 했습니다.

그 뒤로 비슷한 버그를 여러 번 만나면서, 포커스 문제는 대부분 몇 가지 유형으로 나뉠다는 걸 알게 됐습니다. 목록이 갱신될 때 포커스가 사라지는 경우, 뒤로 돌아왔을 때 위치가 초기화되는 경우, 아래를 눌렀는데 엉뚱한 열로 이동하는 경우, 방향키를 꾹 누르고 있을 때 스크롤과 이미지 로딩이 못 따라오는 경우입니다.

이 중 상당수는 코드를 짜기 전에 막을 수 있습니다. 화면에 처음 들어왔을 때 포커스를 어디에 둘지, 돌아왔을 때 어디로 복원할지 정도만 디자이너나 기획자와 미리 정해두면 됩니다. 디자인 시안에는 이런 정보가 거의 없어서, 먼저 물어보면 현장에서도 TV 앱 해본 사람으로 바로 알아봐 줍니다.

그래서 TV 앱, 해볼 만한가요

저는 해볼 만하다고 봅니다. 그 안건이 끝나고 다음 안건을 찾을 때, 면담에서 가장 많이 받은 질문이 TV 앱 경험이었습니다. 동영상 서비스는 스마트폰과 TV를 같이 운영하는 곳이 많아서, 둘 다 된다고 하면 이야기가 빨리 진행됐습니다. 단가 이야기를 꺼낼 때도 확실히 덜 눈치를 보게 되더군요.

첫 주는 정말 그만두고 싶을 정도로 답답했습니다. 그래도 모바일 안건만 하고 계신다면, 다음에는 TV 대응이 들어간 안건도 한 번 후보에 넣어보세요. 해두면 손해는 안 봅니다.