coastdigitalgroup/coastai-skills

양식 디자인 시스템

목적

양식 디자인 시스템 스킬은 웹 양식의 시각적 및 공간적 프레임워크를 설계하기 위한 방법론을 제공합니다. 기술적 구현이 '어떻게'를 다루고 성장 최적화가 '왜'를 다루는 반면, 디자인 시스템은 '무엇을'과 '어디에'를 정의합니다. 라벨, 입력 필드, 선택 항목, 동작 버튼과 같은 양식 요소가 예측 가능하고 접근 가능하며 신뢰도 높은 인터페이스로 구성되어 인지 부하를 줄이고 사용자 오류를 방지하도록 보장합니다.

사용 사례

• 양식용 UI 키트 또는 디자인 시스템 컴포넌트 라이브러리 설계
• 복잡한 다단계 데이터 입력 인터페이스에 대한 시각적 표준 수립
• 기존 양식의 시각적 불일치 또는 공간적 마찰 감사
• 기기 간 계층을 유지하는 반응형 양식 레이아웃 설계
• 오류 및 검증 시각화 패턴 표준화

사용하지 말아야 할 경우

• 일반 검색 창: 단순한 단일 입력 검색 필드는 전체 디자인 시스템 처리가 거의 필요하지 않습니다.
• 실험적 대화형 미디어: 양식과 유사한 상호작용이 서사 또는 예술적 경험에 부차적인 경우.
• 중요도가 낮은 마이크로 상호작용: 데이터 입력 없이 '좋아요/싫어요' 또는 단일 토글과 같은 경우.

입력

1. 정보 해부학: 수집할 특정 데이터 포인트와 그 관계.
2. 기기 중단점: responsive-grid-system의 반응형 요구 사항.
3. 브랜드 스타일: (fluid-spacing-system의) 타이포그래피 스케일, 색상 팔레트, 간격 토큰.
4. 상호작용 요구 사항: 실시간 검증, 파일 업로드 또는 복잡한 선택이 필요한지 여부.

출력

1. 입력 해부학 명세: 라벨, 입력 필드, 도움말 텍스트, 아이콘, 오류 메시지에 대한 시각적 정의.
2. 레이아웃 청사진: 필드 그룹화, 정렬(상단 vs. 왼쪽), 동작 배치에 대한 공간 규칙.
3. 선택 컴포넌트 맵: 라디오, 체크박스, 스위치 또는 셀렉트 사용 시기에 대한 정의.
4. 피드백 및 상태 매트릭스: 호버, 포커스, 비활성화, 성공, 오류 상태에 대한 시각적 처리.

워크플로

1. 컴포넌트 해부학 정의

모든 '필드 그룹'에 대해 일관된 구조를 수립합니다. 필드는 다음으로 구성되어야 합니다:

• 라벨: 필드를 식별하는 명확하고 간결한 텍스트.
• 입력 필드: 대화형 컨테이너(텍스트, 셀렉트 등).
• 도움말/안내 텍스트: 지속적인 안내(예: "비밀번호는 8자 이상이어야 합니다").
• 오류 메시지: 검증 실패 시에만 나타나는 상황별 피드백.

2. 공간 레이아웃 및 정렬 수립

라벨과 입력 필드 간의 관계 결정:

• 상단 정렬 라벨(권장): 가독성과 모바일 대응에 가장 좋습니다.
• 왼쪽 정렬 라벨: 세로 공간이 중요한 데이터 중심 데스크탑 인터페이스에만 사용.
• 그룹화: 그룹 간에는 논리적 간격(예: --space-l)을, 그룹 내에서는 더 작은 간격(예: --space-s)을 사용합니다.

3. 상호작용 패턴 선택

데이터 유형에 UI 패턴 할당:

• 이진 선택: '예/아니오' 또는 다중 선택에는 체크박스를 사용합니다.
• 상호 배타성: 2-5개 옵션에는 라디오 버튼을, 6개 이상 옵션에는 셀렉트를 사용합니다.
• 즉시 토글: '제출' 동작 없이 즉시 적용되는 설정에는 스위치를 사용합니다.

4. 피드백 루프 설계

검증을 위한 시각적 계층 구조 생성:

