mublo 운영자 가이드

mublo는 회사 홈페이지·커뮤니티·쇼핑몰을 한 번의 설치로 운영할 수 있는 웹사이트 플랫폼입니다. 코드를 몰라도 관리자 화면에서 메뉴를 만들고, 블록으로 페이지를 꾸미고, 게시판·쇼핑 같은 기능을 켜고 끌 수 있습니다.

이 가이드는 이렇게 구성돼 있습니다

• 시작하기 — 관리자에 로그인하고, 사이트의 큰 틀을 정하는 시작 킷을 고릅니다.
• 메뉴 관리하기 — 방문자가 누를 메뉴를 만들고 배치하며, 메뉴마다 화면 레이아웃을 지정합니다.
• 블록으로 페이지 꾸미기 — 회사소개·이벤트 같은 페이지를 블록을 쌓아 직접 만듭니다.
• 자주 묻는 질문 — "메뉴를 만들었는데 안 보여요" 같은 상황을 빠르게 해결합니다.

처음이라면 순서대로 읽는 것을 권합니다. 각 장은 앞 장에서 만든 것을 이어서 사용합니다.

사이트 주소 뒤에 /admin 을 붙이면 관리자 로그인 화면이 나옵니다. 설치할 때 만든 최고관리자 계정으로 로그인하세요.

로그인 후 첫 화면 — 대시보드

로그인하면 대시보드가 보입니다. 방문 통계, 최근 활동, 바로가기 위젯이 모여 있는 시작점입니다. 왼쪽 사이드바가 모든 관리 기능의 목록입니다.

비밀번호를 잊었다면 서버에 설치된 설정으로 최고관리자를 다시 지정할 수 있습니다. 운영 중 계정은 회원 관리에서 등급을 바꿔 관리자를 추가하세요.

설치 직후 사이트는 빈 상태에 가깝습니다. 시작 킷은 사이트의 성격에 맞는 메뉴·페이지·기본 구성을 한 번에 깔아 주는 출발점입니다.

세 가지 유형

• 회사형 — 회사소개·서비스·문의 중심의 홈페이지. 방문자에게 정보를 보여주는 것이 목적일 때.
• 커뮤니티형 — 게시판·회원 활동 중심. 사람들이 글을 쓰고 소통하는 사이트일 때.
• 쇼핑몰형 — 상품·주문·결제 중심. 물건을 파는 사이트일 때.

고르는 기준

"이 사이트에서 방문자가 가장 자주 하는 행동이 무엇인가"로 정하면 쉽습니다. 정보를 읽으면 회사형, 글을 쓰면 커뮤니티형, 물건을 사면 쇼핑몰형입니다. 나중에 다른 기능을 확장 관리에서 얼마든지 추가할 수 있으니, 처음엔 가장 큰 목적 하나로 고르세요.

시작 킷은 "이렇게 시작하면 편하다"는 제안일 뿐입니다. 깔린 메뉴·페이지는 모두 자유롭게 바꾸거나 지울 수 있습니다.

사이트의 이름, 로고, 검색·공유 시 표시되는 이미지, 화면 배치를 한곳에서 정합니다. 관리자에서 기본 설정 화면(/admin/settings)으로 들어가면 위쪽에 탭이 나뉘어 있습니다. 항목을 고친 뒤 화면 오른쪽 위 또는 아래의 저장 버튼을 눌러야 반영됩니다.

어느 탭에서 무엇을 설정하나요

사이트명과 이미지

기본 정보 탭의 사이트 정보 칸에서 사이트명(필수)과 부제를 입력합니다. 로고·아이콘·OG 이미지는 로고 및 SEO 설정 탭의 로고 설정에서 파일을 직접 올립니다.

• PC용 / 모바일용 로고 — 헤더에 표시됩니다. 모바일용을 비워두면 PC용을 함께 씁니다.
• 파비콘 — 브라우저 탭에 뜨는 작은 아이콘(권장 32x32, ICO/PNG).
• 앱 아이콘 — 휴대폰 홈화면에 추가할 때 쓰는 아이콘(권장 192x192 PNG).
• OG 이미지 — 링크를 SNS에 공유할 때 미리보기로 뜨는 이미지(권장 1200x630).

사이트 기본 화면 레이아웃

기본 정보 탭의 레이아웃 설정에서 페이지 기본 형태를 고릅니다. 전체, 좌측 사이드바, 우측 사이드바, 3단 중 하나를 선택합니다. 사이드바가 있는 형태를 고르면 너비(px)와 모바일 출력 여부를 함께 지정할 수 있습니다.

