Guide / 페이지 등록 / 페이지 편집
KO EN

페이지 등록 / 페이지 편집

Page Register는 iBoard에서 새 페이지를 생성하거나 기존 페이지를 수정하는 화면입니다. 이 화면에서는 페이지 번호, 그룹, 이름, 슬러그, 리다이렉트 URL, Core 상속, 선택 레이아웃, iBoard 연결, 페이지별 HTML 영역, Script, CSS, ShortCode를 설정할 수 있습니다.

웹사이트 페이지를 만들거나, 레이아웃을 선택하거나, iBoard를 페이지에 연결하거나, 커스텀 HTML 영역을 작성하거나, ShortCode로 공통 기능을 삽입할 때 이 화면을 사용합니다.

화면 개요

Page Editor는 크게 왼쪽 메뉴, 페이지 기본 설정 영역, 상세 레이아웃 편집 영역으로 구성됩니다. 왼쪽 메뉴에는 페이지 안에 삽입할 수 있는 ShortCode도 함께 표시됩니다.

영역 설명
Basic Information 페이지 기본 정보, 슬러그, 그룹, Core 사용 여부, 리다이렉트 URL, 메인 페이지 옵션, iBoard 연결을 설정합니다.
Basic Layout Setting 페이지에서 사용할 기본 레이아웃 템플릿을 선택합니다.
Detail Information 페이지별 HTML 영역, Header, Script, CSS를 편집합니다.
Guide / Short Codes 사용 가이드와 Login, Menu, Register, Search, Profile, Calendar 같은 재사용 ShortCode를 제공합니다.

Basic Information

Basic Information은 페이지의 기본 정보와 동작 방식을 설정합니다. 상세 레이아웃을 편집하기 전에 먼저 이 영역을 설정하는 것이 좋습니다.

항목 설명
Page Number 내부 페이지 번호입니다. 새 페이지인 경우 AUTO로 표시될 수 있습니다.
Core Use 선택하면 Core Page 설정을 상속합니다. 단축키: Ctrl + Alt + C
Group Name 페이지 목록에서 페이지를 정리하기 위한 그룹명입니다.
Name 페이지 분류 또는 내부 관리용 이름입니다.
Page Name 관리자 화면에서 페이지를 구분하기 위한 페이지 이름입니다.
Set as Main 해당 페이지를 메인 페이지로 설정할 때 사용합니다.
Redirect URL 이 페이지를 다른 주소로 이동시켜야 할 때 사용하는 리다이렉트 주소입니다.
Slug 깔끔한 페이지 URL 이름입니다. 소문자, 숫자, 하이픈만 사용하는 것이 좋습니다. 예: about-us
Using iBoard, Page 페이지 중앙에 표시할 iBoard를 선택합니다.

Core Use

Core Use는 페이지가 Core Page의 공통 레이아웃 설정을 상속할지 결정합니다. 활성화하면 Header, Top Area, Bottom Area, Script, CSS 같은 공통 Core 영역을 사용할 수 있습니다.

여러 페이지가 같은 구조를 공유해야 한다면 Core 상속을 사용하세요. 완전히 독립적인 페이지가 필요하다면 Core 상속을 사용하지 않는 것이 좋습니다.

Slug

Slug는 페이지 URL을 깔끔하게 만들기 위한 식별자입니다. 짧고, 소문자이며, 의미를 알기 쉽게 작성하는 것이 좋습니다. 

권장:
about-us
contact-us
service-list
customer-support

피하는 것이 좋은 예:
About Us
about_us
about us page!!!
회사소개

Using iBoard, Page

Using iBoard, Page는 페이지와 iBoard를 연결하는 옵션입니다. iBoard를 선택하면 해당 게시판을 페이지 레이아웃 안에 출력할 수 있습니다.

커스텀 HTML 구조 안에 게시판을 표시하려면 Middle 레이아웃 영역에 iBoard 치환자를 넣어야 합니다. 

<div class="my-page-section">
    <div class="my-page-container">
        ##{IBOARD}##
    </div>
</div>
##{IBOARD}##는 Using iBoard, Page에서 게시판이 선택된 경우에만 사용하세요. 게시판이 선택되지 않았다면 이 치환자는 게시판 콘텐츠를 출력하지 않습니다.

Basic Layout Setting

