왜 나는 이메일 에디터를 처음부터 다시 작성했는가: 블록에서 원자까지 재작성
Source: Dev.to
소개
안녕하세요!
6년 전, 저는 상업용 제품으로 MySigMail Card 을 출시했습니다. 솔직히 말해서 기대만큼 성장하지 못했어요. 지속 가능할 만큼 충분한 사용자를 확보하지 못해 고생했죠. 결국 동기 부여가 사라져서 다른 오픈소스 프로젝트인 massCode 에 집중하기 위해 포기했습니다.
그 프로젝트는 몇 년 동안 방치되었습니다. 마케팅 어려움 외에도 핵심 아키텍처에 시한폭탄이 있었는데, 바로 프리셋(Presets) 위에 완전히 구축돼 있었다는 점입니다.
문제: “프리셋 함정”
초기 버전에서는 사용자가 헤더가 필요하면 “Header Block”을 끌어다 놓고, 추천글이 필요하면 “Testimonial Block”을 끌어다 놓았습니다. 내부적으로는 이 블록들이 고정된 HTML 조각으로 구현돼 있었죠.
이 때문에 여러 개발자 악몽이 발생했습니다:
- 변형 폭발: 이미지를 오른쪽에 두고 싶으면 새로운 블록을 코딩해야 했고, 두 칸 대신 세 칸이 필요하면 또 다른 블록을 만들어야 했습니다.
- 유지보수 한계: 제가 병목 현상이 되었습니다. 사용자가 요청하는 모든 “작은 변경”마다 제가 코드를 업데이트해야 했습니다.
- 경직된 데이터 구조: JSON이 시각적 표현과 결합돼 있어 마이그레이션이 고통스러웠습니다.
해결책: 원자 디자인(Atomic Design) 수용
에디터를 진정으로 강력하게 만들려면 레이아웃(Layout) 과 콘텐츠(Content) 를 분리해야 한다는 것을 깨달았습니다. 기존 엔진을 버리고 재귀적인 계층 구조 시스템으로 다시 만들었습니다:
- Block (루트): 전체 너비 배경과 수직 여백을 담당하는 최상위 섹션 래퍼.
- Row (그리드): 가로 구조를 정의하고 컬럼 간격 및 모바일 콜랩싱 로직을 관리.
- Cell (유연한 컨테이너): 정렬, 차원 등을 제어하며, 중첩된 Row를 포함할 수 있어 복잡하고 다단계 그리드 구조를 구현 가능.
- Atom (콘텐츠): 실제 요소들: Text, Image, Button, Menu, Divider.
이 재귀 구조(Block → Row → Cell → Row …) 덕분에 단순한 컬럼에 국한되지 않습니다. “사이드바 + 메인 콘텐츠” 혹은 복잡한 제품 그리드와 같은 고급 레이아웃을 코드를 한 줄도 작성하지 않고 만들 수 있습니다.
기술 스택
이번 버전은 최신, 빠르고, 개발자 친화적이어야 했습니다:
- Vue 3 (Composition API): 반응형이며 모듈식 UI.
- TypeScript: 복잡한 이메일 구조에 필수적인 견고한 데이터 스키마.
- Tailwind CSS: 최신 v4를 사용해 초고속 스타일링.
- Shadcn Vue: 접근성 높은 UI 컴포넌트.
- Clean Email Output: Outlook에서도 실제로 동작하는 테이블 기반 HTML을 프로덕션 수준으로 생성.
왜 오픈소스인가?
저는 이 프로젝트를 AGPL‑3.0 라이선스로 공개하고 있습니다.
왜일까요? 첫째, 월 $500 SaaS 구독에 갇히지 않은 강력하고 삽입 가능한 이메일 빌더가 세상에 필요하다고 믿기 때문입니다.
더 깊은 이유도 있습니다. 우리는 점점 더 심화되는 벤더 락인과 중앙 집중식 통제의 시대에 살고 있습니다. 지정학적 이유로 특정 지역이 서비스에서 차단될 경우, 개발자와 사용자는 고립됩니다. 소프트웨어는 국경에 구애받지 않고 접근 가능하고 신뢰할 수 있어야 합니다.
오픈소스에 대한 열정을 바탕으로, 모두가 강력하고 자체 호스팅 가능한 이메일 빌더에 접근할 수 있도록 진정한 독립 대안을 제공하고 싶습니다.
참여하기
경직된 이메일 템플릿에 지치셨거나 Vue 3에서 복잡한 드래그‑앤‑드롭을 어떻게 구현했는지 보고 싶다면, 레포지토리를 확인해 보세요:
아키텍처에 대한 피드백을 적극적으로 찾고 있으며, 기여자를 언제든 환영합니다!