공통 디자인 설정 활용법

공통 디자인 설정을 사용하면 기본 텍스트의 색상, 크기와 기본 배경 색상 등을 맞춤설정 할 수 있습니다.

공통 디자인 설정

내 사이트 전반에 걸쳐 사용하는 텍스트, 배경색, 버튼 등을 맞춤설정 하려면 디자인 설정으로 이동하여 공통 디자인 설정을 클릭합니다.


타이포그래피 설정

공통 디자인 설정에서는 텍스트를 맞춤설정 할 수 있는 기능을 지원합니다.

  • 브랜드/링크색: 내 사이트를 대표하는 색상을 지정하여 브랜드 표현을 강화 할 수 있습니다. 이곳에서 설정한 색상은 버튼 및 링크, 강조할만한 텍스트 등에 자동 적용됩니다.
  • 본문: 내 사이트에서 사용하는 가장 기본적인 텍스트를 설정합니다. 아무런 설정을 하지 않고 텍스트를 작성했을 때 보이는 스타일입니다.
    • 글자색 : 본문 색상을 지정합니다. 텍스트에는 투명도(알파)를 주지 않는 것이 가독성을 위해 좋습니다.
    • 글꼴 크기 : 본문 텍스트의 크기를 지정합니다. 본문 텍스트는 제목과 달리 가장 작은 수준의 텍스트이므로 너무 큰 텍스트를 사용하지 않는 것이 좋습니다.
    • 줄간격: 여러줄 텍스트일 때 텍스트간의 세로 간격을 조정합니다. 1일 경우 간격이 없으며, 2인 경우 텍스트 크기 만큼의 간격이 들어간다는 뜻입니다. 14px 크기의 한글일 때 1.4~1.7 정도가 권장 줄간격입니다.
    • 자간: 글자 사이의 간격을 조정합니다. 기본값은 0이며 2로 설정할 경우 글자간 간격이 2px 추가됩니다.
    • 굵게: 본문 텍스트를 항상 굵게 표시합니다.
    • 기울기: 본문 텍스트를 항상 이텔릭(기울임) 스타일로 표시합니다.
    • 밑줄: 본문 텍스트에 항상 밑줄을 표시합니다.
  • 배경색: 내 사이트의 기본 배경색을 설정합니다. 섹션에서 설정한 배경이 있을 경우 기본 배경색 위에 덮어씌우게 됩니다.

구성요소 설정

  • 본문 최대폭: 데스크톱처럼 스크린이 넓은 환경에서 사이트의 너비를 설정합니다. 본문 최대폭이 너무 넓으면 노트북 컴퓨터같은 작은 환경에서 문제가 될 수 있으니 1150px 을 넘지 않는 것이 좋습니다. 모바일 기기에는 해당되지 않으며,  가로영역이 확장된 위젯이나 헤더섹션의 슬라이드와 같은 부분에도 이 설정은 무시됩니다.
  • 그리드 간격: 각 요소간의 간격을 조정합니다. 섹션에는 해당되지 않으며 위젯에만 해당됩니다.
  • 구분선 스타일: 구분선 위젯에 사용할 스타일을 설정합니다.
    • 두께: 구분선의 두께를 맞춤설정합니다.
    • 선 스타일: 실선(solid), 점선(dotted), 긴점선(dashed) 중 하나의 모양으로 맞춤설정합니다.
    • 색상: 구분선의 색상을 선택합니다.

버튼 설정

버튼 위젯 등에서 사용하는 버튼의 스타일을 맞춤설정합니다. 버튼 위젯은 세 가지 용도와 세 가지 크기로 설정할 수 있습니다.

  • 기본: 가장 일반적인 버튼 스타일입니다. 보통 확인, 취소와 같은 버튼이 있을 때 "취소"에 해당하는 버튼입니다.
  • 중요: 기본 버튼보다 강조할 버튼에 사용하는 스타일입니다. 보통 확인, 취소와 같은 버튼이 있을 때 "확인"에 해당하는 버튼입니다.
  • 비활성: 클릭할 수 없는 상태를 나타내는 버튼입니다. 그렇기 때문에 기본 버튼보다 눈에 덜 띄는 스타일의 설정이 필요합니다.
  • 소형: 소형 버튼의 크기를 맞춤설정합니다.
  • 중형: 중형 버튼의 크기를 맞춤설정합니다.
  • 대형: 대형 버튼의 크기를 맞춤설정합니다.

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

  1. 의도대로 공통 디자인 설정을 마쳤거나 설정을 적용하지 않기 위해서는 상단의 뒤로가기 버튼을 클릭하거나 공통 디자인 설정 사이드바 바깥의 영역 아무곳을 클릭합니다.
  2. 그러면 "공통 디자인 설정을 저장 하시겠습니까?" 라는 대화상자가 나타납니다.
  3. 적용을 하려면 저장 버튼을, 적용하지 않고 공통 디자인 설정을 종료하려면 취소 버튼을 클릭합니다.




목록으로

아임웹 공식제휴사

아임웹은 페이팔, 네이버 페이, KCP 공식파트너입니다.