임베드 코드(Embed Code)는 다른 웹사이트나 애플리케이션에서 콘텐츠를 자신의 웹페이지에 삽입할 수 있도록 제공되는 HTML 코드입니다. 이를 통해 비디오, 이미지, 지도, 소셜 미디어 게시물과 같은 다양한 콘텐츠를 쉽게 보여줄 수 있습니다.
예를 들어, YouTube 비디오를 웹사이트에 삽입하려면 YouTube에서 임베드 코드를 복사해 HTML 문서에 붙여넣으면, 방문자가 직접 비디오를 시청할 수 있습니다. 구글 맵이나 트위터 게시물도 같은 방법으로 추가할 수 있습니다.
비디오
YouTube, Vimeo 등에서 제공하는 비디오는 웹페이지에 쉽게 임베드할 수 있습니다. 이를 통해 사용자는 외부 사이트에 접속하지 않고도 직접 비디오를 시청할 수 있습니다.
주로 사용할 수 있는 비디오 플랫폼은 YouTube 비디오, Vimeo 비디오, 다양한 MP4 비디오 링크 등이 있습니다.
아래는 유튜브 영상을 홈페이지 공유 혹은 퍼가기할 때 사용하는 코드 예제입니다.
Iframely에서 제공하는 Generate responsive embed codes 페이지에 유튜브 영상 링크를 입력하면 쉽게 삽입 코드를 생성할 수 있습니다.
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
<iframe src="https://www.youtube.com/embed/ekr2nIex040?rel=0" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;"></iframe>
</div>오디오
SoundCloud, Spotify 등에서 제공하는 음악과 팟캐스트는 사용자에게 다양한 오디오 콘텐츠를 제공합니다. 임베드 코드를 사용하면 웹페이지 내에서 쉽게 재생할 수 있습니다. 주로 사용할 수 있는 오디오 플랫폼은 SoundCloud 트랙, Spotify 플레이리스트, PodCasts 등이 있습니다.
이미지
Flickr, Instagram 등에서의 이미지를 임베드하면 갤러리 형식으로 웹페이지에 직접 보여줄 수 있습니다. 사용자는 클릭하지 않고도 시각적인 콘텐츠를 감상할 수 있습니다. 주요 이미지 플랫폼은 Flickr 사진 앨범, Instagram 포스트, 자체 업로드한 이미지입니다.
지도
Google Maps는 웹사이트에 특정 위치를 표시할 수 있는 편리한 서비스입니다. 이를 통해 방문자는 해당 위치를 쉽게 확인할 수 있습니다. 주요 사용 예시로는 특정 주소의 구글 맵, 사업장 위치, 관심 장소 마킹 등이 있습니다.
소셜 미디어 게시물
Twitter, Facebook, Instagram에서 개별 게시물을 임베드하면, 최신 소식이나 트렌드를 웹페이지에 직접 보여줄 수 있습니다. 이를 통해 방문자와 소통할 수 있는 좋은 방법입니다. 사용할 수 있는 게시물 유형으로는 특정 트위터 트윗, 페이스북 포스트, 인스타그램 사진이 있습니다.
프레젠테이션
Google Slides, PowerPoint Online 등에서 만든 프레젠테이션을 웹사이트에 임베드하여, 사용자들이 문서 내용을 직접 확인할 수 있도록 할 수 있습니다. 주요 사용 예시는 Google Slides 프레젠테이션, PowerPoint 문서, PDF로 변환한 프레젠테이션입니다.
PDF 문서
Google Drive, Scribd 등에서 제공하는 PDF 문서를 임베드하면, 사용자가 웹페이지에서 직접 파일을 열어보고 읽을 수 있습니다. 이를 통해 다양한 자료를 쉽게 공유할 수 있습니다. 사용할 수 있는 문서 유형으로는 학술 PDF 파일, 프리젠테이션 자료, 매뉴얼 문서 등이 있습니다.
차트 및 데이터 시각화
Google Charts, Tableau 등에서 생성한 차트와 데이터 시각화를 임베드하면, 정보를 시각적으로 쉽게 이해할 수 있도록 돕습니다. 이는 데이터 분석 결과를 공유하는 데 효과적입니다. 사용할 수 있는 차트 유형으로는 Google Charts를 통한 그래프와 Tableau에서의 데이터 시각화가 있습니다.
아래 사이트는 임베드 코드 작성을 쉽게 할 수 있도록 도와주는 서비스입니다.
Embed Responsively
Embed Responsively는 웹 사이트나 블로그 등에서 다양한 소스 코드를 반응형으로 임베드(embed)할 수 있도록 도와주는 무료 온라인 도구입니다.
