CIENPLAN HELP CENTER

솔루션 매뉴얼

관리자 메뉴별 이용 가이드와 shortcode 이용방법을 제공합니다.

SHORTCODE REFERENCE

Shortcode 이용방법

기능 설명을 복사하여 AI 프롬프트에 활용해 보세요

01

이용 전 안내

이 문서는 shortcode의 역할, 적용 위치, 속성, 사용 순서와 주의사항을 설명합니다. 각 항목의 코드 예제는 HTML과 shortcode를 함께 작성하는 방법을 보여줍니다.

대괄호로 표시한 [shortcode]와 [/shortcode]는 실제 시스템에 입력하는 사용 문법입니다.

이 문서의 biz, 게시판 ID, 필드 ID, custom-key, 콘텐츠 ID는 설명을 위한 예시입니다. 실제 사이트의 등록 값으로 교체해야 합니다.

계정별 biz와 게시판(forum)의 실제 ID는 관리자 페이지 → 디자인관리 → shortcode에서 확인합니다. 상품·게시판 등의 디자인을 만들 때에는 이곳의 실제 식별값을 확인하고, shortcode 사용법은 아래 공용 문법 설명을 참고합니다.

테마는 공통 레이아웃, 페이지는 고유 콘텐츠라는 구분을 먼저 확인합니다. 테마별 설정이나 페이지별 Global Classes의 개념은 신규 테마 안내 장을 참고합니다.

사용 범위는 사이트에 활성화된 모듈과 데이터 유형, 권한, 설정에 따라 달라집니다.

구현 코드에서 확인되지 않은 기능은 '미확인' 또는 '현재 미지원'이라고 명시했습니다.

HTML 안에 shortcode 넣기HTML + Shortcode
<p>안녕하세요, [user-name]님.</p>
<a href='[url route="home"]'>홈으로</a>
02

테마의 개념과 공통 적용 범위

테마는 사이트의 여러 페이지에서 반복하여 사용하는 공통 HTML 구조와 디자인의 기준입니다. 헤더, 로고, PC·모바일 내비게이션, 본문이 들어갈 영역, 공통 사이드 메뉴, 푸터 등을 테마에 작성합니다. 테마는 특정 페이지의 내용 자체가 아닙니다.

같은 테마를 선택한 페이지들은 해당 테마 구조를 공유합니다. 사이트에 기본 테마가 있더라도 특정 페이지에 다른 테마를 지정할 수 있으므로 모든 페이지가 반드시 하나의 테마를 사용한다는 뜻은 아닙니다.

실제 출력은 사이트 또는 현재 페이지의 테마를 먼저 결정한 뒤, 그 테마의 [page-content] 위치에 현재 페이지의 기본 콘텐츠를 넣는 방식입니다. [page-content]가 없는 테마는 현재 출력 흐름에서 기본 콘텐츠 삽입이 불가능하므로 필수입니다.

[page-content]는 idx를 생략하면 기본 콘텐츠(idx=0) 위치입니다. [page-content idx="1" name="상단배너"]처럼 추가 영역을 만들면 페이지 관리에서 해당 영역을 별도로 작성할 수 있습니다. 추가 영역은 테마에 출력 위치가 있어야 화면에 나타납니다.

메인페이지도 여러 페이지 중 하나입니다. 메인 배너, 메인 서비스 소개, 메인 게시판 목록 등의 고유 콘텐츠는 메인페이지 콘텐츠에 작성하고, 여러 페이지에서 공통으로 나타나야 하는 내용만 테마에 둡니다. 메인 콘텐츠를 테마에 고정하면 일반 하위 페이지에도 중복 표시되기 쉽습니다.

테마 HTML은 공통 구조와 shortcode 위치를 정의하며, 테마 CSS는 공통 디자인을 담당합니다. 페이지 콘텐츠 HTML/CSS는 해당 페이지의 고유 내용과 디자인을 담당합니다. 공통 콘텐츠 [content id="10"]을 불러오는 기능은 테마 공유와 별개입니다.

원칙: 여러 페이지에서 공통인 구조는 테마, 특정 페이지에서만 보여 줄 콘텐츠는 해당 페이지, 특정 페이지에만 다른 표현은 우선 페이지별 CSS 또는 Global Classes를 검토합니다.

공통 테마의 최소 구조HTML + Shortcode
<div class="site-wrap">
  <header class="site-header">
    <a href="[url route='home']">사이트 홈</a>
    [menu]
      [depth1]
        [depth1-row custom-key="top-menu" custom-name="상단메뉴"]
          <a [attributes]>[name]</a>
        [/depth1-row]
      [/depth1]
    [/menu]
  </header>
  [page-content idx="1" name="상단배너"]
  <main id="content">[page-content]</main>
  <footer class="site-footer">공통 푸터</footer>
</div>
별도 메인페이지 콘텐츠 예시HTML + Shortcode
<!-- 이 코드는 테마가 아니라 메인페이지 기본내용에 작성합니다. -->
<section class="main-hero"><h1>우리 회사의 비전</h1></section>
<section class="main-services"><h2>주요 서비스</h2></section>
[forum id="1" num-rows="4"]
  [posts]
    [post-row]<a href="[post-view-url]">[post-title]</a>[/post-row]
  [/posts]
[/forum]
03

사이트 기본 테마와 페이지별 테마 지정

테마는 사이트 기본 테마와 페이지별 테마를 구분합니다. 페이지에 별도의 theme_id가 있으면 그 테마를 사용하고, 지정하지 않은 페이지는 사이트의 기본 테마를 사용합니다. 즉 공통 디자인을 공유하면서 회사소개·상품·이벤트 등의 특정 페이지에 다른 테마를 지정할 수 있습니다.

관리자 페이지 관리의 테마선택에서 해당 페이지에 사용할 테마를 고를 수 있습니다. 메인페이지 역시 페이지로 관리되므로 기본 테마를 사용하거나 별도 테마를 지정할 수 있습니다.

테마를 새로 만들어야 하는 경우: 헤더나 메뉴 배치, 본문 영역의 HTML 순서, 사이드 영역 구성, 공통 구조 자체가 다른 경우 또는 여러 페이지가 별도의 공통 레이아웃을 공유해야 하는 경우입니다.

테마를 새로 만들 필요가 적은 경우: 같은 HTML 구조를 유지한 채 특정 페이지의 색상·배경·글자 크기·너비·여백·카드 스타일만 달라지는 경우입니다. 이런 변경은 해당 페이지의 Global Classes와 CSS를 먼저 사용합니다.

테마를 바꾸면 같은 custom-key를 사용하는 설정이라도 테마별 선택 저장값과 연동되는지 확인해야 합니다. 특히 메뉴 노출 체크박스와 선택형 block은 페이지 관리의 해당 테마 설정을 확인해야 하며, 키를 임의로 바꾸지 않습니다.

주의: 상품 분류 관리(item_cate)의 테마 선택은 현재 코드 주석상 기본내용·상단배너 조회를 위한 설정이며, 사이트 화면 전체의 테마 전환과는 구별됩니다. 일반 페이지의 테마 변경과 동일하다고 가정하지 않습니다.

테마 선택 판단 예시HTML + Shortcode
사이트 기본 테마: 기업 공통 테마
메인페이지: 기본 테마 + 메인페이지 전용 콘텐츠
회사소개: 기본 테마 + 회사소개 콘텐츠 + 페이지 Global Classes
이벤트 페이지: 공통 구조가 크게 다르면 이벤트 전용 테마 지정

페이지별 색상만 다를 때: 테마 신규 생성보다 CSS 우선
페이지별 메뉴·레이아웃 구조가 다를 때: 별도 테마 검토
04

페이지 Global Classes와 페이지 전용 CSS 디자인

관리자 페이지 관리의 Global Classes는 해당 페이지의 body 요소에 추가할 CSS 클래스 이름을 지정하는 설정입니다. 예를 들어 company-intro라고 입력하면 해당 페이지에서 <body class="page-id-123 company-intro">처럼 렌더링됩니다. 여기의 123은 설명을 위한 페이지 ID입니다.

현재 코드에서는 페이지가 있으면 page-id-페이지ID 클래스가 자동으로 만들어지고, Global Classes에 입력한 값이 그 뒤에 추가됩니다. 따라서 별도 클래스를 입력하지 않아도 실제 페이지 ID를 알면 body.page-id-123 같은 선택자를 사용할 수 있습니다.

입력창에는 CSS 선택자 문법인 . 또는 body.를 쓰지 않고 클래스 이름만 입력합니다. 여러 클래스를 적용할 때는 공백으로 구분합니다. 클래스 이름은 다른 페이지 또는 라이브러리와 충돌하지 않도록 의미 있게 정합니다.

CSS는 반드시 body를 기준으로 특정 페이지를 한정해 작성합니다. body.company-intro .content처럼 작성하면 공통 테마의 HTML을 유지하면서 해당 페이지의 콘텐츠 영역만 디자인할 수 있습니다. 여러 페이지가 같은 클래스를 사용하면 동일한 스타일을 공유할 수도 있습니다.

페이지별 CSS는 페이지 관리의 CSS 또는 테마 공통 CSS 안에 작성할 수 있습니다. 테마 공통 CSS에 넣을 때에는 body 클래스로 범위를 제한해 다른 페이지에 영향이 없도록 합니다.

Global Classes는 CSS 적용 대상을 지정할 뿐 새로운 HTML 태그·메뉴 구조·콘텐츠 영역을 자동 생성하지 않습니다. HTML 구조를 실제로 다르게 만들어야 한다면 페이지 콘텐츠에서 구현하거나 별도 테마를 사용합니다.

