로고, 외관 모드, 브랜드 색상, 글꼴, 테두리 반경은 웹사이트뿐만 아니라 결제 페이지, 고객 로그인 페이지, 고객 포털, 자동 이메일, 온라인 코스 수료증 등 모든 접점에서 브랜드 아이덴티티를 정의합니다. Kanorio는 이러한 설정을 "사이트 설정 › 브랜드"에 중앙 집중화하여 한 번의 업데이트로 모든 곳에서 일관성을 유지할 수 있도록 합니다.
이는 사이트 구축 방식과 관계없이 적용됩니다. Kanorio로 사이트를 만들면 이러한 설정이 자동으로 적용됩니다. 헤드리스 웹사이트의 경우에도 결제, 로그인, 이메일은 여전히 이러한 설정을 사용하며, 프론트엔드는 Content Delivery API의 brand 객체나 Kanorio Elements를 통해 동일한 값을 가져올 수 있습니다(아래 "헤드리스와 함께 사용하기" 참조).
| 항목 | 설명 | 권장 사항 |
|---|---|---|
| 브랜드 로고 | 이미지를 업로드하거나 내장된 아이콘을 선택하세요. 다크 배경 전용 로고를 별도로 업로드할 수도 있습니다. | 외관 모드를 "자동" 또는 "다크"로 설정한 경우, 다크 배경에서도 로고가 잘 보이도록 다크 모드용 버전을 추가하는 것이 좋습니다. |
| 파비콘 | 브라우저 탭과 북마크 옆에 표시되는 작은 아이콘입니다. 기본적으로 브랜드 로고에서 자동으로 생성됩니다. 아이콘 기반 로고는 브랜드 색상을 사용하여 흰색 배경에 렌더링됩니다. 로고나 브랜드 색상을 변경할 때마다 자동으로 업데이트됩니다. 아래 미리보기에서 저장 후의 모습을 확인할 수 있습니다. | 로고가 너무 복잡하거나 긴 텍스트가 포함된 경우, 자동 생성을 끄고 작은 정사각형 아이콘을 직접 업로드하세요. |
| 외관 모드 | 사이트, 결제, 로그인, 고객 포털의 테마를 라이트 또는 다크 모드 중에서 선택하세요. "자동"은 방문자의 기기 설정을 따르며, "라이트"와 "다크"는 모든 방문자에게 일관된 외관을 강제합니다. 헤드리스 사이트의 경우, 이 설정은 Kanorio에서 제공하는 결제, 로그인, 고객 포털에 적용됩니다. | "자동"을 선택할 때는 라이트 모드와 다크 모드를 모두 확인하세요. 한 가지 모드로 고정할 경우, 해당 모드에 맞는 브랜드 색상만 설정하면 됩니다. |
| 브랜드 색상 | 버튼, 링크, 강조 아이콘 및 브랜드 색상이 적용된 섹션의 기본 색상입니다. 라이트 모드와 다크 모드에 대해 서로 다른 색상을 설정할 수 있습니다. 제공된 팔레트에서 선택하거나 사용자 지정 16진수 코드를 입력하세요. | 다크 모드의 브랜드 색상은 다크 배경에서도 가독성을 유지할 수 있도록 라이트 모드보다 약간 밝은 색상을 사용하는 것이 좋습니다. |
| 브랜드 텍스트 색상 | 브랜드 색상이 적용된 버튼이나 배경 위에 표시되는 텍스트 색상입니다. 대비에 따라 기본적으로 검은색 또는 흰색으로 설정되지만, 수동으로 지정할 수도 있습니다. | 수동으로 지정할 때는 대비를 고려하세요. 페이지 오른쪽의 미리보기에서 결과를 실시간으로 확인할 수 있습니다. |
| 글꼴 | 사이트의 기본 언어에 대한 본문 글꼴을 표시합니다. "더 많은 언어 글꼴"을 확장하여 영어, 번체 중국어, 간체 중국어, 일본어, 한국어에 대한 특정 글꼴을 선택할 수 있습니다. 모든 글꼴은 플랫폼에서 호스팅하며, 사용자 지정 글꼴 파일 업로드 기능은 지원하지 않습니다. | 중국어와 영어가 혼합된 사이트의 경우, 각 언어별로 별도의 글꼴을 선택하면 더 나은 시각적 경험을 제공할 수 있습니다. |
페이지 오른쪽(모바일에서는 폼 아래)에서 웹사이트, 결제, 로그인, 이메일 전반에 걸쳐 브랜드가 어떻게 나타나는지 보여주는 실시간 미리보기를 확인할 수 있습니다("웹사이트" 미리보기는 헤드리스 설정 시 숨겨집니다). 라이트 모드와 다크 모드 사이를 전환할 수 있습니다. 이메일 카드와 버튼 스타일은 고정되어 있지만 로고의 테두리 반경은 상속됩니다. 이메일용 로고 크기와 위치는 에서 관리됩니다.
변경 사항은 페이지 하단의 "저장"을 클릭한 즉시 적용됩니다. 에디터로 돌아가서 "게시"를 클릭할 필요가 없습니다.
brand 값 및 Kanorio Elements텍스트 크기와 모듈 밀도는 에디터의 "디자인" 패널에서 관리되는 레이아웃 설정이며, 적용하려면 "게시" 작업이 필요합니다. "디자인" 패널은 현재 브랜드 설정을 표시하고 수정을 위해 이 페이지로 연결되는 링크를 제공합니다. 사용자 지정 버튼, 브랜드 관련 URL 및 가맹점 정보는 에디터의 "브랜드 정보" 패널에서 관리됩니다. 자세한 내용은 을 참조하십시오.
헤드리스 웹사이트의 경우, Kanorio에서 호스팅하는 페이지(결제, 로그인, 포털, 이메일)는 이러한 설정을 자동으로 사용합니다. 자체 프론트엔드를 이러한 브랜드 값과 동기화하는 두 가지 방법은 다음과 같습니다.
GET /site의 brand 객체는 계산된 색상 팔레트(라이트 및 다크, 접근 가능한 텍스트 색상 포함), 선택한 외관 모드, 배경용 로고, 글꼴 패밀리, 스타일시트 URL, 레이아웃에 직접 사용할 수 있는 테두리 반경 값을 제공합니다.기술적인 세부 사항은 를 참조하십시오.
브랜드 색상, 외관 모드, 글꼴, 테두리 반경은 결제, 로그인, 이메일 페이지를 포함하여 전역적으로 사용됩니다. 이를 "사이트 설정 › 브랜드"에 중앙 집중화하면 불일치를 방지할 수 있습니다. "디자인" 패널은 현재 브랜드를 표시하고 여기에서 업데이트할 수 있는 링크를 제공하며, 텍스트 크기나 밀도와 같은 레이아웃 관련 설정은 "디자인" 패널에 유지됩니다.
브랜드 설정은 게시 작업 없이 즉시 적용됩니다. 변경 사항이 보이지 않으면 페이지를 새로고침하십시오. 브라우저가 이전 스타일을 캐시하고 있을 수 있습니다.
네, 권장합니다. 자체 웹사이트를 호스팅하더라도 결제, 로그인, 고객 포털, 이메일은 여전히 Kanorio가 제공합니다. 이를 구성하면 Kanorio가 호스팅하는 모든 접점에서 로고와 브랜드 색상의 일관성을 유지할 수 있습니다. 또한 프론트엔드에서 API와 Elements를 사용하여 완벽하게 동기화할 수 있습니다.
| 모서리 반경 | 버튼, 카드, 입력 필드 및 이미지의 모서리 곡률을 균일하게 조정합니다. "사각형", "일반", "둥근 모양" 중에서 선택할 수 있습니다. | 미리보기에서 버튼과 카드를 동시에 확인할 수 있으므로, 브랜드 이미지에 가장 잘 어울리는 것을 선택하세요. |