색상, 글꼴과 테마

브랜드 색상, 강조색, 자체 표면 색상, 모서리 반경, 글꼴, 라이트·다크 모드, 템플릿과 사용자 지정 CSS를 설정하고, 위젯이 모든 텍스트의 가독성을 확보하는 방식을 설명합니다.

위젯에 브랜드 색상과 글꼴을 적용하고, 원한다면 전체 색상 구성을 직접 지정할 수 있습니다. 이때 모든 표면에서 모든 텍스트를 읽을 수 있도록 다시 계산합니다. 색상을 선택하면 위젯이 대비를 처리합니다.

이 페이지의 설정은 모두 /app/projects/{id}의 외관 탭, 브랜드 설정 섹션에 있습니다. 색상 테마(라이트, 다크, 자동)만 예외로, 설치 탭의 기본 설정에 있습니다.

디자인 어시스턴트

브랜드 설정 섹션 상단의 어시스턴트가 네 단계로 디자인을 안내합니다.

스타일 – 미리 준비된 템플릿 18개를 라이트, 다크, 전문적, 경쾌함, 아늑함, 차분함, 미니멀 필터로 살펴볼 수 있습니다. 예를 들면 Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit, Espresso가 있습니다.
색상 – 주 색상과 강조색, 빠르게 선택할 수 있는 색상 조합 8개, 기본·라이트·다크·사용자 지정 표면을 선택합니다.
형태 – 창 스타일, 모서리 반경, 채팅 버튼의 형태와 크기를 선택합니다.
완료 – 설정을 요약합니다.

어시스턴트 자체는 저장하지 않습니다. 아래 필드를 채울 뿐이며 저장을 눌러야 저장됩니다. 어시스턴트의 축소 이미지는 개략적인 모습입니다. 실제 설정값이 적용된 위젯은 위젯 홈 화면 섹션의 미리보기에서 확인할 수 있습니다.

세부적으로 조정하려면 모든 설정을 개별적으로를 펼칩니다. 글꼴과 사용자 지정 CSS는 여기에서만 설정할 수 있습니다.

필드

주 색상 – #rrggbb 형식의 브랜드 색상입니다. 채팅 버튼, 전송 버튼, 링크, 포커스, 방문자 말풍선(혼합색)에 적용됩니다. 직접 지정하지 않으면 라이트 테마에서는 보라색 #6D28D9, 다크 테마에서는 #9B7BFF를 사용합니다.
강조색 – 카운터나 강조 표시에 사용하는 두 번째 색상으로, #rrggbb 형식입니다. 직접 지정하지 않으면 라이트 모드에서는 #BE185D, 다크 모드에서는 #FF6B8A를 사용합니다.
모서리 반경(px) – 0–28입니다. 0은 직각이며 기본값은 12입니다.
글꼴 패밀리(CSS) – Inter, system-ui, sans-serif 등의 CSS 값으로, 최대 120자입니다. 위젯은 글꼴 파일을 로드하지 않습니다. 페이지에서 이미 로드하는 글꼴이나 시스템 글꼴을 사용합니다. 비워 두면 기기의 시스템 글꼴을 사용합니다.
템플릿 – 한 번 클릭하면 색상, 표면, 모서리 반경, 채팅 버튼과 스타일을 한꺼번에 채웁니다. 저장을 눌러야 저장됩니다.

6자리 #rrggbb 형식의 색상만 유효합니다. #f00 같은 짧은 표기나 rgb(…)는 무시하고 기본값을 적용합니다.

표면과 텍스트

표면과 텍스트에서 필요에 따라 다섯 가지 색상을 추가로 설정할 수 있습니다. 각 항목에는 사용자 지정 색상 확인란이 있습니다.

배경 – 창의 표면입니다.
말풍선 표면 – 팀과 어시스턴트의 말풍선입니다.
텍스트 – 텍스트 색상입니다.
보조 텍스트 – 시각, 안내, 두 번째 줄입니다.
구분선 – 구분선과 테두리입니다.

선택하지 않으면 위젯은 웹사이트에 맞는 라이트 또는 다크 색상 구성을 사용합니다. 이때 필드에 있는 값은 초기값일 뿐 실제 적용값을 표시하는 것은 아닙니다. 선택하면 지정한 색상을 적용합니다.

