coastdigitalgroup/coastai-skills

동의 및 환경 설정 시스템

목적

동의 및 환경 설정 시스템은 사용자 개인정보 관리의 시각적 및 구조적 프레임워크를 설계하기 위한 방법론을 제공합니다. 개인정보 공지, 쿠키 배너, 세부적인 환경 설정 컨트롤이 웹사이트 경험에 통합되어 GDPR, CCPA 규정을 준수하고 접근 가능하며 높은 신뢰를 제공하도록 보장합니다. 이 시스템은 정보를 명확한 계층 구조로 구성하고 데이터 공유에 대한 직관적인 컨트롤을 제공하여 '동의 피로'를 방지합니다.

사용 사례

• 초기 동의 배너: 쿠키 사용을 알리는 최초 터치 오버레이 또는 바를 설계합니다.
• 세부 환경 설정 센터: 사용자가 분석, 마케팅 등 특정 데이터 카테고리를 전환할 수 있는 모달 또는 페이지를 생성합니다.
• 지속적인 개인정보 보호 트리거: 초기 선택 후에도 접근 가능한 미묘한 '개인정보 설정' 트리거를 구현합니다.
• 규제 적응: 여러 지역의 다양한 요구사항(예: '모두 거절' 버튼 요구사항)을 충족하도록 설계를 표준화합니다.
• 커뮤니케이션 환경 설정: 뉴스레터 또는 마케팅 알림 옵트인 관리를 위한 UI를 설계합니다.

사용하지 말아야 할 경우

• 내부 데이터 거버넌스: 이 스킬은 UI/UX 레이어를 다루며, 백엔드 데이터 아키텍처나 법적 정책 작성을 관리하지 않습니다.
• 일반 배너: 세일이나 유지보수와 같은 단순 공지에는 banner-and-alert-system을 사용하세요.
• 시스템 설정: 개인정보 관련이 없는 순수 기능적 앱 설정(예: 테마, 언어)에는 site-navigation-system 또는 전용 설정 뷰를 사용하세요.

입력값

1. 규제 요구사항: 적용되는 법률(GDPR, CCPA/CPRA, DMA)은 무엇인가요?
2. 데이터 카테고리: 모든 데이터 수집 도구 목록(필수, 기능적, 분석, 마케팅/타겟팅).
3. 브랜드 보이스: 개인정보 커뮤니케이션의 의도된 톤(예: 투명, 미니멀, 안심).
4. 레이아웃 컨텍스트: 배너가 위치해야 하는 곳(하단 바, 플로팅 박스, 전체 화면 모달).
5. 브라우저 신호: 사이트가 유효한 옵트아웃으로서 Global Privacy Control(GPC) 또는 'Do Not Track' 신호를 감지하고 존중해야 하는지 여부.

출력값

1. 동의 해부학 명세: 배너/모달 영역(제목, 설명, 토글, 액션)의 정의.
2. 상태 매트릭스: 대기, 수락됨, 거절됨, 포커스됨 상태에 대한 시각적 명세.
3. 환경 설정 센터 청사진: 세부 카테고리 관리를 위한 구조적 맵.
4. 상호작용 명세: 배경 동작, '모두 거절' 강조, 지속적인 트리거 배치에 대한 규칙.

워크플로

1. 동의 수준 분류

법적 및 UX 목표에 따라 필요한 방해 수준을 결정합니다:

• 레벨 1 (암시적/정보): 상호작용을 차단하지 않는 미묘한 바입니다. 위험이 낮은 지역이나 추적하지 않는 사이트에 가장 적합합니다.
• 레벨 2 (능동적/모달): 탐색 전이나 도중에 선택을 요구하는 플로팅 박스 또는 모달입니다. GDPR/CCPA 준수에 가장 적합합니다.
• 레벨 3 (하드 게이트): 선택이 이루어질 때까지 모든 접근을 차단하는 전체 화면 오버레이입니다. 극단적인 규정 준수 또는 연령 확인 시나리오에만 사용합니다.

2. 공간 패턴 선택

• 하단 바: 하단 전체 너비에 걸쳐 있습니다. 방해가 적고 익숙한 패턴입니다.
• 플로팅 박스: 일반적으로 왼쪽 하단 또는 오른쪽 하단입니다. 주요 콘텐츠를 덜 가리지만 가시성이 높습니다.
• 환경 설정 모달: 세부적인 선택을 위한 중앙 오버레이입니다. '환경 설정 관리' 버튼에서 트리거됩니다.

3. 정보 계층 구조 수립

'법률 전문 용어의 벽' 피로를 방지합니다:

• 제목: 명확하고 정직합니다(예: '귀하의 개인정보 선택').
• 기본 설명: 데이터가 수집되는 이유와 사용자의 권리를 설명하는 간결한 1-2문장입니다.
• 카테고리 레이블: 확장 가능한 '자세히 알아보기' 세부 정보가 있는 상위 수준 버킷(예: '개인화', '광고')입니다.

4. 액션 우선순위 설계

필요한 경우 '동등한 중요성' 규칙을 따릅니다:

