페이지 에디터
사이트의 모든 페이지를 구성하고, 메뉴·헤더·푸터·공통 요소까지 관리하는 메뉴입니다.
하위 메뉴는 페이지 목록 / 메뉴 관리 / 스킨 설정 / 공통 화면 구성 4가지로 구성됩니다.
1. 페이지 목록
사이트에 존재하는 모든 페이지를 관리하는 화면입니다.
목록 화면
- 검색→슬러그(URL) 또는 제목으로 검색
- 목록 표시→각 페이지의 슬러그, 제목, 활성 여부, 섹션 수 표시
- 행 클릭→해당 페이지의 에디터가 새 탭으로 열림
- 편집 버튼→페이지 기본 정보 수정 화면으로 이동 (홈 페이지는 수정 불가)
페이지 생성
새 페이지를 만들 때 입력하는 항목입니다.
| 항목 | 설명 |
|---|---|
| 제목 | 관리자 화면에서 식별하는 페이지 이름 |
| 슬러그 | 페이지 URL에 사용되는 고유 경로 (예: about → /p/about) |
| 접근 권한 | 전체 공개 / 회원(등급 무관) / 1~3등급 회원 이상 / 관리자만 중 선택 |
| 활성화 | 체크 해제 시 홈페이지에서 접근 불가 |
페이지 기본 정보 수정
제목, 슬러그, 접근 권한, 활성화 여부를 수정하거나 페이지를 삭제할 수 있습니다.
슬러그를 변경하면 기존 URL로 연결된 링크가 모두 깨집니다.
이미 외부에 공유된 주소가 있다면 변경에 주의하세요.
에디터 화면
페이지 에디터
페이지 목록에서 원하는 페이지를 클릭하면 에디터가 새 탭으로 열립니다. 이 화면에서 페이지의 실제 콘텐츠를 직접 구성하고 편집할 수 있습니다.
페이지에 속한 섹션 목록. 섹션을 펼치면 안에 있는 콘텐츠 블록을 확인하고 관리할 수 있습니다.
실제 홈페이지와 동일한 화면을 실시간으로 미리 볼 수 있습니다. 콘텐츠를 클릭하면 해당 편집 패널로 자동으로 이동합니다.
선택한 섹션 또는 콘텐츠의 세부 설정을 편집하는 영역입니다.
섹션 관리
섹션은 페이지를 구성하는 가로 단위 블록입니다.
- 섹션 추가 / 삭제 / 표시 여부 켜기·끄기
- 섹션 복사 (현재 페이지 또는 다른 페이지로)
- 드래그앤드롭으로 섹션 순서 변경
섹션 속성 편집
| 항목 | 설명 |
|---|---|
| 레이블 | 관리자용 식별 이름 |
| 앵커 ID | 메뉴 클릭 시 이 섹션으로 바로 이동하게 할 때 사용하는 고유 이름 |
| 배경색 | 섹션의 배경 색상 |
| 배경 이미지 | 배경으로 사용할 이미지 업로드 |
| 상하 패딩 | 섹션 내부 위아래 여백 (px) |
| 기본 텍스트 색상 | 섹션 내 기본 텍스트 색상 |
| 전체폭 | 체크 시 화면 전체 너비로 표시 |
| 레이아웃 모드 | 단일 세로 배치: 콘텐츠를 위아래로 쌓음 / 가로 나열: 콘텐츠를 옆으로 배치 |
| 항목 간격 | 가로 나열 모드일 때 콘텐츠 사이의 간격 (px) |
| 모바일 컬럼 수 | 가로 나열 모드일 때 모바일에서의 열 수 |
콘텐츠 관리
각 섹션 안에 콘텐츠 블록을 추가하여 실제 화면을 구성합니다.
- 콘텐츠 추가 / 수정 / 삭제 / 표시 여부 켜기·끄기
- 콘텐츠 복사 (다른 섹션으로 이동 가능)
- 드래그앤드롭으로 순서 변경 (섹션 간 이동 포함)
- 콘텐츠 너비 비율 및 추가 스타일 코드 설정
지원하는 콘텐츠 타입 10종
타입은 업데이트에 따라 변경되거나 새로 추가될 수 있습니다.
| 타입 | 설명 |
|---|---|
| 슬라이드 배너 | 여러 이미지를 순서대로 전환하는 슬라이더. 슬라이드별 이미지(PC/모바일), 텍스트, 버튼, 링크, 전환 효과 설정 |
| 텍스트 블록 | 텍스트 입력. 글자 크기·굵기·색상·정렬·간격·폰트 등 글자 스타일 전체 설정 가능 |
| 이미지 | 이미지 업로드. 크기, 비율, 이미지 위에 표시할 텍스트·버튼·링크 설정 |
| 여백 (Spacer) | PC/모바일 높이를 각각 지정하는 빈 공간 |
| 버튼 | 버튼. 텍스트, 링크, 색상, 크기, 정렬, 마우스를 올렸을 때의 효과 설정 |
| 리스트 | 목록. 점/번호/체크/없음 스타일 선택, 항목 추가·삭제 |
| 카드 | 이미지+제목+설명+버튼 구성. 수직/수평 레이아웃 선택 |
| 문의 폼 | 등록된 폼과 연결. 폼 외관(입력창, 버튼, 테두리 등) 스타일 지정 |
| 최근 게시글 | 선택한 게시판의 최근 글 목록 표시 |
| 커스텀 HTML | 직접 HTML 코드 삽입 |
가로 나열 모드에서의 너비 비율
섹션이 가로 나열 모드일 때, 각 콘텐츠의 너비 비율 값으로 공간을 조정할 수 있습니다.
예: 두 콘텐츠의 비율을 2 : 1로 설정하면 왼쪽이 약 67%, 오른쪽이 약 33%의 너비를 차지합니다.
2. 메뉴 관리
사이트 상단 내비게이션 메뉴를 구성하는 화면입니다.
최대 2단계(상위/하위) 구조로 메뉴를 만들 수 있습니다.
- 최상위 메뉴 추가상단 버튼 클릭
- 하위 메뉴 추가각 메뉴 항목의 + 버튼 클릭
메뉴 항목 설정
| 항목 | 설명 |
|---|---|
| 레이블 | 화면에 표시될 메뉴 이름 |
| URL | 직접 입력 또는 드롭다운에서 페이지·게시판·폼 선택 시 자동 입력 |
| 특정 위치로 이동 | 페이지 선택 시 해당 페이지의 특정 섹션으로 바로 이동하도록 설정 가능 |
| 상위 메뉴 | 최상위 또는 기존 메뉴의 하위 항목으로 배치 선택 |
| 활성화 | 체크 해제 시 메뉴가 노출되지 않음 |
| 새 탭에서 열기 | 체크 시 링크 클릭 시 새 탭에서 열림 |
| 순서 변경 | 위/아래 버튼으로 조정 |
상위 메뉴를 삭제하면 하위 메뉴도 함께 삭제됩니다.
3. 스킨 설정
헤더, 푸터, 마이페이지, 서브탑의 디자인을 설정하는 화면입니다. 4개 탭으로 구성됩니다.
헤더 탭
푸터 탭
마이페이지 탭
서브탑 탭
각 시스템 페이지의 상단 이미지와 제목·설명을 설정합니다.
이미지 + 제목·설명 설정 가능
이미지만 설정 가능
4. 공통 화면 구성
모든 페이지에 공통으로 적용되는 화면 요소를 설정하는 화면입니다. 4개 탭으로 구성됩니다.
플로팅 버튼 탭
화면 고정 위치에 항상 노출되는 버튼을 관리합니다.
- 버튼 추가 / 수정 / 삭제
- 표시 여부 켜기·끄기
- 위/아래 버튼으로 순서 변경
버튼별 설정
| 항목 | 설명 |
|---|---|
| 버튼 텍스트 | 버튼에 표시되는 문구 |
| 링크 URL | 클릭 시 이동할 주소 |
| 링크 열기 방식 | 현재 탭 / 새 탭 |
| 표시 위치 | 우측 하단 / 좌측 하단 |
| 버튼 이미지 | 업로드 시 텍스트 대신 이미지로 표시 |
| 스타일 | 배경색, 글자색, 안쪽 여백, 모서리 둥글기, 테두리 |
플로팅 바 탭
화면 측면에 고정되는 아이콘/텍스트 바를 관리합니다.
| 항목 | 설명 |
|---|---|
| 바 활성화 | 표시 여부 켜기·끄기 |
| PC 표시 위치 | 오른쪽 / 왼쪽 (모바일에서는 항상 하단 표시) |
| 바 스타일 | 배경색, 마우스를 올렸을 때 배경색, 구분선 색상, 텍스트 색상, 마우스를 올렸을 때 텍스트 색상 |
| 아이템 관리 | 추가 / 수정 / 삭제 / 순서 변경 |
| 아이템별 설정 | 이미지, 마우스를 올렸을 때 이미지, 텍스트, 링크 URL, 링크 열기 방식 |
레이아웃 탭
사이트 전체 본문의 최대 너비를 설정합니다 (600~2560px).
헤더·본문·푸터에 공통으로 적용됩니다.
커스텀 Head 태그 탭
모든 페이지에 공통으로 삽입될 외부 스크립트 코드를 입력합니다.
구글 태그 매니저, 네이버 애널리틱스, 카카오 픽셀 등 외부 분석 도구를 연동할 때 사용합니다.
