웹사이트에 Google 설문지를 삽입하는 방법

2026년 7월 업데이트 · 9분 소요

방문자를 다른 사이트로 보내 설문지를 작성하게 하면 그 과정에서 일부를 잃게 됩니다. Google 설문지를 페이지에 직접 삽입하면 사람들이 맥락을 벗어나지 않게 됩니다 — 연락처 양식, 이벤트 등록, 피드백 위젯 등 우회로가 아니라 사이트의 일부처럼 느껴지길 원하는 모든 경우에 유용합니다. Google은 삽입 코드를 무료로 제공합니다. 이를 잘 활용하는 방법을 알아보세요.

기본 제공 삽입 코드 가져오기

1. 설문지를 열고 오른쪽 상단의 보내기를 클릭합니다.
2. 대화상자에서 < > 아이콘(HTML 삽입)을 클릭합니다.
3. Google이 다음과 같은 iframe 코드를 생성합니다:

<iframe src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true" width="640" height="921" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

4. 복사를 클릭한 뒤, 사이트가 원시 HTML을 허용하는 곳에 그 코드를 붙여넣습니다.

너비와 높이 조정하기

Google이 생성하는 기본 크기는 합리적인 추정치이지만 정확한 경우는 드뭅니다. 코드에서 두 숫자를 직접 편집하세요.

• 너비 — 페이지의 콘텐츠 열 너비에 맞게 설정하세요. 흔한 방법은 width="100%"를 감싸는 컨테이너의 max-width와 함께 사용해, 설문지가 고정된 픽셀 크기가 아니라 페이지에 맞춰 크기가 조절되도록 하는 것입니다.
• 높이 — 문제를 일으키는 값입니다. Google 설문지는 질문을 추가하거나 제거해도 iframe 크기를 자동으로 조정하지 않으므로, 설문지가 높이 값보다 길면 아래쪽이 잘리고 방문자는 제출 버튼을 찾기 위해 작은 상자 안에서 스크롤해야 합니다. 확신이 서지 않으면 필요하다고 생각하는 것보다 눈에 띄게 더 높게 설정하세요 — 짧은 설문지 아래에 200~300픽셀의 여백이 남는 것이 긴 설문지에서 제출 버튼이 잘리는 것보다 훨씬 사소한 문제입니다.

WordPress에 삽입하기

사용자 지정 HTML 블록(블록 편집기)이나 HTML 모드의 텍스트 위젯(클래식 편집기)을 추가하고 iframe 코드를 그대로 붙여넣으세요. WordPress는 이를 그대로 렌더링합니다 — 플러그인이 필요 없으며, Google 설문지를 "가져오는" 양식 플러그인은 이런 간단한 삽입에는 불필요합니다.

Squarespace에 삽입하기

페이지 편집 중 블록 메뉴에서 코드 블록을 페이지에 추가하고 iframe HTML을 붙여넣은 뒤 저장하세요. Squarespace의 코드 블록은 이런 원시 삽입을 제한 없이 받아들이지만, 설문지가 열을 벗어나지 않도록 블록의 너비 설정을 페이지 그리드와 비교해 확인하세요.

Wix에 삽입하기

Wix는 추가 패널에서 삽입 > 위젯 삽입("HTML iframe") 요소를 사용해야 하며, 열리는 설정 패널에 코드를 붙여넣습니다. WordPress나 Squarespace와 달리 Wix는 삽입된 HTML을 자체 iframe 래퍼 안에서 렌더링하므로, 코드의 높이 값을 편집하는 것 외에도 캔버스에서 요소의 크기를 조정해야 할 수 있습니다.

일반 HTML 페이지에 삽입하기

직접 코딩하는 페이지라면, 설문지를 표시하고 싶은 위치의 본문에 iframe 코드를 그대로 붙여넣으면 됩니다 — 특별한 처리는 필요 없습니다. 넓은 화면에서 설문지가 가장자리부터 가장자리까지 늘어나지 않도록 max-width가 있는 컨테이너 div로 감싸는 것이 좋습니다.

자주 발생하는 문제

