🎨화면 꾸미기(UI 설정)

코드를 몰라도 됩니다 — 전부 클릭과 사진 업로드만으로 조작합니다.

0 · 여덟 화면 한눈에 보기

“이걸 바꾸고 싶은데 어디로 가지?” — 이 표부터 보세요.

1 · 홈 화면 구성 (블록 빌더)

홈 화면은 블록을 위에서 아래로 쌓아 만듭니다. 블록마다 활성/숨김 체크박스로 켜고 끄고, ↑↓ 버튼(또는 드래그)으로 순서를 바꾸고, 필요 없으면 삭제합니다. 맨 아래 “블록 추가”에서 새 블록을 골라 넣을 수 있습니다.

고를 수 있는 블록

v2.21.0 이상[블록 추가] 목록이 종류별로 묶였습니다.

블록이 스물 몇 가지로 늘어 한 덩어리로 늘어서 있으면 찾기 어려우므로, [블록 추가]를 누르면 여섯 묶음으로 나뉘어 보입니다 — 맨 위 큰 화면 / 미사와 일정 / 말씀과 기도 / 소식과 게시판 / 우리 본당 이야기 / 묶어 놓기·후원.

블록 모양 고르기 — 기본형·카드형·목록형

v2.21.0 이상이 기능은 새 버전에서 쓸 수 있습니다. 관리자 › 시스템 업데이트에서 버전을 올리면 나타납니다.

성격이 맞는 블록들은 같은 내용을 세 가지 모양 중에 골라 보여 줄 수 있습니다. 홈 화면 관리에서 그 블록을 펼치면 [표시 방식]이 있습니다.

• 고를 수 있는 블록 — 오늘의 성인, 오늘 영명축일 교우, 빠른 메뉴, 분과 태그 클라우드.
• 묵상·인용은 한 편·한 구절짜리라 카드형만 있습니다(목록형 없음). 묵상 카드에는 제목 옆에 [묵상 보기 →]가 함께 붙습니다.
• 블록 제목도 바꿔 넣으실 수 있습니다(빠른 메뉴는 카드형·목록형에서만 제목이 보입니다).
• 항목이 다섯을 넘으면 카드형·목록형은 두 열로 나뉘어, 홈 화면이 길게 늘어지지 않습니다.

테마 — 전체 분위기 고르기

• Warm (기본) — 은은한 구분선 리듬 + 라운드 카드. 따뜻하고 차분한 기본형
• Modern — 옅은 배경 위에 흰 카드 패널이 떠 있는 구성. 섹션마다 큰 라운드 패널과 부드러운 그림자, 구분선 없음
• Classic — 신문 조판형. 섹션마다 굵은 본당색 이중 룰과 각진 카드, 세리프 제목 확대, 촘촘한 밀도

테마는 홈 섹션의 짜임새(패널·룰·구분선·카드 형태)를 통째로 바꿉니다. 색을 바꾸는 것은 전례 시기 테마의 몫이라, 어떤 테마를 골라도 전례 시기 색은 그대로 따라옵니다.

v2.15.0 이상이 기능은 새 버전에서 쓸 수 있습니다. 관리자 › 시스템 업데이트에서 버전을 올리면 나타납니다.

‘메인 3단’에 묶여 있던 메인 사진·오늘의 말씀·미사 시간을 각각 따로 놓을 수도 있습니다. 블록 목록에 ‘메인 사진’·‘오늘의 말씀’·‘미사 시간’ 세 블록이 따로 있어, 원하는 자리에 하나씩 배치하거나 2·3열 컨테이너 칸에 넣을 수 있습니다. 편집은 종전대로 각각 메인 사진 관리·본당 정보에서 합니다. 기존 ‘메인 3단’ 블록도 그대로 있으므로, 지금 홈은 아무 변화 없이 원할 때만 나눠 쓰면 됩니다.

2 · 메뉴 관리

메뉴는 그룹(예: “성당 소개”) 아래에 항목(예: “본당 연혁”)을 담는 두 단계 구조입니다. 왼쪽에서 그룹을 고르면 오른쪽에 그룹 설정과 항목 목록이 나타납니다.

그룹에서 정하는 것

• 표시 라벨·부제·아이콘 — 헤더 메뉴에 보이는 이름과 꾸밈
• 헤더에 표시 체크 — 끄면 헤더 메뉴에는 안 나오고, 해당 페이지의 사이드바로만 씁니다
• Footer 표시 체크 — 외부 사이트 링크 모음처럼 푸터에만 두고 싶을 때 “헤더 끔 + Footer 켬”
• 사이드바 폭·상단 이미지 — 그 그룹 페이지들의 좌측 사이드바 모양

항목에서 정하는 것

1. 1연결 종류 3가지 중 하나를 고릅니다 — 페이지(내부 경로), 게시판(목록에서 선택 — 한 게시판은 한 항목에만 연결 가능), 외부 URL(새 탭으로 열림).
2. 2메뉴 라벨을 정합니다 — 헤더·사이드바·페이지 제목·사이트맵에 한꺼번에 적용되는 이름입니다.
3. 3필요하면 상위 항목을 지정해 서브메뉴(2단계)로 만들고, ↑↓로 순서를 정합니다.

3 · 메인 사진 (홈 대문 사진)

