Hacker News • 6일 전

언레이어(Unlayer): 앱에 이메일·문서 빌더를 추가하다

IMP

7/10

핵심 요약

YC W22 출신인 언레이어는 개발자가 자사 앱에 이메일, 웹 페이지, 문서 등을 쉽게 제작할 수 있는 콘텐츠 빌더를 임베드할 수 있도록 지원합니다. 단순한 SDK를 넘어 AI 콘텐츠 생성, 코드 우선 설계, 다양한 내보내기 포맷을 지원하는 강력한 개발자 플랫폼을 제공한다는 점이 특징입니다. 개발팀은 이를 활용해 별도의 에디터를 구축할 필요 없이 완성도 높은 콘텐츠 제작 환경을 사용자에게 빠르게 제공할 수 있습니다.

번역된 본문

앱에 콘텐츠 제작 기능을 구축하세요. 사용자에게 이메일, 페이지 및 문서를 위한 아름다운 빌더를 제공하세요. 템플릿, AI, 코드 우선 작성 및 개발자 API를 기반으로 전체 콘텐츠 워크플로우를 지원합니다.

시작하기 → 문서

POST /v1/designs/:id/export SDKs, APIs, CLI, 스킬(Skills), 이벤트(Events) 개발자 플랫폼

✦ 이 섹션을 더 매력적으로 만드세요 AI 어시스턴트(AI) 템플릿(Templates)

React, Angular, Vue 엘리먼트(Elements)

빌더(Builders) 앱 내에 임베드되는 언레이어 빌더 개요 보기

고객사 대규모로 서비스를 출시하는 팀들이 신뢰합니다. SOC 2 규정 준수, 99.9% 업타임 SLA, 1000개 이상의 SaaS 브랜드

플랫폼 단일 플랫폼으로 모든 제작 경험을 제공합니다. 사용자가 필요로 하는 모든 콘텐츠 환경을 구성할 수 있는 7가지 기본 요소를 제공합니다.

비주얼 빌더: 앱 내에 임베드되는 이메일, 페이지, 팝업 및 문서 빌더.
템플릿: 제품 전반에 걸쳐 브랜드 템플릿을 생성, 관리, 잠금 및 재사용.
AI 워크플로우: 사용자가 콘텐츠를 생성, 다시 작성, 개선 및 개인화할 수 있도록 도움. "이 내용을 더 간결하게 만들어줘", "문구를 다듬어줘", "CTA 추가", "번역"
미디어 및 에셋: 빌더 내에서 이미지와 파일을 업로드, 구성 및 재사용.
내보내기 및 생성: 콘텐츠를 HTML, PDF, 이미지, 일반 텍스트 및 ZIP으로 내보냅니다. 서버 측 또는 클라이언트 측에서 지원. (ZIP, IMG, PDF, HTML)
엘리먼츠: 이메일, 웹 또는 PDF로 렌더링되는 React, Angular, Vue 컴포넌트. ( - Email, Web, PDF)
개발자 플랫폼: 플랫폼을 확장하기 위한 SDK, CLI, 에이전트 스킬(Agent Skills), 이벤트 및 API.

page.tsx 코드 예시: 1 import { Editor } from '@unlayer/sdk' 2 3 < Editor 4 onLoad = { load } 5 onSave = { save } 6 />

빌더 모든 콘텐츠 유형을 위한 임베드 가능한 빌더입니다. 하나의 빌더를 임베드하거나 4개 모두를 앱에 통합할 수 있습니다. 모든 콘텐츠 유형에 대해 하나의 경험을 제공합니다. 모든 빌더에 단일 JSON 디자인 스키마를 사용합니다.

이메일 빌더 → Gmail, Outlook, Apple Mail 등 모든 이메일 클라이언트에서 안정적으로 렌더링되는 반응형 이메일을 제작합니다.
페이지 빌더 → 사용자가 섹션, 열, 브레이크포인트를 사용하여 랜딩 페이지, 양식 및 웹 콘텐츠를 디자인할 수 있도록 합니다.
문서 빌더 → 표지, 섹션 및 내보내기 준비가 완료된 PDF로 제안서, 보고서 및 계약서를 만듭니다.
팝업 빌더 → 트리거와 규칙을 사용하여 전환에 집중하는 팝업, 배너 및 리드 수집 경험을 구축합니다.

AI 제작 워크플로우에 내장된 AI입니다. 빌더 내부의 유용한 계층이며 별도의 제품이 아닙니다. 사용자는 작업 흐름을 유지하고, AI는 블록, 섹션 및 문서 수준에서 이를 지원합니다. 01 섹션 생성: 온보딩에 대한 3열 기능 섹션을 추가합니다. → 02 문구 다시 작성: 문단을 간결하게 하거나, 어조를 변경하거나, 인라인으로 번역합니다. → 03 템플릿 변형 생성: 하나의 마스터 템플릿에서 N개의 브랜드 변형을 만듭니다. → 04 콘텐츠 개인화: 병합 필드, 세분화 및 수신자별 블록을 삽입합니다. → 05 레이아웃 제안: 블록을 재구성하여 시각적 계층 구조를 더 강화합니다. →