배경만 직접 지정하면 위젯은 나머지 말풍선 표면, 텍스트, 보조 텍스트와 구분선 색상을 해당 배경에서 계산합니다.

가독성: 위젯이 다시 계산하는 내용

고객은 가독성이 보장된 색상이 아니라 브랜드 색상을 선택합니다. 따라서 위젯은 텍스트와 표면의 모든 조합이 최소 4.5:1의 대비율을 충족하는지 확인합니다. 이는 WCAG 2.x의 일반 텍스트 기준입니다.

브랜드 색상 위의 텍스트(전송 버튼 등)는 흰색과 검정에 가까운 색 중 더 읽기 쉬운 색으로 자동 설정됩니다.
텍스트 색상으로 쓰이는 브랜드 색상(링크, 강조)은 4.5:1에 도달할 때까지 조금씩 밝아지거나 어두워집니다. 표면, 즉 채팅 버튼과 전송 버튼은 지정한 색상을 그대로 유지합니다.
방문자의 말풍선은 브랜드 색상과 배경의 혼합색입니다. 대비가 부족하면 브랜드 색상의 비중을 줄입니다.
직접 지정한 텍스트 및 보조 텍스트 색상도 표시되는 모든 표면을 기준으로 같은 검사를 거칩니다.

다시 계산한 내용은 계정의 양식 바로 아래 텍스트 가독성을 위해 다시 계산됨 줄에 표시됩니다. 따라서 밝은 노란색을 텍스트 색상으로 지정하면 위젯에서 더 어둡게 보이며, 여기서 그 이유를 확인할 수 있습니다.

페이지에서 측정값을 직접 조회할 수도 있습니다.

ReactiveChat('brandCheck');   // list of pairings with measured and required contrast
ReactiveChat('brandTokens');  // the colours actually used in the widget

라이트, 다크 또는 웹사이트에 맞추기

설치 → 기본 설정 → 위젯 색상 테마에서 다음 중 하나를 선택합니다.

웹사이트에 맞추기(그 외에는 방문자의 시스템 설정) – 기본값입니다. 위젯은 페이지가 밝은지 어두운지 확인하고 맞춥니다.
라이트 – 항상 밝게 표시합니다.
다크 – 항상 어둡게 표시합니다.

자동 선택 시 위젯은 다음 순서로 확인합니다.

화면 중앙에 있는 페이지의 배경색,
<html>의 color-scheme CSS 값이 정확히 dark 또는 light인지 여부,
<html> 또는 <body>의 일반적인 전환 표시. 예를 들어 dark 클래스나 data-theme="dark",
마지막으로 방문자의 시스템 설정.

페이지가 라이트와 다크 사이에서 전환되면 위젯도 따릅니다. 창을 열 때도 다시 확인합니다.

코드에서는 스니펫이나 실행 중에 테마를 설정할 수 있습니다. 이 설정은 계정 설정보다 우선합니다.

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' or 'auto'

setTheme을 사용하면 위젯이 방문자의 브라우저에 선택을 기억합니다. setTheme('auto')는 이를 다시 지웁니다. 페이지 자체의 라이트·다크 전환 버튼에 적합합니다.

코드에서 색상 설정

캠페인 페이지 등 개별 페이지에는 스니펫이나 실행 중에 브랜드 설정을 지정할 수 있습니다. 필드 이름은 다음과 같습니다.

primary, accent – 브랜드 색상과 강조색,
bg, surface, text, textDim, line – 다섯 가지 표면,
onPrimary – 브랜드 색상 위의 텍스트 색상(그 외에는 자동),
radius – 0–28,
font – CSS 글꼴 값,
launcher와 stil – 채팅 버튼과 채팅 창을 참조합니다.

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand는 위젯을 다시 만들지 않고 대비와 파생 색상을 즉시 다시 계산합니다. null은 해당 값을 제거하고 기본값을 적용합니다.

스니펫의 속성 이름은 data-rc-brand이며 JSON을 받습니다.

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

