Apidog Docs
🇰🇷 한국인
  • 🇺🇸 English
  • 🇯🇵 日本語
  • 🇪🇸 Español
  • 🇰🇷 한국인
  • 🇨🇳 简体中文
  • 🇵🇹 Português (Portugal)
  • 🇮🇩 Bahasa Indonesia
  • 🇧🇷 Português (Brasil)
  • 🇻🇳 Tiếng Việt
  • 🇨🇳 繁體中文
🇰🇷 한국인
  • 🇺🇸 English
  • 🇯🇵 日本語
  • 🇪🇸 Español
  • 🇰🇷 한국인
  • 🇨🇳 简体中文
  • 🇵🇹 Português (Portugal)
  • 🇮🇩 Bahasa Indonesia
  • 🇧🇷 Português (Brasil)
  • 🇻🇳 Tiếng Việt
  • 🇨🇳 繁體中文
🇰🇷 한국인
  • 🇺🇸 English
  • 🇯🇵 日本語
  • 🇪🇸 Español
  • 🇰🇷 한국인
  • 🇨🇳 简体中文
  • 🇵🇹 Português (Portugal)
  • 🇮🇩 Bahasa Indonesia
  • 🇧🇷 Português (Brasil)
  • 🇻🇳 Tiếng Việt
  • 🇨🇳 繁體中文
