브랜드 비주얼은 웹사이트의 전반적인 느낌을 결정합니다. 글꼴, 색상, 텍스트 크기, 밀도, 둥근 모서리, 라이트/다크 모드는 사소한 디테일처럼 보일 수 있지만, 이러한 요소들이 합쳐져 방문자가 사이트를 명확하고 신뢰할 수 있으며 브랜드와 일치한다고 인식하도록 영향을 미칩니다.
이러한 설정은 사이트 전체에 적용됩니다. 모든 페이지에서 글꼴이나 브랜드 색상을 재설정할 필요가 없습니다. 한 번 설정하면 사이트 전체의 모듈이 동일한 지침을 따릅니다.
편집기의 "[설정] → [디자인]"을 엽니다. 조정하면서 데스크톱, 태블릿, 모바일 미리보기를 사용하여 효과를 확인하세요.
한 번에 한두 가지 항목만 변경하고 전체적인 영향을 관찰해 보세요. 글꼴, 색상, 간격을 변경하고 동시에 많은 이미지를 추가하면 어떤 변경이 사이트를 보기 싫게 만들었는지 파악하기 어렵습니다.
타이포그래피는 단순히 보기 좋은 글꼴을 선택하는 것 이상입니다. 언어별로 다른 글꼴을 설정하고 H1, H2, H3 및 본문 텍스트의 크기를 조정할 수 있습니다.
"디자인" 섹션에는 먼저 사이트의 콘텐츠 언어와 가장 관련성이 높은 글꼴 필드가 표시됩니다. "다국어 글꼴"을 확장하면 영어, 중국어 번체, 중국어 간체, 일본어, 한국어에 대해 글꼴을 별도로 설정할 수 있습니다.
각 언어별로 제공되는 엄선된 글꼴의 대략적인 개수입니다.
| 언어 | 선택 가능 폰트 수 (약) |
|---|---|
| 영어 | 170개 옵션 |
| 중국어 번체 | 60개 옵션 |
| 중국어 간체 | 30개 옵션 |
| 일본어 | 70개 옵션 |
| 한국어 | 40개 옵션 |
각 언어별 메뉴는 글꼴 지원 여부에 따라 필터링되므로, 중국어 콘텐츠에 영어만 지원하는 글꼴을 적용하는 것에 대해 걱정할 필요가 없습니다. 사용 가능한 글꼴 목록은 업데이트에 따라 변경될 수 있으며, 현재 자체 글꼴 파일 업로드는 지원되지 않습니다.
사이트에 중국어와 영어 콘텐츠가 모두 있다면, 제목, 버튼, 본문 텍스트에서 두 언어가 어떻게 보이는지 검토하세요. 글꼴 선택의 원칙은 "개성보다 명확성"입니다. 브랜드 이름이나 주요 제목에는 개성을 부여할 수 있지만, 긴 텍스트 덩어리는 모바일에서 쉽게 읽을 수 있어야 합니다.
H1, H2, H3 및 본문 텍스트의 크기를 각각 9단계로 개별적으로 조정할 수 있습니다. H1은 페이지에서 가장 중요한 제목이고, H2와 H3는 섹션 계층 구조에 사용되며, 본문 텍스트는 일반적인 설명 콘텐츠용입니다.
모든 텍스트를 크게 만들기만 하지 마세요. 명확한 제목 계층 구조는 방문자가 콘텐츠를 쉽게 훑어볼 수 있도록 돕고, 보조 기술이 페이지 구조를 이해하도록 지원합니다.
Kanorio의 사이트 전체 색상 설정은 이 세 가지 영역에 집중되어 있습니다.
| 설정 | 조정할 수 있는 항목 |
|---|---|
| 브랜드 기본 색상 | 버튼, 강조 표시, 링크 및 일부 배경에 사용되는 기본 색상입니다. 라이트 모드와 다크 모드에 대해 별도의 색상 세트가 있습니다. |
| 브랜드 텍스트 색상 | 브랜드 기본 색상 배경에 표시되는 텍스트 또는 아이콘의 색상입니다. 시스템이 자동으로 검정 또는 흰색 대비를 결정하거나, 각 모드에 대해 수동으로 재정의할 수 있습니다. |
| 모양 모드 | 공개 사이트가 방문자의 시스템 설정을 따를지, 아니면 고정된 라이트 또는 다크 모양을 사용할지 결정합니다. |
현재 사이트 전체의 보조 색상 또는 배경 색상에 대한 별도의 필드는 없습니다. 브랜드 기본 색상, 모듈 이미지 및 콘텐츠 계층 구조를 사용하여 시각적 강조를 만드세요.
브랜드 색상 선택기에는 클래식한 생동감, 모란디, 흙/중성 팔레트로 나뉜 24가지 사전 설정 조합이 있습니다. 각 세트에는 라이트 모드와 다크 모드 모두에 적합한 색상 쌍이 포함되어 있습니다.
브랜드에 이미 색상 가이드라인이 있다면, 색상 선택기를 사용하거나 Hex, RGB 또는 HSL 색상 코드를 수동으로 입력할 수도 있습니다. 선택기는 최근 사용한 색상을 저장하여 쉽게 다시 불러올 수 있습니다. 라이트 모드 색상을 조정한 후에는 시스템이 다크 모드에 대한 시작 제안을 생성하는 데 도움을 줄 것입니다. 결과를 확인하기 위해 모드를 전환하는 것을 잊지 마세요.
버튼이나 블록이 브랜드 색상을 배경으로 사용할 때, 텍스트가 읽기 쉬우려면 충분한 대비가 필요합니다. 시스템은 기본적으로 검정 또는 흰색 텍스트를 자동으로 선택하고 대비 경고를 표시합니다. 브랜드 가이드라인에서 특정 텍스트 색상을 요구하는 경우 수동으로 조정할 수도 있습니다.
오류 메시지만 빨간색으로 표시하는 등, 중요한 정보를 전달하기 위해 색상에만 의존하지 마세요. 색상 시각적 차이가 있는 방문자도 이해할 수 있도록 명확한 텍스트, 아이콘 또는 위치 단서를 사용하세요.
| 옵션 | 설명 |
|---|---|
| 시스템 따르기 | 방문자의 기기가 라이트로 설정되면 라이트 모드를, 다크로 설정되면 다크 모드를 표시합니다. |
| 항상 라이트 | 모든 방문자가 라이트 모양을 봅니다. |
| 항상 다크 | 모든 방문자가 다크 모양을 봅니다. |
"시스템 따르기"를 선택하기 전에 두 모드를 모두 확인하세요. 로고, 사진 또는 브랜드 색상이 어두운 배경에서 불분명하다면, "항상 라이트"로 전환하거나 다크 모드에 맞게 브랜드 색상을 조정하는 것을 고려하세요.
밀도는 모듈 간의 간격을 제어하여 콘텐츠가 얼마나 조밀하거나 여유롭게 보이는지에 영향을 미칩니다. Kanorio는 사이트 전체에 두 가지 옵션을 제공합니다.
| 밀도 | 적합한 상황 |
|---|---|
| 표준 | 기본 옵션으로, 더 편안한 읽기 리듬을 제공하며 포트폴리오, 브랜드 스토리 및 일반 서비스 웹사이트에 적합합니다. |
| 조밀 | 정보 밀도를 높이기 위해 모듈 간격을 줄여 콘텐츠가 많은 서비스 또는 정보 페이지에 적합합니다. |
모바일 미리보기에서 이를 확인하세요. 너무 조밀한 설정은 버튼과 단락을 읽기 어렵게 만들 수 있으며, 너무 여유로운 설정은 과도한 스크롤을 필요로 합니다.
둥근 모서리는 버튼, 카드, 이미지의 가장자리가 얼마나 사각형인지 또는 둥근지를 제어합니다. 이 설정도 사이트 전체에 적용됩니다.
| 모서리 | 시각적 느낌 |
|---|---|
| 날카로움 | 가장자리가 더 사각형이며, 합리적이고 깔끔한 느낌을 줍니다. |
| 중간 | 기본 옵션으로, 명확성과 부드러움의 균형을 이룹니다. |
| 부드러움 | 더 두드러진 둥근 모서리로, 친근하고 편안한 느낌을 줍니다. |
선택할 때 로고, 제품 스타일, 사진 분위기에 맞추세요. 모든 모듈에 다른 스타일을 사용할 필요는 없습니다.
웹사이트 아이콘(파비콘)은 브라우저 탭과 북마크 옆에 있는 작은 그래픽입니다. "디자인" 탭이 아닌 "[사이트 관리] → [일반]"에서 조정합니다.
로고에서 자동으로 생성된 아이콘을 사용하거나 사용자 지정 아이콘을 업로드할 수 있습니다. 파비콘은 매우 작기 때문에 너무 많은 텍스트나 아주 가는 선은 포함하지 않도록 하세요.
예. 브랜드 색상은 사이트 전체 설정이며, 변경 사항은 해당 설정을 사용하는 버튼, 링크 및 시각적 요소에 영향을 미칩니다. 변경 후 모든 페이지, 특히 텍스트 대비 및 이미지 위의 버튼을 확인하세요.
현재는 불가능합니다. 플랫폼에서 제공하는 글꼴 중에서 선택하세요. 이 글꼴들은 이미 언어 지원 여부에 따라 필터링되어 있습니다. 영어, 중국어 번체, 중국어 간체, 일본어, 한국어에 대해 글꼴을 별도로 설정할 수 있습니다.
다크 또는 라이트 모드 자체가 검색 순위에 직접적인 영향을 주지는 않습니다. 실제로 중요한 것은 콘텐츠 가독성, 페이지에 적절한 제목과 설명이 있는지, 공개 사이트가 올바르게 로드되는지 여부입니다.
이것들은 현재 사이트 전체 설정입니다. 특정 페이지에 다른 강조를 주고 싶다면, 해당 페이지의 이미지, 복사본 및 모듈 배열을 사용하여 차별화를 만드세요.
브랜드 색상 배경에 표시되는 텍스트 또는 아이콘의 색상입니다. 시스템은 기본적으로 읽기 쉬운 검정 또는 흰색을 사용합니다. 브랜드 가이드라인에서 요구하는 경우, 이를 재정의하고 대비 경고를 확인할 수 있습니다.
