Core Page Settings

Core Page Settings는 일반 웹사이트 페이지에서 공통으로 사용하는 레이아웃 영역, Header 코드, Script, Style, Night Mode 설정을 관리하는 기능입니다. 이 Core는 iBoard 게시판용 Core가 아니라 일반 Page용 Core입니다.

여러 페이지가 같은 Header, Top Area, Footer, Script, Style Sheet, 전체 레이아웃 구조를 공유해야 할 때 이 기능을 사용합니다.

화면 개요

Core Page는 웹사이트 페이지에서 재사용하는 기본 레이아웃 역할을 합니다. 같은 Header, Footer, CSS, Script를 페이지마다 반복해서 수정하지 않고, 공통 영역을 한곳에서 정의한 뒤 여러 페이지가 상속해서 사용할 수 있습니다.

언제 사용하는가

• 여러 페이지가 같은 Header 또는 Footer를 사용해야 할 때
• SEO meta 태그를 공통 레이아웃에서 관리하고 싶을 때
• 페이지들이 같은 Top, Left, Right, Bottom 영역을 공유해야 할 때
• 여러 페이지에 공통 CSS를 적용하고 싶을 때
• 이 Core를 사용하는 페이지들에 공통 JavaScript를 적용하고 싶을 때
• 페이지의 Night Mode 스타일을 관리하고 싶을 때
• Save to File로 Core 레이아웃을 파일로 저장해야 할 때

Core Page Settings 영역

상단 영역에서는 Core Page의 기본 정보를 설정합니다.

Code Editor

Code Editor는 페이지에서 사용하는 공통 레이아웃과 리소스 영역을 관리합니다. 각 탭은 페이지 구조의 서로 다른 부분을 제어합니다.

Header 탭

Header 탭은 SEO, 브라우저 동작, SNS 공유, 외부 리소스 로딩에 영향을 주는 중요한 영역입니다.

기본 Header 예시

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>AIZaac - No-Code Website Management Platform</title>

<meta name="description" content="AIZaac is an easy and powerful no-code website management platform.">
<meta name="keywords" content="AIZaac, website builder, website management, iBoard">
<meta name="robots" content="index, follow">

<link rel="canonical" href="https://your-domain.com/">

Open Graph 예시

<meta property="og:type" content="website">
<meta property="og:title" content="Your Site Title">
<meta property="og:description" content="Your site description.">
<meta property="og:url" content="https://your-domain.com/">
<meta property="og:image" content="https://your-domain.com/images/share.jpg">

Header 값은 실제 웹사이트 도메인, 페이지 목적, 공유 이미지 경로와 일치해야 합니다.

Use Default Header

Use Default Header 버튼은 기본 Header 구조를 자동으로 넣을 때 사용합니다. 새 Core Page를 만들거나 표준 meta 태그를 다시 구성할 때 유용합니다.

• Header 탭이 비어 있을 때 사용할 수 있습니다.
• 표준 SEO Header에서 시작하고 싶을 때 사용할 수 있습니다.
• 기존 Header 코드가 덮어써질 수 있으므로 주의해야 합니다.

Use Default Header를 사용하기 전에는 현재 Header 코드에 커스텀 SEO 태그나 스크립트가 있는지 확인하고 복사해 두세요.

Top, Left, Main, Right, Bottom Area

이 탭들은 이 Core를 사용하는 페이지의 구조적 레이아웃 영역을 관리합니다. 실제 출력 방식은 선택한 레이아웃과 스킨에 따라 달라질 수 있습니다.

Top Area 예시

<header class="site-header">
    <div class="site-logo">AIZaac</div>
    <nav class="site-nav">
        <a href="/">Home</a>
        <a href="/about-us">About</a>
        <a href="/contact-us">Contact</a>
    </nav>
</header>

Bottom Area 예시

<footer class="site-footer">
    <p>© 2026 AIZaac. All rights reserved.</p>
</footer>

Script 탭

Script 탭은 이 Core를 사용하는 모든 페이지에 적용할 JavaScript를 작성하는 곳입니다.

document.addEventListener("DOMContentLoaded", function () {
    console.log("Core page script loaded.");
});

이곳에 작성한 Script는 이 Core를 사용하는 모든 페이지에서 실행될 수 있습니다. 특정 페이지에만 필요한 Script는 개별 페이지의 Script 영역에 넣는 것이 좋습니다.

Style Sheet 탭

Style Sheet 탭은 이 Core를 사용하는 페이지에서 공통으로 사용할 CSS를 작성하는 곳입니다.

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
}

.site-footer {
    padding: 30px;
    text-align: center;
    border-top: 1px solid #e5e7eb;
}

Night Mode 탭

Night Mode는 이 Core를 사용하는 페이지의 다크 모드 스타일을 정의하는 영역입니다.

body.night-mode {
    background: #0f172a;
    color: #f8fafc;
}

body.night-mode .site-header {
    background: #111827;
    border-bottom: 1px solid #334155;
}

Save, Save to File, Preview

Save와 Save to File은 다릅니다. Save는 데이터베이스에 저장하고, Save to File은 실제 파일로 코드를 저장합니다.

권장 작업 순서

1. Admin > Pages > Core Setting 메뉴로 이동합니다.
2. Core Page Name을 입력하거나 확인합니다.
3. Require Login이 필요한지 결정합니다.
4. 필요하면 Skin을 선택합니다.
5. 먼저 Header를 수정하여 SEO와 meta 태그를 정리합니다.
6. 필요에 따라 Top, Main, Left, Right, Bottom 영역을 수정합니다.
7. 공통 CSS는 Style Sheet에 작성합니다.
8. 공통 JavaScript가 필요할 때만 Script에 작성합니다.
9. 다크 모드를 지원한다면 Night Mode 스타일을 작성합니다.
10. Save 버튼을 클릭합니다.
11. Preview로 결과를 확인합니다.
12. 파일 출력이 필요한 구조라면 Save to File을 실행합니다.

자주 사용하는 작업

주의사항

• 이 Core는 iBoard 게시판용이 아니라 일반 웹사이트 페이지용입니다.
• 변경 내용은 이 Core를 사용하는 모든 페이지에 영향을 줄 수 있습니다.
• Header, Script, Style Sheet를 크게 수정하기 전에는 반드시 백업하세요.
• SEO 값은 실제 웹사이트 도메인과 일치해야 합니다.
• 모든 페이지에 필요한 코드가 아니라면 Core에 넣지 않는 것이 좋습니다.
• 저장 후에는 이 Core를 상속하는 페이지들을 미리보기로 확인하세요.
• 파일 기반 출력 구조라면 저장 후 Save to File도 필요할 수 있습니다.

문제 해결

관리 권장 사항

• Core Page Settings는 공통 페이지 구조 관리에만 사용하는 것이 좋습니다.
• Header는 SEO와 외부 리소스 중심으로 관리하세요.
• HTML은 레이아웃 영역에, CSS는 Style Sheet에, JavaScript는 Script에 구분해서 작성하세요.
• 페이지별 콘텐츠와 충돌하지 않도록 명확한 클래스명을 사용하세요.
• 운영 페이지에 적용하기 전에 Preview로 확인하세요.
• 큰 변경 전에는 Create SQL을 사용하거나 코드를 복사해 두세요.
• Page Core와 iBoard Core의 역할을 명확히 구분하세요.

Core Page Settings는 웹사이트의 일관된 레이아웃을 유지하는 데 유용합니다. 하지만 여러 페이지에 동시에 영향을 줄 수 있으므로 신중하게 수정해야 합니다.