팝업, 다이얼로그, 모달의 차이점
디자인 시스템 시리즈
솔드아웃의 팝업 · 구글 Gemini의 모달팝업, 다이얼로그, 모달의 차이점
디자인 시스템 내에서 사용되는 용어 중 팝업, 다이얼로그, 모달에 대한 개념이 종종 혼재되곤 합니다. 그러나 각각 목적과 사용방식이 다르므로 이 차이에 대해 자세히 알아보겠습니다.
두 개의 별도 페이지를 가진 팝업팝업
사용자의 작업 흐름과 별개로 화면에 나타나는 UI 요소로, 일반적으로 광고나 페이지 이동에 사용되며 화면 외부와 상호작용이 가능합니다.
- 두 개의 페이지를 가지며, 페이지 위에 별도의 페이지를 엽니다
- 최근 팝업 차단 플러그인 등으로 인해 많이 사용되지는 않습니다
- 페이지에 접속하는 시점에 노출
하나의 페이지 내에 레이어를 가진 모달모달 · 다이얼로그
모달(Apple)과 다이얼로그(Google)는 일반적으로 같은 의미로 사용됩니다. 현재 페이지 내에서 사용자와의 상호작용을 위해 나타나는 작은 창으로, 주로 의사결정이나 입력을 요구합니다.
- 현재 페이지에 포함된 창으로, 현재 페이지에 종속된 부모-자식의 관계를 가집니다
- 모달을 종료하지 않으면 기존 페이지를 조작할 수 없습니다
- 지정한 버튼이나 링크를 누른 시점에 노출
솔드아웃 · CGV · 배달의 민족 내 팝업팝업의 예시
웹과 달리 모바일 환경에서는, 팝업이 페이지에 종속된 창의 형태를 지니는 경우가 많습니다. 그러나 다른 브라우저를 보여주거나 다른 페이지로 이동시키는 특성, 페이지에 접속하자마자 발생하는 특성으로 인해 팝업으로 분류되는 경우가 많아 보입니다.
Meta Quest · Google Gemini · Youtube Studio 내 모달모달의 예시
기존 페이지와 부모-자식 관계를 가지는 형태의 창은 대부분 모달이라고 할 수 있습니다. 현재 페이지의 일부로 작동하며, 모달이 열리면 페이지 콘텐츠와의 상호작용이 차단됩니다.
모달(다이얼로그)의 종류
부모-자식의 관계를 가지는 창이 모달인 만큼, 그 아래에는 다양한 종류의 모달이 존재합니다.
경고 모달
경고 모달은 중요한 정보나 긴급한 알림을 사용자에게 전달하는 데 사용됩니다. 주로 사용자의 주의를 끌어야 할 상황에서 발생하며, 예를 들어 위험한 작업을 실행하기 전에 사용자가 이를 인지하고 확인할 수 있도록 합니다. 이러한 모달은 강력한 액션을 요구하며, 일반적으로 "확인" 또는 "취소"와 같은 선택지를 제공하여 사용자의 결정을 받습니다.
단순 모달
단순 모달은 간단한 메시지나 선택 항목을 나타내는 경량화된 형태의 모달입니다. 이 모달에서는 즉시 선택이 적용되는 목록을 사용자에게 제공하며, 주로 작은 설정 변경이나 간단한 정보 전달을 위해 사용됩니다. 사용자가 항목을 선택하면, 그 즉시 실시간으로 반영되거나 변화가 적용되어, 흐름을 방해하지 않고 직관적으로 반응합니다.
폼 모달
폼 모달은 사용자로부터 정보를 입력받기 위한 모달입니다. 이 모달은 보통 입력 필드, 선택 버튼 등을 포함하여 사용자에게 필요한 데이터를 입력하게 하고, 제출 버튼을 통해 정보를 처리합니다. 예를 들어 회원가입, 설정 변경, 피드백 제출 등을 위한 폼을 포함할 수 있습니다. 입력 양식이 많을 경우, 페이지를 차지하는 전체 화면 모달로 구현되기도 합니다.
전체 화면 모달
전체 화면 모달은 현재 화면을 모두 차지하는 대형 모달로, 사용자가 특정 작업을 완료해야 할 때 나타납니다. 일반적으로 단계별 작업(예: 결제, 등록, 설문 응답 등)을 요구하며, 사용자가 작업을 완료할 때까지 다른 화면과 상호작용을 차단합니다. 이 모달은 필수 입력이 있는 절차를 다룰 때 유용하며, 페이지 흐름을 완전히 제어할 수 있습니다.
Dialog - Material Design 3모달(다이얼로그)의 구성요소
모달의 구성요소는 사용자에게 중요한 정보를 전달하고, 명확한 선택을 유도하기 위해 다음과 같은 요소로 구성됩니다.
1. 컨테이너 (Container)
컨테이너는 모달의 주요 구조를 형성하는 요소로, 모달 내부의 모든 콘텐츠를 감싸며 레이아웃을 정의합니다. 이 요소는 모달의 크기와 위치를 결정하며, 사용자에게 깔끔하고 정돈된 인터페이스를 제공합니다.
2. 아이콘 (Icon) (Optional)
아이콘은 모달의 의미를 강조하거나 시각적인 구분을 제공하는 선택적인 요소입니다. 경고, 정보, 성공 등의 메시지를 보다 직관적으로 전달하는 데 도움을 줍니다.
3. 헤드라인 (Headline)
헤드라인은 모달의 주요 제목을 나타내며, 사용자가 모달의 목적을 빠르게 이해할 수 있게 합니다. 간결하고 명확한 문구로 모달의 핵심 메시지를 전달하는 역할을 합니다.
4. 지원 텍스트 (Supporting text)
지원 텍스트는 헤드라인을 보조하며 추가적인 설명을 제공하는 요소입니다. 모달의 맥락을 이해하는 데 도움을 주고, 사용자가 다음에 취해야 할 행동을 안내합니다.
5. 구분선 (Divider) (Optional)
구분선은 모달 내에서 섹션을 나누거나 구분할 때 사용되는 선택적인 요소입니다. 시각적으로 내용을 그룹화하고, 각 섹션을 명확히 분리하여 가독성을 높입니다.
6. 버튼 (Buttons) (Optional)
버튼은 모달에서 사용자의 선택을 유도하는 중요한 요소로, 주로 확인, 취소 등의 액션을 처리합니다. 각 버튼은 명확하게 행동을 정의하며, 사용자가 모달을 종료하거나 작업을 수행할 수 있게 합니다.
7. 스크림 (Scrim)
스크림은 모달이 표시될 때 배경을 흐리게 하여 모달에 집중하도록 돕는 반투명 오버레이입니다. 이 요소는 사용자가 모달 외의 배경과 상호작용하지 않도록 하여 집중도를 높이고, 모달의 중요성을 강조합니다.
마치며
모달과 팝업은 대부분 현재 페이지와 부모-자식 관계를 가지냐에 따라 구분할 수 있습니다. 하지만 모바일에서는 둘의 차이가 비교적 모호한 것처럼, 현업에서의 용어도 100% 명확하게 구분되어 불리지는 않는 것 같습니다. 유사한 용어의 구분을 기억하되, 구성원 간의 합의와 커뮤니케이션 역시 중요하다는 생각이 듭니다.
모달(다이얼로그)에 대한 구체적인 지침은 아래 가이드에서 확인하실 수 있습니다!
