최은식 ♥ 김유리 모바일 청첩장

살롱드레터 스타일(크림 페이퍼 + 세리프/필기체)을 참고한 정적 모바일 청첩장입니다. 프레임워크 없이 순수 HTML/CSS/JS로 만들어 GitHub Pages 등 정적 호스팅에 바로 올릴 수 있습니다.

구성

index.html          # 마크업 (섹션 구조)
css/style.css       # 디자인/레이아웃
js/main.js          # 데이터(CONFIG) + 동작 (달력/갤러리/지도/공유)
assets/images/      # 갤러리 사진 01.jpg ~ 12.jpg

섹션

표지 → 혼주 소개 → 예식 안내(달력) → 갤러리 → 오시는 길(지도/네비 버튼) → 교통 안내(자차·지하철) → 주차장 안내

참석 여부 전달 · 마음 전하실 곳 · 게스트스냅 · 축하 메세지 섹션은 요청에 따라 제외했습니다. 꽃잎 이펙트 · 배경음악 · 카운트다운 기능도 넣지 않았습니다.

수정하는 법

거의 모든 정보는 js/main.js 상단의 CONFIG 객체에서 바꿉니다.

• wedding : 예식 연/월/일 (달력 하이라이트 기준)
• venue : 예식장 이름/주소/좌표(위경도)
• gallery : 사진 개수/경로/확장자
• naverMapClientId : 네이버 지도 Client ID (아래 참고)

문구(인사말·부모님 성함 등)는 index.html에서 직접 수정합니다.

갤러리 사진

assets/images/ 에 01.jpg ~ 12.jpg 를 넣으면 자동으로 표시됩니다. 사진을 클릭하면 확대(라이트박스)되며 좌우로 넘길 수 있습니다.

네이버 지도 (실제 인터랙티브 지도)

기본 상태에서는 지도 자리에 대체 카드 + 네비게이션 버튼(티맵/카카오내비/네이버지도) 이 동작합니다. 실제 움직이는 네이버 지도를 넣으려면 (무료):

1. 네이버 클라우드 플랫폼 가입 → AI·NAVER API > Maps > Web Dynamic Map 신청
2. 발급받은 Client ID(ncpKeyId) 를 js/main.js 의 CONFIG.naverMapClientId 에 입력
3. 애플리케이션 설정에서 Web 서비스 URL(배포 도메인, 예: https://<username>.github.io)을 등록

네이버 지도는 X-Frame-Options 정책상 map.naver.com을 iframe으로 직접 임베드할 수 없어, 공식 JS Dynamic Map(위 방식)이 템플릿과 동일한 인터랙티브 지도를 구현하는 정식 방법입니다.

로컬 미리보기

# 프로젝트 폴더에서
python -m http.server 5500
# 브라우저에서 http://localhost:5500 접속

배포 (GitHub Pages)

저장소 Settings → Pages → Source: Deploy from a branch → main / (root) 로 설정하면 https://<username>.github.io/wedding/ 에서 확인할 수 있습니다.