처음 한 번
🎨화면 꾸미기(UI 설정)
홈 구성·메뉴·메인 사진·페이지 슬라이드쇼·전례 시기 색·스킨·안내 배너·아이콘까지, 코드 없이 클릭과 사진 업로드만으로 본당 홈페이지의 겉모습을 바꾸는 여덟 화면을 안내합니다.
마지막 업데이트 2026-07-18
코드를 몰라도 됩니다 — 전부 클릭과 사진 업로드만으로 조작합니다.
0 · 여덟 화면 한눈에 보기
“이걸 바꾸고 싶은데 어디로 가지?” — 이 표부터 보세요.
| 바꾸고 싶은 것 | 가는 곳 (관리자 메뉴) | 바뀌는 자리 |
|---|---|---|
| 홈 화면에 무엇을 어떤 순서로 보여줄지 | 레이아웃 › 홈 페이지 | 홈(/) 전체 구성 |
| 상단 메뉴·사이드바의 메뉴 구성 | 레이아웃 › 메뉴 | 헤더 메뉴, 각 페이지 좌측 사이드바, 푸터 |
| 홈 대문의 큰 사진 | 레이아웃 › 메인 사진 | 홈 상단 히어로 사진 |
| 연혁·소개 등 각 페이지 상단 사진 | 레이아웃 › 페이지 사진 | 해당 페이지 본문 위 슬라이드쇼 |
| 대림·사순 등 시기별 사이트 색 | 레이아웃 › 전례 시기 테마 | 사이트 전체 색 톤 |
| 카드 모양·그림자·글꼴 등 사이트 전체의 시각 톤 | 레이아웃 › 스킨 | 공개 사이트와 관리자 화면 전체 |
| 홈·소개·캘린더 등에 배너 이미지 | 페이지·배너 › 안내 배너 | 지정한 위치의 배너 슬라이더 |
| 홈 빠른 메뉴의 아이콘 추가 | 베타 › 아이콘 | 빠른 메뉴 카드의 아이콘 선택지 |
이 화면들은 대부분 “저장 버튼”이 없습니다
체크박스·선택 상자는 클릭하는 순간 저장되고, 글자·숫자 입력 칸은 입력 후 다른 곳을 클릭(포커스 이동)하면 저장됩니다. 입력만 하고 바로 화면을 떠나면 저장이 안 될 수 있으니, 마지막 입력 후 꼭 다른 곳을 한 번 클릭하세요. (예외: 전례 시기 테마의 수동 선택만 “저장” 버튼이 있습니다.) 바뀐 결과는 공개 사이트를 새로고침하면 바로 보입니다.
1 · 홈 화면 구성 (블록 빌더)
홈 화면은 블록을 위에서 아래로 쌓아 만듭니다. 블록마다 활성/숨김 체크박스로 켜고 끄고, ↑↓ 버튼(또는 드래그)으로 순서를 바꾸고, 필요 없으면 삭제합니다. 맨 아래 “블록 추가”에서 새 블록을 골라 넣을 수 있습니다.
고를 수 있는 블록 (15종)
| 블록 | 보여주는 것 |
|---|---|
| 메인 3단 | 메인 사진 + 오늘의 복음 + 미사 시간. 레이아웃 5종(사진 크게 / 3등분 각각 배너 포함·제외 + 전폭 사진 슬라이더 단독) 선택 |
| 빠른 메뉴 | 바로가기 카드 버튼 (이름·주소·아이콘을 직접 구성) |
| 묵상 | 오늘의 묵상 글 |
| 성전 건축 | 공사 진척 위젯 |
| 게시판 탭 | 공지·행사 등 원하는 게시판을 탭으로 (탭 구성 편집 가능) |
| 사진 갤러리 | 전례·행사 사진 — 레이아웃 3종 선택: 슬라이드(큰 사진 1장씩 자동 전환)·흐름(오른쪽에서 왼쪽으로 계속 흐름)·큰 사진+그리드(큰 사진 1장+작은 사진 4장) |
| 배너 | 안내 배너 화면에서 만든 배너 그룹을 지정 위치 키로 노출 |
| 인용 | 성경 구절 등 인용문 + 출처 |
| 2열 / 3열 컨테이너 | 다른 블록 두세 개를 가로로 나란히 배치 (좌우 비율 조절, 모바일은 자동 세로 1열) |
| 분과 태그 클라우드 | 분과·단체 태그 모음 |
| 오늘의 성인 | 그날 축일인 성인을 성인 사전에서 자동 표시 — 없는 날은 자동 숨김 (v2.0.11 이상) |
| 후원 광고 | 후원 광고의 '홈 하단' 게재중 소재를 표시 — 루프 슬라이드(방향·배너 폭·속도) 옵션, 게재중 광고가 없으면 자동 숨김 |
| 게시판 목록 그리드 | 여러 게시판의 최근 글을 탭 전환 없이 2·3열로 나란히 — 게시판별 최근 글 목록 + 더보기 버튼 |
| 파노라마 바로가기 | 배경 사진 위 큰 아이콘 바로가기 패널 (화면 전폭, 최대 5열) — 사진이 없으면 본당색 그라데이션 |
섹션 밴드 — 블록에 배경 띠와 제목 씌우기
대부분의 블록은 편집 카드 아래 “섹션 밴드” 옵션으로 전폭 배경(은은한 배경 / 딥 톤 / 배경 사진)과 섹션 제목·부제를 씌울 수 있습니다. 예: 사진 갤러리에 딥 톤 밴드 + “성당 갤러리” 제목을 달면 잡지풍 섹션이 됩니다.
탭 아이콘·공유 카드 (v2.0.15 이상)
관리자 › 레이아웃 › 탭 아이콘·공유 카드(슈퍼관리자 전용)에서 브라우저 탭·홈 화면 아이콘과 카카오톡·페이스북 공유 카드를 관리합니다. 정방형 이미지 1장(PNG/JPG/WEBP)을 올리면 아이콘 규격 5종이 자동 생성되고 (“본당 로고로 만들기” 원클릭도 지원), 공유 카드 이미지는 1200×630 으로 자동 맞춰집니다. 미설정 본당은 기존처럼 로고·기본 아이콘이 쓰입니다. (SVG 업로드는 지원이 중단되었습니다 — PNG 등 일반 이미지로 변환해 올리세요.)
테마 — 전체 분위기 고르기
- Warm (기본) — 은은한 구분선 리듬 + 라운드 카드. 따뜻하고 차분한 기본형
- Modern — 옅은 배경 위에 흰 카드 패널이 떠 있는 구성. 섹션마다 큰 라운드 패널과 부드러운 그림자, 구분선 없음
- Classic — 신문 조판형. 섹션마다 굵은 본당색 이중 룰과 각진 카드, 세리프 제목 확대, 촘촘한 밀도
테마는 홈 섹션의 짜임새(패널·룰·구분선·카드 형태)를 통째로 바꿉니다. 색을 바꾸는 것은 전례 시기 테마의 몫이라, 어떤 테마를 골라도 전례 시기 색은 그대로 따라옵니다.
모바일 화면은 순서가 고정입니다
휴대폰에서는 읽기 흐름에 맞춘 정해진 순서(검색 → 메인 사진 → 빠른 메뉴 → 복음 → … → 인용)로 표시되어, 여기서 바꾼 블록 순서는 데스크탑 화면에만 적용됩니다. 블록을 숨기면 모바일에서도 함께 숨겨집니다.
2 · 메뉴 관리
메뉴는 그룹(예: “성당 소개”) 아래에 항목(예: “본당 연혁”)을 담는 두 단계 구조입니다. 왼쪽에서 그룹을 고르면 오른쪽에 그룹 설정과 항목 목록이 나타납니다.
그룹에서 정하는 것
- 표시 라벨·부제·아이콘 — 헤더 메뉴에 보이는 이름과 꾸밈
- 헤더에 표시 체크 — 끄면 헤더 메뉴에는 안 나오고, 해당 페이지의 사이드바로만 씁니다
- Footer 표시 체크 — 외부 사이트 링크 모음처럼 푸터에만 두고 싶을 때 “헤더 끔 + Footer 켬”
- 사이드바 폭·상단 이미지 — 그 그룹 페이지들의 좌측 사이드바 모양
항목에서 정하는 것
- 1연결 종류 3가지 중 하나를 고릅니다 — 페이지(내부 경로), 게시판(목록에서 선택 — 한 게시판은 한 항목에만 연결 가능), 외부 URL(새 탭으로 열림).
- 2메뉴 라벨을 정합니다 — 헤더·사이드바·페이지 제목·사이트맵에 한꺼번에 적용되는 이름입니다.
- 3필요하면 상위 항목을 지정해 서브메뉴(2단계)로 만들고, ↑↓로 순서를 정합니다.
메뉴 등록 = 사이드바 생성
어떤 페이지가 좌측 사이드바를 가지려면 그 주소가 메뉴 항목으로 등록되어 있어야 합니다. 새 페이지를 만들었는데 사이드바가 안 보인다면, 먼저 여기서 메뉴에 등록하세요. 변경은 저장 즉시 공개 사이트에 반영됩니다.
3 · 메인 사진 (홈 대문 사진)
홈 대문(히어로)에 표시될 사진을 올립니다. 사용법은 세 가지가 전부입니다.
- 1업로드 — 사진을 끌어다 놓거나 클릭해서 선택 (JPG·PNG·WEBP·GIF, 장당 최대 10MB, 여러 장 한 번에 가능)
- 2순서 — 카드를 드래그해서 표시 순서 변경
- 3숨김 / 삭제 — 잠시 안 쓸 사진은 숨김, 필요 없으면 삭제 (체크해서 일괄 삭제도 가능)
여러 장을 등록하면 홈에서 몇 초 간격으로 부드럽게(페이드) 자동 전환되고, 사진 위에는 본당 이름이 자동으로 얹힙니다. 전환 방식이나 문구를 따로 설정하는 항목은 없습니다 — 올리고, 순서 정하고, 끝입니다.
“메인 사진”과 “안내 배너”는 다른 기능입니다
여기는 홈 대문의 분위기 사진 자리입니다. 행사 홍보 이미지처럼 클릭하면 어딘가로 이동해야 하는 배너는 안내 배너에서 관리하세요. 또한 사진은 화면에 꽉 차게 잘려 표시되므로 가로로 넓은 사진이 좋습니다. 전부 숨기면 사진 대신 본당 색 그라데이션이 표시됩니다.
4 · 페이지 사진 슬라이드쇼
본당 연혁, 수호 성인, 사목지표 같은 정보 페이지의 본문 위에 사진(여러 장이면 슬라이드쇼)을 얹는 기능입니다. 목록에는 페이지별 카드가 있고, 카드마다 등록된 사진 수와 전환 설정 요약이 보입니다.
사진 올리기 (페이지 카드의 “수정” 클릭)
- 1전환 방식을 고릅니다 — 페이드 / 켄번즈(천천히 확대) / 줌 인 / 줌 아웃 / 블러 / 슬라이드 3방향 / 없음, 총 9종.
- 2전환 간격(한 사진이 보이는 초)과 애니메이션 시간(전환 동작 길이, 700ms 권장)을 정합니다.
- 3사진 추가로 여러 장 올리고, ↑↓로 순서를, 9방향 그리드로 사진의 어느 부분을 보여줄지(이미지 위치)를 정합니다.
사진을 올리면 그 페이지 상단에 자동으로 나타납니다 — 페이지 쪽에서 따로 할 일은 없습니다. 새 페이지용 슬롯이 필요하면 “+ 새 페이지 등록”에서 만들되, 공개 페이지 경로를 실제 주소와 정확히 맞춰야 합니다.
조금 더 기술적인 설명 (안 읽어도 됩니다)
사이드바가 있는(SectionLayout을 쓰는) 공개 페이지는 본문 최상단에서 현재 주소를 페이지 사진 목록과 대조합니다 — 공개 경로가 정확히 일치하면 그 슬롯의 슬라이드쇼를 렌더링하고, 사진이 0장이고 대체 사진 URL도 없으면 아무것도 표시하지 않습니다. 슬러그(영문 식별자)는 등록 후 변경할 수 없습니다.
5 · 전례 시기 테마
사이트 전체의 색 톤(헤더·사이드바·버튼·강조색)을 전례 시기의 전례색에 맞춰 바꿉니다. 가장 쉬운 사용법은 자동 모드를 켜두는 것입니다 — 오늘 날짜로 시기를 계산해 (부활절 날짜 계산 알고리즘 기준) 대림·성탄·사순·부활·성령강림·연중을 알아서 적용합니다.
수동으로 정하고 싶을 때
- 1상단 자동 모드 체크를 해제합니다.
- 2원하는 시기를 고릅니다 — 끄기(평시 기본색) / 대림(보라) / 성탄(흰·금) / 사순(자주) / 부활(초록·금) / 연중(초록) / 성령강림(빨강).
- 3저장 버튼을 누릅니다. (이 화면만 저장 버튼이 있습니다.)
저장 후 공개 사이트를 새로고침하면 색이 바뀝니다. 본당 축일 등 특별한 날에 잠깐 수동으로 바꿨다가, 끝나면 자동 모드를 다시 켜 두는 식으로 쓰면 편합니다.
6 · 스킨 — 사이트 전체의 시각 톤
스킨은 카드 형태·여백·그림자·헤딩 폰트 등 사이트 전체의 시각 톤을 한 번에 바꿉니다. 같은 화면에서 잉크 컬러(성전건축 카드·푸터 등 다크 블록의 배경색)도 고를 수 있으며, 두 설정은 별개 차원이라 자유롭게 조합됩니다. 각 스킨 카드에는 그 스킨을 적용한 홈 화면 스크린샷이 있어 모습을 비교하고 고를 수 있습니다.
| 스킨 | 특징 | 홈 블록 빌더 |
|---|---|---|
| 기본 | 부드러운 둥근 카드, 옅은 그림자, 본문 산세리프 + 헤딩 세리프 | 적용됨 |
| 고전 | 거의 사각 카드, 묵직한 그림자, 세리프 강조, 컴팩트 여백 | 적용됨 |
| 현대 | 큰 둥근 카드, 넓은 여백, 산세리프 헤딩 — 깔끔·여유 | 적용됨 |
| 에디토리얼 미니멀 | 큰 타이포·절제된 카드, 신문/잡지 톤 | 미적용 (홈 고정 구성) |
| 대시보드 카드 | 12-grid 카드 밀집형 정보 레이아웃 | 미적용 (홈 고정 구성) |
| 함께 짓는 성전 | 성전건축 프로젝트 강조 + 큰 헤드라인 | 미적용 (홈 고정 구성) |
쇼케이스 스킨 3종은 홈 블록 빌더가 적용되지 않습니다
에디토리얼 미니멀·대시보드 카드·함께 짓는 성전은 홈 화면이 전용 디자인(고정 구성)이라, 1장의 블록 빌더에서 쌓은 블록 — 홈의 '후원 광고' 블록 포함 — 이 표시되지 않습니다. 홈 하단에 후원 광고를 내보내려면 기본·고전·현대 스킨을 쓰세요. (사이드바·게시판 하단 광고는 모든 스킨에서 정상 표시됩니다. 스킨 화면의 해당 카드에도 같은 안내가 떠 있습니다.)
- 1장의 테마(Warm/Modern/Classic)와의 구분 — 테마는 홈 블록의 짜임새(간격·모서리·그림자)만 바꾸는 프리셋이고, 스킨은 사이트 전체(관리자 화면 포함)의 시각 톤을 바꿉니다.
- 스킨을 적용하고 공개 사이트를 새로고침하면 전체에 반영됩니다.
7 · 안내 배너
첫영성체 축하, 행사 홍보처럼 기간을 정해 노출하고, 클릭하면 어딘가로 이동하는 배너를 관리합니다. 구조는 두 단계입니다 — 그룹(어디에, 어떤 모양으로)을 만들고, 그 안에 이미지(무엇을, 어디로 연결)를 담습니다.
그룹에서 정하는 것
- 위치(placement) — 배너가 붙을 자리의 이름표. 홈 메인/중단/하단, 성당 소개 상/하, 캘린더·주보·통합 사진 상단 등 권장 자리가 준비되어 있고, 자유 입력으로 새 자리를 만들 수도 있습니다.
- 크기(비율) · 전환 효과(9종) · 딜레이(전환 간격 초)
- 노출 기간 — 시작·종료 일시. 비우면 무기한, 지나면 자동으로 사라집니다.
- 활성 체크 — 꺼두면 노출되지 않습니다.
이미지에서 정하는 것
- 클릭 시 이동 URL — 공지 글 주소(/boards/notice/123)나 외부 주소. 비우면 클릭 없는 그림.
- 대체 텍스트 — 그룹에서 “캡션 오버레이”를 켜면 이 글이 이미지 위 자막으로도 표시됩니다.
- 같은 그룹에 2장 이상 넣으면 자동 슬라이드됩니다.
어디에 걸 수 있나 — 위치 키 (v2.1.1 이상)
- 기본 자리 — 홈 메인(3단 레이아웃의 배너 칸)·성당 소개 상/하단·캘린더 상단·주보 상단·통합 사진(/photos) 상단.
- 아무 페이지에나 걸기 — 위치를 path:/경로 로 입력하면 그 공개 페이지 본문 상단에, path:/경로:bottom 은 본문 하단에 자동으로 걸립니다 (예: path:/priests). 사이드바가 있는 모든 페이지에서 동작하고, 입력할 때 메뉴에 등록된 페이지가 자동완성으로 제안됩니다.
- 홈 중단·하단 등 자유 키 — 홈 빌더의 '배너' 블록에서 같은 키를 참조해 씁니다. 블록 편집기에 그 위치의 활성 그룹·사진 수가 바로 표시되어, 배너 없는 죽은 블록인지 한눈에 알 수 있습니다.
- 표시 위치 배지 — 각 그룹 카드 상단에 이 배너가 실제로 걸리는 화면이 배지로 표시됩니다. '참조하는 화면이 없습니다' 경고가 뜨면 위치 키를 확인하세요.
- 즉시 반영 — 저장·삭제하면 공개 화면에 바로 반영됩니다 (새로고침만 하면 됨).
- 같은 위치에 그룹 여러 개를 걸면 이미지가 순서대로 합쳐지되, 전환 효과·비율·딜레이는 첫 그룹의 설정을 따릅니다.
배너가 안 보인다면 — 그룹 카드의 “표시 위치” 배지부터 확인
배너는 같은 위치 이름을 참조하는 자리에만 나타납니다. 그룹 카드 상단에 '이 위치를 참조하는 화면이 없습니다' 경고가 떠 있으면 위치 키 오타입니다. 배지가 정상인데 안 보이면 활성 체크 해제 또는 노출 기간 만료를 확인하세요. 그룹을 삭제해도 홈 빌더의 '배너' 블록은 남습니다(화면엔 빈 배너가 표시되지 않음) — 블록이 더 필요 없으면 홈 페이지 빌더에서 함께 정리하세요.
8 · 아이콘 관리 — 우리 본당만의 아이콘
관리자 › 베타 › 아이콘 → 홈 빠른 메뉴 카드의 아이콘 선택지
홈 빠른 메뉴의 아이콘은 기본 7종(성당·분과·주보·십자가·건축·성인·기도문)이 준비되어 있지만, 우리 본당만의 아이콘을 직접 등록해 쓸 수도 있습니다. 두 가지 방법이 있습니다.
- SVG 코드 붙여넣기 — 아이콘 사이트에서 복사한 SVG 코드를 붙여넣으면 오른쪽에 바로 미리보기가 뜹니다. 저장할 때 서버가 스크립트 등 위험 요소를 제거한 안전한 코드만 보관하니 안심하고 붙여넣어도 됩니다.
- 이미지 업로드 — png·jpg·webp·gif (최대 5MB). 정사각형에 가까운 이미지가 잘 맞습니다.
등록한 아이콘은 홈 화면 구성(블록 빌더)의 빠른 메뉴 항목 편집에서 “등록 아이콘” 그룹으로 나타나 기본 7종과 똑같이 고를 수 있습니다.
아이콘 색 — 카드의 색 버튼으로 지정
SVG 아이콘은 목록 카드의 색 버튼(스와치)으로 원하는 색 단색으로 바꿀 수 있고, “색 해제”를 누르면 원래대로 돌아옵니다. 색을 지정하지 않으면 기본 7종·currentColor SVG 는 사이트 테마색을 따라가고, 색이 박힌 SVG 와 업로드 이미지는 원본 색 그대로 표시됩니다. 아이콘을 삭제하면 그 아이콘을 쓰던 빠른 메뉴는 기본(성당) 아이콘으로 자동 대체되어 화면이 깨지지 않습니다.
9 · 바뀐 모습 확인하기
설정이 실제로 어디에 나타나는지, 공개 화면으로 봅니다.
홈 화면
블록 빌더에서 켠 블록들이 정한 순서대로 나타납니다. 아래 예시는 메인 3단(복음 + 미사 시간)과 빠른 메뉴 블록이 켜진 홈입니다. 상단 좌측의 시기 표시등과 사이트 색은 전례 시기 테마를 따릅니다.
정보 페이지 상단 슬라이드쇼
페이지 사진에서 “본당 연혁”에 올린 사진이 /history 페이지 본문 위에 자동으로 얹힌 모습입니다. 좌측 사이드바(메뉴 관리에서 구성)와 사이드바 상단 이미지도 함께 보입니다.
자주 묻는 질문
Q.입력했는데 저장이 안 된 것 같아요
글자·숫자 칸은 다른 곳을 클릭해야 저장됩니다. 입력 후 화면을 바로 떠나지 마세요.
Q.블록 순서를 바꿨는데 휴대폰에서 그대로예요
정상입니다. 모바일은 읽기 흐름에 맞춘 고정 순서로 표시되고, 순서 변경은 데스크탑에만 적용됩니다.
Q.배너가 공개 화면에 안 보여요
① 그룹 활성 체크 ② 위치 이름이 노출 자리와 정확히 일치 ③ 노출 기간이 지나지 않았는지 — 순서대로 확인하세요.
Q.새 페이지에 사이드바가 안 생겨요
메뉴 관리에서 그 페이지 주소를 메뉴 항목으로 등록해야 사이드바가 생깁니다.
Q.페이지 상단에 사진이 안 나와요
페이지 사진에서 해당 페이지의 공개 경로가 실제 주소와 일치하는지, 사진이 1장 이상 등록됐는지 확인하세요.
Q.메인 사진을 다 숨겼더니 홈이 밋밋해요
사진이 없으면 본당 색 그라데이션으로 대체됩니다. 사진을 1장 이상 “표시” 상태로 두세요.
Q.시기 색을 골랐는데 안 바뀌어요
자동 모드가 켜져 있으면 수동 선택은 무시됩니다. 자동 모드를 끄고 저장한 뒤, 공개 사이트를 새로고침하세요.
Q.사진이 이상하게 잘려 보여요
사진은 자리에 꽉 차게 표시되며 넘치는 부분이 잘립니다. 페이지 사진은 9방향 위치 그리드로 보여줄 부분을 고르고, 배너는 선택한 비율에 맞는 사진을 쓰세요.
Q.게시판을 메뉴에 연결할 수 없어요
한 게시판은 한 메뉴 항목에만 연결됩니다. 이미 다른 항목에 연결돼 있는지 확인하세요.
실수해도 괜찮습니다
여기 있는 설정은 전부 다시 클릭하면 되돌릴 수 있고, 글이나 데이터를 지우지 않습니다. 공개 사이트를 옆 탭에 띄워 두고, 바꾸고 → 새로고침으로 확인하며 천천히 다듬어 보세요.