문의 페이지(Contact Page): 구글 폼으로 뚝딱? 만들기

블로그 개발

문의 페이지(Contact Page): 구글 폼으로 뚝딱? 만들기

임하부인 2025. 3. 30. 23:30

안녕하세요, 여러분!

블로그를 운영하다 보면 "문의하기" 페이지는 필요할 때가 있지요? 저도 구글 애드센스 승인을 받기 위해 알아보니 문의 페이지가 필수 항목 중 하나라고 하더군요. HTML로 메일 프로그램이나 데이터 베이스와 연동할 수도 있고 여러가지 구현 방법이 있는데요, 저는 간단하고 효율적인 구글 폼을 활용하기로 했어요. 오늘은 이 방법을 알려드릴게요!

구글폼은 복잡하고 어려운 서버 설정 없이도 꽤 그럴싸한 문의 페이지를 만들 수 있어요.😊 "문의 페이지, 별거 아니네" 할 만큼 쉽게 이해가 되실 거예요. 자, 그럼 함께 시작해 볼까요?

1. 문의 페이지란 무엇이고 왜 중요한가요?

문의 페이지는 웹사이트에서 방문자와 소통하는 다리 같은 존재예요. 예를 들어, 고객이 제품에 대해 궁금한 점이 있거나, 블로그 독자가 의견을 남기고 싶을 때 문의 페이지가 없으면 불편하죠. 이걸 잘 만들면 사용자 경험이 좋아지고, 사이트 신뢰도도 올라간답니다. 그러니 어떤 도구를 쓰든 "쉽고, 빠르고, 관리하기 편한" 문의 페이지를 만드는 게 핵심이에요.

오늘 다룰 두 가지 방법은 구글 폼과 HTML 폼이에요. 각각의 특징과 장단점을 비교하고, 단점을 보완할 해결책까지 자세히 알려드릴게요.

2. HTML 폼으로 문의 페이지 만들기

2-1. HTML 폼이란?

HTML 폼은 웹사이트에 직접 코드를 작성해 입력 양식을 만드는 방법이에요. <form> 태그를 사용하고, 백엔드(서버)와 연동해서 데이터를 처리해요.

2-2. 만드는 방법

기본 구조 작성:

<form action="/submit" method="POST">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" required>
  <label for="message">문의 내용:</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">보내기</button>
</form>

스타일링: CSS로 예쁘게 꾸며요.
백엔드 연동: PHP나 Node.js 같은 서버 언어로 데이터를 받아 이메일로 보내거나 데이터베이스에 저장해요.

2-3. 장점

자유로운 디자인: 원하는 대로 색상, 레이아웃, 애니메이션을 적용할 수 있어요.
브랜드 일관성: 사이트와 완벽히 통합돼 전문적으로 보이죠.
고급 기능 추가 가능: 파일 업로드, 실시간 유효성 검사, 결제 연동 등 무궁무진해요.

2-4. 단점과 해결책

코딩 필요: HTML, CSS, 백엔드 지식이 없으면 어려워요.
해결책: 무료 템플릿을 다운로드하거나, 유튜브 튜토리얼을 따라 해 보세요. 예를 들어, "W3Schools"에 쉬운 예제가 많아요.
시간 소요: 처음엔 설정하고 테스트하는 데 시간이 걸려요.
해결책: 간단한 기능만 넣고 점차 업그레이드하는 식으로 접근하면 부담이 줄어요.
서버 비용: 데이터를 처리하려면 호스팅과 서버 설정이 필요할 수 있어요.
해결책: 무료 호스팅(예: Netlify)이나 서버리스 솔루션(예: Formspree)을 활용해 보세요.

3. 구글 폼으로 문의 페이지 만들기

3-1. 구글 폼이란?

구글 폼(Google Forms)은 Google에서 제공하는 무료 설문조사 도구라고 하더군요. 별도의 코딩 없이 클릭 몇 번으로 문의 양식을 만들 수 있죠. 구글 계정만 있으면 누구나 사용할 수 있어요.

3-2. 구글 폼 만드는 방법 (Step by Step)

