Communitygithub.com

mailtrap-email-integration

에이전트가 Mailtrap을 통해 트랜잭션 이메일 전송을 통합할 수 있도록 안내합니다.

mailtrap-email-integration란 무엇인가요?

이 스킬은 애플리케이션에서 트랜잭션 이메일 전송 기능을 구현할 때 Mailtrap의 Email API와 Sandbox를 효과적으로 활용하는 방법을 설명합니다. 개발 및 스테이징 환경에서는 Sandbox API를 사용하여 실제 수신자에게 이메일이 전달되지 않도록 캡처하고, 프로덕션에서는 검증된 도메인을 통해 실제 전송을 수행합니다. 인증은 Bearer 토큰 방식으로 이루어지며, 환경별로 다른 토큰을 사용해야 합니다. 프로덕션 전송 전 SPF, DKIM, DMARC와 같은 DNS 레코드를 통한 도메인 인증이 필수이며, 이를 생략하면 이메일이 전달되지 않거나 스팸 폴더로 분류될 수 있습니다. 또한, 코드 예제와 안티 패턴을 통해 API 키 하드코딩, Sandbox 미사용, 재시도 로직 부재 등 일반적인 실수를 피하고, 환경 변수 분리, 오류 처리, 로깅과 같은 모범 사례를 제시합니다. 이 스킬은 Mailtrap을 처음 도입하는 개발자나 기존 이메일 전송 코드를 검토하는 팀에 유용합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/affaan-m/ECC/tree/main/skills/mailtrap-email-integration

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Mailtrap 이메일 통합

Mailtrap의 Email API와 Sandbox를 사용하여 애플리케이션에 트랜잭션 이메일 전송을 추가하는 패턴입니다. 인증, 환경 분리 및 일반적인 전송 문제를 다룹니다.

활성화 시점

  • "이메일 보내기" 기능 구현 (회원가입 확인, 비밀번호 재설정, 알림, 영수증)
  • 개발/스테이징 환경에서 이메일이 도착하지 않는 문제 디버깅
  • 프로젝트의 첫 이메일 전송 통합 설정
  • Sandbox 분리 없이 이메일 API를 직접 호출하는 코드 검토

핵심 개념

Sandbox와 프로덕션 분리. Mailtrap은 Sandbox API를 제공하여 이메일을 전달하지 않고 캡처합니다. 개발/스테이징 환경에서 test 이메일이 실제 수신자에게 전달되지 않도록 합니다. 프로덕션 전송은 별도의 검증된 도메인 엔드포인트를 사용합니다. 개발 환경을 프로덕션 전송 엔드포인트로 설정해서는 안 됩니다.

인증. 요청 시 Authorization 헤더에 Bearer 토큰을 사용합니다. 토큰은 프로젝트별로 범위가 지정되며, Sandbox와 프로덕션은 일반적으로 다른 토큰을 사용합니다.

도메인 인증. 프로덕션 전송을 위해서는 DNS 레코드(SPF, DKIM, DMARC)를 통해 발송 도메인을 인증해야 합니다. 이 단계를 건너뛰면 이메일이 전달되지 않거나 스팸 폴더로 분류됩니다.

코드 예제

// Mailtrap Email API를 통한 프로덕션 전송
async function sendEmail(to: string, subject: string, html: string) {
  const response = await fetch("https://send.api.mailtrap.io/api/send", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.MAILTRAP_API_TOKEN}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      from: { email: "[email protected]", name: "Your App" },
      to: [{ email: to }],
      subject,
      html,
    }),
  });

  if (!response.ok) {
    throw new Error(`Email send failed: ${response.status}`);
  }
  return response.json();
}
// 동일한 호출, 프로덕션이 아닌 환경에서는 Sandbox로 라우팅
const MAILTRAP_ENDPOINT = process.env.NODE_ENV === "production"
  ? "https://send.api.mailtrap.io/api/send"
  : `https://sandbox.api.mailtrap.io/api/send/${process.env.MAILTRAP_INBOX_ID}`;

안티 패턴

안티 패턴문제점대안
개발/테스트 환경에서 프로덕션 전송 엔드포인트 사용실제 test 이메일이 실제 수신자에게 도달하여 스팸 신고 및 test 데이터 유출 위험비프로덕션 환경은 Sandbox 엔드포인트로 라우팅
API 토큰을 소스 코드에 하드코딩버전 관리에 커밋될 경우 자격 증명 유출 위험환경 변수 / 비밀 관리자에서 토큰 로드
도메인 인증 완료 전에 전송이메일이 자동으로 실패하거나 스팸으로 분류프로덕션 전송 활성화 전에 SPF/DKIM/DMARC 레코드 확인
전송 실패 시 재시도/오류 처리 부재사용자에게 비밀번호 재설정 이메일이 전달되지 않는 등 알림 실패 발생응답 상태 확인, 실패 로깅, 실행 가능한 오류 표시

