웹사이트에 문의 양식을 추가하는 방법 (실제로 메시지가 도착하도록)

문의 양식이 제대로 작동하게 하려면, 짧은 양식(이름, 이메일, 메시지)을 만들고 입력값을 검증하는 서버 라우트로 전송하세요. 그다음 메시지를 데이터베이스에 저장하고, 비밀 API 키를 사용해 이메일 제공업체로 알림 메일을 보냅니다. 숨겨진 허니팟 필드와 요청 속도 제한을 추가하면 대부분의 스팸을 막을 수 있습니다. 성공 메시지를 분명하게 보여주고, 게시된 사이트에서 처음부터 끝까지 직접 테스트하세요. 가장 중요한 부분은 이메일을 보내기 전에 먼저 저장하는 것입니다. 이메일 전송이 실패해도 문의 내용은 남아 있습니다.

선택지 살펴보기

이미 백엔드와 데이터베이스가 있는 사이트라면(AI 앱 빌더로 만든 앱에는 대개 있습니다), 마지막 선택지가 가장 안정적이고 문의를 직접 확인할 수 있는 방법입니다.

좋은 문의 양식에 필요한 것

• 최소한의 필드. 이름, 이메일, 메시지면 충분합니다. 문의 유형별로 연결할 계획이 있을 때만 “영업”, “지원”, “기타” 같은 제목 드롭다운을 추가하세요.
• 명확한 라벨. 사라지는 플레이스홀더 텍스트만 두지 말고, 각 필드 위에 라벨을 표시하세요.
• 도움이 되는 검증 메시지. 필드 옆에 “올바른 이메일 주소를 입력하세요”처럼 구체적으로 안내하세요.
• 성공 상태. 다음에 무엇이 일어나는지 알려주세요. 예: “감사합니다. 영업일 기준 하루 안에 답변드리겠습니다.”
• 개인정보 안내. 개인정보를 어떻게 사용하는지 밝히고, 개인정보처리방침으로 연결하세요.
• 대체 연락처. 이메일 주소나 전화번호를 함께 적어, 다른 방식을 선호하는 사람도 연락할 수 있게 하세요.

프롬프트 예시

기본 양식:

문의 페이지에 이름, 이메일, 메시지(모두 필수, 메시지는 최대 2,000자) 필드가 있는 문의 양식을 추가해 주세요. 서버 라우트로 전송하고, 서버는 입력값을 검증한 뒤 받은 시각과 함께 contact_messages 테이블에 저장해야 합니다. 성공하면 “감사합니다. 영업일 기준 하루 안에 답변드리겠습니다.”라는 메시지를 보여주세요. 필드 오류는 각 입력란 옆에 표시하고, 휴대폰에서도 잘 보이도록 만들어 주세요.

이메일 알림:

문의 메시지가 저장되면 RESEND_API_KEY에 있는 키를 사용해 Resend로 hello@example.com에 알림 메일을 보내 주세요. 답장 주소(reply-to)는 보낸 사람의 이메일로 설정해서 제가 바로 답장할 수 있게 해 주세요. 전송이 실패하면 저장된 메시지는 그대로 두고, 키가 노출되지 않도록 오류만 기록해 주세요.

스팸 방지:

문의 양식에 스팸 방지 기능을 추가해 주세요. 사람은 보지 못하는 숨김 허니팟 필드가 비어 있어야 하고, 서버에서 IP당 시간당 5건으로 제출을 제한하고, 링크가 3개를 넘는 메시지는 거부해 주세요. 허니팟에 걸린 제출은 조용히 버리되, 성공 메시지는 그대로 보여주세요.

받은 메시지함:

비밀번호로 보호되는 관리자 페이지를 추가해 주세요. 문의 메시지를 최신순으로 나열하고, 각 메시지에 “처리됨” 체크박스를 두고, 미처리 메시지만 보는 필터를 넣어 주세요.

단계별 진행

