앱 소개

• 페이지 방식의 동영상 플레이어
• 태그를 통한 동영상 관리
• Dynamic color 및 다크 모드 지원 및 다양한 크기에 맞게 UI 구현

동영상 목록

• 검색, 필터, 정렬 지원

동영상 정보 보기, 태그 설정

• 다중 선택 지원
• 동영상 정보 보기
• 태그 설정

동영상 플레이어

• 스와이프를 통한 동영상 교체

태그 목록

• 태그를 통한 동영상 관리

다크 모드

• 앱 설정을 통한 다크 모드

기술 스킬

• Kotlin
• Compose
• Material3
• Hilt
• Navigation
• Room
• Proto Datastore
• Glide
• ExoPlayer(Media3)
• Junit4
• Mockito
• SplashScreen API
• Palette API

주요 기능

Adaptive Layout

• 화면 크기에 따라 UI 변경되게 구현
• 화면 타입 객체 구현 및 해당 객체를 반환하는 Composable 구현

Dynamic Color

• M3 Theme colorScheme를 사용해서 앱 UI 구현
• 디바이스 설정 컬러 팔레트 선택과 다크 모드 유무에 따라 색이 동적으로 표시
• Palette API를 사용해 동영상 섬네일 색 추출, 해당 색을 섬네일 바탕색으로 사용

Animation

• InfiniteTransition를 사용해 로딩 애니메이션 구현
• AnimationVisibility를 사용해 바텀바 Slide 애니메이션과 필터 칩 leading icon 애니메이션 구현
• animateFloatAsState를 사용해 동영상 플레이어 진행바 구현

Pager, Glide, ExoPlayer를 활용한 동영상 플레이어

• ExoPlayer로 동영상 재생, LifecycleEventObserver를 통해 앱이 백그라운드 시 동영상 정지되게 구현
• View 기반인 ExoPlayer의 PlayerView는 AndroidView로 구현, 컨트롤러 UI는 Compose로 직접 구현
• 동영상 플레이어 페이지 넘기는 방식은 androidx.compose.foundation.pager를 통해 구현
• 현재 사용자에게 보여지는 페이지가 아니더라도 동영상을 준비시키고 PlayerView를 생성하는 것을 막기 위해 Pager의 페이지가 settledPage가 아니면 Glide를 사용한 첫 프레임 이미지를 표시하고, settledPage일 경우 동영상을 표시

Room

• 디바이스내 동영상 정보와 사용자가 생성한 태그를 Room에 저장
• 동영상 정보와 태그는 다대다 관계이며, 두 Entity를 연결하는 associate entity TagVideoCrossRef구현
• 동영상 정보와 태그를 id를 TagVideoCrossRef의 ForeignKey로 지정하고 onDelete를 ForeignKey.CASCADE로 설정해 동영상 정보나 태그가 삭제될 시 해당 entity의 TagVideoCrossRef를 삭제하게 구현
• 태그 entity의 이름을 index로 지정하고, unique로 적용해 태그 이름 중복 방지

Proto Datastore

• 동영상 목록에 적용되는 필터, 정렬과 앱 테마 설정을 Proto Datastore로 저장
• Proto Datastore는 Flow를 지원하며, 유형 안정성을 제공하기 때문에 사용

개발 일지

App Ui Design

Compose에서 동영상 썸네일 이미지 Coil, Glide 비교