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

이 문서는 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 파일들을 제거했습니다.
혼주 연락처: 신랑/신부 번호는 업데이트되었으나, 부모님 번호는 현재 링크만 제거된 상태입니다.
축의금 계좌: 모든 은행명이 “수정예정”으로 표기되어 있으며 계좌번호는 “-“로 비워져 있습니다.

3-1. 디자인 레이어 (2026-08 추가)

기존 바른손 템플릿 CSS는 건드리지 않고, 위에 덧씌우는 레이어 두 개를 추가했습니다.

css/aesthetic.css — 색·타이포·여백 토큰과 전 섹션 스타일. 파일 맨 위 :root 의 토큰(--accent, --paper-warm, --sec-pad, --gut 등)만 고치면 전체 톤이 따라옵니다.
js/aesthetic.js — 스크롤 등장 애니메이션, 예식일 달력 렌더링, 카운트다운/카운트업, 갤러리 더보기. 날짜는 파일 상단의 WEDDING_AT / ANNIVERSARY_AT 두 상수에만 있습니다.

구조가 바뀐 곳

메인(#area1) · 인사말(#area2): 800px 캔버스 절대좌표 → 일반 흐름 + flex. 좁은 화면에서 이름(“박수진”)과 인사말 끝이 잘리던 문제가 사라졌습니다. 이에 따라 main_bg.jpg, deco_02.png, deco_03.png 는 더 이상 쓰지 않습니다 (GROOM/BRIDE 라벨·구분선·”Love” 장식은 전부 텍스트/CSS로 재현).
섹션 타이틀: tit_gallery.png / tit_location.png / tit_remittance.png 이미지 → .sec-head 텍스트 마크업. 고해상도에서 선명하고 문구 수정이 쉽습니다.
예식 안내 섹션 신설: 2027년 1월 달력 + D-day + “우리가 함께한 지” 카운터. (docs/superpowers/specs/2026-05-06-wedding-timer-design.md 스펙 구현)
갤러리: 매스너리(벽돌) 2열. 각 사진의 원본 비율을 그대로 살리므로 정방형과 세로로 긴 사진이 섞여도 잘리지 않습니다. 비율은 <a> 의 data-size 에서 읽어 타일에 적용하며(js/aesthetic.js 의 applyTileRatios), 이미지가 도착하기 전에 자리를 잡아 로딩 중 화면이 튀지 않습니다. 처음 8장만 노출하고 나머지는 ‘사진 더보기’ 클릭 시 표시 → 숨겨진 사진은 배경 이미지도 내려받지 않습니다. 노출 장수는 css/aesthetic.css 의 figure:nth-of-type(n+9) 한 곳에서만 정합니다. 또한 썸네일과 확대 이미지가 서로 다른 사진이던 문제를 바로잡고, figure N 이 photo_N.jpg 를 가리키도록 정리했습니다.
계좌 팝업: 화면 가운데 박스 → 하단에서 올라오는 바텀시트.
폰트: 외부 스타일시트 13개 → 4종(Gowun Batang / Cormorant Garamond / Cinzel / Noto Sans KR) + 로컬 나눔명조. css/extra_font.css 는 쓰이지 않아 연결을 끊었습니다.

고친 레이아웃 버그

template.css 의 #area1 img { display: table } 가 메인 사진을 뷰포트보다 넓게 만들어 페이지 전체가 오른쪽으로 밀려 있었습니다.
.skin_gallery 의 repeat(3, 1fr) → repeat(3, minmax(0, 1fr)).
#wrap 이하를 border-box 로 통일 (padding 이 폭에 더해지던 문제).
.info_detail(혼주 정보 토글)은 text-indent:-9999999px + 바른손 서버 아이콘이라 사실상 보이지 않는 버튼이었습니다 → 글자 버튼으로 복원.
푸터 SNS 아이콘 SVG는 흰 글자가 포함된 이미지라 밝은 배경에서 안 보였습니다 → invert 처리.

사진 교체 시 반드시 할 일

갤러리 <a> 의 data-size 는 PhotoSwipe 확대 크기와 매스너리 타일 비율 두 곳에 쓰입니다. 값이 실제 파일과 다르면 확대 화면에서 사진이 찌그러지고 타일 비율도 어긋납니다. (실제로 원본 템플릿 사진 기준 값이 그대로 남아 있어 800x1200 세로 로 적혀 있었지만 실제 파일은 1200x900 가로 였습니다.)

사진을 갈아끼운 뒤 아래를 한 번 실행하면 실제 파일 크기로 맞춰집니다.

python3 tools/sync-gallery-sizes.py --dry-run   # 바뀔 내용 미리보기
python3 tools/sync-gallery-sizes.py             # 실제 반영

남은 것 (이번 디자인 작업 범위 밖)

혼주 성함 (temp), 계좌 “수정예정”, 안내문구 초안 톤, (Written by Gemini) 표기
화환 플로팅 배너(바른손 제휴 배너)가 노출 중
upload/gallery 는 실제로 고유 사진 10장을 두 벌로 갖고 있습니다. photo_1~18 = 1200x900 고화질, photo_19~36 = 400x300 축소본(같은 사진). 현재 갤러리는 photo_1~18 만 참조하므로 photo_19~36 은 삭제해도 됩니다.

3-2. 다크모드 — 대응하지 않기로 결정 (2026-09-12)

갤럭시 + 삼성 인터넷에서 다크모드로 열면 색이 강제로 반전됩니다. 고치려 하지 마세요. 아래 네 가지를 SamsungBrowser 30.0 / Chrome 143 에서 실측으로 모두 실패 확인했습니다.

시도	결과
`color-scheme: light only`	실패
`color-scheme: light dark` + `@media (prefers-color-scheme: dark)`	실패
`color-scheme: only light` (표준 어순)	실패
`background-image: linear-gradient(...)` — 배경을 색이 아닌 이미지로	실패

왜 막을 수 없나

진단 페이지로 확인한 두 가지가 결정적입니다.

getComputedStyle 은 우리가 지정한 값을 그대로 반환합니다. body 배경 rgb(255,255,255), 크림 박스 rgb(253,246,243) 인데 화면은 검정/짙은 갈색. 즉 브라우저가 CSS 를 무시하는 게 아니라, 전부 계산한 뒤 페인트 단계에서 뒤집습니다. CSS 색 선언은 그 단계 앞에서 끝나므로 애초에 닿지 못합니다.
prefers-color-scheme 이 false 를 반환합니다. 삼성은 강제 반전 중이라는 사실을 페이지에 알리지 않습니다. 그래서 감지해서 filter: invert() 로 되받아치는 방법도 불가능합니다 (감지 자체가 안 됨).

왜 무시해도 되나

청첩장은 대부분 카카오톡으로 전달되고 하객은 카톡 인앱 브라우저로 엽니다. 갤럭시 다크모드 상태에서 카톡으로 열어본 결과 반전 없이 정상(라이트) 표시를 확인했습니다. 삼성 인터넷으로 주소를 직접 입력해 들어오는 소수에게만 해당하고, 그마저 사용자가 스스로 켠 설정이 사이트 의사를 이기도록 만들어진 기능입니다.

그래도 대응해야 한다면

방향은 “반전을 막는다”가 아니라 “반전된 결과가 흉하지 않도록 팔레트를 조정한다” 뿐입니다. 배경을 실제 이미지 파일로 까는 방법은 배경은 살릴 수 있어도 글자색은 여전히 반전되어 크림 배경에 흰 글자가 되므로 지금보다 나빠집니다.

4. 향후 유지보수 가이드

지도

네이버 지도 API v3 가 ncpKeyId=3rxk8klag0 로 연결되어 있고 정상 동작합니다 (localhost 포함 — 이전 문서에 있던 “localhost 인증 실패” 기술은 사실이 아니었습니다). 키를 바꿔야 한다면 네이버 클라우드 콘솔에서 발급받아 index.html 의 maps.js?ncpKeyId= 뒤를 교체하면 됩니다.

사진 교체하기

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 김태웅

김태웅 (Taewoong Kim)