⚡ 한 줄 요약: 유료 서비스·광고 없이, HTML 한 장으로 '카톡 미리보기·예식장 지도·양가 마음전하기(계좌 복사)·참석여부(RSVP)'까지 되는 모바일 청첩장을 직접 만들어 무료로 배포하는 법.
🔰 HTML이 처음이라면? 먼저 HTML이란? 왕초보 가이드를 읽어보세요.
📑 목차
- 💐 왜 직접 만드나
- 💌 청첩장 HTML 한 장
- 💬 카카오톡 미리보기(Open Graph)
- 🗺️ 예식장 지도 링크
- 💳 양가 마음전하기(계좌 복사)
- ✅ 참석여부(RSVP) 받기
- 🚀 무료 배포와 개인정보 주의
💐 왜 직접 만드나
모바일 청첩장 서비스는 편하지만 무료 버전엔 광고가 붙고, 하객 연락처·계좌 정보가 외부 서비스에 쌓입니다.
개발자라면 HTML 한 장으로 직접 만들어 광고 없이, 내가 데이터를 통제하며, 우리 예식에 딱 맞게 꾸밀 수 있습니다.
공통 기술의 전체 그림은 무료 모바일 초대장 만들기 — 템플릿 모음에 있고, 이 글은 '청첩장'에 특화해 다룹니다.
💌 청첩장 HTML 한 장
아래를 index.html로 저장하고 값만 바꾸면 됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>민준 ♥ 서연 결혼합니다</title>
<!-- 카카오톡/문자 링크 미리보기 -->
<meta property="og:title" content="민준 ♥ 서연, 결혼합니다">
<meta property="og:description" content="2026년 10월 17일(토) 오후 12시 · OO웨딩홀 3층 그랜드홀">
<meta property="og:image" content="https://내도메인/main.jpg">
<meta property="og:type" content="website">
<meta name="robots" content="noindex"><!-- 검색 노출 방지 -->
<style>
body{font-family:system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
margin:0;background:#f7f3ee;color:#3a3a33;line-height:1.8}
.card{max-width:420px;margin:0 auto;background:#fff;padding:32px 24px;text-align:center}
.lead{color:#b48a5a;letter-spacing:3px;font-size:13px;margin-bottom:6px}
h1{font-size:22px;margin:4px 0 2px;font-weight:600}
.sub{color:#888;font-size:13px;margin-bottom:22px}
.info{border-top:1px solid #eee;padding:14px 0;font-size:15px}
.btn{display:block;width:100%;padding:14px;margin-top:12px;border:0;border-radius:12px;
background:#b48a5a;color:#fff;font-size:15px;text-decoration:none;box-sizing:border-box}
.btn.line{background:#fff;color:#b48a5a;border:1px solid #b48a5a}
</style>
</head>
<body>
<div class="card">
<p class="lead">WEDDING INVITATION</p>
<h1>김민준 & 이서연</h1>
<p class="sub">김철수 · 박영희의 장남 | 이영수 · 최미경의 차녀</p>
<div class="info">저희 두 사람이 하나 되는 날,<br>귀한 걸음으로 축복해 주세요.</div>
<div class="info"><b>2026. 10. 17 (토) 낮 12:00</b><br>OO웨딩홀 3층 그랜드홀</div>
<a class="btn" href="https://www.google.com/maps/search/?api=1&query=OO웨딩홀">🗺️ 예식장 위치 지도</a>
<button class="btn line" type="button" onclick="copy('신랑측','국민 123-45-6789 김민준')">💐 신랑측 마음 전하기</button>
<button class="btn line" type="button" onclick="copy('신부측','신한 110-234-56789 이서연')">💐 신부측 마음 전하기</button>
<a class="btn" href="https://forms.gle/여기에_구글폼_링크">✅ 참석 여부 전하기</a>
</div>
<script>
function copy(who, acct){
navigator.clipboard.writeText(acct)
.then(function(){ alert(who + " 계좌가 복사되었습니다.\n" + acct); })
.catch(function(){ prompt("복사해서 사용하세요:", acct); });
}
</script>
</body>
</html>
💬 카카오톡 미리보기(Open Graph)
카톡에 링크를 붙였을 때 신랑·신부 이름과 대표 사진이 뜨는 건 og: 태그 덕분입니다.og:title·og:description·og:image 세 개면 되고, 대표 사진은 1200×630 을 권장합니다.
사진을 바꿨는데 옛 미리보기가 남으면 링크 뒤에 ?v=2 를 붙여 새 URL로 인식시키세요.
🗺️ 예식장 지도 링크
예식장 이름만 넣으면 하객의 지도 앱으로 바로 열리는 범용 링크입니다.
https://www.google.com/maps/search/?api=1&query=예식장이름
💳 양가 마음전하기(계좌 복사)
청첩장의 핵심 차이입니다.
신랑측·신부측 계좌를 각각 복사 버튼으로 두면 하객이 누구에게 보낼지 골라 한 번에 복사합니다.
위 코드의 copy('신랑측', '…') / copy('신부측', '…') 처럼 버튼마다 계좌를 넣으면 됩니다.
여러 명(혼주 계좌 포함)이라면 버튼을 더 늘리세요.
✅ 참석여부(RSVP) 받기
식대 준비 때문에 참석 인원 파악이 중요합니다.
구글 폼이 가장 쉽습니다.
- Google Forms에서 '성함 / 참석 인원 / 신랑측·신부측 / 식사 여부' 항목으로 폼을 만듭니다.
- '보내기 → 링크(🔗)'에서 단축 링크(
https://forms.gle/…)를 복사해 위 코드의 참석 버튼href에 넣습니다. - 응답은 구글 스프레드시트로 자동 집계됩니다.
🚀 무료 배포와 개인정보 주의
- 배포: GitHub Pages(저장소 → Settings → Pages) 또는 Netlify Drop(폴더 드래그)·Vercel. 모두 HTTPS·무료라 계좌 복사 버튼도 잘 동작합니다.
- 개인정보: 청첩장 링크엔 계좌·예식 정보가 담깁니다.
<meta name="robots" content="noindex">(위 코드에 포함)로 검색 노출을 막고, 링크는 하객 범위에만 공유하세요.
함께 보면 좋은 글
- 무료 모바일 초대장 만들기 — 템플릿 모음 — 청첩장·부고장·돌잔치 등 공통 뼈대와 전체 목록
- 모바일 부고장 직접 만들기 — HTML 한 장으로 — 같은 기술의 부고장 버전
'개발 실무' 카테고리의 다른 글
| 모바일 환갑·칠순 잔치 초대장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
|---|---|
| 모바일 돌잔치·백일 초대장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
| 무료 모바일 초대장 직접 만들기 — HTML 템플릿 모음 (0) | 2026.07.11 |
| 모바일 부고장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.10 |
| 국비지원AI교육, 챗봇 말고 에이전트 배워라 (0) | 2026.07.07 |