HomeLearning Center
Support CenterAPI ReferencesDownloadChangelog
HomeLearning Center
Support CenterAPI ReferencesDownloadChangelog
  1. API 문서 게시
  • Apidog 학습 센터
  • 시작하기
    • Apidog 소개
    • Apidog의 기본 개념
    • Apidog 탐색하기
    • 빠른 시작
      • 개요
      • 엔드포인트 생성하기
      • 요청 만들기
      • 어서션 추가하기
      • 테스트 시나리오 생성
      • API 문서 공유
      • 더 알아보기
    • Apidog로 마이그레이션
      • 개요
      • 수동 가져오기
      • 예약 가져오기(데이터 소스 바인딩)
      • 가져오기 옵션
      • 데이터 내보내기
      • 가져오기
        • Postman에서 가져오기
        • OpenAPI Spec 가져오기
        • cURL 가져오기
        • Markdown 가져오기
        • Insomnia에서 가져오기
        • apiDoc에서 가져오기
        • .har 파일 가져오기
        • WSDL 가져오기
  • Mock API 데이터
    • 개요
    • 스마트 목
    • 사용자 지정 목
    • 목 우선순위 순서
    • 목 스크립트
    • 클라우드 목
    • Self-Hosted Runner Mock
    • 목 언어(로케일)
  • 계정 및 환경설정
    • 계정 설정
    • OpenAPI 액세스 토큰 생성
    • 알림
    • 언어 설정
    • 단축키
    • 네트워크 프록시 구성
    • 데이터 백업
    • Apidog 업데이트
    • 계정 삭제
    • 실험적 기능
  • 요청 보내기
    • 개요
    • SSE 디버깅
    • MCP 클라이언트
    • Socket.IO
    • WebSocket
    • Webhook
    • SOAP 또는 WebService
    • GraphQL
    • gRPC
    • 디버깅에 요청 프록시 에이전트 사용
    • 요청 만들기
      • 요청 기록
      • 요청 기본 사항
      • 매개변수 및 본문
      • 요청 헤더
      • 요청 설정
      • 요청 디버그
      • 요청을 엔드포인트로 저장하기
      • HTTP/2
    • 인증 및 권한 부여
      • 개요
      • CA 및 클라이언트 인증서
      • 인증 유형
      • Digest Auth
      • OAuth 1.0
      • OAuth 2.0
      • Hawk 인증
      • Kerberos
      • NTLM
      • Akamai EdgeGrid
    • 응답 및 쿠키
      • API 응답 보기
      • 쿠키 관리
      • 개요
  • API 개발 및 디버깅
    • 개요
    • 요청 생성
    • 요청 보내기
    • 디버깅 케이스
    • 테스트 케이스
    • 동적 값
    • 응답 검증
    • 디자인 우선 vs 요청 우선
    • 코드 생성
    • 환경 및 변수
      • 개요
      • 변수 사용하기
      • 환경 관리
    • Vault 시크릿
      • 개요
      • HashiCorp Vault
      • Azure Key Vault
      • AWS Secrets Manager
    • 동적 값 모듈
      • Airline
      • 동물
      • 색상
      • Commerce
      • Company
      • 데이터베이스
      • Datatype
      • 날짜
      • 금융
      • Food
      • Git
      • Hacker
      • Helpers
      • Image
      • Internet
      • Location
      • Lorem
      • 음악
      • Number
      • Person
      • Phone
      • 과학
      • String
      • System
      • Vehicle
      • Word
    • 사전/사후 프로세서
      • 개요
      • 어서션
      • 변수 추출
      • Wait
      • 보안
      • 데이터베이스 작업
        • 개요
        • MySQL
        • MongoDB
        • Redis
        • Oracle Client
      • 스크립트 사용
        • 개요
        • 전처리 스크립트
        • 사후 처리 스크립트
        • Public Scripts
        • Postman 스크립트 참조
        • 다른 프로그래밍 언어 호출하기
        • JS 라이브러리 사용하기
        • 응답 시각화
        • 스크립트 예제
          • 어서션 스크립트
          • 변수 사용하기
          • 요청 수정하기
          • 기타 예시
    • API 디버깅
      • AI Agent Debugger
      • A2A Debugger
  • API 설계
    • 개요
    • 새 API 프로젝트 생성
    • 엔드포인트 기본 사항
    • API 설계 지침
    • 모듈
    • 여러 요청 본문 예시 구성
    • 컴포넌트
    • 공통 필드
    • 전역 매개변수
    • 엔드포인트 변경 이력
    • 댓글
    • 엔드포인트 일괄 관리
    • 사용자 지정 프로토콜 API
    • Spec-first 모드(Beta)
    • 보안 스키마
      • 개요
      • 보안 스키마 생성
      • 보안 스키마 사용
      • 온라인 문서의 보안 스키마
    • 고급 기능
      • 사용자 지정 엔드포인트 필드
      • 연결된 테스트 시나리오
      • 엔드포인트 상태
      • 매개변수 목록의 표시 방식
      • 엔드포인트 고유 식별
    • 스키마
      • 개요
      • 새 스키마 생성
      • 스키마 구축
      • JSON 등에서 스키마 생성
      • oneOf, allOf, anyOf
      • Discriminator 사용하기
  • API 테스트
    • 개요
    • 테스트 시나리오
      • 테스트 시나리오 생성
      • 요청 간 데이터 전달
      • 흐름 제어 조건
      • 엔드포인트 및 엔드포인트 케이스에서 데이터 동기화
      • 다른 프로젝트에서 엔드포인트 및 엔드포인트 케이스 가져오기
      • 테스트 시나리오 내보내기
    • 테스트 보고서
      • 테스트 보고서
    • 테스트 시나리오 실행
      • 테스트 시나리오 실행
      • 테스트 시나리오 일괄 실행
      • 데이터 기반 테스트
      • 공유 테스트 데이터
      • 예약 작업
      • 다른 프로젝트의 API 런타임 환경 관리
    • 테스트 스위트
      • 개요
      • 테스트 스위트 생성
      • 테스트 스위트 오케스트레이션
      • 로컬에서 테스트 스위트 실행
      • CLI를 통해 테스트 스위트 실행
      • 예약 작업
    • API 테스트
      • 통합 테스트
      • 성능 테스트
      • 엔드투엔드 테스트
      • 회귀 테스트
      • 계약 테스트
    • Apidog CLI
      • 개요
      • Apidog CLI 설치 및 실행
      • Apidog CLI 옵션
    • CI/CD
      • 개요
      • Github Actions와 통합
      • Gitlab과 통합
      • Jenkins와 통합하기
      • Git 커밋으로 테스트 트리거하기
  • API 문서 게시
    • 개요
    • 지원되는 API 기술
    • Quick Share
    • API 문서 보기
    • Markdown 문서
    • 문서 사이트 게시
    • 사용자 지정 로그인 페이지
    • 사용자 지정 레이아웃
    • 사용자 지정 CSS, JavaScript, HTML
    • 사용자 지정 도메인
    • AI 기능
    • SEO 설정
    • 고급 설정
      • 문서 검색
      • CORS 프록시
      • Google Analytics 통합
      • 폴더 트리 설정
      • 가시성 설정
      • 문서 URL에 값 임베드하기
    • API 버전
      • 개요
      • API 버전 생성
      • API 버전 게시
      • API 버전별 엔드포인트 공유
  • 브랜치
    • 개요
    • 스프린트 브랜치 생성
    • 브랜치에서 API 테스트하기
    • 브랜치에서 API 설계하기
    • 스프린트 브랜치 병합
    • 스프린트 브랜치 관리
    • AI Branch(베타)
  • AI 기능
    • 개요
    • AI 기능 활성화
    • 테스트 케이스 생성
    • AI로 스키마 수정하기
    • 엔드포인트 규정 준수 검사
    • API 문서 완성도 검사
    • AI 기반 필드 명명
    • 자주 묻는 질문
  • Apidog MCP 서버
    • 개요
    • AI에 Apidog 프로젝트 연결
    • 게시된 문서를 AI에 연결하기
    • OpenAPI 파일을 AI에 연결하기
  • 모범 사례
    • API 서명 처리
    • OAuth 2.0으로 보호되는 API에 접근하기
    • 협업 워크플로
    • 인증 상태 관리
  • 오프라인 공간
    • 개요
  • Apidog Europe
    • Apidog Europe
  • 관리
    • 프로젝트 관리
      • 프로젝트 관리
      • 알림 설정
      • 프로젝트 멤버 관리
      • 프로젝트 리소스
        • 데이터베이스 연결
        • Git 연결
    • 팀 관리
      • 팀 관리
      • 팀 멤버 관리
      • 팀 활동
      • 팀 역할 및 권한
      • 팀 리소스
        • General Runner
        • 팀 변수
        • 요청 프록시 에이전트
      • 실시간 협업
        • 팀 협업
    • 온보딩 체크리스트
      • 기본 개념
      • 온보딩 가이드
    • 조직 관리
      • 조직 관리
      • 조직 역할 및 권한
      • 플랜 관리
        • 조직의 청구 관리자
      • Single Sign-On (SSO)
        • SSO 개요
        • Microsoft Entra ID 구성
        • Okta 구성하기
        • 조직에 대한 SSO 구성
        • 사용자 계정 관리
        • 그룹을 팀에 매핑하기
      • SCIM 프로비저닝
        • SCIM 프로비저닝 소개
        • Microsoft Entra ID
        • Okta
      • 조직 리소스
        • 셀프 호스팅 Runner
  • 청구
    • 개요
    • 크레딧
    • 플랜 업그레이드
    • 대체 결제 방법
    • 구독 관리
    • 유료 팀을 조직으로 이동하기
  • 애드온
    • API Hub
    • Apidog Intellij IDEA 플러그인
    • 브라우저 확장 프로그램
      • Chrome
      • Microsoft Edge
    • 요청 프록시
      • 웹에서의 요청 프록시
      • 공유 문서의 요청 프록시
      • 클라이언트의 요청 프록시
  • 데이터 및 보안
    • 데이터 저장 및 보안
    • 사용자 데이터 개인정보 보호 및 보안
    • 요청 라우팅 및 데이터 보안
  • 참조
    • API 설계 우선 접근 방식
    • Apidog OpenAPI 사양 확장
    • JSONPath
    • XPath
    • 정규 표현식
    • JSON Schema
    • CSV 파일 형식
    • Java 환경 설치
    • Runner 배포 환경
    • Apidog Markdown 구문
    • Apidog Swagger 확장
      • 개요
      • x-apidog-folder
      • x-apidog-status
      • x-apidog-name
      • x-apidog-maintainer
    • Apidog JSON Schema 확장
      • 개요
      • x-apidog-mock
      • x-apidog-orders
      • x-apidog-enum
  • 지원 센터
  1. API 문서 게시

