# Table of Contents

# 글을 시작하며

안녕하세요! 오늘은 팀원분이 트러블 슈팅중 문제를 공유한 슬랙덕에, 제 과거 경험을 공유했었는데요. 이슈는 `iOS` 에서만 `동영상 자동재생`이 되지 않는 문제입니다. 생각난 김에 이때 트러블 슈팅을 어떻게 접근했고, 어떤 방법으로 해결했었는지 이야기해 보겠습니다.

# 버그가 있다는 소식이 들려왔다(나만 안돼요)

당시 버그소식을 들었던 기능은, 제가 개발을 하진 않았었습니다. 하지만 퇴근시간 이후였고, git 에 올라간 순간부터 이제 이 코드는 우리 팀의 코드 아니겠습니까. 특히나 이 기능을 개발한 동료가 신입인데다, 아직 회사에 적응 중이었으므로 퇴근후까지 일을 하게 하고 싶진 않아 기나긴 삽질을 시작하게 됩니다.

`요구사항`은 간단 했습니다. 그저 유저가 페이지에 진입시, 저희가 재생하고자 하는 동영상을 자동재생 해주기만 하면 됩니다. 저는 이슈를 제보받자 마자 제보자들께 한가지 부탁과 두가지 질문을 했는데요.`os` 버전과 `app` 버전 을 여쭙고, 절대 os 와 app 버전 `업데이트를 하지 말아달라` 라는 부탁입니다. 부탁한 이유야 뭐 인앱 웹뷰나, 모바일 웹뷰를 대응하다 보면 누구나 근시일 내에 겪게되는 부분 이라고 생각하는데요. 이유는 다음과 같습니다.

1. `인앱 웹뷰` 라면, 앱 버전에 따라 `네이티브 코드`가 어떻게 `수정`되었는지를 파악해야 하기 때문입니다. 만약 현재 우리 최신버전의 앱에서는 아무 이상이 없지만, 서비스하고 있는 과거 버전의 앱에서 문제가 발생한다고 가정하겠습니다. 이때 정확한 테스트와 방법을 찾기 위해서는 네이티브 앱의 **버전**이 중요하고, 이 앱의 버전을 알아야 앞뒤로 어떤 **코드의 변화**가 생겼는지를 추적 가능합니다. **TestFlight** 등이 잘 관리되고 있고, 내가 네이티브 코드나 버전 히스토리를 잘 알고있어 바로 수정이 가능타 해도 `앱 버전`은 알아두어야 합니다. 후에 네이티브 개발자 분께 도움을 청하기 위해서라도요.

2. `인앱 웹뷰`, `모바일 웹` 모두에 해당하는 사항인데요. `os 버전`은 굉장히 중요합니다. 왜냐. 이게 os 버전이 올라감에 따라 모바일에 기본 탑재되는 소프트웨어 버전이 같이 올라가는 경우가 있는데요. 특히나 iOS 에서 제공하는 브라우저인 `Safari` 의 경우는 이게 정말 빈번합니다. 흔한예로, `display: flex` 를 준 부모 아래 요소가 부모의 `height`을 제대로 상속받지 못하는 이슈는 현재 제 모바일 safari 에서는 잘 해결이 된 상태이지만, 업무 외적으로 사용중인 구버전의 os(Bigsur 11.1) 버전을 쓰는 노트북에서는 해결되지 않은 상태입니다.

크게 위와 같은 이유로 각 디바이스의 환경을 고정해 놓고 나서, 코드와 나머지 레벨에서의 이슈를 찾아내는 것을 추천하고 싶습니다. 저는 처음 실무를 시작했을 당시, **os 버전이 달라서** 이슈가 생길 수 있다는 부분을 잘 몰라 한참을 고생했던 경험이 있었던 이후로는 위 사항을 꼭 신경씁니다.

# 코드 레벨 이슈

이제 코드레벨에서 이슈를 찾을 차례입니다.

이 이슈를 해결할 당시 `Web Frontend` 와 `iOS 네이티브` 코드 둘다 어느정도 문제가 있었는데요. 일단 저는 Web 개발을 하는 만큼 일단은 제 영역인 `Frontend 영역`에서 문제를 찾기 시작했습니다. 당시 기준, 하위 os 버전에서는 문제가 없었으나 최신 os 버전에 해당하는 11대 버전에서는 동영상이 제대로 재생이 되지 않는 문제가 있었습니다. 그래서 Html 에 아래와 같은 속성을 추가해 해결 하게 되었는데 코드는 다음과 같습니다.

```html
<video loop="loop" muted="muted" autoplay="autoplay" playsinline></video>
```

