모달 창이란? 모달과 팝업의 차이점!

모달 창이란?

모달 창은 원래 화면 위에 다른 창을 표시하고 사용자에게 정보를 전달하는 화면입니다. 특정 작업을 수행하지 않으면 다른 작업을 수행할 수 없으므로 사용자에게 경고 메시지나 오류를 알리는 데 적합합니다.

모달 창은 특정 작업을 수행하지 않으면 다른 화면을 조작할 수 없는 창입니다. 웹사이트를 볼 때 갑자기 화면에 메시지나 경고가 나오지 않나요? 그것이 모달 창입니다.

 

닫기 버튼 등을 누를 때까지 표시하는 동안에는 다른 조작을 할 수 없습니다. 따라서 사용자에게 강제로 확인 및 조작을 촉구할 수 있습니다.

 

유저에게 정보를 확실히 전하고 싶은 경우에는 효과적이지만 유저의 조작을 강제적으로 제어하기 위해 구현할 때는 주의해야 합니다. 모달 창과 비슷한 것으로 팝업과 대화 상자가 있습니다. 각각의 구조와 목적의 차이는 다음과 같습니다.

모달창

모달과 팝업과의 차이는?

팝업은 웹 사이트를 열 때 나오는 화면의 맨 위에 표시되는 또 다른 화면입니다. 팝업은 광고나 중요한 메시지, 등록 화면으로의 유도 등에 사용됩니다. 

 

모달 윈도우와 팝업에서는 사용 목적에 차이가 있습니다. 모달 윈도는 화면상의 조작을 컨트롤하는 것이 목적인 것에 비해, 팝업은 눈에 띄게 하는 것이 목적입니다.

 

모달 창은 특정 작업을 수행하지 않으면 다른 화면이 열리지 않습니다. 한 팝업은 화면에 표시되어 있는 상태에서도 다른 조작이 가능한 점에서 다릅니다.

 

대화와의 차이

대화상자는 대화상자의 약자이고 "dialog"는 대화를 의미합니다. 방문자가 메시지를 확인하거나 입력하게 하기 위해 조작 도중에 일시적으로 열리는 작은 화면을 대화라고 합니다. 

 

일반적으로 "송신하시겠습니까?"나 Yes or No, OK or 캔슬 등 의사 확인에 이용됩니다.

모달 윈도우는 제어, 다이얼로그는 교환이 주된 목적이 되고 있는 점이 다릅니다. 다이얼로그는, 모달 윈도와 같이, 화면을 조작하지 않으면 다른 조작을 행할 수 없는 경우가 많이 있습니다.

모달 창의 목적은?

모달 윈도우는 장소나 타이밍에 따라 사용하는 것이 중요합니다. 그렇다면 실제로 모달 창은 어떤 용도로 사용됩니까? 여기에서는 모달 창이 사용되는 주요 네 가지 목적을 설명합니다.

 

1. 전하고 싶은 정보를 확실히 전달

모달 창은 특정 작업을 수행하지 않으면 다른 창을 열 수 없으므로 항상 사용자의 눈에 멈 춥니다. 따라서 사용자에게 전달하려는 정보를 확실하게 전달할 수 있습니다.

 

예를 들어, 이용약관의 변경이나 시스템 유지보수 등의 중요한 정보는 공지사항으로 사이트의 톱 페이지에 기재됩니다. 단, 아무리 눈에 띄게 게재해도 간과될 수 있습니다.

 

거기서, 모달 윈도우를 활용하는 것으로, 방문자에게 확실히 전해지는 것입니다. 또 쿠폰이나 세일, 신상품, 추천 아이템등의 정보를 알릴 때에도 효과적입니다. 제대로 표시하면 계약률 등의 향상도 기대할 수 있습니다.

 

2. 경고 메시지 표시

모달 창은 사용자에게 경고 메시지를 전달하는 데 적합합니다.

 

예를 들어 계정 정보나 파일 삭제 등은 한 번 처리하면 되돌릴 수 없으므로 최종 확인 목적으로 "입력된 정보는 사라지지만 정말로 조작을 하시겠습니까?" 등의 메시지를 표시시킬 수 있습니다.

 

모달 창은 조작을 실수하지 않도록 방지할 수 있으므로 사용자의 입력 보조 및 이탈 방지에 도움이 됩니다. 사용자가 이익을 잃을 수 있다면 모달 창을 사용하는 것이 좋습니다.

 

다만 그중에는 별로 확인하지 않고 조작을 행하는 유저도 있습니다. 경고의 메시지를 확실히 확인받기 위해서도 디자인의 강조나 다용을 피하는 것 등 주목받을 수 있는 궁리를 합시다.

 