1. 메시지를 어디로 보낼지 정하세요. 알림을 누가 받고, 누가 답장할지 결정합니다.
2. 양식을 만드세요. 위의 필드를 넣고, 접근 가능한 라벨과 모바일에 맞는 입력창을 사용하세요(이메일 입력란에는 email 타입을 지정해야 휴대폰에서 적절한 키보드가 나옵니다).
3. 서버 라우트를 만드세요. 필수 필드, 이메일 형식, 길이 제한을 확인합니다. 브라우저에서만 하는 검증은 절대 믿지 마세요.
4. 먼저 데이터베이스에 저장하세요. 앱에 데이터베이스를 추가하는 방법을 참고하세요.
5. 이메일 제공업체를 설정하세요. 계정을 만들고, 발신 도메인을 인증하고, API 키를 시크릿으로 저장합니다. 앱에서 이메일 보내는 방법에서 SPF, DKIM 등 도메인 설정을 자세히 다룹니다.
6. 저장 후 서버에서 알림을 보내세요. 발신자는 인증된 도메인으로 하고, 답장 주소는 방문자의 이메일로 설정하세요. 발신자를 방문자의 주소로 하면 스푸핑으로 간주되어 거부될 가능성이 높습니다.
7. 선택 사항으로 자동 답장을 보내세요. 짧게 유지하세요. 스팸 주소에 자동 답장을 보내면 발신 평판이 나빠질 수 있습니다.
8. 스팸 방지를 추가하세요. 허니팟, 요청 속도 제한, 필요하면 CAPTCHA 방식의 검사 순서로 적용합니다.
9. 게시된 사이트에서 테스트하세요. 제출해 보고, 데이터베이스를 확인하고, 받은 편지함과 스팸함을 모두 확인한 뒤 답장을 눌러 보세요.

스팸 막기

문의 양식은 공개되는 즉시 며칠 안에 봇의 표적이 됩니다. 덜 번거로운 방법부터 더 강한 방법 순서로 여러 겹의 방어를 쌓으세요.

1. 허니팟 필드. 사람에게는 보이지 않고 봇만 채우는 필드입니다. 실제 방문자에게는 아무 불편이 없습니다.
2. 서버 측 요청 속도 제한. 한 주소가 일정 기간에 보낼 수 있는 메시지 수를 제한합니다.
3. 내용 규칙. 링크가 지나치게 많거나, 메시지 필드가 비어 있거나 지나치게 긴 메시지를 거부합니다.
4. CAPTCHA 방식의 검사. Cloudflare Turnstile이나 Google reCAPTCHA 같은 방식입니다. 토큰은 반드시 서버에서 검증해야 하며, 브라우저에서만 실행되는 검사는 우회될 수 있습니다.

자주 하는 실수

• 아무것도 전송되지 않았는데 “전송됨!”을 표시하는 경우. 서버 응답을 기다리기 전이나 응답과 상관없이 성공 메시지를 띄우는 UI입니다. 반드시 서버 응답을 기다리세요.
• 이메일만 쓰고 데이터베이스는 없는 경우. 키 설정 하나가 잘못되면, 아무도 모르는 사이 몇 주 동안 문의가 사라질 수 있습니다.
• 프론트엔드 코드에 API 키를 넣는 경우. 누구든 그 키로 내 이름을 걸고 이메일을 보낼 수 있습니다.
• 인증되지 않은 발신 도메인. 알림이 스팸함으로 가거나 아예 도착하지 않습니다.
• 방문자의 이메일을 “보내는 사람”으로 설정하는 경우. 대신 답장 주소(reply-to)를 사용하세요.
• 길이 제한이 없는 경우. 봇은 엄청나게 긴 텍스트를 붙여 넣습니다.
• 실제 사이트에서 테스트하지 않는 경우. 미리보기와 운영 환경의 키와 도메인이 다른 경우가 많습니다.

체크리스트

• 라벨이 보이고 오류 안내가 분명한 짧은 양식
• 서버 측 검증과 길이 제한
• 모든 메시지를 데이터베이스에 저장
• 인증된 도메인에서 보내고, 답장 주소를 설정한 알림 메일
• 이메일 API 키는 서버 측 시크릿에만 저장
• 허니팟과 요청 속도 제한 적용
• 서버가 확인한 뒤에만 성공 메시지 표시
• 개인정보 안내에서 개인정보처리방침으로 연결
• 게시된 사이트에서 처음부터 끝까지 테스트(스팸함 포함)

Mythex에서 문의 양식 만들기

Mythex에서는 채팅으로 전체 과정을 만들 수 있습니다. 양식과 데이터베이스를 같은 프롬프트에서 요청하거나(또는 /database 입력), 제출 내용이 유지되도록 하세요. Mythex에는 기본 제공 이메일 발송 기능이 없으므로, 알림을 보내려면 Resend, SendGrid, Postmark 같은 제공업체를 사용하고, API 키는 /secrets나 프로젝트 설정에 추가한 뒤, 서버에서 보내도록 에이전트에게 요청하세요. 자세한 내용은 앱에서 이메일 보내기를 참고하세요. 실제로 의존하기 전에 미리보기에서 양식에 대해 앱 테스트(/test)를 실행한 뒤, 게시하고 실제 URL에서 다시 테스트하세요.

문의 양식은 대부분의 소규모 비즈니스 웹사이트와 랜딩 페이지의 핵심 요소입니다. 출시 전에는 보안 체크리스트도 확인하세요.

자주 묻는 질문