iOS Safari 환경에서 Vimeo 영상 재생 실패 해결

최근 프로젝트를 진행하며 PC 크롬에서는 멀쩡히 잘 나오던 Vimeo 영상이 iPhone(iOS)의 Safari와 Chrome에서만 재생되지 않는 이슈를 겪었습니다. 로그인을 비롯한 다른 기능은 문제가 없는데 유독 영상만 나오지 않아 원인을 파악하고 해결한 과정을 정리해 봅니다.

1. 문제 상황

• PC 환경: Chrome, Edge 등 모든 브라우저에서 정상 재생.

• iOS 환경: iPhone의 Safari 및 Chrome에서 영상 영역이 까맣게 나오거나 재생 버튼이 작동하지 않음.

• 특이사항: iOS의 Chrome 역시 Safari와 동일한 WebKit 엔진을 사용하기 때문에 동일한 증상이 발생함.

2. 원인 분석: ITP (Intelligent Tracking Prevention)

문제의 핵심은 iOS와 macOS Safari에 탑재된 ITP(지능형 추적 방지) 기능이었습니다.

왜 재생이 안 되었을까?

• 서드파티 쿠키 차단: Vimeo 플레이어는 iframe 형태로 로드됩니다. 이때 Vimeo는 사용자를 식별하고 재생 상태(세션)를 유지하기 위해 쿠키를 생성하려고 시도합니다.

• 추적자로 간주: Safari의 ITP는 이를 "사용자 추적 행위"로 간주하여 Vimeo가 생성하려는 서드파티 쿠키를 강력하게 차단합니다.

• 권한 획득 실패: 특히 비공개 설정이나 특정 도메인 제한이 걸린 영상의 경우, 사용자를 식별할 수 있는 쿠키가 필수적입니다. 이 쿠키가 차단되니 Vimeo 서버로부터 재생 권한을 얻지 못해 영상이 나오지 않았던 것입니다.

3. 해결 방법: ITP 우회 설정 적용

문제를 해결하기 위해 video-player.tsx 컴포넌트의 Vimeo 로드 로직에 두 가지 설정을 추가했습니다.

A. Do Not Track (dnt=1) 파라미터 추가

Vimeo에게 "우리는 사용자를 추적하지 않을 것이니 추적용 쿠키를 생성하지 마"라고 명시적으로 알려주는 설정입니다.

// src/components/common/video-player.tsx

// 추적 방지 설정을 통해 iOS(ITP) 호환성 향상

const url = new URL(vimeoUrl);
url.searchParams.set("dnt", "1"); 

효과: dnt=1이 설정되면 Vimeo 플레이어는 추적용 쿠키 생성을 시도하지 않습니다. 결과적으로 Safari의 ITP 차단 정책에 걸리지 않게 되어 영상이 정상적으로 로드됩니다.

B. Referrer Policy 변경

Vimeo 영상이 특정 도메인에서만 재생되도록 허용(Domain Whitelist)되어 있는 경우, 요청이 어디서 왔는지 정확히 알려줘야 합니다.

// iframe 태그 속성 추가
referrerPolicy="strict-origin-when-cross-origin"

• 기존: origin (도메인 정보만 보냄)

• 변경: strict-origin-when-cross-origin

이유 : 보안을 유지하면서도 Vimeo 서버가 "우리 서비스 도메인"에서 온 요청임을 정확히 식별할 수 있게 도와줍니다. 이를 통해 도메인 제한이 걸린 영상도 안전하게 재생할 수 있습니다.

4. 마치며

iOS 환경은 보안 및 개인정보 보호 정책이 매우 엄격하기 때문에, 서드파티 서비스를 연동할 때 예상치 못한 이슈가 발생하곤 합니다.

이번 이슈는 ITP의 작동 원리를 이해하고, Vimeo 측에서 제공하는 dnt 옵션을 활용해 해결할 수 있었습니다. 혹시 비슷한 문제를 겪고 계신 프론트엔드 개발자분들께 도움이 되길 바랍니다.

📝 한 줄 요약
"iOS Safari의 ITP 정책으로 인해 차단되는 서드파티 쿠키 문제를 dnt=1 파라미터 추가를 통해 해결하여 영상 재생 호환성을 확보했습니다."