WICKEDTeamWicked Design System / 기초
아이콘·브랜드 자산
현재 아이콘·로고를 보존하고, 행동과 상태를 일관되게 설명합니다.
적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
검색
이동
완료
복사
코드
메뉴
TeamWicked 웹사이트 토큰으로 구성한 디자인 예제예시 데이터 · API 미연결
범위
Carbon 아이콘 세트를 도입하거나 IBM 로고를 복제하는 작업이 아닙니다. 현재 제품의 아이콘 소유권과 출처를 기록하고 의미를 통일합니다.
- ICON-01 MUST: 아이콘 단독 버튼에 대상·동작을 알 수 있는 접근 가능한 이름을 제공합니다.
- ICON-02 MUST: 장식 SVG는 보조기술에서 중복 낭독하지 않도록 처리합니다.
- ICON-03 SHOULD: 같은 제품의 같은 동작에는 같은 아이콘과 크기 기준을 사용합니다.
- ICON-04 MUST: 삭제·경고 등 의미를 아이콘 모양과 문구로 함께 전달합니다.
- ICON-05 MUST: 새 자산은 원본, 저작권, 라이선스, 수정 여부를 기록한 뒤 사용합니다.
현재 근거
VPS WickedFormNotice는 Heroicons outline과 의미별 아이콘을 사용합니다. Panel Design Controller는 Bootstrap icon allowlist를 갖고 확장 식별자별 선택값을 저장하도록 설계되어 있습니다. Blesta 전체 아이콘 라이선스·사용처 목록은 미조사입니다. 문서 뷰어의 Lucide는 문서 전용입니다.
사용 예
좋음: “서버 주소 복사” 버튼에 copy 아이콘, 복사 성공 시 텍스트 또는 live status.
피함: 의미가 다른 확장을 모두 같은 장식 별 아이콘으로 표현하거나 클릭 가능한 아이콘에 이름이 없음.
검증
밝고 어두운 테마, 200% 확대, 키보드 탐색, 스크린리더의 이름·역할, 실패 시 아이콘이 성공으로 바뀌지 않는지 확인합니다.