폼 빌더 만드는 법

폼 빌더는 사람들이 직접 폼을 설계하게 해 줍니다. 필드를 고르고, 규칙을 정하고, 링크를 공개하면 응답이 모입니다. 내부적으로는 세 가지로 이루어집니다. 데이터로 저장되는 폼 정의, 그 정의를 작동하는 폼으로 바꿔 주는 렌더러, 그리고 알림과 내보내기를 담당하는 응답 저장소입니다. 만들기 전에 정말 필요한지 확인하세요. 문의 폼이나 신청 폼 하나만 필요하다면 폼을 직접 만들고 빌더는 건너뛰는 편이 낫습니다.

빌더가 정말 필요한가요?

빌더는 폼보다 훨씬 큰 프로젝트입니다. 모든 필드 유형이 편집기, 공개 폼, 검증, 저장, 알림, 내보내기에서 모두 제대로 작동해야 하기 때문입니다.

폼 빌더에 필요한 것

폼 정의

각 폼을 필드 목록으로 저장하세요. JSON 형태로 저장하면 Postgres 컬럼에서도 잘 작동합니다. 필드 하나는 다음과 같을 수 있습니다.

• id: 라벨이 바뀌어도 변하지 않는 고정 ID
• type: 텍스트, 이메일, 숫자, 긴 텍스트, 선택, 체크박스, 날짜, 파일
• label과 도움말 텍스트
• 필수 여부, 최소/최대값, 허용 파일 형식
• 선택 필드의 옵션
• 순서, 그리고 선택적으로 조건(「필드 X가 Y일 때만 표시」)

편집기는 이 목록을 수정하고, 공개 폼은 이 목록을 읽습니다. 핵심은 이것뿐입니다. 폼마다 새 코드를 짤 필요가 없습니다.

응답

• 응답: 폼, 폼 버전, 제출 시각, 필드 ID 기준의 답변, 상태(신규, 읽음, 보관).
• 파일: 업로드된 파일은 파일 저장소에 두고, 응답에는 그 파일을 가리키는 참조만 저장하세요. 데이터베이스 행 안에 파일을 넣으면 안 됩니다.

페이지

• 폼 목록: 응답 수 표시
• 편집기: 필드 추가, 순서 변경, 설정을 하면서 옆에서 실시간 미리보기를 볼 수 있는 화면
• 설정: 확인 메시지 또는 이동할 주소, 알림 이메일, 열고 닫는 날짜, 응답 수 제한
• 공개 폼: 전용 링크와 다른 웹사이트에 넣을 수 있는 임베드 버전
• 응답 표: 검색, 상태, 상세 보기, CSV 내보내기 기능

결정과 트레이드오프

버전 관리. 200건의 응답이 쌓인 뒤에 누군가 「전화번호」를 「휴대폰 번호」로 바꾸고 싶어 할 것입니다. 답변을 필드 ID로 저장하고 각 응답에 폼 버전을 기록해 두면, 예전 응답도 올바르게 표시됩니다. 그렇지 않으면 데이터가 조용히 뒤섞입니다.

검증은 두 번 실행합니다. 브라우저에서 빠른 피드백을 주고, 서버에서도 한 번 더 검사하세요. 누구든지 엔드포인트에 데이터를 직접 보낼 수 있기 때문입니다. 중요한 것은 서버 검사입니다.

파일 업로드. 저장 비용, 용량 제한, 파일 형식 검사, 개인정보 문제(이력서, 신분증, 의료 양식)가 따라옵니다. 형식과 크기를 제한하고, 업로드된 파일은 기본적으로 비공개로 두어 폼 소유자만 열 수 있게 하세요. 파일 업로드 추가 방법을 참고하세요.

알림. 「제출되면 나에게 이메일 보내기」는 기본 기능처럼 기대됩니다. 이메일 제공업체와 API 키가 필요합니다. 앱에서 이메일 보내는 방법을 참고하세요.

스팸. 공개 폼은 봇에게 반드시 발견됩니다. 사람에게는 보이지 않고 봇만 채우는 허니팟 필드, IP별 요청 제한, 서버 측 검증, 필요하면 CAPTCHA 서비스를 사용하세요.

임베드. 다른 웹사이트에 폼을 넣을 때는 iframe 임베드가 가장 간단하고 안전합니다. 스크립트 임베드는 더 자연스러워 보이지만 만들기도 보안을 지키기도 더 어렵습니다.

조건부 로직. 「이 필드는 …일 때만 표시」는 인기가 많지만 테스트 경우의 수를 곱으로 늘립니다. 기본 기능이 탄탄해진 뒤에 추가하세요.

효과가 있었던 첫 프롬프트

