WICKED레이아웃·간격·반응형
Carbon의 정렬 원칙은 참고하되 2x Grid 수치와 UI 크기를 강제하지 않습니다.
WickedHost 공통 확정 기준: vPanel/Pterodactyl 디자인을 Blesta까지 동일 적용. 문서·예제 기준이며 운영 서비스 배포와는 별도입니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
배치 원칙
- LAY-01 MUST: 같은 작업의 제목·설명·필드·후속 동작은 묶고 관련 없는 작업은 구분합니다.
- LAY-02 SHOULD: 반복되는 행·필드·툴바의 정렬축을 유지합니다. 픽셀 오프셋으로 개별 화면만 맞추지 않습니다.
- LAY-03 MUST: 모바일에서 필수 행동·단위·오류·대상을 숨기지 않습니다.
- LAY-04 MUST: 320 CSS px 폭의 일반 내용은 양방향 스크롤 없이 읽을 수 있어야 합니다. 본질적으로 2차원인 표·콘솔은 예외를 명시하고 해당 영역만 스크롤합니다.
- LAY-05 SHOULD: 고정 헤더·푸터가 포커스·오류·제출 버튼을 가리지 않게 합니다.
- LAY-06 MUST: 확대·번역으로 높이가 달라져도 버튼은 자연스럽게 줄바꿈하며 다른 카드와 겹치지 않습니다.
현재 값 보존
WickedHost 공통 기준은 vPanel/Pterodactyl 기반 버튼 40px·일반 입력 42px·4px 모서리입니다. Blesta도 같은 기준을 사용합니다. 기존 Blesta --vx-sp-*의 4, 8, 12, 16, 24, 32, 48, 64, 96px과 compact 40px·touch 44px·인증 입력 48px은 이행 전 소스 기록이며 공통 기준의 별도 예외가 아닙니다. 실제 운영 이행 시 확대·터치·키보드 검증을 보존합니다.
터치와 조작
LAY-07 MUST: WCAG 2.2 AA의 24×24 CSS px 대상 크기 또는 허용 간격·예외를 확인합니다. 프로젝트 권장은 주요 모바일 조작 44×44px입니다. 44px을 모든 상황의 WCAG AA 최소값이라고 표시하지 않습니다.
그림자·계층
같은 평면의 정보 카드를 전부 떠 있는 모달처럼 표현하지 않습니다. 드롭다운·모달·tooltip의 계층은 기존 제품 소유자가 관리합니다. 무한히 큰 z-index로 덮는 수리는 하지 않습니다.
예시
좋음: 서버 정보와 동작 그룹이 좁은 화면에서 한 줄씩 쌓이고, 데이터 표 자체만 가로 스크롤.
피함: 카드 전체 overflow:hidden으로 필수 오류와 열린 메뉴를 잘라냄.
참고: Reflow, Target size minimum.