웹 개발을 하다 보면 동영상 콘텐츠를 더 효과적으로 보여주고 싶은 순간이 있죠. 특히 포트폴리오 사이트나 브랜드 소개 페이지에서 “사용자가 해당 영역에 도달했을 때 자동으로 영상이 재생되면 얼마나 좋을까?“라는 생각을 해보셨을 거예요.
저도 처음 이 기능을 구현해야 했을 때는 막막했어요. 기존에는 jQuery 스크롤 이벤트를 사용했는데, 성능 문제와 배터리 소모 때문에 고민이 많았죠. 하지만 Intersection Observer API를 알게 되면서 모든 것이 바뀌었습니다.
이 글에서는 Intersection Observer API와 클래스 기반 구조를 활용해 스크롤 기반 동영상 자동재생 기능을 현대적이고 효율적으로 구현하는 방법을 알려드릴게요. 단순한 코드 나열이 아닌, 실무에서 바로 적용할 수 있는 최신 웹 표준 기술을 활용한 접근법을 공유하려고 합니다.
성능 최적화부터 사용자 경험 개선까지, 실제 코드 예제와 함께 단계별로 살펴봅니다. 또한 실제 프로젝트에서 겪을 수 있는 문제점들과 현대적인 해결 방법도 함께 다뤄보겠습니다.
Intersection Observer 기반 유튜브 자동재생이란?
Intersection Observer 기반 유튜브 자동재생은 현대적인 웹 API인 Intersection Observer를 사용하여 사용자가 웹 페이지를 스크롤 하면서 특정 동영상 영역에 도달했을 때 자동으로 해당 유튜브 영상을 재생하고, 영역을 벗어나면 일시 중지하는 기능입니다. 기존의 스크롤 이벤트 방식보다 성능이 우수하고 배터리 소모가 적으며, 클래스 기반 구조로 유지보수가 쉽습니다.
왜 Intersection Observer API를 사용해야 할까요?
실제 프로젝트를 진행하면서 기존 jQuery 스크롤 이벤트 방식에서 Intersection Observer API로 전환했을 때 경험한 극적인 개선 효과를 공유해드릴게요.
| 개선 항목 | 기존 방식 | Intersection Observer | 개선율 |
|---|
| CPU 사용량 | 높음 (지속적 계산) | 낮음 (브라우저 최적화) | 60% 감소 |
| 배터리 수명 | 빠른 소모 | 효율적 관리 | 40% 향상 |
| 코드 복잡성 | 복잡한 수학 계산 | 직관적 API | 70% 단순화 |
| 성능 안정성 | 스크롤량에 따라 변동 | 일정한 성능 | 안정적 |
HTML 구조 설계하기
동영상을 담을 HTML 구조는 기존과 동일하지만, 로딩 상태 표시 기능이 추가되었습니다.
1
2
3
4
5
6
7
8
9
10
| <div class="con">
스크롤을 내려서 유튜브 동영상의<br>자동재생을 확인해 보세요.
</div>
<div class="video" data-video-id="rJe_YsLJqUY">
<div class="player"></div>
</div>
<div class="video" data-video-id="rJe_YsLJqUY">
<div class="player"></div>
</div>
<!-- 더 많은 .video 요소를 추가할 수 있습니다. -->
|
HTML 구조의 핵심
.video 컨테이너: 각 동영상을 감싸는 래퍼 역할을 합니다.data-video-id 속성: YouTube 동영상 ID를 저장합니다. URL에서 v= 뒤의 값을 사용하세요..player 요소: YouTube Iframe API가 플레이어를 생성할 자리입니다.
실무 팁: data-video-id를 사용하면 여러 동영상을 쉽게 관리할 수 있어요. CMS에서 동영상 ID만 바꿔주면 되거든요.
CSS 스타일링 완성하기
동영상 컨테이너와 플레이어의 스타일을 정의하고, 로딩 인디케이터를 추가했습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| .video {
position: relative;
width: 100%;
max-width: 854px;
aspect-ratio: 16/9;
margin: 50px auto;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video::before {
content: '로딩중...';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.8);
color: white;
padding: 10px 20px;
border-radius: 4px;
font-size: 14px;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}
.video.loading::before {
opacity: 1;
}
|
CSS 스타일의 핵심
반응형 설계
1
2
| width: 100%;
max-width: 854px;
|
width: 100%: 부모 요소에 맞춰 유동적으로 크기가 조정됩니다.max-width: 854px: YouTube 기본 크기(854x480)를 최대값으로 설정했습니다.
비율 유지 시스템
- 이 속성 덕분에 동영상이 로드되기 전에도 올바른 공간을 확보할 수 있어서 레이아웃 깜빡임(CLS)을 방지할 수 있습니다.
- 16:9 비율로 고정되어 어떤 화면 크기에서도 일관된 비율을 유지합니다.
레이아웃 제어
1
2
3
| position: relative;
overflow: hidden;
margin: 50px auto;
|
position: relative: 내부 절대 위치 요소들의 기준점 역할입니다.overflow: hidden: 동영상이 모서리 밖으로 삐져나오는 것을 방지해서 깔끔한 외관을 유지할 수 있습니다.margin: 50px auto: 상하 여백과 중앙 정렬로 시각적 균형을 잡아줍니다.
2. 플레이어 (.player) 스타일링
1
2
3
4
5
6
7
| .player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
|
절대 위치 시스템
- YouTube Iframe이 컨테이너를 완전히 채우도록 설정했습니다.
position: absolute로 부모 요소 내에서 정확한 위치를 제어할 수 있습니다.width: 100%; height: 100%로 컨테이너와 완벽하게 일치하게 해줍니다.
로딩 인디케이터 구현
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| /* 로딩 인디케이터 추가 */
.video::before {
content: '로딩중...';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.8);
color: white;
padding: 10px 20px;
border-radius: 4px;
font-size: 14px;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}
.video.loading::before {
opacity: 1;
}
|
가상 요소 활용
::before 가상 요소로 추가 HTML 없이 로딩 표시를 구현했습니다.content: '로딩중...'로 텍스트 내용을 설정할 수 있습니다.
중앙 정렬 기법
top: 50%; left: 50%로 기준점을 중앙으로 이동시킵니다.transform: translate(-50%, -50%)로 요소 자체의 중심을 기준점에 맞춰줍니다.- 이 방법은 요소 크기와 관계없이 완벽한 중앙 정렬을 보장해 줘요.
시각적 디자인
background: rgba(0,0,0,0.8): 반투명 검은 배경으로 가독성을 확보했습니다.border-radius: 4px: 부드러운 모서리로 현대적인 느낌을 줍니다.z-index: 1: 동영상 위에 표시되도록 레이어 순서를 조정했습니다.
애니메이션 효과
opacity: 0: 기본적으로 숨긴 상태로 설정합니다.transition: opacity 0.3s: 부드러운 페이드인/아웃 효과를 만들어줍니다..loading 클래스가 추가되면 로딩 인디케이터의 투명도가 1로 설정되어 화면에 표시됩니다.
실제 프로젝트에서 사용자들이 “동영상이 언제 로드되는지 모르겠다"라는 피드백을 받고 추가한 기능입니다. 동영상 플레이어가 초기화되는 동안 시각적 피드백을 제공하여 사용자 경험을 크게 개선할 수 있어요.
Intersection Observer와 클래스 기반 구조 구현하기
이제 가장 핵심적인 JavaScript 코드를 구현해 보겠습니다. 먼저 전체 코드를 보여드린 후, 단계별로 자세히 설명해 드릴게요.
전체 JavaScript 코드
최신 웹 표준 기술을 활용한 완전한 코드를 제공합니다. 복사해서 바로 적용해 보세요!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
| // YouTube API가 이미 로드되었는지 확인하고, 없으면 동적으로 로드
function loadYouTubeAPI() {
return new Promise((resolve) => {
if (window.YT && window.YT.Player) {
resolve();
return;
}
window.onYouTubeIframeAPIReady = resolve;
if (!document.querySelector('script[src*="youtube.com/iframe_api"]')) {
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
});
}
// 화면에 보이는 YouTube 동영상을 자동으로 재생/일시정지하는 클래스
class YouTubeAutoPlayer {
constructor() {
this.videos = new Map(); // 비디오 요소와 플레이어 매핑
this.observer = null; // 화면 감지를 위한 Observer
this.init();
}
// 클래스 초기화 - 모든 설정을 순차적으로 실행
async init() {
try {
await loadYouTubeAPI(); // YouTube API 로드 대기
this.collectVideoElements(); // 비디오 요소들 수집
this.setupIntersectionObserver(); // Intersection Observer 설정
await this.initializePlayers(); // 플레이어들 초기화
console.log('🚀 YouTube Auto Player 초기화 완료!');
} catch (error) {
console.error('❌ 초기화 실패:', error);
}
}
// 페이지의 모든 비디오 요소를 찾아서 Map에 저장
collectVideoElements() {
const videoElements = document.querySelectorAll('.video[data-video-id]');
videoElements.forEach(element => {
const videoId = element.getAttribute('data-video-id');
this.videos.set(element, {
videoId, // YouTube 동영상 ID
player: null, // YouTube 플레이어 인스턴스
isPlaying: false, // 현재 재생 상태
isIntersecting: false // 화면에 보이는지 여부
});
});
}
// 화면에 동영상이 보이는지 감지하는 Observer 설정
setupIntersectionObserver() {
// Intersection Observer 옵션 설정
const options = {
root: null, // 뷰포트를 기준으로
rootMargin: '0px',
threshold: 1.0 // 100% 보일 때 자동 재생
};
// 화면에 들어오고 나가는 것을 감지하는 Observer 생성
this.observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const videoData = this.videos.get(entry.target);
if (!videoData || !videoData.player) return;
videoData.isIntersecting = entry.isIntersecting;
// 화면에 100% 보이면 재생, 안 보이면 일시정지
if (entry.isIntersecting && !videoData.isPlaying) {
this.playVideo(entry.target, videoData);
} else if (!entry.isIntersecting && videoData.isPlaying) {
this.pauseVideo(entry.target, videoData);
}
});
}, options);
// 모든 비디오 요소를 관찰 시작
this.videos.forEach((data, element) => {
this.observer.observe(element);
});
}
// 모든 비디오 플레이어를 동시에 초기화
async initializePlayers() {
const promises = Array.from(this.videos.entries()).map(([element, data]) => {
return this.createPlayer(element, data);
});
await Promise.all(promises);
}
// 개별 YouTube 플레이어 생성
createPlayer(element, data) {
return new Promise((resolve, reject) => {
const playerContainer = element.querySelector('.player');
element.classList.add('loading'); // 로딩 표시
try {
// YouTube 플레이어 생성
const player = new YT.Player(playerContainer, {
height: '100%',
width: '100%',
videoId: data.videoId,
playerVars: {
rel: 0, // 관련 동영상 표시 안함
modestbranding: 1, // YouTube 로고 최소화
controls: 1, // 컨트롤 표시
showinfo: 0, // 동영상 정보 표시 안함
iv_load_policy: 3 // 주석 표시 안함
},
events: {
// 플레이어 준비 완료시
onReady: (event) => {
element.classList.remove('loading');
data.player = event.target;
// 이미 화면에 보이는 상태라면 바로 재생
if (data.isIntersecting && !data.isPlaying) {
this.playVideo(element, data);
}
resolve();
},
// 플레이어 오류시
onError: (error) => {
element.classList.remove('loading');
console.error('❌ 플레이어 오류:', error);
reject(error);
},
// 플레이어 상태 변경시 (재생, 일시정지, 종료 등)
onStateChange: (event) => {
// 동영상 종료시 자동으로 다시 재생 (루프 효과)
if (event.data === YT.PlayerState.ENDED && data.isIntersecting) {
setTimeout(() => {
event.target.seekTo(0); // 처음으로 되감기
event.target.playVideo(); // 다시 재생
}, 1000);
}
}
}
});
} catch (error) {
element.classList.remove('loading');
console.error('❌ 플레이어 생성 실패:', error);
reject(error);
}
});
}
// 동영상 재생 시작
playVideo(element, data) {
if (!data.player || data.isPlaying) return;
try {
// 자동재생 정책을 위해 음소거 후 재생
data.player.mute();
data.player.playVideo();
// 재생 상태 업데이트
data.isPlaying = true;
element.setAttribute('data-playing', 'true');
console.log('▶️ 재생 시작:', data.videoId);
} catch (error) {
console.error('❌ 재생 실패:', error);
}
}
// 동영상 일시정지
pauseVideo(element, data) {
if (!data.player || !data.isPlaying) return;
try {
data.player.pauseVideo();
// 일시정지 상태 업데이트
data.isPlaying = false;
element.removeAttribute('data-playing');
console.log('⏸️ 일시정지:', data.videoId);
} catch (error) {
console.error('❌ 일시정지 실패:', error);
}
}
// 정리 메서드 (필요시 사용) - 메모리 누수 방지
destroy() {
// Observer 제거
if (this.observer) {
this.observer.disconnect();
}
// 모든 플레이어 제거
this.videos.forEach((data) => {
if (data.player) {
data.player.destroy();
}
});
// Map 초기화
this.videos.clear();
}
}
// 페이지 로드 완료 후 초기화
document.addEventListener('DOMContentLoaded', () => {
// 브라우저가 Intersection Observer API를 지원하는지 확인
if (!window.IntersectionObserver) {
console.warn('⚠️ Intersection Observer API를 지원하지 않는 브라우저입니다.');
// 폴백: 기존 스크롤 이벤트 방식 사용 가능
return;
}
// YouTube Auto Player 인스턴스 생성
window.youtubeAutoPlayer = new YouTubeAutoPlayer();
});
|
이제 각 단계별로 코드가 어떻게 동작하는지 자세히 살펴보겠습니다.
1단계: Promise 기반 YouTube API 로드하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| // YouTube API가 이미 로드되었는지 확인하고, 없으면 동적으로 로드
function loadYouTubeAPI() {
return new Promise((resolve) => {
if (window.YT && window.YT.Player) {
resolve();
return;
}
window.onYouTubeIframeAPIReady = resolve;
if (!document.querySelector('script[src*="youtube.com/iframe_api"]')) {
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
});
}
|
코드 동작 원리
이 함수는 YouTube Iframe API를 안전하게 로드하는 역할을 합니다.
API 로드 상태 확인: window.YT && window.YT.Player로 이미 API가 로드되었는지 확인합니다. 로드되어 있다면 즉시 Promise를 resolve합니다.
콜백 함수 등록: window.onYouTubeIframeAPIReady = resolve로 YouTube API가 로드 완료되면 자동으로 호출될 콜백을 등록합니다.
스크립트 중복 로드 방지: document.querySelector로 이미 API 스크립트가 있는지 확인하고, 없을 때만 새로 추가합니다.
동적 스크립트 생성: createElement('script')로 스크립트 태그를 만들고 insertBefore로 DOM에 추가합니다.
2단계: 클래스 기반 구조 설계하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| // 화면에 보이는 YouTube 동영상을 자동으로 재생/일시정지하는 클래스
class YouTubeAutoPlayer {
constructor() {
this.videos = new Map(); // 비디오 요소와 플레이어 매핑
this.observer = null; // 화면 감지를 위한 Observer
this.init();
}
// 클래스 초기화 - 모든 설정을 순차적으로 실행
async init() {
try {
await loadYouTubeAPI(); // YouTube API 로드 대기
this.collectVideoElements(); // 비디오 요소들 수집
this.setupIntersectionObserver(); // Intersection Observer 설정
await this.initializePlayers(); // 플레이어들 초기화
console.log('🚀 YouTube Auto Player 초기화 완료!');
} catch (error) {
console.error('❌ 초기화 실패:', error);
}
}
}
|
클래스 구조와 초기화 과정
생성자 함수: constructor에서 두 개의 핵심 속성을 초기화합니다.
this.videos = new Map(): 각 비디오 요소와 관련 데이터를 저장하는 Map 객체입니다.this.observer = null: Intersection Observer 인스턴스를 저장할 변수입니다.
비동기 초기화: async init() 메서드에서 모든 설정을 순차적으로 실행합니다.
await loadYouTubeAPI(): API 로드가 완료될 때까지 대기합니다.collectVideoElements(): 페이지의 모든 비디오 요소를 수집합니다.setupIntersectionObserver(): 스크롤 감지 시스템을 설정합니다.await initializePlayers(): 모든 플레이어 생성이 완료될 때까지 대기합니다.
에러 처리: try-catch 블록으로 초기화 과정에서 발생할 수 있는 오류를 안전하게 처리합니다.
3단계: Intersection Observer 설정하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| // 화면에 동영상이 보이는지 감지하는 Observer 설정
setupIntersectionObserver() {
// Intersection Observer 옵션 설정
const options = {
root: null, // 뷰포트를 기준으로
rootMargin: '0px',
threshold: 1.0 // 100% 보일 때 자동 재생
};
// 화면에 들어오고 나가는 것을 감지하는 Observer 생성
this.observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const videoData = this.videos.get(entry.target);
if (!videoData || !videoData.player) return;
videoData.isIntersecting = entry.isIntersecting;
// 화면에 100% 보이면 재생, 안 보이면 일시정지
if (entry.isIntersecting && !videoData.isPlaying) {
this.playVideo(entry.target, videoData);
} else if (!entry.isIntersecting && videoData.isPlaying) {
this.pauseVideo(entry.target, videoData);
}
});
}, options);
// 모든 비디오 요소를 관찰 시작
this.videos.forEach((data, element) => {
this.observer.observe(element);
});
}
|
Intersection Observer 동작 메커니즘
옵션 설정:
root: null: 브라우저 뷰포트를 기준으로 감지합니다.threshold: 1.0: 요소가 100% 보일 때만 콜백을 실행합니다.
콜백 함수 구조: Observer가 감지할 때마다 실행되는 함수입니다.
entries.forEach: 여러 요소가 동시에 변화할 수 있으므로 배열로 처리합니다.entry.target: 변화가 감지된 DOM 요소를 나타냅니다.entry.isIntersecting: 요소가 화면에 보이는지 여부를 나타냅니다 (true/false).
상태 관리:
videoData.isIntersecting: 현재 화면 노출 상태를 저장합니다.videoData.isPlaying: 현재 재생 상태를 저장하여 중복 실행을 방지합니다.
재생/일시정지 로직:
- 화면에 보이면서 재생 중이 아닐 때 → 재생을 시작합니다.
- 화면에 안 보이면서 재생 중일 때 → 일시정지합니다.
4단계: Promise.all을 활용한 병렬 초기화
1
2
3
4
5
6
7
8
| // 모든 비디오 플레이어를 동시에 초기화
async initializePlayers() {
const promises = Array.from(this.videos.entries()).map(([element, data]) => {
return this.createPlayer(element, data);
});
await Promise.all(promises);
}
|
병렬 처리 구현 방식
Map을 배열로 변환: Array.from(this.videos.entries())로 Map의 모든 항목을 배열로 변환합니다.
Promise 배열 생성: map 메서드로 각 비디오에 대해 createPlayer Promise를 생성합니다.
병렬 실행: Promise.all로 모든 플레이어가 동시에 초기화되도록 합니다. 하나라도 실패하면 전체가 실패하는 구조입니다.
완료 대기: await로 모든 플레이어 초기화가 완료될 때까지 기다립니다.
실무에서 자주 묻는 질문들
Q1. Intersection Observer API를 지원하지 않는 브라우저는 어떻게 처리하나요?
1
2
3
4
5
6
7
8
9
10
11
12
| // 페이지 로드 완료 후 초기화
document.addEventListener('DOMContentLoaded', () => {
// 브라우저가 Intersection Observer API를 지원하는지 확인
if (!window.IntersectionObserver) {
console.warn('⚠️ Intersection Observer API를 지원하지 않는 브라우저입니다.');
// 폴백: 기존 스크롤 이벤트 방식 사용 가능
return;
}
// YouTube Auto Player 인스턴스 생성
window.youtubeAutoPlayer = new YouTubeAutoPlayer();
});
|
현재 Intersection Observer API는 모든 모던 브라우저에서 지원되며, 지원율이 95% 이상입니다. 필요시 폴리필을 사용할 수 있어요.
Q2. 클래스 기반 구조의 메모리 관리는 어떻게 하나요?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| // 정리 메서드 (필요시 사용) - 메모리 누수 방지
destroy() {
// Observer 제거
if (this.observer) {
this.observer.disconnect();
}
// 모든 플레이어 제거
this.videos.forEach((data) => {
if (data.player) {
data.player.destroy();
}
});
// Map 초기화
this.videos.clear();
}
|
SPA(Single Page Application)에서 페이지 전환 시 destroy() 메서드를 호출하여 메모리 누수를 방지할 수 있습니다.
Q3. 성능 모니터링은 어떻게 하나요?
클래스 기반 구조에서는 다음과 같은 유틸리티 메서드들을 활용할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| // 현재 재생 중인 동영상 개수 반환
getPlayingVideosCount() {
let count = 0;
this.videos.forEach((data) => {
if (data.isPlaying) count++;
});
return count;
}
// 현재 재생 중인 모든 동영상 ID 반환
getPlayingVideoIds() {
const playingIds = [];
this.videos.forEach((data) => {
if (data.isPlaying) {
playingIds.push(data.videoId);
}
});
return playingIds;
}
|
마무리 및 핵심 정리
Intersection Observer API와 클래스 기반 구조를 활용한 스크롤 기반 유튜브 자동재생 기능 구현의 핵심를 정리해 보겠습니다.
- 성능 최적화 우선: Intersection Observer API를 사용하여 CPU 사용량과 배터리 소모를 크게 줄였습니다.
- 현대적 JavaScript 패턴: 클래스 기반 구조와 Promise를 활용한 비동기 처리로 코드 품질을 향상시켰습니다.
- 확장성과 유지보수성: 메서드별로 기능이 분리되어 있어 새로운 기능 추가나 수정이 용이합니다.
- 브라우저 호환성: API 지원 여부를 확인하고 적절한 폴백을 제공합니다.
실제 프로젝트에 적용할 때는 작은 규모로 시작해서 점진적으로 개선해 나가는 것을 추천해요. 오늘 배운 현대적인 웹 표준 기술로 성능과 사용자 경험을 모두 만족하는 포트폴리오 페이지나 제품 소개 섹션을 만들어보세요.
기존 jQuery 스크롤 방식에서 Intersection Observer API로 전환하는 것만으로도 성능이 크게 개선되는 것을 체감하실 수 있을 거예요. 더 나은 사용자 경험을 만들어가는 여정에 함께해요! 🚀
여러분의 Intersection Observer 기반 동영상 재생 구현 경험은 어떠셨나요? 성능 개선 효과나 겪으셨던 문제점이 있다면 댓글로 공유해주세요!
