डिज़ाइन
사이트 전체 또는 특정 페이지의 색상, 폰트, 요소 모양을 설정합니다. 스타일 프리셋과 컬러 팔레트를 조합하고, 필요한 요소를 따로 조정할 수 있습니다.
디자인 모드 열기
사이트 편집 화면 오른쪽 위의 메뉴 더보기(…) → 디자인을 클릭합니다.
디자인 적용 범위 선택
사이트 전체의 디자인을 바꾸려면 사이트 설정을 선택합니다. 현재 페이지나 채널에만 다른 디자인을 적용하려면 해당 페이지나 채널에서 디자인을 열고 페이지 설정을 선택합니다.
프리셋과 컬러 팔레트 설정
디자인 패널 상단의 미리보기를 클릭하고 원하는 스타일 프리셋을 선택합니다. 프리셋마다 헤더, 버튼, 카드 등의 모양을 미리 확인할 수 있습니다.
프리셋의 ▶️ 아이콘을 클릭하면 사이트에 실제 반영되기 전 미리보기가 가능합니다.
미리보기 아래의 컬러 팔레트 선택 메뉴를 클릭하고 원하는 팔레트를 선택합니다.
팔레트 오른쪽의 시스템 컬러 대응을 켜고, 라이트 또는 다크를 선택해 각 모드의 색상을 설정합니다.
시스템 컬러 대응을 켜면 방문자의 시스템 설정에 맞는 색상으로 표시됩니다. 끄면 라이트, 다크를 나누지 않고 하나의 색상 설정을 사용합니다.
컬러 팔레트의 텍스트, 배경, 주요, 보조, 강조 중 변경할 색상을 클릭합니다. 색상 선택 창에서 색을 고르거나 색상 코드를 입력합니다.
요소별 스타일 설정
헤더 스타일 설정
사이트 설정의 스타일 → 헤더에서 원하는 모양과 색상을 선택한 후, 아래 옵션을 조정합니다.
•
레이아웃: 헤더가 페이지 상단의 가로폭을 채우는 기본 스타일과, 페이지를 아래로 스크롤하면 헤더가 본문 위에 떠 있는 플로팅 스타일 중 하나를 선택합니다.
•
상단 메뉴 정렬: 메뉴 정렬을 왼쪽, 가운데, 오른쪽 중 선택합니다.
•
헤더 사이즈: 헤더의 높이를 조정합니다.
플로팅 레이아웃을 설정한 경우, 아래와 같은 옵션을 조정할 수 있습니다.
•
상단 유지: 옵션을 켰을 경우, 스크롤이 맨 위에 있을 때도 헤더를 플로팅 형태로 유지합니다.
•
배경 효과: 기본 색상, 헤더 뒤쪽 모습이 비치는 반투명, 헤더 뒤쪽 모습이 유리처럼 비치는 리퀴드 글라스 중 하나를 선택합니다.
•
헤더 사이즈: 헤더의 너비와 높이를 설정합니다.
•
헤더 둥근 모서리: 헤더의 모서리값을 설정합니다.
•
그림자: 그림자의 위치와 흐리기 정도를 설정합니다.
페이지 색상 설정
스타일 → 페이지에서 배경, 타이틀, 기본 텍스트의 색상을 변경합니다.
버튼 스타일 설정
스타일 → 버튼에서 원하는 모양을 선택합니다. 아래의 색상에서 배경과 텍스트 등의 색을 변경하고, 모양에서 패딩, 둥근 모서리, 테두리, 그림자를 조정합니다.
카드 스타일 설정
카드 스타일은 배경 블록에 적용됩니다. 스타일 → 카드에서 모양을 선택하고, 아래의 색상과 모양에서 배경, 타이틀, 텍스트의 색상과 둥근 모서리, 테두리 두께, 그림자를 조정합니다.
채널 스타일 설정
채널 스타일은 페이지에 추가한 채널 미리보기 블록에 적용됩니다. 스타일 → 채널에서 모양을 선택하고, 아래의 색상과 모양에서 배경과 텍스트의 색상, 둥근 모서리, 테두리 두께, 그림자를 조정합니다.
채널 미리보기의 모양이 카드일 때 스타일의 변화를 확인할 수 있습니다.
이미지 스타일 설정
스타일 → 미디어의 이미지에서 모양을 선택하고 둥근 모서리, 테두리, 그림자를 설정합니다.
동영상 스타일 설정
미디어 아래의 동영상에서 모양을 선택하고 둥근 모서리, 테두리, 그림자를 설정합니다.
폰트 설정
제목과 기본 폰트 선택
폰트에서 제목과 기본 폰트를 각각 클릭해 사용할 폰트를 선택합니다. 검색창이나 언어 필터로 원하는 폰트를 찾을 수 있습니다.
폰트 직접 업로드
폰트 직접 업로드는 Plus 요금제 이상에서 사용할 수 있습니다. WOFF2, TTF, OTF 형식을 지원하며 파일당 최대 20MB까지 업로드할 수 있습니다.
폰트의 제목 또는 기본 폰트를 클릭하고 업로드를 선택합니다. 폰트를 사용할 권리와 책임에 관한 안내를 확인하고 체크한 뒤 폰트 업로드를 클릭해 원하는 파일을 선택합니다.
텍스트 크기와 줄 간격 조정
페이지 제목, 페이지 본문, 버튼 오른쪽의 값을 클릭해 폰트 두께, 크기, 줄 간격을 조정합니다. 제목 1~3의 스타일은 제목을 펼쳐 설정합니다.
디자인 확인
디자인 패널을 닫고 화면 위의 데스크톱 미리보기와 모바일 미리보기를 전환해 색상, 글자 크기, 줄바꿈을 확인합니다.