레이아웃 형태는 PC 화면 기준입니다. 모바일에서는 사이드바 배치가 그대로 적용되지 않습니다. 아래쪽 사이트 최대 넓이는 0으로 두면 제한 없이, 내용 최대 넓이는 0으로 두면 레이아웃에 맞춰 표시됩니다.

메인화면(첫 화면)에도 이 레이아웃을 쓰려면 메인화면에 레이아웃 적용 스위치를 켭니다. 꺼두면 메인화면은 사이드바 없이 전체 넓이로 나옵니다.

메뉴는 방문자가 사이트를 돌아다니는 길입니다. mublo의 메뉴는 두 단계로 이해하면 쉽습니다.

① 메뉴 아이템(후보) — 메뉴 "재료"

메뉴 관리 → 메뉴 아이템 탭에 만드는 것은 메뉴의 재료입니다. 여기서 메뉴를 만들면 목록(풀)에 담길 뿐, 아직 화면에 나타나지는 않습니다.

② 메인 메뉴(트리) — 실제로 보이는 자리

메인 메뉴 탭에서 재료(메뉴 아이템)를 상단 내비게이션에 끌어다 놓아야 방문자에게 보입니다. 위·아래로 옮기고, 하위 메뉴로 넣어 계층을 만들 수 있습니다.

가장 흔한 오해: "메뉴를 만들었는데 화면에 안 보여요." → 재료만 만들고 메인 메뉴에 배치를 안 한 경우입니다. 다음 장에서 배치하는 법을 다룹니다.

유틸리티·푸터 메뉴

로그인/회원가입 같은 작은 메뉴는 유틸리티(머리말 구석), 이용약관 같은 것은 푸터(꼬리말)에 따로 배치합니다. 각각 전용 탭에서 관리합니다.

1. 메뉴 아이템 만들기

메뉴 관리 → 메뉴 아이템 탭에서 메뉴 추가를 누르면 입력창이 열립니다.

• 메뉴명 — 방문자에게 보일 이름 (예: 회사소개)
• URL — 눌렀을 때 이동할 주소 (예: /about). 비우면 클릭되지 않는 부모 메뉴가 됩니다.
• 표시 대상 — 전체 / 비로그인만 / 로그인만
• PC·모바일 표시 — 기기별로 보이거나 숨깁니다.

2. 메인 메뉴에 배치하기

메인 메뉴 탭으로 이동하면 왼쪽에 방금 만든 재료 목록, 오른쪽에 실제 메뉴 트리가 있습니다. 재료의 추가 버튼을 눌러 트리에 올리고, 드래그로 순서와 계층을 정한 뒤 저장합니다.

하위 메뉴를 만들려면 트리에서 다른 메뉴 안쪽으로 끌어 넣으면 됩니다. 부모 메뉴는 URL을 비워 두면 제목 역할만 합니다.

3. 확인

사이트 첫 화면을 새로고침하면 배치한 메뉴가 상단에 나타납니다. 보이지 않으면 표시 대상(로그인 상태)과 PC/모바일 표시 설정을 확인하세요.

화면 레이아웃은 "본문 양옆에 사이드바를 둘지"를 정합니다. mublo는 사이트 기본값을 정해 두고, 필요한 메뉴만 예외를 줄 수 있습니다.

사이트 기본 레이아웃

사이트 설정에서 사이트 전체가 따를 기본 레이아웃(전체 / 좌측 사이드바 / 우측 사이드바 / 양쪽)을 정합니다. 따로 지정하지 않은 모든 메뉴 화면이 이 기본을 따릅니다.

메뉴별 레이아웃 지정 — 이 메뉴만 다르게

특정 메뉴 화면만 다른 레이아웃을 쓰고 싶을 때가 있습니다. 이럴 때 메뉴마다 레이아웃을 지정합니다. 선택지는 다섯 가지입니다.

어디서 바꾸나

• 메뉴 수정 창 — 메뉴를 편집할 때 "화면 레이아웃" 드롭다운에서 고릅니다.
• 목록에서 바로 — 메뉴 아이템 목록의 레이아웃 칸에서 값을 고르고, 해당 줄을 체크한 뒤 선택 수정을 누르면 여러 메뉴를 한 번에 바꿀 수 있습니다.

실전 예시