구글 계정으로 구글 폼에 접속합니다.
"새로 만들기" > "구글 설문지"를 선택하세요. 제목과 설명을 입력합니다. 예를 들어, "문의하기" 또는 "Contact Us"로 설정합니다.
이름, 이메일, 문의 내용을 입력받는 필드를 만듭니다. 질문 유형(단문, 장문, 다지선다 등)을 골라서 원하는 대로 꾸밀 수 있어요.
필수 입력 필드를 설정해 누락 방지합니다.
[응답 수집] 옵션에서 응답을 구글 스프레드시트에 저장하도록 설정합니다.
상단의 [전송] 버튼을 누르고, [링크] 또는 [임베드 HTML] 코드를 복사합니다.
※ 링크를 복사하거나, 웹사이트에 "iframe"으로 삽입하는 방법이 있어요. 링크를 복사해서 버튼으로 연결하는 건 간단하지만, "iframe"으로 삽입하면 구글 폼이 내 웹사이트 페이지 안에 자연스럽게 들어가서 더 깔끔해 보인답니다. iframe 삽입 방법을 아래에서 더 자세히 알려드릴게요!
블로그 페이지에 이 링크를 복사해서 버튼으로 연결하거나, "iframe"코드를 삽입해서 넣습니다.

iframe으로 삽입하는 방법
iframe은 쉽게 말해서 "내 웹사이트 안에 다른 웹페이지를 창처럼 띄우는 방법"이에요. 구글 폼을 내 사이트에 바로 보여줄 수 있어서 좋아요. 자, 그럼 해볼까요?

1단계: 구글 폼에서 코드 얻기
구글 폼 상단 오른쪽에 있는 "햄버거 메뉴 아이콘"(작은 점 세 개)을 클릭하세요. 그러면 삽입된 HTML 옵션이 나와요.

삽입된 HTML 을 선택하세요. 그러면 <iframe> 코드가 나와요. 예를 들어, 이런 식으로 보일 거예요:

<iframe src="https://docs.google.com/forms/d/e/여기긴주소/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">로드 중…</iframe>

이 코드를 복사해요. "복사" 버튼을 누르면 쉽게 클립보드에 저장돼요.

2단계: 내 웹사이트에 코드 붙여넣기
이제 여러분이 만든 웹사이트 파일(예: index.html 같은 HTML 파일)을 열어야 해요. 웹사이트를 만들 때 사용하는 도구(예: Visual Studio Code 같은 코드 편집기나 워드프레스 같은 플랫폼)에 따라 조금 다를 수 있는데요, 일단 HTML 파일을 기준으로 설명할게요.
HTML 파일에서 구글 폼을 넣고 싶은 위치를 찾아요. 예를 들어, <body> 태그 안에 넣고 싶다면, 원하는 위치에 아까 복사한 <iframe> 코드를 붙여넣기 하면 돼요. 예를 들어:

<body>
  <h1>문의하기</h1>
  <p>궁금한 점이 있으면 아래에 작성해주세요!</p>
  <!-- 여기에 iframe 코드를 붙여넣기 -->
  <iframe src="https://docs.google.com/forms/d/e/여기긴주소/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">로드 중…</iframe>
</body>

이렇게 하면 구글 폼이 웹사이트에 바로 나타나요.

3단계: 크기 조정하기
iframe 코드에서 width="640" height="800" 부분이 구글 폼의 가로와 세로 크기를 뜻해요. 이 숫자를 바꿔서 내 웹사이트에 맞게 조정할 수 있어요. 예를 들어, 가로를 더 넓게 하고 싶다면 width="800"으로 바꿔보세요. 세로가 너무 길면 height="600"처럼 줄여도 돼요.
팁 하나 드리자면, 웹사이트가 모바일에서도 잘 보이게 하려면 width="100%"로 설정하면 좋아요. 그러면 화면 크기에 맞춰 자동으로 조정돼요. 수정된 코드는 이렇게 될 거예요:

<iframe src="https://docs.google.com/forms/d/e/여기긴주소/viewform?embedded=true" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0">로드 중…</iframe>

4단계: 저장하고 확인하기
코드를 붙여넣고 파일을 저장한 다음, 웹사이트를 브라우저에서 열어보세요. 구글 폼이 잘 보이나요? 처음엔 로딩이 살짝 걸릴 수 있으니 조금 기다려보세요. 만약 폼이 안 보이거나 깨져 보인다면, 코드를 다시 확인하거나 인터넷 연결을 체크해보세요.
추가 팁: 스타일 더 예쁘게 만들기
iframe은 기본적으로 테두리가 없지만, 주변에 여백이나 배경을 추가해서 더 예쁘게 꾸밀 수 있어요. 예를 들어, CSS를 조금 아신다면 iframe을 감싸는 <div> 태그를 추가하고 스타일을 적용해볼까요?

