Tilda Publishing

Tilda Publishing은(는) 무엇을 하나요?

개요

Tilda는 블록 기반 웹사이트 빌더입니다. 블록을 페이지에 드래그하고, 시각적으로 커스터마이즈한 후 게시하세요. 백엔드 관리나 호스팅 설정이 필요 없습니다. 개발자의 경우: 모든 블록에 사용자 정의 HTML/CSS/JS를 삽입하고, Tilda API를 사용하여 프로그래밍 방식으로 콘텐츠를 관리하며, 폼을 모든 백엔드에 연결하고 사용자 정의 통합을 구축할 수 있습니다. 비기술 직원이 독립적으로 콘텐츠를 업데이트해야 하는 마케팅 사이트, 랜딩 페이지, 소규모 전자상거래 스토어에 적합합니다.

사용 시기

• 마케팅 사이트와 랜딩 페이지를 빠르게 구축할 때
• 비기술 직원이 쉽게 업데이트할 수 있는 CMS가 필요할 때
• 소규모 및 중간 규모 전자상거래 (Tilda 내장 스토어)
• 고급 애니메이션이 포함된 맞춤형 랜딩 페이지
• 시각적 편집과 사용자 정의 코드가 모두 필요한 사이트

지침

사이트 구조

Tilda 사이트는 다음과 같이 구성됩니다:

• 프로젝트 → 페이지를 포함
• 페이지 → 블록(섹션)을 포함
• 블록 → 미리 디자인된 섹션 (히어로, 기능, 가격, 갤러리 등)
• Zero Block — 완전한 디자인 자유를 제공하는 사용자 정의 블록

블록 내 사용자 정의 HTML/CSS/JS

<!-- 설정 → 더 보기 → <head> 안의 HTML 코드 또는 </body> 앞에 추가 -->

<!-- 사용자 정의 CSS (head) -->
<style>
  /* Tilda 기본값 재정의 */
  .t-title {
    font-family: 'Inter', sans-serif !important;
  }

  /* 사용자 정의 애니메이션 */
  .t-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
  }
  .t-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* 반응형 재정의 */
  @media (max-width: 640px) {
    .t-cover__wrapper {
      min-height: 60vh !important;
    }
  }
</style>

