WICKEDWickedHost Design System / 기초
모션·로딩 표현
움직임은 변화의 원인을 설명하고, 사용자 작업을 방해하지 않습니다.
WickedHost 공통 확정 기준: vPanel/Pterodactyl 디자인을 Blesta까지 동일 적용. 문서·예제 기준이며 운영 서비스 배포와는 별도입니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
목적과 기준
- MOT-01 SHOULD: 상태 변화·위치 이동·작업 진행을 이해시키는 모션만 사용합니다.
- MOT-02 MUST: prefers-reduced-motion에서 장식·시차·반복 움직임을 줄이거나 제거하고 의미는 텍스트로 유지합니다.
- MOT-03 MUST: 애니메이션 종료를 업무 요청 성공으로 취급하지 않습니다.
- MOT-04 SHOULD: 컴포넌트별 다른 easing을 늘리기 전에 제품의 기존 모션 토큰을 확인합니다.
- MOT-05 MUST: 초당 세 번을 넘는 번쩍임 등 광과민 위험을 만들지 않습니다.
- MOT-06 SHOULD: 이미 읽고 있는 내용의 재조회에 전체 페이지 skeleton을 다시 표시하지 않습니다.
현재 값
Blesta 토큰에는 fast 150ms, base 300ms, slow 600ms와 cubic-bezier(.22, 1, .36, 1)이 있습니다. VPS 사이드바 선언은 transform 180ms ease입니다. 제품 전체 모션 감사 결과나 운영 계산값은 아닙니다.
적용 예
좋음: 메뉴의 열림 상태는 aria-expanded와 위치로 전달하고, 모션 감소 환경에서는 즉시 전환합니다.
피함: 대시보드 전체를 등장 애니메이션 뒤에 숨기거나 API 응답 없이 진행률을 매초 10%씩 증가시키기.
확인
모션 감소, 느린 네트워크, 요청 실패, 탭을 숨겼다 돌아옴, 중단 후 재시도에서 같은 결과를 이해할 수 있어야 합니다. 대기·빈 상태·실패를 함께 적용합니다.