카페24 쇼핑몰에서 워드프레스 최신 글 목록 가져와서 표시하기

워드프레스 정보를 제공하는 블로그 Avada 2025. 12. 17. 14:45 • 댓글: 개

카페24 쇼핑몰에서 워드프레스 최신 글 목록을 가져와서 표시해야 하는 경우가 있습니다. 워드프레스의 특정 카테고리 글 5개를 리스트 형식으로 표시하는 기능을 구현하는 작업과 관련하여 문의를 받아서 여기에 대해 고민해 보았습니다. 챗GPT나 클로드 등 AI에 물어보면 다시 어려운 방법을 알려줍니다. 하지만 카페24 쇼핑몰에서 JS 코드를 삽입하려고 시도하니 코드가 추가되지 않은 문제가 발생하여 AI의 답변을 그대로 구현하기에는 어려움이 있었습니다.

카페24 쇼핑몰에서 워드프레스 최신 글 목록 로드하여 표시하기

카페24 쇼핑몰은 국내 대표 전자상거래 플랫폼으로, 회원가입만으로 쇼핑몰 제작, 호스팅, 결제, 물류, 마케팅, 글로벌 판매 채널 연동까지 원스톱으로 제공하여 자체 온라인몰을 쉽고 빠르게 구축·운영할 수 있게 해 줍니다. 자체 쇼핑몰 빌더, 다양한 디자인 템플릿, 국내 최적화 PG 연동, 외부 마켓·해외 판매 관리 기능을 제공하며, 인공지능(AI)을 활용한 상세페이지 제작 및 운영 자동화 기능으로 소상공인부터 브랜드 사업자까지 효율적인 쇼핑몰 성장을 지원합니다.

워드프레스에서는 우커머스를 사용하여 쇼핑몰을 운영할 수 있습니다. 워드프레스는 쇼핑몰뿐만 아니라 블로그, 회사 소개 사이트, 포트폴리오, 인강 사이트 등 다양한 사이트 구축에 이용할 수 있습니다.

관리에 참여 중인 워드프레스 사이트가 평소에는 결제에 문제가 없지만, 이벤트를 실시하는 시기에는 경쟁자(?)에 의한 디도스(DDoS) 공격 대문에 결제 에러가 발생하는 경우가 잦았습니다. 워드프레스에서 디도스 공격을 당하는 경우 클라우드플레어와 연동하여 대응을 시도할 수 있지만, 디도스 공격 강도가 강한 경우에는 방어가 쉽지 않을 수 있습니다. 제 메일 워드프레스 블로그에 2025년 8~9월 한 달 동안 집중적으로 디도스 공격 피해를 본 적이 있습니다. 당시 클라우드웨이즈(Cloudways)와 클라우드플레어(Cloudflare) 덕분에 공격을 방어할 수 있었고, 1개월 정도 지속되던 공격이 사라졌습니다.😄

클라우드웨이즈 디도스 (DDoS) 공격 대응 방법 4가지 - 워드프레스 정보꾸러미

클라우드웨이즈에서 호스팅하는 사이트에 디도스(DDoS) 공격이 들어오는 경우 어떻게 되는지에 대하여 작년에 클라우드웨이즈에 문의한 적이 있습니다. 클라우드웨이즈 담당자에 의하면 분산

www.thewordcracker.com

디도스 공격이 들어오는 경우 트래픽이 급증하면서 결제 오류가 발생할 수 있습니다. 이 문제로 고민하다 이벤트 기간 동안에는 카페24 쇼핑몰을 통해 결제를 받는 것으로 결정하고 카페24 쇼핑몰을 구축하고 있습니다.

카페24 쇼핑몰에서 워드프레스 사이트의 특정 카테고리 글을 리스트 형식으로 가져와서 표시하는 요청이 들어왔습니다.

챗GPT에 카페24 쇼핑몰에서 워드프레스의 특정 카테고리 글을 가져와서 표시하는 방법에 대하여 물어보니 다음과 같이

워드프레스 REST API로 특정 카테고리 글 5개를 JSON으로 가져와 카페24 쇼핑몰에서 Ajax/Fetch로 불러와 파싱해 화면에 렌더링하는 방식입니다.

하지만 챗GPT에서 제시하는 예시 코드를 전달하여 테스트를 하니 JS 코드가 작동하지 않았습니다. 다른 방법으로 카페24의 "JavaScript작성 규칙" 매뉴얼을 참고하여 JS 코드를 만들어 시도해 볼 수 있을 것 같습니다.

저는 이 방법 대신 워드프레스의 RSS 피드를 활용하여 카페24 쇼핑몰에서 최신 글을 표시하는 방식으로 시도해보았습니다. 다음과 같은 HTML 파일을 이용하여 최신 글 목록을 표시하고, 카페24 쇼핑몰에서 iframe 태그를 사용하여 Html 파일을 임베드하는 방식입니다.

다음은 예시 Html 파일입니다. 캐싱을 적용하여 빠르게 Html 파일이 로드되도록 했습니다.

