😤 모두를 미치게 만드는 문제

Telegram Mini App을 빌드하려고 시도해 본 적이 있나요?

    코드를 작성합니다.

    ngrok을 실행합니다 (그리고 충돌하지 않기를 기도합니다).
...

여러분, 지금은 2015년이 아닙니다. 그런데도 여전히 공식 에뮬레이터가 없습니다.

"주요 어려움은 localhost를 통해 브라우저에서처럼 프로젝트를 쉽게 실행할 수 없다는 점과 개발자 콘솔(developer console)의 부재입니다."
— Habr, 2025년 3월

💡 소개합니다: TMA DevKit

Telegram Mini Apps를 위한 로컬 에뮬레이터 및 브릿지 인스펙터(bridge inspector)입니다. Redux DevTools를 window.Telegram.WebApp용으로 만든 것이라고 생각하면 됩니다.

한 문장으로 요약하자면: 패널에 Mini App URL을 붙여넣기만 하면, 휴대폰도, ngrok도, BotFather도 필요 없이 Telegram 클라이언트를 완전히 에뮬레이션하는 iframe 내부에서 실행됩니다.

✨ DevKit v2가 할 수 있는 일 (그리고 이것이 멋진 이유)

🧠 AI 기반 디버깅을 위한 MCP Server — 완전히 새로운 기능!

Model Context Protocol (MCP)을 통해 모든 AI 어시스턴트(Claude, GPT, 로컬 모델)를 연결하세요. 앱의 상태(state), 이벤트 흐름(event flow), 또는 initData 유효성 검사에 대해 질문하고 즉각적인 디버깅 제안을 받으세요.

🔧 스텁(Stub)이 아닌 실제 모크(Mock)

전체 window.Telegram.WebApp API 표면 (모든 메서드, 속성, 이벤트).

사용자의 bot token을 사용하여 HMAC-SHA-256 서명이 포함된 암호학적으로 유효한 initData 생성.
...

⚡ 5가지 원클릭 퀵 시나리오

수동 입력 없이 몇 초 만에 컨텍스트를 전환하세요.

📊 브릿지 이벤트 인스펙터 (Bridge Event Inspector)

모든 web_app_* 호출이 실시간으로 표시됩니다.

유형별 그룹화, 필터링, 일시 중지, 로그를 .txt로 내보내기.
...

☁️ CloudStorage 에디터

시각적인 키-값(key-value) 에디터입니다. 무엇이 저장되어 있는지 추측하거나 localStorage를 수동으로 조작할 필요가 없습니다.

💾 저장된 프리셋 (Saved Presets)

현재 설정(플랫폼, 사용자, 테마, 뷰포트, bot token)을 이름이 지정된 프리셋으로 저장하세요. 클릭 한 번으로 프리셋 간 전환이 가능하며, 세션 간에도 유지됩니다.

🖥️ 세련된 패널 UX

Resizable panels (like VS Code).

Zoomable device stage (25%–200%).
...

🧰 기술 스택 (Tech Stack)
컴포넌트 기술 (Component Technology)
프론트엔드 (Frontend): React 19, TypeScript, Vite
스타일링 (Styling): Tailwind CSS, shadcn/ui
모의 스크립트 (Mock Script): 약 90 KB의 vanilla JS, 의존성 없음 (zero dependencies)
테스트 (Testing): 22개 이상의 Vitest 테스트 (base64url, config, protocol, events)
라이선스 (License): MIT

🎯 다음 단계 (What's Next?)

이 프로젝트는 활발히 개발 중입니다. 계획된 사항:

더 많은 시나리오 프리셋 (More scenario presets).

사전 구축된 프롬프트 (pre-built prompts)를 통한 강화된 MCP 통합 (Enhanced MCP integration).
...

🔗 링크 (Links)

GitHub: github.com/Deus-org/tma-devkit

라이브 데모 (사용 가능한 경우) — 링크나 스크린샷을 추가하세요.

👋 참여 요청 (Call to Action)

TMA를 구축해 본 경험이 있다면, 다음 사항들에 대해 큰 도움을 주실 수 있습니다:

README에 대한 피드백 (내용이 명확한가요?).

기능 제안 (Feature suggestions).
...

⭐️ 유용하다고 느끼신다면 저장소(repo)에 Star를 눌러주세요 — 큰 힘이 됩니다!

휴대폰에서 디버깅하는 것에 지친 개발자가 만들었습니다.
함께 TMA 개발 환경을 더 나은 방향으로 만들어 갑시다! 🚀