크리에이티브
템플릿이 아니라 문서
여러분이 쓰는 것은 공개된 스키마를 가진 블록 트리예요. 나가는 것은 그 문서가 대상 — 이메일, 페이지, 폼, SMS, 푸시, 인쇄물 — 에 맞게 렌더링된 결과예요. 둘은 의도적으로 분리되어 있어요. 편집기는 교체 가능하지만 렌더링은 아니고, 그렇지 않은 척하면 마케팅 도구가 결국 서로 맞지 않는 여섯 가지 버전의 같은 메시지를 갖게 되니까요.
여섯 대상, 하나의 소스
각 대상에는 취향의 문제가 아닌 제약이 있고, 렌더러가 그것을 알고 있으니 여러분은 알 필요가 없어요.
이메일은 테이블과 인라인 CSS를 뜻해요. Outlook이 아직도 메일 레이아웃에 Word를 쓰기 때문에 flex도 grid도 없고, 일반 텍스트 대안이 자동 생성되며, 다크 모드 클라이언트가 색을 뒤집어도 살아남는 색상, 그리고 Gmail이 잘라내기 시작하는 약 102 KB 크기 가드가 있어요.
페이지는 평범한 현대적인 반응형 HTML로, 슬러그 아래에 공개되고 원하시면 여러분의 도메인에서 제공돼요. 폼은 페이지에 필드 바인딩, 유효성 검사, 허니팟, 속도 제한을 더한 것이고 — consent 근거를 정당하게 만들어낼 수 있는 유일한 연락처 유입 경로예요.
SMS는 입력하는 대로 세그먼트 수를 세요. 푸시는 제목, 본문, 아이콘, 액션, 딥 링크예요. 편지는 인쇄 CSS를 PDF로 렌더링해 주소를 붙여 발송하는 거예요.
문서 자체는 공개된 스키마를 가진 셋업으로 저장되며, 비공개 테이블에 숨겨지는 게 아니라 생태계의 문서 서비스에 있어요. 그래서 더 나은 편집기가 오는 날에도 같은 문서를 편집하고 상위에는 아무것도 바뀌지 않아요.
- 1이메일테이블, 인라인 CSS, 텍스트 대안, 다크 모드 안전, 약 102 KB 가드.
- 2페이지슬러그 아래 반응형 HTML, 여러분의 도메인에서.
- 3폼페이지에 바인딩, 유효성 검사, 허니팟, 속도 제한 추가.
- 4sms실시간 GSM-7 / UCS-2 세그먼트 카운터가 있는 텍스트.
- 5푸시제목, 본문, 아이콘, 액션, 딥 링크.
- 6letter인쇄 CSS → PDF.
- i경계면에디터는 교체 가능하지만, 대상은 그렇지 않아요. 그래서 문서에는 공개된 스키마가 있어요.
대상별로 캐시되는 렌더링 결과
병합 변수
알 수 없는 변수는 전송 시 조용히 실패하는 게 아니라 발행 시 실패해요
모든 템플릿 언어에서 누락된 키의 기본 동작은 아무것도 렌더링하지 않는 거예요. 메일에서 그러면 "안녕하세요 ,"가 사만 명에게 발송되고, 회신이 오기 전까지는 아무도 알아차리지 못해요. 그래서 문서는 발행되기 전에 변수 어휘 집합을 기준으로 검증돼요.
보간할 수 있는 항목
연락처의 이메일, 이름, 전화번호, 로케일; attrs.* — 속성은 여러분의 것이므로 열려 있어요; 조직의 이름과 우편 주소; 수신 거부 및 환경설정 링크; 그리고 메시지 자체의 제목과 프리헤더.
의도적으로 "레코드의 모든 것"이 아니라 목록으로 한정했어요. 연락처 행에는 내부 식별자도 담기는데, 그중 어떤 것도 메시지에 들어가면 안 돼요.
폴백은 누락된 변수가 아니에요
{{first_name | default:there}}는 이 연락처에만 없는 알려진 변수예요 — 절반의 행에 이름이 없는 가져온 목록 같은 경우죠. 이건 폴백을 렌더링하며 전혀 문제가 없어요.
거부되는 것은 {{frist_name}}예요: 아무에게도 존재하지 않는 변수죠. 전송 시점에는 둘이 똑같아 보여요. 하지만 발행 시점에는 전혀 다르고, 그래서 검증이 그 시점에 이뤄져요.
같은 어휘 집합이 모든 대상에서 동작하므로, 이메일용으로 쓴 문구는 다시 쓰지 않아도 SMS와 랜딩 페이지에서 렌더링돼요. 그리고 first_name은 저장된 값이 아니라 렌더링 시점에 전체 이름에서 파생돼요 — 저장된 분할은 이름이 가정에 맞지 않는 사람을 기다리는 잘못된 분할이기 때문이에요.
한 번 쓰면, 채널에 맞게 갖춰져 도착해요.
발송되기 전에
아직 고칠 수 있을 때 이뤄지는 검증들
Gmail 잘림
약 102 KB를 넘으면 Gmail은 메시지를 잘라 나머지를 대부분의 사람이 누르지 않는 링크 뒤에 숨겨요 — 맨 아래의 수신 거부 링크까지 포함해서요. 렌더러가 크기를 측정하고 발행 시 경고해요.
이미지 용량
4메가바이트짜리 히어로 사진은 크기 예산을 초과하고 휴대폰에서도 나쁘게 렌더링돼요. 이미지는 업로드 시 리사이즈되고 변환되는데, 이는 사치가 아니라 전달성 문제예요.
박스 미리보기
메시지는 데스크톱과 모바일 너비로 렌더링되고 캡처되어, 목록 보기에서 이름이 아니라 실제 모습을 보여줘요. 유료 미리보기 서비스는 사용하지 않아요.
실제 테스트 발송
실제 수신자가 받는 것과 같은 렌더러와 같은 발송 신원으로 자신에게 보내보세요. 다른 코드 경로를 거치는 미리보기는 실제 발송될 메시지에 대해 아무것도 증명하지 못해요.
붙여넣은 HTML은 살균 처리돼요
다른 곳에서 붙여넣은 콘텐츠는 저장되기 전에 살균 처리기를 거쳐요. 마케팅 이메일은 누군가의 클립보드에 무엇이 있었는지 확인하는 자리가 아니니까요.
선호하신다면 Markdown으로
Markdown으로 쓰면 렌더링해 드려요. 모델에게 이메일 HTML을 요청하는 것보다 훨씬 신뢰할 수 있고, 에이전트가 메시지를 쓰는 것이 데모가 아니라 실제로 가능한 아이디어가 되는 이유이기도 해요.
여러분의 웹사이트에서 시작하기
첫 실행에서 URL을 붙여넣으세요. ClickSomo는 페이지에서 로고, 아이콘, 매니페스트, 그리고 측정된 색상 — 누군가 추측한 색상이 아니라 — 을 읽어 여러분의 것처럼 보이는 첫 이메일을 만들어요. 플랫폼도 감지하는데, 이는 보통 가치 있는 퍼널을 제안하기에 충분해요: 쇼핑몰에는 장바구니 이탈 퍼널, 출판사에는 뉴스레터 환영 퍼널이 제안돼요.
여러분이 제공한 URL을 가져올 때마다 보호된 페처를 거쳐요: HTTP와 HTTPS만 허용하고, 리터럴 주소는 직접 검사하며, 모든 DNS 응답은 공개여야 하고, 모든 리디렉션 홉은 재검증돼요. 고객을 대신해 임의의 URL을 가져오는 것은 자신의 네트워크에 구멍을 만드는 가장 쉬운 방법 중 하나이고, 두 번 쓸 일이 아닌 코드예요.
솔직히 말하면: 웹사이트에서 생성된 첫 템플릿은 좋은 시작이지 완성된 디자인이 아니에요. 로고, 색상, 서체를 대략 맞춰 첫 발송이 데모처럼 보이지 않게 해주고, 그다음은 여러분이 편집하면 돼요 — 빈 캔버스를 바라보는 것보다 훨씬 나은 일이에요.