TeamWicked Design System / 관리·검증

검증·배포 체크리스트

문서 자동 검사와 실제 제품 UI 검증의 완료 기준을 분리합니다.

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

이 문서 저장소 검사

npm run test:unified는 vPanel·Pterodactyl·Blesta의 같은 예제에서 계산된 색상·글꼴·테두리·모서리·크기·스위치 손잡이가 같은지 비교합니다. 제품 선택은 맥락만 바꾸며 스타일을 분기하지 않아야 합니다. TeamWicked 자체 12px CTA와 단일 제품 선택이 유지되는지도 검사합니다.

전체보기는 체계별로 TeamWicked 40개 / WickedHost 50개 요소를 표시합니다. npm run test:expanded는 네모난 스위치의 라이트·다크 / on·off 크기와 위치, 실패 복구, 읽기 전용, 추가 20개 동작을 검사합니다. npm run test:browser는 허용된 제품·문서 조합과 모바일 렌더를 검사합니다. 두 검사는 실제 제품 API를 호출하지 않습니다.

npm run docs:check는 문서 메타데이터, 내부 링크·앵커, 규칙 ID 중복, 출처 참조, 필요한 페이지 구조를 검사합니다. npm run build는 같은 Markdown으로 만든 문서 화면을 빌드합니다. 이 두 결과는 제품의 접근성·업무 기능 합격이 아닙니다.

제품 변경 전에

  • 정확한 제품·화면·현재 revision·선택한 파일을 기록.
  • 변경 규칙 ID·상태·기존 예외를 연결.
  • 담당자·복구 방법·배포 승인을 확인.
  • 원본 scoped backup과 현재 사용자 수정 보존.
  • 계정·고객 정보·비밀값이 없는 테스트 자료 준비.

UI·접근성

  • 라이트/다크, 320/390/768/1440 CSS px, 200% 확대.
  • 키보드 진입·Tab 순서·focus·Escape·복귀.
  • 이름·역할·상태·필드 오류 관계·live region.
  • 대비·단위·긴 한글/경로·줄임표 원문 확인.
  • 로딩·빈 결과·접근 불가·실패·재시도·중복 실행.
  • 모션 감소·자동완성·붙여넣기·화면 낭독기.
  • 브라우저 콘솔 오류와 요청의 실제 업무 결과.

제품 경로

WICKEDVPS: 서버 목록 → 상세 → 승인된 전원/백업 흐름 → 사용량 → 청구 이동.

Panel: 목록 → 콘솔 → 파일 → 설정/이미지 변경 검토 → 오류 복구.

Blesta: 상품 → 주문 검토 → 승인된 결제 테스트 → 청구 → 티켓 초안/첨부 검증.

승인 없이는 운영 결제, 고객 기록, 이메일, 서버 삭제/변경을 만들지 않습니다. HTTP 200만으로 성공을 판정하지 않습니다.

기록 양식

검증자 / 날짜 / 제품 revision / 규칙 ID / 환경 / 예상 / 실제 / 근거 파일 / 판정(pass, fail, blocked, not-tested) / 남은 범위를 기록합니다. 과거 QA 자료는 날짜가 있는 역사적 증거로 인용합니다.

문서 게시

사용자가 지정한 teamwicked.me/designsystem 경로에 정적 문서로 게시합니다. 기존 Cloudflare Tunnel과 nginx를 사용하고 해당 경로만 추가합니다. 메인 Next.js·세 제품 업무 런타임·DNS는 변경하지 않습니다. 이전 Sites 버전은 보관 기록이며 최신 게시 대상이 아닙니다.

출처와 적용 범위

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

Markdown 원본 다운로드