TECH 으로 돌아가기
TECH HACKER NEWS 오늘 6분 읽기 26 READS

이메일 에디터를 직접 만들지 마세요 — 앱에 통째로 끼워 넣는 Unlayer의 임베더블 빌더

이메일 에디터를 직접 만들지 마세요 — 앱에 통째로 끼워 넣는 Unlayer의 임베더블 빌더

이메일 에디터, 직접 만들어 보신 적 있나요?

SaaS 제품을 만들다 보면 언젠가 꼭 만나는 요구사항이 하나 있어요. '우리 고객이 직접 이메일 템플릿을 예쁘게 꾸밀 수 있게 해주세요'라는 건데요. 말은 간단한데, 이걸 진짜로 구현해 본 분들은 아시겠지만 드래그 앤 드롭 에디터를 바닥부터 만드는 건 몇 주짜리 일이 아니라 몇 달, 어쩌면 몇 년짜리 프로젝트거든요. contenteditable과 씨름하고, 드래그 상태 관리에 시달리고, 겨우 만들어 놓으면 이번엔 이메일 클라이언트마다 다르게 보이는 지옥이 기다리고 있죠. 이 고통을 정확히 겨냥한 회사가 있어요. Y Combinator 2022년 겨울 배치 출신인 Unlayer(언레이어)인데요, 이메일 빌더와 문서 빌더를 여러분의 앱에 '끼워 넣을 수 있는' 형태로 제공하는 제품을 들고 나왔어요.

그래서 뭘 해주는 서비스냐면

Unlayer의 핵심은 임베더블(embeddable) 에디터예요. 이게 뭐냐면, 내 서비스 화면 안에 남이 만든 완성형 에디터를 컴포넌트처럼 쏙 넣는 방식이에요. 유튜브 영상을 내 블로그에 iframe으로 넣는 것과 비슷한 개념인데, 단순히 보여주기만 하는 게 아니라 사용자가 그 안에서 드래그 앤 드롭으로 이메일이나 문서를 직접 디자인할 수 있죠. React 같은 프레임워크용 래퍼도 제공돼서, 코드 몇 줄이면 내 앱 안에 전문가급 에디터가 생기는 거예요.

사용자가 만든 디자인은 JSON 형태로 저장되고, 최종 결과물은 HTML로 내보낼 수 있어요. 그리고 여기가 진짜 중요한 부분인데, 이메일 HTML은 웹 HTML이랑 완전히 다른 세계거든요. 아웃룩은 아직도 마이크로소프트 워드의 렌더링 엔진으로 이메일을 그리고 있어서 최신 CSS가 거의 안 먹혀요. 그래서 이메일은 지금도 테이블 레이아웃과 인라인 스타일로 만들어야 하고, 지메일·아웃룩·애플 메일마다 다르게 보이는 걸 일일이 맞춰야 해요. Unlayer 같은 서비스의 핵심 가치는 이 지옥 같은 호환성 처리를 대신 해준다는 거예요.

이번 발표에서 눈에 띄는 건 이메일을 넘어 문서 빌더까지 영역을 넓혔다는 점이에요. 제안서, 인보이스, 계약서 같은 문서를 최종 사용자가 직접 편집하게 하고 싶은 SaaS가 많은데, 이것도 같은 방식으로 임베드할 수 있게 한 거죠. 개인화 변수를 넣는 머지 태그(예: {{이름}} 자리에 실제 고객 이름이 들어가는 기능)나 반응형 디자인 처리도 기본으로 지원하고요.

'빌더를 직접 빌드하지 마라'는 흐름

사실 이 시장에는 경쟁자가 꽤 있어요. Beefree(비프리)나 Stripo(스트리포)도 비슷한 임베더블 이메일 에디터를 제공하고, 오픈소스 쪽에는 GrapesJS 같은 웹 빌더 프레임워크가 있죠. 개발자가 코드로 이메일을 만드는 react-email 같은 접근도 있는데, 이건 방향이 좀 달라요. react-email은 개발자가 쓰는 도구고, Unlayer류는 개발자가 아닌 '최종 사용자'에게 편집 권한을 주는 도구거든요.

큰 그림에서 보면 이건 임베더블 SaaS라는 흐름의 한 조각이에요. 결제는 스트라이프나 토스페이먼츠를 붙이고, 채팅은 샌드버드 같은 SDK를 쓰고, 지도는 카카오맵 API를 쓰잖아요. 그것처럼 '기능 하나를 통째로 사서 붙이는' 방식이 에디터 영역까지 확장되고 있는 거예요.

우리한테는 어떤 의미일까요

국내에서도 마케팅 자동화 툴, 쇼핑몰 솔루션, CRM처럼 고객 커뮤니케이션이 들어가는 SaaS를 만드는 팀이라면 바로 검토해 볼 만해요. 다만 붙이기 전에 확인할 게 몇 가지 있어요. 첫째, 벤더 종속이에요. 디자인이 Unlayer의 JSON 포맷으로 저장되니 나중에 갈아타려면 마이그레이션 비용이 들죠. 둘째, 에디터가 외부 서버에서 로드되는 구조라면 고객 데이터가 어디까지 전달되는지 보안 검토가 필요하고요. 셋째, 한글 환경 테스트예요. 각 이메일 클라이언트에서 한글 폰트와 줄바꿈이 의도대로 나오는지는 직접 확인해 보는 게 안전해요.

정리하면, '에디터는 만들지 말고 붙여라'라는 명제를 이메일과 문서 영역에서 밀고 있는 제품이에요. 여러분이라면 어떻게 하시겠어요? 핵심 경험이 아닌 기능은 과감히 사서 붙이는 편인가요, 아니면 종속을 피하려고 직접 만드는 편인가요? 실제로 에디터류를 바닥부터 구현해 본 분들의 경험담도 궁금하네요.


🔗 출처: Hacker News

SOURCE · HACKER NEWS
원문 전체 보기 → https://unlayer.com
SHARE
처리 중...