최근 프로젝트에서 웹사이트 메인 페이지에 GIF 대신 동영상을 넣어야 하는 요구사항이 있었어요. PC에서는 잘 동작했지만, 모바일 환경에서 몇 가지 문제점을 발견했습니다.
특히 iOS에서 예상치 못한 동작이 있어서 꽤 고생했는데요, 그 과정에서 배운것들을 공유해보고자 합니다.
구현 목표 🎯
프로젝트의 메인 페이지에 동영상을 넣기 위해 다음과 같은 요구사항이 있었습니다.
- 페이지 로드와 함께 자동 재생 시작
- 플레이어 컨트롤 없이 GIF처럼 재생
- 현재 페이지 내에서만 재생 (전체 화면 전환 없음)
문제 상황 😓
iOS에서 테스트를 진행하던 중 예상치 못한 동작이 발견되었습니다.
가장 큰 문제는 동영상을 탭했을 때 iOS의 기본 동영상 플레이어로 전환되는 것이었습니다.
<!-- 처음 시도했던 코드 -->
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4">
</video>이러한 동작은 UX를 해치는 요소였습니다. 사용자가 GIF처럼 자연스럽게 보기를 원하는데, 플레이어로 전환되면서 페이지의 흐름이 끊기게 되었기 때문입니다.
해결 방법 💡
1. playsinline 속성 추가
iOS에서 페이지 내 재생을 위해서는 playsinline 속성이 필수적이었습니다. 이 속성은 iOS에서 동영상을 현재 페이지 내에서 재생하도록 지정합니다.
<video playsinline>
<source src="video.mp4" type="video/mp4">
</video>2. GIF와 같은 효과를 위한 속성 조합
완벽한 GIF 대체를 위해서는 여러 속성을 조합해야 했습니다:
<video
playsinline
autoplay
loop
muted
class="video-element"
>
<source src="video.mp4" type="video/mp4">
</video>각 속성의 역할:
playsinline: iOS에서 페이지 내 재생autoplay: 자동 재생 활성화loop: 반복 재생muted: 음소거 (자동 재생을 위해 필수)
관련 스타일:
.video-element {
width: 100%;
max-width: 720px;
/* 필요한 경우 object-fit 속성 추가 */
object-fit: cover;
}추가 고려사항 📝
1. 자동 재생 정책
- 대부분의 모바일 브라우저에서는 음소거된 상태에서만 자동 재생이 가능
muted속성이 없으면 자동 재생 정책에 의해 차단될 수 있음
2. 성능과 데이터 사용량
- 동영상 파일 크기 최적화 필요
- 필요한 경우 모바일 환경에서는 더 낮은 해상도의 동영상 제공 고려
<video playsinline autoplay loop muted>
<source src="high-quality.mp4" type="video/mp4" media="(min-width: 720px)">
<source src="low-quality.mp4" type="video/mp4">
</video>3. 브라우저 호환성
- Safari (iOS):
playsinline속성 필수 - Chrome (Android): 대부분의 속성이 잘 동작
- Samsung Internet: Chrome과 유사한 동작
마치며 🌱
모바일 환경에서 동영상을 다룰 때는 생각보다 많은 요소들을 고려해야 합니다. 특히 iOS의 경우 playsinline 속성이 필수적이며, 자동 재생을 위해서는 반드시 음소거 상태여야 한다는 점을 알게되었고,
이러한 경험을 통해 모바일 웹 개발에서는 각 플랫폼의 특성을 이해하고, 그에 맞는 해결 방법을 찾는 것이 중요하다는 것을 알게 되었습니다.
참고 자료 🔗
안녕하세요 😚