김준일 ♥ 박건영 — 모바일 청첩장
2026년 11월 7일 토요일 오전 11시 · 부전교회 3층 세움홀
Next.js 16 · React 19 · Tailwind CSS v4 · Google Spreadsheet 로 동작하는 모바일 청첩장입니다.
참석 여부(RSVP)를 구글 시트로 실시간 수집하여 뷔페 인원을 집계합니다.
1. 화면 구성
| 순서 | 섹션 | 내용 |
|---|
| — | 커버 | 대표 사진 (9번 사진) · 이름 · 일시 |
| 01 | 초대합니다 | 인사말 · 혼주/신랑신부 · 연락하기 & 예식 안내사항 팝업 버튼 |
| 02 | 예식 안내 | 달력 · D-day 카운트다운 · 캘린더 저장(.ics / 구글) |
| 03 | 갤러리 | 사진 13장 · 스와이프 라이트박스 |
| 04 | 오시는 길 | 지도 · 주소 복사 · 카카오맵/네이버지도/T맵 · 교통 안내 |
| 05 | 참석 여부 | 구글 시트로 참석·인원·식사 여부 실시간 저장 |
| 06 | 마음 전하실 곳 | 계좌 아코디언 · 복사 · 카카오페이 |
| 07 | 공유하기 | 카카오톡 · 시스템 공유 · 링크 복사 |
부가 기능:
- 안내사항 팝업: 페이지 진입 시 사랑의 쌀화환 기부 안내, 식사인원 체크 부탁, 예배식 예식 안내 팝업 노출 (오늘 하루 보지 않기 지원)
- 배경음악: 5초 뒤 합심 MR 자동 재생 안내 토스트, 우측 상단 음소거 버튼 토글
- 하단 고정 바(Dock): 오시는 길, 참석 여부, 공유 바로가기 (3단)
/admin 대시보드: 구글 시트 실시간 통계 요약 및 엑셀(CSV) 다운로드
2. 시작하기 (로컬)
npm install
cp .env.example .env.local # 값 채우기 (아래 4번)
npm run dev
http://localhost:3000 에서 확인합니다.
3. 내용 채우기 — src/config/wedding.ts
4. 구글 스프레드시트 연동 방법 (5분 완성)
별도의 복잡한 데이터베이스(Supabase 등) 없이, 본인의 구글 스프레드시트에 하객 응답이 실시간 행으로 자동 추가됩니다.
- 구글 스프레드시트 생성
- Apps Script 열기
- 상단 메뉴에서 [확장 프로그램] → [Apps Script] 를 클릭합니다.
- 코드 붙여넣기
- 기존의
function myFunction() {} 코드를 전부 지우고,
프로젝트 루트에 있는 google-sheets-script.js 파일의 전체 내용을 그대로 복사해 붙여넣습니다.
- 웹 앱 배포
- 우측 상단 [배포] 파란색 버튼 → [새 배포] 클릭
- 톱니바퀴 아이콘 클릭 → [웹 앱] 선택
- 설명:
청첩장 RSVP
- 다음 사용자 권한으로 실행:
나 (내 구글 이메일)
- 액세스 권한이 있는 사용자:
모든 사용자 (⚠️ 꼭 '모든 사용자'를 선택해야 청첩장에서 접근 가능합니다)
- [배포] 클릭 후 '액세스 승인' (Google 계정 로그인 및 고급 → 이동 클릭)
- 최종 발급된 "웹 앱 URL" (
https://script.google.com/macros/s/.../exec)을 복사합니다.
- 환경변수 설정
5. 관리자 페이지 (/admin)
/admin에 접속하여 관리자 비밀번호(.env.local의 ADMIN_PASSWORD)로 로그인하면:
- 구글 시트에 기록된 실시간 참석/식사 현황(신랑측/신부측, 식사 예정 인원 등)을 한눈에 볼 수 있습니다.
- [구글 시트 바로가기] 버튼 및 [CSV 내려받기] 버튼을 제공합니다.
6. 카카오 연동 (선택)
지도와 카카오톡 공유하기에 쓰입니다. 없어도 청첩장은 정상 동작합니다.
- https://developers.kakao.com → 내 애플리케이션 → 추가
- 앱 키 → JavaScript 키 를
NEXT_PUBLIC_KAKAO_JS_KEY 에 넣습니다.
- 플랫폼 → Web → 사이트 도메인 에 사이트 주소 등록 (
http://localhost:3000 및 배포 도메인)
7. Vercel 배포
Vercel 프로젝트 생성 후 아래 환경변수를 등록합니다:
| 이름 | 설명 |
|---|
GOOGLE_SHEET_WEBHOOK_URL | 구글 스프레드시트 웹 앱 URL |
ADMIN_PASSWORD | /admin 로그인용 비밀번호 |
NEXT_PUBLIC_SITE_URL | 배포 도메인 (예: https://wedding.guwonsoft.com) |
NEXT_PUBLIC_KAKAO_JS_KEY | 카카오 JavaScript 키 (선택) |
