브랜드 비주얼 및 스타일 설정

개요

브랜드 비주얼은 웹사이트의 전반적인 느낌을 결정합니다. 글꼴, 색상, 텍스트 크기, 밀도, 둥근 모서리, 라이트/다크 모드는 사소한 디테일처럼 보일 수 있지만, 이러한 요소들이 함께 작용하여 방문자가 사이트를 명확하고 신뢰할 수 있으며 브랜드와 일치한다고 느끼게 합니다.

이 설정은 사이트 전체에 적용됩니다. 페이지마다 글꼴이나 브랜드 색상을 재설정할 필요가 없습니다. 한 번 설정하면 사이트 전체의 모듈이 동일한 방향성을 사용합니다.

설정 위치

편집기의 "설정" → "디자인"을 엽니다. 조정하면서 데스크톱, 태블릿, 모바일에서의 효과를 동시에 미리 볼 수 있습니다.

한 번에 한두 가지 항목만 변경하고 전체적인 효과를 관찰해 보세요. 글꼴, 색상, 간격, 그리고 많은 이미지를 한꺼번에 변경하면 어떤 변경이 사이트를 보기 싫게 만들었는지 파악하기 어렵습니다.

글꼴 및 타이포그래피

타이포그래피는 단순히 보기 좋은 글꼴을 선택하는 것 이상입니다. 언어별로 다른 글꼴을 설정하고 H1, H2, H3, 본문 텍스트의 타이포그래피를 조정할 수 있습니다.

언어별 글꼴 설정

"디자인" 설정에는 먼저 사이트의 콘텐츠 언어와 가장 관련성이 높은 글꼴 필드가 표시됩니다. "다국어 글꼴"을 확장하면 영어, 번체 중국어, 간체 중국어, 일본어, 한국어 글꼴을 별도로 설정할 수 있습니다.

각 언어별로 제공되는 큐레이션된 글꼴의 대략적인 수는 다음과 같습니다.

| 언어 | |--------------|--------------| | 영어 | 170개 글꼴 | | 번체 중국어 | 60개 글꼴 | | 간체 중국어 | 30개 글꼴 | | 일본어 | 70개 글꼴 | | 한국어 | 40개 글꼴 |

각 언어별 메뉴는 글꼴 지원 여부에 따라 필터링되므로, 중국어 콘텐츠에 영어만 지원하는 글꼴을 적용하는 것에 대해 걱정할 필요가 없습니다. 사용 가능한 글꼴 목록은 업데이트에 따라 변경될 수 있으며, 현재 사용자 지정 글꼴 파일 업로드는 지원되지 않습니다.

사이트에 중국어와 영어 콘텐츠가 모두 있다면, 제목, 버튼, 본문 텍스트에서 두 언어가 어떻게 보이는지 확인하세요. 글꼴 선택의 원칙은 "개성보다 명확성"입니다. 브랜드 이름이나 주요 제목에는 약간의 개성을 부여할 수 있지만, 긴 본문 텍스트는 모바일에서 쉽게 읽을 수 있어야 합니다.

타이포그래피 크기 조정

H1, H2, H3, 본문 텍스트의 타이포그래피 크기를 각각 9가지 크기 수준으로 개별적으로 조정할 수 있습니다. H1은 페이지에서 가장 중요한 제목이고, H2와 H3는 섹션 계층 구조에 사용되며, 본문 텍스트는 일반적인 설명 콘텐츠용입니다.

모든 텍스트를 단순히 크게 만들지 마세요. 명확한 제목 계층 구조는 방문자가 콘텐츠를 스캔하는 데 도움이 되며, 접근성 도구가 페이지 구조를 이해하는 데 도움을 줍니다.

브랜드 색상, 텍스트 색상 및 표시 모드

Kanorio의 사이트 전체 색상 설정은 다음 세 가지 영역에 집중되어 있습니다.

| 설정 | |--------------|--------------| | 기본 브랜드 색상 | 버튼, 강조 표시, 링크 및 일부 배경에 사용되는 메인 색상입니다. 라이트 모드와 다크 모드에 대해 별도의 색상 세트가 있습니다. | 브랜드 텍스트 색상 | 기본 브랜드 색상 배경에 표시되는 텍스트 또는 아이콘의 색상입니다. 시스템이 자동으로 흑백 대비를 결정하거나, 각 모드에 대해 수동으로 재정의할 수 있습니다. | 표시 모드 | 공개 사이트가 방문자의 시스템 환경 설정을 따를지, 아니면 라이트 또는 다크 표시로 고정될지를 결정합니다.

사이트 전체의 보조 색상이나 배경 색상에 대한 별도의 필드는 없습니다. 기본 브랜드 색상, 모듈 이미지, 콘텐츠 계층 구조를 사용하여 시각적 강조를 만드세요.

기본 브랜드 색상 선택

브랜드 색상 선택기에는 24가지 사전 설정 조합이 있으며, 클래식한 생동감, 차분한(모란디), 흙빛/중성 팔레트로 나뉩니다. 각 세트에는 라이트 모드와 다크 모드 모두에 적합한 페어 색상이 포함되어 있습니다.

