모바일 청첩장을 직접 개발해봤다

셀프 웨딩 준비하기

여지껏 결혼 준비를 웨딩 플래너 없이 우리끼리 셀프로 해왔다. 결혼식을 할 장소를 찾는 것부터 결혼 전시 기획, 스냅 사진 촬영(총 3번을 했다), 플라워 데코 업체까지.

모바일 청첩장은 약 2만원 정도면 준비할 수 있을 정도로 비용이 저렴했다. 그래서 짝꿍이 모청은 다른데에 맡겨보는게 어떻겠냐고 그랬다. 그런데 어쩌다 트위터에서 모바일 청첩장을 만들어 오픈 소스로 공개하신 분의 github 레포지토리를 봤다. 디자인은 다 되어있고 사진과 설정을 추가하면 금방 만들 수 있는 것 같았다. 내 본업이 프론트엔드 웹 개발이라 한 번 직접 해보고 싶어서 만들게 되었다. (참고한 오픈 소스 링크는 글 마지막에 있어요.)

기존에 전체적인 틀을 잘 만들어주셔서 개발 공수가 크게 들진 않았다. 결혼식장(갤러리)을 네이버 지도와 연동하는 게 필요해 네이버 클라우드와 연동이 필요했다. 방명록 기능은 Firebase로 구현되어 있었는데, Firebase 관련 설정이 필요했다. 처음 써봤는데 진짜 편하더라. DB 만든 필요도 없고 realtimeDB를 이용해 insert만 하면 알아서 생성되더라.

갤러리의 사진이 가로일 때 사진이 찌그러져 보이는 이슈가 있어서 고쳤다.

vite로 구현되어 있었는데, nextjs의 next/image와 같은 이미지 최적화 기능은 없었다. 그래서 사진이 굉장히 느리게 뜨는 이슈가 있었는데, ImageOptim 이라는 맥용 프로그램을 받아 사진 용량을 최적화했다. 10MB 짜리가 1MB 이하로 줄어드는데도 화질에 큰 차이가 없어서 신기하더라.

방명록은 귀찮은데 하지말까 했는데, 모바일 청첩장을 사람들에게 보내고 나니 잘 만들었다는 걸 알게되었다. 친구, 친척들의 축하 메시지를 읽는데 뭉클해지고 힘이 되더라.

기왕에 모청 만든거 도메인도 사서 해보자 했다.

이렇게 살 수 있는 도메인을 검색할 수 있다. 우리는 저렴한 .info를 선택했다. 두세달 정도 구매하고 싶었지만 최소 기간이 1년이라 1년어치를 구매했다.

다른 업체의 모바일 청첩장은 사용을 못해봐서 정확한 비교는 어렵겠지만, 직접 모바일 청첩장을 만드니 이런 장점이 있었다.

1. 내 마음대로 청첩장을 커스텀 할 수 있다.

원하는 글, 정보를 마음대로 추가할 수 있고 디자인도 바꿀 수 있다.

2. 내가 원하는 기능을 추가할 수 있다.

나는 좋아요 기능, 좋아요를 누르면 이모지가 나오는 기능, 방명록 기능, 아래에 sticky로 버튼이 따라다니는 기능 등을 이용했다. (기존 오픈 소스에 구현되어 있었다.) 만약 더 욕심이 생긴다면 더 재밌는 기능들을 만들 수도 있을 것이다.

3. vite, emotion, firebase 등 새로운 기술 스택을 접할 수 있었다.

4. 소액이지만 비용을 절약할 수 있다. (도메인 구입 비용 6천원 지출)

5. 내가 직접 만들었다고 자랑(?)할 수 있다.

결혼을 준비하는데는 할 일이 굉장히 많다. 나는 firebase를 써보고 싶어서 이렇게 개발했지만, 개발할 시간을 아껴 결혼 준비를 하는 것도 괜찮을 것 같다. 개발 품이 엄청 많진 않았지만 약 40~50 개 정도의 커밋을 하고, 네이버 클라우드와 firebase 에 대한 약간의 공부와 세팅하는데 시간이 들었다. 각자의 상황에 맞게 선택하면 좋을 것 같다. 더불어 좋은 오픈 소스를 공개해주신 heejin-hwang 개발자님께도 감사를 드린다.

---

오픈소스 링크

https://github.com/heejin-hwang/mobile-wedding-invitation

GitHub - heejin-hwang/mobile-wedding-invitation: 알록달록 봄 느낌이 물씬 나는 모바일 청첩장입니다.