바이브 코딩과 결혼 💍

Hann·2025년 7월 16일

곧 결혼을 앞두고, 단순히 종이 청첩장을 넘어서

우리만의 디지털 청첩장을 만들어보고 싶었다.

기존 청첩장 서비스들도 충분히 훌륭했지만,

결혼이라는 특별한 이벤트를 직접 기획하고 개발해보면

더 오랫동안 기억에 남을 것 같았다.

( 사실은 개발자니까 돈 아끼려고.. 근데 한번 더한다면 그냥 돈주고 살것같다..ㅎ)

해당 레포는 👉 github.com/dev-hann/wedding

🛠 사용 기술

ChatGPT - 사실상 구원투수 겸 메인 개발자
Next.js – SSR 기반 웹 프레임워크
TypeScript – 타입 안정성과 유지보수성 확보
Tailwind CSS – 빠른 스타일링
Vercel – 배포 및 프리뷰 공유
Prettier + ESLint – 코드 스타일 통일
카카오맵 SDK – 위치 안내

1. 구조 설계 및 폴더 구성

📁 public/        정적 이미지들
📁 src/
┣ 📁 components/ Header, Section 등 공용 컴포넌트
┣ 📁 constants/  텍스트, 계좌번호 등 정적 데이터
┣ 📁 pages/      Next.js 라우트 페이지들
┗ 📁 styles/     Tailwind config 및 글로벌 스타일

전체 구조는 컴포넌트 단위로 쪼개서 유지보수가 쉽게 구성했다.

특히 constants 폴더에 텍스트를 모아두어 한글 수정도 편하게 했고

향후 다른 커플이 이 구조를 복사해서 쓰기도 쉽게 설계했다.

2. 반응형 고려와 접근성

모바일 퍼스트로 작업했고,

헤더부터 카드 섹션, 맵까지 모두 세로 스크롤 기반으로 배치했다.

예시 코드:

<section className="flex flex-col items-center text-center">
  <h1 className="text-3xl font-bold mt-10">저희 결혼합니다</h1>
  <p className="text-lg mt-2">2025년 10월 25일 토요일 오후 2시</p>
</section>;

Tailwind 유틸리티 클래스들을 조합해 빠르게 스타일링

스크롤 내릴 때 자연스럽게 읽히도록 시각 순서도 고려

3. 공유를 위한 OG 태그 설정

카카오톡, 문자 등으로 링크를 보냈을 때

썸네일과 제목이 깔끔하게 뜨도록 설정했다.

예시 코드:

export const metadata = {
  title: "여환 ❤️ 지영 결혼합니다",
  description: "2025년 10월 25일 토요일 오후 2시, 많은 축복 부탁드립니다.",
  openGraph: {
    title: "여환 ❤️ 지영 결혼합니다",
    description: "2025년 10월 25일 토요일 오후 2시, 많은 축복 부탁드립니다.",
    images: ["/og-image.png"],
  },
};