숏코드

숏코드는 관리자가 재사용 가능한 동적 콘텐츠 블록을 만들어 페이지, 레이어, 배너, 상품 상세, 게시판 콘텐츠 등 iBoard에서 관리하는 여러 영역에서 실행할 수 있게 해주는 기능입니다.

같은 HTML이나 동적 로직을 여러 위치에서 반복해서 사용해야 할 때 숏코드를 사용하면 유지보수가 쉬워집니다.

화면 개요

숏코드는 이름을 가진 재사용 블록입니다. 숏코드를 한 번 만들어 두면 대괄호 문법을 사용해 페이지 안에서 호출할 수 있습니다. 호출 시 파라미터를 전달할 수 있고, 숏코드 내부에서는 해당 파라미터를 변수처럼 사용할 수 있습니다.

Shortcode List

Shortcode List 화면에서는 등록된 숏코드 목록을 확인할 수 있습니다. 관리자는 숏코드를 검색하고, 내용을 확인하고, 수정하거나 삭제할 수 있습니다.

주요 항목

Shortcode Editor

Shortcode Editor는 숏코드를 생성하거나 수정하는 화면입니다. Type, Name, Short Code 편집기, Usage Guide, Examples, AI & CodeDom 안내 탭으로 구성됩니다.

입력 항목

기본 문법

숏코드는 대괄호를 사용해서 호출합니다. 숏코드 이름 뒤에 필요한 파라미터를 입력할 수 있습니다.

[Execute_Test id=1 row=5 layer=radix_boxton]

위 예제에서 Execute_Test는 숏코드 이름이고, id, row, layer는 파라미터입니다.

숏코드 생성 방법

1. Admin > Site > Short Code 메뉴로 이동합니다.
2. New Shortcode 버튼을 클릭합니다.
3. 숏코드 타입을 선택합니다.
4. 숏코드 이름을 입력합니다.
5. 편집기에 숏코드 내용을 작성합니다.
6. Add & Update 버튼을 클릭합니다.

이름 예시

Execute_Test

숏코드 이름은 페이지나 콘텐츠에서 호출하는 이름과 반드시 같아야 합니다.

숏코드 호출 방법

숏코드를 저장한 후 페이지, 레이어, 배너, 상품 상세, 게시판 콘텐츠 등에서 호출할 수 있습니다.

[Execute_Test id=1 row=5 layer=radix_boxton]

파라미터

파라미터는 숏코드 호출 시 전달하는 값입니다. 숏코드 내부에서는 파라미터 이름 앞에 #을 붙여 변수처럼 사용할 수 있습니다.

중요한 파라미터 규칙

파라미터는 반드시 공백으로 구분해야 합니다.

올바른 예:
[Execute_Test id=1 row=5 layer=radix_boxton]

잘못된 예:
[Execute_Test id=1,row=5,layer=radix_boxton]

파라미터 사이에 쉼표를 넣지 마세요. 각 파라미터는 공백으로 구분해야 합니다.

Usage Guide 탭

Usage Guide 탭은 숏코드를 생성하고 호출하는 기본 과정을 설명합니다. 기본 문법, 파라미터 사용법, 중요한 형식 규칙을 확인할 수 있습니다.

Examples 탭

Examples 탭에서는 재사용 가능한 숏코드 예제를 제공합니다. 예제를 복사한 뒤 페이지나 프로젝트 목적에 맞게 수정해서 사용할 수 있습니다.

예제 1 - 기본 출력

[Execute_Test id=1 row=5 layer=radix_boxton]

ShortCode 내용:

<div>
    ID: #id<br />
    Layer: #layer
</div>

예제 2 - CodeDom 반복문

이 예제는 row 파라미터를 사용해서 반복 출력합니다.

[Execute_Test row=5 layer=radix_boxton]

ShortCode 내용:

<codedom>

    using System;
    using System.Text;

    StringBuilder sb = new StringBuilder();

    for (int i = 0; i < #row; i++)
    {
        sb.AppendLine(string.Format("No.{0} / Layer: {1}<br />", i, "#layer"));
    }

    return sb.ToString();

</codedom>

예제 3 - Bootstrap Card

[Execute_Card title="Camera Finder" desc="Find the right industrial camera."]

ShortCode 내용:

<div class="card">
    <div class="card-body">
        <h5 class="card-title">#title</h5>
        <p class="card-text">#desc</p>
    </div>
</div>

AI & CodeDom

AI & CodeDom 탭에서는 C# CodeDom 숏코드 코드를 생성할 때 사용할 수 있는 추천 프롬프트를 제공합니다. AI가 생성한 코드를 Short Code 편집기에 복사해서 사용할 수 있습니다.

추천 AI 프롬프트

Create C# CodeDom code for iBoard Shortcode Editor.

Requirements:
- Use <codedom> wrapper.
- Use StringBuilder.
- Return string.
- Receive #row parameter.
- Receive #layer parameter.
- Generate HTML output.
- Do not create controller code.
- Do not create Razor view code.
- Only generate the CodeDom block.

AI 생성 CodeDom 예제

<codedom>

    using System;
    using System.Text;

    StringBuilder sb = new StringBuilder();

    sb.AppendLine("<div class='shortcode-result'>");

    for (int i = 0; i < #row; i++)
    {
        sb.AppendLine(string.Format("<div>Row {0} / Layer: {1}</div>", i, "#layer"));
    }

    sb.AppendLine("</div>");

    return sb.ToString();

</codedom>

권장 작업 순서

1. 숏코드를 사용할 위치를 결정합니다.
2. 명확한 숏코드 이름을 정합니다.
3. 숏코드에 필요한 파라미터를 정리합니다.
4. 편집기에서 숏코드 내용을 작성합니다.
5. 숏코드를 저장합니다.
6. 페이지나 콘텐츠 영역에서 숏코드를 호출합니다.
7. 미리보기로 출력 결과를 확인합니다.

자주 사용하는 작업

주의사항

• 숏코드 이름은 페이지에서 호출하는 이름과 반드시 일치해야 합니다.
• 파라미터는 반드시 공백으로 구분해야 합니다.
• 숏코드 내부에서 파라미터 값을 사용할 때는 #parameterName 형식을 사용합니다.
• 운영 페이지에 적용하기 전에 반드시 출력 결과를 테스트하세요.
• CodeDom은 동적 C# 코드를 실행하므로 신중하게 사용해야 합니다.
• 실행 가능한 숏코드 생성/수정 권한은 신뢰할 수 있는 관리자에게만 부여하세요.

문제 해결

관리 권장 사항

• 숏코드 이름은 목적이 드러나도록 작성하세요.
• 파라미터는 단순하고 예측 가능하게 구성하세요.
• 가능하면 소문자 파라미터 이름을 사용하세요.
• 공개 페이지에 민감한 로직을 포함한 숏코드를 사용하지 마세요.
• 각 숏코드의 목적과 사용 가능한 파라미터를 문서화하세요.
• CodeDom 숏코드는 운영 적용 전에 안전한 환경에서 먼저 테스트하세요.

숏코드는 여러 페이지에서 콘텐츠와 동적 로직을 재사용할 수 있는 강력한 기능입니다. 체계적으로 관리하고 게시 전에 반드시 테스트하세요.