사이트 기본은 우측 사이드바인데, 매뉴얼 페이지만은 넓게 보여주고 싶다고 합시다. 매뉴얼 메뉴의 레이아웃을 전체로 지정하면, 사이트의 다른 화면은 그대로 우측 사이드바를 쓰면서 매뉴얼만 전체 폭으로 나옵니다.

주의: 레이아웃을 전체로 바꾸면, 그 메뉴 화면의 좌·우 사이드바에 배치한 블록은 표시되지 않습니다. 사이드바가 사라졌기 때문입니다. 사이드바 블록이 안 보인다면 그 메뉴의 레이아웃이 '전체'인지 먼저 확인하세요.

참고로 블록으로 직접 만든 페이지는 그 페이지에 저장된 레이아웃이 우선합니다. 즉 우선순위는 블록 페이지 → 메뉴 지정 → 사이트 기본 순입니다.

메뉴 관리 화면에는 상단 메인 메뉴 외에도 유틸리티, 푸터, 마이페이지 세 개의 탭이 더 있습니다. 각 탭은 배치 방식이 똑같아서, 한 번 익히면 세 곳 모두 같은 방법으로 다룰 수 있습니다.

세 탭 공통 사용법

각 탭은 좌우 두 칸으로 나뉩니다. 왼쪽은 "추가 가능한 메뉴"(대기 목록), 오른쪽은 지금 실제로 노출되는 "현재 메뉴"입니다.

• 왼쪽 항목을 오른쪽으로 끌어다 놓으면 추가됩니다.
• 오른쪽 안에서 위아래로 끌면 순서 변경이 됩니다.
• 오른쪽 항목을 왼쪽으로 끌면 제거됩니다.
• 배치를 마친 뒤 반드시 오른쪽 위의 저장 버튼을 눌러야 반영됩니다.

각 항목 앞의 Core / Plugin / Package 배지는 그 메뉴를 제공한 출처를 뜻합니다. 코어 기본 메뉴뿐 아니라 설치한 플러그인·패키지가 등록한 메뉴도 같은 방식으로 배치할 수 있습니다.

유틸리티 메뉴 (상단 우측)

화면 상단 오른쪽에 놓이는 로그인·회원가입·마이페이지·로그아웃 같은 항목입니다. 로그인/로그아웃, 회원가입/마이페이지처럼 짝을 이루는 메뉴는 하나만 넣어도 짝이 함께 배치됩니다. 비회원에게는 로그인·회원가입이, 로그인한 회원에게는 마이페이지·로그아웃이 자동으로 바뀌어 보입니다.

항목에 Lv.2+ 같은 표시가 있으면, 그 등급 이상 회원에게만 보이는 메뉴라는 뜻입니다.

푸터 메뉴

사이트 맨 아래에 놓이는 이용약관·개인정보보호정책 같은 안내 링크입니다. 사용법은 유틸리티와 동일하며, 자주 필요한 안내 페이지를 원하는 순서로 배치하면 됩니다.

마이페이지 사이드바 메뉴

회원이 마이페이지에 들어갔을 때 옆에 보이는 메뉴입니다. 여기에는 잠금 아이콘이 붙은 시스템 메뉴(회원정보·회원탈퇴)가 있습니다. 이 항목들은 제거하거나 순서를 바꿀 수 없고, 항상 맨 위와 맨 아래에 고정됩니다. 그 사이에 알림·포인트 지갑 등 원하는 메뉴를 끌어다 넣어 정리하면 됩니다.

메뉴 하나하나에는 누구에게 보일지와 어떤 기기에서 보일지를 정하는 설정이 있습니다. 이 설정을 조합하면 로그인한 회원에게만 보이는 메뉴, 비로그인 방문자에게만 보이는 메뉴, PC에서만 보이는 메뉴 등을 자유롭게 만들 수 있습니다.

표시 대상 — 누구에게 보일까

메뉴마다 표시 대상을 세 가지 중 하나로 정할 수 있습니다.

로그인과 로그아웃처럼 짝을 이루는 메뉴는 같은 자리에 번갈아 나타나도록 묶을 수 있습니다. 예를 들어 비로그인 방문자에게는 로그인 메뉴가, 로그인한 회원에게는 로그아웃 메뉴가 같은 위치에 표시됩니다.

접근 레벨 — 어느 등급부터 보일까

표시 대상이 로그인이라도, 모든 회원에게 똑같이 보여야 하는 것은 아닙니다. 회원에게는 등급(레벨)이 있고, 메뉴에는 접근 최소 레벨을 지정할 수 있습니다. 방문자의 등급이 메뉴의 최소 레벨보다 낮으면 그 메뉴는 보이지 않습니다.

