S
skplanet
January 26, 20231회
iOS 환경에서 비디오 최적화 및 성능 개선 사례

간단 소개
iOS 환경에서 비디오 재생 시 발생하는 깜박임 문제를 object-fit 속성 및 로딩 상태 관리를 통해 해결하고, iOS 버전별 이슈를 분기 처리하여 최적화한 사례.
AI Summary
- iOS 비디오 재생 문제 해결
- iOS 15 업데이트 후 비디오 재생 시 화면 깜박임 발생, 원인 분석 및 해결 시도.
- 안드로이드와 iOS의 구조적 차이점을 분석, 다양한 시도에도 해결 불가.
- 해결 과정 및 결과
- 스와이핑 중 썸네일 제거, 비디오 로드 초기 상태값 변경 등 시도.
object-fit속성 문제 발견, 초기값을contain으로 설정 후 로드 시cover로 변경하여 해결.- iOS 버전에 따른 추가 이슈 발생, 버전별 분기 처리 및
transition속성 적용으로 해결.
- 결론 및 교훈
loaded,moving상태 값, 이미지 로드 위치,object-fit속성 조합으로 문제 해결.- 문제 해결 과정에서 시야를 넓히고 성능 최적화 방법을 터득, 사용자 경험 개선에 기여.
Next Feeds
우리는 한다 리팩토링을 - UIKit+RxSwift 에서 SwiftUI+Combine 로의 여정
카카오헤어샵 iOS 디자이너앱을 UIKit+RxSwift에서 SwiftUI+Combine으로 리팩토링하며 MVVM에서 Store 패턴으로 전환한 경험 공유.
SwiftUICombine리팩토링MVVMStore
2023. 1. 19.
카카오헤어샵
Scroll Snap API를 통해 이미지 캐러셀 완성하기
Scroll-Snap API를 사용하여 이미지 캐러셀을 구현하고, 스크롤 스냅 효과를 적용하는 방법을 설명합니다.
Scroll Snap APICSS캐러셀스크롤UI
2023. 1. 19.
카카오엔터테인먼트FE
Scroll Snap API를 통해 이미지 캐러셀 완성하기
Scroll-Snap API를 사용하여 이미지 캐러셀을 구현하고, 스크롤 스냅 효과를 적용하는 방법을 설명합니다.
Scroll Snap APICSS캐러셀스크롤UI
2023. 1. 19.
카카오엔터테인먼트FE
react-query로 데이터 처리하기 - 파트너스 레거시 코드 리팩토링(2) api 로직, react-query
파트너스 레거시 코드 리팩토링을 통해 API 로직을 분리하고 React-Query를 도입하여 데이터 처리 효율성을 개선했습니다.
react-query리팩토링ReduxAPIhooks
2023. 1. 18.
카카오헤어샵

리디에서 Kafka를 사용하는 법
리디는 Kafka를 이벤트 스트리밍 플랫폼으로 활용하여 실시간 랭킹, 애널리틱스, 작업 큐 등 다양한 서비스를 개선하고 있습니다.
KafkaR-Bus이벤트 스트리밍실시간 랭킹애널리틱스
2023. 1. 17.
리디

CTO가 커리어를 걸고 비트 레벨까지 내려가서 DB를 해킹했던 이야기
CTO가 비트 레벨까지 파고들어 DB를 해킹, 36시간 만에 서비스 장애를 극복한 데브시스터즈의 기술 이야기.
CockroachDB데이터베이스 해킹장애 복구Event SourcingPebble
2023. 1. 17.
데브시스터즈