재하의 개발 블로그
회고 4 분 소요

모바일 청첩장 만들기 (1) - 하루 만에 MVP 완성하기

react typescript vite tailwindcss mobile-first wedding-invitation side-project

왜 직접 만들어줬을까

친구가 결혼을 준비하면서 모바일 청첩장 서비스들을 살펴보고 있었다. 깔끔한 템플릿도 많았지만, 개발자인 내가 "내가 만들어줄게"라고 먼저 제안했다. 원하는 디자인과 기능을 자유롭게 넣을 수 있고, 무엇보다 친구의 결혼을 기술로 축하할 수 있는 의미 있는 사이드 프로젝트가 될 것 같았다.

기술 스택 선택

빠르게 만들어야 했기에 익숙하고 생산성 높은 스택을 골랐다.

  • React 19 + TypeScript: 타입 안전성과 컴포넌트 기반 개발
  • Vite: 빠른 HMR과 빌드
  • Tailwind CSS v4: 유틸리티 기반으로 빠른 스타일링

외부 상태 관리 라이브러리 없이, useState와 props만으로 충분했다. 모바일 청첩장은 정적 데이터를 예쁘게 보여주는 게 핵심이니까.

하루의 타임라인

2025년 10월 25일, 하루 동안 12개의 커밋을 찍었다.

1. 프로젝트 초기 세팅

npm create vite@latest mobile-rsvp -- --template react-ts

Vite의 React + TypeScript 템플릿으로 시작했다. Tailwind CSS v4를 설치하고 기본 보일러플레이트를 정리했다.

2. 콘텐츠 구성

가장 먼저 한 건 청첩장에 들어갈 내용을 정리하는 것이었다. SPEC.md를 작성해서 어떤 섹션이 필요한지 계획했다.

  • 메인 사진 + 신랑/신부 이름
  • 날짜, 시간, 장소 안내
  • 양가 부모님 소개
  • 포토 갤러리
  • 캘린더 (D-day)
  • 찾아오시는 길 (카카오맵)
  • 축의금 안내
  • 카카오톡 공유

3. 핵심 기능 구현

포토 갤러리 & 배경 음악이 가장 먼저 만든 인터랙티브 기능이었다.

BackgroundMusic.tsx는 자동 재생 + 토글 버튼으로 구현했다. 브라우저 자동 재생 정책 때문에 사용자 인터랙션 후에 재생되도록 처리해야 했다.

PhotoGallery.tsx는 그리드 레이아웃의 썸네일 + 클릭 시 풀스크린 모달로 구성했다. 10장의 사진을 src/assets/gallery/에 넣고 동적으로 import했다.

WeddingCalendar.tsx는 커스텀 캘린더 컴포넌트다. 결혼식 날짜를 하이라이트하고 D-day를 계산해서 보여준다.

4. 컴포넌트 분리

처음에는 App.tsx 하나에 모든 걸 넣었다. 코드가 250줄을 넘어가자 섹션별로 컴포넌트를 분리했다.

src/components/sections/
├── MainPhotoSection.tsx     # 메인 사진 + 이름
├── DateVenueSection.tsx     # 날짜/장소
├── ParentsSection.tsx       # 양가 부모님
├── CoupleGallerySection.tsx # 포토 갤러리
├── CalendarSection.tsx      # 캘린더 + D-day
├── LocationSection.tsx      # 찾아오시는 길
├── GiftSection.tsx          # 축의금 안내
└── ShareSection.tsx         # 공유하기

각 섹션은 모바일에서 한 화면을 차지하도록 설계했다. App.tsx는 이 섹션들을 순서대로 쌓는 역할만 한다.

5. 외부 연동

카카오 SDK를 연동해서 두 가지 기능을 만들었다.

  • 카카오맵: 예식장 위치를 지도에 표시
  • 카카오톡 공유: 청첩장 링크를 카카오톡으로 공유

src/utils/kakao.ts에 SDK 초기화와 공유 로직을 분리했다.

송금 안내 섹션에서는 계좌번호 복사 기능을 Clipboard API로 구현했다.

6. 마무리 수정

마지막으로 잘못 입력된 날짜와 이름을 수정하고, 불필요한 모달 창을 제거했다. MVP에서 과도한 UX는 오히려 방해가 된다는 판단이었다.

MVP에서 배운 것

하루 만에 동작하는 제품을 만들 수 있다. 완벽하지 않아도, 핵심 기능이 동작하는 상태를 먼저 만들면 이후 개선이 훨씬 수월하다.

핵심은 세 가지였다.

  1. 익숙한 기술 스택: 새로운 기술을 배우느라 시간을 쓰지 않았다
  2. 섹션 기반 설계: 각 기능을 독립적으로 개발할 수 있었다
  3. 외부 서비스 활용: 카카오 SDK로 지도와 공유 기능을 빠르게 구현했다

다음 편에서는 하드코딩된 데이터를 JSON으로 분리하고, 스와이프와 스크롤 스냅으로 UX를 개선한 이야기를 다룬다.