[기획 실무] 팝업 유형 정리, 모달 팝업 기획 시 주의해야할 사항

[팝업 종류]

팝업에는 여러 유형이 있다. GPT에 물어봤더니 약 10가지의 팝업유형을 알려주었다.
대표적인 특성을 나타내는 2가지 팝업은 모달 팝업과 비모달 팝업으로 나뉜다.

1. 모달 팝업 (Modal Popup)

• 특징: 화면에 띄운 후, 사용자가 반드시 그 팝업을 닫거나 상호작용을 해야만 다른 화면으로 이동할 수 있게 제한하는 팝업입니다.
• 용도: 중요 알림, 경고 메시지, 로그인/회원가입 폼, 결제 처리 등.
• 장점: 사용자의 주의를 집중시킬 수 있음.
• 단점: 너무 자주 사용되면 사용자가 불편함을 느낄 수 있음.

2. 비모달 팝업 (Non-Modal Popup)

• 특징: 모달 팝업과 달리 사용자가 팝업을 닫지 않고도 다른 화면을 계속 탐색할 수 있습니다.
• 용도: 추가적인 정보를 제공하거나 알림을 표시할 때.
• 장점: 사용자가 팝업과 페이지를 동시에 다룰 수 있어 유연함.
• 단점: 주의를 끌기 어렵고, 지나치게 사용하면 방해가 될 수 있음.

여러 유형의 팝업 중에서도 팝업을 구분 짓는 가장 큰 차이는 사용자의 상호작용 유무에 따라 다른 화면으로 넘어갈 수 있느냐 없느냐는 것이 가장 큰 차이라고 할 수 있다.
 
팝업마다 차이를 확실히 알고, 팝업 종류가 많은 만큼 어떤 의도로 기획되었는지를 자세하게 써주지 않으면 단순하다고 생각했던 팝업 기획이 완전히 다른 의도로 개발이 되는 경우가 발생한다. 기획서는 최대한 자세하고 명확하게 설명하는 것이 중요하다. (나도 쉽고 명료하게 쓰려고 노력하지만 어떨 때는 내가 쓴 기획서도 무슨 말인지 한참을 고민할 때가 있다)

 

모달 팝업 기획 시 주의할 점

1. 딤 영역 클릭 시 모달 팝업이 닫히지 않도록 설정

• 모달 팝업 내에서 사용자의 입력이 필요한 경우, 실수로 입력한 정보가 사라지는 것을 방지해야 한다.
• 딤 영역을 클릭해도 모달 팝업이 닫히지 않도록 기획해야 한다.

2. 모달 활성화 시 배경 스크롤 방지

• 모달이 활성화된 상태에서는 배경(바디) 스크롤이 되지 않도록 해야 한다.
• 필수적인 상호작용(텍스트 입력, 버튼 클릭 등)을 통해서만 다음 단계로 진행할 수 있도록 제한해야 한다.

 

출처 KRDS/ 모달 팝업 노출과 동시에 배경이 딤처리된 예시

3. 이중 팝업(모달 내 모달) 처리

• 이중 팝업은 UX 측면에서 바람직하지 않지만, 필요한 경우 명확한 동작 규칙을 설정해야 한다.
• 예시: ‘1:1 문의하기’ 모달에서 ‘내가 구매한 상품 목록’을 선택해야 하는 경우, 추가 모달이 필요할 수 있음.
• 이중 팝업의 경우, 서브 모달은 딤 영역을 클릭하면 닫히도록 설정하되, 메인 모달은 유지되도록 기획해야 한다.

4. 모달 팝업 내 모달 팝업 예시

• 메인 모달: 닫힘 방지 (예: 1:1 문의하기)
• 서브 모달: 닫힘 허용 (예: 구매한 상품 목록 선택)
• 각 팝업의 동작을 명확하게 정의하여 개발 과정에서 혼선을 방지해야 한다.

모달 팝업안에 모달팝업 예시

5. 결론

• 모달 팝업은 기획 시 자주 등장하는 UI 요소로, 알럿(alert)과 달리 정보 입력을 필요로 하는 경우가 많다.
• 디테일한 기획이 없으면 개발 과정에서 혼선이 발생할 수 있으며, 결과적으로 의도한 UX가 구현되지 않을 가능성이 크다.
• 협업을 고려하여 기획서를 명확하고 이해하기 쉽게 작성하는 것이 중요하다.