37일차 | 아티클 카타 5번째 | 팝업, 모달, 논모달 뭐가 다른 걸까?

25.08.05 화

 

📍 팝업, 모달, 논모달 뭐가 다른 걸까?

🗣️ 오, 이런 단어 정의도 은근 중요해요! 확실하게 알고 넘어가 봐요

https://brunch.co.kr/@8eaf677337d14e8/14?utm_source=oneoneone

팝업, 모달, 논모달 뭐가 다른걸까?

 

* 모달의 종류

우측 하단처럼 딤 처리 되어 있는 상태에서, 아래 컨텐츠와 상호작용 할 수 있나? 보통 아래 컨텐츠와 상호작용이 불가할 때 저렇게 딤 처리를 해두고 모달 내용을 강조하는 것은 아닌지?

 

 

1. 아티클 정보

• 제목 : 팝업, 모달, 논모달 뭐가 다른 걸까?
• 작성자(저자) : 비이크

2. 핵심 내용 요약

• 이 아티클의 주요 메시지 : 팝업과 모달은 헷갈리는 부분이며, 요즘은 모달을 사용하는 추세
• 핵심 키워드 : 팝업, 모달, 논모달

3. 흥미로운 점/새롭게 알게 된 점

• 읽으면서 가장 흥미로웠던 부분 : 논모달은 모달 형태이지만, 모달창을 종료하지 않아도 기존 화면을 작동할 수 있다.
• 이전에는 알지 못했거나 새롭게 배운 내용 : 팝업, 모달이 헷갈리는 내용이었는데, 이번 아티클을 읽고 개념 정립을 정확히 했다.
  • 팝업은 - 브라우저 위에 또 다른 ‘브라우저’를 띄우는 거
    • 주로 광고나 알림 메시지 등을 표시하는 데 사용
    • 트래픽을 증가시키기도 하고 메모리를 차지하는 일 발생
    • 브라우저 팝업 차단 기능이 켜져 있으면 팝업이 뜨지 않음
  • 모달은 - 브라우저 위에 ‘레이어’를 띄우는 거, 삭제하지 않고서 기존 열려 있는 화면 조작 불가!
    • 서비스와 관련해 다음 단계로 나아가기 위해 필요한 창
    • 모달(자식)에 진입한 사용자는 서비스 흐름에서 벗어나, 모달 내 컨텐츠에 집중한 후, 모달을 벗어나는 순간 다시 원래 컨텐츠(부모)의 위치로 돌아갈 수 있어야 한다.
  • 논모달 - 삭제하지 않고서도 기존 열려 있는 화면 조작 가능! ex. 스낵바, G-mail 메일 쓰기 창 열어두고 메일함 읽기 가능

4. 나의 한 문장 요약

• 이 아티클을 한 문장으로 요약하면?: 팝업, 모달, 논모달에 대한 개념과 모달의 본질은 사용자의 흐름을 의도적으로 방해하고 집중시키는 것이기 때문에 적절하게 사용해야 한다.

 

이전에 한 번쯤은 읽어봤던 내용인데, 역시 한 번에 기억되는 건 없는 것 같다.

그냥 자주자주 읽으며 개념을 체화시켜 나가는 게 낫다!

그러니 완벽하게 뭘 숙지하거나 익히려 하지 말고 점차 점차 익숙해지게 내 것으로 만들어가 보자 🍀

---

1. 팀 전체 논의 요약 :

모달창을 띄울 때 어떻게 해야 사용자에게 불쾌감이 덜할까?

 

TPO 맞춰서 보여줘야 한다.

논모달의 경우 화면의 중요 영역을 가리면 안 된다.

모달은 의도가 방해이기 때문에 컴팩트한 창으로 작게 표시한다.

 

2. 팀 공통 인사이트 or 느낀 점 요약 :

좋은 디자인으로 알려져 있는 모달, 논모달이더라도 잘못 사용되면 오히려 불쾌감을 남길 수 있다.

 

 

* 추가 읽어본 글

모달과 팝업, 정확히 알아야 하는 이유

 

이거도 모달, 저거도 모달, 이게 모람

 

 

팝업(Popup)과 모달(Modal)의 차이