• 포커스 상태: 활성 필드를 나타내는 고대비 링을 사용합니다.
• 오류 상태: 색상(보통 빨간색), 아이콘 및 테두리 두께로 오류를 알립니다.
• 성공 상태: 중요도가 높은 필드(예: 사용자 이름 사용 가능 여부)에는 미묘한 신호(예: 녹색 체크 표시)를 사용합니다.

5. 반응형 적응 계획

양식이 작은 뷰포트에서 어떻게 동작하는지 매핑:

• 쌓기: 데스크탑의 다중 열 레이아웃은 모바일에서 단일 열로 쌓여야 합니다.
• 터치 대상: 모든 대화형 영역(라디오, 체크박스, 버튼)은 최소 24x24px(WCAG 2.2 SC 2.5.8 최소 기준) 이상이어야 하며, 44x44px가 권장되며 기본 제출 동작의 기본값이어야 합니다.

결정 규칙

• 단일 열 규칙: 명확한 수직 스캔 경로를 유지하고 시선 추적 피로를 줄이기 위해 대부분의 양식에 단일 열 레이아웃을 사용합니다.
• 라벨 정렬: 기본값은 상단 정렬 라벨입니다. 양식을 처리하는 데 필요한 시선 고정 횟수를 줄여줍니다.
• 플레이스홀더 vs. 라벨: 플레이스홀더를 라벨로 사용하지 마십시오. 라벨은 사용자가 입력을 시작한 후에도 계속 보여야 합니다.
• 버튼 계층 구조: 기본 '제출' 동작이 시각적으로 가장 두드러져야 합니다. 보조 동작(예: '취소')은 텍스트 링크 또는 저대비 버튼이어야 합니다.
• 근접성: 도움말 텍스트와 오류 메시지는 가능한 한 입력 필드에 가깝게 배치합니다(보통 바로 아래).

제약 조건

• 접근성: 라벨은 프로그래밍 방식으로 입력 필드와 연결되어야 합니다(<label for> 또는 래핑). 텍스트와 테두리의 명암비는 WCAG AA(텍스트 4.5:1, UI 컴포넌트 3:1)를 충족해야 합니다. 오류 메시지는 aria-describedby를 통해 입력 필드와 프로그래밍 방식으로 연결되어야 하며, 유효하지 않은 필드는 aria-invalid="true"를 설정해야 합니다. 포커스 표시기는 고정 헤더, 토스트 또는 오버레이 뒤에 숨겨져서는 안 됩니다(WCAG 2.4.11 Focus Not Obscured).
• 반응형: 양식 필드는 컨테이너를 넘치거나 모바일 뷰포트를 초과하는 고정 너비를 가져서는 안 됩니다.
• 시각적 계층 구조: 오류 메시지는 도움말 텍스트와 시각적으로 구분되어 사용자가 놓치지 않도록 해야 합니다.

일반적인 실패 패턴

• '플레이스홀더 라벨' 함정: 라벨 대신 플레이스홀더를 사용하여 사용자가 입력하는 동안 컨텍스트를 잃게 됩니다.
• 압도적인 열: 사용자의 자연스러운 위에서 아래로 스캔 경로를 혼란스럽게 하는 다중 열 레이아웃을 사용합니다.
• 모호한 오류: 아이콘이나 텍스트 메시지 없이 색상만으로(예: 테두리를 빨간색으로만 변경) 오류를 시각화합니다.
• 작은 터치 대상: 모바일에서 엄지손가락 상호작용에 너무 작은 라디오 또는 체크박스를 설계합니다.
• '보이지 않는' 포커스: 명확한 포커스 링을 제공하지 않아 키보드 사용자가 탐색할 수 없게 만듭니다.

검증 기준

• 모든 입력 필드에 지속적이고 보이는 라벨이 있습니다.
• 양식이 논리적인 단일 열 수직 스캔 경로를 따릅니다.
• 오류 상태가 색상, 아이콘 및 텍스트의 조합을 사용합니다.
• 포커스 표시기가 고대비이고 명확하게 보입니다.
• 대화형 요소(입력 필드, 버튼)가 WCAG 2.2 24x24px 터치 대상 최소 기준을 충족합니다(44x44px 권장).
• 레이아웃이 모바일 뷰포트에서 단일 열로 부드럽게 전환됩니다.
• 기본, 보조 및 3차 동작이 명확한 시각적 계층 구조를 가지고 있습니다.