클릭 투 플레이 <iframe>

웹 사이트나 블로그를 제작할 때, 페이지에 영상을 삽입해야 하는 경우가 종종 있습니다.

일반적으로 유튜브 영상을 포함해 대부분의 영상 삽입에는 <iframe> 태그를 사용하셨을 것입니다.

 

영상 한두 개 정도는 큰 문제가 없을 수 있지만, 영상이 여러 개일 경우 페이지 성능에 영향을 미칠 수 있습니다.

이러면 페이지 로딩 시간이 길어지고, 페이지에 따라서는 반응 속도가 느려져 렉이 걸린 것처럼 보이기도 합니다.

 

혹시 다른 사이트나 블로그를 보면서 이미지를 클릭했더니 영상으로 바뀌는 것을 본 적이 있으신가요?

만약 본 적이 있다면 "왜 이렇게 했지?"라고 궁금해하거나 "오~ 좀 있어 보이네"라고 생각했을 수도 있습니다.

 

이러한 방식은 페이지 성능을 최적화하고 사용자 경험을 향상하기 위한 방법 중 하나입니다.

오늘은 이러한 문제를 해결하는 데 유용한 <iframe> 태그의 srcdoc 속성에 대해 알아보겠습니다.

 

 

srcdoc 속성이란?

srcdoc 속성은 <iframe> 태그의 HTML5 속성으로, <iframe> 내부에 직접 HTML 콘텐츠를 삽입할 수 있게 해 줍니다.

이를 통해 외부 URL을 로드하지 않고도 즉시 콘텐츠를 표시할 수 있으며, 페이지 로딩 속도를 개선할 수 있습니다.

한마디로 영상을 로딩하기 전 사용되는 placeholder 콘텐츠라고 생각할 수 있습니다.

 

아래는 이해를 돕기 위한 샘플코드입니다.

<iframe srcdoc="<style>...</style><div>...</div>"></iframe>

srcdoc 속성의 장점

srcdoc 속성의 장점 중 하나는 빠른 로딩 시간입니다.

외부 리소스를 로딩하는 대신, 주어진 HTML을 삽입하기 때문에 로딩 속도가 빨라집니다.

 

srcdoc을 사용하면 페이지 로딩 시 영상은 로딩되지 않습니다.

처음부터 영상이 로딩되지 않아 다운로드되는 리소스양을 줄일 수 있습니다.

아래는 로컬에서 srcdoc을 사용했을 때와 사용하지 않았을 때를 비교한 결과입니다.

※로컬에서 테스트했기 때문에 실제로 서버에 배포했을 때 어느 정도 차이가 있을 수 있습니다.

 

테스트 조건:

• VSCode에서 LiveServer 사용
• 페이지에 <iframe> 하나만 사용
• HTML 문서에 기본 HTML 마크업과 <iframe> 하나만 사용
• 각 테스트 조건에서 페이지를 3번 새로고침 해서 얻은 평균값을 사용

	리퀘스트	리소스 다운로드 사이즈	페이지 로딩 시간
srcdoc 사용 했을때	4	73.7 kB	24ms
srcdoc 사용 안했을때	31	3.9 MB	2.73s

결과에서 볼 수 있듯이 srcdoc을 사용했을 때 페이지 로딩 시간이 현저히 빨랐고 다운로드된 리소스는 없었습니다.

4개의 리퀘스트는 HTML, CSS, 이미지, 그리고 LiveServer의 websocket입니다.

이 4개의 기본 리퀘스트를 배재한다면 srcdoc을 사용했을 때 리퀘스트는 0개, 사용하지 않았을 때는 27개입니다.

 

다른 장점은 디자인 면에서 동일한 스타일을 적용할 수 있다는 것입니다.

보통 삽입된 영상의 디자인은 그다지 중요하지 않지만, 만약 본인의 사이트나 블로그의 브랜딩 스타일을 중요시하는 분들에게는 편리한 기능입니다.

 

아래는 디자인을 적용하는 두 가지 방법의 샘플코드입니다.

<!-- <style> 태그 사용하기 -->
<iframe srcdoc="<style>...</style>"></iframe>

<!-- <link> 태그 사용하기 -->
<iframe srcdoc="<link rel='stylesheet' href='style.css'>"></iframe>

자세한 샘플은 Codepen에서 확인할 수 있습니다.

 

접근성

이 방법으로 영상을 삽입할 때 접근성을 높이는 방법은 <iframe>에 title 속성을 추가하는 것입니다.

추가적으로 srcdoc의 콘텐츠에도 접근성을 높이는 속성이나 HTML을 사용하면 더 좋습니다.

아래는 접근성을 최대화한 샘플 코드입니다.

<iframe
      src="https://www.youtube.com/embed/phuiiNCxRMg"
      title="aespa Supernova Music Video"
      frameborder="0"
      srcdoc="<link rel='stylesheet' href='style.css'>
		<a href='https://www.youtube.com/embed/phuiiNCxRMg?autoplay=1'>
		  <img src='https://i3.ytimg.com/vi/phuiiNCxRMg/maxresdefault.jpg' 
          		alt='aespa - Supernova MV'>
        	</a>"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
      			gyroscope; picture-in-picture; web-share"
      allowfullscreen
      load="lazy"></iframe>

<iframe>에 title 속성을 사용해서 스크린 리더가 읽을 수 있게 합니다.

스크린 리더에 따라서 title 속성의 값이 인지 되기도, 안되기도 합니다.

srcdoc의 <img>에 alt 속성을 사용해서 스크린 리더가 읽을 수 있게 합니다.

---

오늘은 <iframe> 태그의 srcdoc 속성을 사용하는 방법을 알아봤습니다.

여러분의 웹사이트에 적용해 보고 어떤 차이가 있는지 공유해 주세요.

궁금한 점이나 추가로 알고 싶은 내용이 있다면 댓글로 남겨주세요.