모범 사례

  • Sandbox와 프로덕션 토큰은 별도의 환경 변수에 저장하고, 절대 하나의 토큰을 여러 환경에서 공유하지 않음
  • 이메일을 포함하는 프로덕션 출시 전에 발송 도메인의 DNS 레코드를 반드시 확인
  • 전송 실패를 디버깅할 수 있도록 수신자, 템플릿, 타임스탬프, 응답 코드 등의 맥락과 함께 로깅
  • 이메일 전송은 실패할 수 있는 네트워크 호출로 간주: try/catch로 감싸고 성공을 가정하지 않음

관련 스킬

api-and-interface-design, security-and-hardening, ci-cd-and-automation

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

accessibility

Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA. Use when building or auditing UI that must meet WCAG 2.2 Level AA, or when reviewing a change for keyboard, contrast, or screen-reader support.

affaan-m/content-engine

Create platform-native content systems for X, LinkedIn, TikTok, YouTube, newsletters, and repurposed multi-platform campaigns. Use when the user wants social posts, threads, scripts, content calendars, or one source asset adapted cleanly across platforms.

affaan-m/ECC

Multi-platform content distribution across X, LinkedIn, Threads, and Bluesky. Adapts content per platform using content-engine patterns. Never posts identical content cross-platform. Use when the user wants to distribute content across social platforms.

affaan-m/fal-ai-media

Unified media generation via fal.ai MCP — image, video, and audio. Covers text-to-image (Nano Banana), text/image-to-video (Seedance, Kling, Veo 3), text-to-speech (CSM-1B), and video-to-audio (ThinkSound). Use when the user wants to generate images, videos, or audio with AI.

affaan-m/manim-video

日本語翻訳:このファイルは manim-video 用の日本語翻訳が必要です

affaan-m/remotion-video-creation

Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。

affaan-m/video-editing

AI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.

agent-architecture-audit

Full-stack diagnostic for agent and LLM applications. Audits the 12-layer agent stack for wrapper regression, memory pollution, tool discipline failures, hidden repair loops, and rendering corruption. Produces severity-ranked findings with code-first fixes. Essential for developers building agent applications, autonomous loops, or any LLM-powered feature. Use when an agent or LLM feature misbehaves and the failing layer is unknown, or before shipping an agent stack.

agent-eval

Head-to-head comparison of coding agents (Claude Code, Aider, Codex, etc.) on custom tasks with pass rate, cost, time, and consistency metrics. Use when choosing between coding agents, or when a change to an agent setup needs measured pass rate, cost, and time rather than an impression.

agent-harness-construction

Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates. Use when defining or revising an agent

agentic-engineering

Operate as an agentic engineer using eval-first execution, decomposition, and cost-aware model routing. Use when planning or executing engineering work that agents will carry out end to end.

agentic-os

Build persistent multi-agent operating systems on Claude Code. Covers kernel architecture, specialist agents, slash commands, file-based memory, scheduled automation, and state management without external databases. Use when building a persistent multi-agent system on Claude Code with its own memory, commands, and scheduling.

agent-introspection-debugging

Structured self-debugging workflow for AI agent failures using capture, diagnosis, contained recovery, and introspection reports. Use when an agent run fails and you need a reproducible diagnosis instead of a retry.

agent-payment-x402

Add x402 payment execution to AI agents with per-task budgets, spending controls, and non-custodial wallets. Supports Base through agentwallet-sdk and X Layer through OKX Payments / OKX Agent Payments Protocol. Use when an agent must pay for something itself and needs per-task budgets, spending controls, and a non-custodial wallet.

agent-self-evaluation

Use after completing any non-trivial task. The agent self-rates its output on 5 axes — accuracy, completeness, clarity, actionability, conciseness — with concrete evidence per criterion. Produces a structured 1-5 scorecard with specific improvement suggestions.

agent-sort

Build an evidence-backed ECC install plan for a specific repo by sorting skills, commands, rules, hooks, and extras into DAILY vs LIBRARY buckets using parallel repo-aware review passes. Use when ECC should be trimmed to what a project actually needs instead of loading the full bundle.

ai-first-engineering

Engineering operating model for teams where AI agents generate a large share of implementation output. Use when setting team process, review gates, or ownership rules for a codebase largely written by agents.

ai-regression-testing

Regression testing strategies for AI-assisted development. Sandbox-mode API testing without database dependencies, automated bug-check workflows, and patterns to catch AI blind spots where the same model writes and reviews code. Use when adding regression coverage to AI-assisted code, or when the same model both wrote and reviewed a change.

android-clean-architecture

Clean Architecture patterns for Android and Kotlin Multiplatform projects — module structure, dependency rules, UseCases, Repositories, and data layer patterns. Use when structuring modules, layers, or data flow in an Android or KMP project.

angular-developer

Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.

관련 스킬