# INVYONE 템플릿 반응 정책 정의

## 1. 문제 정의

현재 템플릿은 FHD 기준으로 화면 디자이너에서 제작된다.

하지만 실제 사용 환경에서는 다음과 같이 더 작은 영역에도 표시된다.

- 전체 화면
- 화면의 1/2 영역
- 화면의 1/4 영역

이때 모든 컴포넌트를 동일하게 축소하면 다음 문제가 발생한다.

- 테이블 컬럼이 읽기 어려울 정도로 줄어든다
- 버튼이 비정상적으로 찌그러지거나 붙는다
- KPI 카드와 같은 요약 컴포넌트는 가로 폭 부족 시 구조가 무너진다
- 결과적으로 템플릿이 원래 의도한 화면 구조를 유지하지 못한다

이 문서의 목적은 자유배치를 유지하면서도, 표시 영역 축소 시 컴포넌트 성격에 맞는 반응 규칙을 정의하는 것이다.

## 2. 핵심 원칙

### 2.1 자유배치는 유지한다

- 화면 디자이너에서의 자유배치 개념은 유지한다
- 템플릿은 여전히 FHD 기준으로 제작한다
- 사용자는 원하는 위치에 원하는 화면 구성을 설계할 수 있어야 한다

### 2.2 전체 일괄 축소는 하지 않는다

- 화면이 줄어든다고 해서 전체 레이아웃을 비율로 일괄 축소하지 않는다
- 모든 컴포넌트가 동일한 방식으로 반응해서는 안 된다

### 2.3 반응 규칙은 컴포넌트별로 다르게 적용한다

- 어떤 컴포넌트는 크기를 유지해야 한다
- 어떤 컴포넌트는 위치만 따라 이동해야 한다
- 어떤 컴포넌트는 줄바꿈 또는 열 재배치가 필요하다

즉, 반응형의 기준은 `화면 전체`가 아니라 `컴포넌트 타입별 정책`이다.

## 3. 템플릿 기준 해상도

- 기본 제작 기준: `1920 x 1080 (FHD)`
- 템플릿 저장 시 기준 해상도 정보를 함께 가진다
- 실제 렌더링 시에는 현재 표시 영역 크기와 기준 해상도를 비교해 각 컴포넌트 정책을 적용한다

## 4. 컴포넌트 반응 정책

## 4.1 테이블 / 리스트 / 그리드

### 목표

데이터 가독성을 우선한다.

### 정책

- 컬럼 폭을 억지로 줄이지 않는다
- 텍스트가 깨질 정도의 축소를 허용하지 않는다
- 표시 영역보다 내용이 넓으면 `가로 스크롤`을 허용한다
- 필요 시 세로 높이만 부모 영역에 맞춰 조정할 수 있다

### 금지

- 컬럼이 의미 없이 좁아지는 자동 압축
- 테이블 전체를 축소 비율로 찌그러뜨리는 처리

## 4.2 버튼 / 액션 그룹

### 목표

조작 가능성과 클릭 영역을 유지한다.

### 정책

- 버튼의 기본 높이와 클릭 가능한 최소 폭을 유지한다
- 화면 폭이 줄어들면 버튼 그룹은 함께 이동할 수 있다
- 버튼끼리 겹치지 않는 선에서 정렬 위치는 바뀔 수 있다
- 필요한 경우 동일 그룹 안에서 줄바꿈을 허용할 수 있다

### 금지

- 버튼 텍스트가 읽기 어려울 정도로 가로 폭을 강제로 압축하는 것
- 버튼 높이와 클릭 영역을 비정상적으로 줄이는 것

## 4.3 KPI 카드 / 통계 카드 / 요약 카드

### 목표

카드 자체의 정보 밀도는 유지하되, 폭 부족 시 구조를 재배치한다.

### 정책

- 카드 크기를 무한정 축소하지 않는다
- 최소 카드 폭을 가진다
- 폭이 부족하면 `열 수를 줄이고 행 수를 늘린다`
- 예시:
  - FHD: 5열
  - 중간 폭: 3열
  - 작은 폭: 2열
  - 매우 작은 폭: 1열

### 허용

- 카드 그룹 내부의 줄바꿈
- 카드 간 gap 재계산

