무료로 돌잔치 모바일 초대장 만들기 : GitHub Pages 배포

모바일 돌잔치 초대장 만들기부터 GitHub Pages 배포까지

돌잔치를 준비하면서 종이 초대장 대신, 카카오톡이나 문자로 간편하게 전달할 수 있는 모바일 초대장을 직접 만들어 보았습니다.

처음에는 예전에 사용 중이던 웹호스팅을 이용하려고 했지만 생각해보니까 사용을 중지했었기에, 별도의 비용 없이 정적 웹사이트를 배포할 수 있는 GitHub Pages를 활용했습니다.

돌잔치 모바일 초대장 메인 페이지 및 표지

* 일부 데이터는 예시용으로 입력되어 있습니다.

이번 글에서는 크게 두 가지 내용을 정리하려고 합니다.

1. HTML, CSS, JavaScript로 모바일 돌잔치 초대장을 만든 과정
2. 완성한 초대장을 GitHub Pages에 무료로 배포한 과정

 

---

모바일 초대장을 직접 만든 이유

요즘에는 돌잔치 초대장은 대부분 모바일 형태로 만들어서 스마트폰으로 전달하고 확인한다는 얘기들을 들었습니다.

종이 초대장도 의미가 있지만, 아주 가까운 지인들끼리 모여서 하는 잔치에 종이 초대장은 품이 많이 드는데
모바일 초대장은 링크 하나만 보내면 되고 행사 정보가 변경되었을 때도 바로 수정할 수 있다는 장점이 있습니다.

또한 다음과 같은 기능들을 함께 넣고 싶었습니다.

• 아이 사진과 이름
• 초대 문구
• 돌잔치 날짜와 시간
• 행사 장소와 주소
• 네이버지도 및 카카오맵 연결
• 돌잔치까지 남은 시간 표시
• 사진 갤러리
• 전화 및 문자 연결
• 계좌번호 복사
• 초대장 링크 공유

 

이번 초대장은 별도의 프레임워크 없이 HTML, CSS, JavaScript만 사용해 제작했습니다.

 

---

1. 모바일 돌잔치 초대장 만들기

프로젝트 구성

파일은 다음과 같이 구성했습니다.

posting-invitation/
├─ index.html
├─ README.md
├─ .nojekyll
└─ assets/
   ├─ css/
   │  └─ style.css
   ├─ js/
   │  ├─ config.js
   │  └─ main.js
   └─ images/
      ├─ main.jpg
      ├─ gallery-01.jpg
      ├─ gallery-02.jpg
      └─ ...

 

파일별 역할은 다음과 같습니다.

index.html

모바일 초대장의 전체 화면 구조를 담당합니다.
초대 문구, 행사 정보, 사진 갤러리, 연락처, 공유 버튼이 들어갈 영역을 구성했습니다.

style.css

초대장의 전체 디자인과 모바일 반응형 화면을 담당합니다.
스마트폰에서 보기 편하도록 콘텐츠 너비를 제한하고, 버튼 크기와 글자 간격도 모바일 기준으로 조정했습니다.

config.js

아이 이름, 행사 날짜, 장소, 연락처처럼 자주 수정하는 정보를 한곳에서 관리합니다.

main.js

설정값을 화면에 표시하고, 카운트다운과 사진 확대, 계좌번호 복사, 공유 기능을 처리합니다.

 

---

수정할 정보를 config.js에 모으기

* 일부 데이터는 예시용으로 입력되어 있습니다.

초대장을 만들 때 가장 중요하게 생각한 부분은 유지보수였습니다.

정보를 바꿀 때마다 HTML을 직접 수정하면 실수하기 쉽기 때문에, 변경 가능한 정보는 config.js에 모았습니다.

window.INVITATION_CONFIG = {
  baby: {
    name: "김사랑",
    englishName: "SARANG",
    eventDate: "2026-08-15",
    eventTime: "오후 12시 00분",
    mainImage: "assets/images/main.jpg",
    message: `사랑으로 키운 소중한 아이가
어느덧 첫 번째 생일을 맞았습니다.
기쁜 날 함께 축복해 주세요.`
  }
};

