Mini App 테스터

Mini App Tester는 텔레그램 미니앱의 JavaScript API(Telegram.WebApp)를 코드 없이 시험해 보는 무료 텔레그램 미니앱 테스트 도구입니다. 일반 브라우저에서는 Mock 모드로 API를 에뮬레이션하고, Telegram 안에서 열면 현재 클라이언트의 실제 API를 호출합니다. 텔레그램 미니앱을 만들기 전에 기능을 미리 확인하거나 클라이언트별 동작 차이를 비교할 때 유용합니다.

텔레그램 미니앱 테스트 방법

1. 아무 브라우저에서나 이 페이지를 엽니다. Mock 모드가 자동으로 시작되어 Telegram.WebApp을 에뮬레이션합니다.
2. 13개 메서드 그룹 중 하나를 펼쳐 메서드를 호출하고, 이벤트 로그와 실시간 속성 패널에서 결과를 확인합니다.
3. Telegram 안에서 테스트하려면 @BotFather에서 봇의 Mini App URL로 https://telegram-bot-api.info/telegram-mini-app-tester.html을 지정합니다(/newapp 또는 메뉴 버튼 설정). 별도 호스팅은 필요 없습니다.
4. iOS, Android, 데스크톱에서 각각 열어 version, platform, colorScheme, initData, themeParams, 안전 영역 값을 비교합니다.

테스트할 수 있는 기능

• WebApp과 버튼: ready, expand, close, MainButton, SecondaryButton, BackButton, SettingsButton.
• 팝업과 기기 기능: showPopup, QR 스캐너, HapticFeedback, 센서, 생체 인증, 위치.
• 스토리지: CloudStorage, DeviceStorage, SecureStorage.
• 권한·결제·공유: 연락처 요청, openInvoice, shareToStory, 이모지 상태, 전체 화면, downloadFile.

이벤트 로그는 viewportChanged, mainButtonClicked 등 45개 이상의 이벤트를 시각과 함께 기록합니다. Telegram 안에서는 인터페이스가 사용자의 언어로 표시됩니다.

텔레그램 미니앱 만들기: 기본 흐름

봇을 만든 뒤 HTTPS 웹 페이지에서 다른 스크립트보다 먼저 telegram-web-app.js를 불러오고, @BotFather의 /newapp 또는 메뉴 버튼으로 페이지 URL을 등록합니다. 메뉴 버튼은 Bot API Tester에서 setChatMenuButton으로 설정할 수도 있습니다.

<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script>
  const tg = window.Telegram.WebApp;
  tg.ready();
  tg.MainButton.setText('확인');
  tg.MainButton.show();
  tg.onEvent('mainButtonClicked', () => tg.showAlert('버튼을 눌렀습니다'));
</script>

Mock 모드와 실제 Telegram의 차이

미니앱은 원래 Web App이라고 불렸기 때문에 API 객체 이름이 지금도 Telegram.WebApp입니다. Mock 모드는 UI와 흐름 확인용으로, 스토리지는 localStorage로 에뮬레이션하지만 네이티브 팝업, 햅틱, 실제 사용자 데이터는 재현하지 못합니다. Mock 모드의 initData는 Telegram이 서명하지 않은 샘플이므로, 서버 검증을 테스트할 때는 Telegram 안에서 받은 실제 값을 사용해야 합니다.

개인정보 보호

테스터는 전부 브라우저에서 실행되며 봇 토큰이 필요 없고 Bot API도 호출하지 않습니다. Mock 모드의 스토리지 데이터는 브라우저의 localStorage에만 남습니다.

관련 가이드와 도구

미니앱과 함께 동작할 봇 서버를 준비한다면 텔레그램 봇 토큰 발급, 텔레그램 봇 웹훅 설정 가이드가 도움이 됩니다. 필요한 메서드는 Swagger 문서나 메서드 레퍼런스에서 찾아볼 수 있습니다.