입력, 검증, 저장, 오류 표시를 하나의 일관된 폼 흐름으로 구성합니다.
폼은 화면 입력 필드의 묶음이면서 동시에 저장 가능한 도메인 변경 요청입니다. 그래서 UI field 이름, 검증 메시지, 서버 DTO 사이의 이름을 최대한 맞추면 오류를 추적하기 쉬워집니다.
- 입력 전용 모델과 조회 모델을 분리합니다.
- 필수값은 UI와 서버에서 같은 기준을 씁니다.
- 초기값과 빈값의 의미를 명확히 합니다.
검증은 제출 버튼을 누른 뒤 한 번에 보여주는 방식만으로는 부족합니다. 사용자가 고칠 수 있는 위치 가까이에 오류를 보여주고, 서버에서만 알 수 있는 오류는 상단 summary로 연결하는 구조가 안정적입니다.
- 필드 오류와 전역 오류를 나눕니다.
- 저장 실패 후 입력값을 유지합니다.
- 오류 문구는 해결 행동을 포함합니다.
데이터 화면은 비어 있음, 로딩 중, 저장 중, 실패, 성공 이후 상태를 모두 가집니다. 이 상태를 명시적으로 다루면 같은 컴포넌트를 여러 페이지에서 재사용해도 동작이 예측 가능합니다.
- 저장 중에는 중복 제출을 막습니다.
- 목록 갱신과 상세 갱신 순서를 정합니다.
- 느린 네트워크에서도 버튼 상태가 보이게 합니다.
업무 데이터는 대부분 표에서 시작하지만 모든 값을 한 번에 보여주는 표는 빠르게 읽기 어렵습니다. 핵심 식별자, 상태, 다음 행동을 우선 배치하고 자세한 설명은 상세 화면으로 넘기는 편이 좋습니다.
- 정렬 가능한 열과 고정 열을 구분합니다.
- 행 action은 반복 위치를 일정하게 둡니다.
- 빈 결과와 필터 없음 상태를 다르게 보여줍니다.
Java 중심 UI 시스템으로 제품 수준의 웹 앱을 더 빠르게 구축합니다. 공통 컴포넌트와 레이아웃을 기반으로 사이트를 일관되게 확장할 수 있습니다.