Basic Layout Setting에서는 페이지의 기본 레이아웃 템플릿을 선택합니다. 선택한 레이아웃은 페이지의 전체 구조를 결정합니다.

레이아웃 유형 용도
Single Column 하나의 메인 콘텐츠 영역만 필요한 단순한 페이지에 사용합니다.
Top / Middle / Bottom 상단, 본문, 하단 구조가 필요한 페이지에 사용합니다.
Left / Main 왼쪽 사이드 영역과 메인 콘텐츠 영역이 필요한 경우 사용합니다.
Main / Right 메인 콘텐츠와 오른쪽 사이드 영역이 필요한 경우 사용합니다.
Multi Column 여러 콘텐츠 섹션이 필요한 복합 페이지에 사용합니다.

Detail Information

Detail Information은 페이지의 각 영역을 개별적으로 편집하는 곳입니다. 각 탭은 레이아웃 영역 또는 페이지별 리소스를 의미합니다.

탭 역할 권장 사용
Top 메인 페이지 영역 위에 표시되는 콘텐츠입니다. 배너, 페이지 헤더, 안내문, 상단 위젯에 사용합니다.
Middle 페이지의 메인 본문 영역입니다. 주요 HTML 구조와 ##{IBOARD}##를 넣는 영역입니다.
Bottom 메인 페이지 영역 아래에 표시되는 콘텐츠입니다. 하단 섹션, CTA, Footer 형태의 콘텐츠에 사용합니다.
Left 왼쪽 레이아웃 영역입니다. 선택한 레이아웃이 왼쪽 영역을 지원할 때만 사용합니다.
Right 오른쪽 레이아웃 영역입니다. 선택한 레이아웃이 오른쪽 영역을 지원할 때만 사용합니다.
Header 페이지별 Header 태그 영역입니다. 메타 태그, CDN 링크, 페이지별 리소스에 사용합니다.
Script 페이지별 JavaScript입니다. 해당 페이지에서만 필요한 동작 코드에 사용합니다.
CSS 페이지별 CSS입니다. 해당 페이지 전용 스타일에 사용합니다. 클래스명 충돌을 피해야 합니다.

Short Codes

ShortCode는 iBoard의 공통 기능을 페이지 안에 삽입하기 위해 사용합니다. 왼쪽 패널의 ShortCode 카드를 클릭해서 복사한 뒤 원하는 레이아웃 영역에 붙여 넣으면 됩니다.

ShortCode 역할
[LOGIN,{SKIN:Default}] 로그인 영역을 표시합니다. 로그인이 필요한 페이지에 사용합니다.
[MENU,{SKIN:Default}] 메뉴를 표시합니다. 네비게이션 또는 커스텀 메뉴 영역에 사용합니다.
[REGISTER,{SKIN:Default}] 회원가입 화면을 표시합니다. 회원가입 페이지에 사용합니다.
[SEARCH,{SKIN:Default}] 검색 컴포넌트를 표시합니다. 검색 기능이 필요한 페이지에 사용합니다.
[SENDMSG,{SKIN:Default}] 메시지 발송 화면을 표시합니다. 문의 또는 메시지 기능에 사용합니다.
[PROFILE,{SKIN:Default}] 프로필 페이지를 표시합니다. 사용자 정보 보기 또는 수정에 사용합니다.
[RANKING,{SKIN:Default}] 사용자 랭킹 목록을 표시합니다. 포인트, 활동, 회원 순위 페이지에 사용합니다.
[SCRAP,{SKIN:Default}] 스크랩 목록을 표시합니다. 저장 또는 북마크한 콘텐츠 페이지에 사용합니다.
[CALENDAR,{SKIN:Default}] 캘린더를 표시합니다. 일정, 예약, 이벤트형 페이지에 사용합니다.

저장과 미리보기

페이지를 수정한 뒤에는 Save Page를 클릭하여 변경 내용을 저장합니다. Preview를 사용하면 공개 적용 전 결과를 확인할 수 있습니다.

버튼 설명
List 페이지 목록으로 돌아갑니다.
Save Page 현재 페이지 설정과 레이아웃 콘텐츠를 저장합니다.
Preview 페이지 미리보기를 엽니다.
Core Setting Page Core 설정 화면을 엽니다.

