KakaoDevelopers를 활용한 만우절 장난치기

재윤·2025년 4월 2일

aprilfoolsday kakao-prank kakaodevelopers prank 개발자 개발자밈 만우절 만우절장난 장난

163

만들게 된 계기

2025년 4월 1일.. 갑자기 친구한테 카카오페이로 100만원이 송금됐다는 카카오톡이 왔다. 만우절인걸 몰랐던 나는 송금받기를 눌렀지만 열리는 페이지는
이런 페이지였고, 페이지 url도 snuaprilfoolsday였다. 대충 서울대학교 재학생이 만우절에 장난을 치려고 급하게 만든것 같았고, github.io 주소가 노출되었길래 한번 들어가봤다.
역시나 다들 손이 빠른지 이미 제작자의 깃허브 리포지토리는 털려(?) 있었고 매년 새롭게 등장하는 템플릿이 너무 신기하고 이걸 어떻게 만들었을까 싶어서 대충 비슷하게 따라 만들어봤고, 만드는 방법을 공유하려고 이 글을 쓴다.

삽질 1. 깃허브에 올라가있는 코드는 간단하게 자바스크립트를 이용한 페이지였고, 메타데이터에 prank url을 넣어 만든 방법이였다. 우선 해당 방법대로 비슷하게 따라 만든 뒤 vercel로 배포를 해봤을때는
위와 같은 사진처럼 url이 노출되고 이미지는 썸네일처럼 보여서 꽤나 짜쳐보였다.
그래서 처음엔 카카오페이 내부 개발자가 그냥 심심해서 만든게 여기까지 공유가 된건가 ? 생각을 했지만 카카오페이와 똑같은건 아니더라도 비슷하게 다른 템플릿을 KakaoDevelopers에서 제공하는 api를 이용하면 만들 수 있을것 같다는 생각이 들었다.

다행히(?) 삽질 두번만에 비슷하게 성공을 했고, 꽤나 그럴듯한 메세지가 전송됐다.

만드는 방법

우선 KakaoDevelopers에 회원가입을 하고 내 애플리케이션 등록을 해야한다.
등록하는 방법은 추가만 하면 되고, 프로필 사진이나 이름을 설정하면 그게 공유된 템플릿에 자동으로 들어간다.

애플리케이션에 들어가면 좌측 바에서 플랫폼을 누르고, web에 사이트 도메인을 설정하면 된다.
필자는 로컬호스트와 낚시용으로 만들어져 있는 템플릿 주소를 임시로 엮어서 제작하였다.
(정확한건 아니지만 로컬호스트를 추가해야하는 이유는 템플릿을 공유하려면 자바스크립트 sdk를 통해 Kakao.Link.sendCustom()으로 실행해야 전송이 된다고 한다)
구글 사이트는 상대방을 낚게 하기 위한 주소의 도메인이다.

여기까지 등록을 했으면

메시지 탭으로 가서 메시지 템플릿을 만들면 된다. GUI 형태로 되어있어 이것저것 기능을 쉽게 추가할 수 있다.

중요한건 버튼을 삽입하고, 버튼을 눌렀을때 리다이렉팅 되는 주소를 낚는 주소로 등록해야한다.

이런식으로 임의의 템플릿을 만들고 저장을 해두면 템플릿 ID가 생성이 되고, 그 생성된 템플릿 ID를 기억해둔다.

이제 80프로까지 왔다.
마지막으로 공유하기 위한 자바스크립트 파일을 만들어야하는데
vs코드나 cursor 등 아무거나 사용해도 상관없다. index.html 파일을 만들고 아래의 코드를 붙혀넣는다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>카카오 장난 메시지 공유</title>
  <!-- 카카오 SDK 불러오기 -->
  <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      margin-top: 100px;
    }
    button {
      padding: 12px 24px;
      font-size: 18px;
      background-color: #fee500;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1>📢 중간고사 패스권 도착!?</h1>
  <p>친구에게 카카오톡 장난 메시지를 보내보세요 😆</p>
  <button onclick="sendFoolMessage()">카카오톡으로 공유하기</button>

  <script>
    // JavaScript 키로 초기화 (너의 앱 키로 바꿔야 함!)
    Kakao.init("자바스크립트 앱키 복붙하시면 됩니다.");

    function sendFoolMessage() {
      Kakao.Link.sendCustom({
        templateId: 템플릿 ID 복붙하시면 됩니다. // 너가 만든 템플릿 ID
      });
    }
  </script>

</body>
</html>