- `muted`: 이 속성은 말그대로 음소거 처리를 하는 속성입니다. 제 경우 iOS 에서 이슈를 발견했으나 트러블 슈팅중 chrome 에서도 재생이 안되는 현상을 발견했고, 이 속성은 사용자의 제한된 네트워크 상황에서 과도한 데이터 소비를 방하기 위한 정책과 관련이 있습니다. 아래 링크를 참조해 주세요.

  - [chrome - autoplay/#webaudio](https://developer.chrome.com/blog/autoplay/#webaudio)

- `playsinline`: 이 속성은 동영상 재생시 저절로 전체화면이 되는것을 막는 속성인데요. chrome 에 경우 이 속성이 없어도 무방합니다. 하지만 iOS 의 경우 11 버전 이후로는 이 속성이 활성화 되어야만 자동재생이 가능합니다. 아래 링크를 참조해 주세요.

  - [webkit - new video policies](https://webkit.org/blog/6784/new-video-policies-for-ios/)
  - [iOS - delivering_video_content_for_safari](https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari)

`iOS 네이티브` 영역의 이슈입니다. 이역시 최신버전의 앱에서는 문제 없이 작동했으나, 위 이슈를 수정하고 나서도 문제가 있어 iOS 팀의 커밋 로그를 뒤져봤는데요. 해당 수정사항을 작성해서 릴리즈하기 전 앱버전을 사용하는 분들에게서 일어나는 이슈였습니다. 저는 네이티브 개발은 잘 몰라서, 당시 회사의 iOS 팀에 의심가는 부분을 질문드린 뒤 확신을 갖을수 있었습니다. 서비스중인 iOS 프로젝트의 몇달치 커밋 로그를 한땀한땀 읽느라 눈이 조금 아팠던 기억이 나네요. 아래 링크를 참조해 주세요.

- [apple developer](https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1851524-mediatypesrequiringuseractionfor)

위의 사항이 모두 충족되었을때, 사내 버그를 제보해주신 대부분의 분들께 작동이 잘 된다는 이야기를 들을 수 있었습니다. 여기까지 해결하는데는 그래도 비교적 짧은 시간이 걸렸는데요. 이제부터 제가 진정한 삽질을 시작합니다. 이때도 그렇고 지금도 그렇지만 역시나 트러블 슈팅은 짬에서 나오는것이 최강인가 하는 생각이 듭니다.

# 디바이스 레벨(OS) 에서의 문제

위 코드영역에서의 문제를 해결하고도, 단 한분께 아직 재생이 안된다는 제보를 받았습니다. os 버전도 체크하고, 코드도 체크하고, 앱 버전을 체크했음에도 문제는 계속 되었죠. 그렇게 이걸 바꾸고, 저걸 바꾸고, 한참을 구글링 하던중... 저는 어찌보면 참 싱겁고 어이없는 부분에서 해결 방법을 찾게 되었습니다. 바로 `저전력모드` 입니다. iOS 에서는 절전모드 사용시 비디오 자동재생이 되지 않는데요. iOS 의 경우 `9버전`부터 이를 지원하였고, 이때는 아래와 같은 제약사항이 생긴다고 합니다.

- CPU Throttling (60% 제한)
- Background Application Refresh 제한
- WebView Video play제한
- auto-download 제한
- GPU performacne 저하 (requestAnimationframe등의 효과 제한)
- 화면 밝기 저하

이때는 이 이상의 자료를 찾아보진 않았으나 이것도 apple 문서 어딘가에 나와있지 않을까 싶네요. 아울러 참 재미있는 stack overflow 의 글을 읽었는데요. iOS 가 저전력모드에서 `suspend` 이벤트를 사용해 트리거 한다는 내용입니다(_아래링크 참조_).

- [stackoverflow](https://stackoverflow.com/questions/54379718/autoplay-video-iphone-low-power-mode-not-working)

저 이슈를 찾자마자, 저전력 모드이길 바라는 마음으로 제보자(a.k.a Jenny) 에게 혹시 저전력모드를 사용중인지, 그렇다면 풀고 페이지에 접속시에도 문제가 발생하는지 기도하는 맘으로 질문을 했었습니다. ~~장애가 났을때 트러블 슈팅 뒤 누른 배포버튼과 함께 빨리 서비스가 살아나길 바라며 하는 기도와 같은 그런 느낌으로요.~~
당시 저는 저전력 모드에서의 자동재생을 시킬 방법은 찾지못하여, `Fallback GIF` 를 디자이너분께 부탁해 만들고, 자동재생이 실행되지 않을 시 이걸 대신 보여주는 방법으로 해결했던 기억이 나는데요. 기회가 된 김에 잠시 구글링을 해 보았는데, 오늘기준 딱히 뚜렷한 방법이 보이지는 않는듯 합니다. 혹시 방법을 알고계신 분은 메일 부탁드려요🙏.

# 마치며

오랜만에 옛 기억을 떠올리며 글을 작성해 보았는데요. 트러블 슈팅은 이래서 짬인가 싶기도 하고, 여태 만난 문제들이 새록새록 기억에 남네요. 제가 이 문제를 해결할 당시만 해도 특히나 저전력 모드에서 문제가 생긴다는 생각을 아예 하지 못해서인지 구글링을 하는데 정말 오랜 시간이 걸렸었습니다. 이글을 작성하며 해당 이슈에 대한 글이 있나? 하고 보니 그래도 지금은 보이는 글이 적지 않습니다. 제 글도 어느 누군가의 구글링에 걸려 도움이 되길 바라며. 즐거운 코딩 되시길 바랍니다. 감사합니다.


예전에 삽질했던 기억이 나네요. iOS. 단어 근본으로 썼습니다

DevLog

iOS 동영상 자동재생이 안될때(mobile issue)