사용자 지정 CSS, JavaScript, HTML

API 문서를 게시할 때 사용자 지정 전역 HTML, CSS, JavaScript를 추가하여 페이지 스타일을 개인화하고 기능을 확장할 수 있습니다.
이 기능은 다음과 같은 경우에 유용합니다.
타사 서비스 임베드(예: 챗봇, AI 어시스턴트)
기본 스타일 수정(예: 글꼴, 색상, 배경)
대화형 요소 추가(예: 버튼, 팝업, 빠른 피드백)
이 기능을 적절히 사용하면 문서가 브랜드 아이덴티티를 더 잘 반영하고 사용자 경험을 개선할 수 있습니다.

CSS#

사용자 지정 CSS를 사용하면 글꼴을 변경하고, 요소를 숨기고, 여백을 조정하고, 색상을 변경하는 등 다양한 작업을 수행할 수 있습니다.
향후 업데이트에서 문서 구조가 변경될 수 있으므로, 스타일이 계속 효과적으로 적용되도록 다음 두 가지 원칙을 따르는 것을 권장합니다.
1.
예약된 CSS 변수를 사용하십시오.
2.
예약된 CSS 클래스 이름을 사용하십시오.

예약된 CSS 변수 사용#

Apidog는 글꼴, 색상, 배경과 같은 기본 페이지 스타일을 제어하기 위해 --g- 접두사가 붙은 CSS 변수 세트를 제공합니다. 이러한 변수는 라이트 모드와 다크 모드 모두에 잘 적응하므로 스타일을 더 안정적이고 유지 관리하기 쉽게 만들어 줍니다.
일반 변수 참조
예: 기본 텍스트 색상 변경