• 0(비회원 포함 모두): 등급 제한 없이 누구나 접근합니다.
• 높은 값일수록: 그 등급 이상인 회원에게만 보입니다. 일반회원용, 특정 우수회원용, 관리자용 메뉴를 구분할 때 사용합니다.

등급 체계(일반회원·판매자·스태프·최고관리자 등)는 사이트 전체가 공유하며, 최고관리자만 만들거나 수정할 수 있습니다. 운영자는 이미 만들어진 등급 중에서 메뉴의 최소 레벨을 고르기만 하면 됩니다.

PC / 모바일 표시

같은 메뉴라도 PC 화면과 모바일 화면 각각에서 켜고 끌 수 있습니다.

• PC에 표시를 끄면 컴퓨터 화면에서는 숨겨집니다.
• 모바일에 표시를 끄면 휴대폰·태블릿 화면에서는 숨겨집니다.

화면이 좁은 모바일에서는 메뉴가 너무 많으면 복잡해 보이므로, 덜 중요한 메뉴는 모바일 표시를 꺼 두는 식으로 정리하면 좋습니다. 둘 다 켜 두면 어느 기기에서든 보입니다.

정리 — 하나의 메뉴는 표시 대상(누구에게) · 접근 레벨(어느 등급부터) · PC/모바일(어느 기기에서) 세 가지 조건을 모두 만족할 때 방문자에게 보입니다. 원하는 대로 안 보인다면 이 세 설정을 차례로 확인하세요.

블록은 코드 없이 화면을 꾸미는 조립 부품입니다. 세 겹으로 이해하면 쉽습니다.

행 → 칸 → 콘텐츠

• 행(Row) — 가로로 한 줄. 배경색·여백·높이를 가집니다.
• 칸(Column) — 한 행을 세로로 나눈 칸. 한 행에 최대 4칸.
• 콘텐츠 — 칸 안에 담기는 실제 내용. 이미지, 동영상, 게시판 목록, 자유 HTML 등.

블록은 어디에 붙나

블록은 두 가지 방식으로 씁니다.

1. 페이지 만들기 — 회사소개·이벤트처럼 블록만으로 새 페이지를 조립합니다. 본문 전체가 블록입니다.
2. 화면 곳곳에 배치 — 머리말 위 공지바, 사이드바, 본문 위·아래 같은 자리에 블록을 얹습니다. 이 자리는 게시판·쇼핑몰 같은 기능 페이지에도 함께 나타납니다.

게시판 목록이나 상품 상세 같은 기능 페이지의 본문은 기능이 직접 그립니다. 블록은 그 본문을 감싸는 자리(위·아래·양옆)를 채웁니다. 즉 "블록으로 게시판을 다시 만드는" 것이 아니라 "게시판 주변을 블록으로 꾸미는" 것입니다.

한 칸에는 콘텐츠 한 종류

칸 하나에는 콘텐츠 한 종류가 들어갑니다. 한 칸에 여러 요소(예: 배너 + 문구 + 버튼)를 세로로 쌓고 싶다면, 그 칸을 HTML 콘텐츠로 지정하고 직접 마크업을 넣으면 됩니다. 자주 쓰는 형태는 킷으로 저장해 재사용하세요.

킷은 잘 만든 블록 구성(행·칸·콘텐츠)을 통째로 저장해 두고, 다른 페이지나 사이트에 그대로 가져다 쓰는 기능입니다. 매번 처음부터 쌓지 않아도 됩니다.

킷 적용 방식 두 가지

교체는 되돌리기 어렵습니다. 기존 블록이 사라지므로, 중요한 페이지라면 교체 전에 내용을 따로 백업해 두는 것이 안전합니다.

추천 흐름

1. 새 페이지에 마음에 드는 킷을 추가로 얹는다.
2. 텍스트와 이미지를 우리 것으로 바꾼다.
3. 자주 쓸 구성이면 다시 킷으로 저장해 둔다.

회사소개나 이벤트 안내처럼 게시판이 아닌 독립된 페이지는 블록만으로 만들 수 있습니다. 관리자에서 페이지의 껍데기(코드·제목·레이아웃)를 먼저 만든 뒤, 그 안을 블록 행으로 채우는 방식입니다.

1. 페이지 만들기

관리자 메뉴의 블록 페이지 관리에서 페이지 추가를 누르면 다음 항목을 입력합니다.

