⚡ 한 줄 요약: 청첩장·돌잔치·환갑·생일·부고까지, 모바일 초대장은 유료 서비스 없이 HTML 한 장으로 직접 만들 수 있습니다. 한 번 익히면 모든 행사에 쓰는 '공통 뼈대'와, 행사별 만들기 글을 한곳에 모았습니다.
🔰 HTML이 처음이라면? 먼저 HTML이란? 왕초보 가이드를 읽어보세요.
📑 목차
🤔 왜 직접 만드나
'모바일 청첩장/초대장' 무료 서비스는 편하지만 광고가 붙거나, 참석자 연락처·계좌 같은 정보를 외부에 맡기게 됩니다.
개발자라면 HTML 한 장으로 직접 만들어 내가 데이터를 통제하고, 카톡 공유 미리보기·지도·계좌 복사·참석여부(RSVP)까지 원하는 대로 붙일 수 있습니다.
게다가 무료입니다.
🧱 모든 카드가 공유하는 6가지 뼈대
행사가 달라도 재료는 똑같습니다.
이 여섯 조각만 알면 무엇이든 만듭니다.
- 카드 HTML/CSS — 정보를 담는 한 장짜리 레이아웃.
- 카카오톡 미리보기(Open Graph) —
<meta property="og:title/description/image">로 링크 붙였을 때 썸네일·요약이 뜨게. 이미지 1200×630 권장. - 위치 지도 링크 — 장례식장·예식장·집 어디든:
https://www.google.com/maps/search/?api=1&query=장소이름 - 원클릭 복사 버튼 — 계좌·연락처를 눌러 복사(
navigator.clipboard.writeText, HTTPS에서 동작). - 참석여부(RSVP) — 구글 폼 링크 버튼 하나면 참석 인원을 자동 집계.
- 무료 배포 — GitHub Pages·Netlify Drop·Vercel(모두 HTTPS·무료)로 링크 발급 → 카톡 공유.
행사마다 1번(레이아웃)과 담는 정보만 바꾸면 됩니다.
📋 기본 템플릿 — 복붙해서 시작하세요
말보다 코드가 빠릅니다.
아래를 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년 0월 0일(요일) 0시 · 장소">
<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:#f4f5f7;color:#333;line-height:1.8}
.card{max-width:420px;margin:0 auto;background:#fff;padding:30px 22px;text-align:center}
h1{font-size:22px;margin:6px 0}
.sub{color:#999;font-size:13px;margin-bottom:18px}
.info{border-top:1px solid #eee;padding:13px 0;font-size:15px}
.btn{display:block;width:100%;padding:14px;margin-top:10px;border:0;border-radius:12px;
background:#4a4a4a;color:#fff;font-size:15px;text-decoration:none;box-sizing:border-box}
.btn.line{background:#fff;color:#4a4a4a;border:1px solid #ccc}
</style>
</head>
<body>
<div class="card">
<h1>○○에 초대합니다</h1>
<p class="sub">초대하는 사람 이름</p>
<div class="info">인사말을 여기에 적으세요.</div>
<div class="info"><b>2026. 0. 0 (요일) 00:00</b><br>장소 이름</div>
<a class="btn" href="https://www.google.com/maps/search/?api=1&query=장소이름">🗺️ 오시는 길</a>
<button class="btn line" type="button" onclick="copy('은행 000-00-000000 예금주')">💳 계좌 복사</button>
<a class="btn" href="https://forms.gle/여기에_구글폼_링크">✅ 참석 여부 전하기</a>
</div>
<script>
function copy(t){
navigator.clipboard.writeText(t)
.then(function(){ alert("복사되었습니다.\n" + t); })
.catch(function(){ prompt("복사해서 사용하세요:", t); });
}
</script>
</body>
</html>
이 기본형에서 행사에 맞는 필드·버튼만 바꾸면 됩니다.
청첩장의 양가 계좌, 돌잔치의 성장사진, 환갑의 헌수, 생일의 위시리스트처럼 — 각 활용 글에 행사별 전용 템플릿을 준비했습니다.
🎊 행사별 만들기 (템플릿 모음)
각 글에 복붙 가능한 전용 템플릿과 그 행사에 맞는 필드·예절을 정리했습니다.
- 💍 모바일 청첩장 직접 만들기 — 신랑·신부, 예식 지도, 양가 마음전하기(계좌), 참석여부(RSVP), 갤러리
- 🕯️ 모바일 부고장 직접 만들기 — 빈소·발인·장지, 조의금 계좌 복사, 위치 지도
- 🎂 돌잔치·백일 초대장 직접 만들기 — 아기 성장사진, 참석여부(RSVP), 답례 안내
- 🎉 환갑·칠순 잔치 초대장 만들기 — 잔치 안내, 헌수(축하금) 계좌, 참석여부
- 🎈 생일 파티 초대장 만들기 — 파티 안내, 드레스코드, 선물 위시리스트, RSVP
💡 이렇게도 응용하세요
같은 뼈대로 집들이·개업식·동창회·소모임 초대, 심지어 행사 안내 페이지까지 만들 수 있습니다.
'카드에 어떤 정보를 담고, 어떤 버튼(지도·복사·RSVP)을 붙일까'만 정하면 30분이면 완성됩니다.
필요할 때 이 목록으로 돌아오세요 — 행사별 글을 계속 추가합니다.
'개발 실무' 카테고리의 다른 글
| 모바일 돌잔치·백일 초대장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
|---|---|
| 모바일 청첩장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
| 모바일 부고장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.10 |
| 국비지원AI교육, 챗봇 말고 에이전트 배워라 (0) | 2026.07.07 |
| 네이버지도API, 거지맵이 쏟아지는 이유 (0) | 2026.06.27 |
