coastdigitalgroup/coastai-skills

버튼 및 액션 시스템

목적

버튼 및 액션 시스템은 사용자 상호작용의 주요 동인을 설계하기 위한 방법론을 제공합니다. 버튼은 사용자의 의도와 시스템의 응답 사이의 기본적인 연결 고리입니다. 이 시스템은 모든 액션이 시각적으로 우선순위가 지정되고(Hierarchy), 일관되게 스타일링되며(Cohesion), 모든 기기에서 상호작용하기 쉽도록(Usability) 보장합니다. 단순히 '버튼을 만드는 것'을 넘어, 레이아웃 내에서 다양한 유형의 액션이 서로 어떻게 관련되는지 정의하는 논리적 프레임워크를 제공합니다.

사용 사례

• 디자인 시스템을 위한 버튼 컴포넌트 라이브러리 정의
• 히어로 섹션 또는 페이지 헤더에서 액션의 계층 구조 수립
• 관련 액션 그룹 구성 (예: 저장, 취소, 삭제)
• 아이콘 전용 버튼 또는 플로팅 액션 버튼(FAB)과 같은 특수 트리거 설계
• 버튼 크기와 레이아웃 밀도 간의 관계 표준화

사용하지 말아야 할 경우

• 전역 탐색 링크: 주요 사이트 섹션 간 이동에는 site-navigation-system을 사용하세요.
• 텍스트 내 하이퍼링크: 문단 텍스트 내에 포함되어 추가 정보로 연결되는 링크에는 표준 타이포그래피 처리를 사용하세요.
• 순수 장식 요소: 클릭하거나 탭할 수 없는 요소에는 버튼 스타일을 사용하지 마세요.
• 복잡한 양식 입력: 옵션 선택(체크박스, 라디오, 선택)에는 form-design-system을 사용하세요.

입력

1. 액션 우선순위: 작업이 기본(레벨 1), 보조(레벨 2) 또는 3차(레벨 3)입니까?
2. 액션 중요도: 액션이 '긍정'(제출), '중립'(취소) 또는 '파괴적'(삭제)입니까?
3. 컨텍스트 밀도: 버튼이 어디에 위치합니까? (예: 넓은 히어로 영역 vs. 컴팩트한 데이터 테이블 행)
4. 브랜드 토큰: 색상 팔레트, 타이포그래피 스케일 및 모서리 반경 선호도

출력

1. 버튼 변형 매트릭스: 기본, 보조, 고스트 및 위험 변형에 대한 정의된 스타일
2. 크기 스케일: 다양한 높이와 패딩 범위 (예: 소형, 중형, 대형)
3. 구성 요소 사양: 텍스트, 아이콘 및 컨테이너에 대한 내부 간격 규칙
4. 액션 그룹화 규칙: 여러 버튼 간의 정렬, 순서 및 간격에 대한 지침

워크플로우

1. 변형 계층 구조 수립

사용자 목표에 대한 중요도에 따라 버튼에 시각적 가중치를 할당합니다:

• 기본(레벨 1): 고대비, 채워진 배경. 일반적으로 페이지의 '주요' 목표. 뷰당 하나만 사용.
• 보조(레벨 2): 윤곽선 또는 저대비 배경. 대안 또는 지원 액션에 사용.
• 3차/고스트(레벨 3): 기본 상태에서 배경이나 테두리 없음. 우선순위가 낮은 작업이나 밀집된 UI(예: 테이블)에서 사용.
• 위험: 고대비 색상(보통 빨간색). 파괴적이고 되돌릴 수 없는 작업에만 엄격히 사용.

2. 크기 스케일 정의

fluid-spacing-system을 사용하여 버튼 크기를 레이아웃 컨텍스트에 매핑합니다:

• 대형 (히어로/랜딩): 최대 눈에 띔. 높은 수직 패딩.
• 중형 (기본): 양식, 모달 및 헤더의 표준.
• 소형 (컴팩트): 공간이 제한된 사이드바, 카드 및 데이터 테이블에서 사용.

3. 내부 구성 요소 설계

버튼 컨테이너의 구조를 표준화합니다:

• 패딩: 일관된 수평 대 수직 비율 유지 (보통 수평 = 수직의 1.5배 ~ 2배).
• 아이콘 통합: 아이콘과 텍스트 사이의 간격 정의 (예: --space-xs).
• 모서리 반경: 브랜드의 시각적 톤에 맞게 '둥글기'(날카로움, 둥근형 또는 알약형) 결정.

