--- title: 코드 및 위젯: 사용자 지정 CSS 및 스크립트 description: 사용자 지정 CSS, 헤더 및 바디 코드(카운터, 채팅, 픽셀) 추가, 제한 및 보안 설정 방법. section: account keywords: 사용자 지정 CSS, 헤더 코드, 본문 코드, 카운터, 구글 애널리틱스, 픽셀, 채팅 위젯 updated: 2026-09-16 --- 설정의 "코드 및 위젯" 섹션에서는 카운터, 광고 픽셀, 채팅 위젯, 쿠키 배너와 같은 사용자 지정 코드는 물론, 웹사이트의 모양을 세밀하게 조정하기 위한 CSS 코드도 삽입할 수 있습니다. ![코드 및 위젯 블록](/wiki/img/settings-code.webp "헤더와 바디 끝부분에 코드를 넣으세요.") ## 헤드와 바디에 코드 - **헤더 코드** - 각 웹사이트 페이지의 `` 에 삽입됩니다. Google Analytics, Meta Pixel 및 검증 메타 태그에 사용됩니다. - **본문 끝의 코드는** `` 앞에 삽입됩니다. 채팅 위젯, 쿠키 배너 및 페이지 로드가 필요한 스크립트에 사용됩니다. 서비스에서 제공하는 전체 코드를 붙여넣고 "저장"을 클릭하세요. 필드당 문자 제한은 20,000자입니다. 이 코드는 공개 웹사이트에서만 작동하며, 사용자 계정에서는 사용할 수 없습니다. 예시: - Google Analytics 4 - 헤더에 `gtag.js` 조각 삽입. - 메타 픽셀은 헤드에 있는 픽셀의 일부 조각입니다. - 채팅 위젯(Tawk, Crisp, JivoChat) - 본문 내 스크립트. - Google/Bing/Yandex 권한 확인은 SEO 블록 → "권한 확인"을 통해 더욱 편리하게 진행할 수 있습니다. ## 사용자 지정 CSS 사용자 지정 CSS는 AI 비서 또는 연결된 AI 챗봇을 통해 추가할 수 있습니다. 예를 들어 "CSS 추가: 버튼을 완전히 둥글게 만들어 주세요."라고 입력하면 비서가 코드를 확인하고 사이트에 적용합니다. 더욱 세밀한 사용자 지정을 위해서는 카드에는 `[data-asd="card"]`, 헤더에는 `[data-asd="header"]`, 히어로 블록에는 `[data-asd="block-hero"]` 와 같은 사이트 요소 속성을 사용하세요. 비서가 관련 속성 목록을 제안해 줄 것입니다. 사용자가 작성한 CSS는 카탈로그의 CSS 스타일과 별도로 저장됩니다. 따라서 스타일을 변경하면 수정 사항이 그대로 유지됩니다. ## 제한 사항 및 안전 - CSS에서 `