### 금지

- 카드 글자와 수치가 읽기 어렵도록 비율 축소하는 것

## 4.4 라벨 / 텍스트 / 정보 블록

### 목표

텍스트 가독성을 유지한다.

### 정책

- 폰트를 화면 축소에 맞춰 기계적으로 줄이지 않는다
- 텍스트 영역은 줄바꿈 가능
- 너무 좁으면 높이 증가를 허용한다

## 4.5 컨테이너 / 섹션 영역

### 목표

자식 컴포넌트의 정책을 수용하는 부모 역할을 한다.

### 정책

- 컨테이너는 자식 배치 규칙을 존중한다
- 컨테이너는 내부 overflow 정책을 가진다
- 필요 시 `hidden`, `auto`, `scroll` 중 하나를 선택할 수 있어야 한다

## 5. 자유배치와 반응 정책의 관계

자유배치는 유지하지만, 자유배치의 의미는 다음처럼 해석한다.

- FHD 기준에서는 디자이너에서 배치한 위치를 최대한 그대로 보여준다
- 더 작은 표시 영역에서는 각 컴포넌트 정책에 따라 다르게 반응한다
- 즉, 자유배치는 `기준 배치값`이며, 축소 시 무조건 픽셀 단위 동일성을 보장하는 개념은 아니다

단, 이때도 다음 원칙은 유지한다.

- 컴포넌트의 성격을 무시한 일괄 축소는 하지 않는다
- 사용자 의도가 크게 훼손되지 않는 범위에서만 재배치한다

## 6. 반응 정책 레벨

각 컴포넌트는 아래 중 하나의 반응 정책을 가진다.

### 6.1 Fixed

- 크기 유지
- 위치만 조정 가능
- 대표 예시: 버튼, 입력 필드 일부, 툴바 액션

### 6.2 Scroll

- 내용 크기 유지
- 부모 영역보다 크면 스크롤 허용
- 대표 예시: 테이블, 그리드, 코드 뷰, 데이터 목록

### 6.3 Reflow

- 폭 부족 시 줄바꿈, 열 수 재배치 허용
- 대표 예시: KPI 카드, 요약 카드, 뱃지 그룹

### 6.4 Wrap

- 요소 크기는 유지하되 행 단위 줄바꿈 허용
- 대표 예시: 버튼 그룹, 필터 태그 그룹

## 7. 최소 필요 속성

각 컴포넌트 또는 컴포넌트 그룹은 최소한 아래 속성을 가져야 한다.

- `responsiveMode`
  - `fixed`
  - `scroll`
  - `reflow`
  - `wrap`
- `minWidth`
- `minHeight`
- `overflowX`
- `overflowY`
- `anchor`
  - `top-left`
  - `top-right`
  - `bottom-left`
  - `bottom-right`
  - `center`

카드 그룹과 같은 재배치 대상은 추가로 아래 속성이 필요하다.

- `minItemWidth`
- `maxColumns`
- `breakpoints`
- `gap`

## 8. 예시 해석

예: 수주관리 템플릿

- 상단 KPI 5개: `reflow`
- 우측 버튼 2개: `fixed` 또는 `wrap`
- 메인 테이블: `scroll`
- 하단 상세영역: `fixed` 또는 부모 컨테이너 기준 확장

이 경우 화면이 줄어들면:

- KPI는 5열에서 3열 또는 2열로 재배치된다
- 버튼은 크기 유지, 필요 시 다음 줄로 넘어간다
- 테이블은 가로 스크롤이 생긴다
- 전체 화면은 무조건 비율 축소되지 않는다

## 9. 제품 관점 결론

INVYONE 템플릿은 `완전 고정 캔버스`도 아니고, `전체 일괄 반응형`도 아니다.

정확한 방향은 다음이다.

- `FHD 기준 자유배치`
- `표시 영역 축소 시 컴포넌트별 차등 반응`
- `읽기성과 조작성을 해치지 않는 범위에서만 유연성 허용`

즉 최종 모델은 다음 한 줄로 정리된다.

> 자유배치는 유지하되, 축소 대응은 화면 전체가 아니라 컴포넌트 정책별로 처리한다.