브랜드에 이미 색상 가이드라인이 있다면, 색상 선택기를 사용하거나 Hex, RGB 또는 HSL 색상 코드를 수동으로 입력할 수도 있습니다. 선택기는 최근 사용한 색상을 기억하여 쉽게 다시 사용할 수 있도록 합니다. 라이트 모드 색상을 조정한 후에는 시스템이 다크 모드에 대한 시작 제안도 생성하는 데 도움이 됩니다. 결과를 확인하기 위해 반드시 모드를 전환해 보세요.

브랜드 텍스트 색상 및 대비 확인

버튼이나 블록이 브랜드 색상을 배경으로 사용할 때, 텍스트는 가독성을 위해 충분한 대비가 필요합니다. 시스템은 기본적으로 흑백 텍스트를 자동으로 선택하며 대비 경고를 표시합니다. 브랜드 가이드라인에서 특정 텍스트 색상을 요구하는 경우 수동으로 조정할 수도 있습니다.

중요한 정보를 전달하기 위해 색상에만 의존하지 마세요. 예를 들어 오류 메시지를 빨간색으로만 표시하는 경우입니다. 색각 차이가 있는 방문자도 이해할 수 있도록 명확한 텍스트, 아이콘 또는 위치 단서를 사용하세요.

표시 모드 선택

"시스템 따르기"를 선택하기 전에 두 모드를 모두 확인하세요. 로고, 사진 또는 브랜드 색상이 어두운 배경에서 명확하게 보이지 않으면, 라이트 모드를 강제하거나 다크 모드 브랜드 색상을 조정하는 것을 고려하세요.

모듈 밀도

밀도는 모듈 간의 간격을 제어하여 콘텐츠가 얼마나 촘촘하거나 여유롭게 보이는지를 결정합니다. Kanorio는 사이트 전체에 두 가지 옵션을 제공합니다.

모바일 미리보기에서 이를 확인하세요. 너무 콤팩트한 설정은 버튼과 단락을 읽기 어렵게 만들 수 있으며, 너무 여유로운 설정은 과도한 스크롤을 필요로 합니다.

둥근 모서리

둥근 모서리는 버튼, 카드, 이미지의 가장자리가 얼마나 사각형인지 또는 둥근지를 제어합니다. 이 설정도 사이트 전체에 적용됩니다.

선택할 때는 로고, 제품 스타일, 사진 분위기와 일치시키세요. 모든 모듈에 다른 스타일을 사용할 필요는 없습니다.

웹사이트 아이콘 (파비콘)

웹사이트 아이콘은 브라우저 탭과 북마크 옆에 있는 작은 그래픽입니다. "디자인" 탭에서 설정되지 않습니다. "사이트 관리" → "일반"에서 조정하세요.

로고를 기반으로 한 시스템 생성 아이콘을 그대로 사용하거나 사용자 지정 아이콘을 업로드할 수 있습니다. 파비콘은 매우 작으므로 너무 많은 텍스트나 아주 가는 선은 포함하지 않도록 하세요.

게시 전 체크리스트

1. 라이트 및 다크 미리보기를 전환하여 로고, 버튼, 텍스트의 대비를 확인합니다.
2. 모바일 미리보기로 전환하여 제목이 너무 길지 않고 버튼을 쉽게 탭할 수 있는지 확인합니다.
3. 동일한 유형의 버튼, 카드, 제목이 일관된 스타일을 사용하고 있는지 확인합니다.
4. 완료되면 "게시"를 클릭하여 공개 사이트를 업데이트합니다.

빠른 팁

• 브랜드 가이드라인이 없다면, 하나의 기본 브랜드 색상, 하나의 글꼴 방향, 하나의 밀도, 하나의 모서리 스타일을 선택하는 것부터 시작하세요. 한 번에 너무 많은 스타일을 사용하지 마세요.
• 데스크톱 화면뿐만 아니라 실제 휴대폰으로 확인하세요. 모바일에서는 작은 텍스트와 낮은 대비가 더 문제가 됩니다.
• 세련된 모양을 얻기 위해 더 많은 색상이 필요한 것은 아닙니다. 여백, 일관성, 명확한 계층 구조가 일반적으로 더 중요합니다.

관련 문서

• 사이트 전체 설정 및 관리
• 헤더 및 푸터 디자인
• 이미지 및 미디어 에셋
• 초안, 저장 및 게시

metaTitle: 브랜드 비주얼 및 스타일 설정 | 도움말 센터 | Kanorio metaDescription: Kanorio 브랜드 비주얼 설정: 언어별 글꼴, 타이포그래피 크기, 24가지 브랜드 색상 옵션, 텍스트 대비, 라이트/다크 모드, 밀도, 둥근 모서리, 파비콘. metaKeywords: 브랜드 비주얼, 웹사이트 스타일, 글꼴 설정, 다국어 글꼴, 브랜드 색상, 색상 구성표, 다크 모드, 밀도, 둥근 모서리, 파비콘, 웹사이트 디자인 ogImageAlt: canonicalUrl: https://kanorio.com/ko/help/brand-visual