아이 이름이나 날짜가 변경되더라도 이 파일만 수정하면 됩니다.

대표 사진도 파일 경로만 바꾸면 됩니다.

mainImage: "assets/images/main.jpg"

갤러리 사진도 배열로 관리했습니다.

gallery: [
  "assets/images/gallery-01.jpg",
  "assets/images/gallery-02.jpg",
  "assets/images/gallery-03.jpg",
  "assets/images/gallery-04.jpg"
]

이 방식으로 구성하면 사진을 추가하거나 순서를 변경하기도 편합니다.

 

---

모바일 중심으로 화면 구성하기

초대장은 PC보다 스마트폰으로 보는 비율이 높기 때문에 모바일 화면을 기준으로 제작했습니다.

전체 콘텐츠 영역의 최대 너비를 제한하고, 화면이 넓은 PC에서도 모바일 초대장처럼 보이도록 구성했습니다.

.page {
  width: min(100%, 680px);
  margin: 0 auto;
  overflow: hidden;
}

버튼은 손가락으로 누르기 쉽도록 충분한 높이를 주었습니다.

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

사진 갤러리는 모바일 화면에서 두 줄로 자연스럽게 보이도록 구성했습니다.

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

 

---

돌잔치 카운트다운 기능

행사일까지 남은 시간을 보여주는 카운트다운 기능도 추가했습니다.

function calculateCountdown(eventDate) {
  const targetDate = new Date(`${eventDate}T00:00:00`);
  const difference = targetDate.getTime() - Date.now();

  if (difference <= 0) {
    return {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    };
  }

  return {
    days: Math.floor(difference / 86400000),
    hours: Math.floor((difference % 86400000) / 3600000),
    minutes: Math.floor((difference % 3600000) / 60000),
    seconds: Math.floor((difference % 60000) / 1000)
  };
}

행사 날짜는 설정 파일에서 변경할 수 있습니다.

eventDate: "2026-08-15"

날짜만 수정하면 화면의 카운트다운도 자동으로 변경됩니다.

 

---

사진 갤러리와 확대 보기

초대장에는 아이 사진을 여러 장 볼 수 있는 갤러리를 넣었습니다.

사진을 누르면 확대 화면이 열리도록 구현했습니다.

function openLightbox(imageUrl) {
  const dialog = document.querySelector("[data-lightbox]");
  const image = document.querySelector("[data-lightbox-image]");

  if (!dialog || !image) {
    return;
  }

  image.src = imageUrl;
  dialog.showModal();
}

스마트폰에서는 사진을 크게 볼 수 있어 일반 이미지 목록보다 훨씬 보기 좋았습니다.

 

---

전화와 문자 연결

부모님 연락처는 전화와 문자 버튼으로 연결했습니다.

<a href="tel:01000000000">전화</a>
<a href="sms:01000000000">문자</a>

스마트폰에서 버튼을 누르면 전화 앱이나 문자 앱이 바로 실행됩니다.

 

---

계좌번호 복사 기능

계좌번호는 직접 드래그해서 복사하지 않아도 되도록 복사 버튼을 추가했습니다.

async function copyAccountNumber(accountNumber) {
  try {
    await navigator.clipboard.writeText(accountNumber);
    alert("계좌번호가 복사되었습니다.");
  } catch (error) {
    console.error(error);
    alert("계좌번호를 복사하지 못했습니다.");
  }
}

모바일에서는 이런 작은 기능이 실제 사용성을 많이 높여 줍니다.

참고로 이 부분은 실제 돌잔치에서는 많이 사용하지 않을 것 같은 기능으로 저도 실제 초대장에는 없는 영역이지만, 추후 친인척들 모바일 첩청장 혹은 회비가 필요한 모임장들을 만들어 주거나 도움을 줄때 필요할 듯하여 미리 구상해놓은 부분입니다.

또한 GitHub Pages는 공개 웹사이트이므로 계좌번호와 연락처를 표시할 때는 공개 범위를 고려해야 합니다.

 

