스타일링
TapKit UI 스타일 커스터마이징
스타일링
TapKit은 style 속성으로 직접 크기와 위치를 지정합니다.
기본 사용법
style 속성으로 크기를 지정합니다.
const kit = document.querySelector('tap-kit');
kit.style.width = '400px';
kit.style.height = '600px';또는 HTML에서 직접 지정:
<tap-kit
style="width: 400px; height: 100%;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>표시 모드
TapKit은 3가지 표시 모드를 지원합니다.
| 모드 | 설명 | 배치 |
|---|---|---|
inline | 페이지 콘텐츠에 임베드 (기본값) | 선언된 위치 |
floating | 컴팩트 위젯 | position: fixed |
sidebar | 전체 높이 사이드바 | position: fixed |
<tap-kit mode="inline" ...></tap-kit>
<tap-kit mode="floating" ...></tap-kit>
<tap-kit mode="sidebar" ...></tap-kit>Inline 모드 (기본값)
Inline 모드는 페이지 콘텐츠에 자연스럽게 임베드됩니다.
<tap-kit
style="width: 100%; height: 600px;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>사이드바 레이아웃 예시
<style>
.app-layout {
display: grid;
grid-template-columns: 1fr 400px;
height: 100vh;
}
</style>
<div class="app-layout">
<main><!-- 강의 콘텐츠 --></main>
<tap-kit
style="width: 100%; height: 100%;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>
</div>Floating 모드
Floating 모드는 position: fixed로 화면에 고정됩니다.
<tap-kit
mode="floating"
style="width: 380px; height: 600px;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>Floating/Sidebar 모드에서는 SDK가 자동으로 위치를 관리합니다.
필요한 경우 style 속성으로 크기만 조정하세요.
Sidebar 모드
Sidebar 모드는 화면 우측에 전체 높이로 표시됩니다.
<tap-kit
mode="sidebar"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>사용자가 드래그로 너비를 조절할 수 있습니다.
레이아웃 토글
기본적으로 사용자가 Floating ↔ Sidebar 모드를 전환할 수 있습니다. 이를 비활성화하려면:
<tap-kit mode="floating" allow-layout-toggle="false" ...></tap-kit>kit.allowLayoutToggle = false;반응형 디자인
미디어 쿼리로 반응형 크기를 지정합니다.
<style>
tap-kit {
width: 100%;
height: 500px;
}
@media (min-width: 768px) {
tap-kit {
width: 500px;
height: 700px;
}
}
</style>
<tap-kit user-id="..." course-id="..." clip-id="..."></tap-kit>CSS Variables
TapKit은 레이아웃 커스터마이징을 위한 CSS Variables를 제공합니다. 기본값을 오버라이드할 때 사용하세요.
Floating 모드 변수
| 변수 | 기본값 | 설명 |
|---|---|---|
--tap-floating-width | 430px | 컨테이너 너비 |
--tap-floating-height | calc(100% - 116px) | 컨테이너 높이 |
--tap-floating-top | 50px | 상단 위치 |
--tap-floating-right | 20px | 우측 위치 |
--tap-floating-bottom | auto | 하단 위치 |
--tap-floating-left | auto | 좌측 위치 |
--tap-floating-border-radius | 10px | 테두리 반경 |
--tap-floating-shadow | (복합값) | 그림자 |
Sidebar 모드 변수
| 변수 | 기본값 | 설명 |
|---|---|---|
--tap-sidebar-width | min(50%, 600px) | 최대 너비 |
--tap-sidebar-border | 1px solid #B8B9B9 | 왼쪽 테두리 |
Inline 모드 변수
| 변수 | 기본값 | 설명 |
|---|---|---|
--tap-kit-width | 100% | 컨테이너 너비 |
--tap-kit-height | 100% | 컨테이너 높이 |
--tap-kit-min-width | 300px | 최소 너비 |
--tap-kit-min-height | 600px | 최소 높이 |
사용 예시
/* Floating 너비 조정 */
tap-kit {
--tap-floating-width: 380px;
}
/* 반응형 Floating */
@media (max-width: 768px) {
tap-kit {
--tap-floating-width: 100%;
--tap-floating-right: 0;
--tap-floating-border-radius: 0;
}
}
/* 넓은 Sidebar */
tap-kit {
--tap-sidebar-width: min(60%, 800px);
}CSS Variables는 TapKit의 외관을 커스터마이징하는 가장 깔끔한 방법입니다. 모든 표시 모드에서 동작하며, 인라인 스타일보다 권장됩니다.
모드 비교
| 특징 | Inline 모드 | Floating/Sidebar 모드 |
|---|---|---|
| 배치 | 페이지 콘텐츠 내부 | 화면에 떠있음 (fixed) |
| 위치 제어 | 부모 요소에 의존 | SDK 자동 관리 |
| 레이아웃 영향 | 있음 | 없음 |
| 사용 사례 | 사이드바, 콘텐츠 일부 | 채팅 위젯 |
| 기본값 | ✅ v2.0+ |
tap-button 스타일링
<tap-button> 요소는 CSS Shadow Parts를 통해 스타일을 커스터마이징할 수 있습니다.
기본 속성
<!-- 위치와 크기 조절 -->
<tap-button
position="bottom-right"
size="large"
></tap-button>| 속성 | 값 | 설명 |
|---|---|---|
position | bottom-right, bottom-left, top-right, top-left, custom | 버튼 위치 |
size | small (48px), medium (56px), large (64px) | 버튼 크기 |
floating | true, false | 고정/플로팅 모드 |
CSS Shadow Parts
외부 CSS로 버튼 스타일을 변경할 수 있습니다.
/* 버튼 스타일 커스터마이징 */
tap-button::part(button) {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 50%;
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}
tap-button::part(button):hover {
transform: scale(1.1);
}
/* 툴팁 스타일 커스터마이징 */
tap-button::part(tooltip) {
background: #1f2937;
color: white;
border-radius: 12px;
}커스텀 아이콘
슬롯을 사용하여 기본 아이콘을 교체할 수 있습니다.
<tap-button position="bottom-right">
<img src="/my-tutor-icon.svg" alt="AI 튜터" />
</tap-button>정적 모드 (비-플로팅)
일반 문서 흐름에 배치하려면 floating="false"를 사용합니다.
<div class="button-container">
<tap-button floating="false" size="medium"></tap-button>
</div>floating="false" 모드에서는 버튼이 position: static으로 렌더링되어 부모 요소 내에서 일반 요소처럼 배치됩니다.