위치 설정
최종 수정: 2026. 1. 12.
챗봇 위치 및 여백 설정
웹사이트의 레이아웃을 방해하지 않도록 챗봇 런처의 위치를 세밀하게 조정할 수 있습니다.
1. 버튼 위치 설정
가로 위치
| 옵션 | 설명 |
|---|---|
| 왼쪽 | 화면 왼쪽에 런처 버튼 배치 |
| 오른쪽 (기본값) | 화면 오른쪽에 런처 버튼 배치 |
세로 위치
| 옵션 | 설명 |
|---|---|
| 위 | 화면 상단에 런처 버튼 배치 |
| 아래 (기본값) | 화면 하단에 런처 버튼 배치 |
일반적인 설정: 대부분의 웹사이트에서는 오른쪽 + 아래 조합을 사용합니다.
2. 여백(Margin) 조정
화면 끝에서부터 런처 버튼까지의 간격을 픽셀(px) 단위로 설정합니다.
가로 여백
- 좌측 또는 우측 화면 끝에서 런처 버튼까지의 거리
- 입력 단위: 픽셀(px)
- 기본값: 30px
세로 여백
- 상단 또는 하단 화면 끝에서 런처 버튼까지의 거리
- 입력 단위: 픽셀(px)
- 기본값: 30px
3. 권장 설정값
| 환경 | 권장 여백 | 이유 |
|---|---|---|
| 일반 | 20~30px | 적당한 간격으로 깔끔한 배치 |
| TOP 버튼 있음 | 80~100px | 다른 플로팅 버튼과 겹침 방지 |
| 모바일 고려 | 20px 내외 | 좁은 화면에서 콘텐츠 가림 방지 |
4. 미리보기 및 저장
실시간 미리보기
디자인 관리 페이지에서는 실제 챗봇 위젯이 함께 표시되어 설정 변경 시 실시간으로 위치 변화를 확인할 수 있습니다.
저장
- 원하는 위치와 여백을 설정합니다.
- 위젯 미리보기에서 결과를 확인합니다.
- 페이지 상단의 [디자인 저장하기] 버튼을 클릭합니다.
중요: 저장 버튼을 클릭하지 않으면 변경 사항이 반영되지 않습니다.
배치 팁
- TOP 버튼과의 충돌 방지: 웹사이트 하단에 'TOP' 버튼이나 다른 플로팅 버튼이 있는 경우, 세로 여백을 충분히 조절하여 겹치지 않게 배치하세요.
- 모바일 테스트: PC와 모바일 모두에서 테스트해 보시고, 두 환경 모두에서 적절해 보이는 간격을 설정하세요.
- 콘텐츠 가림 주의: 런처가 중요한 버튼이나 내비게이션을 가리지 않도록 주의하세요.