4. 버튼 그룹 생성

여러 액션을 함께 배치할 때 논리적 순서를 따릅니다:

• 순서: 기본 액션을 '결론' 위치에 배치 (데스크톱에서는 오른쪽, 모바일 수직 스택에서는 상단).
• 간격: 그룹 내 버튼 사이에 일관된 간격 사용 (예: --space-s).
• 정렬: 모달/헤더에서는 오른쪽 정렬; 양식에서는 왼쪽 정렬; 히어로에서는 가운데 정렬.

5. 반응형 동작 정의

모든 뷰포트에서 액션이 사용 가능한 상태로 유지되도록 합니다:

• 전체 너비(블록) 버튼: 모바일에서는 작은 버튼이 컨테이너 너비를 채우도록 확장되어 엄지손가락으로 더 쉽게 닿을 수 있습니다.
• 아이콘 전용 대체: 매우 좁은 헤더에서는 텍스트 레이블이 아이콘을 위해 숨겨질 수 있습니다 (aria-label이 있는지 확인).

결정 규칙

• 'One Primary' 규칙: '선택 마비'를 방지하기 위해 단일 뷰포트/컨텍스트에 하나의 기본(레벨 1) 버튼만 표시되어야 합니다.
• 고스트 vs. 링크: 액션이 기능적일 때(예: '닫기', '취소')는 고스트 버튼을 사용하고, 액션이 탐색적일 때(예: '정책에 대해 자세히 알아보기')는 텍스트 링크를 사용하세요.
• 아이콘 배치: 선행 아이콘(왼쪽)을 사용하여 액션을 명확히 하고(예: 검색 아이콘), 후행 아이콘(오른쪽)을 사용하여 방향을 표시합니다(예: '다음 단계'를 위한 화살표).
• 위험 버튼의 대비: 파괴적 버튼은 실수로 클릭하는 것을 방지하기 위해 기본 버튼과 시각적으로 크게 달라야 합니다.

제약 조건

• 접근성: 텍스트는 WCAG AA 대비(4.5:1)를 충족해야 합니다. 대화형 요소는 명확한 focus 상태를 가져야 합니다 (interactive-state-system 참조).
• 터치 대상: 모든 버튼은 시각적 요소가 더 작더라도 최소 24x24px의 대화형 영역을 가져야 하며(WCAG 2.2 SC 2.5.8), 기본 액션 및 모바일 레이아웃의 경우 44x44px를 편안한 기본값으로 사용합니다.
• 텍스트 잘림: 버튼 텍스트는 절대 잘려서는 안 됩니다. 레이블이 너무 길면 사본을 재평가하거나 버튼이 줄 바꿈/확장되도록 허용하세요.

일반적인 실패 패턴

• 버튼 수프: 한 페이지에 3-4개의 기본 버튼을 사용하여 주요 CTA의 중요성을 약화시킵니다.
• '회색 지대': 충분한 대비나 색상이 부족하여 버튼이 비활성화된 요소처럼 보이게 만드는 경우.
• 상호작용 누락: hover 또는 active 상태를 정의하지 않아 사용자가 자신의 클릭이 등록되었는지 확신할 수 없게 만듭니다.
• 작은 대상: 모바일 화면에서 거의 클릭할 수 없는 작은 텍스트 전용 고스트 버튼을 설계합니다.
• 혼란스러운 정렬: 동일한 흐름 내에서 다른 버튼 정렬을 혼합하여 사용자가 다음 액션을 '찾도록' 강요합니다.

검증 기준

• 모든 페이지/뷰에 명확한 기본 액션이 있습니다.
• 버튼 변형(기본, 보조, 고스트, 위험)이 일관되게 사용됩니다.
• 버튼이 WCAG 2.2 최소 터치 대상 24x24px(2.5.8)를 충족하며, 기본 및 모바일 액션에는 44x44px가 사용됩니다.
• 버튼이 함께 그룹화될 때 시각적 계층 구조가 유지됩니다.
• 포커스 상태가 뚜렷하고 고대비입니다.
• 버튼 레이블이 간결하고 '액션 동사'(예: '저장', '생성', '가입')를 사용합니다.
• 모바일 뷰포트에서는 도달성을 위해 적절한 위치에 전체 너비 버튼이 사용됩니다.