UI 패턴

UI 패턴은 여러 컴포넌트의 모양을 묶은 예제가 아니라 사용자 목표를 시작부터 완료 또는 복구까지 연결하는 동작 규칙입니다. 같은 컴포넌트 조합이라도 데이터 상태와 업무 중요도에 따라 적합한 흐름이 달라질 수 있습니다.

주요 패턴

패턴	핵심 컴포넌트	설계할 내용
Navigation	Navbar, Menu, Breadcrumb, Tabs	현재 위치, 정보 계층, 이동 후 URL과 포커스, 모바일 메뉴 동작
Form Validation	Form Layout, Input, Select, Alert	입력 조건, 검증 시점, 필드 오류와 전체 요약, 값 보존과 재제출
Modal Task	Modal, Button, Form Layout	열리는 조건, 초기 포커스, 취소·완료 결과, 닫힌 뒤 포커스 복귀
Error Handling	Alert, Empty, Button	오류의 원인과 영향, 재시도 가능 여부, 대체 경로와 문의 정보
Empty State	Empty, Button, Link	데이터가 없는 이유, 권한·필터·최초 상태 구분, 가능한 다음 행동

패턴 작성 순서

1. 사용자의 목표와 패턴이 시작되는 조건을 한 문장으로 정의합니다.
2. 정상 흐름뿐 아니라 로딩, 빈 결과, 부분 성공, 오류와 취소 상태를 나열합니다.
3. 각 상태에서 보이는 콘텐츠, 실행 가능한 동작, 키보드 포커스 위치를 정합니다.
4. 페이지 이동, 데이터 저장, 삭제처럼 되돌리기 어려운 지점과 확인 방법을 정의합니다.
5. 실제 데이터 길이와 모바일 화면에서 조합 예제를 검증합니다.

조합 원칙

• 한 화면에 핵심 액션을 명확히 두고 같은 중요도의 버튼을 과도하게 반복하지 않습니다.
• Modal 안에 Drawer를 여는 식의 중첩된 오버레이는 포커스와 종료 경로가 복잡해지므로 피합니다.
• 성공 상태는 다음 화면이나 Snackbar로 확인하고, 해결이 필요한 실패는 입력 위치나 지속되는 Alert로 안내합니다.
• 패턴 문서에는 컴포넌트 이름뿐 아니라 상태 전이, 메시지, 데이터 조건과 접근성 동작을 기록합니다.