3. 오류 알림

모달 창에서는 웹사이트에서 할 수 없는 조작을 했을 때나, 잘못된 입력 방법을 실시했을 때 등에 에러를 통지할 수 있습니다.

 

예를 들어, 여러 기기에서 로그인한 상태에서 한 기기에서 파일을 삭제한 경우 다른 기기에서도 삭제하려고 하면 "파일이 없습니다"라는 오류 메시지가 표시됩니다.

또한, 모르는 곳에서 오류가 발생하고 깨닫지 않고 서비스를 계속 사용하면 사용자에게 불이익을 줄 수 있습니다. 모달 윈도우로 알리면 유저도 눈치채므로 친절합니다.

사용자에게 에러 상태를 깨닫기 위해서도 OK 등을 클릭하지 않으면 다른 조작을 행할 수 없는 모달 윈도우를 사용하는 경우가 많습니다.

 

4. 로드 중 조작 방지

로드 중임을 알지 못하고 다른 작업을 수행하는 것을 방지하기 위해서도 모달 창은 유효합니다. 어떤 경우에는 처리가 무거워지고 로드하는 데 시간이 걸릴 수 있습니다.

 

모달 창은 로드 중임을 알리고 PC가 굳어졌다고 생각하여 클릭하는 것을 방지할 수 있습니다. 로드 중인 모달 윈도우에는 로드가 끝날 때까지 조작 불능으로 하는 것과 도중에 취소할 수 있는 것이 있습니다.

 

어느 쪽이든 모달 창을 표시하면 안전하게 처리가 진행됩니다.

모달 윈도우의 단점은?

모달 윈도우는 사용법을 조금이라도 잘못하면 사용자에게 방해가 될 수 있습니다. 사용자가 사용하기 쉬운 사이트를 만들기 위해서도, 모달 윈도우의 마이너스 점을 이해해 둡시다.

 

많이 사용하면 사용자의 스트레스

모달 창을 자주 표시하면 메인 화면이 보이지 않아 사용자의 스트레스로 이어집니다. 또한 모달 창을 표시할 때마다 사용자는 손을 멈춰야 합니다. 

 

또한 모달 창을 닫고 원래 페이지로 돌아가도 읽었던 위치를 알 수 없게 됩니다. 따라서 사용자의 작업 속도 저하로 이어집니다. 

 

모달 창은 광고에도 사용되지만 광고가 너무 많으면 구매를 피하는 사용자도 있습니다. "정말로 표시해야 하는가?"와 "사용자의 방해를 하지 않는가"를 생각하여 사용해야 하는지 판단합시다.

사용자가 떠날 수 있습니다

모달 창이 나타나면 닫기 버튼을 누르고 화면에 있는 옵션을 선택하고 문자를 입력하는 등의 작업이 필요합니다. 따라서 모달 창을 끄는 방법을 모르는 사용자는 그대로 페이지를 떠날 수 있습니다.

 

정말로 필요한 정보라면 효과적이지만 그렇지 않은 경우는 사용하지 않는 것이 좋을 것입니다. 웹사이트의 인상이 나빠질 뿐만 아니라 이탈률도 올라 버립니다.

 

모달 윈도우의 도입을 검토한다면 정말로 모달 윈도우 가 적절한지 유저에게 불쾌감을 주지 않는지 등을 확실히 검토합시다.

모달 창 프로그래밍을 통한 구현 

모달 창은 CMS 기능과 프로그래밍으로 구현됩니다. 여기에서는 프로그래밍에서의 구현 방법의 예를 소개합니다. 웹 사이트에 모달 창을 배포하는 경우 프로그래밍 방식으로 구현할 수 있습니다. 

 

모달 윈도우를 구현할 때는 HTML, jQuery, JavaScript, CSS 등과 같은 프로그래밍 언어가 필요합니다. 처음부터 모달 창을 만들려고 하면 시간이 걸립니다. 그러나 인터넷에서 샘플 코드를 많이 찾을 수 있습니다. 

 

따라서 학습하면 자사에 맞는 모달 윈도우를 작성할 수 있습니다. 자사에 프로그래밍 지식을 가진 직원이 없다면 제작 회사에 외주 하는 것이 좋습니다. 

 

제작사에 의뢰하면 전문가의 관점에서 의견을 들을 수 있으며, 자사의 웹사이트에 맞는 모달 윈도우를 작성해 줍니다.

 

IT 용어 설명) 팝업창이란? 팝업 차단, 팝업 허용하기

IT 용어 설명) 팝업창이란? 팝업 차단, 팝업 허용하기