메인화면관리

메뉴 위치 홈페이지관리 › 디자인관리 › 메인화면관리 하는 일 사이트 메인화면 구성 요소 관리
이 화면에서 하는 일

사이트 메인화면에 어떤 영역(모듈)이 어떤 순서로 보일지 구성하는 화면입니다. 왼쪽 목록의 각 항목이 메인화면의 한 영역(섹션)이고, 켜고 끄는 토글과 위아래 순서 이동 버튼이 있습니다.

예시 구성 탑배너 · 롤링배너(홍보 메인 배너) · 과정진열(신규과정) · 롤링바배너 4개 섹션이 Fixed Top Menu와 Footer 사이에 구성되어 있습니다.
메인화면관리 화면
🖼️
메인화면관리 화면 스크린샷
images/05-homepage/mainpage_list.png
[화면 1] 왼쪽 메인화면 섹션 목록(토글 · 순서이동) + 오른쪽 메인모듈 등록 폼

1화면 구성

왼쪽 섹션 목록메인화면을 구성하는 영역들이 위에서부터 순서대로 나열됩니다. 각 항목의 파란 토글로 그 영역을 켜고 끌 수 있고, 아이콘으로 순서를 바꿀 수 있습니다.
오른쪽 등록 폼제목이 "메인모듈 등록"으로, 새 영역(모듈)을 추가하는 폼입니다.

2메인모듈 등록 항목

항목필수입력 방법 · 규칙 (쉬운 말)
모듈필수드롭다운에서 추가할 영역 종류를 고릅니다(기본값 모듈 선택).
타이틀선택이 영역의 이름입니다. 화면에 영문 안내 "Enter 100 characters or less"가 표시되는 등 일부 문구가 아직 한국어로 번역되지 않았습니다.
노출여부필수노출 · 숨김 중에서 고릅니다.

3버튼으로 할 수 있는 일

순서저장
왼쪽 목록에서 바꾼 순서를 저장합니다.
등록
오른쪽 폼에서 새로 만든 메인모듈을 저장합니다.
⚠️
이 화면의 항목은 실제로 지금 사이트에 보이는 화면입니다
왼쪽 목록의 각 영역은 연습용 데이터가 아니라 지금 방문자에게 실제로 보이는 홈페이지 화면 그 자체입니다. 오른쪽 등록/수정 폼의 저장 버튼과 순서저장 버튼은 확인 창 없이 누르는 즉시 반영되어, 저장하는 순간 실제 방문자 화면이 바로 바뀝니다. 버튼을 누르기 전에 변경 내용을 다시 한번 확인하세요.

4영역(섹션) 수정

왼쪽 목록에서 영역 이름(예: "롤링배너")을 누르면 오른쪽 폼이 "메인모듈 수정"으로 바뀌면서 그 영역에 이미 저장된 값이 채워집니다. 모듈 종류에 따라 타이틀 · 배너 높이(Height) · 노출여부 같은 항목을 바로 고칠 수 있고, 하단에 삭제(고정 영역은 삭제 버튼이 나타나지 않습니다) · 수정 버튼이 있습니다.

메인화면관리 — 영역 수정 화면
🖼️
메인화면관리 — 영역 수정 화면 스크린샷
images/05-homepage/mainpage_list_modify.png
[화면 2] "롤링배너" 영역을 눌러 연 수정 화면 — 타이틀("홍보 메인 배너") · Height(500px) · 노출여부 등 기존 값이 채워져 있습니다

수정 화면을 보고 있다가 다시 등록을 누르면 오른쪽 폼이 안전하게 빈 등록 폼으로 되돌아갑니다. 단순히 화면 전환만 일어날 뿐 아무 것도 저장되지 않으므로, 실수로 눌러도 걱정할 필요 없이 열어볼 수 있습니다.

메인화면관리 — 등록 클릭 후 빈 등록 폼으로 전환
🖼️
메인화면관리 — 빈 등록 폼으로 전환
images/05-homepage/mainpage_list_insert-panel_after-register-click.png
[화면 3] 등록을 다시 누르면 오른쪽 폼이 아무 값도 없는 등록 폼으로 바뀝니다

영역 수정 화면 안에는 언어 버튼도 있어, 이 영역의 다국어(언어별) 설정을 팝업으로 열어 확인할 수 있습니다.

메인화면관리 — 언어(다국어) 설정 팝업
🖼️
메인화면관리 — 언어(다국어) 설정 팝업
images/05-homepage/mainpage_list_lang-setting_popup.png
[화면 4] 언어 버튼을 누르면 뜨는 다국어 설정 팝업
⚠️
섹션삭제(×) 버튼을 누르면 확인 창이 뜹니다
영역 목록의 × 아이콘(섹션삭제)을 누르면 "해당 섹션을 삭제하시겠습니까?" 확인 창이 뜨고, 확인을 누르지 않으면 삭제되지 않습니다.
메인화면관리 — 섹션삭제 확인 창
🖼️
메인화면관리 — 섹션삭제 확인 창
images/05-homepage/mainpage_list_section-delete_confirm.png
[화면 5] × 클릭 시 뜨는 확인 창