15분 안에 Unlayer의 Drag-and-Drop Email Editor를 Next.js에 추가한 방법

Source: Dev.to

Unlayer의 SDK를 실험해 보았습니다

Unlayer의 드래그‑앤‑드롭 이메일 편집기를 Next.js 앱에 삽입해 보았습니다. SDK를 사용하면 다음을 할 수 있습니다:

• 몇 분 안에 HTML 및 JSON 디자인을 내보내기
• 반응형이며 프로덕션에 바로 사용할 수 있는 이메일 HTML 생성
• 일반적인 이메일 클라이언트 렌더링 quirks(특징) 회피

아래는 제가 발견한 내용과 다른 개발자를 위한 단계별 가이드입니다.

내가 발견한 것

Unlayer는 이메일 편집용 Stripe와 같습니다 – 렌더링 quirks를 처리해 주어 앱에 집중할 수 있습니다.

주요 기능

• 클라이언트‑사이드 JavaScript 래퍼가 드래그‑앤‑드롭 편집기를 삽입합니다
• 크로스‑클라이언트 호환 HTML을 생성하여 바로 프로덕션에 사용할 수 있습니다
• JSON(저장/편집용) 및 정돈된 HTML(전송용)를 내보냅니다
• React 래퍼가 기본 제공됩니다
• 백엔드 의존성이 없으며 브라우저에서 완전히 실행됩니다

단계 1: 설치

npm install react-email-editor

단계 2: 컴포넌트 설정

'use client'

import { useRef } from 'react'
import dynamic from 'next/dynamic'

// Critical: Dynamic import with SSR disabled
// react-email-editor relies on browser APIs like `window`
// that aren't available during server‑side rendering
const EmailEditor = dynamic(
  () => import('react-email-editor').then((mod) => mod.EmailEditor),
  { ssr: false }
)

export default function Home() {
  const emailEditorRef = useRef(null)

  const exportHtml = () => {
    if (emailEditorRef.current) {
      emailEditorRef.current.editor.exportHtml((data: any) => {
        const { design, html } = data

        // Store JSON in your database for later editing
        console.log('Design JSON:', design)

        // Use HTML for sending emails
        console.log('Exported HTML:', html)

        // Download the HTML file
        const blob = new Blob([html], { type: 'text/html' })
        const url = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = 'newsletter.html'
        link.click()
        URL.revokeObjectURL(url)
      })
    }
  }

  return (
    <>
      {/* Newsletter Builder UI */}
      <div style={{ height: 'calc(100vh - 60px)' }}>
        <EmailEditor ref={emailEditorRef} />
        <button onClick={exportHtml}>Export HTML</button>
      </div>
    </>
  )
}

장애물: SSR 및 하이드레이션

문제: 편집기가 서버‑사이드 렌더링 중 window에 접근하려고 하여 하이드레이션 오류가 발생합니다.

해결책: Next.js dynamic import를 { ssr: false }와 함께 사용합니다. 이렇게 하면 컴포넌트가 클라이언트에서만 렌더링되도록 강제하여 불일치를 없앨 수 있습니다.

이 패턴은 Next.js 프로젝트에서 브라우저 전용 라이브러리를 사용할 때 일반적입니다.

주요 구현 세부 사항

결과

약 15 분 안에 다음을 얻었습니다:

• 완전한 기능을 갖춘 드래그‑앤‑드롭 이메일 편집기
• JSON 및 HTML 내보내기 기능
• 반응형, 프로덕션 준비된 이메일 HTML
• 유지해야 할 커스텀 렌더링 엔진이 없음

마음에 든 점

트레이드오프

직접 구축 vs 구매

커스텀 이메일 편집기를 직접 구축할지 Unlayer를 사용할지 결정할 때는 다음 비교를 고려하세요:

결론

빠르고, 신뢰할 수 있으며, 유지보수가 용이한 이메일 편집기가 필요하다면 Unlayer SDK가 확실한 선택입니다. 이메일 클라이언트 특이점에 대한 무거운 작업을 없애고, 빠르게 배포할 수 있게 하며, 코드베이스를 가볍게 유지합니다. 유일한 추가 작업은 Next.js와 같은 SSR 환경에서 라이브러리의 클라이언트 전용 특성을 처리하는 것입니다.

앱 유형

직접 구축할 경우:

• 6개월 이상의 시간과 전담 팀이 있는 경우.
• Unlayer가 제공하지 못하는 극도의 맞춤화가 필요한 경우.
• 이메일 편집이 핵심 제품인 경우(단순 기능이 아님).

구매(Unlayer)할 경우:

• 이메일 편집이 기능일 뿐, 제품이 아닌 경우.
• 빠르게 출시해야 할 경우.
• 엔지니어링 자원을 핵심 비즈니스 로직에 집중하고 싶을 때.
• 유지보수 부담 없이 신뢰할 수 있는 크로스‑클라이언트 호환성이 필요할 때.

대부분의 SaaS 애플리케이션에서, 결론은 명확합니다: 구매.
렌더링 엔진 유지보수에 소요되는 시간을 절감하는 것만으로도 통합 비용을 여러 번 상쇄합니다.

왜 그냥 리치 텍스트 에디터를 사용하지 않을까?

당신은 이렇게 물을 수도 있습니다: “Tiptap이나 Quill을 왜 안 쓰나요?”

리치 텍스트 에디터는 문서 작성에 훌륭하지만 이메일 레이아웃에서는 한계가 있습니다. 사용자가 필요로 하는 것은:

• 다중 컬럼 레이아웃
• 반응형 이미지
• 모든 클라이언트에서 동작하는 버튼
• 구조화된 템플릿

Unlayer는 레이아웃 빌더를 제공하여 모바일 친화적인 출력을 보장하고, 디자인을 JSON 형태로 저장해 프로그램적으로 편집할 수 있게 합니다.

실제 운영에서는 다음과 같이 합니다:

1. JSON 디자인을 데이터베이스에 저장합니다.

2. 저장된 디자인을 다음과 같이 로드합니다:

   editor.loadDesign(designJson);

3. 이메일 전송 서비스와 통합합니다.

4. 도메인에 맞는 커스텀 블록을 추가합니다 (예: 제품 목록, 사용자 데이터).

결론

Unlayer는 이메일 렌더링 복잡성을 추상화합니다. 앱에 이메일 편집기가 필요하다면, 이 SDK를 평가해볼 가치가 있습니다. 렌더링 엔진 유지 관리에 절감되는 시간만으로도 통합을 정당화합니다.

때때로 가장 좋은 코드는 작성할 필요가 없는 코드입니다. 😉

더 많은 것을 탐구하고 여러분과 공유하기를 기대합니다!