• 페이지 코드 — 주소(URL)에 쓰이는 이름입니다. 코드가 about이면 페이지 주소는 /p/about이 됩니다.
• 페이지 제목 — 관리 목록과 화면 상단에 표시되는 이름입니다.

페이지 코드는 영문 소문자·숫자·하이픈(-)만, 2~50자로 씁니다. 하이픈으로 시작하거나 끝날 수 없고, 한 사이트 안에서 겹칠 수 없습니다. 회사소개처럼 한글은 쓸 수 없으니 about, event-2026 같이 지으세요.

2. 레이아웃과 넓이

레이아웃 형태는 사이드바 배치를 정합니다. 1단(전체)은 사이드바 없이 콘텐츠만, 2단 좌측 / 2단 우측은 한쪽에 사이드바를 둡니다. 회사소개처럼 넓게 보여줄 페이지는 보통 1단이 어울립니다. 넓이 타입으로 최대넓이·와이드·사용자 지정 넓이를 고를 수 있습니다.

3. 헤더·푸터 사용 여부

헤더 사용과 푸터 사용을 켜면 사이트 공통 상단 메뉴와 하단 정보가 이 페이지에도 함께 나옵니다. 둘 다 끄면 헤더·푸터가 빠진 독립 화면이 되어, 별도 랜딩 페이지처럼 쓸 수 있습니다. 특별한 경우가 아니라면 둘 다 켜 두는 것이 자연스럽습니다.

4. 저장 후 블록 채우기

저장하면 아직 빈 페이지가 만들어집니다. 이제 이 페이지에 블록 행을 추가해 사진·글·버튼 같은 내용을 채우면 됩니다. 완성된 페이지는 /p/페이지코드 주소로 바로 열 수 있습니다.

이미 잘 꾸며진 페이지가 있다면, 그 구성을 블록 킷으로 내보냈다가 다른 페이지에 그대로 적용해 재사용할 수도 있습니다.

블록의 각 칸(컬럼)에는 한 가지 콘텐츠 종류를 담습니다. 칸을 편집할 때 종류를 먼저 고르고, 그에 맞는 설정을 채우는 방식입니다. mublo가 기본 제공하는 종류는 아래와 같습니다.

기본 콘텐츠 종류

알아두면 좋은 점

• 동영상 주소는 그냥 붙여넣기 — 유튜브 시청 주소(watch?v=...)든 공유 주소든 알아서 인식합니다.
• 로그인 위젯은 실시간 — 방문자마다 로그인 상태가 다르므로 캐시하지 않고 매번 새로 그립니다.
• 로그인 위젯은 PC/모바일 노출을 따로 조절 — PC에서만 또는 모바일에서만 보이도록 켜고 끌 수 있습니다. 이미지는 PC용·모바일용 이미지를 각각 지정해 화면에 맞춰 보여줍니다.

메뉴를 '현재 위치 하위 메뉴' 방식으로 두면, 하위 메뉴가 없는 페이지에서는 빈 줄이 생기지 않도록 자동으로 숨겨집니다. 편집 화면 미리보기에서만 자리가 표시됩니다.

'PHP 파일 포함'은 지정된 폴더 안의 .php 파일만 허용하고 상위 폴더 이동은 막습니다. 파일을 준비할 개발자가 없다면 다른 종류로 충분히 페이지를 꾸밀 수 있습니다.

블록 페이지는 행(줄) 안에 칸을 넣어 만듭니다. 행과 칸에는 각각 배경, 여백, 너비, 테두리 같은 꾸미기 옵션이 있어 코드 없이 화면을 다듬을 수 있습니다. 대부분의 옵션은 PC용과 모바일용을 따로 지정할 수 있습니다.

배경 (색·이미지)

행과 칸 모두 배경을 설정할 수 있습니다. 배경색을 채우거나, 배경 이미지를 올려 그 위치·크기·반복 여부를 정합니다.

• 배경색: 예) #f5f5f5
• 배경 이미지: 올린 이미지의 위치(가운데 등), 크기(꽉 채움/원본), 반복(반복 안 함 등) 지정
• 투명도: 배경을 옅게(예: 0.8) 만들어 글자가 잘 보이게 조절

여백 (외부·내부)

여백은 두 종류입니다. 헷갈리기 쉬우니 구분해 두세요.

• 외부여백: 배경 바깥쪽 간격. 행 위아래에 빈 공간을 줍니다. (예: 40px 0)
• 내부여백: 배경 안쪽 간격. 배경 밴드 안에서 내용을 안으로 밀어 넣습니다. (예: 25px 10px 20px 25px)

