반응형 임베드 코드 생성기 (YouTube, Vimeo, Maps, Calendly) | We.Inc
YouTube, Vimeo, Google Maps, Calendly, Spotify, Loom, Google Forms 링크를 붙여 넣으면 반응형 지연 로딩 iframe 코드와 접근성 제목, 실시간 미리보기, 서비스별 개인정보 안내를 제공합니다.
지원되는 서비스의 링크를 붙여 넣고 화면 비율을 선택한 뒤 임베드 제목을 입력하세요. 화면 너비에 맞춰 크기가 조정되고 방문자가 가까이 스크롤할 때만 로드되며 스크린 리더 사용자를 위한 제목이 포함된 iframe 코드를 받을 수 있습니다. 실시간 미리보기에서 결과를 확인하고 각 서비스가 추적할 수 있는 정보와 개인정보 보호 옵션을 안내하는 메모도 볼 수 있습니다. 모든 기능은 브라우저에서 실행됩니다. 입력하거나 업로드한 내용은 We.Inc나 다른 곳으로 전송되지 않습니다.
YouTube 또는 Vimeo 동영상, Google Maps 임베드 링크, Calendly 예약 페이지, Spotify 트랙이나 재생목록, Loom 동영상, Google Form 링크를 붙여 넣으세요.
도구가 서비스를 식별해 해당 서비스의 공식 임베드 주소로 링크를 바꿉니다. 식별할 수 없는 링크는 추측하지 않고 거부합니다.
화면 비율(동영상은 16:9(동영상), 4:3, 1:1(정사각형) 또는 예약 페이지와 양식용 고정 높이)을 선택하고 임베드 내용을 설명하는 제목을 입력하세요.
로딩 방식을 선택하세요. 기본 설정인 지연 로딩을 사용하면 페이지 첫 화면을 느리게 하지 않습니다.
실시간 미리보기를 확인한 뒤 HTML을 복사하세요. 서비스 안내에는 개인정보 또는 쿠키 고지에 포함할 내용이 나와 있습니다.
모든 iframe에 콘텐츠를 설명하는 제목을 넣으세요. 예: “King Street 매장 위치 지도”. 스크린 리더가 제목을 읽어 줍니다.
무거운 임베드는 첫 화면 아래에 두거나 지연 로딩하세요. 임베드마다 다른 사이트의 전체 페이지가 로드됩니다.
예약 위젯, 채팅 위젯, 양식은 내 웹사이트가 아닌 해당 서비스의 제품입니다. 서비스의 약관과 데이터 처리 정책이 적용됩니다.
Google Maps에서는 공유, 지도 퍼가기 순서로 선택한 뒤 src 안의 주소를 복사하세요. 일반 지도 링크는 임베드할 수 없습니다.
자주 묻는 질문
iframe을 반응형으로 만들려면 어떻게 하나요?
컨테이너에 aspect-ratio(예: 16 / 9)와 width: 100%를 설정하고 iframe이 컨테이너를 채우도록 하세요. 구형 사이트에서는 padding-top 기법을 사용했지만 aspect-ratio는 현재 모든 브라우저에서 지원됩니다. 이 도구는 최신 방식을 출력합니다.
어떤 서비스를 지원하나요?
YouTube(Shorts 및 youtu.be 링크 포함), Vimeo, Google Maps 임베드 링크, Calendly, Spotify, Loom, Google Forms를 지원합니다. 각 서비스에는 문서화된 임베드 주소가 있습니다. 작동하지 않는 코드를 만들지 않도록 다른 링크는 거부합니다.
지연 로딩은 임베드에 영향을 주나요?
아니요. loading="lazy"는 iframe이 페이지의 보이는 영역 가까이에 올 때만 브라우저가 가져오도록 합니다. 방문자가 해당 위치까지 스크롤하면 평소처럼 로드됩니다.
We.Inc에서 예약이나 채팅 기능을 제공하나요?
아니요. Calendly 같은 도구는 해당 서비스에 별도로 가입해 사용하는 제품입니다. 이 도구는 페이지에 위젯을 표시할 코드만 만듭니다.
Google Maps 링크가 작동하지 않는 이유는 무엇인가요?
일반 maps.google.com 및 goo.gl 링크는 임베드를 차단합니다. Google Maps에서 장소를 열고 공유, 지도 퍼가기를 선택한 뒤 표시된 코드의 src 부분에 있는 주소를 붙여 넣으세요.
임베드가 방문자에게 미치는 영향
임베드는 다른 회사 페이지를 보여 주는 작은 창입니다. 해당 회사의 스크립트를 불러오고 쿠키를 설정할 수 있으며 페이지 용량을 늘립니다. 필요한 경우가 많지만 선택적으로 사용해야 합니다. 첫 화면 아래의 임베드는 지연 로딩하고, 개인정보 보호 모드가 있으면 사용하며, 개인정보 처리방침에 제3자 임베드를 안내하세요.
접근성을 고려한 임베드
스크린 리더는 iframe 제목을 읽습니다. 제목이 없으면 방문자는 “프레임”이라는 말만 듣게 됩니다. 설명이 명확한 제목, 임베드 아래의 동일한 콘텐츠로 연결되는 텍스트 링크, 동영상 자막을 제공하면 누구나 임베드 콘텐츠를 이용할 수 있습니다.