팀을 위한 폼 빌더 웹앱을 만들어 줘. 로그인한 사용자가 실시간 미리보기가 있는 편집기에서 폼을 만든다. 필드 유형은 짧은 텍스트, 긴 텍스트, 이메일, 숫자, 날짜, 단일 선택, 체크박스, 파일 업로드. 각 필드는 고정 ID, 라벨, 도움말 텍스트, 필수 여부, 유형별 규칙(최소/최대값, 옵션, 허용 파일 형식, 10MB 용량 제한)을 가진다. 폼 정의는 JSON으로 저장하고, 게시할 때마다 증가하는 버전 번호를 붙인다. 각 폼은 공개 링크와 iframe 임베드 코드를 가진다. 제출은 게시된 버전 기준으로 서버에서 검증하고, 답변은 필드 ID와 폼 버전으로 저장하며, 업로드 파일은 비공개 파일 저장소에 둔다. 숨김 허니팟 필드와 IP별 요청 제한을 추가해 줘. 폼 소유자는 상태(신규, 읽음, 보관)가 있는 응답 표, 상세 보기, CSV 내보내기를 본다. 모든 것은 데이터베이스에 저장한다. 조건부 로직과 이메일 알림은 나중으로 미뤄 줘.

빌드 단계

1. 편집기와 정의. 모든 필드 유형을 넣은 폼을 만들고, 에이전트에게 저장된 JSON을 보여 달라고 하세요. 깔끔하고 안정적인가요?
2. 공개 폼. 휴대폰에서 직접 작성해 보세요. 검증 메시지와 확인 화면을 확인하세요.
3. 서버 검증. 페이지를 거치지 않고 규칙을 어기는 제출을 서버로 직접 보내 달라고 에이전트에게 요청하세요. 거부되어야 합니다.
4. 버전 관리. 응답이 몇 건 쌓인 뒤 필드 이름을 바꾸고 순서를 바꿔 보세요. 예전 응답도 올바른 답변을 보여 줘야 합니다.
5. 업로드. 너무 큰 파일과 잘못된 형식의 파일을 올려 보세요. 낯선 사람이 업로드된 파일의 링크를 추측해서 열 수 없는지 확인하세요.
6. 응답 표와 내보내기. 답변에 쉼표, 줄바꿈, 액센트 문자가 들어간 경우의 CSV 내보내기를 확인하세요.
7. 알림, 임베드, 로직. 한 번에 하나씩 추가하세요.

자주 하는 실수

• 라벨 기준으로 답변 저장. 라벨은 바뀝니다. 고정 필드 ID를 쓰세요.
• 브라우저에서만 하는 검증. 편의 기능일 뿐 보호 수단이 아닙니다.
• 공개된 업로드 파일. 폼은 사람들이 남에게 보이길 원하지 않는 문서를 모으는 경우가 많습니다.
• 스팸 방지 없음. 공개 폼은 며칠 만에 쓰레기 응답으로 가득 찰 수 있습니다.
• 폼 하나를 위해 빌더 만들기. 그냥 폼을 만드세요.
• 공개 제품에서 응답 수 무제한. 고객이 폼을 직접 만든다면 요금제별 한도를 정하세요. 인기 있는 폼 하나가 호스팅 비용을 크게 올릴 수 있습니다.

기성 제품이 더 나은 경우

호스팅 폼 도구는 대부분의 용도에 훌륭하고 저렴합니다. 임베딩, 스팸 방지, 결제, 연동, 다양한 필드 유형의 접근성 문제를 이미 해결해 두었습니다. 팀에 폼만 필요하다면 그런 도구를 쓰세요. Typeform 대안과 Google Forms 대안을 참고하세요.

직접 만들어야 할 때는 응답이 내가 운영하는 다른 데이터(직접 운영하는 CRM이나 고객 포털)와 함께 있어야 할 때, 제출 후 도구로는 불가능한 워크플로가 필요할 때, 데이터 위치나 소유권이 요구 사항일 때, 또는 폼이 판매하는 제품의 기능일 때입니다.

Mythex로 만들기

Mythex에서는 채팅으로 빌더를 설명하고, 실시간 미리보기에서 편집기와 공개 폼을 나란히 테스트할 수 있습니다. 폼 정의와 응답을 위한 전용 데이터베이스가 추가되며, 앱에 업로드가 필요하면 파일 저장소가 자동으로 켜집니다(무료 요금제에서는 1GB로 제한). 알림 이메일은 직접 가진 키로 연결하는 제공업체를 통해 보냅니다. 앱을 mythex.ai 링크로 게시하면 되고, Pro 요금제에서는 직접 도메인을 쓸 수 있습니다. 공개 폼 링크는 그곳에서 작동합니다.

자주 묻는 질문