제가 생각이 짧았습니다. 저야 제가 만들었으닌까
대충 알지만, 사용자 분들은 전혀 모르는 기능을 테스트 해달라고 한게 정말 생각이 짧았습니다.
일단, AI로 메뉴얼을 만들었습니다.
참고하시면 될 것 같습니다.
나중에 별도로 메뉴얼을 만들도록 하겠습니다.
Style Booster 사용자 메뉴얼
new-basic 테마 · Style Booster v1.21.6관리자용 · 화면을 보면서 사이트 디자인을 직접 고치는 도구


























Style Booster 사용자 메뉴얼
new-basic 테마 · Style Booster v1.21.6 관리자용 · 화면을 보면서 사이트 디자인을 직접 고치는 도구
이 메뉴얼에 대하여
이 문서는 Style Booster의 모든 기능을 화면에서 직접 쓰는 방법을 설명합니다. 코드나 개발 이야기는 없고, "어디를 누르면 무엇이 되는지"만 다룹니다.
- 처음 쓰신다면 1장 → 2장 → 3장을 순서대로 읽으세요. 10분이면 기본 사용법을 알 수 있습니다.
- 특정 기능만 찾으신다면 목차에서 바로 가세요.
- 따라 하면서 익히시려면 **11장 "자주 하는 작업 따라하기"**부터 보세요.
표기 약속
- 「적용」, 「되돌리기」처럼 「 」 안은 화면에 보이는 버튼 이름입니다.
Ctrl,Shift,Esc는 키보드 키입니다. Mac에서는Ctrl대신Command키를 쓰셔도 됩니다.- 참고는 알아 두면 좋은 내용, 주의는 실수하기 쉬운 내용입니다.
목차
- Style Booster란?
- 화면 구성과 기본 사용법
- 화면 크기로 보기 (PC · 태블릿 · 모바일)
- 「전체 설정」 탭 — 스타일 · 색상 · 여백
- 「선택 영역」 탭 ① — 요소를 골라 모양 바꾸기
- 「선택 영역」 탭 ② — 박스 만들기
- 「선택 영역」 탭 ③ — 저장된 영역(박스 보관함)과 JSON 주고받기
- 「최신글」 탭 — 최신글 스킨 만들기
- 「프리셋」 탭 — 설정 통째로 저장하기
- 저장 · 되돌리기 · 초기화
- 자주 하는 작업 따라하기
- 한도와 제한 한눈에 보기
- 문제가 생겼을 때 (자주 묻는 질문)
- 부록 — 단축키 · 용어
1. Style Booster란?
Style Booster는 사이트 화면을 보면서 디자인을 바로 고치는 관리자 전용 도구입니다. 코드를 몰라도 다음을 할 수 있습니다.
| 하고 싶은 일 | 쓰는 곳 |
|---|---|
| 사이트 전체의 분위기(박스 모양)를 바꾸고 싶다 | 「전체 설정」 탭 → 스타일 |
| 배경 · 메뉴 · 푸터 · 포인트 색을 바꾸고 싶다 | 「전체 설정」 탭 → 색상 |
| 본문 · 사이드 · 카드의 안쪽 여백을 조절하고 싶다 | 「전체 설정」 탭 → 안쪽 여백 |
| 화면의 특정 글자 · 박스 · 버튼의 색, 크기, 위치, 여백을 바꾸고 싶다 | 「선택 영역」 탭 |
| 원하는 자리에 제목 · 글 · 이미지 · 버튼 · 카드 · 슬라이드 · 탭 · 아코디언을 직접 만들어 넣고 싶다 | 「선택 영역」 탭 → 박스 추가 |
| 게시판 최신글을 내가 디자인한 모양(목록형 · 갤러리형 · 슬라이드형 등)으로 보여 주고 싶다 | 「최신글」 탭 |
| 만든 설정을 이름 붙여 보관하고, 다른 사이트에도 옮기고 싶다 | 「프리셋」 탭 |
| 만든 박스를 파일로 내보내고, 다른 페이지 · 다른 사이트에 다시 놓고 싶다 | 「선택 영역」 탭 → 저장된 영역 |
꼭 알아 두세요
- 관리자에게만 보입니다. 방문자 화면에는 패널도, 편집 표시도 나타나지 않습니다.
- 고르는 즉시 화면에 미리 보입니다. 하지만 「적용」을 눌러야 실제로 저장되어 방문자에게 보입니다. (저장 규칙은 10장에서 자세히 설명합니다.)
- 저장은 이 테마를 쓰는 모든 도메인에 적용됩니다. 같은 테마를 여러 주소로 운영하는 경우 한 번에 모두 바뀝니다.
- PC · 태블릿 · 모바일 값이 따로 저장됩니다. 화면 크기 버튼으로 고른 크기에 대한 값만 바뀝니다. (3장)
2. 화면 구성과 기본 사용법
2-1. 패널 열고 닫기
- 관리자로 로그인한 상태에서 사이트 화면을 엽니다.
- 화면 오른쪽 가장자리 중간에 있는 「Booster」 탭(팔레트 모양 아이콘)을 누릅니다.
- 오른쪽에서 폭 300px 정도의 패널이 열립니다.
- 닫으려면 패널 오른쪽 위의 ✕ 를 누르거나, 「Booster」 탭을 다시 누릅니다.
참고 패널을 닫아도 아직 저장하지 않은 변경은 화면에 그대로 미리 보입니다. 저장하지 않고 페이지를 떠나면 사라지니, 마음에 들면 꼭 「적용」을 누르세요.
2-2. 패널의 구성
위에서 아래로 다음과 같이 되어 있습니다.
┌─────────────────────────────┐
│ Style Booster 관리자 전용 ✕│ ← 제목줄
├─────────────────────────────┤
│ [ PC ] [ 태블릿 ] [ 모바일 ] │ ← 화면 크기 버튼
├─────────────────────────────┤
│ 전체 설정│선택 영역│최신글│프리셋│ ← 탭 4개
├─────────────────────────────┤
│ │
│ (선택한 탭의 내용) │ ← 위아래로 스크롤
│ │
├─────────────────────────────┤
│ [ 되돌리기 ] [ 적용 ] │ ← 항상 아래에 고정
└─────────────────────────────┘| 영역 | 설명 |
|---|---|
| 화면 크기 버튼 | PC / 태블릿 / 모바일. 지금 어느 화면 크기를 편집하는지 정합니다. |
| 탭 4개 | 「전체 설정」 「선택 영역」 「최신글」 「프리셋」. 하는 일에 따라 고릅니다. |
| 「되돌리기」 | 마지막으로 저장한 상태로 되돌립니다. (저장 전 변경을 모두 버림) |
| 「적용」 | 지금 상태를 저장합니다. 바꾼 것이 없으면 눌러지지 않습니다(회색). |
2-3. 각 설정 줄의 공통 규칙
패널의 대부분의 설정은 같은 모양으로 되어 있습니다.
- 라벨 · 입력칸 · ↺(기본값으로) 가 한 줄입니다.
- 값을 비워 두면 "기본값" 입니다. 바꾸지 않은 항목은 원래 디자인 그대로입니다.
- 값을 정하면 그 줄이 강조 표시(색이 들어옴)되어, "내가 바꾼 항목"을 한눈에 알 수 있습니다.
- ↺ 버튼을 누르면 그 항목만 기본값으로 돌아갑니다.
- 숫자 칸은 허용 범위가 있습니다. 범위를 넘으면 자동으로 범위 안으로 맞춰집니다. (범위표는 12장)
2-4. 가장 기본적인 작업 순서
- 「Booster」 탭을 눌러 패널을 연다.
- 화면 크기를 고른다. (보통 PC부터)
- 탭에서 바꾸고 싶은 것을 고르고, 값을 정한다. → 화면에 바로 반영됩니다.
- 마음에 들면 「적용」, 아니면 「되돌리기」.
- 모바일에서도 확인한다. (3장)
3. 화면 크기로 보기 (PC · 태블릿 · 모바일)
패널 위쪽의 PC / 태블릿 / 모바일 버튼은 두 가지 일을 합니다.
- 미리보기: 선택한 크기의 실제 화면으로 사이트를 보여 줍니다.
- 편집 대상 지정: 이때 바꾸는 값은 그 화면 크기에서만 적용됩니다.
3-1. 세 가지 화면
| 버튼 | 미리보기 크기 | 이 값이 적용되는 방문자 화면 |
|---|---|---|
| PC | 지금 보고 있는 화면 그대로 | 모든 화면 (기본값) |
| 태블릿 | 폭 820px × 높이 1180px | 폭 1024px 이하 |
| 모바일 | 폭 390px × 높이 844px | 폭 768px 이하 |
- PC 값은 기본값입니다. 태블릿 · 모바일에서 따로 정하지 않으면 PC 값이 그대로 따라갑니다.
- 태블릿 값은 1024px 이하에서, 모바일 값은 768px 이하에서 PC 값을 덮어씁니다.
- 모바일 값은 태블릿 값 위에 한 번 더 덮어씁니다. (모바일이 가장 우선)
3-2. 사용 방법
- 태블릿 또는 모바일 버튼을 누르면, 화면 가운데에 해당 크기의 작은 화면이 열립니다. 화면이 작은 모니터라면 자동으로 축소되어 맞춰지고, 위쪽에
모바일 · 390px · 85% 축소처럼 크기와 축소 비율이 표시됩니다. - 열린 작은 화면 안의 사이트는 실제 방문자가 보는 것과 같은 방식으로 동작합니다. 스크롤도 됩니다.
- 그 상태에서 「선택 영역」 탭으로 요소를 고르거나 값을 바꾸면, 그 화면 크기의 값으로 저장됩니다.
- PC 버튼을 누르면 미리보기가 닫히고 원래 화면으로 돌아옵니다.
- 미리보기 바깥의 어두운 부분을 누르거나
Esc키를 눌러도 PC로 돌아옵니다.
참고 패널에서 고른 스타일 · 색 · 여백은 열려 있는 작은 화면에도 곧바로 같이 반영됩니다. 모바일 화면을 열어 둔 채 색을 바꿔 보세요.
주의 화면 크기를 바꾸면 선택하고 있던 요소는 풀립니다. (같은 요소를 새 화면에서 다시 찾아 주기는 하지만, 못 찾으면 다시 눌러 고르세요.)
3-3. 이렇게 쓰면 편합니다
- PC에서 먼저 전체 디자인을 끝냅니다.
- 모바일로 바꿔서 어긋난 곳만 고칩니다. (예: 큰 글자 줄이기, 여백 줄이기, 위치 옮기기)
- 태블릿은 꼭 필요한 곳만 손봅니다. 대부분 PC와 모바일 값으로 충분합니다.
4. 「전체 설정」 탭 — 스타일 · 색상 · 여백
사이트 전체의 기본 분위기를 정하는 탭입니다. 위에서부터 스타일 → 색상 → 안쪽 여백 → 초기화 순서입니다. 패널 맨 위에는 "선택하면 바로 미리 보입니다. 「적용」을 누르면 이 테마를 쓰는 모든 도메인에 저장됩니다."라는 안내가 있습니다.
4-1. 스타일 — 박스와 배경의 기본 디자인
사이트 곳곳의 박스(게시판 목록, 위젯, 카드 등)와 배경이 어떤 느낌으로 보일지 세 가지 중 하나를 고릅니다.
| 스타일 | 설명 | 이런 분께 |
|---|---|---|
| 플랫 라인 | 얇은 선과 각진 박스. 기본 디자인입니다. | 깔끔하고 단정한 느낌 |
| 채움 카드 | 배경을 살짝 깔고, 박스는 흰 카드로 구분합니다. | 박스가 또렷하게 떠 보이길 원할 때 |
| 소프트 라운드 | 둥근 모서리와 부드러운 면 구분. | 친근하고 부드러운 느낌 |
사용 방법
- 「스타일」 카드 세 개 중 하나를 누릅니다.
- 누르는 즉시 화면 전체가 바뀝니다. 지금 고른 카드에는 ✓ 표시가 붙습니다.
- 아래쪽 카드 그림(막대 3개)은 박스가 어떻게 보일지 보여 주는 작은 견본입니다.
- 마음에 들면 「적용」.
참고 스타일을 바꾸면 아래 색상 · 여백의 "기본값"도 그 스타일의 기본값으로 바뀝니다. 내가 따로 정한 색 · 여백은 스타일을 바꿔도 그대로 유지됩니다.
4-2. 색상 — 라이트 모드 기준
사이트의 주요 색을 9가지로 나누어 바꿉니다. 이 설정은 라이트 모드(밝은 화면) 전용이며, 비워 두면 스타일의 기본색이 쓰입니다. 다크 모드는 사이트의 다크 모드 기능이 따로 처리합니다.
색상 항목 설명
| 묶음 | 항목 | 어디에 쓰이나 |
|---|---|---|
| 페이지 · 박스 | 배경 | 사이트 전체 바탕색 |
| 박스 배경 | 게시판 · 위젯 · 카드 등 박스 안쪽 색 | |
| 박스 선 | 박스의 테두리 · 구분선 색 | |
| 헤더(메뉴) | 메뉴(헤더) 배경 | 맨 위 메뉴 영역의 바탕색 |
| 메뉴(헤더) 글자 | 메뉴 글자색 | |
| 푸터 | 푸터 배경 | 맨 아래 영역의 바탕색 |
| 푸터 글자 | 푸터 글자색 | |
| 포인트 | 포인트색 (Lv·활성·강조 버튼) | 레벨 배지, 선택된 메뉴, 강조 버튼 등 눈에 띄는 곳 |
| 배지색 (N·알림 개수) | 새 글 N 표시, 알림 개수 동그라미 |
사용 방법
- 바꾸려는 항목 줄의 색 칸(작은 네모)을 누릅니다.
- 브라우저의 색 고르기 창이 열리면 원하는 색을 고릅니다.
- 고르는 즉시 화면에 반영됩니다. 값을 정한 줄은 강조 표시가 됩니다.
- 기본색으로 돌리려면 줄 오른쪽의 ↺ 를 누릅니다.
자동으로 맞춰지는 것
- 글자색을 따로 안 정해도 읽기 쉽게 맞춰집니다. 예를 들어 메뉴 배경을 어두운 색으로 바꾸면, 메뉴 글자는 자동으로 밝은 색이 됩니다. (메뉴 글자색을 직접 정하면 그 색이 우선합니다.)
- 포인트색 · 배지색 위의 글자는 바탕이 어두우면 흰색, 밝으면 짙은 색으로 자동 선택됩니다.
- 배경 · 박스 배경을 어둡게 하면 그 위의 글자도 함께 밝게 바뀝니다.
주의 색상은 라이트 모드 기준입니다. 어두운 배경색을 지정하면 라이트 모드에서도 어두운 화면으로 보이지만, 방문자가 다크 모드를 켜면 다크 모드 규칙이 따로 적용됩니다. 중요한 색은 다크 모드를 켠 상태에서도 한 번 확인하세요.
4-3. 안쪽 여백 — 본문 · 사이드 · 위젯/카드
박스 안쪽의 여백(글자와 테두리 사이의 거리)을 슬라이더로 조절합니다. 단위는 px이고 0 ~ 64px를 2px 단위로 움직입니다. 값을 정하지 않으면 스타일 기본값이며, 슬라이더 오른쪽에 「기본」 이라고 표시됩니다.
| 묶음 | 항목 | 설명 |
|---|---|---|
| PC · 태블릿 | 본문 안쪽 여백 | 본문(글 목록 · 글 보기 등) 박스의 안쪽 여백 |
| 사이드 안쪽 여백 | 오른쪽(또는 왼쪽) 사이드 영역 박스의 안쪽 여백 | |
| 위젯 · 카드 안쪽 여백 | 위젯, 카드 모양 박스의 안쪽 여백 | |
| 모바일 (768px 이하) | 본문 / 사이드 / 위젯 · 카드 | 모바일에서만 다르게 하고 싶을 때. 비우면 위의 PC 값을 그대로 따릅니다. |
사용 방법
- 조절할 줄의 슬라이더를 좌우로 움직입니다. 옆의 숫자가 값을 보여 줍니다.
- 처음 상태(기본)로 돌리려면 ↺ 를 누릅니다.
- 모바일에서 더 좁은 여백이 필요하면 아래 「모바일」 묶음의 슬라이더를 따로 움직입니다.
참고 모바일은 화면이 좁아서 PC와 같은 여백이면 글이 답답해 보이는 경우가 많습니다. 모바일 묶음을 PC보다 작게 주면 훨씬 시원해집니다.
4-4. 초기화 — 모든 설정을 기본값으로
「전체 설정」 탭 맨 아래의 「전체 초기화」 버튼은 지금까지 정한 모든 설정을 지웁니다.
무엇이 지워지나
- 스타일 → 「플랫 라인」으로
- 색상 · 안쪽 여백 → 전부 기본값
- 「선택 영역」 탭에서 정한 모양 설정 → 전부 삭제
- 내가 만들어 놓은 박스 → 전부 삭제
지워지지 않는 것
- 「프리셋」 탭에 저장해 둔 프리셋
- 「최신글」 탭에서 저장한 최신글 스킨
- 「저장된 영역」에 보관한 박스
사용 방법
- 「전체 초기화」 를 누르면 버튼 글자가 「한 번 더 누르면 초기화」 로 바뀝니다. (3초 안에 다시 누르지 않으면 원래대로 돌아갑니다 — 실수 방지)
- 한 번 더 누르면 초기화가 화면에 반영됩니다.
- 아직 저장된 것은 아닙니다. 「적용」을 눌러야 실제로 저장되고, 마음이 바뀌면 「되돌리기」로 취소할 수 있습니다.
5. 「선택 영역」 탭 — 요소를 골라 모양 바꾸기
화면에 보이는 글자 · 박스 · 버튼 · 메뉴 등을 직접 눌러서 골라 그 모양을 바꿉니다. 「전체 설정」이 "사이트 전체"를 다룬다면, 「선택 영역」은 "이 부분만"을 다룹니다.
탭 안에는 위에서부터 다음 카드가 있습니다.
- 요소 선택 — 화면에서 요소를 고르는 방법
- 박스 추가 — 새 박스 만들기 (6장)
- 선택한 요소 — 어디까지, 어느 페이지에 적용할지 (요소를 고르면 나타남)
- (박스를 골랐다면) 박스 편집 카드들 (6장)
- 여백 · 위치 이동 · 색 · 테두리 · 크기 · 글자
- 적용된 영역 — 지금까지 만든 박스 · 설정 목록
- 저장된 영역 — 박스 보관함 (7장)
5-1. 요소 선택하기
선택 모드 켜고 끄기
「요소 선택」 카드의 큰 버튼 「화면에서 요소 선택」 이 켜져 있어야(강조 색) 화면의 요소를 고를 수 있습니다. 「선택 영역」 탭을 열면 기본으로 켜집니다.
- 켜짐: 마우스를 화면 위에 올리면 파란 점선 테두리가 따라다니며, 눌러서 선택합니다. 이때 링크나 버튼을 눌러도 이동하거나 실행되지 않습니다. (편집 중이라 선택만 됩니다.)
- 꺼짐: 사이트가 평소처럼 동작합니다. 링크를 눌러 다른 페이지로 이동할 때 사용하세요.
버튼 옆의 눈 모양 버튼은 「적용된 모습 보기」 입니다. 누르면 파란/주황 선택 표시와 편집 표시를 숨겨서, 방문자에게 보일 진짜 모습을 확인할 수 있습니다. 다시 누르면 표시가 돌아옵니다.
하나 고르기
- 화면에서 바꾸고 싶은 글자나 박스 위에 마우스를 올립니다. → 파란 점선 테두리와 함께
요소 이름 가로×세로라벨이 보입니다. - 그 자리를 클릭합니다. → 주황색 실선 테두리로 바뀌어 "선택됨"을 보여 줍니다.
- 패널에 「선택한 요소」 카드와 설정 카드들이 나타납니다.
여러 개 한꺼번에 고르기
같은 값을 여러 요소에 한 번에 적용하고 싶을 때 씁니다.
Ctrl(또는Shift) + 클릭: 이미 고른 요소에 추가합니다. 이미 고른 요소를 다시Ctrl+클릭하면 선택이 해제됩니다.- 빈 곳을 끌기: 요소가 없는 빈 곳에서 마우스를 누른 채 끌면 주황색 점선 사각형이 그려지고, 놓는 순간 사각형 안에 들어온 요소가 한꺼번에 선택됩니다. 여기에
Ctrl을 함께 누르면 기존 선택에 더해집니다. - 여러 개를 골랐을 때는 라벨에
[3개 함께 선택]처럼 개수가 표시되고, 이때 바꾼 값은 고른 요소 모두에 적용됩니다.
참고 여러 개를 골랐을 때는 「상위 / 하위」 버튼이 꺼집니다. 하나만 골라서 쓰는 기능이기 때문입니다.
5-2. 「선택한 요소」 카드 — 어디까지 바꿀까 정하기
요소를 고르면 나타납니다. 맨 위에 지금 고른 요소의 이름과 「편집 중: PC / 태블릿 · 1024px 이하 / 모바일 · 768px 이하」 가 보입니다. 값을 바꾸기 전에 아래 세 가지를 확인하세요.
① 요소 범위 — 상위 / 하위
클릭한 곳이 너무 안쪽(작은 글자 조각) 이거나 너무 바깥일 수 있습니다. 이때 범위를 옮깁니다.
- 「상위」: 한 단계 바깥(부모) 요소로 올라갑니다. (더 큰 박스)
- 「하위」: 한 단계 안쪽(자식) 요소로 내려갑니다. (더 작은 요소)
- 화면의 주황 테두리 크기가 바뀌는 것을 보면서 원하는 범위에 맞춥니다.
② 같은 종류 모두 / 이 요소만
| 선택 | 의미 | 예 |
|---|---|---|
| 같은 종류 모두 | 같은 종류로 만들어진 요소를 전부 바꿉니다. | "모든 게시판 제목 글자" |
| 이 요소만 | 내가 클릭한 딱 그 요소 하나만 바꿉니다. | "이 메뉴의 이 버튼만" |
③ 적용 페이지 — 여러 개 함께 선택 가능
값이 어느 페이지에서 보일지 정합니다. 칩(버튼) 5개를 켜고 끌 수 있고, 여러 개를 함께 켤 수 있습니다.
| 칩 | 의미 |
|---|---|
| 전체 | 모든 페이지에 적용 (아무것도 안 켠 상태가 "전체") |
| 메인 | 메인(홈) 페이지에만 |
| 서브 | 메인이 아닌 모든 서브 페이지에만 |
| 이 페이지 | 지금 보고 있는 이 주소 한 곳에만 |
| 모바일 | 화면 크기가 모바일(768px 이하) 일 때의 값. 위의 PC·태블릿·모바일 버튼과 같은 것입니다. |
조합 예시
- 「서브」 + 「이 페이지」 → 서브 페이지 전체, 그리고 지금 보는 페이지에 같은 값을 적용
- 「이 페이지」 + 「모바일」 → 이 페이지의 모바일 화면에서만 적용 (PC는 그대로)
- 「메인」 + 「서브」 → 둘 다 켜면 의미가 "전체"와 같아서 자동으로 「전체」로 합쳐집니다.
- 「이 페이지」를 눌러 끄기 → 이 페이지 전용 설정만 빠집니다.
패널의 한 줄 안내(예: 지금 보는 화면: 서브 · 서브 + 페이지 /free에 적용 · 모바일(768px 이하) 값)가 지금 값이 어디에 적용되는지를 항상 알려 줍니다.
중요 값을 바꾸면 선택한 범위 모두에 같은 값이 저장됩니다. 한 범위를 끄면 그 범위의 설정만 지워지고 나머지는 남습니다.
참고 — 다른 페이지를 함께 고르려면 「이 페이지」는 지금 보고 있는 페이지만 추가합니다. 다른 페이지를 함께 넣으려면 그 페이지로 이동해서 「이 페이지」를 한 번 더 켜세요. 이전에 고른 페이지는 새로고침 전까지 유지됩니다.
5-3. 「여백」 카드
| 항목 | 의미 | 범위 |
|---|---|---|
| 안쪽 여백 (위 / 오른쪽 / 아래 / 왼쪽) | 요소 안쪽, 글자와 테두리 사이의 거리 | 0 ~ 120px |
| 바깥 여백 (위 / 오른쪽 / 아래 / 왼쪽) | 요소 바깥, 이웃 요소와의 거리 | −60 ~ 200px (음수면 이웃 쪽으로 당겨짐) |
숫자 칸 4개(위·오른쪽·아래·왼쪽)에 값을 넣으면 즉시 반영됩니다. 한 방향만 정해도 됩니다.
5-4. 「위치 이동」 카드 — 요소를 원하는 곳으로
요소를 눈에 보이는 위치만 옮깁니다. 주변 요소의 자리는 그대로이고, 옮긴 요소만 이동합니다.
세 가지 방법이 있습니다.
- 화면에서 직접 끌기: 「화면에서 직접 끌기」 를 켠 뒤, 선택한 요소를 화면에서 마우스로 끌어 옮깁니다. (켜 있는 동안은 요소를 끌어도 선택이 바뀌지 않습니다.)
- 방향 패드와 키보드: 패널의 십자 패드에서 위 · 아래 · 왼쪽 · 오른쪽 버튼을 누르거나, 가운데 손잡이를 끌어 옮깁니다. 요소를 선택해 둔 상태에서 키보드 방향키를 누르면 1px씩,
Shift+방향키는 10px씩 움직입니다. (입력칸에 글자를 쓰고 있을 때는 방향키가 입력칸에서 동작합니다.) - 숫자로 입력: 가로 px / 세로 px 칸에 값을 넣습니다. 범위는 −800 ~ 800px. 양수는 오른쪽/아래, 음수는 왼쪽/위입니다.
「원래 자리로」 를 누르면 이동값이 0이 되어 제자리로 돌아갑니다.
참고 위치 이동도 화면 크기별로 따로 저장됩니다. PC에서 옮긴 값이 모바일에서 어색하면, 모바일 화면에서 따로 조정하세요.
5-5. 「색 · 테두리」 카드
| 항목 | 설명 | 범위 |
|---|---|---|
| 배경색 | 요소의 바탕색 | 색 고르기 |
| 글자색 | 요소 안 글자 색 | 색 고르기 |
| 테두리 색 | 테두리 선 색 | 색 고르기 |
| 테두리 굵기 | 테두리 두께 (0이면 테두리 없음) | 0 ~ 10px |
| 모서리 둥글기 | 모서리를 얼마나 둥글게 할지 | 0 ~ 80px |
- 테두리 굵기를 1 이상으로 주면 실선 테두리가 자동으로 생깁니다. 테두리 색을 따로 정하지 않으면 그 요소의 기존 색(없으면 글자색)이 쓰이니, 또렷하게 보이려면 테두리 색도 함께 정하세요.
- 원형(동그라미)에 가깝게 만들려면 정사각형 요소에 큰 값(예: 80)을 주세요.
5-6. 「크기 · 글자」 카드
| 구분 | 항목 | 설명 | 범위 |
|---|---|---|---|
| 크기 | 너비 | 요소 가로 크기 | 0 ~ 1600px |
| 최대 너비 | 이보다 커지지 않게 제한 | 0 ~ 1600px | |
| 최소 높이 | 이보다 작아지지 않게 | 0 ~ 800px | |
| 안쪽 간격(gap) | 안에 나열된 요소들 사이의 간격 | 0 ~ 80px | |
| 글자 | 글자 크기 | 글자 크기 | 8 ~ 80px |
| 자간 | 글자와 글자 사이 | −10 ~ 40px | |
| 행간 (%) | 줄과 줄 사이. 100 = 글자 크기와 같은 줄 높이 | 80 ~ 300% | |
| 글자 정렬 | 기본 / 왼쪽 / 가운데 / 오른쪽 | — |
5-7. 「이 영역 설정 지우기」
선택한 요소에 정한 값을 전부 한꺼번에 지우고 원래 디자인으로 돌립니다. 줄마다 있는 ↺ 는 "그 항목만" 지우고, 이 버튼은 "이 요소의 모든 설정"을 지웁니다.
5-8. 「적용된 영역」 — 지금까지 한 일 목록
「선택 영역」 탭 아래쪽에 지금까지 만든 것이 목록으로 나옵니다. 눌러서 선택하고 바로 고칠 수 있습니다.
- 박스 묶음:
b1 · 부품 박스처럼 박스 번호와 종류, 그리고 어디에 보이는지(/free,모든 페이지,홈,게시판 전체)가 표시됩니다.- 줄을 누르면 화면에서 그 박스로 이동해 선택합니다.
- 책갈피 버튼(책갈피) 버튼: 그 박스를 「저장된 영역」 에 담습니다. (7장)
- 휴지통 버튼(휴지통) 버튼: 박스를 삭제합니다. 안에 든 박스도 함께 삭제됩니다.
- 영역 설정 묶음: 바꾼 요소들이
[메인],[서브],[/경로]같은 범위 표시와 함께 나열됩니다.- 줄을 누르면 그 요소를 화면에서 찾아 선택합니다.
- 휴지통 버튼으로 그 설정을 지웁니다.
- 아직 아무 설정도 없으면 "설정한 영역이 아직 없습니다." 라고 표시됩니다.
6. 「선택 영역」 탭 — 박스 만들기
박스는 내가 원하는 자리에 직접 만들어 넣는 새 영역입니다. 제목 · 글 · 이미지 · 버튼 같은 부품을 쌓아서 안내문, 배너, 카드 목록, 슬라이드, 탭, FAQ 같은 것을 코드 없이 만들 수 있습니다.
- 박스는 페이지의 어느 요소의 앞 · 뒤 · 안(맨앞/맨끝) 에 끼워 넣습니다.
- 박스는 최대 30개, 한 박스에 들어가는 부품은 최대 30개입니다.
- 박스 안에 또 다른 박스를 넣을 수도 있습니다.
- 박스의 이름은 b1, b2, b3… 처럼 번호가 자동으로 붙습니다.
6-1. 박스 추가하기
「선택 영역」 탭의 「박스 추가」 카드를 씁니다. 두 가지 방법이 있습니다.
방법 A — 끌어서 놓기 (가장 쉬움)
- 「박스 추가」 카드의 「박스를 끌어서 놓기」 를 마우스로 누른 채 화면 쪽으로 끕니다.
- 마우스 옆에
박스라고 적힌 작은 알약이 따라다닙니다. - 화면 위를 지나가면 파란 선이 나타나 "여기에 놓입니다" 를 보여 줍니다. 선의 위치에 따라 앞 · 뒤 · 안 맨앞 · 안 맨끝 중 한 곳에 놓입니다.
- 원하는 자리에서 마우스를 놓으면 그 자리에 빈 박스가 생깁니다.
- 화면 위·아래 가장자리 근처에서 끌면 자동으로 스크롤됩니다. (긴 페이지에서 편리합니다)
- 놓기 전에
Esc를 누르면 취소됩니다. - 박스 위에 놓으면 그 박스 안에 들어갑니다. (박스 안의 박스)
- 태블릿 · 모바일 미리보기 화면 위에도 놓을 수 있습니다.
방법 B — 선택한 요소 기준으로 버튼 누르기
- 먼저 화면에서 기준이 될 요소를 클릭해 선택합니다.
- 「박스 추가」 카드의 「버튼으로 넣기」 에서 위치를 고릅니다.
| 버튼 | 박스가 놓이는 곳 |
|---|---|
| 앞에 | 선택한 요소 바로 앞(위) |
| 뒤에 | 선택한 요소 바로 뒤(아래) |
| 안 맨앞 | 선택한 요소 안쪽의 맨 처음 |
| 안 맨끝 | 선택한 요소 안쪽의 맨 마지막 |
안내 문구가 나오는 경우
body 의 앞·뒤에는 넣을 수 없습니다. 안 맨앞/맨끝을 쓰세요.→ 페이지 최상위 요소를 골랐을 때입니다. 「안 맨앞」「안 맨끝」을 쓰세요.이 요소는 위치를 정할 수 없습니다. 다른 요소를 선택하세요.→ 다른 요소를 골라 다시 하세요.박스는 최대 30개까지입니다.→ 안 쓰는 박스를 지우세요.
새 박스는 빈 박스로 시작하고, 자동으로 선택됩니다. 이제 패널에서 부품을 채우면 됩니다.
6-2. 박스 편집 화면의 구성
박스를 선택하면 「선택 영역」 탭에 박스 전용 카드가 나타납니다.
| 카드 | 하는 일 |
|---|---|
| 부품 추가 | 부품 11종 중 하나를 눌러 박스에 넣습니다. |
| 구성 | 지금 들어 있는 부품 목록. 눌러서 선택, 순서 바꾸기, 복제, 삭제. |
| ○○ 속성 | 선택한 부품의 세부 설정 (글자, 주소, 모양 등). |
| 표시 · 위치 | 어느 페이지에 보일지, 박스 삭제. |
그 아래 여백 · 위치 이동 · 색 · 테두리 · 크기 · 글자 카드로 박스 자체의 모양(배경색, 테두리, 모서리, 여백 등)도 꾸밀 수 있습니다. 사용법은 5장과 같습니다.
6-3. 부품 넣고 정리하기
부품 넣기
- 「부품 추가」 카드에서 원하는 부품 버튼을 누릅니다.
- 이미 부품을 선택해 두었다면 그 부품 바로 아래에, 선택한 부품이 없으면 맨 아래에 들어갑니다. (카드 안에 어디에 들어갈지 안내 문구가 나옵니다)
「구성」 목록에서 정리하기
| 동작 | 방법 |
|---|---|
| 부품 선택 | 목록의 부품 줄을 누릅니다. 화면의 해당 부품이 선택되고, 아래에 「○○ 속성」 카드가 나타납니다. 화면에서 부품을 직접 눌러도 됩니다. |
| 순서 바꾸기 | 줄 오른쪽의 ↑, ↓ 버튼 |
| 복제 | 복제 아이콘 — 같은 설정의 부품이 바로 아래에 하나 더 생깁니다. |
| 삭제 | ✕ 버튼 |
참고 부품은 박스 안에서 위에서 아래로 차례로 쌓입니다. 가로로 나란히 놓고 싶다면 「카드 열」 부품(2~4열)을 쓰세요.
6-4. 부품 11종 상세 설명
부품을 선택하면 「○○ 속성」 카드에서 아래 항목을 설정합니다. 모든 항목은 바꾸는 즉시 화면에 반영됩니다.
① 제목
| 항목 | 설명 |
|---|---|
| 글자 | 제목 문구 |
| 크기 | 크게(큰 제목) / 보통 / 작게 |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 |
처음에는 제목이라는 글자가 들어갑니다. 글자색 · 정확한 크기는 아래 「색 · 테두리」「크기 · 글자」 카드로 고칠 수 있습니다.
② 글
| 항목 | 설명 |
|---|---|
| 내용 | 본문. 5줄 높이의 입력칸입니다. 줄을 바꾸면 문단이 나뉩니다. |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 |
③ 이미지
| 항목 | 설명 |
|---|---|
| 이미지 주소 | https://… 또는 /경로 형식. 바로 아래의 「그림 올리기」 버튼으로 내 컴퓨터의 그림을 올릴 수도 있습니다. (6-6) |
| 설명 (대체 글자) | 그림이 안 보일 때 · 화면 낭독기가 읽는 글. 접근성과 검색에 좋으니 적어 두세요. |
| 누르면 이동할 주소 | 그림을 눌렀을 때 이동할 주소. 비우면 이동하지 않습니다. |
| 모서리 | 각지게 / 조금 둥글게 / 둥글게 / 원형 |
④ 버튼
| 항목 | 설명 |
|---|---|
| 글자 | 버튼에 적힐 문구 (기본 버튼) |
| 이동할 주소 | 누르면 이동할 주소 |
| 모양 | 채움(색이 꽉 찬 버튼) / 테두리(선만 있는 버튼) |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 |
⑤ 구분선
가로 줄 하나입니다. 별도 속성은 없고, 굵기 · 색은 「선택 영역」의 「색 · 테두리」 카드로 정합니다.
⑥ 여백
부품 사이를 띄우는 빈 공간입니다.
| 항목 | 설명 |
|---|---|
| 높이 (px) | 4 ~ 300px (처음 24px) |
⑦ HTML
직접 HTML을 쓰는 부품입니다. (높은 자유도, 신중하게)
| 항목 | 설명 |
|---|---|
| HTML | 8줄 높이의 입력칸 |
주의 보안을 위해
<script>,<iframe>,on…속성(onclick 등)은 저장할 때 자동으로 지워집니다. 일반적인 글 · 이미지 · 표 · 링크 정도만 안전하게 쓸 수 있습니다.
⑧ 카드 열
이미지 + 제목 + 내용으로 된 카드를 가로로 나란히 놓습니다. 화면 폭이 720px 이하(모바일)가 되면 자동으로 1열로 쌓입니다.
| 항목 | 설명 |
|---|---|
| 열 수 | 2열 / 3열 / 4열 |
각 카드(항목) 마다 다음을 적습니다.
| 항목 | 설명 |
|---|---|
| 이미지 주소 | 카드 위쪽 그림 (비워도 됨) |
| 제목 | 카드 제목 |
| 내용 | 카드 설명 |
| 이동할 주소 | 주소를 넣으면 카드 전체가 링크가 됩니다. |
- 처음에는 카드 3장이 들어 있습니다. 「카드 추가」 로 늘립니다. 최대 12장.
- 각 카드 머리줄의 ↑ ↓ 로 순서를 바꾸고, ✕ 로 삭제합니다.
⑨ 슬라이드
이미지 · 제목 · 설명이 담긴 가로로 넘기는 슬라이드입니다.
| 항목 | 설명 |
|---|---|
| 높이 (px) | 슬라이드 높이 120 ~ 800px (처음 320px) |
| 자동 넘김 (초 · 0 이면 끔) | 0 ~ 30초. 처음 4초. |
| 좌우 화살표 | 체크하면 양옆에 ‹ › 버튼이 나옵니다. |
| 아래 점 표시 | 체크하면 아래에 현재 위치 점이 나옵니다. |
각 슬라이드(항목) 에는 이미지 주소 / 제목 / 설명 / 이동할 주소를 적습니다. 처음엔 2장이며 「슬라이드 추가」 로 늘립니다. 최대 12장.
- 자동 넘김은 방문자 화면에서만 동작합니다. 편집 중이나 미리보기에서는 멈춰 있습니다.
- 방문자가 슬라이드 위에 마우스를 올리면 잠시 멈춥니다.
- 모바일에서는 손가락으로 밀어서 넘길 수 있습니다.
⑩ 탭
눌러서 내용을 바꿔 보는 탭 메뉴입니다.
| 항목 | 설명 |
|---|---|
| (부품 속성 없음) | 항목 추가/정렬만 합니다. |
각 탭(항목) 에는 탭 제목 / 내용을 적습니다. 처음엔 2개, 「탭 추가」 로 늘립니다. 최대 8개. 방문자가 탭 제목을 누르면 그 내용이 보입니다.
⑪ 아코디언
질문을 누르면 답이 펼쳐지는 FAQ 형식입니다.
| 항목 | 설명 |
|---|---|
| 처음 열어 둘 항목 번호 (0 = 모두 닫음) | 0 ~ 12. 처음에는 1(첫째 항목이 열림). |
각 항목에는 제목 / 내용을 적습니다. 처음엔 2개, 「항목 추가」 로 늘립니다. 최대 12개.
6-5. 화면에서 글자 바로 고치기 (더블클릭)
패널 입력칸 없이, 화면 위의 글자를 바로 고칠 수 있습니다.
- 「요소 선택」 모드가 켜진 상태에서, 박스 안의 글자(제목 · 글 · 버튼 글자 · 카드 제목/내용 등)를 더블클릭합니다.
- 그 자리의 글자가 편집 상태가 되고 전체가 선택됩니다.
- 새 글자를 입력합니다.
- 저장하려면 다른 곳을 클릭하거나, 한 줄짜리 글자는
Enter를 누릅니다. - 취소하려면
Esc를 누릅니다. 원래 글자로 돌아갑니다.
참고 「글」 부품이나 카드의 「내용」처럼 여러 줄 글에서는
Enter가 줄바꿈입니다. 이때는 바깥을 클릭하면 저장됩니다.
6-6. 그림 올리기 — WebP 자동 변환
「이미지 주소」 칸이 있는 곳(이미지 부품, 카드 · 슬라이드 항목)에는 칸 바로 아래에 「그림 올리기 (WebP로 저장)」 버튼이 있습니다.
사용 방법
- 「그림 올리기」 버튼을 누릅니다.
- 내 컴퓨터에서 그림 파일을 고릅니다.
- 버튼 아래에
올리는 중…이 보이다가, 끝나면 이미지 주소 칸에 주소가 자동으로 채워지고 화면에 그림이 나타납니다.
어떻게 저장되나
| 항목 | 내용 |
|---|---|
| 올릴 수 있는 형식 | JPG · PNG · GIF · WebP |
| 용량 | 최대 12MB (서버 자체 제한이 더 작으면 그 제한이 먼저 적용됩니다) |
| 자동 변환 | 올린 그림은 WebP로 변환되어 저장됩니다. 파일이 작아져 사이트가 빨라집니다. |
| 크기 줄임 | 가로가 2400px을 넘으면 2400px로 줄입니다. PNG의 투명 배경은 유지됩니다. |
| 움직이는 GIF | WebP로 바꾸면 움직임이 사라지므로 원본 그대로 저장하고, 안내 문구로 알려 줍니다. |
| 저장 위치 | 사이트의 업로드 폴더 안 nb-box/년월/ |
| 제한 | 관리자만 올릴 수 있습니다. SVG 등 다른 형식은 거부됩니다. |
안내 문구는 버튼 아래에 나타납니다. 예: WebP로 변환해 저장했습니다. / 움직이는 GIF는 원본 그대로 저장했습니다. / JPG · PNG · GIF · WebP 그림만 올릴 수 있습니다.
참고 올린 그림은 「적용」을 누르기 전에도 이미 서버에 저장됩니다. 다만 박스에 연결된 주소는 「적용」을 눌러야 방문자에게 보입니다.
주의 서버에서 WebP 변환을 지원하지 않는 환경이라면 원본 형식 그대로 저장하고 그 사실을 안내합니다.
6-7. 박스가 보이는 범위 — 「표시 · 위치」 카드
박스를 선택했을 때 맨 아래 「표시 · 위치」 카드에서 정합니다.
| 항목 | 의미 |
|---|---|
| 표시 범위 | 박스가 어느 페이지에 보일지 |
| — 현재 주소만 | 지금 보고 있는 이 주소 한 곳에만 (기본값) |
| — 모든 페이지 | 사이트의 모든 페이지 |
| — 홈만 | 메인(홈) 페이지에만 |
| — 게시판 전체 | 모든 게시판 페이지(목록 · 글 보기 등)에 |
| 위치 안내 | 위치 · 앞 · … 처럼 박스가 놓인 자리(앞 / 뒤 / 안 맨앞 / 안 맨끝)와 기준 요소를 알려 줍니다. |
- 「현재 주소만」으로 바꾸면 지금 보고 있는 페이지의 주소가 기억됩니다.
- 박스 안의 박스는 바깥 박스의 표시 범위를 따릅니다.
참고 박스를 놓는 기준 요소는 해당 페이지의 화면 구조 안에서 찾습니다. 기준 요소가 없는 다른 페이지에서는 「모든 페이지」로 해도 박스가 나타나지 않을 수 있습니다. 이럴 때는 7장의 저장된 영역으로 페이지마다 따로 놓으세요.
6-8. 박스 삭제
- 박스를 선택한 상태에서 「표시 · 위치」 카드의 「이 박스 삭제」 를 누릅니다. 안에 다른 박스가 있다면 「이 박스와 안의 박스 N개 삭제」 로 표시됩니다.
- 화면에서 박스를 선택하면 박스 오른쪽 위에 빨간 ✕ 가 나타납니다. 이것을 눌러도 삭제됩니다. 안에 든 박스가 있다면 첫 번째 누름에서 「안의 박스 N개 포함 · 한 번 더」 로 바뀌고, 3초 안에 한 번 더 눌러야 삭제됩니다. (실수 방지)
- 「적용된 영역」 목록의 휴지통 버튼으로도 지울 수 있습니다.
7. 「선택 영역」 탭 — 저장된 영역(박스 보관함)과 JSON 주고받기
내가 만든 박스를 보관해 두었다가 다른 페이지에 끌어다 쓰는 기능입니다. 박스의 내용을 JSON 파일로 내보내고 불러올 수도 있어서, 다른 사이트로 옮기거나 백업할 때도 씁니다.
7-1. 먼저 개념 정리
| 이름 | 어디에 있나 | 설명 |
|---|---|---|
| 적용된 영역 | 「선택 영역」 탭 | 이 사이트에 이미 놓여 있는 박스와 모양 설정 목록 |
| 저장된 영역 | 「선택 영역」 탭 | 놓여 있지 않고 보관만 해 둔 박스 묶음. 끌어다 놓으면 새 박스가 됩니다. |
- 「저장된 영역」에 담아 두면 어느 페이지에서든 끌어다 쓸 수 있습니다.
- 「저장된 영역」은 담는 즉시 서버에 저장됩니다. (「적용」을 누를 필요 없음) 최대 40개.
- 보관함에서 끌어다 놓은 박스는 일반 박스와 같아서, 「적용」을 눌러야 저장됩니다.
7-2. 보관함에 담는 방법 4가지
| 방법 | 어떻게 |
|---|---|
| ① 박스 위 도구줄의 「저장」 | 박스 위에 마우스를 올리면 나오는 도구줄에서 「저장」 (7-5) |
| ② 「선택한 박스를 저장된 영역에 저장」 버튼 | 박스를 선택한 상태에서 누릅니다. |
| ③ 「적용된 영역」 목록의 책갈피 버튼(책갈피) | 박스 줄 오른쪽의 책갈피 버튼 |
| ④ JSON 파일 불러오기 | 7-4 참고 |
담으면 "○○"을(를) 저장된 영역에 담았습니다. 다른 페이지에도 끌어다 놓을 수 있습니다. 라고 안내됩니다. 이름은 박스 안의 첫 제목 글자로 자동으로 정해지고, 나중에 바꿀 수 있습니다.
참고 박스 안의 박스를 담으면 안에 든 박스와, 그 박스들에 준 모양 설정, 최신글 박스가 쓰는 스킨도 함께 담깁니다.
7-3. 보관함에서 꺼내 쓰기 (끌어서 놓기)
- 「저장된 영역」 목록에서 쓰려는 항목의 이름 칸(그립 아이콘이 있는 칸)을 마우스로 누른 채 화면으로 끕니다.
- 마우스 옆에 북마크 아이콘과 항목 이름이 따라다닙니다.
- 화면 위에 파란 선이 나타나 놓일 자리를 보여 줍니다. (앞 · 뒤 · 안 맨앞 · 안 맨끝)
- 원하는 자리에서 놓으면 새 박스로 들어갑니다.
Esc로 취소할 수 있습니다. - 놓은 박스는 자동으로 선택됩니다. 마음에 들면 「적용」.
놓일 때 자동으로 처리되는 것
- 박스 번호는 새로 매겨집니다. 같은 항목을 여러 번 놓아도 서로 겹치지 않습니다.
- 박스의 모양 설정도 함께 옮겨집니다.
- 박스는 지금 보고 있는 페이지에서만 보이도록 놓입니다. (다른 박스 안에 놓았다면 그 바깥 박스의 범위를 따릅니다.)
- 박스가 30개를 넘게 되면
박스는 최대 30개까지입니다.로 안내되고 놓이지 않습니다.
7-4. JSON 내보내기 · 불러오기
내보내기 — 파일로 저장하기
| 어디서 | 내보내는 범위 |
|---|---|
| 박스 위 도구줄의 「내보내기」 | 그 박스 하나 (안의 박스 포함) |
| 「박스 전체 JSON 내보내기」 버튼 | 이 사이트에 놓인 모든 박스 |
| 저장된 영역 목록의 파일 내보내기 아이콘 | 그 보관함 항목 하나 |
- 파일 이름은
dx-boxes-날짜-시분.json(보관함에서 내보내면dx-boxes-x번호.json) 형태로 내려받아집니다. - 들어 있는 것: 박스 내용, 박스에 준 모양 설정, 최신글 박스가 쓰는 최신글 스킨
- 들어 있지 않은 것: 그림 파일 자체 (그림은 주소만 들어 있음)
- 안내 문구:
박스 1개 · 모양 0개를 내보냈습니다.
불러오기 — 파일에서 읽기
- 「저장된 영역」 카드 아래 「JSON 불러오기 (저장된 영역에 추가)」 를 누릅니다.
- 이 테마에서 내보낸 JSON 파일을 고릅니다.
- 파일 내용이 「저장된 영역」 목록에 한 항목으로 추가됩니다.
"○○"을(를) 저장된 영역에 추가했습니다. 끌어서 원하는 자리에 놓으세요. - 이제 7-3처럼 끌어서 원하는 페이지에 놓습니다.
불러올 때 규칙
- 이 테마에서 내보낸 파일만 받습니다. 다른 파일이면
이 테마에서 내보낸 박스 파일이 아닙니다./ JSON이 아니면JSON 형식이 아닙니다.가 뜹니다. - 파일 크기는 2MB 이하.
- 한 파일에서 박스는 최대 12개까지 받습니다. 형식이 안 맞는 박스는 빠지고
(형식이 맞지 않는 N개는 제외)로 알려 줍니다. - 파일에 최신글 스킨이 들어 있으면 함께 추가합니다. 같은 내용의 스킨이 이미 있으면 새로 만들지 않고 그걸 재사용합니다.
- 불러오기만으로는 화면이 바뀌지 않습니다. 끌어다 놓아야 보입니다.
왜 바로 화면에 안 놓나요? 박스는 "어떤 페이지의 어떤 요소 앞/뒤"라는 위치 정보를 가지는데, 다른 페이지나 다른 사이트에서는 그 위치가 없을 수 있습니다. 그래서 파일은 먼저 보관함에 담고, 내가 원하는 자리에 직접 놓도록 했습니다.
보관함 항목 관리
항목 줄 오른쪽 버튼으로 관리합니다.
| 버튼 | 동작 |
|---|---|
| 파일 내보내기 아이콘 | 이 항목을 JSON 파일로 저장 |
| 연필 (이름 바꾸기) | 이름 칸으로 바뀝니다. Enter로 저장, Esc 로 취소, 다른 곳을 누르면 저장 (최대 40자) |
| ✕ | 보관함에서 삭제 (이미 화면에 놓은 박스에는 영향 없음) |
7-5. 박스 위에 마우스를 올리면 나오는 도구줄
「요소 선택」 모드가 켜진 상태에서, 화면의 박스 위에 마우스를 올리면 박스 왼쪽 위에 어두운 알약 모양의 도구줄이 나타납니다.
| 버튼 | 하는 일 |
|---|---|
| 불러오기 | JSON 파일을 골라, 이 박스를 파일의 첫 번째 박스 내용으로 바꿉니다. 박스가 놓인 위치 · 표시 범위는 그대로 유지됩니다. |
| 내보내기 | 이 박스를 JSON 파일로 저장합니다. |
| 저장 | 이 박스를 「저장된 영역」에 담습니다. |
- 불러오기(교체) 를 하면 기존 박스(와 안의 박스)는 사라지고 파일 내용으로 대체됩니다. 안내:
박스를 불러온 내용으로 바꿨습니다.이어서 「적용」을 눌러야 저장됩니다. 마음에 안 들면 「되돌리기」. - 도구줄은 박스 위에서만 나타나고, 박스 밖으로 마우스가 나가면 사라집니다.
7-6. 활용 시나리오
시나리오 ① 같은 안내 박스를 여러 페이지에 쓰고 싶을 때
- 한 페이지에서 박스를 만든다.
- 박스에 마우스를 올리고 「저장」.
- 다른 페이지로 이동 → 「선택 영역」 탭 → 「저장된 영역」에서 끌어서 원하는 자리에 놓기.
- 「적용」.
시나리오 ② 다른 사이트에서 만든 박스를 가져오고 싶을 때
- 원래 사이트에서 박스 위에 마우스를 올려 「내보내기」 → JSON 파일 받기.
- 새 사이트의 「저장된 영역」에서 「JSON 불러오기」.
- 목록에 담긴 항목을 원하는 페이지에 끌어다 놓기.
- 이미지는 주소만 들어 있으므로, 필요하면 새 사이트에서 그림을 다시 올려서 주소를 바꿉니다.
- 「적용」.
시나리오 ③ 박스 디자인을 백업해 두고 싶을 때
- 「박스 전체 JSON 내보내기」 로 전체를 파일로 저장해 둔다.
- 필요할 때 「JSON 불러오기」로 보관함에 올리고, 다시 놓는다.
8. 「최신글」 탭 — 최신글 스킨 만들기
게시판의 최신 글 목록을 내가 디자인한 모양으로 사이트에 보여 주는 기능입니다. 목록형 · 갤러리형 · 이미지 위에 글자를 얹은 형 · 가로 슬라이드형 등 원하는 모양을 직접 디자인합니다. 디자인한 모양을 스킨이라 부르고, 그 스킨을 사이트에 놓은 것을 최신글 박스라고 합니다.
8-1. 먼저 개념 정리
| 용어 | 뜻 |
|---|---|
| 스킨 | 최신글 글 한 칸의 디자인(제목 · 썸네일 · 날짜 등을 어디에 어떻게 놓을지)과, 목록 전체를 감싸는 바깥 틀(머리글 · 열 수 · 간격)을 합친 디자인 틀 |
| 부품 | 스킨 안에 놓는 하나하나의 조각 — 제목, 썸네일, 날짜, 글쓴이 등 |
| 최신글 박스 | 저장해 둔 스킨을 페이지 위에 놓은 것. 실제 게시판의 최신 글이 스킨 디자인대로 채워집니다. |
전체 흐름
① 새 스킨 만들기 (모양 고르기)
↓
② 편집기에서 부품을 놓고 디자인 → 「스킨 저장」 (저장 즉시 서버에 보관)
↓
③ 「저장된 스킨」을 화면으로 끌어서 원하는 자리에 놓기 → 최신글 박스
↓
④ 박스별로 게시판 · 글 수 · 너비 조정
↓
⑤ 「적용」 (박스를 놓은 위치를 저장)같은 스킨을 쓰는 박스는 전부 같이 바뀝니다. 스킨 디자인을 고치고 저장하면, 그 스킨을 쓰는 모든 최신글 박스가 한꺼번에 새 모양이 됩니다. 게시판 · 글 수 · 너비만 박스마다 따로 정할 수 있습니다.
8-2. 「최신글」 탭 첫 화면
탭을 열면 두 개의 카드가 보입니다.
「새 최신글 스킨 만들기」 — 시작할 모양을 고르세요
다섯 가지 시작 모양 중 하나를 눌러 편집을 시작합니다. 고른 모양에서 출발해 마음대로 바꿀 수 있습니다.
| 시작 모양 | 설명 |
|---|---|
| 빈 스킨 | 아무 부품도 없는 상태에서 처음부터 만듭니다. |
| 목록형 | 번호 · 제목 · 댓글 수 · 글쓴이 · 날짜가 한 줄씩 나열되는 게시판 목록 모양. 줄 사이에 얇은 구분선이 있습니다. |
| 갤러리형 | 썸네일(대표 이미지)이 위에, 제목 · 글쓴이 · 날짜가 아래에 있는 카드를 여러 열로 보여 줍니다. |
| 글자 얹기 | 썸네일 이미지 위에 반투명 검은 바탕을 깔고 제목 · 날짜 · 글쓴이를 얹은 모양 (3열). |
| 슬라이드 | 가로로 넘기는 카드 형태. 썸네일 + NEW 표시 + 제목 + 날짜. |
참고 처음에는 시작 모양 중 가장 비슷한 것을 고르세요. 빈 스킨보다 훨씬 빨리 끝납니다.
「저장된 스킨」 — 끌어서 화면에 놓기 · 연필로 편집
지금까지 저장한 스킨 목록입니다. 한 줄에 스킨 이름과 한 줄씩 · 5개 부품 / 3열 · … / 가로 슬라이드 · … 같은 요약이 보입니다.
| 버튼 | 동작 |
|---|---|
| 이름 칸(그립 아이콘) | 마우스로 끌어서 화면에 놓으면 최신글 박스가 생깁니다. (8-9) |
| 연필 (편집) | 편집기를 열어 디자인을 고칩니다. |
| 복제 | 같은 디자인의 복사본을 만듭니다. 이름은 원래 이름 복사가 됩니다. 비슷한 스킨을 하나 더 만들 때 편합니다. |
| 휴지통 (삭제) | 스킨을 지웁니다. 확인창이 뜨고, 이 스킨을 쓰는 박스가 있으면 "방문자 화면에서 사라집니다" 라고 개수를 알려 줍니다. |
아직 스킨이 없으면 저장된 스킨이 아직 없습니다. 위에서 모양을 골라 만들어 보세요. 라고 표시됩니다. 스킨은 최대 40개까지 만들 수 있습니다.
8-3. 편집기 화면
시작 모양을 고르거나 연필을 누르면 편집기가 열립니다.
┌──────── 왼쪽: 패널 ────────┐ ┌─────────── 가운데: 편집 무대 ───────────┐
│ 부품 추가 │ │ [PC][모바일] 상태 안내 [스킨 저장][닫기] │
│ 선택한 부품 │ │ 첫 번째 칸만 편집됩니다…(안내) │
│ 부품 목록 │ │ ┌─────────────────────────────┐ │
│ 스킨 정보 │ │ │ 글 한 칸 (이 칸만 편집) │ │
│ 글 한 칸 │ │ │ 나머지 칸은 흐리게 보임 │ │
│ 배치 │ │ └─────────────────────────────┘ │
│ 바깥 틀 │ │ │
└─────────────────────────────┘ └───────────────────────────────────────┘무대(가운데)
- 위쪽 줄: 「PC」「모바일」 전환 버튼(어느 화면 값을 고칠지), 상태 안내 문구, 「스킨 저장」, 「닫기」.
- 안내 문구: "첫 번째 칸만 편집됩니다. 부품을 눌러 선택하고 끌어서 옮기세요 · 모서리를 끌면 크기 · 방향키 1px (Shift 10px) · Delete 삭제"
- 그 아래에 실제 게시판의 최근 글로 채운 미리보기가 나옵니다. 게시판에 글이 없으면 샘플 글로 보여 주며
게시판에 글이 없어 샘플 글로 보여 줍니다./게시판을 고르면 실제 글이 보입니다. 지금은 샘플 글입니다.라고 알려 줍니다. - 열이 여러 개이거나 슬라이드형이면 여러 칸이 보이지만, 편집되는 것은 첫 번째 칸뿐이고 나머지는 흐리게(참고용) 보입니다. 첫 칸을 고치면 나머지 칸이 같은 모양으로 따라갑니다.
패널(왼쪽)
위에서부터 부품 추가 → 선택한 부품 → 부품 목록 → 스킨 정보 → 글 한 칸 → 배치 → 바깥 틀 카드가 있습니다. 각 설정 줄은 2-3의 규칙과 같습니다(값 비우면 기본, ↺로 되돌리기).
8-4. 부품 놓고 다루기
부품 추가하기
「부품 추가」 카드(눌러서 넣기 · 끌어서 원하는 자리에 놓기)에서 부품을 고릅니다.
- 누르기: 칸의 왼쪽 위 근처에 기본 크기로 들어갑니다.
- 끌어서 놓기: 버튼을 무대의 첫 번째 칸 위로 끌어서 놓으면, 놓은 자리에 들어갑니다. 끌 때 마우스 옆에 부품 이름이 따라다닙니다.
- 부품은 한 스킨에 최대 24개입니다. 넘으면
부품은 24개까지 넣을 수 있습니다.라고 안내됩니다.
부품 12종
| 부품 | 무엇을 보여 주나 |
|---|---|
| 썸네일 | 글의 대표 이미지(글에 올린 첫 이미지 등). 이미지 맞춤: 「꽉 채우기(잘림)」/「전체 보이기」 |
| 제목 | 글 제목. 최대 줄 수(1~6)를 넘으면 …으로 줄여 보여 줍니다. |
| 요약 | 글 내용의 앞부분. 길이는 「스킨 정보」의 요약 글자 수로 정합니다. |
| 글쓴이 | 작성자 이름 |
| 날짜 | 작성일. 짧게(10.30) / 길게(2026-10-30 …) 선택 |
| 조회수 | 조회 수. 앞 글자에 조회 , 뒤 글자에 회 같은 문구를 붙일 수 있습니다. |
| 댓글 수 | 댓글 개수. [ ] 를 앞뒤에 붙인 모양이 기본. 「0 이면 숨김」 옵션 있음 |
| 번호 | 목록의 순번 |
| NEW | 24시간 이내에 올라온 새 글에만 나타나는 표시. 글자 내용을 바꿀 수 있습니다(예: NEW → 신규). |
| 글자 | 고정 문구. 모든 칸에 같은 글자가 들어갑니다. (예: "자세히 보기", 구분용 기호) |
| 네모 | 색이 있는 사각형 면. 반투명 처리하면 이미지 위의 어두운 바탕으로 쓸 수 있습니다. |
| 줄 | 가는 구분선 (높이 1px, 색 지정) |
참고 부품은 모두 위치를 자유롭게 정할 수 있고 서로 겹칠 수 있습니다. 겹침 순서는 「층」으로 정합니다. (아래 「앞으로 / 뒤로」)
부품 선택 · 이동 · 크기 조절 (무대에서)
| 하고 싶은 일 | 방법 |
|---|---|
| 선택 | 무대의 첫 번째 칸에서 부품을 클릭합니다. 주황색 테두리와 부품이름 · 너비% × 높이px 라벨, 손잡이 8개가 나타납니다. 패널의 「부품 목록」에서 눌러도 됩니다. |
| 이동 | 부품을 끌어서 옮깁니다. |
| 크기 조절 | 테두리의 손잡이(네 모서리 · 네 변) 를 끕니다. |
| 정밀 이동 | 부품을 선택한 상태에서 방향키 = 1px, Shift+방향키 = 10px |
| 삭제 | Delete 또는 Backspace |
| 복제 | Ctrl+D |
| 선택 해제 | Esc, 또는 부품이 없는 빈 곳 클릭 |
| 스킨 저장 | Ctrl+S |
- 가로 위치와 너비는 칸 폭에 대한 %, 세로 위치와 높이는 px입니다. 그래서 화면 폭이 달라져도 가로 비율이 유지됩니다.
- 입력칸에 글자를 쓰고 있는 동안에는 위 단축키가 동작하지 않습니다. (글자 입력이 우선)
8-5. 「선택한 부품」 카드 — 부품 하나 세밀하게 꾸미기
부품을 선택하면 이 카드에 부품 이름과 PC 값 편집 중 / 모바일 값 편집 중이 표시됩니다. 항목은 부품 종류에 따라 일부만 나옵니다.
위치 · 크기
| 항목 | 설명 |
|---|---|
| 가로 % | 칸의 왼쪽 끝에서 얼마나 떨어질지 (칸 폭에 대한 %) |
| 세로 px | 칸의 위쪽 끝에서 얼마나 떨어질지 |
| 너비 % | 부품 너비 (1~100%) |
| 높이 px | 부품 높이 |
글자 (글자가 있는 부품)
| 항목 | 설명 | 범위 |
|---|---|---|
| 크기 (px) | 글자 크기 (비우면 기본) | 8 ~ 120 |
| 글자색 | 색 고르기 | |
| 굵기 | 기본 / 보통 / 중간 / 굵게 / 아주 굵게 / 가장 굵게 | — |
| 폰트 | 사이트 기본 / 고딕 / 명조 / 둥근 고딕 / 손글씨 / 굵은 제목체 / 고정폭 | — |
| 가로 정렬 | 왼쪽 / 가운데 / 오른쪽 | — |
| 세로 정렬 | 위 / 가운데 / 아래 | — |
| 자간 (px) | −10 ~ 40 | |
| 행간 (%) | 80 ~ 300 | |
| 최대 줄 수 | 제목 · 요약 · 글자 부품. 넘치면 줄임표 | 1 ~ 6 |
| 내용 | NEW · 글자 부품의 문구 | 최대 60자 |
| 앞 글자 / 뒤 글자 | 그 외 부품 앞뒤에 붙일 문구. 예: 조회수 조회 + 회 | 각 최대 12자 |
| 날짜 형식 | 날짜 부품: 짧게 / 길게 | — |
| 0 이면 숨김 | 댓글 수 부품: 댓글이 0개면 표시 안 함 | 체크 |
참고 폰트는 방문자 기기나 사이트에 해당 글꼴이 있어야 보입니다. 없으면 기본 글꼴로 보입니다.
모양
| 항목 | 설명 | 범위 |
|---|---|---|
| 배경색 | 부품 뒤 바탕색 | 색 고르기 |
| 모서리 (px) | 둥글기 | 0 ~ 200 |
| 투명도 (%) | 0 = 완전 투명, 100 = 불투명 | 0 ~ 100 |
| 테두리 굵기 | 0 ~ 6 | |
| 테두리 색 | 색 고르기 |
층(앞뒤 순서)과 복제 · 삭제
카드 맨 아래 버튼 4개입니다.
| 버튼 | 동작 |
|---|---|
| 앞으로 | 한 겹 앞으로 (다른 부품 위에 보임) |
| 뒤로 | 한 겹 뒤로 |
| 복제 | 같은 설정의 부품을 하나 더 만듭니다. |
| 삭제 | 부품을 지웁니다. |
8-6. PC · 모바일 따로 꾸미기
편집기 위쪽의 「PC」「모바일」 버튼으로 어느 화면의 값을 고칠지 정합니다.
- PC: 기본 값. 모든 화면에 적용됩니다.
- 모바일: 768px 이하에서 PC 값을 덮어쓰는 값입니다. 부품의 위치(가로·세로), 크기(너비·높이), 글자 크기를 모바일에서만 다르게 정할 수 있고, 다른 값(색 등)은 PC와 공유합니다.
- 모바일로 바꾸면 선택한 부품 카드에
모바일 값 편집 중이 표시되고, 값을 바꾼 부품에는모바일 별도 값 있음이 붙습니다.
모바일 전용 옵션 (모바일 값 편집 중일 때만 나타남)
| 옵션 | 설명 |
|---|---|
| 모바일에서 숨기기 | 이 부품을 모바일 화면에서만 감춥니다. (예: 요약, 글쓴이) |
| PC 값과 같게 (모바일 별도 값 지우기) | 모바일에서 따로 정한 값을 지우고 PC 값을 따르게 합니다. |
「부품 목록」에는 모바일에서 숨긴 부품에 · 모바일 숨김이 붙어 확인할 수 있습니다.
팁 PC에서 완성한 뒤 모바일로 바꿔서 제목 폭을 넓히고, 요약 · 글쓴이는 숨기고, 날짜를 오른쪽 끝으로 옮기는 식으로 정리하면 모바일 목록이 훨씬 깔끔해집니다.
8-7. 「부품 목록」 · 「스킨 정보」 · 「글 한 칸」 · 「배치」 · 「바깥 틀」
부품 목록 — 눌러서 선택
지금 스킨에 들어 있는 부품이 나열됩니다. 한 줄에 이름 · 가로% · 세로px · 층 번호가 보입니다. 줄을 누르면 그 부품이 선택되고, 줄 오른쪽 ✕ 로 삭제할 수 있습니다. 부품이 없으면 아직 부품이 없습니다.
스킨 정보 — 이름 · 게시판 · 글 수
| 항목 | 설명 | 범위 |
|---|---|---|
| 스킨 이름 | 목록에서 구분할 이름 (필수) | 최대 40자 |
| 게시판 | 미리보기용 기본 게시판. 화면에 놓을 때 박스마다 바꿀 수 있습니다. | 게시판 목록에서 고름 |
| 글 수 | 한 번에 보여 줄 글 개수 | 1 ~ 30 |
| 제목 글자 수 | 제목을 몇 글자까지 보여 줄지 (넘으면 줄임) | 0 ~ 120 |
| 요약 글자 수 | 요약을 몇 글자까지 보여 줄지 | 0 ~ 300 |
글 한 칸 — 높이 · 배경 · 테두리 · 마우스를 올렸을 때
| 항목 | 설명 | 범위 |
|---|---|---|
| 높이 PC (px) | 글 한 칸의 높이 | 20 ~ 800 |
| 높이 모바일 | 모바일에서의 높이. 비우면 PC와 같게 | 20 ~ 800 |
| 배경색 | 칸 바탕색 | 색 고르기 |
| 테두리 색 / 굵기 | 칸 테두리 | 굵기 0 ~ 6 |
| 모서리 (px) | 칸 둥글기 | 0 ~ 60 |
| 마우스를 올리면 | 변화 없음 / 위로 살짝 뜸 / 배경색 바뀜 | — |
| 올렸을 때 배경색 | 「배경색 바뀜」을 골랐을 때의 색 | 색 고르기 |
| 썸네일 확대 | 체크하면 마우스를 올릴 때 썸네일이 살짝 커집니다. | 체크 |
주의 칸의 높이를 먼저 정하세요. 부품의 세로 위치는 이 높이 안에서 잡기 때문에, 나중에 높이를 바꾸면 부품이 어긋나 보일 수 있습니다.
배치 — 한 줄씩 · 여러 열 · 가로 슬라이드
| 항목 | 설명 | 범위 |
|---|---|---|
| 격자 (열) / 가로 슬라이드 | 글 칸을 격자(여러 열) 로 놓을지, 가로로 넘기는 슬라이드로 놓을지 | 둘 중 택1 |
| 열 수 PC | 격자일 때 PC에서 몇 열인지 (1이면 한 줄씩) | 1 ~ 6 |
| 열 수 모바일 | 모바일에서 몇 열인지 | 1 ~ 3 |
| 칸 간격 (px) | 칸과 칸 사이 | 0 ~ 60 |
| 슬라이드 칸 너비 | 「가로 슬라이드」일 때 한 칸의 너비 | 120 ~ 600 |
바깥 틀 — 머리글 · 바탕 · 테두리 · 여백
목록 전체를 감싸는 상자의 설정입니다.
| 항목 | 설명 | 범위 |
|---|---|---|
| 머리글 보이기 | 상자 위쪽의 제목줄 표시 여부 | 체크 |
| 머리글 제목 | 비우면 게시판 이름이 표시됩니다. | 최대 60자 |
| 영문 라벨 | 제목 옆의 작은 영문 라벨 (예: NOTICE, UPDATE) | 최대 40자 |
| "전체 보기" 링크 | 머리글 오른쪽에 게시판으로 가는 링크 표시 | 체크 |
| 링크 문구 | 링크 글자 (기본 전체 보기) | 최대 20자 |
| 머리글 글자색 / 크기 | 크기 10 ~ 40 | |
| 바탕색 | 상자 전체 바탕색 | 색 고르기 |
| 테두리 색 / 굵기 | 굵기 0 ~ 6 | |
| 모서리 (px) | 상자 둥글기 | 0 ~ 60 |
| 안쪽 여백 (px) | 상자 안쪽 여백 | 0 ~ 80 |
| 최대 너비 (px) | 비우면 꽉 채움 | 0 ~ 1600 |
다크 모드 참고 바탕색 · 배경색을 직접 정한 스킨은 다크 모드에서도 정한 색이 뒤집히지 않고 그대로 보이며, 그 위의 글자색도 고정됩니다. 어두운 배경에는 밝은 글자색을, 밝은 배경에는 어두운 글자색을 직접 지정해 주세요.
8-8. 스킨 저장 · 닫기
저장
- 위쪽 「스킨 저장」 버튼 또는
Ctrl+S를 누릅니다. 저장하는 중…→저장했습니다. "최신글" 탭 목록에서 끌어다 화면에 놓으세요.- 스킨은 저장 즉시 서버에 보관됩니다. 「적용」은 필요 없습니다. 저장하면 이 스킨을 쓰는 모든 최신글 박스가 곧바로 새 모양으로 바뀝니다.
- 이름이 비어 있으면
스킨 이름을 입력해 주세요., 40개를 넘으면스킨은 40개까지 만들 수 있습니다.라고 나옵니다.
닫기
- 「닫기」 를 누르면 편집기가 닫히고 첫 화면(스킨 목록)으로 돌아갑니다.
- 저장하지 않은 변경이 있으면 확인창이 뜹니다: "저장하지 않은 변경이 있습니다. 저장하지 않고 닫을까요?"
- 확인: 변경을 버리고 닫음
- 취소: 편집기에 남음
8-9. 스킨을 화면에 놓기 — 최신글 박스
- 「최신글」 탭의 「저장된 스킨」 에서 놓을 스킨의 이름 칸을 누른 채 화면 쪽으로 끕니다.
- 마우스 옆에 스킨 이름이 따라다니고, 화면에 파란 선이 놓일 자리를 보여 줍니다. (앞 · 뒤 · 안 맨앞 · 안 맨끝)
- 원하는 자리에서 놓으면 최신글 박스가 생기고, 탭이 자동으로 「선택 영역」으로 넘어가면서 그 박스가 선택됩니다.
- 「적용」을 누르면 그 자리에 저장됩니다.
최신글 박스 설정 (선택 영역 탭 · 「최신글 박스」 카드)
| 항목 | 설명 |
|---|---|
| 스킨 | 이 박스가 사용할 스킨. 다른 스킨으로 바꿔 끼울 수 있습니다. |
| 게시판 | 어느 게시판의 글을 보여 줄지. 「스킨 기본」 이면 스킨에 정해 둔 게시판을 씁니다. |
| 글 수 | 이 박스에서만 보여 줄 글 개수 (1~30). 비우면 스킨 값. |
| 최대 너비 | 이 박스만의 최대 너비 (0~1600px). 비우면 스킨 값 또는 꽉 채움. |
| 「이 스킨 디자인 편집」 | 편집기로 이동해 스킨 디자인을 고칩니다. |
같은 스킨을 여러 곳에 쓰기: 한 스킨을 홈의 위쪽과 사이드에 놓고, 박스마다 게시판 · 글 수 · 너비만 다르게 하면 "공지 5개", "갤러리 6개"처럼 한 디자인으로 여러 목록을 만들 수 있습니다.
방문자에게는 이렇게 보입니다
- 방문자에게는 실제 게시판의 최신 글이 스킨 모양대로 나옵니다.
- 읽기 권한이 없는 게시판의 글은 방문자에게 보이지 않습니다. (로그인 레벨에 따라 다르게 보일 수 있음)
- 새 글이 올라온 뒤 최대 1분 정도 지나서 반영될 수 있습니다. (성능을 위해 잠깐 저장해 두기 때문입니다)
- 모바일에서는 모바일 값(열 수, 높이, 부품 위치 · 크기 · 숨김)이 적용됩니다.
9. 「프리셋」 탭 — 설정 통째로 저장하기
지금 정한 디자인 전체를 이름 붙여 보관해 두었다가, 나중에 한 번에 불러오거나, 다른 사이트로 옮길 때 씁니다.
9-1. 프리셋에 담기는 것
스타일 · 색상 · 안쪽 여백 · 「선택 영역」에서 정한 모양 설정 · 박스 가 함께 저장됩니다.
담기지 않는 것: 「최신글」 탭의 스킨과 「저장된 영역」의 보관함은 프리셋과 별개로 저장됩니다. 최신글 박스가 들어 있는 프리셋을 다른 사이트에 옮기려면, 스킨이 그 사이트에 있어야 박스가 제대로 보입니다.
9-2. 현재 상태 저장 — 이름을 붙여 보관
- 「프리셋」 탭의 「현재 상태 저장」 카드에서 프리셋 이름을 입력합니다. (최대 40자)
- 「저장」 을 누릅니다.
「이름」 을(를) 저장했습니다.라고 나오고 아래 목록에 추가됩니다.- 같은 이름으로 저장하면 덮어씁니다. (
「이름」 을(를) 덮어썼습니다.) - 이름이 비어 있으면
이름을 입력해 주세요.가 나옵니다. 프리셋은 최대 30개입니다.
참고 프리셋 저장은 「적용」과 별개로 즉시 서버에 보관됩니다. 저장하지 않은(「적용」 전의) 변경도 지금 상태 그대로 프리셋에 담깁니다.
9-3. 저장된 프리셋 — 불러오기 · 파일 · 복사 · 삭제
각 프리셋 줄에는 이름과 요약(· 박스 · 색 · 여백 · 영역 개수)이 보이고, 오른쪽에 네 개의 버튼이 있습니다.
| 버튼 | 동작 |
|---|---|
| 불러오기 (내려받기 아이콘) | 그 프리셋의 설정으로 화면을 바꿉니다. 안내: 「이름」 을(를) 불러왔습니다. 화면을 확인하고 「적용」을 눌러야 저장됩니다. |
| 파일로 내보내기 | 그 프리셋을 JSON 파일로 저장합니다. |
| 복사 (복사 아이콘) | 프리셋 내용을 클립보드에 복사합니다. 복사했습니다. (복사가 안 되는 환경이면 아래 칸에 내용을 넣어 줍니다.) |
| 삭제 (휴지통) | 보관함에서 삭제합니다. 삭제했습니다. |
주의 「불러오기」는 지금 화면의 설정을 통째로 덮어씁니다. 아직 저장하지 않은 작업이 있다면 먼저 프리셋으로 저장해 두세요. 불러온 뒤에도 「되돌리기」로 취소할 수 있습니다.
9-4. 가져오기 · 내보내기 — 다른 사이트와 주고받기
현재 상태 내보내기
「현재 상태 내보내기」 줄의 두 버튼으로 지금 화면 상태를 밖으로 꺼냅니다.
| 버튼 | 동작 |
|---|---|
| 파일로 | 현재 상태를 JSON 파일로 저장 |
| 복사 | 현재 상태를 클립보드에 복사 (이메일 · 메신저로 붙여넣어 보낼 때 편리) |
가져오기
받은 프리셋을 내 사이트에 들여옵니다. 두 가지 방법이 있습니다.
- 붙여넣기: 「내보낸 프리셋 내용을 여기에 붙여넣기」 칸에 내용을 붙여넣고 「가져오기」 를 누릅니다.
- 파일 선택: 「파일 선택」 으로 JSON 파일을 고릅니다. (파일은 1MB 이하)
가져오면 가져온 프리셋 목록에 추가되고 N개를 가져왔습니다. 허용되지 않는 값은 자동으로 정리됩니다. 라고 나옵니다. 이후 9-3처럼 불러오기로 적용하세요.
오류 안내: JSON 형식이 아닙니다. / new-basic 프리셋 파일이 아닙니다. / 파일이 너무 큽니다. (1MB 이하) / 붙여넣은 내용이 없습니다. / 프리셋은 최대 30개까지 저장할 수 있습니다.
안전 장치 가져온 내용 중 허용되지 않는 값은 자동으로 정리됩니다. 누군가에게 받은 파일이라도 사이트가 망가지지 않도록 걸러서 들여옵니다.
10. 저장 · 되돌리기 · 초기화
10-1. 무엇이 「적용」을 눌러야 저장되고, 무엇이 바로 저장되나요?
이 부분이 가장 헷갈리기 쉬우니 꼭 확인하세요.
| 작업 | 저장되는 시점 |
|---|---|
| 스타일 · 색상 · 안쪽 여백 | 「적용」을 눌러야 저장 |
| 「선택 영역」의 모양 설정 (색, 여백, 크기, 위치 이동 등) | 「적용」을 눌러야 저장 |
| 박스 만들기 · 부품 편집 · 박스 삭제 · 박스 놓기(보관함에서 끌어 놓기 포함) | 「적용」을 눌러야 저장 |
| 프리셋 불러오기 (화면에 반영) | 「적용」을 눌러야 저장 |
| 「전체 초기화」 | 「적용」을 눌러야 저장 |
| 최신글 스킨 저장 · 복제 · 삭제 | 바로 저장 |
| 「저장된 영역」(박스 보관함) 담기 · 이름 바꾸기 · 삭제 · JSON 불러오기 | 바로 저장 |
| 프리셋 저장 · 삭제 · 가져오기 | 바로 저장 |
| 박스에 그림 올리기 | 그림 파일은 바로 서버에 저장, 박스에 연결된 주소는 「적용」 후 반영 |
10-2. 「적용」
- 바꾼 것이 없으면 「적용」은 회색(비활성) 입니다. 바꾸면 진한 색이 되어 눌러집니다.
- 누르면 화면 가운데에 진행 막대가 나타나고
저장하는 중→캐시 정리 완료→스타일 적용하는 중→적용 완료로 진행됩니다. 몇 초면 끝납니다. - 저장은 이 테마를 쓰는 모든 도메인에 적용됩니다.
- 저장에 실패하면 진행 막대에 실패 이유가 표시되고, 화면은 마지막으로 저장된 상태로 되돌아갑니다. 다시 시도하세요.
10-3. 「되돌리기」
아직 「적용」하지 않은 모든 변경(스타일 · 색 · 여백 · 선택 영역 설정 · 박스)을 마지막으로 저장한 상태로 되돌립니다. 이미 「적용」한 것은 되돌려지지 않습니다.
참고 「되돌리기」는 바로 저장되는 것들(최신글 스킨, 저장된 영역, 프리셋, 올린 그림)에는 영향이 없습니다.
10-4. 「전체 초기화」
4-4 참고. 두 번 눌러야 동작하고, 「적용」 전까지는 「되돌리기」로 취소할 수 있습니다.
10-5. 저장하지 않고 떠나면?
「적용」하지 않은 변경은 사라집니다. 페이지를 새로고침하거나 이동하기 전에 「적용」 또는 프리셋 저장을 하세요.
11. 자주 하는 작업 따라하기
처음부터 끝까지 그대로 따라 하면 되는 순서입니다.
11-1. 사이트 전체 분위기 바꾸기
- 스타일 부스터를 엽니다.
- 「전체 설정」에서 스타일 3종 중 하나를 고릅니다.
- 색상 9항목 중 대표 색부터 바꿉니다. 바꾸는 즉시 화면에 반영됩니다.
- 안쪽 여백을 취향에 맞게 조정합니다.
- 마음에 들면 「적용」 을 누릅니다.
- 나중에 다시 쓰고 싶으면 「프리셋」 탭에서 이름을 붙여 저장합니다.
11-2. 버튼 하나만 색 바꾸기
- 「선택 영역」 탭에서 선택 모드를 켭니다.
- 바꿀 버튼을 클릭합니다.
- 「같은 종류 모두」 / 「이 요소만」 중 원하는 범위를 고릅니다.
- 배경색 · 글자색 · 모서리를 바꿉니다.
- 모바일에서도 다르게 하려면 화면 크기 전환(PC/모바일)을 바꿔 한 번 더 설정합니다.
- 「적용」.
11-3. 한 페이지에만 다른 모양 주기
- 그 페이지로 이동해 스타일 부스터를 엽니다.
- 요소를 선택하고 설정을 바꿉니다.
- 「적용 페이지」에서 「이 페이지」 칩만 켭니다. (여러 개 겹쳐 고를 수 있습니다.)
- 모바일에서만 적용하려면 모바일 칩을 함께 선택합니다.
- 「적용」.
11-4. 홈 화면에 안내 박스 만들기
- 홈에서 「선택 영역」 탭 → 박스 추가.
- 부품에서 제목 → 글자 → 버튼 순서로 추가합니다.
- 더블클릭으로 글자를 바로 고칩니다.
- 표시 범위를 「홈」으로 정합니다.
- 「적용」.
11-5. 최신글 목록을 내 디자인으로 만들기
- 「최신글」 탭 → 「새 최신글 스킨 만들기」에서 갤러리형을 고릅니다.
- 스킨 정보에서 이름 · 게시판 · 글 수를 정합니다.
- 필요 없는 부품은 지우고, 날짜 · 제목 위치를 끌어 정리합니다.
- 모바일 전환 후 열 수를 2로, 불필요한 부품은 숨깁니다.
- 「스킨 저장」 (바로 저장됩니다) → 「닫기」.
- 「저장된 스킨」에서 스킨을 화면으로 끌어 놓습니다.
- 「적용」.
11-6. 만든 박스를 다른 페이지에서 재사용하기
- 박스에 마우스를 올리고 도구줄의 저장 버튼을 누릅니다.
- 다른 페이지로 이동해 「저장된 영역」의 칩을 원하는 자리에 끌어 놓습니다.
- 「적용」.
11-7. 다른 사이트로 옮기기
- 옮길 쪽에서 「프리셋」 → 「현재 상태 내보내기」 → 파일로.
- 새 사이트에서 같은 테마를 설치하고 「프리셋」 → 「가져오기」 → 파일 선택.
- 목록에서 불러오기 → 「적용」.
- 최신글 스킨을 쓰고 있었다면 박스 JSON(내보내기)로 스킨을 함께 옮깁니다. (7장 참고)
12. 한도와 제한 한눈에 보기
| 항목 | 한도 |
|---|---|
| 박스 | 30개 |
| 박스 하나의 부품 | 30개 |
| 카드 / 슬라이드 / 아코디언 항목 | 각 12개 |
| 탭 항목 | 8개 |
| 저장된 영역(보관함) | 40개 (한 항목 박스 12개 이하) |
| 최신글 스킨 | 40개 |
| 스킨 하나의 부품 | 24개 |
| 스킨 글 수 | 1~30 |
| 프리셋 | 30개 |
| 프리셋 파일 | 1MB |
| 이름 길이 | 프리셋 · 스킨 40자 |
| 그림 올리기 | 자동 WebP 변환. SVG는 올릴 수 없음 |
13. 자주 묻는 질문 · 문제 해결
Q. 바꿨는데 방문자 화면에는 그대로예요. 「적용」을 눌렀는지 확인하세요. 브라우저 캐시 때문이면 새로고침(Ctrl+F5)을 해 보세요. 최신글은 새 글이 최대 1분 뒤 반영됩니다.
Q. 선택 모드에서 링크를 눌러도 이동하지 않아요. 정상입니다. 선택 모드에서는 클릭이 "선택"으로 동작합니다. 선택 모드를 끄면 평소처럼 이동합니다.
Q. 박스를 불러왔는데 보이지 않아요. 표시 범위(페이지)와 기준 요소가 그 페이지에 있는지 확인하세요. 「저장된 영역」으로 직접 끌어 놓으면 가장 확실합니다.
Q. 최신글 박스가 비어 있어요. 게시판에 글이 없거나, 방문자에게 읽기 권한이 없는 게시판일 수 있습니다. 박스의 게시판 선택도 확인하세요.
Q. 스킨을 지웠더니 박스가 사라졌어요. 스킨을 쓰는 박스는 스킨이 없으면 방문자에게 보이지 않습니다. 같은 모양의 스킨을 다시 만들어 박스에서 스킨을 선택하세요.
Q. 실수로 「불러오기」를 눌렀어요. 「되돌리기」를 누르면 마지막 저장 상태로 돌아갑니다.
Q. 이미지 올리기가 실패해요. SVG는 올릴 수 없습니다. 서버의 업로드 용량 제한을 넘는 큰 파일도 실패할 수 있으니 줄여서 올려 보세요.
Q. 모바일에서만 이상해요. 화면 크기 전환을 모바일로 바꿔 모바일 값을 따로 확인하세요. 최신글 스킨은 모바일 열 수와 숨김 설정을 확인하세요.
14. 부록
14-1. 단축키 (최신글 스킨 편집기)
| 키 | 동작 |
|---|---|
| 방향키 | 부품 1px 이동 |
| Shift + 방향키 | 부품 10px 이동 |
| Delete / Backspace | 부품 삭제 |
| Ctrl + D | 부품 복제 |
| Ctrl + S | 스킨 저장 |
| Esc | 선택 해제 |
14-2. 용어 정리
| 용어 | 뜻 |
|---|---|
| 적용 | 바꾼 설정을 서버에 저장하는 동작 |
| 선택 영역 | 화면에서 요소를 골라 모양을 바꾸는 기능 |
| 박스 | 직접 만들어 화면에 놓는 영역 |
| 부품 | 박스 · 스킨 안의 조각 |
| 저장된 영역 | 박스를 담아 두는 보관함 |
| 스킨 | 최신글 한 칸과 바깥 틀의 디자인 |
| 프리셋 | 설정 전체를 이름 붙여 저장한 것 |