팝업 / 모달 패턴
SLUR UI System에서 팝업과 모달은
페이지 위에 임시로 표시되는 상태 기반 UI 구조입니다.
팝업 / 모달 패턴은 시각적 레이어가 아니라,
UI 흐름을 제어하기 위한 구조적 장치로 취급합니다.
팝업 / 모달의 역할
Section titled “팝업 / 모달의 역할”팝업과 모달은 다음 역할만을 담당합니다.
- 사용자 흐름을 일시적으로 중단
- 추가 정보 제공 또는 결정 유도
- 단일 목적의 인터랙션 수행
팝업과 모달은
페이지의 일부가 아닌 독립된 UI 단위입니다.
팝업 / 모달의 기본 원칙
Section titled “팝업 / 모달의 기본 원칙”SLUR UI System의 팝업 / 모달 패턴은 다음 원칙을 따릅니다.
- 페이지 구조 내부에 종속되지 않습니다.
- 단일 목적만 수행합니다.
- 열림/닫힘은 명확한 상태로 관리합니다.
- 중첩 팝업 사용을 지양합니다.
팝업은
많아질수록 UX와 구조를 모두 복잡하게 만듭니다.
팝업 / 모달과 구조의 관계
Section titled “팝업 / 모달과 구조의 관계”팝업 / 모달은
레이아웃이나 페이지 구조의 내부 요소가 아닙니다.
- 전역 영역에 독립적으로 배치됩니다.
- 페이지 구조와 직접적인 중첩 관계를 가지지 않습니다.
- 컴포넌트를 내부에 포함할 수는 있습니다.
팝업 자체가
하나의 독립적인 구조 단위입니다.
상태 기반 제어 기준
Section titled “상태 기반 제어 기준”팝업 / 모달은
반드시 상태 기반으로 제어합니다.
- 열림 / 닫힘 상태를 명확히 정의합니다.
- 상태 변경은 JavaScript에서 관리합니다.
- 시각적 표현은 CSS가 담당합니다.
클래스 토글만으로
암묵적인 제어를 하지 않습니다.
팝업 / 모달 설계 기준
Section titled “팝업 / 모달 설계 기준”팝업 / 모달을 설계할 때는 다음을 점검합니다.
- 이 기능이 정말 팝업이 필요한가
- 페이지 전환으로 해결 가능한가
- 단일 목적을 유지하고 있는가
- 접근성(포커스 이동, 닫기 방식)이 고려되었는가
불필요한 팝업은
UI 복잡도의 가장 큰 원인입니다.
팝업 / 모달 패턴의 목적
Section titled “팝업 / 모달 패턴의 목적”팝업 / 모달 패턴은
UI 흐름을 명확히 제어하고,
페이지 구조를 보호하기 위한 기준입니다.
팝업이 명확할수록
사용자 흐름과 코드 구조 모두 안정적으로 유지됩니다.