권장 작업 순서

  1. Admin > Pages > Register 메뉴로 이동합니다.
  2. Page Name, Group, Slug 등 기본 정보를 입력합니다.
  3. 페이지가 Core 상속을 사용할지 결정합니다.
  4. 기본 레이아웃 템플릿을 선택합니다.
  5. 게시판을 표시해야 한다면 Using iBoard, Page에서 게시판을 선택합니다.
  6. 필요에 따라 Top, Middle, Bottom, Left, Right, Header, Script, CSS 영역을 수정합니다.
  7. 선택한 게시판을 커스텀 HTML 안에 표시하려면 Middle 영역에 ##{IBOARD}##를 넣습니다.
  8. 로그인, 메뉴, 회원가입, 검색, 프로필, 랭킹, 스크랩, 캘린더 기능이 필요하면 ShortCode를 삽입합니다.
  9. Save Page를 클릭합니다.
  10. Preview를 클릭하여 결과를 확인합니다.

자주 사용하는 작업

목표 권장 설정
회사 소개 페이지 만들기 Page Name을 입력하고 about-us 같은 Slug를 사용한 뒤 단순한 레이아웃을 선택합니다.
게시판 페이지 만들기 Using iBoard, Page에서 게시판을 선택하고 Middle 영역에 ##{IBOARD}##를 넣습니다.
로그인 페이지 만들기 Middle 영역에 로그인 ShortCode를 삽입합니다.
회원가입 페이지 만들기 Middle 영역에 Register ShortCode를 삽입합니다.
커스텀 JavaScript가 필요한 페이지 만들기 Script 탭에 해당 페이지 전용 JavaScript를 추가합니다.
커스텀 스타일이 필요한 페이지 만들기 CSS 탭에 고유한 클래스명을 사용해 페이지 전용 CSS를 추가합니다.

주의사항

  • 여러 페이지가 같은 구조를 공유해야 할 때만 Core 상속을 사용하세요.
  • ##{IBOARD}##는 iBoard가 선택된 경우에만 사용하세요.
  • 페이지의 주요 콘텐츠는 Middle 영역에 넣는 것이 좋습니다.
  • 전체 사이트에 필요한 스크립트를 개별 페이지에 넣지 마세요.
  • CSS 클래스명은 다른 페이지에 영향을 주지 않도록 고유하게 작성하세요.
  • 저장 후에는 반드시 Preview로 확인하세요.
  • 공개 페이지라면 모바일 화면도 확인하세요.

문제 해결

문제 가능한 원인 해결 방법
페이지가 정상적으로 보이지 않음 잘못된 레이아웃이 선택되었거나 콘텐츠가 잘못된 영역에 들어갔을 수 있습니다. Basic Layout Setting을 확인하고 콘텐츠를 올바른 탭으로 이동합니다.
iBoard가 보이지 않음 게시판이 선택되지 않았거나 ##{IBOARD}##가 없을 수 있습니다. 게시판을 선택하고 Middle 영역에 ##{IBOARD}##를 넣습니다.
ShortCode가 텍스트로 보임 ShortCode를 지원하지 않는 영역이거나 ShortCode 입력이 잘못되었을 수 있습니다. ShortCode를 다시 복사하여 올바른 레이아웃 영역에 붙여 넣습니다.
Slug가 동작하지 않음 지원하지 않는 문자가 포함되었을 수 있습니다. 소문자, 숫자, 하이픈만 사용하세요.
CSS가 다른 페이지에 영향을 줌 CSS 선택자가 너무 넓게 작성되었을 수 있습니다. 페이지 전용 wrapper class와 구체적인 선택자를 사용합니다.

관리 권장 사항

  • 페이지를 만들기 전에 페이지 목적을 먼저 정하세요.
  • 페이지 이름과 Slug는 명확하고 단순하게 작성하세요.
  • 상세 HTML을 작성하기 전에 레이아웃을 먼저 선택하세요.
  • 주요 콘텐츠는 Middle 영역에 작성하세요.
  • Header, Script, CSS는 해당 페이지에 필요한 리소스만 넣으세요.
  • 작업 중간마다 저장하고 미리보기하세요.
  • 복잡한 커스텀 페이지는 이후 관리를 위해 구조를 기록해 두세요.
Page Register는 개별 웹사이트 페이지를 만들고 구조화하는 곳입니다. 먼저 기본 정보를 설정하고, 레이아웃을 선택한 뒤, 세부 HTML, ShortCode, Script, CSS를 신중하게 추가하세요.