---
{"id":"component-selection","title":"컴포넌트 선택 기준","category":"시작하기","order":2,"summary":"비슷하게 보이는 컨트롤을 목적과 동작으로 구분합니다.","status":"문서 기준 · UI 미검증","references":["components/button/usage","components/select/usage","components/toggle/usage","components/tabs/usage"]}
---

# 컴포넌트 선택 기준

## 목적에 맞는 선택

| 사용자 의도 | 선택 | 피할 조합 |
| --- | --- | --- |
| 다른 페이지로 이동 | [링크](link.md) | 클릭 div, 이동용 submit |
| 현재 데이터 변경 | [버튼](button.md) | href 없는 가짜 링크 |
| 여러 값을 독립적으로 선택 | [체크박스](checkbox.md) | 서로 배타적인 체크박스 |
| 하나의 값만 선택 | [라디오](radio-button.md), [셀렉트](select.md) | 다중 선택처럼 보이는 단일 선택 |
| 즉시 적용되는 가역적 켜기/끄기 | [스위치](toggle.md) | 삭제·결제에 사용 |
| 같은 데이터의 표현 방식 전환 | [콘텐츠 전환](content-switcher.md) | 페이지 이동과 혼합 |
| 같은 문맥의 서로 다른 내용 | [탭](tabs.md) | 순차 주문 단계 |
| 순서가 있는 작업 단계 | [단계 표시](progress-indicator.md) | 자유 탐색 탭 |
| 비필수 짧은 설명 | [툴팁](tooltip.md) | 필수 오류·결제 조건 |
| 버튼·링크가 포함된 작은 설명 | [팝오버](popover.md) | 툴팁 안의 링크 |
| 잠깐 집중해야 하는 확인 | [모달](modal.md) | 여러 중첩 모달 |
| 여러 서버/청구서 비교 | [데이터 테이블](data-table.md) | 값을 탭마다 숨김 |
| 폴더의 다단계 탐색 | [트리](tree-view.md) | 단순 목록의 불필요한 tree 역할 |

## 조합 규칙

- SEL-01 MUST: 시각적 유사성이 아니라 작업 의미와 키보드 계약으로 선택합니다.
- SEL-02 SHOULD: 사용자가 데이터를 입력한 뒤 저장해야 한다면 폼 컨트롤로 표현합니다. 즉시 적용 스위치로 오인시키지 않습니다.
- SEL-03 MUST: 부모 행이 이동해도 안의 복사·체크박스·메뉴는 독립 동작하며 이벤트가 중복 실행되지 않아야 합니다.
- SEL-04 SHOULD: 사용자가 동시에 비교할 값은 같은 화면에 둡니다.
- SEL-05 MAY: 문서에 소개된 모든 컴포넌트를 모든 제품에 만들 필요는 없습니다.

## 구현 선택

문서 화면은 메인 사이트의 실제 색·Geist/Pretendard·CTA 구조를 사용합니다. 모든 컴포넌트 문서에서 실행형 예제를 볼 수 있습니다. 원본 스타일을 연결한 버튼과 제품 토큰으로 구성한 동작 예제는 구분합니다. VPS의 Mantine/Emotion, Panel의 React/Blueprint, Blesta의 PHP/PDT를 대체하는 공통 런타임 패키지는 아닙니다.