---

지도 연결하기

행사 장소는 카카오맵과 네이버지도 링크로 연결했습니다.

place: {
  name: "행복한 연회장 3층",
  address: "서울특별시 행복구 사랑로 123",
  kakaoMapUrl: "https://map.kakao.com/...",
  naverMapUrl: "https://map.naver.com/..."
}

지도에서 행사 장소를 검색한 뒤 공유 링크를 복사해 넣으면 됩니다.

 

---

초대장 공유 기능

모바일 초대장의 가장 큰 장점은 링크 하나로 공유할 수 있다는 점입니다.

Web Share API를 지원하는 스마트폰에서는 기본 공유 화면을 사용할 수 있습니다.

async function shareInvitation() {
  const shareData = {
    title: "우리 아이의 첫 번째 생일",
    text: "소중한 분들을 첫돌에 초대합니다.",
    url: window.location.href
  };

  if (navigator.share) {
    await navigator.share(shareData);
    return;
  }

  await navigator.clipboard.writeText(window.location.href);
}

공유 기능을 지원하지 않는 브라우저에서는 링크를 복사하도록 처리했습니다.

 

---

2. GitHub Pages로 무료 배포하기

모바일 초대장을 완성한 뒤에는 다른 사람이 접속할 수 있도록 웹에 배포해야 합니다.

이번에는 별도의 웹호스팅 대신 GitHub Pages를 사용했습니다.

GitHub Pages는 GitHub 저장소에 있는 HTML, CSS, JavaScript 파일을 웹사이트로 공개할 수 있는 기능입니다.

 

---

GitHub 저장소 만들기

GitHub에서 새로운 저장소를 만들었습니다.

 

저장소 이름은 다음과 같이 정했습니다.

posting-invitation

저장소 이름은 나중에 페이지 주소에 포함됩니다.

제 GitHub 사용자명은 yoosple이고, 저장소 이름은 posting-invitation이므로 주소는 다음과 같습니다.

https://yoosple.github.io/posting-invitation/

 

여기서 주의할 점은 GitHub Pages 주소에 로그인 이메일이 들어가지 않는다는 것입니다.

GitHub Pages 주소는 이메일이 아니라 GitHub 사용자명을 기준으로 생성됩니다.

 

---

파일 업로드하기

완성한 프로젝트 파일을 GitHub 저장소에 업로드합니다.

 

가장 중요한 점은 index.html이 저장소 최상위에 있어야 한다는 것입니다.

올바른 구조는 다음과 같습니다.

posting-invitation/
├─ index.html
├─ README.md
├─ .nojekyll
└─ assets/

 

 

다음처럼 폴더가 한 단계 더 들어가면 페이지가 정상적으로 열리지 않을 수 있습니다.

posting-invitation/
└─ github-pages-test/
   ├─ index.html
   └─ assets/

 

---

GitHub Pages 설정

파일 업로드가 끝나면 저장소의 설정으로 이동합니다.

Repository → Settings → Pages

Settings 위치

Pages 위치

 

Build and deployment 항목을 다음과 같이 설정합니다.

Source: Deploy from a branch
Branch: main
Folder: /(root)

 

설정을 저장하면 GitHub가 자동으로 페이지를 배포합니다.

 

생성되는 주소 형식은 다음과 같습니다.

https://GitHub사용자명.github.io/저장소이름/

이번 초대장의 실제 주소는 다음과 같습니다.

https://yoosple.github.io/posting-invitation/

 

---

배포했는데 화면이 이상할 때

GitHub Pages 주소는 열리는데 일부 내용이 표시되지 않거나 디자인이 깨지는 경우가 있습니다.

이때는 아래 항목을 확인하면 됩니다.

index.html 위치

저장소 첫 화면에 index.html이 바로 보여야 합니다.

posting-invitation/index.html

 

JavaScript 파일 위치

이번 초대장은 JavaScript로 내용을 채우기 때문에 다음 파일이 반드시 필요합니다.