행에는 외부여백·내부여백이 모두 있고, 칸에는 내부여백을 줄 수 있습니다. 행 높이도 PC·모바일로 따로 지정할 수 있습니다.

칸 수와 너비

한 줄에는 칸을 최대 4개까지 넣을 수 있습니다. 칸 수를 정하고, 칸 사이 간격과 각 칸의 너비를 지정합니다.

• 칸 너비 단위: 비율(%) 또는 픽셀(px) 중 선택. 예) 절반씩이면 50%
• 칸 간격: 칸과 칸 사이 벌어지는 간격(px)

테두리 (칸)

칸에는 테두리를 둘러 카드처럼 보이게 할 수 있습니다. 굵기·색·모서리 둥글기·선 모양을 정합니다.

• 굵기(예: 1px), 색(예: #e5e5e5), 모서리 둥글기(예: 8px), 선 모양(실선 등)

칸 제목

칸 위에 제목과 문구를 붙일 수 있습니다. 표시 여부를 켠 뒤 아래 항목을 설정합니다.

• 제목 글자와 색, 글자 크기(PC·모바일 각각), 정렬 위치(왼쪽 등)
• 제목 이미지: 글자 대신 이미지 제목을 PC·모바일로 지정 가능
• 더보기 링크: 켜고 이동할 주소 입력
• 보조 문구: 제목 옆·아래에 붙는 설명 문구와 색·크기·위치

배경 투명도와 어두운 배경색을 함께 쓰면 이미지 위 글자가 훨씬 잘 읽힙니다. PC에서 예뻐도 모바일에서는 여백·글자 크기가 달라 보일 수 있으니, 저장 후 모바일 화면도 꼭 확인하세요.

블록은 하나의 페이지를 통째로 채우는 데만 쓰는 게 아닙니다. 사이트의 모든 화면에 공통으로 붙는 정해진 자리에 블록을 배치하면, 그 화면 어디서나 같은 내용이 함께 보입니다. 공지바, 사이드바 배너, 본문 위 안내문 같은 것들이 여기에 해당합니다.

배치할 수 있는 자리

화면 위에서 아래로 내려가며 다음 자리들이 있습니다.

좌·우 사이드바는 해당 화면의 레이아웃이 사이드바를 쓰도록 설정돼 있을 때만 나타납니다. 전체폭(사이드바 없음) 레이아웃에서는 좌·우 자리에 넣은 블록이 보이지 않습니다.

특정 메뉴에서만 노출

위치 블록은 기본적으로 모든 화면에 함께 나옵니다. 하지만 "이 배너는 게시판에서만" 처럼 특정 화면에만 띄우고 싶을 때가 있습니다. 이때는 배치할 메뉴를 지정하면 그 메뉴에서만 블록이 출력됩니다. 메뉴를 지정하지 않으면 사이트 전역에 공통으로 나옵니다.

공지바나 헤더아래처럼 사이트 정체성을 담는 자리는 전역으로 두고, 홍보성 배너는 관련 메뉴에만 지정하는 식으로 나눠 쓰면 화면이 깔끔해집니다.

HTML 블록에 직접 코드를 넣으면, 저장 순간 정화기가 자동으로 한 번 걸러 줍니다. 위험한 부분만 조용히 제거하고 서식과 레이아웃은 그대로 살리므로, 안심하고 화면을 꾸밀 수 있습니다. 아래 규칙만 알아 두면 됩니다.

허용되는 것

• 글·표·목록 같은 일반 태그와 figure, section, header, footer, nav, details, mark 같은 최신 HTML 태그.
• 인라인 style 서식: 색·글꼴·여백은 물론, 블록에서는 flex 레이아웃, border-radius(둥근 모서리), box-shadow(그림자), 그라디언트 배경까지 사용할 수 있습니다.
• target="_blank" 새 창 링크(안전 옵션이 자동으로 붙습니다).

같은 출처 이미지 배경

배경 이미지는 내 사이트 안의 경로만 허용됩니다. 즉 / 하나로 시작하는 주소여야 합니다.

<div style="background: url(/storage/hero.jpg)">...</div>

외부 주소(https://...)나 //로 시작하는 이미지는 추적·정보 유출을 막기 위해 자동으로 제거됩니다. 이미지는 먼저 사이트에 업로드한 뒤 그 경로를 쓰세요.

차단되는 것

• <script> 태그와 onclick 같은 on* 이벤트 속성.
• javascript: 로 시작하는 링크, data:·외부 url() 등 외부 요청을 부르는 값.
• 화면을 덮어 클릭을 가로채는 position·z-index 같은 위험한 CSS.

차단된 부분은 저장할 때 사라지므로, 넣은 스크립트가 동작하지 않으면 정화기가 걸렀다고 보면 됩니다.

메뉴를 만들었는데 화면에 안 보여요

메뉴 아이템만 만들고 메인 메뉴에 배치하지 않은 경우가 대부분입니다. 메인 메뉴 탭에서 재료를 트리에 올리고 저장하세요. 그래도 안 보이면 메뉴의 표시 대상(로그인 상태)과 PC/모바일 표시를 확인합니다.

특정 메뉴만 넓게(전체 폭) 보이고 싶어요

그 메뉴의 화면 레이아웃을 전체로 지정하세요. 메뉴 수정 창의 드롭다운 또는 목록의 레이아웃 칸에서 바꿀 수 있습니다.

레이아웃을 바꿨는데 사이드바 블록이 사라졌어요

레이아웃을 전체로 바꾸면 사이드바 자체가 없어져, 그 자리에 있던 블록도 표시되지 않습니다. 사이드바 블록이 필요하면 레이아웃을 좌측/우측/양쪽 중 하나로 두세요.

블록으로 게시판을 다시 만들 수 있나요

아니요. 게시판·쇼핑몰 같은 기능의 본문은 기능이 직접 그립니다. 블록은 그 주변(위·아래·양옆)을 꾸미는 데 씁니다. 기능은 확장 관리에서 켜고 끕니다.

바꿨는데 화면에 반영이 안 돼요

메뉴·레이아웃은 저장 즉시 반영됩니다. 그래도 예전 화면이 보이면 브라우저 새로고침(Ctrl+F5)을 해 보세요. 여러 도메인을 운영 중이라면 지금 보는 주소가 설정을 바꾼 도메인과 같은지 확인합니다.

MubloEditor 는 마우스로 글자를 꾸미고 사진·표·영상을 넣을 수 있는 화면형(위지윅) 편집기입니다. 워드나 한글처럼 보이는 그대로 편집되므로, HTML 을 몰라도 글을 쓸 수 있습니다.

어디에서 쓰이나

본문 내용을 길게 입력하는 곳이면 어디서든 이 편집기가 뜹니다. 대표적으로 다음과 같습니다.

• 글쓰기 — 게시판 글의 본문을 작성할 때
• 페이지 — 회사소개·이용안내처럼 고정된 안내 페이지를 만들 때
• 설명 영역 — 항목마다 붙는 소개글·설명 문구를 편집할 때

사진은 툴바의 이미지 버튼을 누르거나, 파일을 편집 화면 안으로 끌어다 놓기(드래그앤드롭) 하면 바로 올라갑니다.

툴바 프리셋 3종

편집기 위쪽 도구 모음(툴바)은 상황에 맞게 세 가지 크기로 준비되어 있습니다. 어느 것을 쓸지는 관리자가 화면마다 정해두며, 운영자는 나온 버튼만 사용하면 됩니다.

빈 줄에서 ## , - , 1. 등을 입력하면 제목·목록으로 자동 변환되는 마크다운 단축키도 지원합니다. 키보드만으로 빠르게 서식을 잡을 수 있습니다.

글을 쓸 때 나타나는 편집기(에디터) 위쪽에는 툴바라는 버튼 줄이 있습니다. 원하는 글자를 마우스로 드래그해 선택한 뒤 버튼을 누르면 서식이 적용됩니다. 여기서는 가장 자주 쓰는 기본 서식만 정리합니다.

버튼에 마우스를 올리면 이름 설명이 뜹니다. 어떤 버튼인지 헷갈릴 때 확인하세요. 편집기 종류에 따라 툴바가 간단·기본·전체로 다르게 보일 수 있어, 아래 버튼이 모두 나오지 않을 수도 있습니다.

글자 꾸미기

• 굵게 · 기울임 · 밑줄 · 취소선: 강조하고 싶은 글자를 선택하고 해당 버튼을 누릅니다.
• 제목: 드롭다운에서 제목 1·2·3 또는 본문을 고릅니다. 소제목을 만들 때 사용합니다.
• 글꼴·글자 크기: 선택한 글자의 서체와 크기를 바꿉니다.

색상

글자 색상 버튼은 글씨 색을, 배경 색상 버튼은 형광펜처럼 글자 뒤 색을 칠합니다. 버튼을 누르면 색 팔레트가 나오니 원하는 색을 고르세요.

정렬과 목록

• 정렬: 왼쪽·가운데·오른쪽 정렬로 문단 위치를 맞춥니다.
• 번호 목록 / 글머리 목록: 여러 줄을 선택하면 1. 2. 3. 또는 점(•) 목록으로 바뀝니다.

링크 걸기

링크로 만들 글자를 선택하고 링크 버튼을 누른 뒤 주소를 입력합니다. 링크를 없앨 때는 링크 제거 버튼을 사용합니다.

서식이 꼬였을 때는 해당 글자를 선택하고 서식 제거 버튼을 누르면 원래대로 돌아옵니다. 실수했다면 실행 취소 버튼으로 되돌릴 수 있습니다.

글을 쓰다가 마우스로 버튼을 찾지 않아도, 키보드 입력만으로 제목·목록·표·코드를 바로 만들 수 있습니다. 익숙해지면 훨씬 빠르게 글을 정리할 수 있습니다.

마크다운 단축 입력

빈 줄 맨 앞에서 아래 기호를 입력한 뒤 스페이스바를 누르면 자동으로 서식이 바뀝니다.

글자를 강조할 때는 **굵게**, *기울임*, `인라인코드`처럼 감싼 뒤 스페이스바를 누르면 됩니다.

줄 맨 앞에 ---만 쓰고 Enter를 누르면 가로 구분선이 그어집니다.

표 삽입과 셀 병합

툴바의 표 버튼으로 표를 넣은 뒤, 셀을 편집할 수 있습니다.

• 여러 셀을 드래그로 선택한 다음 마우스 오른쪽 버튼을 누르면 메뉴가 열립니다.
• 메뉴에서 셀 병합을 고르면 선택한 셀이 하나로 합쳐지고, 셀 분할로 다시 나눌 수 있습니다.
• 같은 메뉴에서 행·열 추가와 삭제, 표 삭제도 할 수 있습니다.

코드블록과 언어 선택

빈 줄에서 ```를 입력하고 Enter를 누르면 코드 블록이 만들어집니다. ```php처럼 뒤에 언어 이름을 붙이면 해당 언어로 바로 시작됩니다.

코드 블록 안에 커서를 두면 위쪽에 언어 선택 바가 나타납니다. text, html, css, javascript, php, sql, python, json, bash 중에서 고를 수 있고, 고른 언어에 맞춰 색이 입혀집니다.

코드 블록 안에서 Tab 키는 줄바꿈이 아니라 두 칸 들여쓰기로 동작합니다.

글에 사진을 넣으면 방문자에게 훨씬 잘 전달됩니다. 에디터는 이미지를 파일에서 올리거나, 마우스로 끌어다 놓는 방식으로 간편하게 넣을 수 있습니다.

이미지 넣는 방법

• 파일에서 올리기 — 에디터 위쪽 도구모음의 이미지 버튼을 눌러 내 컴퓨터의 사진을 선택합니다.
• 끌어다 놓기 — 파일 탐색기에서 사진을 마우스로 잡아 에디터 본문 위로 끌어다 놓으면 그 자리에 삽입됩니다.
• 붙여넣기 — 복사한 이미지를 본문에서 Ctrl+V 로 붙여넣을 수 있습니다.

삽입 시 사진은 서버에 자동으로 올라가며, 업로드가 진행되는 동안 진행률이 표시됩니다.

크기 조절

본문에 들어간 이미지를 클릭하면 모서리에 조절점이 나타납니다. 이 조절점을 마우스로 끌어 크기를 키우거나 줄일 수 있습니다. 모서리를 잡고 조절하면 가로세로 비율이 유지되어 사진이 찌그러지지 않습니다.

허용 형식과 용량

사진이 올라가지 않는다면 대부분 형식이 맞지 않거나 용량이 5MB 를 넘는 경우입니다. 스마트폰으로 찍은 고화질 사진은 용량이 큰 편이니, 너무 무거우면 크기를 줄여서 올려 주세요.

가이드에 자주 나오는 용어를 한 줄씩 쉽게 풀어 둡니다. 낯선 낱말이 나오면 여기서 뜻만 확인하고 넘어가세요.

화면을 꾸미는 말

메뉴와 화면 배치

기능과 사이트

블록의 행·칸·콘텐츠, 메뉴의 풀·트리는 앞 장들에서 실제 만드는 법과 함께 자세히 다룹니다. 뜻만 잡고 해당 장으로 넘어가세요.