TeamWicked Design System / 시작하기

컴포넌트 선택 기준

비슷하게 보이는 컨트롤을 목적과 동작으로 구분합니다.

적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.

목적에 맞는 선택

사용자 의도 선택 피할 조합
다른 페이지로 이동 링크 클릭 div, 이동용 submit
현재 데이터 변경 버튼 href 없는 가짜 링크
여러 값을 독립적으로 선택 체크박스 서로 배타적인 체크박스
하나의 값만 선택 라디오, 셀렉트 다중 선택처럼 보이는 단일 선택
즉시 적용되는 가역적 켜기/끄기 스위치 삭제·결제에 사용
같은 데이터의 표현 방식 전환 콘텐츠 전환 페이지 이동과 혼합
같은 문맥의 서로 다른 내용 탭 순차 주문 단계
순서가 있는 작업 단계 단계 표시 자유 탐색 탭
비필수 짧은 설명 툴팁 필수 오류·결제 조건
버튼·링크가 포함된 작은 설명 팝오버 툴팁 안의 링크
잠깐 집중해야 하는 확인 모달 여러 중첩 모달
여러 서버/청구서 비교 데이터 테이블 값을 탭마다 숨김
폴더의 다단계 탐색 트리 단순 목록의 불필요한 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를 대체하는 공통 런타임 패키지는 아닙니다.

출처와 적용 범위

원본 확인 범위와 운영 적용 여부를 구분합니다. 실행형 예제의 동작 확인은 모든 운영 화면의 접근성 검증을 의미하지 않습니다.

Markdown 원본 다운로드