홈 대문(히어로)에 표시될 사진을 올립니다. 사용법은 세 가지가 전부입니다.

1. 1업로드 — 사진을 끌어다 놓거나 클릭해서 선택 (JPG·PNG·WEBP·GIF, 장당 최대 10MB, 여러 장 한 번에 가능)
2. 2순서 — 카드를 드래그해서 표시 순서 변경
3. 3숨김 / 삭제 — 잠시 안 쓸 사진은 숨김, 필요 없으면 삭제 (체크해서 일괄 삭제도 가능)

여러 장을 등록하면 홈에서 몇 초 간격으로 부드럽게(페이드) 자동 전환되고, 사진 위에는 본당 이름이 자동으로 얹힙니다. 전환 방식이나 문구를 따로 설정하는 항목은 없습니다 — 올리고, 순서 정하고, 끝입니다.

4 · 페이지 사진 슬라이드쇼

본당 연혁, 수호 성인, 사목지표 같은 정보 페이지의 본문 위에 사진(여러 장이면 슬라이드쇼)을 얹는 기능입니다. 목록에는 페이지별 카드가 있고, 카드마다 등록된 사진 수와 전환 설정 요약이 보입니다.

사진 올리기 (페이지 카드의 “수정” 클릭)

1. 1전환 방식을 고릅니다 — 페이드 / 켄번즈(천천히 확대) / 줌 인 / 줌 아웃 / 블러 / 슬라이드 3방향 / 없음, 총 9종.
2. 2전환 간격(한 사진이 보이는 초)과 애니메이션 시간(전환 동작 길이, 700ms 권장)을 정합니다.
3. 3사진 추가로 여러 장 올리고, ↑↓로 순서를, 9방향 그리드로 사진의 어느 부분을 보여줄지(이미지 위치)를 정합니다.
4. 4사진 높이를 고릅니다 — 낮게(배너 띠) / 보통 / 높게 / 와이드(넓고 낮게). ‘보통’이 종전 높이라, 고르지 않으면 화면이 달라지지 않습니다(v2.15.0 이상).

v2.17.0 이상이 기능은 새 버전에서 쓸 수 있습니다. 관리자 › 시스템 업데이트에서 버전을 올리면 나타납니다.

‘설명(선택)’ 칸에 글을 적으면 사진 아래쪽에 흰 글자 캡션으로 겹쳐 보입니다(가독성을 위해 그 부분만 살짝 어둡게 처리됩니다). 예전에는 관리용으로만 저장되고 공개 화면에는 나오지 않았습니다.

사진을 올리면 그 페이지 상단에 자동으로 나타납니다 — 페이지 쪽에서 따로 할 일은 없습니다. 새 페이지용 슬롯이 필요하면 “+ 새 페이지 등록”에서 만들되, 공개 페이지 경로를 실제 주소와 정확히 맞춰야 합니다.

5 · 전례 시기 테마

사이트 전체의 색 톤(헤더·사이드바·버튼·강조색)을 전례 시기의 전례색에 맞춰 바꿉니다. 가장 쉬운 사용법은 자동 모드를 켜두는 것입니다 — 오늘 날짜로 시기를 계산해 (부활절 날짜 계산 알고리즘 기준) 대림·성탄·사순·부활·성령강림·연중을 알아서 적용합니다.

수동으로 정하고 싶을 때

1. 1상단 자동 모드 체크를 해제합니다.
2. 2원하는 시기를 고릅니다 — 끄기(평시 기본색) / 대림(보라) / 성탄(흰·금) / 사순(자주) / 부활(초록·금) / 연중(초록) / 성령강림(빨강).
3. 3저장 버튼을 누릅니다. (이 화면만 저장 버튼이 있습니다.)

저장 후 공개 사이트를 새로고침하면 색이 바뀝니다. 본당 축일 등 특별한 날에 잠깐 수동으로 바꿨다가, 끝나면 자동 모드를 다시 켜 두는 식으로 쓰면 편합니다.

6 · 스킨 — 사이트 전체의 시각 톤

스킨은 카드 형태·여백·그림자·헤딩 폰트 등 사이트 전체의 시각 톤을 한 번에 바꿉니다. 같은 화면에서 잉크 컬러(성전건축 카드·푸터 등 다크 블록의 배경색)도 고를 수 있으며, 두 설정은 별개 차원이라 자유롭게 조합됩니다. 각 스킨 카드에는 그 스킨을 적용한 홈 화면 스크린샷이 있어 모습을 비교하고 고를 수 있습니다.

• 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종과 똑같이 고를 수 있습니다.

9 · 바뀐 모습 확인하기

설정이 실제로 어디에 나타나는지, 공개 화면으로 봅니다.

홈 화면

블록 빌더에서 켠 블록들이 정한 순서대로 나타납니다. 아래 예시는 메인 3단(복음 + 미사 시간)과 빠른 메뉴 블록이 켜진 홈입니다. 상단 좌측의 시기 표시등과 사이트 색은 전례 시기 테마를 따릅니다.

정보 페이지 상단 슬라이드쇼

페이지 사진에서 “본당 연혁”에 올린 사진이 /history 페이지 본문 위에 자동으로 얹힌 모습입니다. 좌측 사이드바(메뉴 관리에서 구성)와 사이드바 상단 이미지도 함께 보입니다.

자주 묻는 질문