<!-- 사용자 정의 JavaScript (</body> 앞) -->
<script>
  // 스크롤 애니메이션을 위한 Intersection Observer
  document.addEventListener('DOMContentLoaded', () => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('.t-animate').forEach((el) => observer.observe(el));
  });

  // 사용자 정의 폼 처리 — 자체 API로 전송
  document.querySelector('.t-form')?.addEventListener('submit', async (e) => {
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    // Tilda의 내장 처리와 함께 백엔드로 전송
    await fetch('https://api.myapp.com/leads', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  });
</script>

Zero Block (사용자 정의 디자인)

Zero Block은 Artboard와 같은 완전한 제어를 제공합니다. 요소를 정확하게 배치하고, 사용자 정의 위치, 애니메이션, 반응형 중단점을 설정할 수 있습니다.

<!-- 사용자 정의 대화형 요소가 포함된 Zero Block -->
<div class="custom-calculator" id="price-calc">
  <h3>가격 계산기</h3>
  <div class="calc-row">
    <label>사용자 수</label>
    <input type="range" id="users" min="1" max="1000" value="10">
    <span id="users-count">10</span>
  </div>
  <div class="calc-row">
    <label>요금제</label>
    <select id="plan">
      <option value="starter">스타터 — $5/사용자</option>
      <option value="pro">프로 — $12/사용자</option>
      <option value="enterprise">엔터프라이즈 — $25/사용자</option>
    </select>
  </div>
  <div class="calc-result">
    총액: <span id="total">$50</span>/월
  </div>
</div>

<script>
  const prices = { starter: 5, pro: 12, enterprise: 25 };
  const usersInput = document.getElementById('users');
  const planSelect = document.getElementById('plan');

  function updatePrice() {
    const users = parseInt(usersInput.value);
    const price = prices[planSelect.value];
    document.getElementById('users-count').textContent = users;
    document.getElementById('total').textContent = '$' + (users * price).toLocaleString();
  }

  usersInput.addEventListener('input', updatePrice);
  planSelect.addEventListener('change', updatePrice);
</script>

Tilda API

// api/tilda.ts — Tilda 콘텐츠를 프로그래밍 방식으로 관리
const TILDA_PUBLIC_KEY = process.env.TILDA_PUBLIC_KEY;
const TILDA_SECRET_KEY = process.env.TILDA_SECRET_KEY;
const BASE_URL = "https://api.tildacdn.info/v1";

// 모든 프로젝트 가져오기
async function getProjects() {
  const res = await fetch(
    `${BASE_URL}/getprojectslist/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}`
  );
  return res.json(); // { status: "FOUND", result: [{ id, title, ... }] }
}

// 프로젝트의 모든 페이지 가져오기
async function getPages(projectId: number) {
  const res = await fetch(
    `${BASE_URL}/getpageslist/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}&projectid=${projectId}`
  );
  return res.json();
}

// 전체 페이지 콘텐츠 가져오기 (HTML + CSS + JS)
async function getPageFull(pageId: number) {
  const res = await fetch(
    `${BASE_URL}/getpagefull/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}&pageid=${pageId}`
  );
  return res.json();
  // 반환: { html, css, js, images[], title, descr, ... }
}

// 페이지를 자체 호스팅으로 내보내기
async function exportPage(pageId: number) {
  const page = await getPageFull(pageId);
  const { html, css, js } = page.result;

  // 자체 포함 HTML 빌드
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <style>${css}</style>
    </head>
    <body>
      ${html}
      <script>${js}</script>
    </body>
    </html>
  `;
}

폼 처리 및 웹훅

// webhook/tilda-form.ts — Tilda 폼 제출 수신
/**
 * Tilda에서 설정: 블록 설정 → 폼 → 웹훅 URL
 * Tilda는 제출 시마다 폼 데이터와 함께 POST 요청을 보냅니다.
 */
export async function handleTildaForm(req: Request) {
  const formData = await req.formData();
  const data = Object.fromEntries(formData);

  // data: { Name: "Kai", Email: "[email protected]", Phone: "+1234567890", ... }

  // CRM에 저장
  await fetch("https://api.mycrm.com/leads", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      name: data.Name,
      email: data.Email,
      phone: data.Phone,
      source: "tilda-landing",
    }),
  });

  // 텔레그램으로 전송
  await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      chat_id: CHAT_ID,
      text: `🔔 새 리드!\n이름: ${data.Name}\n이메일: ${data.Email}\n전화: ${data.Phone}`,
    }),
  });

  return new Response("OK");
}

전자상거래 (Tilda 스토어)

<!-- 맞춤형 제품 페이지 개선 -->
<script>
  // 맞춤 처리로 장바구니에 추가
  document.addEventListener('DOMContentLoaded', () => {
    // 장바구니 추가 이벤트 추적
    document.querySelectorAll('.js-store-buttons-buy-btn').forEach((btn) => {
      btn.addEventListener('click', () => {
        const productName = btn.closest('.js-product')
          ?.querySelector('.js-product-name')?.textContent;

        // 분석 도구로 전송
        if (window.dataLayer) {
          window.dataLayer.push({
            event: 'add_to_cart',
            product_name: productName,
          });
        }
      });
    });
  });
</script>

SEO 및 분석 설정

<!-- 설정 → 더 보기 → <head> 안의 HTML 코드에 추가 -->

<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

<!-- Facebook Pixel -->
<script>
  !function(f,b,e,v,n,t,s){/* ... Facebook Pixel 코드 ... */}();
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

<!-- 사용자 정의 구조화된 데이터 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "My Company",
  "url": "https://mycompany.com",
  "logo": "https://mycompany.com/logo.png",
  "contactPoint": { "@type": "ContactPoint", "telephone": "+1-234-567-8900" }
}
</script>

예제

예제 1: 마케팅 랜딩 페이지 구축

사용자 프롬프트: "히어로, 기능, 가격, FAQ 및 문의 양식이 포함된 SaaS 제품용 랜딩 페이지를 만드세요. 직원이 텍스트와 이미지를 업데이트할 수 있어야 합니다."

에이전트는 Tilda 블록을 사용하여 페이지를 디자인하고, 폼 웹훅을 구성하며, 브랜드 일관성을 위한 사용자 정의 CSS를 추가하고, 분석 추적을 설정합니다.

예제 2: Tilda의 사용자 정의 대화형 요소

사용자 프롬프트: "Tilda 사이트에 가격 계산기와 대화형 제품 비교 테이블을 추가하세요."

에이전트는 계산기와 비교 테이블을 위한 사용자 정의 HTML/JS가 포함된 Zero Block 레이아웃을 만들고, Tilda 테마에 맞게 스타일을 지정합니다.

예제 3: Tilda 폼을 CRM에 연결

사용자 프롬프트: "모든 폼 제출을 CRM으로 보내고 텔레그램으로 영업팀에 알리세요."

에이전트는 Tilda 웹훅을 구성하고, 제출을 수신하는 서버리스 함수를 생성하며, 데이터를 CRM과 텔레그램으로 전달합니다.

지침

• 블록은 구조용, Zero Block은 맞춤용 — 속도를 위해 미리 빌드된 블록을 사용하고, 완전한 제어를 위해 Zero Block을 사용하세요.
• 설정의 사용자 정의 코드 — CSS/메타용 <head>의 HTML, JS용 </body> 앞에 추가하세요.
• 폼에는 내장 웹훅이 있습니다 — 제출을 모든 URL로 전송할 수 있습니다.
• Tilda API는 읽기 전용입니다 — 콘텐츠를 내보낼 수 있지만 API를 통해 페이지를 만들 수는 없습니다.
• 페이지별 SEO 설정 — 페이지 설정에서 제목, 설명, OG 태그를 설정하세요.
• 사용자 정의 도메인 — DNS를 Tilda로 지정하면 SSL이 자동으로 설정됩니다.
• 전자상거래 내장 — 제품 카탈로그, 장바구니, 결제, 결제 처리가 포함되어 있습니다.
• 기본적으로 반응형 — 블록이 적응하지만 중단점을 테스트하고 조정하세요.
• 직원이 모든 것을 편집할 수 있습니다 — 시각적 편집기를 통해 텍스트, 이미지, 블록, 페이지 순서를 편집할 수 있습니다.
• 자가 호스팅을 위한 내보내기 — API가 전체 HTML/CSS/JS를 반환하여 자체 배포가 가능합니다.
• 중요한 Tilda 클래스를 재정의하지 마세요 — 사용자 정의 CSS에 네임스페이스를 접두사로 추가하세요.
• Google Tag Manager — 인라인 스크립트 대신 복잡한 추적 설정에는 GTM을 사용하세요.