coastdigitalgroup/coastai-skills

설정 인터페이스 시스템

목적

설정 인터페이스 시스템은 사용자 환경 설정, 계정 구성, 워크스페이스 설정 및 청구 포털을 구성, 설계 및 구조화하기 위한 방법론을 제공합니다. 설정 인터페이스는 종종 소홀히 다루어져 파편화된 시각적 구조, 연결되지 않은 내비게이션 모델, 낮은 반응성 및 심각한 접근성 장벽으로 이어집니다. 이 시스템은 공간 구성, 내비게이션 아키텍처, 상태 저장 모델(예: 자동 저장 vs. 수동 일괄 저장) 및 시각적 어포던스에 대한 표준화된 접근 방식을 확립하여 인지 부하를 줄이고 저장되지 않은 데이터 손실을 방지합니다.

사용 사례

• 사용자 프로필 및 계정: 개인 정보, 보안 자격 증명 및 환경 설정을 업데이트하기 위한 인터페이스 설계.
• SaaS 워크스페이스 관리: 멀티 테넌트 또는 팀 설정, 멤버 역할, 통합 및 권한 게이트 구성.
• 알림 설정 센터: 이메일, 푸시 및 인앱 알림을 위한 세분화된 매트릭스 기반 토글 보드 생성.
• 청구 및 구독 허브: 가격 등급, 현재 요금제 메트릭, 결제 방법 및 과거 청구서 목록에 대한 명확한 개요 설계.
• 개발자 설정: API 키 로테이션, 웹훅 및 환경 토글과 같은 복잡한 기술 옵션 구성.

사용하지 말아야 할 경우

• 묵시적 동의 및 개인정보 보호 바: 쿠키 수락, 쿠키 분류 및 규정 준수 오버레이에는 consent-and-preference-system을 사용하십시오.
• 일회성 온보딩 양식: 간단한 단일 열 가입 단계 또는 초기 설문조사 캡처에는 form-design-system을 사용하십시오.
• 낮은 복잡성 인터페이스(총 설정 5개 미만): 매우 간단한 설정의 경우 중첩된 다중 페이지 시스템을 구축하지 말고, 이러한 옵션을 전역 헤더 프로필 드롭다운 또는 사이드바 푸터에 직접 통합하십시오.

입력

1. 설정 인벤토리: 모든 구성 가능한 속성의 포괄적인 카탈로그로, 논리적으로 그룹화됩니다.
2. 상태 저장 모델: 변경 사항이 즉시 적용되는지(자동 저장) 또는 확인 시까지 보류되는지(수동 일괄 저장) 결정.
3. 사용자 액세스 역할: 특정 행을 보고/수정할 수 있는 사용자에 대한 정보(예: 관리자, 청구 편집자, 뷰어).
4. 간격 및 타이포그래피 토큰: 기존 디자인 값(fluid-spacing-system 및 fluid-typography-system에서).

출력

1. 설정 내비게이션 모델: 섹션 밀도에 따른 내비게이션 레이아웃 선택(사이드바, 서브탭 또는 아코디언).
2. 마스터-디테일 레이아웃 사양: 사이드바 컨트롤을 해당 활성 설정 창에 매핑하는 그리드/플렉스 구성.
3. 상태 저장 및 변경 로그 UX: 저장 확인, 로딩 상태 및 더티 상태 배너에 대한 시각적 및 청각적 패턴.
4. 접근 가능한 필드 및 권한 주석: 키보드 경로, 의미론적 범례 태그 및 명확한 비활성화/읽기 전용 스타일링 규칙.

워크플로

1. 설정 그룹화 및 우선순위 지정 (클러스터링)

설정 인벤토리에 대해 카드 분류 또는 주제별 그룹화를 수행합니다.

• 개인 티어: 프로필 정보, 아바타, 로그인 세부 정보, 개인 보안(MFA).
• 조직/워크스페이스 티어: 일반 워크스페이스 이름, 멤버 초대, 역할, 글로벌 통합.
• 전달/시스템 티어: 알림 규칙, 소리 알림, 테마 옵션(어두운/밝은 모드).
• 재무 티어: 요금제 등급, 신용 카드, 청구 연락처, 청구서 테이블.
• 위험 구역: 계정 삭제, 워크스페이스 비활성화 또는 소유권 이전.

2. 레이아웃 및 내비게이션 아키텍처 선택

공간 내비게이션 패턴을 선택합니다.