<!-- File: latest5-no-loading.html -->
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Latest 5</title>
  <base target="_blank" />
  <style>
    /* why: iframe 임베드 시 여백/크로스 스타일 최소화 */
    :root { color-scheme: light dark; }
    html, body { margin: 0; padding: 0; }
    .twc-wrap { font: 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
    .twc-list { margin: 0; padding-left: 1.25rem; }
    .twc-list li { margin: .25rem 0; }
    .twc-list a { text-decoration: none; }
    .twc-list time { opacity: .7; font-size: .92em; }
    .twc-msg { margin: .25rem 0; opacity: .8; }
  </style>
</head>
<body>
  <div id="twc" class="twc-wrap" aria-busy="true"></div>

  <script>
    (function () {
      const RSS_URL = "https://example.com/category/column/feed/"; // 실제 카테고리 피드로 교체
      const COUNT = 5;

      // why: 초기 즉시렌더를 위한 캐시. TTL 내면 로딩 문구 없이 표시.
      const CACHE_KEY = "twc_latest5_cache_v1";
      const CACHE_TTL_MS = 30 * 60 * 1000; // 30분
      const LOADING_DELAY_MS = 200; // 캐시 없을 때만 200ms 후 로딩 문구 노출

      const $root = document.getElementById("twc");

      function fmtDateYYYYMMDD(d) {
        const y = d.getFullYear();
        const m = String(d.getMonth() + 1).padStart(2, "0");
        const day = String(d.getDate()).padStart(2, "0");
        return `${y}-${m}-${day}`;
      }

      function qsText(el, sel, fallback = "") {
        const n = el.querySelector(sel);
        return n ? (n.textContent || fallback) : fallback;
      }

      function render(items) {
        if (!Array.isArray(items) || items.length === 0) {
          $root.innerHTML = '<p class="twc-msg">게시물이 없습니다.</p>';
          $root.removeAttribute("aria-busy");
          return;
        }
        const ul = document.createElement("ul");
        ul.className = "twc-list";
        for (const it of items.slice(0, COUNT)) {
          const li = document.createElement("li");

          const a = document.createElement("a");
          a.href = it.link;
          a.textContent = it.title;
          a.rel = "noopener noreferrer";

          const time = document.createElement("time");
          if (it.iso) {
            time.dateTime = it.iso;
            time.textContent = it.ymd;
          }

          li.appendChild(a);
          li.appendChild(document.createTextNode(" "));
          li.appendChild(time);
          ul.appendChild(li);
        }
        $root.replaceChildren(ul);
        $root.removeAttribute("aria-busy");
      }

      function serialize(items) {
        return JSON.stringify({ ts: Date.now(), items });
      }

      function deserialize(text) {
        try {
          const data = JSON.parse(text);
          if (!data || !Array.isArray(data.items)) return null;
          return data;
        } catch { return null; }
      }

      function readCache() {
        const text = localStorage.getItem(CACHE_KEY);
        if (!text) return null;
        const data = deserialize(text);
        if (!data) return null;
        const fresh = Date.now() - data.ts < CACHE_TTL_MS;
        return { fresh, ...data };
      }

      function writeCache(items) {
        try { localStorage.setItem(CACHE_KEY, serialize(items)); } catch {}
      }

      async function fetchItems(signal) {
        const res = await fetch(RSS_URL, {
          credentials: "omit",
          referrer: "no-referrer",
          signal
        });
        if (!res.ok) throw new Error("RSS 요청 실패");
        const xmlText = await res.text();
        const xml = new DOMParser().parseFromString(xmlText, "text/xml");

        const rawItems = Array.from(xml.querySelectorAll("item")).slice(0, COUNT);
        return rawItems.map((it) => {
          const title = qsText(it, "title", "(제목 없음)").trim();
          const link = qsText(it, "link", "#").trim();
          const pub = qsText(it, "pubDate", "").trim();
          const d = pub ? new Date(pub) : null;
          const iso = d && !isNaN(d) ? d.toISOString() : "";
          const ymd = d && !isNaN(d) ? fmtDateYYYYMMDD(d) : "";
          return { title, link, iso, ymd };
        });
      }

      async function load() {
        const cached = readCache();
        if (cached && cached.items.length) {
          render(cached.items); // 즉시 렌더
        }

        let loadingTimer;
        if (!cached || !cached.items.length) {
          // 캐시 없을 때만 지연 로딩 문구
          loadingTimer = setTimeout(() => {
            if ($root.childElementCount === 0 && !$root.textContent) {
              $root.textContent = "로딩 중…";
            }
          }, LOADING_DELAY_MS);
        }

        const ac = new AbortController();
        const timeout = setTimeout(() => ac.abort(), 8000); // why: iframe 내 무한대기 방지

        try {
          const items = await fetchItems(ac.signal);
          clearTimeout(timeout);
          if (loadingTimer) clearTimeout(loadingTimer);
          render(items);
          writeCache(items);
        } catch (err) {
          clearTimeout(timeout);
          if (loadingTimer) clearTimeout(loadingTimer);
          if (!cached || !cached.items.length) {
            $root.textContent = "불러오기에 실패했습니다.";
          }
          console.error(err);
        }
      }

      load();
    })();
  </script>
</body>
</html>

다행히 이 방법으로 시도하니 카페24 쇼핑몰에서 워드프레스 최신 글 리스트를 로드할 수 있었습니다. 스타일은 CSS로 제어할 수 있습니다.