예약된 CSS 클래스 이름 사용#

특정 영역을 대상으로 스타일을 적용하려면 .g- 접두사가 붙은 Apidog의 예약 클래스 이름을 사용하십시오. 이러한 클래스 이름은 비교적 안정적이며 DOM 변경으로 인해 깨질 가능성이 낮습니다.
일반 CSS 클래스 참조
예: 왼쪽 사이드바 숨기기

페이지 구조 및 클래스 이름 검사#

위에서 언급한 예약된 CSS 변수와 클래스 이름 외에도, 브라우저의 개발자 도구를 사용하여 수정하려는 페이지 요소에 해당하는 클래스 이름을 찾은 다음 CSS를 작성하여 스타일을 조정할 수 있습니다.
먼저 .g-로 시작하는 클래스 이름을 사용하는 것을 권장합니다. 이러한 클래스 이름은 플랫폼에서 예약되어 있으며, 구조가 비교적 안정적이고 쉽게 실패하지 않습니다. 다른 구조적 클래스 이름은 제품 업그레이드 후 스타일 적용이 실패하지 않도록 주의해서 사용하십시오.
게시된 문서 사이트를 브라우저에서 열고 개발자 도구(개발자 모드/콘솔)를 사용하여 페이지 구조와 스타일 클래스 이름을 확인할 수 있습니다.
Mac: Command + Option + I 또는 fn + F12
Windows: Ctrl + Shift + I 또는 fn + F12 또는 F12
열리면 "요소 선택기"(마우스 아이콘)를 클릭한 다음 페이지의 아무 영역이나 클릭하여 해당 영역에 대응하는 HTML 태그와 클래스 이름을 확인하십시오.
검색 기능(Cmd/Ctrl + F)을 사용하여 클래스 이름을 찾을 수도 있습니다.
이미지.png

JavaScript#