• 사이드바 기반(마스터-디테일): B2B SaaS 및 밀집된 설정에 권장됩니다. 지속적인 왼쪽 내비게이션 열(마스터)과 스크롤 가능한 오른쪽 콘텐츠 창(디테일)을 사용합니다.
• 탭 기반: 가벼운 중간 정도의 설정 패널(<5개 보기)에 가장 적합합니다. 주요 설정 페이지 헤더 아래에 가로 보조 탭 메뉴(tab-ui-system 또는 segmented-control-system 사용)를 사용합니다.
• 단일 페이지 스크롤(아코디언): 단순한 모바일 앱 또는 하위 섹션을 인라인으로 확장/축소하여 세로 높이를 관리할 수 있는 설정 목록에 가장 적합합니다.

3. 저장 및 피드백 모델 설정

각 설정 카드에 대해 명확한 상태 저장 메커니즘을 선택합니다.

• 자동 저장 패턴:
  • 격리되고 위험이 낮은 옵션(다크 모드 전환, 알림 환경 설정)에 사용됩니다.
  • 피드백: 토글 옆에 인라인 스피너/로더와 명확한 "저장됨" 텍스트 표시기를 렌더링합니다. 표시기는 1-2초 동안 비활성 상태 후 사라져야 합니다.
• 일괄 저장 패턴(더티 상태):
  • 위험이 높은 양식 또는 고도로 상관된 필드(비밀번호 업데이트, 청구 주소)에 사용됩니다.
  • 피드백: "저장되지 않은 변경 사항이 있습니다"를 나타내는 플로팅 고정 위치 헤더 또는 푸터 배너를 표시합니다.
  • 작업: "변경 사항 저장"(기본 CTA) 및 "취소"(보조 스타일 텍스트)의 두 가지 눈에 띄는 버튼을 제공합니다. 더티 상태일 때 사이드바/탭 내비게이션을 비활성화하거나, 사용자가 벗어나려고 하면 "저장되지 않은 변경 사항 손실" 확인 모달을 트리거합니다.

4. 고밀도 설정 매트릭스 설계

알림 센터 또는 세분화된 권한 테이블의 경우:

• 매트릭스 그리드 사용: 전달 채널(예: 이메일, 인앱, SMS)에 해당하는 열과 이벤트(예: "댓글에 멘션됨", "작업 할당됨")에 해당하는 행에 체크박스 또는 스위치를 정렬합니다.
• 열 헤더 정렬: 컨텍스트를 유지하기 위해 세로 스크롤 시 레이블을 고정 상태로 유지합니다.
• 키보드 준비 행 강조: interactive-state-system 스타일을 사용하여 셀에 포커스가 맞춰지면 해당 행이 강조 표시되도록 합니다.

5. "위험 구역" 카드 구조화

돌이킬 수 없는 파괴적인 작업에는 전용 시각적 처리가 필요합니다.

• 시각적 격리: 작업(워크스페이스 비활성화, 계정 삭제)을 레이아웃의 맨 아래에 있는 단일 카드로 그룹화합니다.
• 고대비 위험 경고: 빨간색 테두리, 미묘한 밝은 빨간색 경고 배경 및 결과를 설명하는 굵은 경고를 사용합니다.
• 이중 확인 모달: 파괴를 즉시 트리거하지 마십시오. 작업 버튼을 클릭하면 모달(overlay-and-dialog-system)이 열리고, 사용자가 리소스 이름(예: "delete workspace-name")을 명시적으로 입력하여 확인해야 합니다.

6. 모바일 반응형 설계

• 선형 마스터 우선으로 축소: 768px 미만의 뷰포트에서 사이드바 목록과 콘텐츠 세부 정보 창을 선형 마스터 목록으로 축소합니다.
• 하위 페이지 내비게이션: 모바일에서 사이드바 옵션을 클릭하면 해당 세부 정보 섹션만 포함하는 전체 너비 슬라이딩 패널이 열리며, "설정으로 돌아가기" 이동 경로 헤더가 고정됩니다.
• 터치 대상 확대: 체크박스, 스위치 및 닫기 대상을 최소 44px x 44px로 확장하여 엄지 손가락 기반 모바일 상호 작용을 수용합니다.

결정 규칙