assets/js/config.js
assets/js/main.js

 

파일명 대소문자

GitHub Pages에서는 파일명 대소문자를 구분합니다.

config.js
Config.js

두 파일은 서로 다른 파일로 인식됩니다.

 

상대 경로 사용

이미지와 CSS, JavaScript 경로는 다음처럼 상대 경로를 사용하는 것이 안전합니다.

assets/images/main.jpg
assets/css/style.css
assets/js/main.js

경로 앞에 /를 붙이면 저장소 하위 경로에서 문제가 생길 수 있습니다.

 

Pages 설정 확인

Branch: main
Folder: /(root)

 

캐시 새로고침

수정한 내용이 바로 반영되지 않을 때는 강력 새로고침을 합니다.

Ctrl + F5

모바일에서는 시크릿 모드로 접속해 확인하는 것도 방법입니다.

 

---

GitHub Pages를 사용한 이유

GitHub Pages를 사용하면서 느낀 장점은 다음과 같습니다.

• 별도의 웹호스팅 비용이 필요하지 않음
• HTML, CSS, JavaScript 파일만으로 배포 가능
• 수정한 파일을 다시 올리면 바로 반영 가능
• 기본 HTTPS 지원
• GitHub 저장소에서 파일과 변경 이력을 관리할 수 있음
• 별도 프로그램 설치 없이 링크로 공유 가능

모바일 초대장처럼 서버 기능이 필요하지 않은 정적 웹사이트에는 잘 맞는 방식이라고 생각합니다.

 

---

GitHub Pages의 한계

GitHub Pages는 정적 웹사이트만 지원합니다.

다음 기능은 사용할 수 있습니다.

HTML
CSS
JavaScript
이미지
웹폰트

 

반면 다음 기능은 직접 사용할 수 없습니다.

PHP
MySQL
ASP.NET
서버 세션
서버 파일 저장

참석 여부나 방명록 데이터를 저장하려면 Google Forms, Firebase, Supabase 같은 외부 서비스를 추가로 연결해야 합니다.

 

---

제작 후기

이번 작업은 단순히 초대장 화면을 만드는 것보다, 실제로 링크를 공유할 수 있는 상태까지 배포하는 것이 목표였습니다.

모바일 초대장은 HTML, CSS, JavaScript만으로도 충분히 보기 좋고 편리하게 만들 수 있었습니다.

특히 정보 수정 부분을 config.js로 분리한 덕분에 아이 이름, 행사 날짜, 장소, 연락처, 사진을 비교적 쉽게 변경할 수 있었습니다.

또한 GitHub Pages를 활용해 별도의 웹호스팅 비용 없이 초대장을 공개할 수 있었습니다.

전체 과정을 정리하면 다음과 같습니다.

1. HTML로 초대장 구조 만들기
2. CSS로 모바일 화면 디자인하기
3. JavaScript로 카운트다운과 공유 기능 추가하기
4. 변경할 정보를 config.js로 분리하기
5. GitHub 저장소에 파일 업로드하기
6. GitHub Pages를 main 브랜치의 /(root)로 설정하기
7. 생성된 주소를 카카오톡이나 문자로 공유하기

모바일 초대장처럼 서버 기능이 필요하지 않고 링크로 간단히 전달할 웹페이지라면 GitHub Pages를 활용하는 방법이 좋은 선택이 될 수 있습니다.

 

---

최종 결과

완성한 모바일 돌잔치 초대장입니다.

https://yoosple.github.io/posting-invitation/

우리 아이의 첫 번째 생일

* 일부 데이터는 예시용으로 입력되어 있습니다.

이렇게 가족이나 지인에게 링크만 전달하면 별도의 앱 설치 없이 스마트폰 브라우저에서 바로 확인할 수 있습니다.

 

모바일 초대장의 HTML, CSS, JavaScript 등 웹페이지에 대한 자세한 정보는 제 깃허브 브런치에서 확인할 수 있습니다.

https://github.com/yoosple/posting-invitation

GitHub - yoosple/posting-invitation