UStackUStack
c15t icon

c15t

c15t는 최신 웹앱용 오픈소스 쿠키 동의 및 스크립트 로딩 프레임워크로, 동의 상태에 따라 요청을 제어하고 UI는 직접 설계할 수 있습니다.

c15t

c15t란 무엇인가?

c15t는 최신 웹 애플리케이션에서 쿠키 동의 및 스크립트 로딩을 관리하는 오픈소스 프레임워크입니다. 핵심 목적은 개발자들이 동의 수집 방식을 제어하고, 해당 동의 상태에 따라 추적 또는 기타 스크립트를 활성화(또는 차단)할 수 있도록 돕는 것입니다.

이 프로젝트는 “개발자 우선” 및 “헤드리스”로 위치づけ되어 있으며, 이는 기본 동의 로직이 사용자 인터페이스와 분리되어 있어 팀이 자체 스택으로 배너와 대화 상자 경험을 구축할 수 있고, 불투명한 벤더 로직에 의존하지 않는다는 의미입니다.

주요 기능

  • 최신 웹 앱 중심의 쿠키, 동의, 개인정보 보호 준수 워크플로를 위한 오픈소스 동의 프레임워크.
  • 클라이언트/엣지 실행을 위한 동의 및 스크립트 로딩 제어로, 관련 동의 상태가 설정될 때까지 요청을 차단하는 것을 목표로 함.
  • 여러 프레임워크(React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Astro, Solid, Qwik 등)와 함께 작동하는 헤드리스 코어.
  • CLI 스캐폴딩으로 쿠키 배너를 빠르게 생성하거나, “헤드리스 로직을 직접 삽입”하여 경험을 완전히 제어할 수 있는 옵션.
  • 자체 CSS/디자인 토큰으로 개발자 제어 UI 커스터마이징, 배너/대화 상자 컴포넌트가 스타일링과 통합되도록 설계됨.
  • 배너 언어/로케일 처리를 위한 i18n 지원(한 번 번역, 어디서나 동의).
  • 지리 위치 기반 언어 및 프레젠테이션 옵션, “최종 언어로 최종 배너 제공” 가능하며 선택적으로 표시하지 않을 수도 있음.
  • GDPR, CCPA/CPRA를 포함한 15+ 개인정보 보호법 관할권 대상 지원(LGPD, PIPEDA, PIPL, APPI 예시 포함).

c15t 사용 방법

일반적인 설정은 c15t의 프레임워크별 프로바이더와 UI 컴포넌트를 추가한 후, 동의 모드, 백엔드 URL, 동의 뒤에 게이트할 스크립트로 구성하는 것으로 시작합니다.

페이지의 Next.js 예시:

  1. 프로바이더와 UI 컴포넌트 임포트(예: ConsentManagerProvider, ConsentBanner, ConsentDialog).
  2. 프로바이더 구성에 스크립트 추가(예: metaPixel({ pixelId: "..." })을 통한 Meta Pixel 스크립트).
  3. mode(예: hosted), backendURL(환경 변수에서 가져옴) 등 옵션 설정.
  4. 사용자가 개인정보 설정을 관리할 수 있도록 <ConsentBanner /><ConsentDialog /> 렌더링.

사이트는 CLI를 통한 빠른 시작(npx @c15t/cli)도 언급합니다.

사용 사례

  • 동의 상태를 스크립트 로딩과 연동하면서 동의 배너와 설정 대화 상자가 필요한 Next.js 애플리케이션(예: 사용자 선택 후 특정 분석 스크립트 활성화).
  • 단일 동의 로직 접근을 원하면서 자체 컴포넌트로 UI를 구축하는 다중 프레임워크 팀(헤드리스 코어가 여러 프레임워크와 호환됨).
  • 내장 i18n/로케일 처리로 동의 배너 텍스트를 사용자 언어로 제시해야 하는 현지화 중심 제품.
  • 지리 위치 및 관할권 구성으로 개인정보 보호법 메시지(또는 배너 표시 여부)가 지역/언어에 따라 달라져야 하는 다지역 운영 제품.
  • 사전 제작 UI 대신 배너/대화 상자에 커스텀 스타일링 및 디자인 토큰 통합을 선호하는 팀.

자주 묻는 질문

  • c15t는 UI 전용 솔루션인가요? 아니요. 사이트는 개발자가 “헤드리스 로직을 삽입”하여 경험과 스타일을 제어할 수 있는 헤드리스 코어를 가진다고 설명합니다.

  • 지원 프레임워크는 무엇인가요? 페이지에서 React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Astro, Solid, Qwik 등을 호환 가능으로 나열합니다.

  • 배너의 모양과 느낌을 커스터마이징할 수 있나요? 네. 페이지에서 자체 CSS와 디자인 토큰으로 스타일링 가능하며, 경험을 제어할 수 있다고 명시합니다.

  • c15t는 여러 언어를 지원하나요? 네. 페이지에서 내장 로케일 처리 i18n 지원이 있다고 명시합니다.

  • 다양한 개인정보 보호 관할권을 어떻게 처리하나요? 페이지에서 지리 위치 및 관할권 타겟팅을 설명하며, GDPR, CCPA/CPRA 등의 예시와 15+ 관할권을 언급합니다.

대안

  • 헤드리스 동의 관리 라이브러리/프레임워크-AGNOSTIC: 전용 동의 프레임워크 대신 팀에서 직접 동의 상태 관리를 구축하고 자체 UI 뒤에 스크립트 로딩을 게이트할 수 있습니다. 이는 준비된 프레임워크에서 구현 노력을 이전하는 점에서 다릅니다.
  • UI 중심 쿠키/배너 컴포넌트: 일부 솔루션은 주로 구성 가능한 동의 배너를 제공합니다. 이러한 솔루션은 헤드리스 접근에 비해 동의 로직과 스크립트 게이팅에 대한 개발자 제어를 희생합니다.
  • 동의 모드 지원 태그/스크립트 관리 도구: 분석/태그 관리 카테고리의 대안은 동의 인식 스크립트 트리거링을 제공할 수 있습니다. 워크플로는 종종 헤드리스 동의 코어를 직접 통합하는 대신 태그 규칙 중심입니다.
  • 개인정보/컴플라이언스 플랫폼: 이러한 플랫폼은 일반적으로 더 광범위한 컴플라이언스 워크플로를 관리합니다. c15t에 설명된 프레임워크-AGNOSTIC, 개발자 제어 동의 및 스크립트 로딩 패턴과 덜 맞습니다.