개발자 단순한 SDK가 아닌 플랫폼입니다. SDK, REST API, React 엘리먼트, CLI, 그리고 AI 도구를 위한 에이전트 스킬(Agent Skills) 등 전체 개발자 영역을 제공합니다. 01 임베드 가능한 SDK: 타입 기반 설정, 테마, 이벤트 및 세분화된 권한 지원 02 React 엘리먼트: 동일한 JSX가 이메일 테이블, 웹 플렉스박스 또는 인쇄용 PDF로 렌더링 03 JSON 디자인: 코드와 비주얼 에디터 간 양방향 변환 지원, 버전 관리 및 비교(diff) 가능 04 CLI 및 에이전트 스킬: Cursor, Codex, Claude Code 및 CI 파이프라인 연동 지원

JavaScript 코드 예시: 01 // 언레이어 초기화 02 const builder = unlayer.createEditor({ 03 id: 'editor', 04 displayMode: 'email', 05 appearance: { 06 theme: 'modern_light' 07 } 08 }); 09 10 // 템플릿 로드 11 builder.loadDesign(template); 12 13 // HTML 내보내기 14 builder.exportHtml(function(data) { 15 const json = data.design; // 템플릿 JSON 16 const html = data.html; // 내보내기된 HTML 17 });

연결됨 · projectId 1234

사용 사례 모든 제품 내에서 제작 기능을 지원합니다. 동일한 기본 요소를 사용하여 매우 다른 환경에 맞게 적용합니다. 마케팅 플랫폼, 이메일, 랜딩 페이지 등...

원문 보기

원문 보기 (영어)

Build content creation into your app Give your users beautiful builders for emails , pages , and documents . Backed by templates, AI, code-first creation, and developer APIs to power the full content workflow. Get Started → Documentation POST /v1/designs/:id/export SDKs APIs CLI Skills Events Developer Platform Developer Platform ✦ Make this section punchier AI Assistant AI AI Templates Templates <Section> <Heading/> <Text/> <Button/> </Section> React Angular Vue Elements Elements CTA Email Page Document Builders Builders The Unlayer builder, embedded in your app Watch overview Customers Trusted by teams shipping at scale SOC 2 Compliant 99.9% Uptime SLA 1000+ SaaS brands Platform One platform. Every creation experience. Seven primitives that compose into any content surface your users need. Visual Builders Email, page, popup, and document builders embedded inside your app. welcome.email Templates Create, manage, lock, and reuse branded templates across your product. AI Workflows Help users generate, rewrite, improve, and personalize content. Make this more concise… Tighten copy Add CTA Translate Media & Assets Upload, organize, and reuse images and files inside the builder. Export & Generation Export content to HTML, PDF, image, plain text, and ZIP. Server-side or client-side. ZIP IMG PDF HTML Elements React, Angular, and Vue components that render to email, web, or PDF. < Component /> Email Web PDF Developer Platform SDK, CLI, agent skills, events, and APIs to extend the platform. page.tsx 1 import { Editor } from '@unlayer/sdk' 2 3 < Editor 4 onLoad = { load } 5 onSave = { save } 6 /> Builders Embeddable builders for every content type. Embed one builder or all four in your app. One experience for every content type. One JSON design schema for every builder. Email Builder → Create responsive emails that render reliably across every email client: Gmail, Outlook, Apple Mail. Page Builder → Let users design landing pages, forms, and web content with sections, columns, and breakpoints. Document Builder → Create proposals, reports, and contracts with cover pages, sections, and export-ready PDFs. Popup Builder → Build conversion-focused popups, banners, and lead-capture experiences with triggers and rules. AI AI built into the creation workflow . A helpful layer inside the builder. Not a separate product. Your users stay in flow; AI assists at the block, section, and document level. 01 Generate a section Add a 3-column features section about onboarding. → 02 Rewrite copy Tighten paragraphs, change tone, or translate inline. → 03 Create template variations Spin off N branded variants from one master template. → 04 Personalize content Insert merge fields, segments, and per-recipient blocks. → 05 Suggest layouts Recompose blocks into stronger visual hierarchies. → Section · Hero block ⌘ K Generate a 3-column features section about onboarding. Developers A platform , not just an SDK. The full developer surface: SDK, REST APIs, React Elements, a CLI, and agent skills for your AI tools. 01 Embeddable SDK: typed config, themes, events, and granular permissions 02 React Elements: the same JSX renders to email tables, web flexbox, or print PDF 03 JSON designs: round-trip between code and the visual editor; versionable and diffable 04 CLI and agent skills: for Cursor, Codex, Claude Code, and your CI pipelines SDK API Elements CLI Skills JavaScript 01 // Initialize Unlayer 02 const builder = unlayer . createEditor ({ 03 id : 'editor' , 04 displayMode : 'email' , 05 appearance : { 06 theme : 'modern_light' 07 } 08 }); 09 10 // Load the template 11 builder. loadDesign (template); 12 13 // Export HTML 14 builder. exportHtml ( function ( data ) { 15 const json = data . design ; // template json 16 const html = data . html ; // exported html 17 }); Connected · projectId 1234 Use cases Power creation inside any product . The same primitives, dressed for very different surfaces. Marketing Platforms Email, landing pages, popups in one composer. CRM Tools Let reps personalize outreach without leaving the deal. Email Service Providers White-label a builder your senders actually love. Website Builders Add a page composer that feels native to your product. Document Automation Tools Proposals, contracts, and reports, designed and exported. Internal Tools Standardize how teams write, design, and send updates. White-Label Platforms Ship a creation experience under your brand, not ours. AI Content Products Give AI a canvas with structure, blocks, and export. Ready when you are Launch in days, not months Embed Unlayer in your product. Ship the parts only you can build. Try Unlayer Free → Read the Docs Free to start 1000+ SaaS brands SOC 2 Type II

개발자도구 SaaS API AI어시스턴트 YC