• 기본 액션: '모두 수락'과 '모두 거절'(또는 '선택 확인')은 '다크 패턴'을 피하기 위해 이상적으로 유사한 시각적 가중치를 가져야 합니다.
• 보조 액션: '환경 설정 관리' 또는 '쿠키 설정'은 세부 보기로 연결됩니다.
• 탈출구: 암시적 동의가 사용되는 경우 사용자가 '닫기' 또는 '해제'를 쉽게 찾을 수 있도록 합니다.

5. 지속적인 트리거 정의

동의는 동적 상태입니다. 사용자는 마음을 바꿀 수 있어야 합니다:

• '개인정보 보호 방패' 아이콘: 환경 설정 센터를 다시 여는 작고 지속적인 플로팅 아이콘(일반적으로 왼쪽 하단)입니다.
• 바닥글 링크: site-footer-system의 전용 '쿠키 설정' 링크입니다.

6. 브라우저 수준 옵트아웃 신호 존중

자동화된 옵트아웃 메커니즘(예: CCPA/CPRA가 Global Privacy Control 인정)을 인식하는 관할권의 경우:

• 감지 및 적용: GPC 신호가 있으면 이를 유효한 '거절' 또는 '판매/공유 옵트아웃' 신호로 처리하고 사용자가 수동으로 다시 전환할 필요 없이 환경 설정 센터에 해당 상태를 반영합니다.
• 재프롬프트 금지: 사용자가 이미 보낸 GPC 신호를 재정의하도록 요청하기 위해 초기 배너를 다시 표시하지 마십시오.
• 투명성: 감지된 신호를 환경 설정 센터에 표시하여(예: 'Global Privacy Control 신호를 감지하여 옵트아웃을 적용했습니다.') 상태가 무음으로 적용되지 않도록 합니다.

결정 규칙

• '동등한 가중치' 규칙: 지역에서 '모두 거절'을 요구하는 경우(예: EU), 버튼은 '모두 수락'만큼 찾기 쉽고 클릭하기 쉬워야 합니다. '수락'이 큰 파란색 버튼인 동안 '거절' 버튼을 작은 텍스트 링크로 만들지 마십시오.
• '미리 체크 없음' 규칙: GDPR 준수를 위해 모든 비필수(분석, 마케팅) 토글은 기본적으로 OFF여야 합니다.
• '명확한 언어' 규칙: 기술적인 전문 용어를 피하십시오. '픽셀 기반 원격 측정 처리' 대신 '사이트 개선'을 사용하세요.
• 계층적 공개: 초기 배너는 간단하게 유지하십시오. 20단락 정책 목록은 환경 설정 센터 또는 전용 개인정보 처리방침 페이지로 옮기세요.
• '신호 존중' 규칙: 감지된 GPC 옵트아웃은 오래된 로컬 '모두 수락' 쿠키보다 우선합니다. 캐시된 동의 기록이 새로운 브라우저 수준 옵트아웃 신호를 재정의하지 못하게 하십시오.

제약 조건

• 접근성: 배너는 키보드로 접근 가능해야 합니다. 환경 설정 모달은 포커스를 트래핑해야 하며, 포커스 표시기는 트래핑된 동안 계속 보이고 가려지지 않아야 합니다(WCAG 2.2 SC 2.4.11). 모든 토글에는 명확한 ARIA 레이블이 있어야 하며 24x24px 최소 대상 크기를 충족해야 합니다(SC 2.5.8).
• 대비: 버튼 텍스트와 토글은 WCAG AA(4.5:1) 대비를 충족해야 합니다.
• 반응형: 배너는 기본 모바일 탐색(예: 하단 탐색 바)과 겹쳐서는 안 됩니다. 플로팅 박스가 너무 좁으면 전체 화면 서랍으로 전환하세요.

일반적인 실패 패턴

• '다크 패턴' 함정: 사용자 동의를 강요하기 위해 '거절' 버튼을 찾을 수 없게 만드는 경우.
• 탐색 간섭: 사이트의 모바일 메뉴나 기본 CTA를 덮는 하단 배너를 배치하는 경우.
• Z-인덱스 충돌: 배너가 다른 오버레이나 메뉴 아래에 나타나 클릭할 수 없게 되는 경우.
• '50개 체크리스트': 사용자가 상위 수준 카테고리 대신 50개의 개별 공급자를 토글하도록 강요하는 경우.
• 탈출구 파손: 배너가 닫힌 후 사용자가 환경 설정을 변경할 수 없도록 하는 경우.

검증 기준

• '모두 수락'과 '모두 거절'이 대상 지역에 적합한 시각적 중요성을 가지고 있습니다.
• 비필수 카테고리는 기본적으로 OFF로 전환됩니다(엄격한 규정 준수용).
• 지속적인 트리거(아이콘 또는 바닥글 링크)를 통해 사용자가 설정을 다시 열 수 있습니다.
• 정보가 계층화되어 있습니다(간단한 배너 -> 상세 환경 설정 센터).
• 토글과 버튼이 WCAG 2.2 SC 2.5.8(24x24px 최소 터치 대상)을 충족합니다.
• 접근성: 환경 설정 모달에 대한 포커스 관리가 처리되고 포커스 표시기가 가려지지 않습니다(WCAG 2.2 SC 2.4.11).
• 모든 텍스트 및 상호작용 상태의 대비 비율이 WCAG AA를 충족합니다.
• Global Privacy Control(또는 이에 상응하는) 신호가 사용자에게 재프롬프트하지 않고 감지되고 존중됩니다.