폼 및 테이블 패턴
SLUR UI System에서 폼(Form)과 테이블(Table)은
데이터를 입력·표현하기 위한 구조 중심 UI 패턴입니다.
폼 및 테이블 패턴은 시각적 정렬이 아니라,
역할과 책임을 명확히 분리하기 위한 기준입니다.
폼과 테이블의 역할
Section titled “폼과 테이블의 역할”폼과 테이블은 다음 역할을 담당합니다.
- 폼: 사용자 입력 수집
- 테이블: 데이터 구조화 및 표현
이 두 패턴은
구조와 의미가 명확해야 하며,
시각적 표현보다 데이터 흐름을 우선합니다.
폼 패턴 설계 기준
Section titled “폼 패턴 설계 기준”폼을 설계할 때는 다음 기준을 따릅니다.
- 입력 요소는 의미 있는 구조로 그룹화합니다.
- 레이블과 입력 요소의 관계를 명확히 합니다.
- 오류 상태와 안내 메시지는 구조적으로 분리합니다.
- 단일 폼은 하나의 목적만 수행합니다.
폼은
레이아웃을 맞추기 위한 구조가 아니라,
입력 흐름을 표현하는 구조입니다.
테이블 패턴 설계 기준
Section titled “테이블 패턴 설계 기준”테이블은
데이터의 관계를 표현하는 데에만 사용합니다.
- 레이아웃 목적으로 테이블을 사용하지 않습니다.
- 열과 행의 의미가 명확해야 합니다.
- 반복 구조는 내부 요소 기준으로 관리합니다.
- 테이블 내부에 불필요한 구조 중첩을 지양합니다.
테이블은
데이터 구조를 그대로 드러내야 합니다.
폼과 테이블의 구조 분리
Section titled “폼과 테이블의 구조 분리”폼과 테이블은
다음 기준으로 구조를 분리합니다.
- 입력 영역과 설명 영역 분리
- 데이터 영역과 제어 영역 분리
- 상태 표시 영역과 콘텐츠 영역 분리
구조 분리가 명확할수록
상태 처리와 스타일 적용이 단순해집니다.
상태 관리 기준
Section titled “상태 관리 기준”폼과 테이블의 상태는
상태 기반 UI 원칙을 따릅니다.
- 유효성 상태
- 오류 상태
- 비활성 상태
상태는 데이터 속성 또는 수정자로 표현하며,
CSS는 상태를 해석해 스타일을 적용합니다.
폼 및 테이블 패턴의 목적
Section titled “폼 및 테이블 패턴의 목적”폼 및 테이블 패턴은
데이터 흐름을 명확히 하고,
구조적 안정성을 유지하기 위한 기준입니다.
입력과 데이터 표현이 명확할수록
UI는 더 예측 가능하고 유지보수하기 쉬워집니다.