결혼 준비를 하다 보면
청첩장, 스튜디오, 예복, 예물, 부케...
끝이 없다.
그러다 어느 순간 이런 생각이 들었다.
"결혼식 날, 하객들이 찍어준 사진들... 어떻게 모으지?"
카카오톡 단체방에 올리면 금방 위로 묻히고,
에어드롭은 애플끼리만 되고,
구글 포토 공유는 로그인이 필요하다.
뭔가 깔끔하게 한 곳에 모이는 방법이 없을까 고민하다가
결론은 하나였다.
그냥 만들기로 했다.
I. 프로젝트 목표
목표는 심플하게 잡았다.
- 링크 하나만 공유하면 누구나 접속 가능
- 로그인 없이 사진 바로 업로드
- 올라온 사진들이 갤러리에 실시간으로 쌓이도록
- 관리자(나)는 어드민 페이지에서 따로 관리
- 올라온 사진을 하객도 다운로드 가능
화려한 기능보다 "결혼식 당일 실제로 쓸 수 있는 것" 에 집중했다.
요리로 치면 미슐랭 파인다이닝이 아니라,
결혼식 뷔페처럼 — 많은 사람이 쉽고 빠르게 이용할 수 있는 것.
II. 기술 스택 & 아키텍처
| 프레임워크 | Next.js |
| 배포 | Vercel |
| DB + 스토리지 | Supabase |
| 자동화 | Zapier (Webhook → Google Drive) |
| 오프라인 진입점 | QR코드 스티커 |
Next.js + Vercel 조합은 소켓이랑 플러그처럼 짝이 딱 맞았다.
배포가 너무 간단해서 오히려 "이게 맞나?" 싶을 정도로 ㅎㅎ
III. QR코드 스티커 — 오프라인과 온라인을 잇다
사이트를 만들고 나서 한 가지 문제가 생겼다.
"URL을 어떻게 공유하지?"
결혼식장에서 20260404-gallery.vercel.app 이 URL을
직접 타이핑하는 사람은 없다.
그래서 URL을 QR코드로 만들어서 스티커로 제작했다.
그리고 이 스티커를 두 곳에 붙였다.
① 식권
하객들이 식사를 하기 위해 반드시 받아가는 식권.
여기에 QR코드 스티커를 붙였다.
② 포스터
결혼식장 곳곳에 세워둔 포스터에도 붙였다.
식권에 스티커를 붙이는건 다행(?)히도
식장에서 해주셨다.
원랜 호텔방에서 스티커 부업을 하려 했으나 덕분에 시간을 아꼈다. 나이스~
스티커 크기가 작다보니
포스터에는 잘 보이지 않았지만,
그래도 붙어있는 걸 보니 제작자 입장에선 나름 뿌듯했다.
그리고
결혼식 당일,
결혼식 사회자분에게 마무리 멘트로 식권의 QR을 스캔하면
사진을 업로드 할 수 있다고 해주셔서 그런지
하객들이 자연스럽게 QR코드를 스캔하고 사진을 올려주었다.
그리고 식권에 붙여놓길 잘했다 싶은게,
내가 올린 결혼식장은 식권이 옛날 뷔페식처럼 스티커였다.
그러니까 종이 식권을 제출하는게 아니라서 오히려 내 프로젝트랑 잘 맞았던 것!
하여 식권을 옷에 붙이고 다니면서 → 사진 촬영 → QR 스캔 → 사진 업로드
이 심플한 흐름이 생각보다 훨씬 잘 작동했다.
어떻게 알았냐고?
정신없기로 유명한 결혼식 당사자였지만,
사이트를 들어갔을 때 올라와있는 사진들을 보며
하객분들이 꽤 많이 업로드 해주었구나를 직접 보았다 !
그때의 그 속 뻥 뚫리는 짜릿함 ㅎㅎㅎ
잊지 못한다!
IV. 주요 기능
① 갤러리 + 사진 업로드
20260404-gallery.vercel.app
링크 하나로 접속, 로그인 없이 바로 업로드.
다른 하객이 올린 사진도 개별 다운로드 가능하도록 구성했다.
메인 페이지 카피는 이렇게 적었다.
"따스한 봄날의 사진첩"
"여러분의 시선으로 담아낸 소중한 순간들을 자유롭게 나누어 주세요 😊🌸"
이 문구 고르는 데 코드 짜는 것보다 오래 걸렸다.
어투 하나, 단어 하나 바뀔 때마다 느낌이 너무 달라져서
코드보다 글짓기가 훨씬 어렵다는 걸 새삼 느꼈다.
한글 만만세 \^^/
업로드된 사진은
클릭하면 모달에 다운로드 버튼을 넣어서
하객 분들 누구나 본인이 나온 사진 혹은 필요한 사진들을 다운받을 수 있도록 했다.
② Admin 페이지
/admin 경로에 비밀번호 인증 화면을 따로 만들었다.
나만 들어올 수 있고, 로그인하면 Admin Dashboard가 나온다.
대시보드에서 사진별로 할 수 있는 것들:
- Visible / Hide — 갤러리 공개 여부 설정
- Save — 사진 개별 저장
- Delete — 삭제
결혼식 당일 기준으로 총 147장의 사진이 올라왔다.
생각보다 훨씬 많은 분들이 올려주셨다.
꺄 소리질러~
V. Zapier로 자동화 구성하기
사진이 올라올 때마다 구글 드라이브에 자동 백업되면 좋겠다고 생각했다.
처음엔 Make(구 Integromat) 로 시도했다.
인터페이스도 직관적이고, 노코드 자동화 툴로 꽤 유명하니까.
그런데...
구글 드라이브 연동이 계속 말썽이었다.
OAuth 인증, 권한 설정, 트리거 인식 문제까지
이것저것 해보다가 결국 포기하고
Zapier로 갈아탔다.
Zapier는 훨씬 수월했다. 플로우는 딱 두 단계.
1단계 — Catch Hook (Webhooks by Zapier)
Supabase에 사진이 INSERT되는 순간 Webhook이 감지한다.
이때 넘어오는 데이터가 꽤 풍성한데,
이미지 URL만 오는 게 아니라
Make, Model, FNumber, ExposureTime, ISO, DateTimeOriginal 같은
EXIF 메타데이터까지 함께 넘어온다.
iPhone 13 mini로 찍은 사진의 조리개값, 셔터스피드, ISO까지 전부.
2단계 — Upload File (Google Drive)
Webhook으로 받은 이미지를 구글 드라이브에 자동 업로드.
실행 로그에 Successful이 찍히는 걸 보는 게 생각보다 꽤 뿌듯하다.
결혼식 당일 2026-04-04 21:47:59에 정상 실행된 기록이 남아있다.
참고로 Make에서 실패했던 구글 드라이브 연동이
Zapier에서는 10분도 안 걸려서 됐다.
툴 선택이 생각보다 중요하다는 걸 몸으로 배웠다.
VI. 결과물
👉 https://20260404-gallery.vercel.app
도메인에는 기억하고, 타이핑하기 쉽도록 결혼식 날짜(20260404)를 그대로 박아버렸다 ㅎㅎ
그리고 드디어
결혼식 당일,
식권과 포스터에 붙은 QR코드를 통해
하객들이 찍어준 사진 147장이 갤러리에 하나둘 쌓였다.
카카오톡 단체방 어딘가에 묻혔을 순간들이
한 곳에 고스란히 남아있으니까.
이거 만들길 진짜 잘했다.
VII. 회고
기술적으로 엄청 어려운 프로젝트는 아니었다.
하지만 실제로 쓰일 서비스를 처음부터 끝까지 혼자 만들어 배포한 경험은
어떤 토이 프로젝트와도 달랐다.
특히
배운 걸 실제로 써먹어본 나의 자신감을 채워준 뿌듯했던 프로젝트였고,
이걸 계기로 회사 안에서 다양한 AI 사내툴을 개발할 수 있는 원동력이 되는 계기였다.
또,
사용자가 '불특정 다수'가 아니라
내 결혼식에 와준 소중한 사람들이라는 사실이,
버그 하나도 더 조심스럽게 만들게 했고
UI 하나도 더 따뜻하게 만들고 싶게 했다.
그리고 Make 실패 경험도 의미가 있었다.
"유명하니까" 가 아니라
"내 스택이랑 실제로 잘 맞으니까" 를 따져봐야 한다는 것.
Zapier로 갈아탄 후 10분 만에 해결됐으니까.
그리고 QR코드 스티커를 식권에 붙이는 아이디어는
개발보다 오히려 더 잘 먹혔다.
기술이 아무리 좋아도 사람들이 접근하지 못하면 의미가 없고,
오프라인의 접점이 온라인 서비스를 살려준다는 걸 다시 한번 느꼈다.
솔직히 말하면,
결혼 준비 중에 제일 재밌었던 건
무엇보다도 이 프로젝트였다 ! ㅎㅎㅎ
내가 기획하고, 개발해서, 유저 접점에서 유저의 반응을 직접 본 경험이라니,
매번 어느 한 부분만 맡아서 일해오다가
직접 다 해보니 너무 재미있었다.
(규모가 작아서 해볼만 했던 것 도 한 몫 함)
앞으로도
내 삶에서 필요한 것들을 직접 만드는 방향으로,
내 삶을 변화시킬 수 있는 무언가를 꾸준히 공부하고
또 계속 개발해나가고 싶다.
아자아자
< 프로젝트 관련 링크 >
Next.js Supabase Zapier Vercel 사이드프로젝트 웨딩 QR코드