중요 – 스니펫과 계정 중 무엇이 우선하나요? 계정에서 생성하는 스니펫에는 이미 브랜드 색상, 모서리 반경, 채팅 버튼의 형태와 크기가 포함됩니다. 이는 채팅 버튼이 처음부터 올바른 색상으로 표시되도록 하는 초기 상태일 뿐입니다. 위젯이 서버 설정을 받으면 계정의 설정이 전부 적용됩니다.

그러나 data-rc-brand에 accent, stil, 레이블 같은 추가 필드를 하나라도 넣으면 스니펫의 브랜드 설정을 해당 페이지의 자체 브랜드 설정으로 간주합니다. 이때는 계정보다 우선합니다. 계정 설정에서는 “자체 링크로만 표시” 옵션만 이 페이지에 계속 적용됩니다. 또한 이 페이지는 A/B 테스트에 참여하지 않습니다.

계정에서 브랜드 색상을 변경한 후에는 설치에서 삽입 스니펫을 다시 복사합니다. 그렇지 않으면 페이지를 로드할 때 이전 색상이 잠깐 나타납니다.

스니펫 자체의 작동 방식과 다른 설정 방법(window.ReactiveChatSettings, ReactiveChat('boot', …))은 기술 연동에 설명되어 있습니다.

사용자 지정 CSS

모든 설정을 개별적으로 → 사용자 지정 CSS에 다른 모든 규칙 뒤에 마지막으로 적용할 CSS를 작성합니다.

최대 20,000자입니다.
@import는 저장 시와 위젯 내에서 모두 제거됩니다.
CSS는 위젯 내부에서만 적용됩니다. 격리된 영역(shadow DOM)에서 실행되므로 페이지를 변경할 수 없습니다. 반대로 페이지의 CSS도 위젯에 적용되지 않습니다. 이곳에서 지정해야 합니다.
위젯은 이후 두 규칙을 다시 적용합니다. 키보드 사용자를 위한 눈에 보이는 포커스 테두리와 헤더의 닫기 버튼입니다. 스타일로 채팅의 출구를 없애면 키보드 사용자가 갇힙니다.
위젯 내부의 클래스 이름은 보장된 인터페이스가 아닙니다. 변경 후 미리보기에서 CSS를 확인합니다.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

코드에서는 customCss로도 같은 설정을 할 수 있습니다. 예를 들어 ReactiveChat('boot', { customCss: '…' })나 data-rc-custom-css 속성을 사용합니다.

창 헤더의 로고

가장 간단한 방법은 계정의 프로젝트 → 외관 → 브랜드 설정에서 로고(주소) 필드에 로고를 입력하는 것입니다. 그러면 저장 후 늦어도 1분 안에 채팅 창 헤더에 나타납니다.

코드에서는 logo로 높이, 대체 텍스트와 위치도 설정할 수 있습니다. 예를 들어 채팅 버튼에 로고를 넣을 수 있습니다. 코드로 설정한 로고는 계정 필드보다 우선합니다.

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Example Ltd","height":24,"placement":"header"}'
        async></script>

src – https:// 주소 또는 data:image/… 형식의 이미지입니다. 작은 SVG를 data: 주소로 넣으면 요청 하나를 줄일 수 있습니다.
alt – 대체 텍스트입니다.
height – 픽셀 단위 높이로, 12–40이며 기본값은 20입니다.
placement – header(헤더, 기본값), launcher(채팅 버튼 안) 또는 both입니다.

홈 화면의 로고는 계정에서 쉽게 설정할 수 있습니다. 채팅 홈 화면을 참조합니다.

예상과 다르게 보이는 경우

입력한 색상보다 어둡거나 밝은 경우: 대비 보호 기능 때문입니다. 양식 아래의 다시 계산됨 줄에서 조정한 내용을 확인할 수 있습니다.
계정 변경 사항이 반영되지 않는 경우: 스니펫의 data-rc-brand에 추가 필드가 있나요? 그러면 스니펫이 우선합니다. 또한 저장 후 반영까지 최대 1분이 걸립니다.
로드 중 다른 색상이 잠깐 나타나는 경우: 색상 변경 후 스니펫을 다시 복사합니다.
글꼴이 적용되지 않는 경우: 페이지에서 해당 글꼴을 로드하나요? 위젯은 글꼴 파일을 로드하지 않습니다.

최종 업데이트: 2026-10-25