모바일 청첩장 프로젝트 현황 및 가이드

모바일 청첩장 프로젝트 현황 및 가이드

이 문서는 wget으로 복제한 바른손카드 모바일 청첩장 템플릿을 김태웅님의 개인 청첩장으로 최적화한 작업 내역을 기록합니다.

1. 프로젝트 디렉토리 구조

GitHub Pages 배포를 위해 루트 디렉토리를 기준으로 정돈되었습니다.

/ (root)
├── index.html            # 메인 청첩장 페이지 (기존 m/jeong_min.html에서 이동)
├── waiting.html          # 화환 보내기 등 준비 중인 기능을 위한 안내 페이지
├── css/                  # 공통 스타일시트
├── js/                   # 공통 및 지도 관련 자바스크립트
├── img/                  # 아이콘 및 디자인 리소스
│   └── icons/            # 로컬화된 바른손 공통 아이콘들
├── dist/                 # 갤러리 라이브러리 (Photoswipe 등) 리소스
├── upload/               # 개인화 리소스 폴더
│   ├── images/           # 메인 배경, 인물 사진, 카톡 공유 이미지
│   ├── gallery/          # 갤러리용 사진들 (photo_1 ~ photo_36)
│   └── template/         # 템플릿 전용 디자인 리소스
│       └── MC3220/       # 현재 사용 중인 MC3220 템플릿용 CSS/JS
└── docs/                 # 프로젝트 문서 및 가이드

2. 주요 커스터마이징 내역

A. 개인 정보 업데이트

  • 신랑/신부: 김태웅 ♡ 박수진
  • 일시: 2027.01.30 토요일 오전 11:00
  • 장소: 상록아트홀 5층 아트홀 (서울 강남구 언주로 508)
  • 초대문구: 1월 겨울 예식에 맞춰 따뜻한 톤으로 전면 수정

B. 로컬화 및 최적화

  • 외부 의존성 제거: 바른손 정적 서버(static.barunsoncard.com)의 모든 아이콘과 템플릿 전용 CSS/JS를 로컬로 다운로드하여 연결했습니다.
  • 이미지 독립: 메인 사진과 갤러리 사진을 로컬 경로(upload/)로 변경했습니다. 현재는 ~/Downloads의 실제 사진들로 대체된 상태입니다.
  • 불필요 파일 삭제: 고객센터, 상품 목록, 타 템플릿 등 청첩장 구동과 무관한 수천 개의 파일을 삭제했습니다.

3. 주석 처리 및 기능 보류 사항 (현재 수정 예정)

현재 아래 기능들은 코드 내에서 주석 처리되었거나 임시 페이지로 연결되어 있습니다.

  • 배경음악 (BGM): index.html 내의 오디오 태그 및 재생 버튼 섹션이 주석 처리되어 있습니다.
  • 화환 보내기: 기존 바른손 제휴 링크를 주석 처리하고, 클릭 시 waiting.html(준비 중 페이지)로 이동하도록 설정했습니다.
  • 방명록 (Guestbook): 정적 페이지 배포 특성상 데이터 저장이 불가능하므로 HTML 섹션을 전면 삭제하고 관련 m2 파일들을 제거했습니다.
  • 혼주 연락처: 신랑/신부 번호는 업데이트되었으나, 부모님 번호는 현재 링크만 제거된 상태입니다.
  • 축의금 계좌: 모든 은행명이 “수정예정”으로 표기되어 있으며 계좌번호는 “-“로 비워져 있습니다.

4. 향후 유지보수 가이드

지도 작동시키기

현재 네이버 지도 API v3 코드가 삽입되어 있으나, ncpKeyId가 비어 있습니다.

  1. 네이버 클라우드 콘솔에서 Client ID 발급
  2. index.htmlYOUR_CLIENT_ID 부분을 실제 키로 교체

사진 교체하기

upload/ 폴더 내의 이미지 파일들을 동일한 이름으로 덮어쓰기하면 HTML 수정 없이 사진이 바뀝니다.

  • 메인 배경: upload/images/main_bg.jpg
  • 메인 인물: upload/images/main_photo_real.jpg
  • 카톡 공유: upload/images/kakao_share.jpg
  • 갤러리: upload/gallery/photo_1.jpg ~ photo_36.jpg

제작 정보: Designed & Crafted by 김태웅