• 자동 저장 vs. 수동 저장: 토글/입력이 즉각적인 사용자 환경 설정(예: 다크 테마 또는 알림 오디오)으로 작동하는 경우 자동 저장을 사용합니다. 필드가 논리적으로 그룹화되고 유효성 검사에 의존하는 경우(예: 이메일/비밀번호 변경, 청구 정보) 수동 일괄 저장을 사용하여 불완전하거나 유효하지 않은 데이터베이스 업데이트를 방지합니다.
• 사이드바 임계값: 5개 이상의 개별 섹션이 있는 설정 제품군에는 지속적인 세로 사이드바 내비게이션을 사용합니다. 4개 이하 섹션의 경우 기본 헤더 아래에 가로 보조 탭 모음을 사용합니다.
• 저장되지 않은 변경 사항 해제: 사용자가 수동 저장 보기에서 입력을 수정하고 저장하지 않고 탭/내비게이션 항목을 클릭하는 경우 항상 내비게이션을 차단하고 확인 대화상자를 트리거합니다: "저장되지 않은 변경 사항을 취소하시겠습니까?"

제약 조건

• 접근성(의미론적 구조):
  • <fieldset> 및 <legend> 태그로 필드를 그룹화하여 보조 기술이 중첩된 컨트롤의 컨텍스트를 읽을 수 있도록 합니다.
  • 양식 컨트롤은 프로그래밍 방식으로 연결된 레이블(<label for="...">) 또는 aria-labelledby를 사용해야 합니다.
  • 인라인 자동 저장 표시기에 aria-live="polite"를 사용하여 화면 판독기가 입력 포커스를 방해하지 않고 백그라운드 저장에 대해 알림을 받을 수 있도록 합니다.
  • 활성 포커스 표시기는 최소 3:1의 명암비를 충족해야 하며, 고정 헤더나 저장되지 않은 변경 사항 배너에 의해 가려져서는 안 됩니다(WCAG 2.2 SC 2.4.11).
• 반응성: 다중 열 그리드 테이블은 작은 뷰포트에서 깔끔한 행으로 쌓이거나 가로 스크롤 테이블이 되어야 합니다. 텍스트 요소는 긴 API 키나 웹훅 URL이 넘치는 것을 방지하기 위해 word-break: break-word를 사용해야 합니다.
• 시각적 계층: 관련 설정을 표준 여백 간격(--space-l)을 가진 시각적으로 분리된 "카드"로 그룹화하여 단일 무한 목록에 비해 인지 부하를 줄입니다.

일반적인 실패 패턴

• "무음 저장 실패": 자동 저장 토글이 오류 상태를 표시하지 않고 백그라운드에서 실패하여 사용자가 변경 사항이 기록되었다고 믿게 만듭니다.
• "우발적 손실": 반쯤 채워진 설정 페이지에서 벗어나면 확인 모달이나 상태 유지 없이 모든 변경 사항이 손실됩니다.
• "미스터리 설정 그리드": 지속적인 열 또는 행 헤더 없이 크고 다차원적인 매트릭스(예: 알림)를 생성하여 사용자가 손가락으로 화면에서 항목을 정렬해야 합니다.
• 위험 구역 모달의 포커스 트랩 불량: 삭제 확인 모달에서 키보드 포커스가 배경 페이지로 이스케이프되어 사용자가 삭제 확인을 입력하는 동안 실수로 배경 설정을 제출할 수 있습니다.
• 플레이스홀더 레이블링: 실제 지속적인 <label> 태그 대신 입력 플레이스홀더 텍스트를 사용합니다. 입력이 시작되면 컨텍스트가 손실됩니다.

검증 기준

• 5개 이상의 설정 보기에 지속적인 세로 사이드바 내비게이션이 사용되며, 모바일 화면 크기에서는 슬라이딩 하위 보기 내비게이션으로 우아하게 축소됩니다.
• 낮은 위험의 환경 설정 토글은 인라인 aria-live 저장 상태 로더와 함께 자동 저장 패턴을 사용합니다.
• 중요하고 여러 필드로 구성된 양식은 지속적인 "저장되지 않은 변경 사항" 플로팅/고정 배너와 함께 수동 일괄 저장 패턴을 사용합니다.
• 파괴적인 작업은 다단계 확인 대화상자와 함께 시각적으로 분리된 "위험 구역" 카드로 그룹화됩니다.
• 모든 입력 그룹에 대해 의미론적 HTML(<fieldset>, <legend>, <label>)이 사용됩니다.
• 활성 포커스 표시기는 WCAG 2.2 명암비 규칙을 충족하며 오버레이 요소나 플로팅 배너에 의해 가려지지 않습니다.
• 모든 텍스트의 명암비는 WCAG AA(일반 텍스트 최소 4.5:1, 큰 텍스트/아이콘 3:1)를 충족합니다.
• 모바일의 터치 대상은 기본 입력에 대해 44px x 44px 대상 크기를 충족합니다.

---

This translation is maintained for accuracy. Refer to the original English document for authoritative content.