Signature Studio Web Workspace (Built with Tailwind CSS)
반복되는 코딩의 비효율 개선
이메일은 여전히 가장 강력하고 공식적인 비즈니스 커뮤니케이션 수단입니다. 하지만 클라이언트(Outlook, Gmail, Apple Mail 등)마다 렌더링 방식이 달라, 깨지지 않고 깔끔한 이메일 서명을 만들기 위해서는 구시대적인 HTML 표(Table) 코딩이라는 까다로운 작업이 필요합니다.
Signature Studio는 실무자와 디자이너가 코드의 늪에 빠지지 않고, 오직 디자인과 정보의 전달에만 집중할 수 있도록 돕는 웹 기반의 이메일 서명 제너레이터입니다.
주요 기능 및 UX 설계
디자인 툴에 익숙한 사용자들을 위해, 좌측에 설정 패널(Settings)을 두고 우측(모바일은 상단)에 실시간 캔버스(Preview)를 배치하여 즉각적인 시각적 피드백을 제공합니다.
- 다양한 레이아웃 템플릿: 황금비 분할, 미니멀 스택, 중앙 정렬, 와이드 수평 등 프로페셔널한 4가지 구조를 제공하여 직군과 목적에 맞게 선택할 수 있습니다.
- 자유로운 커스터마이징: 브랜드 컬러(Hex), 폰트(산스, 고딕, 명조) 변경은 물론, 기본 정보 외에 자유롭게 추가할 수 있는 커스텀 필드(주소, 슬로건 등) 기능을 지원합니다.
- 다크모드 시뮬레이터: 메일 수신자의 다크모드 환경을 가정한 뷰어를 제공하여, 투명 배경 로고나 텍스트의 가독성이 훼손되지 않는지 배포 전에 검증할 수 있습니다.
- 원클릭 클립보드 복사: 완성된 서명을 복잡한 과정 없이 버튼 하나로 복사(Rich Text Copy)하여 메일 클라이언트 서명 설정 창에 바로 붙여넣을 수 있습니다.
기술적 챌린지: 인라인 CSS와 Table 레이아웃
현대 웹 개발에서는 Flexbox나 Grid를 사용하지만, 이메일 클라이언트의 엄격한 보안 및 렌더링 정책을 통과하려면 2000년대 방식의 <table> 구조와 인라인(Inline) CSS를 사용해야 합니다. 본 프로젝트는 상태(State) 데이터가 변경될 때마다 순수한 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>`
};Professional Email Signatures Without Coding
Email remains the most official business communication tool. However, due to inconsistent rendering across different email clients, creating a clean, unbreakable signature requires archaic HTML Table coding. Signature Studio is a web-based generator designed to help professionals and designers focus solely on brand aesthetics and information transfer, bypassing the tedious coding process.
The tool offers a real-time preview canvas alongside a settings panel. Users can choose from various layout templates (e.g., Golden Ratio Split, Minimal Stack), customize brand colors and fonts, and add dynamic custom fields. A notable feature is the Dark Mode Simulator, which allows users to instantly verify logo visibility and text legibility in dark mode environments before deployment.