UI 공통 기준 — 반응형·표 정렬·제목 버전 표기

모든 화면은 모바일 반응형·넘침 0건, 모든 데이터 표는 컬럼 정렬, 프로그램 제목에 제품명·버전·빌드 시각을 표시한다.

1. 모든 화면은 모바일 반응형 — 넘침 0건

UI 가 있는 모든 제품은 모바일 반응형이어야 하며, 어느 화면에서도 화면 넘침(오버플로우)·잘림이 없어야 합니다. 예외는 없습니다. UI 가 없는 라이브러리는 "해당 없음"으로 기록합니다.

하지 말 것	대신
레이아웃 골격에 고정 px 폭 (`w-[300px]`)	`min-w-*` + `flex-1` 로 흐르게
항목 나열에 고정 열 수 (`grid-cols-2`)	`flex flex-wrap` + `min-w-*` — 넓으면 한 줄, 좁으면 줄바꿈
좁은 화면에서도 좌우 2단 분할	위아래 배치나 탭으로 전환
넓은 표를 그대로	가로 스크롤 + 좁을 때 숨길 컬럼 지정
촘촘한 아이콘 버튼	터치 대상 최소 약 40px 확보

좁다는 이유로 핵심 화면 구조를 다른 기능으로 바꾸지 않습니다. (예: 월간 달력을 날짜 목록으로 강제 대체 금지. 목록 보기는 사용자가 고르는 별도 보기로 제공)
잘림을 overflow: hidden, 글꼴 강제 축소, 오류 숨김으로 가리지 않습니다.
긴 한국어·공백 없는 문자열, 빈 값, 오류 안내, 다이얼로그·메뉴·하단 시트도 확인합니다.

데이터 표의 각 컬럼 머리글로 오름차순/내림차순 정렬할 수 있어야 합니다.

항목	기준
표시	현재 정렬 컬럼과 방향(▲/▼)을 표시
숫자·날짜	표시 문자열이 아니라 원래 값으로 정렬 (`2 < 10 < 100`, 날짜 경계 정확)
빈 값	정렬 시 위치가 일관됨
페이지 나눔	현재 페이지만이 아니라 전체 조회 대상 기준으로 정렬. 서버 페이징이면 서버 정렬과 연결
선택 상태	정렬해도 선택된 행·행 식별이 유지됨
제외	체크박스·작업 버튼 등 데이터가 아닌 컬럼은 정렬 대상에서 제외
기본 정렬	화면 성격에 맞게 지정 (예: 일별 추이는 최근순)
접근성	키보드로도 정렬 가능

왜 — "문자열 정렬"이면 10 이 2 보다 앞에 오고, "현재 페이지 정렬"이면 사용자는 전체가 정렬된 줄 알고 잘못 판단합니다.

설치형 프로그램의 주 창 제목에 다음을 표시합니다.

제품명 1.10.0 · 2026-10-27 14:05:12 KST

(1.10.0 은 형식 예시이며, 각 제품의 실제 버전을 씁니다.)

항목	기준
빌드 시각	빌드할 때 만든 메타데이터에서 읽는다. 실행 시각·파일 복사·설치 시각을 쓰지 않는다
제목 갱신	파일 열기·탭·상태 변경으로 제목이 바뀌어도 버전·빌드 시각은 유지
작은 창	창 제어 버튼(닫기·최소화)을 침범하지 않게 줄이고, 전체 제목은 툴팁·접근성 이름으로 확인 가능
검증	실제 설치본의 창 제목과 패키지/어셈블리 버전·빌드 시각을 대조

왜 — 현장에서 "지금 어떤 버전이 깔려 있나"를 화면 한 번으로 확인할 수 있어야 문의·장애 대응이 빨라집니다.

웹 대시보드처럼 제품별로 이미 정해진 제목 형식(예: 사이트 이름 + 수정 시각 스탬프)이 있으면 그 제품 규칙을 따릅니다. 이때도 "어느 빌드인가"를 제목에서 알 수 있어야 한다는 목적은 같습니다.

UI 프레임워크의 기본 위젯 모양을 그대로 내놓지 않고, 프로젝트의 공용 컴포넌트와 디자인 토큰(색·간격·글꼴 정의)을 재사용합니다. 같은 제품 안에서 같은 기능은 같은 모양으로 보여야 합니다.