1. 설문지 아래쪽이 잘려 보입니다. 거의 항상 높이 문제입니다 — 위의 조정 내용을 참고하세요. 제출 버튼과 나타날 수 있는 "필수" 오류를 포함한 전체 설문지가 내부 스크롤바 없이 맞을 때까지 높이 값을 늘리세요.
2. 삽입한 설문지가 모바일에서 반응형으로 보이지 않습니다. 고정된 픽셀 너비는 작은 화면에서 줄어들지 않습니다. iframe에 width="100%"를 설정하고 부모 요소의 CSS max-width로 상한을 제어해, 휴대폰에서 자연스럽게 축소되도록 하세요.
3. 설문지가 빈 화면으로 로드되거나 "연결이 거부되었습니다" 오류가 표시됩니다. 대개 삽입된 페이지가 타사 iframe을 차단하는 네트워크나 CMS 프록시를 통해 제공되고 있다는 뜻입니다. 직접 관리한다면 사이트의 콘텐츠 보안 정책 설정을 확인하세요. 제한적인 frame-src 규칙이 Google 도메인을 조용히 차단할 수 있습니다.
4. 설문지가 "Loading…"만 표시하고 끝나지 않습니다. 설문지의 공유 설정이 링크를 가진 모든 사람에게 보기를 허용하는지 확인하세요 — 특정 사람이나 조직으로만 제한되어 있다면, 공개 페이지에 삽입된 iframe은 직접 링크와 마찬가지로 외부 방문자에게 로드되지 않습니다.
5. 스타일이 페이지의 나머지 부분과 일관되지 않아 보입니다. Google 설문지는 iframe 안에서 자체 글꼴과 색상을 렌더링하며 사이트의 CSS를 상속받지 않습니다 — iframe 외부에서 설문지의 내부 모양을 다시 꾸밀 수 있는 지원되는 방법은 없고, 그 주변의 컨테이너만 조정할 수 있습니다.

삽입과 페이지 로드 성능

삽입된 Google 설문지는 페이지의 나머지 부분과 별도로 자체 iframe 콘텐츠를 로드하는데, 이는 추가 네트워크 요청과 설문지가 나타나기 전 약간의 지연을 더합니다 — 보통 눈에 띌 정도는 아니지만, 페이지 속도를 점검한다면 알아둘 가치가 있습니다. 설문지가 스크롤해야 보이는 위치에 있다면, iframe 태그에 loading="lazy"를 추가해 지연 로딩을 고려하세요. 그러면 방문자가 즉시 보는 콘텐츠와 대역폭을 두고 경쟁하지 않습니다. 이는 모든 최신 브라우저가 지원하는 네이티브 HTML 속성이며 별도의 스크립트가 필요 없습니다.

접근성 고려사항

설문지 콘텐츠가 Google의 자체 iframe 안에 있기 때문에, 화면 읽기 프로그램 라벨, 키보드 탐색, 포커스 순서 같은 접근성은 페이지에서 직접 제어할 수 있는 것이 아니라 Google 설문지 자체가 결정합니다. 사용자 측에서 개선할 수 있는 한 가지는 iframe 태그에 설명적인 title 속성을 추가하는 것입니다(예: title="이벤트 등록 양식"). 화면 읽기 프로그램은 삽입된 콘텐츠에 들어가기 전에 이를 안내합니다. Google 설문지가 기본적으로 얼마나 접근성이 좋은지에 대한 더 넓은 시각은 Google 설문지 접근성 가이드를 참고하세요.

삽입 vs. 그냥 링크 걸기

삽입은 방문자를 페이지에 머물게 하고 사이트 주변 디자인과 어울리며, 낯선 도메인으로 리디렉션될 때 발생하는 이탈을 줄일 수 있습니다. 연락처 양식이나 빠른 피드백 위젯처럼 전용 페이지에 배치된 짧은 설문지에 더 나은 선택입니다.

외부 링크는 설정이 더 간단하고(높이 조정 필요 없음), 설문지에 완전하고 제약 없는 레이아웃을 제공하며, 길거나 여러 섹션으로 된 설문지가 좁은 iframe 안에서 만들어내는 상자 안 스크롤 느낌을 피할 수 있습니다. 설문지가 길거나, 파일 업로드가 있거나, 그리드 질문을 사용한다면, 직접 링크를 거는 것이 — Google 설문지 공유하기 가이드를 참고하세요 — 보통 응답자에게 더 편안한 경험입니다.

연락처 양식으로 삽입하기

삽입은 특히 비즈니스나 포트폴리오 사이트에서 Google 설문지를 무료 연락처 양식으로 바꾸는 데 인기가 있습니다 — 백엔드도, 이메일 서버 설정도 필요 없고, 응답은 언제든 확인할 수 있는 Google 시트에 바로 도착합니다. 그것이 구체적인 목표라면, 웹사이트 연락처 양식으로 Google 설문지 사용하기 전용 가이드에서 기본 삽입 위에 추가할 만한 필드 선택과 스팸 감소 설정을 다룹니다.

자주 묻는 질문

관련 가이드

• Google 설문지 공유하는 방법
• 연락처 양식으로 Google 설문지 사용하기
• Google 설문지 만드는 방법
• WordPress에 Google 설문지 삽입하기, 심화편
• Google 설문지 접근성 가이드