다른 세션이 이어받을 수 있도록 소스 전체와 작업 맥락을 정리했습니다. 영상 분석 프레임 380MB는 재현 가능한 중간 산출물이라 제외했습니다.
| 신랑 · 신부 | 이상빈 ♥ 김하린 |
| 예식 | 2027. 2. 28. (일) 12:30 |
| 장소 | 루클라비더화이트 — 서울 강남구 논현로 742 파티오나인 빌딩 2층 |
| 혼주 | 이순우 · 백명숙 의 아들 / 김종무 · 김경염 의 딸 |
| 좌표 | 37.518284, 127.029223 |
| 경로 | 크기 | 용도 | 메모 |
|---|---|---|---|
| day-eve-invitation.html | 828 KB | 마스터 소스 | 모든 수정은 여기 먼저. 이걸 래핑해서 deploy/editor 템플릿을 만든다. |
| deploy/index.html | 832 KB | 라이브 청첩장 | template.html + window.INVITE 설정 주입본. binrinday-invation.pages.dev 로 서빙 중. |
| deploy/template.html | 832 KB | 배포 템플릿 | 데이터 없는 범용본. |
| deploy/movie.html | 40 KB | 영화 컨셉 (신규) | repocu.kr 분석 기반. 13섹션. 지도·라이트박스 미구현. |
| deploy/rose-mockup.html | 20 KB | 장미 목업 A~D | 타임라인 마커. 선택 대기. |
| deploy/envelope-mockup.html | 12 KB | 봉투 재질 A~C | 선택 대기. |
| deploy/rsvp-v2.html | 16 KB | 회신 문구 A/B/C | 선택 대기. |
| deploy/rsvp-mockup.html | 12 KB | 회신 문구 구버전 | 구버전. 무시해도 됨. |
| deploy/bgm.mp3 | 1.0 MB | 배경음악 | 사용자가 직접 제공. 66.1초, 22050Hz 모노. |
| editor/index.html | 16 KB | 에디터 | 사진 18칸·계좌 24필드·타임라인 8필드. iframe srcdoc 실시간 미리보기, localStorage 자동저장, Blob 내보내기. |
| editor/template.html | 832 KB | 에디터용 템플릿 | |
| story/index.html | 1.0 MB | 동화책 버전 | 라벤더/민트/크림. 토끼+늑대 캐릭터. 승인 대기. |
| build/mk_movie.py | 36 KB | movie.html 생성기 | movie.html 은 직접 고치지 말고 이 스크립트를 고쳐서 재생성할 것. |
| orig/ | 12 MB | 원본 레퍼런스 에셋 20개 | eveholiday.co.kr 에서 받은 이미지/SVG. 치수 대조용. |
디자인 변경은 반드시 별도 HTML 목업을 만들어 주소를 먼저 드리고, 사용자가 "오케이" 한 뒤에만 라이브에 반영합니다. 사용자 원문: "목업 html로 컨셉보여주고 내가 오케이해야 서브도메인가야지", "내가 오케이 하면 반영해". 버그 수정과 사용자가 직접 지시한 수치 변경은 이 규칙의 예외입니다.
파일 전체가 순수 ASCII다. HTML·속성의 한글은 &#xXXXX;, JS 문자열은 \uXXXX. charset 헤더가 어긋나도 한글이 깨지지 않게 하려는 것. 수정 시 이 규칙을 반드시 유지할 것.
</script> 역슬래시 함정파이썬에서 <\/script> 라고 쓰면 리터럴 역슬래시가 들어가 태그가 안 닫힌다. 반드시 close = "<" + "/script>" 로 조립할 것. 이걸로 설정이 통째로 적용 안 되는 버그를 한 번 겪었다.
--u / --uf.shell 에 container-type:inline-size + --u:0.13333333cqw. 1u = 750px 기준 캔버스의 1px. position:fixed 요소는 컨테이너 쿼리가 안 먹으므로 --uf:calc(min(100vw,var(--cardmax,100vw))/750) 를 쓴다. movie.html 은 375 기준이라 --u:calc(100cqw/375).
window.INVITE = {...} 를 deploy/index.html 에 주입하고, 부트스트랩 IIFE 가 DOM 에 반영한다. template.html 은 데이터 없는 범용본으로 유지할 것.
파이썬 re.sub/str.replace + assert count==1. 앵커가 1개가 아니면 쓰지 말고 중단. 정규식 반복 치환으로 @keyframes 가 깨져 갤러리가 통째로 안 보인 적이 있다.
position:fixed 요소 위의 mix-blend-mode 는 스크롤 매 프레임마다 화면 전체를 재합성한다. .dock__flap::after 에서 제거함. 다시 넣지 말 것.
브라우저 패널이 숨겨져 있으면 document.hidden===true 가 되고, innerWidth:0 / opacity 0 같은 허위값이 나오며 스크롤 후 스크린샷이 빈 화면으로 찍힌다. 측정 전에 document.hidden 과 innerWidth>0 을 먼저 확인할 것.
/(search\\/).*$/ 처럼 역슬래시가 두 번 들어가면 정규식 리터럴이 일찍 끝나 SyntaxError 로 스크립트 블록 전체가 죽는다. split('/search/') 같은 걸 쓸 것.
요일 헤더와 1일 앞 공백(new Date(y,m,1).getDay())이 없으면 날짜가 엉뚱한 칸에 들어간다.
wrangler@3 + Node 21.5.0 (Homebrew). wrangler 4 는 Node 22 를 요구한다.
# Node 21.5.0 (Homebrew) + wrangler@3 — wrangler 4는 Node 22를 요구함 export PATH="/opt/homebrew/bin:$PATH" # 청첩장 + 모든 목업 wrangler pages deploy ./deploy --project-name binrinday-invation --branch main --commit-dirty=true # 에디터 wrangler pages deploy ./editor --project-name day-eve-editor --branch main --commit-dirty=true # 동화책 버전 wrangler pages deploy ./story --project-name br-storybook --branch main --commit-dirty=true
| 상태 | 항목 | 내용 |
|---|---|---|
| 선택 대기 | 타임라인 장미 | A~D 중 택1 보기 |
| 선택 대기 | 봉투 재질 | A~C 중 택1 보기 |
| 선택 대기 | 회신 문구 | A 삭제 / B 영문 / C 국문 보기 |
| 선택 대기 | 영화 컨셉 채택 여부 | 기존 버건디와 병행할지 결정 보기 |
| 선택 대기 | 동화책 버전 승인 | br-storybook.pages.dev |
| 사용자 입력 필요 | 계좌번호 6개 | 전부 '계좌번호 입력 전' 플레이스홀더. 실제 번호는 사용자만 제공 가능 |
| 사용자 입력 필요 | TILTED HANNAM | 예식장이 루클라비더화이트인데 이 문구가 맞는지 확인 필요 |
| 확인 대기 | day-eve-invitation 프로젝트 삭제 | 되돌릴 수 없고 기존 링크가 죽음 |
| 미해결 | 오른쪽 흰 세로선 | 재현 실패. DOM 에 테두리·그림자·가상요소 없고 가로 오버플로 0. 사용자 화면은 481px 이상으로 추정. 확실한 해법은 모든 폭에서 카드 전체폭 처리 |
| 법적 확인 | BGM 출처 표기 | 사용자가 직접 제공한 mp3. 원저작자 표기 조건이 있으면 푸터에 넣어야 함 |
touch-action:manipulation 을 페이지 전체로 (핀치 줌은 유지)mix-blend-mode:multiply 삭제box-shadow:0 0 0 1px var(--espresso) 로 덮음