카카오톡으로 무료 초대장 만들기 : 모바일 초대장 직접 만들어 보내는 방법

2026.08.03 - [기타 정보/정보공유-IT] - 무료로 돌잔치 모바일 초대장 만들기 : GitHub Pages 배포

지난 글에서는 HTML, CSS, JavaScript로 돌잔치 모바일 초대장을 직접 만들고 GitHub Pages를 이용해 무료로 배포하는 방법을 알아봤습니다.

이번에는 완성한 모바일 초대장을 카카오톡으로 공유하는 기능을 추가해보겠습니다.

---

모바일 초대장을 만들고 나면 보통 주소를 복사해서 카카오톡으로 보내게 됩니다.

예를 들면 이런 식입니다.

https://아이디.github.io/브런치/

물론 이렇게 보내도 초대장을 확인할 수 있지만, 카카오톡에서 대표 사진과 초대 문구가 함께 표시되고 [초대장 보기] 버튼까지 나온다면 훨씬 초대장다운 느낌을 줄 수 있습니다.

카카오에서 공식적으로 제공하는 카카오톡 공유 기능을 이용하면 이런 형태로 구현할 수 있습니다.

이번 글에서는 GitHub Pages로 만든 무료 모바일 초대장에 '카카오톡으로 초대장 보내기' 버튼을 추가하는 방법을 알아보겠습니다.

---

카카오톡으로 초대장을 만들 수 있을까?

먼저 정확하게 이야기하면 카카오톡 안에서 HTML 모바일 초대장을 직접 제작하는 것은 아닙니다.

우리가 만든 모바일 초대장을 카카오톡 메시지 형태로 공유하는 방식입니다.

구조는 다음과 같습니다.

GitHub Pages 모바일 초대장
          ↓
카카오톡으로 공유하기
          ↓
카카오톡 실행
          ↓
친구 또는 채팅방 선택
          ↓
초대장 카드 전송
          ↓
[초대장 보기]
          ↓
GitHub Pages 모바일 초대장

초대장을 받은 사람에게는 대표 이미지와 제목, 설명 그리고 초대장으로 이동할 수 있는 버튼이 표시됩니다.

특히 돌잔치나 결혼식처럼 대부분 카카오톡으로 초대장을 전달하는 경우 유용하게 사용할 수 있습니다.

---

Kakao Developers 애플리케이션 만들기

카카오톡 공유 기능을 사용하려면 먼저 Kakao Developers에서 애플리케이션을 만들어야 합니다.

Kakao Developers에 접속해서 카카오 계정으로 로그인합니다.

https://developers.kakao.com/

로그인 후 애플리케이션을 생성합니다.

앱 이름은 자유롭게 작성하면 됩니다.

예를 들어 돌잔치 초대장이라면 다음처럼 작성할 수 있습니다.

앱 이름
돌잔치 모바일 초대장

애플리케이션을 생성한 후 앱 설정에서 앱 키를 확인합니다.

여러 종류의 키가 표시되는데 우리가 사용할 것은

JavaScript 키

입니다.

예를 들어 다음과 같은 형태입니다.

0123456789abcdef0123456789abcdef

뒤에서 사용해야 하므로 JavaScript 키를 복사해둡니다.

---

GitHub Pages 도메인 등록하기

JavaScript 키를 발급받았다고 바로 사용할 수 있는 것은 아닙니다.

카카오에 JavaScript SDK를 사용할 웹사이트 주소를 등록해야 합니다.

GitHub Pages를 사용한다면 보통 다음과 같은 주소를 사용하게 됩니다.

https://아이디.github.io

예를 들어 GitHub 아이디가 user라면

https://user.github.io

형태가 됩니다.

실제 초대장 주소가

https://user.github.io/브런치/

이라고 하더라도 기본 웹 도메인은

https://user.github.io

입니다.

Kakao Developers 앱 설정에서 JavaScript SDK를 사용할 사이트 도메인으로 해당 주소를 등록합니다.

도메인이 제대로 등록되어 있지 않으면 나중에 카카오톡 공유 기능을 실행할 때 오류가 발생할 수 있습니다.

---

Kakao JavaScript SDK 추가하기

이제 모바일 초대장 HTML에 카카오에서 제공하는 JavaScript SDK를 추가합니다.

