공식자료

바른결 테마 (기업 홈페이지)

바른결 테마 (기업 홈페이지 · 기업 미디어)

기업 · 기관 홈페이지와 기업 미디어(뉴스룸 · 사내 이야기)를 위한 Zittme 유료 테마 바른결(bareungyeol)의 매뉴얼입니다. 흰 바탕에 검정 활자, 사진이 주인공인 카드 구성입니다. 표지는 게시판의 최신 글이 사진 슬라이드로 넘어가고, 그 아래에 추천 아티클 · 이야기 · 최근 뉴스 카드와 검정 문의 유도 구역이 이어집니다. 서브 페이지의 제목 띠 · 배너 · 하위 메뉴 탭 · 본문 폭도 레이아웃 설정으로 정합니다.

데모: bareungyeol-demo.zitt.me · 스토어: zitt.me/store/package/37507

구성

구성요소	위치	역할
레이아웃	themes/bareungyeol/layouts/bareungyeol	사이트 골격 + 테마 내장 메인페이지 + 서브 페이지 머리
게시판 스킨	themes/bareungyeol/modules/board	목록형 · 카드형 · 큰 갤러리형 · 웹진형 · FAQ형
회원 · 쪽지 · 알림센터 · 메시지 스킨	themes/bareungyeol/modules/{member, communication, ncenterlite, message}	로그인 · 마이페이지 · 쪽지 · 알림 · 시스템 안내
문의 · 커머스 · 짓미페이 스킨	themes/bareungyeol/modules/{contact, commerce, zittme_pay}	해당 모듈이 설치된 사이트에서만 적용. 커머스는 서비스 · 제품 소개와 판매용

