공통 디자인 설정하기

공통 디자인 설정

공통 디자인 설정을 사용하면 기본 텍스트의 색상, 크기와 기본 배경 색상 등을 맞춤설정 할 수 있습니다. 내 사이트 전반에 걸쳐 사용하는 텍스트, 배경색, 버튼 등을 맞춤설정 하려면 아래 그림처럼 톱니바퀴 아이콘을 클릭해  공통 디자인 설정으로 이동합니다.

공통 디자인 설정 메뉴 알아보기

공통 디자인 설정 메뉴를 클릭하면 아래 그림처럼 우측에서 패널이 열립니다. 각 항목에 대한 자세한 설명은 아래에서 확인해보세요.

본문

• 브랜드/링크색 : 내 사이트를 대표하는 색상을 지정하여 브랜드 표현을 강화 할 수 있습니다. 이곳에서 설정한 색상은 버튼 및 링크, 강조할만한 텍스트 등에 자동 적용됩니다.
• 뱃지색 : 새로운 가입자가 생겼거나, 주문이 들어왔을 때 등 표시되는 알림 색상을 변경할 수 있습니다.
• 글자색 : 본문에 입력되는 텍스트의 기본 색상을 변경할 수 있습니다.
• 배경색 : 내 사이트의 기본 배경색을 설정합니다. 섹션에서 설정한 배경이 있을 경우 기본 배경색 위에 덮어씌우게 됩니다.
• 본문폭 : 데스크톱처럼 스크린이 넓은 환경에서 사이트의 너비를 설정합니다. 모바일 기기에는 해당되지 않으며, 가로영역이 확장된 위젯이나 헤더섹션의 슬라이드와 같은 부분에도 이 설정은 무시됩니다.
• 그리드 간격 : 위젯과 위젯 사이의 간격을 최소 0에서 최대 30픽셀로 설정할 수 있습니다.

텍스트

• 텍스트 정의 : 내 사이트에서 사용하는 가장 기본적인 텍스트를 설정합니다. 아무런 설정을 하지 않고 텍스트를 작성했을 때 보이는 스타일입니다.
  • 글꼴 크기 : 본문 텍스트의 크기를 지정합니다. 본문 텍스트는 제목과 달리 가장 작은 수준의 텍스트이므로 너무 큰 텍스트를 사용하지 않는 것이 좋습니다.
  • 줄간격 : 여러줄 텍스트일 때 텍스트간의 세로 간격을 조정합니다. 1일 경우 간격이 없으며, 2인 경우 텍스트 크기 만큼의 간격이 들어간다는 뜻입니다. 14px 크기의 한글일 때 1.4~1.7 정도가 권장 줄간격입니다.
  • 자간 : 글자 사이의 간격을 조정합니다. 기본값은 0이며 2로 설정할 경우 글자간 간격이 2px 추가됩니다.
  • 굵게 : 본문 텍스트를 항상 굵게 표시합니다.
  • 기울기 : 본문 텍스트를 항상 이텔릭(기울임) 스타일로 표시합니다.
  • 밑줄 : 본문 텍스트에 항상 밑줄을 표시합니다.
• 본문 한/중/일 : 단락이 본문(표준)으로 설정된 텍스트의 한글/중국어/일어 글꼴을 변경할 수 있습니다.
• 본문 영문 글꼴 : 단락이 본문(표준)으로 설정된 텍스트의 영어 글꼴을 변경할 수 있습니다.
• 제목 한/중/일 : 단락이 제목(Heading)으로 설정된 텍스트의 한글/중국어/일어 글꼴을 변경할 수 있습니다. 기본값은 본문 글꼴에 따름으로 설정되어 있습니다.
• 제목 영문 글꼴 : 단락이 제목(Heading)으로 설정된 텍스트의 영어 글꼴을 변경할 수 있습니다. 기본값은 본문 글꼴에 따름으로 설정되어 있습니다.

구성요소

• 버튼 스타일 : 버튼 위젯의 기본 스타일을 설정합니다.
  • 기본
    • 텍스트 : 기본 버튼에 들어갈 텍스트의 색상을 지정할 수 있습니다.
    • 배경 : 기본 버튼의 배경 색상을 지정할 수 있습니다.
    • 선 : 기본 버튼의 테두리 선 크기 및 색상을 지정할 수 있습니다.
  • 롤오버 *마우스 커서를 올렸을 때 색상이 변하는 효과
    • 텍스트 : 버튼이 롤오버 되었을 때의 텍스트 색상을 지정할 수 있습니다.
    • 배경 : 버튼이 롤오버 되었을 때의 배경 색상을 지정할 수 있습니다.
    • 선 : 버튼이 롤오버 되었을 때의 버튼 테두리 선 색상을 지정할 수 있습니다.
  • 본문
    • 스타일 : 버튼의 형태를 변경할 수 있습니다.
    • 좌우 여백 : 버튼에 입력되는 텍스트 좌우 여백의 크기를 지정할 수 있습니다. 좌우 여백이 커지면, 버튼 역시 좌우로 길어집니다.
    • 텍스트 간격 : 버튼 텍스트의 자간을 변경할 수 있습니다.
    • 굵게 : 버튼 텍스트를 굵게 지정할 수 있습니다.
    • 기울기 : 버튼 텍스트를 기울일 수 있습니다.
• 입력 필드 : 입력폼 등 방문자가 텍스트를 입력하는 필드의 스타일을 설정합니다.
  • 스타일 : 입력 필드 생김새를 설정할 수 있습니다.
  • 배경색 : 입력 필드 배경색을 지정할 수 있습니다.
  • 글자색 : 입력 필드에 사용될 글자의 색상을 지정할 수 있습니다.
  • 선색 : 입력 필드의 테두리 선 색상을 지정할 수 있습니다.
• 구분선 : 가로선 위젯에 사용할 스타일을 설정합니다.
  • 두께 : 가로선의 두께를 맞춤설정합니다.
  • 선 스타일 : 실선(solid), 점선(dotted), 긴점선(dashed) 중 하나의 모양으로 맞춤설정합니다.
  • 색상 : 가로선의 색상을 선택합니다.

공통 디자인 설정 적용 또는 취소하기

1단계, 공통 디자인 설정 패널 우측 상단에 위치한 X를 클릭하거나, 공통 디자인 설정 패널 바깥의 영역 아무 곳을 클릭합니다.
2단계, "공통 디자인 설정을 저장 하시겠습니까?"라는 대화상자가 나타납니다.
3단계, 적용을 하려면 저장 버튼을, 적용하지 않고 종료하려면 취소 버튼을 클릭합니다.