사용자 지정 JavaScript는 AI 어시스턴트나 지원 위젯과 같은 타사 서비스를 임베드하는 데 사용됩니다. 참고: Apidog의 사용자 지정 JavaScript 필드는 <script> 또는 <style> 태그를 지원하지 않습니다. 이를 순수 JavaScript로 변환해야 합니다. 예를 들면 다음과 같습니다.
❌ 원본(지원되지 않음)
✅ 순수 JavaScript로 변환됨
타사 스크립트나 스타일을 임베드하려고 하지만 이를 순수 JS 형식으로 다시 작성하는 방법이 확실하지 않은 경우, 아래 프롬프트를 복사하여 AI 도구(예: Claude)에 붙여 넣으면 AI가 자동 변환을 도와줄 수 있습니다.
I'm using Apidog's "Custom JavaScript" feature, which only allows pure JavaScript (no <script> or <style> tags).

Please convert the following code to pure JavaScript. Here are the requirements:
1. Rewrite the <script> tag to document.createElement('script') dynamic creation method;
2. Inject the <style> content into the newly created style tag and insert the head;
3. Please use standard methods (such as createElement, appendChild) for all DOM operations, and do not use document.write;
4. If the original code uses `window.addEventListener('DOMContentLoaded', ...)` or `window.addEventListener('load', ...)` only to wait for the page before running code, remove the event listener and run the code directly. Apidog executes custom JavaScript after the documentation page has been rendered, so the browser's `load` event may already have passed by that time; code registered inside a `load` listener may not be executed;
5. The final generated JavaScript should be able to run directly in the browser without any explanation.

Original code:
---
(paste your code here)
---
보안을 위해 사용자 지정 JavaScript는 사용자 지정 도메인을 통해 문서에 접근할 때만 작동합니다.
Apidog에서 제공하는 기본 문서 주소(예: https://xxx.apidog.io/로 시작)를 통해 접근하는 경우, 사용자 지정 JS는 로드 및 실행되지 않습니다.
정상적인 로딩에 영향을 주거나 페이지 구조를 손상하지 않도록 코드 자체가 신뢰할 수 있는지 확인하십시오.
사용자 지정 JavaScript는 문서 페이지가 렌더링된 후 실행됩니다. 이 시점에는 브라우저의 load 이벤트가 이미 지나갔을 수 있으므로 window.addEventListener('load', ...) 안에 배치된 코드는 실행되지 않을 수 있습니다. 대부분의 경우에는 대신 코드를 직접 실행하십시오.

예: 확장/축소 가능한 상자#

아래 버튼을 클릭하여 iframe 대화 상자를 확장/축소하십시오.
"버튼을 클릭하여 iframe 대화 상자 확장/축소" 스크립트
사용 방법:
1
코드를 Apidog의 "Custom JavaScript" 영역에 붙여 넣으십시오.
2
사용자 지정 도메인을 통해 문서 사이트를 방문하십시오.
3
오른쪽 하단 모서리에 버튼이 나타납니다. 클릭하면 채팅 iframe이 열립니다.
4
iframe.src를 사용 중인 AI 서비스로 교체하십시오. 예:
사용자 지정 CSS 및 JavaScript

예: Chatbase 위젯 임베드#

"Chatbase 채팅 위젯 임베드" 스크립트
사용 방법:
1
Chatbase 앱을 만들고 임베드 코드를 가져온 다음, 위 프롬프트를 사용하여 순수 JS로 변환하십시오.
이미지.png
변환된 코드를 Apidog의 Custom JS 섹션에 붙여 넣으십시오.
2
사용자 지정 도메인을 통해 문서 사이트를 방문하십시오.
3
오른쪽 하단 모서리에 버튼이 나타납니다. 클릭하면 대화 창이 열립니다.
�사용자 지정 CSS 및 JavaScript

HTML#

HTML 기능은 현재 개발 중입니다. 출시를 기대해 주십시오.

FAQ#

Custom JS가 작동하지 않습니까?
사용자 지정 도메인을 통해 문서에 방문하고 있는지 확인하십시오. 사용자 지정 JavaScript는 바인딩된 사용자 지정 도메인을 사용할 때만 실행됩니다.
사용자 지정 JavaScript에서 'load' 또는 'DOMContentLoaded'를 사용해야 합니까?
Modified at 2026-06-09 08:53:32
Previous
사용자 지정 레이아웃
Next
사용자 지정 도메인
Built with