모바일 청첩장 오픈소스 프로젝트 소개 – 누구나 쉽게 예쁜 모바일 청첩장 만들기

결혼을 준비하면서 진행하게 되는 것 중 하나가 바로 청첩장이다. 종이 청첩장과 모바일 청첩장을 만들어야 하는데, 모바일 청첩장을 직접 제작하면 비용도 절감할 수 있고 내가 원하는 대로 만들고 평생 간직할 수 있는 장점이 있다. 업체에 맡길까 하다가 한번 직접 만들어보기로 했고, 나름 결과물이 괜찮게 나온 것 같아서 다른 사람들도 이용할 수 있게 공개해본다(상업적 이용은 금지). 쉽게 config 설정과 이미지만 바꾸고 설명을 따라하면 할 수 있도록 만들었다. 이 프로젝트는 누구나 개인적인 목적으로는 무료로 사용할 수 있으며, 모바일 환경에 최적화된 반응형 디자인과 다양한 기능을 제공한다.

 

모바일 청첩장 프로젝트 개요

이 프로젝트는 Next.js와 TypeScript, styled-components 등 최신 웹 기술을 활용하여 제작한 모바일 청첩장 웹사이트이다.

모든 기기에서 최적의 사용자 경험을 제공하며, 사용자가 직접 내용을 손쉽게 수정할 수 있도록 설계하였다.

• 프로젝트 깃허브: https://github.com/jw-koo/wedding-invitation
• 샘플 사이트: 모바일 청첩장 데모 바로가기

 

모바일 청첩장 주요 기능

• 세로형 전체 화면 메인 이미지와 결혼 정보 표시
• 섹션별로 구분된 결혼 관련 정보 제공 (동적 배경색 시스템)
• 실시간 D-day 카운트다운 타이머
• 네이버 지도 API를 활용한 위치 정보 및 길찾기 기능
• 이미지 갤러리(스크롤/그리드 레이아웃, 위치 설정, 터치 스와이프 지원)
• 참석 여부 응답 시스템 및 Slack 연동 알림
• 계좌번호 아코디언 펼침/접기 및 복사 기능
• 신랑/신부측 배차 안내 아코디언 기능
• Web Share API를 활용한 청첩장 공유 기능 및 URL 복사 기능
• 반응형 디자인 및 모바일 UX 최적화

 

모바일 청첩장 기술 스택

• Next.js 14 (App Router)
• TypeScript
• styled-components
• 네이버 지도 API
• Web Share API
• Slack Webhook API

 

모바일 청첩장 설정 방법

README.md 파일에도 상세히 적어놨으니 그걸 참고해도 되고, 이 글을 읽어도 된다.

 

1. 프로젝트 클론 및 설치

git clone https://github.com/jw-koo/wedding-invitation.git
cd wedding-invitation
npm install

 

2. 환경 변수 설정

.env.local 파일을 생성하여 네이버 지도 API, Slack Webhook, 사이트 URL을 입력한다.

.sample.env 파일을 참고해서 복사하여 사용해도 된다. 파일에 한글로 자세한 설명도 달아놨다.

NEXT_PUBLIC_NAVER_MAP_CLIENT_ID=your_naver_map_client_id
NEXT_PUBLIC_SLACK_WEBHOOK_URL=your_slack_webhook_url
NEXT_PUBLIC_SITE_URL=https://your-wedding-site.com

 

3. 개발 서버 실행

npm run dev

 

4. 청첩장 내용 수정

src/config/wedding-config.ts 파일을 열어 결혼식 정보, 일정, 장소, 갤러리, 계좌 정보 등 원하는 내용을 자유롭게 수정할 수 있다.

RSVP(참석 여부) 기능, Slack 알림, 갤러리 레이아웃 등도 옵션으로 설정 가능하다.

5. 이미지 및 폰트 추가

• 이미지는 public/images/ 폴더에 추가한다.
• 폰트는 public/fonts/ 폴더에 추가한다.

6. 배포

Vercel, Netlify 등에서 손쉽게 배포할 수 있다.

환경 변수만 설정하면 바로 프로덕션 환경에서 사용할 수 있다.

 

오픈소스 및 라이선스

이 프로젝트는 CC BY-NC-ND(저작자표시-비영리-변경금지) 라이선스 하에 공개되어 있다.

개인적인 결혼식 용도로는 자유롭게 사용할 수 있지만, 상업적 이용이나 2차 배포, 개작은 금지된다.

 

기여

누구나 컨트리뷰션을 할 수 있다. README 파일을 참고해서 이슈를 만들고 작업해서 Pull Request 를 해주면 된다. 좋은 기능들이 추가되고 많은 사람들이 더 유용하게 사용할 수 있으면 좋을 것 같다.

 

결론

모바일 청첩장은 이제 결혼 준비의 필수 요소가 되었다.

이 오픈소스 프로젝트를 활용하면 누구나 쉽고 빠르게, 그리고 예쁘게 모바일 청첩장을 만들 수 있다.

직접 개발하고 사용한 프로젝트인 만큼, 실제 결혼식에 바로 적용할 수 있을 정도로 실용적이고 완성도가 높다.

많은 분들이 자유롭게 활용하여 소중한 순간을 더욱 특별하게 만들었으면 한다.