식스샵 프로는 크기, 줄 간격, 자간이 사전 정의된 글자 스타일 시스템을 사용하여
웹사이트의 정보 전달력과 디자인 일관성을 높이고 검색 최적화(SEO)에 도움을 줍니다.
1. 기본 글자 설정하기
웹사이트 글자에 전반적으로 반영되는 기본 설정입니다.
① 디자인 에디터 왼쪽 상단의 [테마 설정] 클릭
② 왼쪽 패널의 [글자] 항목을 펼쳐 글자 설정
테마 설정] 클릭
② 왼쪽 패널의 [글자] 항목을 펼쳐 글자 설정기본 글자 크기
가장 먼저, 웹사이트의 표준이 되는 기본 글자 크기를 설정할 수 있습니다.
여기서 설정된 기본 글자 크기에 비례하여, 다양한 섹션의 글자 크기가 자동으로 조정되어 더욱 편리합니다.
기본 글자 크기 18 적용 예시
기본 글자 크기 13 적용 예시
글꼴
제목/본문 글꼴로 사용할 폰트와 두께를 설정할 수 있습니다.
각 제목/본문에 설정된 글꼴은, 제목/내용 스타일이 적용된 위치에 일괄 적용됩니다.
제목 스타일
페이지 제목/소제목 및 섹션 제목마다 각각 글자 스타일을 적용할 수 있습니다.
제목 1에 가까울수록 큰 글자, 제목 6에 가까울수록 작은 글자입니다.
페이지 제목 스타일
제목 2 적용 예시
제목 5 적용 예시
페이지 소제목 스타일
제목 2 적용 예시
제목 6 적용 예시
섹션 제목 스타일
제목 1 적용 예시
제목 6 적용 예시
2. 글자 스타일 적용하기
편리하고 일관적인 글자 설정을 위해 식스샵 프로에서 자체 구분해 둔 글자 간 위계를 말합니다.
제목/내용 스타일
•
제목 스타일: 제목 1 제목 2 제목 3 제목 4 제목 5 제목 6
•
내용 스타일: 본문 1 본문 2 본문 3
기본 제공 페이지 글자 설정
테마 설정의 글자 스타일은 기본 제공 페이지의 각 영역에 일괄 적용됩니다.
① 디자인 에디터 왼쪽 상단 [테마 설정] 클릭
② 왼쪽 패널의 [글자] 항목을 펼쳐 제목/소제목 스타일 설정
섹션별 글자 설정
섹션마다 개별 글자 스타일을 설정할 수 있으며, 헤더와 푸터는 차후 제공 예정입니다.
① 디자인 에디터에서 수정할 섹션 선택
② 오른쪽 패널의 [디자인] 탭에서 글자 스타일 설정
3. 글자 스타일과 SEO
글자 스타일은 단순한 디자인 요소가 아니라, 웹 표준과 검색 최적화에도 직접적인 영향을 줍니다.
예시로, 위 갤러리 섹션이 배치된 페이지는 최상단의 제목(제목 2)이 가장 중요한 정보로 검색 엔진에 반영됩니다.
HTML에서는 <h1> ~ <h6> 태그를 통해 제목의 중요도를 표시하며, 식스샵 프로의 글자 스타일은 이 태그와 각각 매칭됩니다. (예시로 제목1의 경우 <h1>으로 적용)
따라서 검색 엔진에서 웹사이트 정보를 불러갈 때, 글자 스타일을 콘텐츠의 중요도로 인식하기에 아래 내용을 참고하여 적절한 글자 스타일을 섞어 사용하는 것을 권장합니다.
•
제목1 : 페이지에서 가장 중요한 제목에 사용하며, 한 페이지에는 1회만 사용하는 것이 좋습니다.
•
제목2~6: 중요도에 따라 하위 제목으로 나누어 사용합니다.
•
본문1~3: 본문, 캡션, 보조 설명 등 중요도가 다소 낮은 일반 콘텐츠에 사용합니다.
Q1. 기본 글자 크기를 조정해도 글자 크기가 바뀌지 않고 고정되는 영역이 있어요. 오류인가요?
Q2. 작업 중인 섹션의 [디자인] 탭에 제목/내용 스타일 설정이 보이지 않아요!
식스샵 프로 가이드로 돌아가기