아티클 카타) 팝업, 모달, 논모달 뭐가 다른걸까?

• 출처 : 팝업, 모달, 논모달 뭐가 다른 걸까?

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

 

인사이트(양식 참고)

 

◾이 아티클의 주요 메시지

• 팝업, 모달, 논모달의 정의 및 차이점

◾핵심 키워드

• 팝업, 모달, 논모달, 사용자 경험(UX), 브라우저, 인터랙션

◾흥미로운 점 / 새롭게 알게 된 점

• 읽으면서 가장 흥미로웠던 부분
  • 팝업창 : 브라우저 위에 또 다른 브라우저를 띄움(기존 브라우저와 독립적 관계)
    → 브라우저 자체 옵션을 통해 차단 가능
  • 모달창 : 브라우저 위에 레이어를 띄움(기존 브라우저와 종속 관계/모달을 종료해야 기존 화면 작동 가능)
    → 브라우저 자체 옵션을 통해 설정 불가(사용자에게서 필수 입력값을 받거나 개발자가 종료 버튼 or 모달 외부 클릭 시 기존 브라우저 화면 작동 가능하게 구현한 경우, 기존 브라우저로 돌아가기 가능)
  • 팝업 vs 모달
    • 현재 팝업은 많이 사용하지 않는 추세
      → 광고성 팝업 남용과 사용자 경험 저하 문제로 브라우저 자체에서 '팝업 차단' 기능을 제공
    • 때문에, 사용자에게 꼭 필요한 정보를 노출시킬 때는 팝업보다는 모달창을 사용함(상황에 따라 논모달을 활용하는 것이 더 적절할 수 있음)
  • 논모달 : 모달이지만 모달이 아닌 것(?). 모달과 형태는 비슷하지만 논모달은 모달창을 종료하지 않아도 기존 화면을 작동할 수 있음
    ex 1. 구글의 ‘메일 쓰기’를 클릭하면 우측 하단에 논모달 활성화
    ex 2. 모바일 환경에서 볼 수 있는 스낵바
    → 모달은 의도적으로 사용자의 흐름을 방해하고 이목을 집중시키기 때문에, 꼭 필요한 경우에만 적절히 사용하길 권장함
• 이전에는 알지 못했거나 새롭게 배운 내용
  • 팝업과 모달은 어느 정도 개념을 알고 있었지만, 논모달은 처음 접했다. 이전에도 아무 생각 없이 사용하던 기능들의 차이와 사용 목적을 알아가는 과정이 재밌었다.

◾나의 한 문장 요약

• 팝업은 브라우저와 독립적으로 동작하는 별도 창이고, 모달은 현재 화면 위에 표시되는 레이어이며, 논모달은 현재 화면과 상호작용을 유지한 채 정보를 제공하는 UI다. 사용자의 흐름을 의도적으로 끊는 모달은 꼭 필요한 경우에만 사용하고, 상황에 따라 논모달을 활용하는 것이 더 적절할 수 있다.

 

피드백

 

모달·논모달 개념은 정확하게 이해한 것 같다.

 

다만 실무에서는 모달과 논모달을 사용하는 기준이 내부적으로 정해져 있는 경우가 많고,

UX 디자인 시스템을 따라야 하는 경우도 많다.

 

PM 입장에서는 '이건 모달로 처리하는 게 더 심리스한 경험 아닐까?'라고 생각할 수 있지만,

비슷한 레이어나 정보에 대해 어떤 것은 모달, 어떤 것은 논모달을 사용하면 일관성이 깨질 수 있다.

 

사용자 경험의 일관성은 디자이너들이 굉장히 중요하게 생각하는 부분이기 때문에,

개념 자체는 알아두되 현업에서는 내부 규정과 디자인 시스템을 우선 따르는 것이 좋다.