Signature Studio Web Workspace (Built with Tailwind CSS)
프로젝트 개요
- 해결 과제
- 메일 서명을 사람마다 직접 작성하면 브랜드 요소가 달라지고 클라이언트별 HTML 호환성 문제를 반복해서 확인해야 했다.
- 접근 방식
- 테이블 레이아웃과 인라인 CSS를 자동으로 만들고, 로고·색상·연락처 입력과 실시간 미리보기, 다크 모드 확인을 제공했다.
- 담당 기여
- 사용 흐름과 인터페이스를 설계하고 Vanilla JavaScript로 생성·미리보기·복사 기능을 구현했다.
- 결과
- 코드를 수정하지 않고 메일에 붙여 넣을 수 있는 HTML 서명 생성 도구를 배포했다.
반복되는 코딩의 비효율 개선
Outlook, Gmail, Apple Mail 등은 HTML을 서로 다르게 렌더링합니다. 여러 메일 클라이언트에서 같은 서명 구조를 유지하려면 표(Table) 레이아웃과 인라인 CSS를 반복해서 작성해야 합니다.
Signature Studio는 이름, 연락처, 로고와 색상을 입력하면 이 구조를 자동으로 생성하고 미리 보여주는 웹 기반 이메일 서명 도구입니다.
주요 기능 및 UX 설계
데스크톱에서는 왼쪽 설정 패널과 오른쪽 미리보기를 함께 배치하고, 모바일에서는 입력과 결과를 세로로 구성해 변경 내용을 바로 확인할 수 있습니다.
- 레이아웃 템플릿: 분할형, 스택형, 중앙 정렬, 가로형의 네 가지 구조 중 목적에 맞는 형식을 선택할 수 있습니다.
- 정보와 스타일 설정: 브랜드 색상, 폰트, 기본 연락처와 주소·슬로건 같은 추가 필드를 편집할 수 있습니다.
- 다크 모드 미리보기: 어두운 배경에서 로고와 텍스트의 대비를 사전에 확인할 수 있습니다. 실제 표시는 메일 클라이언트 설정에 따라 달라질 수 있습니다.
- 서명 복사: 생성된 서명을 서식 있는 텍스트로 복사해 메일 클라이언트의 서명 설정에 붙여 넣을 수 있습니다.
기술적 챌린지: 인라인 CSS와 Table 레이아웃
일반 웹페이지와 달리 이메일 HTML은 지원 범위가 제한적이어서 <table> 구조와 인라인 CSS가 널리 사용됩니다. 이 도구는 입력 상태가 바뀔 때마다 호환성을 고려한 table HTML 문자열을 다시 생성합니다.
// 동적 템플릿 생성 로직의 일부 (Table 기반 구조)
const templates = {
split: (s) => `
<table cellpadding="0" cellspacing="0" border="0" style="font-family: \${s.font}; font-size: 13px;">
<tr>
<td width="90" valign="top" style="padding-right: 24px;">
\${s.avatar ? \`<img src="\${s.avatar}" width="90" />\` : ''}
</td>
<td width="2" valign="top">
<div style="border-left: 2px solid \${s.color}; height: 90px;"></div>
</td>
<td valign="top" style="padding-left: 24px;">
<span style="font-weight: 700;">\${s.name}</span>
...
</td>
</tr>
</table>`
};English
Email Signatures Without Repeated Coding
Email clients render HTML in different ways, so a reusable signature still requires table layouts and inline styles. Signature Studio generates that structure from a simple form, allowing users to focus on identity and contact information instead of rewriting the same markup.
The tool places form controls beside a live preview on desktop and stacks them on mobile. Users can select a layout, edit colors and fonts, add custom fields, preview contrast on a dark background, and copy the generated signature as rich text.