HTML의 </body> 위쪽에 다음과 같이 추가합니다.

<script
    src="https://t1.kakaocdn.net/kakao_js_sdk/2.8.3/kakao.min.js"
    crossorigin="anonymous">
</script>

카카오 JavaScript SDK 버전은 업데이트될 수 있습니다.

따라서 실제 적용할 때는 Kakao Developers 공식 문서에서 현재 SDK 버전을 확인하는 것을 권장합니다.

https://developers.kakao.com/docs/latest/ko/javascript/download

---

카카오 SDK 초기화하기

JavaScript SDK를 추가했다면 앞에서 복사한 JavaScript 키를 이용해서 Kakao SDK를 초기화합니다.

Kakao.init('여기에_JAVASCRIPT_KEY');

예를 들면 다음과 같습니다.

Kakao.init('0123456789abcdef0123456789abcdef');

정상적으로 초기화되었는지는 다음 코드로 확인할 수 있습니다.

console.log(Kakao.isInitialized());

브라우저 개발자 도구에서

true

가 출력되면 정상적으로 초기화된 것입니다.

조금 더 안전하게 사용하려면 별도의 초기화 함수를 만들어두는 것도 좋습니다.

function initializeKakao() {
    if (typeof Kakao === 'undefined') {
        console.error('Kakao SDK를 불러오지 못했습니다.');
        return false;
    }

    if (!Kakao.isInitialized()) {
        Kakao.init('여기에_JAVASCRIPT_KEY');
    }

    return Kakao.isInitialized();
}

이미 초기화되어 있다면 다시 초기화하지 않고, SDK를 불러오지 못했다면 false를 반환하도록 만들었습니다.

---

카카오톡 공유 버튼 만들기

이제 모바일 초대장 화면에 카카오톡 공유 버튼을 추가합니다.

<button
    type="button"
    class="kakao-share-button"
    onclick="shareKakaoInvitation()">

    카카오톡으로 초대장 보내기

</button>

버튼을 카카오톡 느낌으로 만들어보겠습니다.