[block global-class="has-aside"]는 관리자 페이지 Global Classes와 다른 기능입니다. 현재 코드에서 visibility-status="selectable"인 block이 해당 페이지에서 선택되어 실제로 노출될 때, 그 block의 global-class가 body에 추가됩니다. 선택형 block이 아니면 같은 동작을 기대하지 않습니다.

기존 HTML의 특정 구조를 유지한 채 디자인만 조절하려면 페이지 Global Classes부터 고려하는 것이 효율적입니다.

페이지별 body 클래스와 CSS 예시HTML + Shortcode
<!-- 관리자 페이지 관리 > Global Classes 입력값 -->
company-intro

/* 실제 생성 예: <body class="page-id-123 company-intro"> */
body.company-intro .content{max-width:1000px;margin:0 auto;}
body.company-intro .page-title{color:#0d8277;font-size:36px;}
body.page-id-123 .content{padding-top:60px;}

/* 같은 테마를 쓰는 다른 페이지에는 위 스타일이 적용되지 않습니다. */
선택형 block의 별도 global-class 예시HTML + Shortcode
<!-- 테마 HTML 내부의 선택형 block -->
[block custom-key="aside" custom-name="좌측메뉴보임" visibility-status="selectable" global-class="has-aside"]
  <aside class="aside">[page-name depth="1"]</aside>
[/block]

/* 해당 block이 선택되어 노출되는 페이지에만 적용 */
body.has-aside .page-layout{grid-template-columns:240px minmax(0,1fr);}
05

custom-key, custom-name과 노출 설정의 역할 구분

custom-key는 관리자 옵션 또는 다른 기능에서 활용할 사용자 정의 설정을 식별하기 위한 범용 키입니다. 현재는 페이지별 메뉴 노출 및 block 표시에도 사용하지만, 이름 자체가 보임·숨김 전용을 뜻하지 않으며 향후 다른 메뉴와 기능으로 확장할 수 있습니다. 단순히 page-display 같은 노출 전용 이름으로 바꾸지 않습니다.

custom-name은 관리자에게 해당 설정을 설명하는 표시 이름입니다. custom-key는 데이터에서 사용하는 식별값이므로 기존 사이트에서 사용 중인 키를 임의로 변경하면 설정 연결이 끊어질 수 있습니다.

visibility-status와 visibility-rule은 shortcode 자체의 표시 조건을 다루는 별도 속성 체계입니다. visibility-status="selectable"은 현재 페이지의 선택형 설정에 따라 block을 출력하는 방식입니다. visibility-rule은 구조화된 조건에 따라 노출 여부를 계산합니다.

현재 code.php에서는 visibility-rule이 지정된 경우 해당 규칙을 먼저 사용하며, 그렇지 않을 때 visibility-status를 확인합니다. 두 속성을 무조건 동시에 쓰면 합성되는 것이 아닙니다. visibility-status="condition"은 현재 코드에서 실제 처리 내용이 작성되지 않았습니다.

[menu]의 [depth1-row]~[depth4-row]에 사용한 custom-key는 메뉴에 들어갈 각 대상 페이지의 옵션을 확인합니다. 예를 들어 top-menu를 해제한 페이지는 그 상단 메뉴 목록에서 링크가 제외될 수 있지만, 이는 해당 페이지의 본문을 숨기는 설정이 아닙니다.

반면 [block custom-key="aside" visibility-status="selectable"]은 현재 방문한 페이지의 옵션을 확인하여 그 페이지의 block 출력 여부를 결정합니다. 같은 custom-key 옵션 저장 체계를 사용하더라도 메뉴 링크 노출과 현재 페이지의 block 노출은 서로 다른 역할입니다.

관리자 페이지 관리에서 테마별 custom-key 체크 상태를 저장합니다. 테마 교체·키 변경·메뉴 개편 전에는 관련 페이지 설정 및 기존 DB 값을 함께 확인합니다. custom-key가 있다는 이유만으로 모든 shortcode가 visibility-status 없이 자동 숨김 처리되는 것은 아닙니다.

용어 정리: custom-key는 범용 식별자, custom-name은 관리자 표시 이름, visibility-status는 노출 방식, visibility-rule은 노출 조건, 페이지 Global Classes는 페이지 body CSS 클래스, block global-class는 해당 block의 선택적 body 클래스 부가 기능입니다.

메뉴 노출과 현재 페이지 block 노출 비교HTML + Shortcode
<!-- 테마의 상단 메뉴: 각 페이지를 메뉴에 포함할지 결정 -->
[menu]
  [depth1]
    [depth1-row custom-key="top-menu" custom-name="상단메뉴"]
      <a [attributes]>[name]</a>
    [/depth1-row]
  [/depth1]
[/menu]

<!-- 테마의 사이드 블록: 현재 방문한 페이지에서 출력할지 결정 -->
[block custom-key="aside" custom-name="좌측메뉴보임" visibility-status="selectable" global-class="has-aside"]
  <aside class="aside">[page-name depth="1"]</aside>
[/block]
06

기본 문법 및 작성 원칙

숏코드는 콘텐츠, 목록, 폼, 반복 데이터, 시스템 동작을 호출합니다. 일반 문구 안에서도 사용할 수 있으며, 실제 디자인은 사이트 편집 화면의 HTML과 CSS가 담당합니다.

단일형 예시: [user-name], [url route="home"], [item-name]

시작·종료형 예시: [block]내용[/block], [items biz="1-0-0"][item-row]내용[/item-row][/items]

속성은 name="value" 또는 name='value' 형태로 작성합니다. 값 없는 불리언 속성도 일부 지원합니다. 예: [url route="home" absolute]

시작·종료형은 닫는 숏코드가 필요합니다. 반복 템플릿 안에서 의미 있는 숏코드는 올바른 상위 영역에 배치해야 합니다.

shortcode는 [로 시작해 ]로 끝나는 형태로 작성합니다.

동일 이름의 숏코드를 여러 번 작성할 수 있으나, 스코프(현재 게시글·상품·메뉴·날짜)가 달라지면 출력 대상도 달라집니다.

숏코드 속성값에 다른 숏코드를 임의로 중첩할 수 있다고 가정하지 않습니다. HTML 속성 안에 숏코드가 들어가는 예와 숏코드 자신의 속성값 안에 또 숏코드가 들어가는 예는 다릅니다.

일부 시스템 동작은 [block handler="code" ...]에 tag, type, event-click 등을 지정해 시스템이 필요한 속성을 생성하게 해야 합니다.

목록과 반복 영역의 기본 구조HTML + Shortcode
[items biz="1-0-0" num-rows="6"]
  <ul>
    [item-row]
      <li><a href="[item-view-url]">[item-name]</a></li>
    [/item-row]
  </ul>
  [item-pagination]
[/items]
07

레이아웃, 조건, 시스템 이벤트

[block]은 내부 콘텐츠를 하나의 범위로 처리합니다. 단순 그룹으로 사용할 수도 있고 handler="code"를 지정해 시스템 이벤트가 있는 요소를 생성할 수도 있습니다. 동일 [block]의 중첩도 가능합니다.

[block] 속성: visibility-rule은 조건부 노출 규칙, visibility-status는 시스템 노출 상태, custom-key는 선택형 식별자, global-class는 전역 CSS 클래스, handler는 처리 위임, tag는 생성 요소 유형, type은 요소 타입, event-click은 시스템 클릭 동작을 설정할 때 사용합니다. 속성별 실제 효력은 모듈 문맥에 따릅니다.

[if]는 조건부 출력 영역입니다. [elseif]는 다른 조건, [else]는 앞선 조건이 모두 거짓일 때의 내용입니다. 전체를 [/if]로 닫습니다.

예: [if condition="user-level >= 5"]관리자[elseif condition="user-level >= 1"]회원[else]방문자[/if]

사용 연산자: ==, !=, >, <, >=, <=, and, or, not, 괄호. 중첩 [if]를 사용할 수 있습니다.

주요 조건명: user-level(회원 등급), item-stock(재고), item-status(상태), menu-selected(선택 메뉴), item-menu-selected(선택 분류 메뉴), forum-can-create(게시판 글쓰기 권한), forum-has-results(목록 결과 존재), post-field-option-selected(선택형 필드 선택값), item-sort-option-selected(현재 정렬), item-service-period-selected(현재 기간), select-date-selected(현재 날짜 옵션), item-video-preview-available(영상 미리보기 가능).

조건명은 사용 위치에 따라 결정되는 문맥 값이므로 다른 위치에서 그대로 사용할 수 있다고 가정하지 않습니다.

[block handler="code" tag="button" type="button" event-click="prev-month"]이전 달[/block]은 달력 이전 달 동작 예입니다. next-month는 다음 달, add-to-cart는 장바구니 추가, add-to-wishlist는 찜 추가입니다. 각 이벤트는 해당 모듈 영역에 배치합니다.

회원 상태에 따른 조건부 출력HTML + Shortcode
[block]
  [if condition="user-level >= 1"]
    <p>[user-name]님, 환영합니다.</p>
  [else]
    <a href='[url route="login"]'>로그인해 주세요</a>
  [/if]
[/block]
08

공통 콘텐츠, 페이지 정보, 회원 정보, URL

[content id="10"]은 ID가 10인 등록 공통 콘텐츠를 현재 위치에 삽입합니다. 콘텐츠 간 순환 참조는 피해야 합니다.

[page-content]는 페이지의 기본 콘텐츠 출력 영역입니다. idx를 주면 해당 페이지 콘텐츠 영역을 지정합니다. 예: [page-content idx="1"]

[item-content]는 시스템이 제공한 데이터 콘텐츠 영역을 출력합니다. idx로 출력 영역을 구별합니다. [item-content]와 [item-content1]은 서로 다른 용도이므로 혼동하지 않습니다.

[page-name]은 현재 페이지·메뉴 이름을 출력합니다. depth="1" 등 단계 지정이 가능하고 depth="last-child"는 가장 깊은 유효 이름을 사용합니다.

[user-name]은 로그인한 회원 이름을 출력합니다.

[user-group-name]은 로그인한 회원의 소속 그룹명을 출력합니다.

[cart-item-count]는 장바구니 항목 수를 출력합니다. biz로 데이터 범위를 지정할 수 있습니다.

[wishlist-item-count]는 찜 목록 항목 수를 출력합니다. biz로 데이터 범위를 지정할 수 있습니다.

[recently-viewed-item-count biz="1-0-0"]는 해당 데이터 유형의 최근 열람 항목 수를 출력합니다. 열람 기록은 브라우저 저장 이력 기준입니다.

[url]은 시스템 URL을 반환합니다. 필수 속성은 route이고, content 경로에는 id가 필요합니다. absolute 속성만 적으면 절대 경로를 생성합니다.

예: [url route="home"], [url route="content" id="10"], [url route="home" absolute]

route=home: 사이트 홈.

route=content: 콘텐츠 보기, id 필수.

route=login: 로그인.

route=logout: 로그아웃.

route=signup: 회원가입.

route=account: 회원 계정.

route=cart: 장바구니.

route=wishlist: 찜 목록.

route=orders: 주문 내역.

route=company-create: 업체 등록.

route=company-user-approval: 업체 사용자 승인.

등록되지 않은 route는 임의로 만들지 말고 지원 경로를 확인합니다.

공통 콘텐츠와 현재 페이지 정보HTML + Shortcode
<header>
  <h1>[page-name depth="last-child"]</h1>
  <a href='[url route="home"]'>홈</a>
</header>
[content id="10"]
[page-content idx="1"]
09

[form]과 입력 폼의 종류

[form]은 작성한 입력 요소를 감싸는 영역입니다. 일반 폼, 데이터 항목 검색 폼, 게시판의 커스텀 폼에서 역할이 다릅니다.

일반 [form]은 기본 폼을 생성합니다. 실제 제출 대상 및 method가 필요한 경우 페이지의 폼 구현과 연동해야 하며, [form]만으로 자동으로 글로벌 검색 기능이 지정되지는 않습니다.

데이터 항목 검색은 [form biz="1-0-0"]으로 구성합니다. 내부에 [item-filter] 또는 [item-category-filter]를 넣으면 조회용 입력 이름과 값이 생성되며 GET 기반 검색에 필요한 시스템 값이 구성됩니다.

예: [form biz="1-0-0"][item-filter field="name"][item-filter-key] / [item-filter-value][/item-filter][/form]

같은 화면에 여러 검색 폼을 구분하려면 [form]의 filter-id와 [items]의 filter-id를 일치시킵니다. filter-id는 영문·숫자·하이픈·밑줄만 사용합니다.

게시판 커스텀 등록·수정 폼은 [form] 안에 [forum]을 넣고, [forum] 직접 본문에 커스텀 입력 요소를 작성합니다. 게시판이 생성하는 숨김 입력값과 제출 처리를 재사용하므로 폼을 중첩하지 않습니다.

폼에 직접 입력 요소를 작성할 때에는 각 요소의 name이 서버 처리 규약과 맞아야 합니다. placeholder나 required는 일반 HTML 속성이고 숏코드가 아닙니다.

글로벌 검색은 [form type="global-search"]...[/form]을 사용합니다. 시스템이 GET 방식의 form 태그와 검색 처리에 필요한 숨김 입력값을 자동 생성합니다.

검색어 입력 요소의 name에는 [global-search-key], value에는 [global-search-value]를 사용합니다.

예: [form type="global-search"]<input type="search" name="[global-search-key]" value="[global-search-value]" placeholder="검색어"><button type="submit">검색</button>[/form]

글로벌 검색과 데이터 항목 검색은 별개입니다. 데이터 항목 검색에는 [form biz="1-0-0"]과 [item-filter]를 사용합니다.

데이터 이름 검색 폼HTML + Shortcode
[form biz="1-0-0" filter-id="main"]
  [item-filter field="name"]
    <label>검색어
      <input type="search"
        name="[item-filter-key]"
        value="[item-filter-value]">
    </label>
  [/item-filter]
  <button type="submit">검색</button>
[/form]
10

[forum] — 게시판 기본 구조와 화면 전환

[forum id="1"]...[/forum]은 게시판을 현재 영역에 표시합니다. id는 게시판 ID이며 필수입니다.

주요 속성: id(게시판 ID), default-action(기본 진입 화면: list 또는 create), num-rows(페이지당 글 수, 1 이상의 정수), list-type(시스템 기본 목록 유형), category-ids(표시 분류 범위), access(author 또는 item-owner), next-page-action(등록 후 동작).

URL에서 유효한 등록·열람·수정 action이 지정된 경우 해당 화면이 우선합니다. 지정된 화면이 없으면 default-action을 적용하며, 기본값은 list입니다.

기본 진입을 목록으로 하려면 [forum id="1"]을 사용합니다. 기본 진입을 바로 등록으로 하려면 [forum id="1" default-action="create"]를 사용합니다.

[posts]가 있으면 커스텀 목록 템플릿을 사용합니다. [posts]가 없으면 시스템 기본 목록을 사용합니다.

등록·수정 화면에서 [form]으로 감싸진 [forum]에 [posts] 외부의 직접 본문이 있으면 그 본문을 커스텀 폼으로 사용합니다. 조건을 충족하지 않으면 시스템 기본 폼이 사용될 수 있습니다.

게시글 열람은 시스템 열람 화면에서 처리합니다. [posts]나 커스텀 등록 폼의 유무와는 별개입니다.

예: [form][forum id="1" default-action="list"][posts][post-row][post-title][/post-row][post-pagination][/posts][post-field id="101"][/forum][/form]

위 예에서는 목록 화면에 [posts] 내용이 표시되고, 등록·수정 화면에서는 [posts] 바깥에 둔 필드 템플릿이 폼의 일부로 사용됩니다.

현재 제공된 code_forum 구현은 [forum] 안의 직접 콘텐츠를 커스텀 폼으로 다루며, [forum-form]이라는 독립 전용 숏코드를 처리하는 흐름은 확인되지 않았습니다. [forum-form]은 지원이 확인되기 전에는 실제 사용 매뉴얼의 필수 코드로 취급하지 않습니다.

action 및 form-type 속성은 현재 [forum]에서 지원되지 않습니다. 시작 화면은 default-action="create"로 지정합니다.

단일 페이지에 여러 게시판 숏코드가 있는 경우 code_idx가 개별 게시판에 대한 URL action을 구별합니다. 이동 링크를 직접 조립하지 말고 제공되는 [post-view-url], [post-create-url]을 활용합니다.

게시판의 기본 목록·등록 화면HTML + Shortcode
<!-- 기본 목록 화면 -->
[forum id="1" num-rows="10"]
[/forum]

<!-- 등록 화면부터 시작할 경우 -->
[forum id="1" default-action="create"]
[/forum]
11

게시판 목록 및 반복 필드

[posts]는 [forum] 안의 커스텀 목록 영역입니다. 목록 디자인의 범위를 정의하며 필요 시 [/posts]로 닫습니다.

[post-row]는 게시글 하나에 적용할 반복 템플릿입니다. [posts] 내부에 배치합니다.

[post-title]은 게시글 제목입니다.

[post-number]는 목록 번호입니다. reversed="true"를 사용하면 역순 번호를 표시합니다.

[post-author]는 작성자 표시입니다.

[post-created-date]는 글 등록 날짜입니다.

[post-content]는 게시글 내용 또는 요약입니다. max-length="100"처럼 출력 길이를 제한할 수 있습니다.

[post-view-url]은 현재 글의 열람 URL입니다. 각 [post-row] 안에서 사용합니다.

[post-create-url]은 글쓰기 화면 URL입니다. 게시판 목록 영역에서 사용합니다.

[post-pagination]은 페이지 이동 UI입니다. [posts]에 배치합니다.

[post-count id="1"]은 데이터 항목과 연결된 특정 게시판의 글 수를 보여줍니다. [item-view]에서 관련 후기·문의 수를 표시할 때 사용합니다.

[item-view] 안에서 현재 항목과 연결된 게시글 목록을 표시할 때도 [forum id="1"] 안에 [posts]를 배치합니다.

예: [forum id="1" num-rows="10"][posts][post-row][post-number] / [post-title] / [post-author] / [post-created-date] / [post-view-url][/post-row][post-pagination][if condition="forum-can-create"][post-create-url][/if][/posts][/forum]

게시판 목록 직접 구성하기HTML + Shortcode
[forum id="1" num-rows="10"]
  [posts]
    <ul>
      [post-row]
        <li>
          <a href="[post-view-url]">[post-title]</a>
          <span>[post-author]</span>
          <time>[post-created-date]</time>
        </li>
      [/post-row]
    </ul>
    [post-pagination]
    [if condition="forum-can-create"]
      <a href="[post-create-url]">글쓰기</a>
    [/if]
  [/posts]
[/forum]
12

[post-field] — 게시판 개별 필드, 첨부파일, 선택값

[post-field id="101"]은 해당 게시판의 사용자 정의 필드 ID를 지정합니다. 목록에서 값을 출력하거나 등록·수정 폼의 입력 요소를 구성합니다.

[post-field-key]는 해당 필드의 폼 제출 name 값을 생성합니다. 폼 작성 시 입력 요소 name에 배치합니다.

[post-field-value]는 현재 필드의 값 또는 수정 중인 값을 출력합니다. 입력 요소의 value나 textarea 내용에 사용할 수 있습니다.

선택형 필드는 [post-field-option-row]...[/post-field-option-row]로 옵션을 반복합니다.

[post-field-option-name]은 선택지 이름, [post-field-option-value]는 선택지 값입니다.

[if condition="post-field-option-selected"]는 해당 옵션이 선택되어 있는지 판별합니다. 선택 상태를 입력 요소에 반영할 때 사용합니다.

기본 예: [post-field id="101"][post-field-key] / [post-field-value][/post-field]

선택형 예: [post-field id="102"][post-field-key] / [post-field-option-row][post-field-option-value] : [post-field-option-name] [if condition="post-field-option-selected"]선택됨[/if][/post-field-option-row][/post-field]

[post-field key="image"]는 해당 게시글에 첨부된 일반 이미지 파일을 다룹니다. 등록·수정 폼에서는 시스템이 사진 등록 버튼과 업로드 미리보기 영역을 출력합니다.

[post-field key="generic"]는 일반 첨부파일을 다룹니다. 등록·수정 폼에서는 파일 등록 버튼과 첨부 목록 영역을 출력합니다.

key="audio", key="video"는 현재 구현에서 미지원 오류를 반환합니다.

key와 id는 같은 [post-field]에 동시에 지정하면 안 됩니다.

group은 기본 이미지·첨부파일 영역 번호이며 생략하면 1입니다. group="2", group="3"처럼 영역을 늘릴 수 있습니다. 커스텀 필드는 기존처럼 id로 구분하며 group은 기본 영역에서만 사용합니다.

예: [post-field key="image" group="2" limit="3"][post-field-row][post-file-url][/post-field-row][/post-field]

등록·수정 폼에서도 같은 group을 지정하면 해당 영역의 업로드 버튼과 미리보기가 생성됩니다.

key=image나 generic을 목록에 출력할 때는 반드시 [post-field-row] 반복 영역을 제공합니다.

예: [post-field key="image" limit="3"][post-field-row][post-file-url] / [post-file-alt][/post-field-row][/post-field]

예: [post-field key="generic" limit="5"][post-field-row][post-file-name] / [post-file-download-url][/post-field-row][/post-field]

[post-field-row]는 첨부된 파일 하나씩 반복합니다. 목록 내 첨부파일 표시용이며, 등록 폼의 시스템 업로드 위젯 자체를 의미하지 않습니다.

[post-file-url]은 이미지 또는 첨부파일 URL입니다.

[post-file-download-url]은 첨부파일 다운로드 URL입니다.

[post-file-alt]는 파일 대체 텍스트입니다.

[post-file-name]은 원본 파일명입니다.

파일형 [post-field]는 limit과 position을 지원합니다. limit은 앞에서부터 최대 몇 건 조회할지 정하고, 별도 지정하지 않으면 기본 1건입니다. limit="all"은 전체를 출력합니다. position="2"는 첨부 정렬 순서 중 두 번째 파일만 대상으로 합니다. position이 지정되면 limit 대신 특정 위치 조회를 수행합니다. position은 1 이상의 숫자를 사용합니다.

예: [post-field key="image" position="1"][post-field-row][post-file-url][/post-field-row][/post-field]

예: [post-field key="image" limit="10"][post-field-row][post-file-url][/post-field-row][/post-field]

limit은 출력 수 제한이지 전체 첨부 개수 반환 기능이 아닙니다. 별도의 이미지 개수 표시가 꼭 필요하면 서버 출력 기능을 추가해야 합니다.

일부 기존 시스템 기본 게시판 목록에서는 이미지 개수(img_cnt)를 내부에서 계산하지만, 이를 커스텀 목록용 공개 숏코드와 동일하게 생각하면 안 됩니다.

게시판 입력 필드와 첨부파일HTML + Shortcode
[form]
  [forum id="1" default-action="create"]
    [post-field id="101"]
      <label>내용
        <input type="text"
          name="[post-field-key]"
          value="[post-field-value]">
      </label>
    [/post-field]
    [post-field key="image"]
    [/post-field]
    [post-field key="generic"]
    [/post-field]
    <button type="submit">등록</button>
  [/forum]
[/form]
13

[forum-categories] — 게시판 분류

[forum-categories id="1"]은 ID로 지정한 게시판의 분류 목록을 출력합니다. 현재 제공된 code_forum_cats 구현은 속성 이름 id를 사용합니다. forum-id가 아닙니다.

[forum-category-row]는 분류 하나씩 반복합니다.

[forum-category-name]은 분류명입니다.

[forum-category-url]은 해당 분류로 이동하는 URL입니다.

[forum-category-reset-url]은 분류 선택을 해제하고 전체 목록으로 이동하는 URL입니다.

조건명 forum-category-reset-selected는 전체 분류가 선택된 상태를 판별합니다.

예: [forum-categories id="1"][forum-category-reset-url] / [forum-category-row][forum-category-name] : [forum-category-url][/forum-category-row][/forum-categories]

게시판 분류 링크HTML + Shortcode
[forum-categories id="1"]
  <a href="[forum-category-reset-url]">전체</a>
  [forum-category-row]
    <a href="[forum-category-url]">
      [forum-category-name]
    </a>
  [/forum-category-row]
[/forum-categories]
14

[items] — 상품·업체·시설·교육 등 공통 데이터 목록

[items biz="1-0-0"]은 지정한 데이터 유형에 속한 항목을 조회합니다. 실제 biz 값은 시스템 설정값을 사용합니다.

[items] 주요 속성: biz(데이터 유형), num-rows(페이지당 수), row-ids(개별 ID), category-ids(분류 제한), orderby(기본 정렬), order(asc/desc), filter-id(검색 연결), options(특수 범위), service-year/month/day/date(서비스 날짜 제한).

[items]는 목록 범위이고, [item-row]는 조회된 각 항목을 반복합니다.

[item-id]는 항목 ID, [item-name]은 항목 이름, [item-view-url]은 상세 열람 URL, [item-pagination]은 페이지네이션, [item-total-count]는 전체 검색 결과 수입니다.

예: [items biz="1-0-0" num-rows="6"][item-row][item-id] / [item-name] / [item-view-url][/item-row][item-total-count][item-pagination][/items]

특정 항목만 보기: [items biz="1-0-0" row-ids="101,102,103"][item-row][item-name][/item-row][/items]

무작위 목록: [items biz="1-0-0" num-rows="4" orderby="random"][item-row][item-name][/item-row][/items]

orderby에는 id, hits, random, item-field-ID 형식 등이 사용됩니다. 표시 정렬 메뉴의 sort_order, name, low_cost, high_cost 등의 기준과는 적용 방식이 다를 수 있으므로 해당 정렬 섹션도 참고합니다.

options=related는 현재 항목과 연결된 데이터, options=store는 현재 등록자 관련 데이터, options=user-assigned는 사용자에게 할당된 항목입니다. 해당 문맥이 있는 화면에서 사용합니다.

데이터 목록과 페이지 이동HTML + Shortcode
[items biz="1-0-0" num-rows="6"]
  <p>전체 [item-total-count]개</p>
  <div class="item-list">
    [item-row]
      <article>
        <h2>[item-name]</h2>
        <a href="[item-view-url]">상세 보기</a>
      </article>
    [/item-row]
  </div>
  [item-pagination]
[/items]
15

[item-view] — 데이터 상세정보

[item-view]...[/item-view]는 현재 열람 중인 항목의 상세 페이지입니다. URL에 정상적인 항목 ID가 있어야 합니다.

[item-name]은 이름, [item-id]는 ID, [item-content1]과 [item-content2]는 상세 페이지의 첫 번째·두 번째 콘텐츠 영역입니다.

[item-cost number="1"]은 지정된 번호의 금액을 출력합니다. 목록용 [item-cost1]과 구별합니다.

[item-select-options]는 항목 옵션 선택 UI를 출력합니다.

[item-subtotal]은 선택 상태에 따라 계산된 결제 금액입니다.

[item-amount]는 시스템 금액 영역입니다.

[item-shipping-cost]는 배송비, [item-reward-point]는 적립 포인트입니다.

[item-view-print-url]는 현재 상세 화면의 인쇄용 URL입니다.

[item-forum-buttons]는 해당 항목과 연결된 문의 등 게시판 동작 버튼입니다.

예: [item-view][item-name] / [item-content1] / [item-content2] / [item-cost number="1"] / [item-subtotal][/item-view]

해당 항목 데이터 유형이 금액·옵션·배송·적립·예약을 지원하지 않으면 대응 숏코드를 배치해도 의미 있는 값이 나오지 않을 수 있습니다.

데이터 상세 화면HTML + Shortcode
[item-view]
  <h1>[item-name]</h1>
  <div>[item-content1]</div>
  <div>[item-content2]</div>
  <p>[item-cost number="1"]</p>
  [item-select-options]
  [item-subtotal]
[/item-view]
16

[item-field] — 상품·데이터 기본 및 사용자 정의 필드

[item-field id="101"]은 데이터 항목의 사용자 정의 필드를 출력합니다. 지정한 id가 해당 biz의 실제 필드여야 합니다.

[item-field key="image" group="1"]은 기본 대표이미지, group="2"는 기본 상세이미지를 출력합니다. group을 생략하면 1이며 이후 3, 4번 영역도 같은 방식으로 사용합니다.

기본 이미지와 커스텀 이미지는 [items]의 [item-row], [item-children-row], [item-view]에서 사용할 수 있습니다. key와 id는 함께 지정하지 않습니다.

기본 이미지는 현재 상품에서 가져옵니다. 하위 상품 화면에서 부모 상품의 기본 이미지는 target="parent"로 선택하며, 생략하거나 target="current"이면 현재 상품 이미지입니다. 이미지가 없을 때 부모 이미지로 자동 대체하지 않습니다.

예: [item-field key="image" group="1" target="parent"][item-field-row][item-file-url][/item-field-row][/item-field]

커스텀 이미지는 필드 설정에 따라 부모 또는 하위 상품에서 가져오며 target은 기본 이미지에서만 사용합니다.

[item-field-row]는 여러 값, 이미지, 첨부파일을 하나씩 반복합니다.

[item-file-url]은 파일 URL, [item-file-alt]는 이미지 대체 문구, [item-file-name]은 파일 원본 이름입니다.

[item-field-option-row]는 선택형 옵션 반복입니다. [item-field-option-name]과 [item-field-option-value]는 이름과 값을 출력합니다.

[item-field-name]은 일부 선택형/분류 필드 출력 문맥에서 필드 이름을 나타내는 내부 치환 코드로 확인됩니다. 실제 지원 범위는 해당 필드 표시 루틴에 따릅니다.

이미지 예: [item-field id="101" row-limit="3"][item-field-row][item-file-url] / [item-file-alt][/item-field-row][/item-field]

이미지는 limit으로 출력 수, position으로 그룹 또는 필드 안의 특정 정렬 위치를 지정합니다. limit="all"은 전체 이미지를 출력합니다. position이 있으면 limit보다 우선합니다. 기존 row-limit, row-index도 사용할 수 있습니다.

기본 이미지와 목록의 커스텀 이미지는 기본 1건이며, 상세의 기존 커스텀 이미지는 limit 생략 시 전체를 출력합니다. 필요한 수량을 명시하면 목록과 상세에서 같은 결과를 얻을 수 있습니다.

예: [item-field key="image" group="2" limit="5"][item-field-row][item-file-url] / [item-file-alt][/item-field-row][/item-field]

선택형 예: [item-field id="102"][item-field-option-row][item-field-option-name] / [item-field-option-value][/item-field-option-row][/item-field]

목록에서 이미지 필드 출력HTML + Shortcode
[items biz="1-0-0"]
  [item-row]
    <h2>[item-name]</h2>
    [item-field id="101" row-limit="3"]
      [item-field-row]
        <img src="[item-file-url]"
          alt="[item-file-alt]">
      [/item-field-row]
    [/item-field]
  [/item-row]
[/items]
17

데이터 목록 검색, 검색조건 표시, 예약 날짜 입력값

데이터 항목 이름 검색은 [form biz="1-0-0"] 안의 [item-filter field="name"]으로 생성합니다.

[item-filter]의 field="name"은 이름 검색이며, field-id는 사용자 정의 필드 검색을 지정합니다. 두 속성은 동시에 사용하지 않습니다.

[item-filter-key]는 검색 입력 요소의 name, [item-filter-value]는 현재 검색값입니다.

예: [form biz="1-0-0"][item-filter field="name"][item-filter-key] / [item-filter-value][/item-filter][/form]

[item-category-filter]는 분류 검색용입니다. type-number로 대상 분류 유형을 지정합니다.

[item-category-filter-key]는 분류 검색 입력명, [item-category-filter-value]는 분류 검색값입니다.

[filter-selections]는 현재 적용된 검색조건을 표시할 영역입니다. 내부에서 [item-filter]나 [item-categories] 등 선택된 조건을 표시하는 코드를 사용합니다.

예: [form biz="1-0-0"][filter-selections][item-filter field="name"][item-filter-value][/item-filter][/filter-selections][/form]

같은 biz와 filter-id로 검색폼 및 [items]를 연결합니다. biz만 같은 경우에도 검색 문맥이 공유될 수 있으므로 여러 목록에서는 filter-id를 구별합니다.

[item-reservation-date-key], [item-reservation-date-value]는 단일 예약 날짜 입력명과 현재 선택값입니다.

[item-reservation-start-key], [item-reservation-start-value]는 예약 시작일 입력명과 현재 선택값입니다.

[item-reservation-end-key], [item-reservation-end-value]는 예약 종료일 입력명과 현재 선택값입니다.

이 예약 날짜 코드들은 상품 예약 검색 문맥에서 변환됩니다. 단순 콘텐츠 영역에 놓을 때 자동 예약폼이 생긴다고 생각하면 안 됩니다.

검색 폼과 결과 목록 연결HTML + Shortcode
[form biz="1-0-0" filter-id="course-search"]
  [item-filter field="name"]
    <input type="search" aria-label="이름 검색"
      name="[item-filter-key]"
      value="[item-filter-value]">
  [/item-filter]
  <button type="submit">검색</button>
[/form]

[items biz="1-0-0" filter-id="course-search"]
  [item-row]
    <a href="[item-view-url]">[item-name]</a>
  [/item-row]
  [item-pagination]
[/items]
18

[item-categories] — 데이터 분류 목록과 탐색

[item-categories biz="1-0-0"]은 데이터 분류 전체를 출력합니다.

속성: biz(유형), type-number(분류 유형), category-ids(기준 분류), depth(출력 단계; 기본 1, 지원 중첩 예시는 최대 3단계).

[item-category-row]는 분류 한 건의 반복 템플릿입니다.

[item-category-name]은 분류 이름, [item-category-url]은 이동 주소입니다.

[item-category-children]은 2차 하위 분류 영역, [item-category-child-row]는 그 하위 분류 반복입니다.

[item-category-children-2]는 3차 하위 분류 영역, [item-category-child-2-row]는 3차 반복입니다.

[item-category-key]와 [item-category-value]는 분류를 선택하는 필터 UI 문맥에서 선택 입력의 이름과 값으로 변환됩니다. 전체 분류 목록에서 무조건 동일하게 변환된다고 생각하지 않습니다.

[item-category-file type="image" location-number="1"]는 현재 분류에 등록된 이미지 파일을 출력하는 분류 전용 코드입니다. type은 image, location-number는 이미지 위치 번호로 사용합니다. 분류 반복 출력 문맥에서 사용합니다.

[if condition="item-category-selected"]는 분류가 현재 선택된 상태인지 확인합니다.

예: [item-categories biz="1-0-0" depth="2"][item-category-row][item-category-name] / [item-category-url][item-category-children][item-category-child-row][item-category-name][/item-category-child-row][/item-category-children][/item-category-row][/item-categories]

[category-ids]는 조회 분류를 제한하고, depth는 몇 단계까지 출력할지 정합니다. 하위 분류를 별도 영역으로 중첩하지 않으면 같은 레벨의 반복 템플릿으로 표시될 수 있습니다.

2단계 분류 목록HTML + Shortcode
[item-categories biz="1-0-0" depth="2"]
  [item-category-row]
    <a href="[item-category-url]">
      [item-category-name]
    </a>
    [item-category-children]
      [item-category-child-row]
        <a href="[item-category-url]">
          [item-category-name]
        </a>
      [/item-category-child-row]
    [/item-category-children]
  [/item-category-row]
[/item-categories]
19

[menu] — 사이트 메뉴와 일반 메뉴 반복

[menu]는 사이트 페이지 관리에 등록된 메뉴 목록을 출력합니다. [depth1]에서 [depth4]까지 1~4차 계층 영역을 사용할 수 있습니다.

[depth1-row], [depth2-row], [depth3-row], [depth4-row]는 해당 단계의 메뉴별 반복입니다.

[depth3]는 3차 메뉴 영역으로, 내부의 [depth3-row]에서 3차 메뉴를 반복합니다. [depth4]는 4차 메뉴 영역으로, 내부의 [depth4-row]에서 4차 메뉴를 반복합니다. 각 단계는 해당 상위 메뉴 영역 안에 중첩하여 구성합니다.

[name]은 현재 메뉴 이름입니다.

[attributes]는 현재 메뉴 링크에 필요한 주소·새 창 열기 등의 HTML 속성 문자열입니다. 코드 예제처럼 링크 요소의 시작 부분에 삽입해 사용합니다.

일반 사이트 메뉴 반복 행의 custom-key는 테마/페이지 관리 메뉴 설정에 연결된 실제 키여야 합니다. 키가 매칭되지 않으면 메뉴가 표시되지 않을 수 있습니다.

[menu] 안에는 시작 단계에 대응하는 [depthN]과 [depthN-row]가 모두 필요합니다. 1차부터 시작할 경우 [menu] > [depth1] > [depth1-row] 순서로 작성하고 [/depth1-row], [/depth1], [/menu] 순서로 닫습니다. PC·모바일·푸터 메뉴에 [menu]를 각각 사용한다면 각 영역마다 이 구조를 완성해야 합니다.

예: [menu][depth1][depth1-row custom-key="NAV_KEY_1"][name] / [attributes][depth2][depth2-row custom-key="NAV_KEY_2"][name] / [attributes][/depth2-row][/depth2][/depth1-row][/depth1][/menu]

[if condition="menu-selected"]는 해당 메뉴가 현재 선택된 상태인지 판별합니다.

[depth2]처럼 하위 단계부터 메뉴를 구성할 수도 있습니다. 현재 메뉴·상위 메뉴의 탐색 문맥에 따라 결과가 달라집니다.

사이트 메뉴에 연결된 데이터 분류는 메뉴 안에 자동으로 합쳐질 수 있습니다. [item-menu]를 같은 depth에 지정하면 일반 메뉴와 분류 메뉴에 서로 다른 출력 템플릿을 사용할 수 있습니다.

사이트 메뉴와 하위 메뉴HTML + Shortcode
[menu]
  [depth1]
    [depth1-row custom-key="NAV_KEY_1"]
      <a [attributes]>[name]</a>
      [depth2]
        [depth2-row custom-key="NAV_KEY_2"]
          <a [attributes]>[name]</a>
        [/depth2-row]
      [/depth2]
    [/depth1-row]
  [/depth1]
[/menu]
20

[item-menu] — 데이터 분류 메뉴, 단독 또는 [menu] 내부

[item-menu biz="1-0-0"]은 지정된 데이터 유형의 분류 메뉴를 독립 출력합니다. type-number로 분류 유형 번호를 지정하며 기본값은 1입니다.

독립 [item-menu]는 [depth1]~[depth4]와 그에 따른 [-row] 반복 템플릿을 사용합니다.

예: [item-menu biz="1-0-0"][depth1][depth1-row][name] / [attributes] / [if condition="item-menu-selected"]현재 분류[/if][/depth1-row][/depth1][/item-menu]

[menu] 안에 놓인 [item-menu]는 독립 데이터 분류 조회 숏코드가 아니라 해당 depth의 분류 메뉴 행 템플릿으로 사용됩니다. 이 경우 별도의 biz를 쓰지 않습니다.

예: [menu][depth2][depth2-row custom-key="NAV_KEY_2"][name][/depth2-row][item-menu][name] / [attributes][/item-menu][/depth2][/menu]

일반 메뉴는 [depth2-row], 분류 메뉴는 [item-menu]의 내용을 따로 사용합니다. 두 코드를 둔 순서가 해당 영역의 출력 순서에 영향을 줍니다.

[if condition="item-menu-selected"]는 분류 메뉴 선택 여부입니다.

단독 분류 메뉴의 조회는 대체로 상위 데이터 유형(biz1)의 분류 체계를 기준으로 합니다.

데이터 분류를 독립 메뉴로 출력HTML + Shortcode
[item-menu biz="1-0-0" type-number="1"]
  [depth1]
    [depth1-row]
      <a [attributes]>[name]</a>
      [if condition="item-menu-selected"]
        <span>현재 분류</span>
      [/if]
    [/depth1-row]
  [/depth1]
[/item-menu]
21

[gallery]와 공통 슬라이더

[gallery]는 내부 갤러리 콘텐츠 영역입니다. 슬라이더 관련 코드를 넣으면 이미지나 일반 콘텐츠로 슬라이더를 구성합니다.

[slider-class]는 슬라이더 최상위 클래스, [slider-rows-class]는 슬라이드 묶음 클래스입니다.

[gallery-rows-class]는 갤러리 내부에서 특수하게 정리되는 갤러리 행 클래스용 코드입니다. 현재 구현에서 특정 클래스 문자열 제거 처리가 확인되므로 일반 [slider-rows-class]의 대체품처럼 사용하지 않습니다.

[slider-pagination-prev-class]는 이전 버튼 클래스, [slider-pagination-next-class]는 다음 버튼 클래스입니다.

[slider-pagination-class]는 페이지 표시 영역 클래스입니다.

[slider-pagination-row]는 개별 페이지 표시 디자인 영역입니다.

[slider-pagination-item-class]는 페이지 표시 항목 클래스입니다.

[slider-total-rows-class]는 전체 슬라이드 수 표시 클래스입니다.

[slider-selected-row-index-class]는 현재 슬라이드 번호 표시 클래스입니다.

[slider-clone-class]는 복제된 슬라이드 요소 관련 클래스입니다.

슬라이더의 선택 상태에는 공개 CSS 클래스 .slider-row-selected, .slider-pagination-selected를 사용할 수 있습니다.

주요 속성: slider-animation-type(기본 carousel), slides-to-scroll(기본 1), animation-autoplay(자동재생), animation-delay(기본 5초), animation-speed(기본 1초), slider-responsive(화면폭별 설정).

예: [gallery slides-to-scroll="1" animation-delay="5"][slider-class] / [slider-rows-class] / [slider-pagination-prev-class] / [slider-pagination-next-class] / [slider-pagination-class][/gallery]

[items] 안에서도 같은 슬라이더 코드를 사용할 수 있으며 각 [item-row]가 하나의 슬라이드 항목이 됩니다.

예: [items biz="1-0-0"][item-row][item-name][/item-row][slider-class] / [slider-rows-class][/items]

슬라이더 관련 클래스 코드는 문자열을 반환해 CSS class 안에 배치하는 유형이므로 실제 디자인 작업 시 적절한 구조가 필요합니다.

콘텐츠 슬라이더의 기본 구조HTML + Shortcode
[gallery slides-to-scroll="1" animation-delay="5"]
  <div class="[slider-class]">
    <div class="[slider-rows-class]">
      <div>첫 번째 콘텐츠</div>
      <div>두 번째 콘텐츠</div>
    </div>
    <button class="[slider-pagination-prev-class]"
      type="button">이전</button>
    <button class="[slider-pagination-next-class]"
      type="button">다음</button>
  </div>
[/gallery]
22

[schedule]과 달력

[schedule]은 일정·달력 데이터를 표시합니다.

[calendar-row]는 월별 달력 영역을 반복합니다. tag는 월 영역에 사용할 요소 유형입니다.

[calendar-date]는 해당 달력의 연월을 지정한 format으로 출력합니다. 예: [calendar-date format="Y.m"]

[calendar-week]는 주 단위 반복입니다.

[calendar-cell]은 날짜별 셀입니다. tag, class, event-click 같은 속성을 사용할 수 있습니다.

[calendar-cell-date]는 해당 날짜의 숫자 또는 포맷한 날짜입니다.

[schedule-row]는 해당 날짜에 연결된 일정 반복입니다.

[schedule-title]은 일정 제목, [schedule-content]는 일정 내용입니다.

[schedule-category-id], [schedule-category-name], [schedule-category-color]는 일정 분류의 ID·이름·색상입니다.

[schedule-category-row]는 일정 분류 목록의 반복입니다.

[schedule-date]는 특정 일정의 날짜 출력용 코드로 관련 일정 템플릿의 구현 흔적이 있으나, 전역적으로 지원되는 일반 달력 날짜 코드로 단정하지 않습니다.

[item-day-row]는 [calendar-cell] 안에서 날짜별 상품 요금 데이터가 있을 때 반복하는 영역입니다. 상품 가격이 날짜별로 설정된 예약 문맥에서 사용합니다.

[item-day-cost]는 [item-day-row] 안에서 해당 날짜의 요금을 출력합니다. 일반 일정 제목이나 전역 가격 출력 코드와는 다릅니다.

예: [calendar-cell tag="div"][calendar-cell-date format="d"][item-day-row][item-day-cost][/item-day-row][/calendar-cell]

기본 예: [schedule][calendar-row tag="section"][calendar-date format="Y년 m월"][calendar-week][calendar-cell tag="div"][calendar-cell-date format="d"][schedule-row][schedule-title] / [schedule-content][/schedule-row][/calendar-cell][/calendar-week][/calendar-row][/schedule]

속성: min-year(시작 연도), max-year(종료 연도), min-year-offset(현재 연도 기준 시작 차이), max-year-offset(현재 연도 기준 종료 차이), min-month(시작 월), max-month(종료 월), min-month-offset(월 이동), max-month-offset(시작 월 기준 추가 표시 개월 수).

min-month와 max-month는 양쪽 월을 포함합니다. 예를 들어 3~7월은 5개월 표시입니다. 종료 월이 시작 월보다 앞서면 다음 연도로 넘어갈 수 있습니다.

max-month-offset="2"는 시작 월을 포함한 3개월 표시입니다. min-month-offset과 함께 쓰면 시작 월을 이동한 다음 범위를 계산합니다.

예: [schedule max-month-offset="2"][calendar-row tag="section"][calendar-date format="Y.m"][/calendar-row][/schedule]

달력 이동용 [block handler="code" tag="button" event-click="prev-month"]은 이전 달, event-click="next-month"는 다음 달을 호출합니다.

[calendar-cell event-click="select-date"]는 날짜 선택 기능과 연결됩니다. 실제 선택 처리 가능 여부는 해당 일정/예약 문맥에 따릅니다.

월별 달력과 일정 제목HTML + Shortcode
[schedule]
  [calendar-row tag="section"]
    <h2>[calendar-date format="Y년 m월"]</h2>
    [calendar-week]
      [calendar-cell tag="div"]
        <span>[calendar-cell-date format="d"]</span>
        [schedule-row]
          <p>[schedule-title]</p>
        [/schedule-row]
      [/calendar-cell]
    [/calendar-week]
  [/calendar-row]
[/schedule]
23

[select-date] — 연도·월 선택 UI

[select-date]는 일정 영역 내에서 선택 가능한 날짜 요소를 만듭니다.

[select-date-row]는 선택지 하나의 반복입니다.

[select-date-name]은 연도 또는 월의 표시값이며 format을 지원합니다. 예: [select-date-name format="Y"], [select-date-name format="m"]

[select-date-url]은 해당 연도·월로 이동하는 링크입니다.

[if condition="select-date-selected"]는 현재 선택된 옵션을 판별합니다.

속성: min-year, max-year, min-year-offset, max-year-offset, min-month, max-month, min-month-offset, max-month-offset, tag, event-onchange.

event-onchange="select-year"는 선택 연도 변경, event-onchange="select-month"는 선택 월 변경입니다.

예: [schedule][select-date tag="select" event-onchange="select-year" min-year-offset="0" max-year-offset="3"][select-date-row][select-date-name format="Y"] [if condition="select-date-selected"]선택됨[/if][/select-date-row][/select-date][/schedule]

예: [schedule][select-date tag="select" event-onchange="select-month" min-month="1" max-month="12"][select-date-row][select-date-name format="m"][/select-date-row][/select-date][/schedule]

달력의 월 선택HTML + Shortcode
[schedule]
  [select-date tag="select"
    event-onchange="select-month"
    min-month="1" max-month="12"]
    [select-date-row]
      [select-date-name format="m"]
    [/select-date-row]
  [/select-date]
[/schedule]
24

[item-service-period] — 데이터 서비스 기간 탐색

[item-service-period]는 [items] 내부에 서비스 기간을 선택할 링크를 출력합니다. 독립된 최상위 영역으로 사용하는 기능은 아닙니다.

period 속성에 기간 유형 및 표시 이름의 매핑을 지정합니다.

기간 유형 years는 연도, months는 월, days는 일자, dates는 특정 날짜입니다.

[item-service-period-row]는 기간 선택지 반복입니다.

[item-service-period-name]은 설정한 표시 이름, [item-service-period-url]은 기간 검색 URL입니다.

[if condition="item-service-period-selected"]는 현재 선택된 기간을 판별합니다.

예: [items biz="1-0-0"][item-service-period period="{'months':{'1':'1월','2':'2월','3':'3월'}}"][item-service-period-row][item-service-period-name] / [item-service-period-url][/item-service-period-row][/item-service-period][item-row][item-name][/item-row][/items]

특정 날짜 예: [item-service-period period="{'dates':{'2026-11-01':'11월 1일'}}"][item-service-period-row][item-service-period-name][/item-service-period-row][/item-service-period]

해당 서비스 날짜로 실제 필터링할 수 있는 데이터 유형에서만 의미가 있습니다. 날짜 제한 기능이 없는 biz에서는 선택 링크를 표시해도 데이터가 걸러지지 않을 수 있습니다.

서비스 기간으로 목록 탐색HTML + Shortcode
[items biz="1-0-0"]
  [item-service-period period="{'months':{'1':'1월','2':'2월'}}"]
    [item-service-period-row]
      <a href="[item-service-period-url]">
        [item-service-period-name]
      </a>
    [/item-service-period-row]
  [/item-service-period]
  [item-row]
    <p>[item-name]</p>
  [/item-row]
[/items]
25

목록 정보, 금액, 상태, 정렬

[item-cost1]은 기본 금액입니다. [item-cost2]는 두 번째 금액입니다.

[item-currency-symbol]은 통화 기호입니다.

[item-status]는 상태값, [item-status-name]은 상태 이름입니다.

[item-view-count]는 상세 조회 수, [item-discount-value]는 할인값, [item-reward-point]는 적립 예정 포인트입니다.

[item-video-count]는 연관 영상 수, [item-service-days]는 서비스 이용일 수입니다.

[item-sort]는 [items] 내부의 정렬 UI 영역입니다.

[item-sort-options]는 정렬 기준 이름과 사용자 표시 문구를 설정합니다.

[item-sort-option-row]는 정렬 옵션 한 건을 반복합니다.

[item-sort-name]은 옵션 이름, [item-sort-url]은 적용 URL입니다.

[if condition="item-sort-option-selected"]는 현재 정렬 기준을 판별합니다.

지원 정렬 기준: id(ID), name(이름), hits(조회 수), sort_order(지정 순서), low_cost(낮은 금액), high_cost(높은 금액).

예: [items biz="1-0-0"][item-sort][item-sort-options id="최신순" name="이름순" hits="조회순" low_cost="낮은 가격순" high_cost="높은 가격순"][/item-sort-options][item-sort-option-row][item-sort-name] / [item-sort-url][/item-sort-option-row][/item-sort][item-row][item-name] / [item-cost1][/item-row][/items]

정렬 URL에서 src_order가 사용됩니다. 한 페이지에 여러 목록이 있는 경우 정렬 조건이 다른 목록에 영향을 줄 수 있으므로 구성에 주의합니다.

정렬 링크와 금액 표시HTML + Shortcode
[items biz="1-0-0"]
  [item-sort]
    [item-sort-options id="최신순" low_cost="낮은 가격순"]
    [/item-sort-options]
    [item-sort-option-row]
      <a href="[item-sort-url]">[item-sort-name]</a>
    [/item-sort-option-row]
  [/item-sort]
  [item-row]
    <p>[item-name] · [item-cost1]</p>
  [/item-row]
[/items]
26

현재 항목에 연결된 분류, 분류 콘텐츠, 하위 항목

[item-assigned-categories]는 현재 항목에 실제로 할당된 분류만 표시합니다. [item-categories]는 전체 분류 목록이므로 용도가 다릅니다.

속성: biz(데이터 범위), type-number(분류 유형), category-ids(기준 분류).

[item-assigned-category-row]는 연결된 분류마다 반복합니다.

[item-category-path]는 한 분류의 상위부터 현재까지의 경로 출력 범위입니다.

[item-category-path-row]는 경로에 포함된 단계마다 반복합니다.

예: [item-view][item-assigned-categories][item-assigned-category-row][item-category-path][item-category-path-row][item-category-name][/item-category-path-row][/item-category-path][/item-assigned-category-row][/item-assigned-categories][/item-view]

[item-category-content]는 연결된 분류에 등록된 콘텐츠를 출력합니다.

속성: biz(분류 범위), type-number(분류 유형), category-idx(연결된 분류 순번), content-idx(출력할 콘텐츠 번호).

예: [item-category-content biz="1-0-0" type-number="1" content-idx="1"]

[item-children]는 부모 항목의 하위 항목 목록입니다. [items]의 [item-row] 안에 배치하며, biz2로 하위 데이터 유형을 구별합니다.

[item-children-row]는 [item-children]의 각 하위 항목 반복입니다.

예: [items biz="1-0-0"][item-row][item-name] / [item-children biz2="2"][item-children-row][item-name][/item-children-row][/item-children][/item-row][/items]

현재 항목에 연결된 분류 경로HTML + Shortcode
[item-view]
  [item-assigned-categories]
    [item-assigned-category-row]
      [item-category-path]
        [item-category-path-row]
          <span>[item-category-name]</span>
        [/item-category-path-row]
      [/item-category-path]
    [/item-assigned-category-row]
  [/item-assigned-categories]
[/item-view]
27

장바구니, 찜, 주문 관련 동작

[item-add-to-cart-action]는 목록의 현재 항목을 장바구니에 담는 JavaScript 실행 문자열입니다. [item-row] 안의 클릭 핸들러에서 사용합니다.

[item-add-to-wishlist-action]는 목록의 현재 항목을 찜 목록에 담는 JavaScript 실행 문자열입니다.

상세 화면 [item-view]에서는 [block handler="code" tag="button" type="button" event-click="add-to-cart"] 또는 event-click="add-to-wishlist" 방식으로 시스템 클릭을 연결합니다.

[item-select-options]와 [item-subtotal]이 있는 상세 화면에서는 구매 옵션 선택 결과에 따라 동작이 달라질 수 있습니다.

장바구니·찜 기능이 제공되지 않는 biz에서 해당 동작을 무조건 사용하지 않습니다.

[cart-item-count biz="1-0-0"]는 해당 biz 장바구니 수, [wishlist-item-count biz="1-0-0"]는 찜 수입니다.

목록에서 장바구니·찜 동작 연결HTML + Shortcode
[items biz="1-0-0"]
  [item-row]
    <h2>[item-name]</h2>
    <button type="button"
      onclick="[item-add-to-cart-action]">장바구니</button>
    <button type="button"
      onclick="[item-add-to-wishlist-action]">찜</button>
  [/item-row]
[/items]
<p>장바구니 [cart-item-count biz="1-0-0"]개</p>
28

후기, 문의, 교육 영상 및 시험

[item-review id="1" type="count"]는 연결된 후기 건수입니다.

[item-review id="1" type="percentage"]는 후기 평점 비율입니다. 연결된 후기 설정 ID가 있어야 합니다.

[post-count id="1"]은 [item-view]에서 현재 항목과 연결된 게시글 수를 표시합니다. 게시글 목록은 [forum id="1"] 안에 [posts]를 배치해 출력합니다.

[item-videos]는 교육과정의 영상 목록 영역입니다.

[item-video-row]는 영상 하나에 해당하는 반복입니다.

[item-video-number]는 영상 순번이며 reversed="true"를 사용하면 역순으로 표시합니다.

[item-video-name]은 영상 이름, [item-video-minutes]는 영상 분량입니다.

[item-video-preview-action]은 해당 영상의 미리보기 실행 JavaScript입니다.

[if condition="item-video-preview-available"]는 현재 영상에서 미리보기가 가능한 경우에만 내용을 표시합니다.

예: [item-view][item-videos][item-video-row][item-video-number] / [item-video-name] / [item-video-minutes] [if condition="item-video-preview-available"][item-video-preview-action][/if][/item-video-row][/item-videos][/item-view]

[item-exam-attempt-url]는 시험 유형의 항목에서 응시 URL을 만듭니다. 일반 상품의 링크로 대체하지 않습니다.

교육과정의 영상 목록과 관련 문의 수HTML + Shortcode
[item-view]
  <h1>[item-name]</h1>
  <p>문의 [post-count id="1"]건</p>
  [item-videos]
    <ul>
      [item-video-row]
        <li>
          [item-video-number]. [item-video-name]
          <span>[item-video-minutes]분</span>
        </li>
      [/item-video-row]
    </ul>
  [/item-videos]
[/item-view]
29

YouTube 및 지도, 반응형 스타일

[youtube-video url="https://www.youtube.com/embed/VIDEO_ID"]는 YouTube 영상을 임베드합니다.

속성: url(임베드 주소), hide-controls(컨트롤 숨김 관련 처리), style(크기·비율 조절). hide-controls는 값 없이 작성합니다.

예: [youtube-video url="https://www.youtube.com/embed/VIDEO_ID" hide-controls]

[kakao-map]은 카카오 지도 임베드 코드로 지도를 출력합니다.

속성: timestamp, key, timestamp-item-field-id, key-item-field-id, style.

고정 위치 예: [kakao-map timestamp="MAP_TIMESTAMP" key="MAP_KEY"]

항목별 위치 예: [item-view][kakao-map timestamp-item-field-id="101" key-item-field-id="102"][/item-view]

[google-map]은 위도·경도로 구글 지도를 표시합니다.

속성: lat, lng, lat-item-field-id, lng-item-field-id, style.

고정 위치 예: [google-map lat="37.5665" lng="126.9780"]

항목별 위치 예: [item-view][google-map lat-item-field-id="201" lng-item-field-id="202"][/item-view]

지도와 영상의 style 속성은 기본 스타일과 화면 크기별 미디어 쿼리를 구조화해 지정할 수 있습니다.

예: [google-map lat="37.5665" lng="126.9780" style="{'default':{'height':'450px'},'@media screen and (max-width:767px)':{'height':'320px'}}"]

상대적 비율 또는 특정 크기를 지정하려면 해당 지도나 영상 숏코드에서 구현된 style 속성에 맞춰 작성합니다.

영상과 지도 삽입HTML + Shortcode
[youtube-video
  url="https://www.youtube.com/embed/VIDEO_ID"]

[google-map lat="37.5665" lng="126.9780"
  style="{'default':{'height':'450px'},'@media screen and (max-width:767px)':{'height':'320px'}}"]

[kakao-map timestamp="MAP_TIMESTAMP" key="MAP_KEY"]
30

[qr-code] — 게시글 QR 코드

[qr-code type="post-view" size="160"]는 게시글 열람 URL에 대한 QR 코드 이미지를 생성합니다.

속성: type(현재 지원되는 용도 post-view), size(QR 코드 이미지 크기, 필수).

현재 게시글 번호를 식별할 수 있는 post-id가 요청 정보에 있어야 정확한 열람 URL을 생성합니다.

현재 게시글의 QR 코드HTML + Shortcode
<!-- 게시글 번호를 식별할 수 있는 열람 화면에서 사용합니다. -->
<div class="post-qr">
  [qr-code type="post-view" size="160"]
</div>
31

범위별 간단 구성 예

일반 목록: [items biz="1-0-0"][item-row][item-name] / [item-view-url][/item-row][item-pagination][/items]

검색 + 목록: [form biz="1-0-0" filter-id="main"][item-filter field="name"][item-filter-key] / [item-filter-value][/item-filter][/form] 와 [items biz="1-0-0" filter-id="main"][item-row][item-name][/item-row][/items]

게시판 목록: [forum id="1"][posts][post-row][post-title] / [post-view-url][/post-row][post-pagination][/posts][/forum]

게시판 기본 등록 화면부터 시작: [forum id="1" default-action="create"]게시판 입력 요소[/forum]

상품 상세: [item-view][item-name] / [item-content1] / [item-select-options] / [item-subtotal][/item-view]

교육과정 상세: [item-view][item-name] / [item-videos][item-video-row][item-video-name][/item-video-row][/item-videos][/item-view]

사이트 메뉴: [menu][depth1][depth1-row custom-key="NAV_KEY"][name] / [attributes][/depth1-row][/depth1][/menu]

분류 메뉴: [item-menu biz="1-0-0"][depth1][depth1-row][name] / [attributes][/depth1-row][/depth1][/item-menu]

달력: [schedule][calendar-row tag="section"][calendar-date format="Y.m"][calendar-week][calendar-cell tag="div"][calendar-cell-date format="d"][/calendar-cell][/calendar-week][/calendar-row][/schedule]

공통 콘텐츠와 데이터 목록 함께 배치HTML + Shortcode
[content id="10"]
<section>
  <h2>등록된 항목</h2>
  [items biz="1-0-0" num-rows="3"]
    [item-row]
      <a href="[item-view-url]">[item-name]</a>
    [/item-row]
  [/items]
</section>
32

배포 전 확인사항 및 현재 확인된 제약

1. 숏코드가 화면 범위에 맞게 중첩되어 있는지 확인합니다. [post-row]는 [posts], [item-row]는 [items], [item-children-row]는 [item-children], [item-video-row]는 [item-videos] 안에 배치합니다.

2. 시스템 URL에 필요한 실제 ID 및 code_idx 문맥이 유지되는지 확인합니다.

3. 검색 화면에서 일반 글로벌 검색과 상품 데이터 검색의 처리명을 혼동하지 않습니다.

4. [forum]에는 action, form-type 속성을 사용하지 않습니다. default-action은 list 또는 create입니다.

5. 현재 코드 기준으로 커스텀 게시판 폼은 [form]으로 둘러싼 [forum]의 직접 본문을 활용합니다. 독립 [forum-form]의 지원은 확인되지 않았습니다.

6. 이미지 업로드는 [post-field key="image"], 일반 파일 업로드는 [post-field key="generic"]을 사용합니다. 이미지의 전체 개수 반환 숏코드는 확인되지 않았습니다.

7. 이미지 목록에서 [post-field-row]가 없으면 첨부 파일 출력을 위한 반복 템플릿이 부족합니다.

8. 데이터 biz, 분류 ID, 필드 ID, 게시판 ID, 정렬·이벤트 옵션은 사이트별로 다를 수 있습니다.

9. 데이터 금액·예약·교육 기능은 해당 모듈과 데이터 유형에 설정되어 있어야 의미가 있습니다.

10. 이 문서는 제공된 코드에서 확인한 기능과 기존 매뉴얼 내용을 기준으로 합니다. 최신 운영 서버의 파일이 다른 경우 구현과 대조하여 차이가 있는 항목만 갱신합니다.

11. 공통 테마에 특정 페이지 전용 콘텐츠를 고정하지 않습니다. [page-content] 기본 출력 위치가 있는지 확인합니다.

12. 페이지별 테마와 사이트 기본 테마의 적용 관계, 해당 테마에 연결된 custom-key 체크 상태를 확인합니다.

13. 페이지 전용 디자인은 먼저 Global Classes와 body 선택자 기반 CSS 적용 가능성을 확인합니다.

14. 관리자 페이지 Global Classes와 [block]의 global-class를 혼동하지 않습니다.

15. 메뉴의 custom-key 설정은 페이지의 메뉴 링크 노출을 제어하고 선택형 block의 custom-key 설정은 현재 페이지의 block 노출을 제어한다는 차이를 검수합니다.

반복 영역을 올바른 상위 범위에 배치HTML + Shortcode
<!-- item-row는 items 안에 배치합니다. -->
[items biz="1-0-0"]
  [item-row]
    <p>[item-name]</p>
  [/item-row]
[/items]
33

계정별 shortcode 정보 확인 — biz 및 게시판 ID

이 매뉴얼은 모든 계정에서 공통으로 사용하는 shortcode의 문법과 역할을 설명합니다.

계정마다 등록된 상품 유형(biz)과 게시판(forum)이 다르므로, 실제 식별값은 관리자 페이지 → 디자인관리 → shortcode에서 확인합니다.

해당 관리자 화면에는 현재 계정의 biz 정보와 게시판 정보가 각각 구분되어 표시됩니다. 필요한 계정 정보를 전체 복사 기능으로 한 번에 복사할 수 있습니다.

상품·업체·교육과정·예약 등 데이터의 목록 및 상세 디자인을 만들기 전에는 해당 계정의 biz 값과 설정을 확인해야 합니다. 게시판 목록 및 게시판 연동 디자인을 만들기 전에는 해당 계정에 등록된 게시판과 ID를 확인해야 합니다. 실제 설정과 데이터가 없는 유형이나 게시판은 식별값만 임의로 입력한다고 출력되지 않습니다.

게시판 ID는 DB의 숫자형 id를 사용하며 bbsid 문자열과 구별합니다. 공용 매뉴얼에 등장하는 biz 값과 게시판 ID는 사용 방법을 설명하기 위한 예시이므로, 실제 사이트에서는 관리자 화면에 표시된 값으로 적용합니다.

shortcode의 작성 방법과 예제는 위의 각 기능 설명에 이미 있으므로 이 항목에서는 반복하지 않습니다.