⚡ 한 줄 요약: 무료 서비스에 유족 정보를 맡기지 않고, HTML 한 장으로 '카카오톡 미리보기·지도·계좌 원클릭 복사'까지 되는 모바일 부고장을 직접 만들어 무료로 배포하는 법.
🔰 HTML이 처음이라면? 먼저 HTML이란? 왕초보 가이드를 읽어보세요.
📑 목차
- 🕯️ 왜 직접 만드나
- 📄 부고장 HTML 한 장
- 💬 카카오톡 미리보기(Open Graph)
- 🗺️ 발인·빈소 지도 링크
- 💳 조의금 계좌 원클릭 복사
- 🚀 무료 배포(GitHub Pages)
- 🔒 개인정보 주의
🕯️ 왜 직접 만드나
'모바일 부고장' 무료 서비스는 편하지만, 유족 연락처·계좌·빈소 정보를 외부 서비스에 넘기게 됩니다.
개발자라면 HTML 한 장으로 직접 만들어 내가 데이터를 통제하고, 카톡 공유 미리보기·지도·계좌 복사 버튼까지 원하는 대로 붙일 수 있습니다.
서비스로 3분 만에 보내는 법과 문구 예시는 모바일 부고장·부고 문자 보내는 법에 따로 정리돼 있으니, 이 글은 '직접 만들기'만 다룹니다.
📄 부고장 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="빈소: OO장례식장 3호실 · 발인: 2026-07-12(토) 07:00">
<meta property="og:image" content="https://내도메인/thumb.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:#f3f3f1;color:#222;line-height:1.7}
.card{max-width:420px;margin:0 auto;background:#fff;padding:28px 22px}
h1{font-size:20px;text-align:center;letter-spacing:6px;margin:8px 0 20px}
.row{display:flex;padding:10px 0;border-top:1px solid #eee}
.row b{width:64px;color:#888;font-weight:500}
.btn{display:block;width:100%;padding:14px;margin-top:14px;border:0;
border-radius:10px;background:#2d2d2d;color:#fff;font-size:15px;text-align:center;
text-decoration:none;box-sizing:border-box}
</style>
</head>
<body>
<div class="card">
<h1>訃 告</h1>
<div class="row"><b>고인</b><span>故 홍길동 (享年 80)</span></div>
<div class="row"><b>상주</b><span>홍판서 · 홍여식</span></div>
<div class="row"><b>빈소</b><span>OO장례식장 3호실</span></div>
<div class="row"><b>발인</b><span>2026-07-12(토) 07:00</span></div>
<div class="row"><b>장지</b><span>OO추모공원</span></div>
<a class="btn" href="https://www.google.com/maps/search/?api=1&query=OO장례식장">🗺️ 빈소 위치 지도</a>
<button class="btn" type="button" onclick="copyAcct()">💳 조의금 계좌 복사</button>
</div>
<script>
function copyAcct(){
var acct = "OO은행 123-456-789012 홍판서";
navigator.clipboard.writeText(acct)
.then(function(){ alert("계좌번호가 복사되었습니다.\n" + acct); })
.catch(function(){ prompt("아래를 복사해서 사용하세요:", acct); });
}
</script>
</body>
</html>
이 한 파일이 곧 부고장입니다.
아래에서 핵심 조각만 짚습니다.
💬 카카오톡 미리보기(Open Graph)
카톡·문자에 링크를 붙였을 때 제목·요약·썸네일이 뜨는 건 <meta property="og:..."> 태그 덕분입니다.og:title·og:description·og:image 세 개면 충분하고, 이미지는 1200×630 을 권장합니다.
카톡은 미리보기 캐시가 강해서, 내용을 바꾼 뒤에도 옛 미리보기가 뜨면 링크 뒤에 ?v=2 같은 쿼리를 붙여 새 URL로 인식시키면 됩니다.
🗺️ 발인·빈소 지도 링크
장례식장 이름만 넣으면 되는 범용 구글 지도 링크가 가장 안전합니다(누르면 각자 설치된 지도 앱으로 열림).
https://www.google.com/maps/search/?api=1&query=장례식장이름
카카오맵을 선호하면 https://map.kakao.com/?q=장례식장이름 도 됩니다.
💳 조의금 계좌 원클릭 복사
계좌번호는 눌러서 바로 복사되게 하면 조문객이 편합니다.
위 코드의 navigator.clipboard.writeText() 가 그 역할입니다.
이 API는 HTTPS에서만 동작하는데, 아래 배포 방식이 모두 HTTPS라 문제없고, 혹시 실패하면 prompt() 로 폴백하도록 해뒀습니다.
🚀 무료 배포(GitHub Pages)
- GitHub에 새 저장소 생성 →
index.html업로드 - Settings → Pages → Branch를
main으로 지정 → 저장 - 몇 분 뒤
https://<아이디>.github.io/<저장소>/링크 발급 → 카톡에 공유
폴더째 끌어다 놓으면 되는 Netlify Drop(app.netlify.com/drop)이나 Vercel 은 더 빠릅니다.
셋 다 HTTPS·무료입니다.
🔒 개인정보 주의
부고장 링크에는 계좌·연락처·빈소가 담깁니다.
몇 가지만 지키세요.
<meta name="robots" content="noindex">로 검색 노출을 막습니다(위 코드에 포함).- 링크는 조문 범위에만 공유하고, 발인 후엔 저장소를 비공개/삭제해 흔적을 줄입니다.
함께 보면 좋은 글
- 장례 비용부터 지원금까지 — 처음 겪는 상주를 위한 장례 절차 총정리 — 처음 겪는 장례, 절차·비용·지원금 전반
- 모바일 부고장·부고 문자 보내는 법 — 서비스로 보내기·문구 예시·사칭 사기 주의
- 세상을 떠난 뒤의 계정들 — 디지털 유산 정리 가이드 — 장례 후 온라인 계정 정리
'개발 실무' 카테고리의 다른 글
| 모바일 청첩장 직접 만들기 — HTML 한 장으로 (0) | 2026.07.11 |
|---|---|
| 무료 모바일 초대장 직접 만들기 — HTML 템플릿 모음 (0) | 2026.07.11 |
| 국비지원AI교육, 챗봇 말고 에이전트 배워라 (0) | 2026.07.07 |
| 네이버지도API, 거지맵이 쏟아지는 이유 (0) | 2026.06.27 |
| CA ERwin 프린트 영역이 안보인다면? (0) | 2026.01.18 |
