외관
외관(Appearance) 페이지에서는 교회 웹사이트의 전반적인 모습과 느낌을 사용자 지정할 수 있습니다. 색상과 글꼴부터 여백, 사용자 지정 CSS까지 한 곳에서 사이트의 모든 시각적 요소를 제어할 수 있습니다.
시작하기 전에
- 웹사이트의 초기 설정을 완료하세요
- 투명 배경, 4:1 가로세로 비율의 PNG 형식으로 교회 로고를 준비해 두세요
- 기존 스타일 가이드가 있다면 교회 브랜드 색상(16진수 값)을 미리 알아두세요
외관 설정에 접근하기
- B1 Admin에서 왼쪽 메뉴의 **웹사이트(Website)**를 클릭합니다.
- 웹사이트 페이지 화면 상단의 외관(Appearance) 탭을 클릭합니다.
- 사이트 스타일 페이지가 로드되며, 왼쪽에는 웹사이트의 실시간 미리보기가, 오른쪽에는 스타일 설정(Style Settings) 옵션이 표시됩니다.
색상 팔레트
- 스타일 설정 패널에서 **색상 팔레트(Color Palette)**를 클릭합니다.
- 기본 색상(Base Colors)(밝은 색조, 강조 색조, 어두운 색조)와 의미 색상(Semantic Colors)(Primary, Secondary, Success, Warning, Error)이 표시됩니다.
- 색상 견본을 클릭하면 색상 선택기가 열립니다. 선택기를 드래그하거나 16진수 값을 입력해 색상을 고릅니다.
- **색상 조합 미리보기(Color Combinations Preview)**에서 선택한 색상들이 어떻게 어우러지는지 확인할 수 있습니다.
- **추천 팔레트(Suggested Palettes)**를 사용하면 미리 디자인된 색상 구성을 빠르게 적용할 수 있습니다.
- 마음에 들면 **저장(Save)**을 클릭합니다.
타이포그래피
- 스타일 설정 패널에서 **타이포그래피 설정(Typography Settings)**을 클릭합니다.
- **글꼴 선택(Select a Font)**을 클릭해 글꼴 브라우저를 엽니다. 이름으로 검색하거나 세리프, 산세리프, 디스플레이, 손글씨체, 고정폭 같은 카테고리별로 둘러볼 수 있습니다.
- 제목과 본문 텍스트 각각에 글꼴을 설정합니다.
- **타이포그래피 스케일(Typography Scale)**을 클릭해 Heading 1부터 Heading 4까지의 크기 계층을 조정합니다. 배율 값과 기본 크기 필드로 세밀하게 조정할 수 있습니다.
- **저장(Save)**을 클릭해 글꼴 선택을 적용합니다.
여백
- 스타일 설정 패널에서 **여백 스케일(Spacing Scale)**을 클릭합니다.
- Extra Small부터 Extra Large까지 여백 값을 조정합니다. 실제 예시를 통해 각 값이 레이아웃에 어떤 영향을 주는지 확인할 수 있습니다.
- **여백 저장(Save Spacing)**을 클릭해 사이트 전체에 값을 적용합니다.
로고와 브랜딩
- 스타일 설정 패널에서 **로고(Logo)**를 클릭합니다.
- **밝은 배경용 로고(Light Background Logo)**와 **어두운 배경용 로고(Dark Background Logo)**를 업로드합니다. 최상의 결과를 위해 투명 배경, 4:1 가로세로 비율의 이미지를 사용하세요.
- 링크 미리보기용 **소셜 미디어 이미지(Social Media Image)**와 브라우저 탭 아이콘용 **파비콘(Favicon)**을 업로드합니다.
팁
최상의 결과를 위해 투명 배경의 PNG 형식 로고를 사용하세요. 이렇게 하면 웹사이트와 모바일 앱 전반에 걸쳐 밝은 배경과 어두운 배경 모두에서 멋지게 보입니다.
내비게이션 스타일
솔리드 모드와 투명 모드 모두에 대해 웹사이트 내비게이션 바 색상을 사용자 지정할 수 있습니다.
- 내비게이션 스타일(Navigation Styles) 섹션으로 스크롤합니다.
- **내비게이션 스타일 편집(Edit Navigation Styles)**을 클릭합니다.
- 솔리드 내비게이션(배경 있음)과 투명 내비게이션(오버레이 모드)의 색상을 구성합니다.
- **저장(Save)**을 클릭해 내비게이션 색상을 적용합니다.
자세한 안내는 내비게이션 스타일을 참고하세요.
사이트 위젯
사이트 위젯은 페이지 콘텐츠 위에 떠 있는 형태로 사이트의 모든 페이지에 표시됩니다.
- 공지 배너(Announcement Banner) -- 다가오는 행사나 예배 변경 사항처럼 시의성 있는 메시지를 위해 사이트 상단에 표시되는, 닫을 수 있는 막대입니다.
- 런처(Launcher) -- 빠른 접근 메뉴를 여는 떠 있는 버튼으로, 예를 들어 헌금, 체크인, 주보 보기 등의 링크를 담을 수 있습니다.
- 스타일 설정 패널에서 **사이트 위젯(Site Widgets)**을 클릭합니다.
- 원하는 위젯을 켜고 텍스트, 링크, 색상을 구성합니다.
- **저장(Save)**을 클릭합니다.
분석
스타일 설정 패널에 Google Analytics 4 측정 ID를 추가하면 웹사이트 방문자 트래픽을 추적할 수 있습니다.
사용자 지정 CSS 및 JavaScript
- 스타일 설정 패널에서 CSS 및 Javascript를 클릭합니다.
- 고급 사용자 지정을 위해 기본 스타일을 재정의하는 사용자 지정 CSS를 추가합니다.
- 추적 코드나 기타 스크립트를 위한 사용자 지정 HTML을 추가합니다.
- 일반적인 Javascript 예제 섹션에서 Google Analytics 연동 같은 스니펫을 사용할 수 있습니다.
경고
사용자 지정 CSS는 강력하지만, 잘못 사용하면 사이트 레이아웃이 깨질 수 있습니다. 대부분의 교회는 기본 제공되는 색상, 글꼴, 여백 컨트롤만으로 원하는 모습을 구현할 수 있습니다. 웹 개발에 익숙한 경우에만 사용자 지정 CSS를 사용하세요.
스타일 테마
빠르게 시작하고 싶다면, 색상 팔레트 섹션의 **추천 팔레트(Suggested Palettes)**에서 한 번의 클릭으로 조화로운 색상을 설정하는 미리 만들어진 테마를 제공합니다. 테마를 적용한 후에도 언제든지 개별 설정을 세밀하게 조정할 수 있습니다.