카페24 스마트디자인 전체 레퍼런스

LIST 상품 리스트 카드 - 배지와 품절 상태까지 함께 처리

<div module="product_listmain_1" class="product-grid">
  <!-- $count = 8 -->
  <h2>{$category_title_text}</h2>
  <ul class="items">
    <li class="product-card" data-product-no="{$product_no}">
      <a href="{$link_product_detail}">
        <div class="thumb">
          <img src="{$image_medium}" alt="{$product_name}" loading="lazy">
          <span class="badge-new {$new_icon|display}">NEW</span>
          <span class="badge-soldout {$soldout_icon|display}">SOLD OUT</span>
        </div>
        <strong class="name">{$product_name|cut:32,...}</strong>
        <span class="price">{$product_sale_price|numberformat}원</span>
      </a>
    </li>
  </ul>
</div>

DETAIL 상품 상세 - 옵션/수량/구매 액션 분리

<section class="detail-layout">
  <div module="product_image" class="detail-media">
    <img src="{$big_img}" alt="{$name}">
  </div>

  <div class="detail-info">
    <div module="product_detail">
      <p class="path">{$cate_name}</p>
      <h1>{$name}</h1>
      <p class="summary {$summary_desc|display}">{$summary_desc}</p>
      <p class="price">{$product_sale_price|numberformat}원</p>
      <p class="delivery">배송비: {$delivery}</p>
    </div>

    <div module="product_option" class="option-box">
      <!-- 옵션 UI는 카페24가 생성하는 form 구조를 유지 -->
      {$form.option}
    </div>

    <div module="product_action" class="action-row">
      <button type="button" onclick="{$action_basket}">장바구니</button>
      <button type="button" onclick="{$action_buy}">바로구매</button>
      <button type="button" onclick="{$action_wishlist}">관심상품</button>
    </div>
  </div>
</section>

BOARD 게시판 목록 - 표시 옵션과 빈 상태까지 같이 설계

<div module="board_title_1002" class="board-head">
  <h1>{$board_name}</h1>
  <p class="{$board_info|display}">{$board_info}</p>
</div>

<table module="board_list_1002" class="board-table">
  <!-- $count = 20 -->
  <tr>
    <td class="no">{$no}</td>
    <td class="category {$category_display|display}">{$category_name}</td>
    <td class="subject">
      <a href="{$param_read}" style="color:{$link_color}">
        {$subject} {$icon_new} {$icon_hit} {$icon_file}
      </a>
      <span class="comment {$comment_count|display}">[{$comment_count}]</span>
    </td>
    <td class="writer">{$writer}</td>
    <td class="date {$date_display|display}">{$write_date|date:Y.m.d}</td>
  </tr>
</table>

<div module="board_empty_1002" class="empty">
  등록된 게시글이 없습니다.
</div>

LAYOUT 공통 헤더/푸터 - include와 페이지별 활성 상태

<!-- layout/basic/layout.html -->
<!--@import(/layout/basic/header.html)-->
<main id="contents" data-page="{$filename}">
  {$contents}
</main>
<!--@import(/layout/basic/footer.html)-->

<!-- layout/basic/header.html -->
<nav class="site-nav" module="Layout_statelogoff">
  <a href="/" class="home">홈</a>
  <a href="/product/list.html?cate_no=24">신상품</a>
  <a href="/board/free/list.html?board_no=1">공지사항</a>
  <a href="/member/login.html">로그인</a>
</nav>

<nav class="site-nav" module="Layout_stateLogon">
  <a href="/myshop/index.html">마이쇼핑</a>
  <a href="/order/basket.html">장바구니</a>
  <a href="{$action_logout}">로그아웃</a>
</nav>

GUARD AI 수정 요청용 안전 프롬프트

AI 에이전트에게 카페24 스킨을 맡길 때는 “예쁘게 고쳐줘”보다 아래처럼 수정 범위와 금지사항을 같이 줘야 합니다.

카페24 스마트디자인 스킨을 수정한다.
범위: /product/list.html 의 product_listnormal 모듈 내부만 수정한다.
목표: 상품 카드의 이미지, 상품명, 가격, 품절 배지 레이아웃을 정리한다.
유지: module 속성, {$...} 변수, <!-- $count --> 옵션, onclick 액션 변수는 삭제하지 않는다.
금지: 주문/결제/회원 관련 액션 변경, 다른 페이지 include 수정, 임의 변수 생성.
검증: PC 1440px, 모바일 390px에서 상품 1개/여러 개/품절 상태를 확인한다.