<div style="text-align: center; padding: 20px; background-color: #f0f0f0;">
  <iframe src="https://docs.google.com/forms/d/e/여기긴주소/viewform?embedded=true" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0">로드 중…</iframe>
</div>

이렇게 하면 구글 폼 주변에 회색 배경과 여백이 생겨서 더 깔끔해 보인답니다.

3-3. 장점

쉬운 사용: 코딩 지식이 없어도 10분 안에 완성 가능해요.
무료: 추가 비용 없이 쓸 수 있어 소규모 사이트나 개인 블로그에 딱이에요.
자동 저장: 답변이 구글 스프레드시트에 자동으로 정리돼 관리하기 편리해요.
모바일 호환: 스마트폰에서도 잘 보이고 작동해요.

3-4. 단점과 해결책

디자인 한계: 기본 테마 외에 세부적인 스타일 변경이 어려워요.
해결책: CSS를 조금 아신다면 iframe에 커스텀 스타일을 적용하거나, 구글 폼 링크를 버튼으로 연결해 사이트와 통일감을 주세요.
브랜드 느낌 부족: 구글 로고가 살짝 보일 수 있어 전문성이 떨어져 보일 수도 있어요.
해결책: 문의 페이지에 "간단히 문의하기"라는 식으로 캐주얼한 안내문을 추가해 자연스럽게 녹여보세요.
복잡한 기능 부족: 파일 업로드나 조건부 질문은 되지만, 고급 기능(예: 결제 연동)은 안 돼요.
해결책: 간단한 문의만 받을 거라면 충분하니, 복잡한 기능이 필요하면 다른 툴을 고려하세요.

4. 구글 폼 활용 팁

폼의 색상, 배경, 테마를 꾸며 브랜드 이미지 강화
조건부 질문(응답에 따라 다음 질문 표시)
응답 시 알림 받기 설정
다국어 지원으로 글로벌 대응

📊 구글 폼 vs HTML 폼 비교

기준	구글 폼	HTML 폼
난이도	매우 쉬움	중급 이상
비용	무료	서버 비용 발생 가능
디자인 자유도	낮음	매우 높음
제작 시간	10~30분	몇 시간~며칠
기능 확장성	제한적	무제한
유지보수	거의 필요 없음	필요함

5. 어떤 걸 선택해야 할까요?

구글 폼 추천 상황: 개인 블로그, 소규모 프로젝트, 코딩 경험이 없는 초보자, 빠르게 만들고 싶은 경우.
HTML 폼 추천 상황: 전문적인 웹사이트, 브랜드 이미지를 강조하고 싶을 때, 고급 기능이 필요한 경우.

전제조건으로, 구글 폼은 인터넷 연결이 필수이고, HTML 폼은 기본적인 코딩 지식이나 학습 의지가 있어야 해요. 주의점으로는 구글 폼은 데이터가 구글 서버에 저장되니 민감한 정보를 다룰 땐 보안 정책을 확인하세요. HTML 폼은 서버 보안(예: HTTPS)을 신경 써야 해요.

결론

여기까지 구글 폼과 HTML 폼으로 문의 페이지를 만드는 방법을 비교해 봤어요.

어때요, 여러분에게 딱 맞는 방법이 눈에 보이시나요? 저는 개인적으로 "빨리 만들고 싶다!" 할 땐 구글 폼을, "내 사이트에 딱 맞는 걸 만들고 싶다!" 할 땐 HTML 폼을 선택한답니다.

사실 뭐든 시작이 반이잖아요. 이 글을 읽고 "나도 한번 해볼까?" 하는 마음이 드셨다면, 주말에 컴퓨터 앞에 앉아서 뚝딱 만들어 보세요. 실패해도 괜찮아요. 저도 처음엔 엉망이었는데, 하다 보니 늘더라고요.

여러분도 분명 멋진 문의 페이지를 뽑아낼 거예요. 자, 그럼 저는 여기서 살짝 물러나며 응원할게요.

화이팅입니다! 😊

주석

저작자표시 비영리 변경금지 (새창열림)

'블로그 개발' 카테고리의 다른 글

🔥표절율 낮추는 꿀팁! 애드센스 승인 받고 싶은 블로거를 위한 실전 가이드 (2)	2025.05.31

현재글문의 페이지(Contact Page): 구글 폼으로 뚝딱? 만들기

킼코드 😎

😎 쉽고 재미있는 코딩 이야기, 킼코드에서 같이 즐겨봐요! 재미있고 유익한 IT 세상✨함께 탐험해 봐요! 😆

킼코드 😎