문의하기

본문 영역

디자인 빌더

디자인 빌더 · 사이트 설정 (대표 색·본문 폭·글꼴·배경음악·원페이지)

  • 이용가이드
  • 작성자 : 안목
  • 작성일 : 2026-10-08
  • 조회수 : 33

사이트 전체에 한 번에 적용되는 색·폭·글꼴을 정합니다. 위젯 하나하나가 아니라 홈페이지 전체의 기본 모양입니다.

사이트 설정 열기와 기본 설정

윗줄 사이트 설정을 누르면 오른쪽에 「PC 사이트 설정」 패널이 열립니다. 묶음은 기본 설정 · 폰트 설정 · 기타 설정 셋이고, 하나를 펼치면 나머지는 접힙니다.

사이트 설정 패널의 기본 설정. 1번 PC 사이트 설정 제목, 2번 적용, 3번 편집 언어(한국어), 4번 대표 색상, 5번 배경색, 6번 본문 폭, 7번 본문 좌우 여백, 8번 본문 위/아래 간격, 9번 이 페이지만 칸입니다.
그림 1사이트 설정 — 기본 설정
  1. 제목 — 지금 화면(PC·태블릿·모바일)이 붙습니다. 화면을 바꾸면 그 화면 값을 따로 정할 수 있습니다.
  2. 적용 — 이 패널에서 고친 값을 저장하고 패널을 닫습니다. 닫기를 누르면 고치기 전으로 되돌립니다.
  3. 편집 언어 — 「🇰🇷 한국어」처럼 지금 고치는 언어를 고릅니다. 환경 설정 → 번역 설정에서 번역을 켜고 언어를 둘 이상 켠 사이트에만 보입니다. 다른 언어(예: 「🇺🇸 영어」)를 고르면 폰트 설정만 남고, 그 언어 페이지에 쓸 글꼴·글자 크기·줄 간격·굵기·글자색을 따로 정할 수 있습니다. 기본 설정과 기타 설정은 모든 언어가 함께 쓰므로 기본 언어에서만 고칩니다.
  4. 대표 색상 — 사이트의 대표 색입니다.
  5. 배경색 — 홈페이지 바탕색입니다.
  6. 본문 폭 — 본문이 가장 넓어질 수 있는 폭(px)입니다.
  7. 본문 좌우 여백 — 화면이 좁을 때 내용이 양쪽 끝에 딱 붙지 않게 두는 최소 여백입니다.
  8. 본문 위/아래 간격 — 공통 헤더와 본문 사이(위), 본문과 공통 푸터 사이(아래) 간격입니다. 비워 두면 PC 100px, 태블릿·모바일 50px입니다.
  9. 이 페이지만 — 지금 고치는 페이지에만 쓰는 위/아래 간격입니다. 비워 두면 위 사이트 값을 따릅니다. 이 칸은 적는 즉시 저장됩니다.

폰트 설정

폰트 설정 묶음. 1번 폰트체, 2번 글꼴 크기, 3번 줄 간격, 4번 폰트 굵기, 5번 폰트 색상입니다.
그림 2폰트 설정
  1. 폰트체 — 사이트 기본 글꼴입니다. Pretendard·나눔스퀘어·Noto Sans KR 같은 한글 글꼴과 영문 글꼴, 손글씨 글꼴 등에서 고릅니다.
  2. 글꼴 크기 — 본문 기본 글자 크기(px)입니다. 막대를 끌거나 숫자를 적습니다.
  3. 줄 간격 — 줄과 줄 사이입니다(1.5면 글자 크기의 1.5배).
  4. 폰트 굵기 — 기본 글자 굵기입니다(400이 보통).
  5. 폰트 색상 — 기본 글자색입니다.

기타 설정 — 배경음악·원페이지

기타 설정 묶음. 1번 배경음악(오디오 선택·반복 재생·바로 재생·음악 제거), 2번 재생 페이지 지정, 3번 원페이지 사용, 4번 기본 동작, 5번 이동 버튼입니다. 원페이지를 켰을 때 나오는 칸도 함께 보입니다.
그림 3기타 설정 (원페이지를 켰을 때 나오는 칸까지 펼친 모습)
  1. 배경음악 — 「오디오 선택」으로 음악을 올리면 사이트 오른쪽 위에 재생/일시정지 단추가 생깁니다(최대 20MB, mp3·wav·ogg·m4a 등). 반복 재생·바로 재생을 고를 수 있고, 「음악 제거」로 지웁니다. 브라우저 정책 때문에 자동으로 소리가 나지는 않고 손님이 직접 재생합니다.
  2. 재생 페이지 지정 — 음악을 틀 페이지를 고릅니다.
  3. 원페이지 사용 — 지금 고치는 페이지만 위젯을 한 화면씩 꽉 차게 놓고, 마우스 휠·키보드·점 단추로 한 장씩 넘기게 합니다. 작은 화면(1400×800 이하)에서는 일반 스크롤로 보이고, 편집 화면이 아니라 실제 페이지·미리보기에서 움직입니다. 게시판 페이지에는 쓸 수 없습니다.
  4. 기본 동작 — 넘어가는 시간(빠르게 0.4초 ~ 아주 느리게 1.5초), 움직임 곡선, 넘긴 뒤 입력 대기, 섹션 안 휠 감도, 처음↔끝 순환(휠·키보드·버튼)을 정합니다.
  5. 이동 버튼 — 옆에 뜨는 점 단추를 보일지 정하고 「이동 버튼 스타일 설정」으로 모양을 바꿉니다. 그 아래 「섹션별 높이」에서 위젯마다 자동 · 화면 맞춤 · 콘텐츠 높이를 고릅니다.

여기까지 확인했나요

  • 대표 색상과 배경색을 정하고 「적용」을 눌렀습니다.
  • 기본 글꼴과 글자 크기를 정했습니다.
  • 모바일 화면으로 바꿔 본문 좌우 여백·글자 크기를 확인했습니다.