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

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

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

### 설계할 때

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

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

### 확인할 때

| 항목 | 기준 |
|---|---|
| 폭 | 320 / 360 / 412 논리 픽셀 + 큰 화면(PC 분할 창 포함) |
| 방향 | 세로·가로 |
| 글자 배율 | 1 / 1.3 / 2 및 대상 OS 최대값, 브라우저 확대 |
| 입력 | 키보드 열림·닫힘, 긴 입력 |
| 기타 | 안전 영역(노치 등), 중첩된 가로 스크롤 |

- 자동 검사가 전체를 대신하지 않습니다. 대표 크기의 **실제 실행 화면 캡처**를 열어 겹침·잘림·터치·스크롤을 봅니다.
- 시작 화면 하나 통과를 "전체 통과"로 보고하지 않습니다. **확인하지 않은 화면은 "확인 안 함"으로 적습니다.**
- 실패가 하나라도 남으면 완료·출시 준비로 표시하지 않습니다.

## 2. 모든 데이터 표는 컬럼 정렬

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

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

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

## 3. 프로그램 제목에 제품명·버전·빌드 시각

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

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

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

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

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

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

## 4. 기본 위젯 모양을 그대로 쓰지 않는다

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