.kakao-share-button {
    width: 100%;
    max-width: 360px;

    padding: 15px 20px;

    border: 0;
    border-radius: 10px;

    background: #FEE500;
    color: #191919;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}

이제 노란색 카카오톡 공유 버튼이 표시됩니다.

---

카카오톡 초대장 공유 기능 만들기

버튼을 만들었으니 실제 카카오톡 공유 기능을 구현해보겠습니다.

카카오에서 제공하는 Kakao.Share.sendDefault()를 사용합니다.

function shareKakaoInvitation() {
    if (!initializeKakao()) {
        alert('카카오톡 공유 기능을 초기화하지 못했습니다.');
        return;
    }

    const invitationUrl =
        'https://아이디.github.io/브런치/';

    const imageUrl =
        'https://아이디.github.io/브런치/images/main.jpg';

    try {
        Kakao.Share.sendDefault({
            objectType: 'feed',

            content: {
                title: '○○의 첫 번째 생일에 초대합니다 ♥',

                description:
                    '20xx년 xx월 xx일 x요일 오후 12시\n○○호텔 ○○홀',

                imageUrl: imageUrl,

                link: {
                    mobileWebUrl: invitationUrl,
                    webUrl: invitationUrl
                }
            },

            buttons: [
                {
                    title: '초대장 보기',

                    link: {
                        mobileWebUrl: invitationUrl,
                        webUrl: invitationUrl
                    }
                }
            ]
        });
    }
    catch (error) {
        console.error('카카오톡 공유 실패', error);

        alert('카카오톡 공유 중 오류가 발생했습니다.');
    }
}

여기에서 자신의 초대장에 맞게 변경하면 되는 부분은 크게 네 가지입니다.

title
description
imageUrl
invitationUrl

title에는 카카오톡에 표시할 초대 문구를 입력합니다.

title: '지우의 첫 번째 생일에 초대합니다 ♥'

description에는 날짜와 장소 등을 작성합니다.

description:
    '20xx년 xx월 xx일 x요일 오후 12시\n○○호텔 ○○홀'

invitationUrl에는 GitHub Pages로 배포한 실제 모바일 초대장 주소를 입력합니다.

const invitationUrl =
    'https://아이디.github.io/브런치/';

그리고 imageUrl에는 카카오톡에 표시할 대표 이미지 주소를 입력합니다.

const imageUrl =
    'https://아이디.github.io/브런치/images/main.jpg';

---

대표 이미지 주소는 전체 URL 사용하기

이미지 주소를 설정할 때 한 가지 주의할 점이 있습니다.

다음처럼 상대 경로를 사용하기보다는

imageUrl: './images/main.jpg'

인터넷에서 접근할 수 있는 전체 URL을 사용하는 것이 좋습니다.

imageUrl:
    'https://아이디.github.io/브런치/images/main.jpg'

GitHub Pages 프로젝트에 대표 이미지를 같이 올려두었다면 브라우저에서 해당 이미지 주소를 직접 입력했을 때 이미지가 정상적으로 표시되는지 먼저 확인하면 됩니다.

---

전체 코드

지금까지 작성한 내용을 하나로 합쳐보겠습니다.

아래 코드에서 JavaScript 키, 초대장 주소, 대표 이미지 주소와 초대 문구만 자신의 환경에 맞게 변경하면 됩니다.

○○의 첫 번째 생일에 초대합니다.

 카카오톡으로 초대장 보내기 
    

        const KAKAO_JAVASCRIPT_KEY =
            '여기에_JAVASCRIPT_KEY';

        const INVITATION_URL =
            '<a href=https://아이디.github.io/브런치/';>https://아이디.github.io/브런치/';</a>

        const INVITATION_IMAGE_URL =
            '<a href=https://아이디.github.io/브런치/images/main.jpg';>https://아이디.github.io/브런치/images/main.jpg';</a>


        function initializeKakao() {

            if (typeof Kakao === 'undefined') {

                console.error(
                    'Kakao SDK를 불러오지 못했습니다.'
                );

                return false;
            }

            if (!Kakao.isInitialized()) {

                Kakao.init(
                    KAKAO_JAVASCRIPT_KEY
                );
            }

            return Kakao.isInitialized();
        }


        function shareKakaoInvitation() {

            if (!initializeKakao()) {

                alert(
                    '카카오톡 공유 기능을 초기화하지 못했습니다.'
                );

                return;
            }

            try {

                Kakao.Share.sendDefault({

                    objectType: 'feed',

                    content: {

                        title:
                            '○○의 첫 번째 생일에 초대합니다 ♥',

                        description:
                            '20xx년 xx월 x일 x요일 오후 12시\n○○호텔 ○○홀',

                        imageUrl:
                            INVITATION_IMAGE_URL,

                        link: {

                            mobileWebUrl:
                                INVITATION_URL,

                            webUrl:
                                INVITATION_URL
                        }
                    },

                    buttons: [ { title: '초대장 보기', link: { mobileWebUrl: INVITATION_URL, webUrl: INVITATION_URL } } ] }); } catch (error) { console.error( '카카오톡 공유 실패', error ); alert( '카카오톡 공유 중 오류가 발생했습니다.' ); } } </script> </body> </html>

---

GitHub Pages에 배포하기

코드 수정이 끝났다면 기존 모바일 초대장 프로젝트에 적용한 후 GitHub에 Push합니다.

GitHub Pages에 변경 내용이 반영되면 스마트폰에서 초대장 페이지를 열어봅니다.

그리고

카카오톡으로 초대장 보내기

버튼을 눌러봅니다.

정상적으로 설정되었다면 카카오톡 공유 화면이 나타나고 초대장을 보낼 친구 또는 채팅방을 선택할 수 있습니다.

카카오톡에는 다음과 같이 초대장이 표시됩니다.

카카오톡 초대장 예시

초대장을 받은 사람이 [초대장 보기] 버튼을 누르면 GitHub Pages로 만든 모바일 초대장이 열립니다.

---

카카오톡 공유가 안 될 때 확인할 부분

코드는 제대로 작성했는데 카카오톡 공유가 되지 않는다면 다음 부분을 확인합니다.

첫 번째는 JavaScript 키입니다.

Kakao.init('JavaScript 키');

REST API 키나 Native App 키가 아니라 Kakao Developers에서 발급받은 JavaScript 키를 사용했는지 확인합니다.

두 번째는 웹 도메인 등록입니다.

예를 들어 GitHub Pages 주소가

https://user.github.io

라면 Kakao Developers에도 해당 사이트 도메인이 올바르게 등록되어 있는지 확인합니다.

세 번째는 초대장 URL과 이미지 URL입니다.

브라우저 주소창에 해당 URL을 직접 입력했을 때 정상적으로 접속되는지 확인합니다.

네 번째는 가능하면 실제 스마트폰에서 테스트하는 것입니다.

카카오톡 공유 기능인 만큼 PC 브라우저에서만 확인하기보다는 스마트폰에서 초대장 페이지를 열고 실제 카카오톡으로 전송해보는 것이 가장 확실합니다.

---

JavaScript 키를 GitHub에 올려도 될까?

GitHub Pages를 사용하면 HTML과 JavaScript 코드가 공개되기 때문에 다음 코드에 들어가는 JavaScript 키도 확인할 수 있습니다.

Kakao.init('JAVASCRIPT_KEY');

JavaScript는 사용자의 브라우저에서 실행되기 때문에 JavaScript SDK에서 사용하는 키를 프론트엔드 코드에서 완전히 숨기는 것은 불가능합니다.

따라서 Kakao Developers에서 JavaScript SDK를 사용할 사이트 도메인을 정확하게 등록하고 관리하는 것이 중요합니다.

다만 서버에서 사용하는 인증정보나 액세스 토큰 같은 민감한 정보를 JavaScript 코드에 넣어도 된다는 의미는 아닙니다.

각 키와 토큰은 용도가 다르기 때문에 추가 API를 사용할 경우 카카오 공식 문서의 보안 관련 내용을 반드시 확인하는 것이 좋습니다.

---

카카오톡 공유 기능을 추가하면 좋은 점

기존 모바일 초대장도 URL만 전달하면 사용하는 데 문제는 없습니다.

하지만

https://아이디.github.io/브런치/

주소 하나만 보내는 것과 대표 이미지와 초대 문구가 포함된 초대장 카드를 보내는 것은 받는 사람 입장에서 느낌이 꽤 다릅니다.

특히 돌잔치 모바일 초대장이나 결혼식 모바일 청첩장처럼 실제 초대장을 대부분 카카오톡으로 전달하는 경우에는 활용도가 높은 기능입니다.

그리고 별도의 유료 모바일 초대장 서비스를 사용하지 않아도 됩니다.

HTML + CSS + JavaScript
        +
GitHub Pages
        +
Kakao JavaScript SDK

이 조합만으로 모바일 초대장을 무료로 배포하고 카카오톡 공유 기능까지 추가할 수 있습니다.

---

마무리

이번에는 GitHub Pages로 만든 무료 모바일 초대장에 카카오톡으로 초대장을 공유하는 기능을 추가해봤습니다.

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

Kakao Developers 앱 생성
        ↓
JavaScript 키 확인
        ↓
GitHub Pages 도메인 등록
        ↓
Kakao JavaScript SDK 추가
        ↓
Kakao.init() 초기화
        ↓
Kakao.Share.sendDefault()
        ↓
카카오톡으로 모바일 초대장 공유

처음에는 Kakao Developers에서 앱을 만들고 도메인을 등록하는 과정 때문에 조금 복잡해 보일 수 있습니다.

하지만 한 번 설정하고 나면 실제 공유 기능을 구현하는 코드는 생각보다 간단합니다.

기존에 GitHub Pages로 만든 돌잔치 모바일 초대장을 사용하고 있다면 이번 방법으로 카카오톡 초대장 공유 버튼도 추가해보세요.

단순히 URL만 전달하는 것보다 대표 이미지와 초대 문구, [초대장 보기] 버튼이 함께 표시되기 때문에 훨씬 완성도 높은 모바일 초대장을 만들 수 있습니다.

---

참고

카카오톡 공유 기능에 대한 자세한 내용과 최신 JavaScript SDK 사용 방법은 Kakao Developers 공식 문서에서 확인할 수 있습니다.

카카오톡 공유 JavaScript 공식 문서
https://developers.kakao.com/docs/latest/ko/kakaotalk-share/js-link

Kakao JavaScript SDK
https://developers.kakao.com/docs/latest/ko/javascript/getting-started