포인트 색상(기본 초록 #00b04f)과 색상 모드(밝게 기본 · 어둡게 · 기기 설정)는 레이아웃 설정 > 기본에서 바꿉니다.

설치와 적용

스토어에서 구매한 뒤 사용할 도메인을 등록(라이선스 활성화)하면 내려받기가 열립니다. 엔진(관리자 > 자료실)에서 설치하거나 themes/bareungyeol 에 압축을 풉니다.
관리자 > 디자인 설정에서 바른결을 골라 적용합니다. 레이아웃과 모듈 스킨이 한 번에 바뀝니다.
대문으로 쓸 게시판(예: journal)을 만들고 글에 사진을 넣습니다. 레이아웃 설정 > 첫 화면의 "표지 슬라이드 게시판(mid)"에 그 게시판을 적으면 표지가 완성됩니다.

권장 환경: Zittme 1.0.1 이상. 반응형 테마이므로 모바일 전용 뷰는 끄는 것을 권장합니다.

페이지 유형

메인: 사이트 대문(사이트 설정의 기본 모듈)이 자동으로 메인이 됩니다. 다른 페이지를 메인 형태로 쓰려면 사이트맵에서 그 메뉴의 클래스에 m 을 적습니다.
서브: 나머지 페이지. 제목 띠 → (하위 메뉴 탭) → 본문 순서입니다.
전체 폭: 메뉴 클래스에 wide 를 적으면 본문 폭 제한 없이 화면을 가득 씁니다(위젯 페이지 등).

헤더

로고(이미지 또는 텍스트) · 상단 메뉴(2차 메뉴는 드롭다운) · 오른쪽 문구(슬로건) · 검색 · 장바구니(커머스 설치 시) · 로그인 · 포인트 색 버튼(예: 문의하기) · 모바일 서랍 메뉴로 구성됩니다.

대문에서는 헤더가 표지 사진 위에 투명하게 겹치고(흰 글자), 스크롤하면 흰 배경으로 고정됩니다. 로고 이미지를 쓰면 "흰색 로고 이미지" 칸에 흰 로고를 함께 넣으세요.
헤더 버튼은 레이아웃 설정 > 기본의 "헤더 버튼 이름 · 링크"로 만듭니다. 비우면 표시하지 않습니다.
로그인 · 계정 링크를 헤더에서 숨기고 모바일 서랍에만 두려면 "헤더에 로그인 · 계정 표시"를 숨김으로 바꿉니다.

표지 (첫 화면)

사진 슬라이드: "표지 슬라이드 게시판(mid)"에 게시판을 적으면 그 게시판의 최신 글 가운데 대표 이미지가 있는 글이 슬라이드가 됩니다. 제목이 사진 가운데 크게 나오고, 아래에 1 / 4 카운터와 화살표가 붙습니다. 자동 넘김 간격(끔 · 4 · 5 · 8초)과 개수를 정할 수 있고, 마우스를 올리면 멈춥니다.
고정 표지: 게시판을 비우면 배경 이미지 · 윗줄 · 제목 · 설명 · 버튼을 쓰는 고정 표지가 됩니다.
영상 표지 (1.2.0): "고정 표지 배경 영상"에 mp4 · webm 주소를 적으면 고정 표지 뒤에 소리 없는 영상이 반복 재생됩니다. 배경 이미지는 영상이 뜨기 전 첫 화면으로 쓰입니다. 오른쪽 아래에 멈춤 버튼이 붙고, 기기에서 "동작 줄이기"를 켠 방문자에게는 자동 재생하지 않습니다.
슬라이드 자동 넘김에도 멈춤 · 재생 버튼이 붙습니다. 키보드로 슬라이드 안에 들어오면 자동 넘김이 잠시 멈춥니다.
높이: 화면 전체 · 높게(80%, 기본) · 보통(620px).

대표 이미지 규칙

카드와 표지의 사진은 글의 대표 이미지(썸네일)를 씁니다. 썸네일이 잡히지 않으면 본문의 첫 이미지를 대신 씁니다. 글마다 사진 한 장은 꼭 넣어 두세요. 사진이 없는 글은 표지 슬라이드에서 빠집니다.

테마 내장 메인페이지 (메인 구성)

레이아웃 설정 > 메인 구성 탭의 "메인페이지 섹션" 반복 필드로 순서대로 조립합니다. 하나도 없으면 기본 구성(추천 아티클 → 이야기 → 최근 뉴스 → 문의 유도)을 씁니다.

섹션 종류	내용	게시판 mid	개수
추천 아티클	큰 카드 1개 + 작은 카드. 분류명이 사진 위 칩으로, 게시판 이름이 출처 줄로	예: `journal`	5 권장
이야기	넓은 카드 2개 + 본문 요약	게시판 mid	2 권장
최근 뉴스	왼쪽 제목, 오른쪽 가로 카드 줄, 날짜	예: `notice`	4 권장
소식	3열 카드	게시판 mid	3 또는 6
회사 소개 문구	작은 라벨 + 큰 글자 한 덩어리 (본문 사용)	-	-
사업 영역	"사업 영역" 반복 필드의 아이콘 카드 4열	-	-
경영진 · 구성원	"경영진 · 구성원" 반복 필드. 사진이 없으면 이름 첫 글자	-	-
숫자 지표	"숫자 지표" 반복 필드. 화면에 들어올 때 숫자가 올라갑니다	-	-
고객사 · 파트너 로고	"고객사 · 파트너" 반복 필드. 로고가 없으면 이름을 글자로	-	-
사진 띠	화면을 가득 채우는 사진 + 제목 · 문장 · 버튼 (이미지 · 본문 사용)	-	-
문의 유도	검정 띠에 제목 · 문장 · 테두리 버튼 (본문 · 버튼 이름 · 링크 사용, 이미지를 넣으면 사진 배경)	-	-
제품 · 신제품	커머스 상품 카드 4열 (커머스 설치 시). 가격이 0이면 "문의"로 표시	-	4 권장
사진 + 글 (왼쪽 · 오른쪽)	사진 한 장과 제목 · 본문 · 링크를 나란히. 두 종류를 번갈아 쓰면 지그재그 구성	-	-
CEO 인사말	세로 사진 + 제목 + 긴 본문 + 서명. 서명은 "버튼 이름" 칸에 적습니다 (예: 대표이사 김바른)	-	-
연혁 타임라인	"연혁" 반복 필드(연도 · 제목 · 내용 · 사진). 세로 선과 점으로 이어진 타임라인	-	-
조직도	"조직도" 반복 필드. 단계 1(맨 위) · 2(본부) · 3(바로 앞 본부 아래 팀)	-	-
수상 · 인증	"수상 · 인증" 반복 필드(마크 이미지 · 이름 · 기관 · 연도). 마크가 없으면 별 아이콘	-	-
자주 묻는 질문	"자주 묻는 질문" 반복 필드. 왼쪽 제목, 오른쪽 펼침 목록	-	표시 개수
오시는 길	구글 지도 + 주소 · 교통 안내(본문) · 전화 · 운영 시간 · 지도 앱 버튼. 주소는 "게시판 주소(mid) · 주소" 칸, 비우면 푸터 회사 소개 마지막 줄	-	-
문의 안내	제목 · 문장 · 문의 버튼 + 푸터의 전화 · 이메일 · 운영 시간 목록	-	-
채용 배너	포인트 색 띠 (이미지를 넣으면 사진 위에 포인트 색을 덮음) + 흰 버튼	-	-
영상	유튜브 · 비메오 주소 또는 mp4 를 "버튼 링크"에. 누르기 전까지 외부 플레이어를 불러오지 않아 빠릅니다 (유튜브는 쿠키 없는 주소 사용). 이미지는 첫 화면	-	-
자료실 · IR	게시판 글을 표로. 분류 · 제목 · 날짜 · "첨부 N" 표시	예: `ir`	4~6

섹션 공통 칸 (1.2.0)

제목 위 작은 글씨: 제목 위에 포인트 색으로 붙는 짧은 말(About, Since 2009 등).
배경: 없음 · 연한 회색 · 어둡게. 회색 · 어둡게는 화면 끝까지 칠해져 앞뒤 섹션과 구분됩니다. 사진 띠 · 문의 유도 · 채용 배너 · 영상은 자체 배경을 씁니다.
표시할 곳: 비우면 대문. 페이지 mid 를 적으면 그 서브 페이지에 나옵니다. 여러 곳은 쉼표(about, ceo), 대문에도 두려면 home 을 함께 적습니다.
서브 페이지에서 위치: 본문 아래(기본) · 본문 위.
카드 오른쪽 위 보이기 체크를 끄면 지우지 않고 잠시 숨깁니다. 카드를 끌어서 순서를 바꿉니다.

서브 페이지 조립 예 (데모와 같은 구성)

본문이 짧은 페이지(제목 한 줄 + 소개 문장)를 만들고, 섹션의 "표시할 곳"에 그 페이지 mid 를 적으면 레이아웃에서 서브 페이지를 조립할 수 있습니다.

페이지 (mid)	섹션
CEO 인사말 (`ceo`)	CEO 인사말 → 사진 + 글(오른쪽)
연혁 · 조직 (`history`)	연혁 타임라인 → 조직도(배경 회색)
오시는 길 (`location`)	오시는 길 → 문의 안내(배경 회색)
회사 소개 (`about`)	숫자 지표(어둡게) → 자료실 · IR → 수상 · 인증
문의 (`contact`)	자주 묻는 질문 (`home, contact` 로 대문과 함께)

간격 · 글자 체계

섹션 사이 간격, 제목과 내용 사이 간격, 카드 사이 간격, 띠 섹션 안쪽 여백, 제목 · 본문 글자 크기를 한 벌의 값으로 맞췄습니다. 화면 폭에 따라 부드럽게 줄어듭니다 (섹션 사이 72~120px, 제목 아래 24~36px, 카드 사이 16~28px, 띠 안쪽 64~112px). 섹션을 어떤 순서로 놓아도 간격이 같고, 띠 섹션끼리 붙으면 사이 흰 틈 없이 이어집니다.

분류 칩

추천 아티클 · 최근 뉴스 · 소식 카드의 사진 위에 붙는 검정 칩은 글의 분류(카테고리) 이름입니다. 게시판 관리 > 분류에서 "사람&문화 · 기술 · 서비스 · 기업"처럼 만들어 두고 글마다 분류를 고르면 기업 미디어 대문이 됩니다.

서브 페이지 (설정 탭 "서브 페이지")

머리 형태: 제목 띠(사진 배경, 기본) · 제목만(흰 바탕) · 표시 안 함.
제목 띠 기본 배경 이미지와 높이(220 · 320 · 460px). 배경 이미지가 없으면 짙은 단색 띠입니다.
제목 출처: 1차 메뉴 이름(기본) 또는 모듈(게시판 · 페이지) 이름.
경로 표시: 홈 / 1차 메뉴 / 하위 메뉴.
하위 메뉴 탭: 현재 1차 메뉴에 2차 메뉴가 있으면 제목 띠 아래에 "전체 · 하위 메뉴…" 탭이 붙습니다.
서브 본문 폭: 본문 최대 너비와 같게, 또는 읽기 좋게 960px.
페이지별 배너: 반복 필드에 페이지 mid · 배경 이미지 · 제목 · 부제를 적으면 그 페이지의 제목 띠가 따로 꾸며집니다. 1차 메뉴의 mid 를 적으면 그 아래 페이지에도 적용됩니다.

게시판 종류 (게시판 스킨 설정 "목록 스타일")

스타일	모습	데모
목록형	번호 · 제목 · 글쓴이 · 날짜 표	뉴스룸
큰 갤러리형	첫 글은 사진 크게 + 제목, 이어서 3열 사진 카드. 사진 위에 분류 칩	인사이드
웹진형	왼쪽 썸네일 + 제목 · 요약	보도자료
카드형	테두리 카드 그리드	-
FAQ형	질문을 누르면 답이 펼쳐지는 아코디언. 분류 탭으로 묶음	FAQ

웹진형 · 큰 갤러리형의 본문 요약은 게시판 관리 > 목록 설정에서 "요약(summary)" 항목을 켜야 나옵니다. 코어가 목록 조회 때 요약 항목이 있을 때만 본문을 함께 읽기 때문입니다.
글쓰기 · 수정 · 삭제 버튼은 권한이 있는 회원에게만 보입니다. FAQ 처럼 관리자만 쓰는 게시판은 게시판 관리 > 권한에서 "글 작성"을 관리 그룹으로 제한하세요.
데모의 메뉴 구성: 이야기 → 인사이드(큰 갤러리), 뉴스룸 → 보도자료(웹진), 문의 → FAQ. 2차 메뉴는 헤더 드롭다운과 서브 페이지 탭에 자동으로 나옵니다.

본문 조립 블록 (회사 소개 · 조직 페이지)

페이지 모듈(위젯 페이지가 아닌 일반 페이지)의 본문에 아래 클래스를 쓰면 대문과 같은 결의 소개 페이지가 됩니다. 에디터의 HTML 모드에 붙여 넣으면 됩니다. 전체를 <div class="bg-page"> 로 감싸면 블록 사이 간격이 자동으로 벌어집니다.

블록	마크업	쓰임
머리글	`<section class="bg-page-lead"><span class="bg-eyebrow">About</span><h2>제목</h2><p>문장</p></section>`	페이지 첫 문단
사진 + 글	`<section class="bg-split"><img src="..." /><div class="bg-split-copy"><span class="bg-eyebrow">라벨</span><h3>제목</h3><p>문장</p></div></section>`	`is-flip` 을 붙이면 사진이 오른쪽
카드 3열	`<section class="bg-cols"><div class="bg-col"><em>01</em><strong>제목</strong><p>문장</p></div>…</section>`	원칙 · 혜택 · 특징
연혁	`<section class="bg-timeline"><div class="bg-tl"><em>2009</em><strong>제목</strong><p>문장</p></div>…</section>`	4열, 모바일 2열
인용	`<section class="bg-quote"><blockquote>문장</blockquote><cite>출처</cite></section>`	큰 글자 한 줄
사진 띠	`<section class="bg-band" style="background-image:url('...')"><div class="bg-band-copy"><h3>제목</h3><p>문장</p></div></section>`	화면 폭을 가득 채움
사람 목록	`<section class="bg-roster"><div class="bg-roster-item"><img src="..." /><strong>이름</strong><span>직책</span><em>부서</em></div>…</section>`	사진 대신 `<span class="bg-roster-photo">김</span>` 도 가능
버튼 줄	`<div class="bg-page-links"><a class="is-primary" href="/contact">문의</a><a href="/shop">서비스</a></div>`	페이지 끝

데모의 회사 소개(/about) · 사람들(/riders) 페이지가 이 블록으로만 만들어져 있으니 본문을 복사해 고쳐 쓰면 빠릅니다.

서비스 · 제품 (커머스)

커머스 모듈을 서비스 상품 소개와 판매에 씁니다. 상품의 요약 항목이 카드의 윗줄(포인트 색)로 나오고, 대문의 제품 섹션은 정사각 섬네일을 씁니다. 견적 상품은 가격을 0으로 두면 대문에서 "문의"로 표시됩니다(상점 목록에서는 0원으로 나오므로 가격을 적어 두는 편이 낫습니다).

푸터

다크 모드 · 애니메이션 · 접근성 (1.2.0)

다크 모드 전환 버튼: 색상 모드를 "방문자 기기 설정에 맞춤"으로 두면 헤더에 해/달 버튼이 생깁니다. 처음에는 기기 설정을 따르고, 방문자가 고른 모드는 기억합니다. 게시판 · 회원 · 문의 · 커머스 스킨도 함께 바뀝니다.
스크롤 등장 애니메이션: 섹션이 화면에 들어올 때 부드럽게 떠오릅니다. 설정에서 끌 수 있고, 기기에서 "동작 줄이기"를 켠 방문자에게는 자동으로 꺼집니다. 스크립트가 늦게 오더라도 3초 뒤에는 모든 섹션이 보이게 되어 있습니다.
버튼 대비: 포인트 색은 그대로 쓰되, 흰 글씨가 올라가는 버튼 바탕과 흰 바탕 위 포인트 색 글씨는 자동으로 조금 짙게 섞어 WCAG AA(4.5:1) 대비를 맞춥니다. 다크 모드에서는 반대로 밝게 섞습니다. 아주 밝은 포인트 색(노랑 · 연두)은 버튼 글씨가 약해질 수 있으니 중간 이상 진한 색을 권합니다.
키보드: 맨 앞에 "본문 바로가기" 링크, 모든 버튼 · 링크에 포커스 테두리.
인쇄: 헤더 · 메뉴 · 지도 · 영상은 빼고 흑백으로, FAQ 는 펼친 채로 인쇄합니다.

검색엔진 구조화 데이터 (1.2.0)

대문에 schema.org Organization 정보를 넣습니다. 회사 이름(정식 회사명 → 로고 텍스트 → 사이트 제목 순), 로고, 대표 전화 · 이메일, 주소(푸터 회사 소개의 마지막 줄), SNS 주소를 푸터 설정에서 가져옵니다. 설정 > 기본 > "검색엔진용 회사 정보"에서 끌 수 있습니다.

통합 검색

헤더 검색은 사이트 통합 검색으로 갑니다. 결과 화면도 테마 모양(탭 · 결과 목록 · 버튼)으로 그립니다. 관리자 > 통합 검색에서 검색 대상 모듈을 지정해야 결과가 나옵니다 (대상을 비우고 "포함"이면 "검색을 사용할 수 없습니다"가 뜹니다).

레이아웃 설정 전체 항목

기본

로고 이미지 · 흰색 로고 이미지 · 로고 텍스트 · 헤더 오른쪽 문구 · 헤더 버튼 이름 · 링크 · 포인트 색상 · 본문 최대 너비 · 색상 모드 · 검색 사용 · 헤더에 로그인 · 계정 표시 · 제품 상점 주소(mid) · 다크 모드 전환 버튼 · 스크롤 등장 애니메이션 · 검색엔진용 회사 정보 · 정식 회사명 · 상단 메뉴 · 푸터 메뉴

첫 화면

표지 표시 · 표지 높이 · 표지 슬라이드 게시판(mid) · 슬라이드 개수 · 자동 넘김 간격 · 고정 표지 배경 이미지 · 고정 표지 배경 영상 · 윗줄 · 제목 · 설명 · 버튼 이름 · 버튼 링크

메인 구성

메인페이지 섹션(종류 · 제목 · 제목 위 작은 글씨 · 본문 · 이미지 · 게시판 mid · 주소 · 버튼 이름 · 버튼 링크 · 개수 · 배경 · 표시할 곳 · 서브 페이지에서 위치) · 연혁 · 조직도 · 수상 · 인증 · 자주 묻는 질문 · 경영진 · 구성원 · 사업 영역 · 고객사 · 파트너 · 숫자 지표

서브 페이지

서브 페이지 머리 · 제목 띠 기본 배경 이미지 · 제목 띠 높이 · 제목 출처 · 경로 표시 · 하위 메뉴 탭 · 서브 본문 폭 · 페이지별 배너