하루 만에 무료 Email Signature Generator를 만들었습니다 — 백엔드 없이

Source: Dev.to

위 링크에 포함된 본문을 제공해 주시면, 해당 내용을 한국어로 번역해 드리겠습니다. (코드 블록 및 URL은 그대로 유지됩니다.)

아이디어

이메일 서명이 필요했어요. 기존의 생성기들은 보통 못생기거나, 유료이거나, 당신을 추적합니다. 그래서 직접 만들었습니다.

SigCraft는 무료이며 오픈‑소스인 이메일 서명 생성기입니다. 회원가입도 없고, 백엔드도 없고, 추적도 없습니다. 순수하게 클라이언트‑사이드 HTML/CSS/JS만 사용합니다.

이메일 서명은 개인적인 것이죠. 이름, 사진, 전화번호, 소셜 링크 등을 포함합니다. 이런 정보가 서버에 닿는 걸 원하지 않았습니다.

모든 작업은 브라우저 안에서 이루어집니다:

• 사진 업로드는 Base64 로 변환되어 서명에 직접 삽입됩니다
• 미리보기가 실시간으로 렌더링됩니다
• 복사하면 풍부 텍스트와 원시 HTML 두 가지 형태를 모두 얻을 수 있습니다
• 페이지 로드 이후 네트워크 요청이 전혀 없습니다

HTML 이메일을 한 번도 만들어 본 적이 없다면, 시간을 절약해 드릴게요: 최신 CSS에 대한 모든 지식을 버리세요. 이메일 클라이언트는 웹 표준이 사라지는 곳입니다. Outlook은 Word의 렌더링 엔진을 사용하고, Gmail은 <style> 태그를 제거합니다. Yahoo는… Yahoo식으로 동작합니다.

해결책

테이블. 2026년 현재, 우리는 아직도 이메일 레이아웃에 <table>을 사용합니다. 자랑스러운 일은 아니지만, 어디서든 동작합니다:

<table>
  <tr>
    <td>
      <strong>Your Name</strong><br>
      Your Title
    </td>
  </tr>
</table>

배운 핵심 규칙

• 인라인 스타일만 — 외부/내부 CSS는 제거됩니다
• Flexbox, Grid 금지 — 레이아웃 시스템은 테이블입니다
• Base64 이미지는 대부분의 클라이언트에서 동작하지만, 일부(Outlook 데스크톱)에서는 차단될 수 있습니다
• Border‑radius는 대부분의 클라이언트에서 동작하지만, 오래된 Outlook에서는 지원되지 않을 수 있습니다
• 용량을 10 KB 이하로 유지하세요 — 일부 클라이언트는 큰 서명을 잘라냅니다

템플릿

SigCraft는 6개의 템플릿을 제공하며, 각각 색상, 글꼴, 필드, 소셜 아이콘을 완전히 사용자 정의할 수 있습니다.

Source:

외부 리소스 없이 아이콘 사용

Font Awesome CDN이나 외부 아이콘 서비스에 의존하고 싶지 않았습니다(이메일 클라이언트가 외부 리소스를 차단함). 대신 SVG 아이콘을 데이터 URI로 삽입했습니다:

<!-- Example SVG as data URI -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTAgMGgxMjB2MTIwaC0xMjB6IiBmaWxsPSIjMDAwIi8+PC9zdmc+" alt="Icon">

이렇게 하면 이미지가 차단되더라도 소셜 아이콘이 표시됩니다 — Base64 데이터가 서명 자체에 포함되어 있기 때문입니다.

복사 옵션

사용자는 두 가지 복사 옵션이 필요합니다:

1. Rich text — Gmail/Outlook 설정에 바로 붙여넣기
2. Raw HTML — HTML 입력을 허용하는 이메일 클라이언트를 위해

리치 텍스트 복사는 HTML MIME 타입을 사용하는 Clipboard API를 이용합니다:

const blob = new Blob([signatureHTML], { type: "text/html" });
const item = new ClipboardItem({ "text/html": blob });
await navigator.clipboard.write([item]);

이렇게 하면 이메일 설정에 붙여넣을 때 서식이 유지됩니다. HTML 복사는 다음과 같습니다:

await navigator.clipboard.writeText(signatureHTML);

구현 세부 사항

• HTML/CSS/JS — 바로 그거다. 프레임워크도 없고, 빌드 단계도 없음.
• GitHub Pages — 무료 호스팅, 푸시 시 자동 배포.
• 총 비용: $0 — 서버도, 데이터베이스도, API 키도 없음.

SEO (수동)

• OpenGraph + Twitter Card 메타 태그
• JSON‑LD 구조화 데이터 (WebApplication 스키마)
• 롱테일 키워드를 겨냥한 FAQ 섹션
• 시맨틱 HTML (<header>, <main>, <footer>)

향후 개선 사항

• 실시간 이메일 미리보기 추가 (모의 받은 편지함에서 서명이 어떻게 보이는지 표시)
• 프로필 사진에 대한 애니메이션 GIF 지원 (일부 사용자가 원함)
• 서명을 자동 삽입하는 Chrome 확장 프로그램 만들기

SigCraft — 무료 이메일 서명 생성기

오픈 소스입니다:

가입 필요 없음. 유료 장벽 없음. 추적 없음. 서명만 제공합니다.

---

저는 공개적으로 도구와 SaaS 제품을 만들고 있습니다. 개발자 도구에 관심이 있다면, 제가 만든 Rendly — 개발자를 위한 스크린샷 및 OG 이미지 API도 확인해 보세요.