해당 아티클의 번역본입니다. 오역이 있을 수 있습니다 😅
출처 : https://illustrate.digital/insights/what-are-modals-popups-and-lightboxes/
사용자는 웹사이트를 이용할 때 가능한 한 부드럽고 단순한 UX(사용자경험)을 원할 것입니다. 종종 단순한 새로고침이 자연스러운 플로우를 망칠 수도 있고 항상 보이지 않아도 되는 정보가 나타날 수도 있죠. 그러나 이 정보는 여전히 화면과 관련이 있습니다.
여기서 팝업, 알림, 모달 그리고 라이트박스가 나타납니다.
먼저 이 단어들은 "팝업"이라는 상황에 뿌리가 있지만, 일반적인 웹 환경에서는 종종 혼용되고 있습니다. 이 점을 염두에 두시고, 시작해봅시다!
팝업(Popups)
웹사이트 안에는 다양한 종류의 팝업이 존재합니다. 이것은 사용자경험을 높이죠. 팝업은 웹사이트를 통해 스크린에 나타나는 모든 것을 포함하는 용어입니다.
이것이 다양한 용어의 경계가 모호해지는 부분입니다. 많은 사람이 팝업, 모달, 알람 용어들을 섞어서 사용합니다. 팝업은 일반적으로 다음과 같은 오버레이 되는 콘텐츠 종류를 이르는 용어입니다.
알람(Alerts)
알람은 오랜 시간 동안 웹사이트와 관련되어왔습니다. 작은 알람창은 대부분 당신이 이 알람을 무시할 때까지 페이지 안에서 다른 작업을 하지 못하도록 합니다. 알람은 마우스로 직접 종료 할 수도 있고 ESC나 enter 키를 사용하여 종료될 수 있습니다.
알람은 사용자가 제출 후 정보를 잃을 수 있는 정보를 전송하기 전에 경고하는 용도로 자주 사용됩니다.
모달(Modals)
웹 디자인에서 모달은 오버레이로 띄워져 화면의 인터렉션을 막는 기능을 합니다. 알람과 같죠. 모달은 직접적인 종료 인터렉션이 필요합니다. 이것이 모달과 알람의 차이점입니다. 모달은 대부분 박스를 종료할 수 있는 닫기 버튼과 함께 나타납니다.
다이얼로그(Dialog)
다이얼로그는 페이지 콘텐츠 위에 나타나는 박스입니다. 다이얼로그는 정보를 보여주거나 응답이 필요할 때 사용됩니다. 예를 들어 연락처나 정보를 확인하는 창에서 사용되죠.
다이얼로그는 모달을 포함할 수 있습니다. 모달은 화면의 인터렉션을 방지합니다. 반면에 다이얼로그는 다이얼로그와 모달의 인터렉션 후 종료됩니다.
라이트박스(Light boxes)
라이트박스는 사실 자바스크립트 라이브러리입니다. 웹사이트에 나타나는 어두운 배경을 포함하는 다이얼로그 콘텐츠를 뜻하죠. 이것은 이미지 갤러리나 페이지에서 일시적으로 포커스를 요구하는 콘텐츠에서 자주 사용됩니다.
일반적으로 라이트박스는 닫기 버튼이나 어두운 배경 부분을 클릭하여 종료합니다.
툴팁과 팝오버 (Tooltips & Popovers)
툴팁은 아이템을 클릭하거나 호버했을 때 추가적인 사항을 보여주는 작은 정보창입니다. 이것은 작고 화면을 방해하지 않으며 마우스커서를 움직이는 즉시 사라집니다.
툴팁의 일반적인 예를 들자면, 당신이 링크에 호버를 할 때 작은 텍스트 조각이 정보와 함께 나타나는 것이죠.
툴팁이 변형된 것이 팝오버 입니다. 이것은 특정 종류의 툴팁이고 최근 웹사이트에서 많이 소개되고 있습니다. 툴팁과 팝오버의 가장 큰 차이점은 팝오버는 웹페이지처럼 보이도록 스타일링이 가능하며, 사이트의 특정 엘리먼트와 상호작용할 수 있다는 것입니다. 팝오버가 가장 많이 사용되는 예시는 폼태그 입니다. 항목을 클릭했을 때 필수 항목 여부 등 각 항목에 대한 정보를 제공합니다. 이것은 모든 사람에게 제공될 필요가 없는 요소에 아주 유용합니다.
웹사이트에서는 어떻게 사용되고 있을까요?
웹사이트에서는 다양한 방식으로 여러 가지 타입의 팝업이 사용되고 있습니다.
예를 들면
- 광고 게시
- 쿠키 알림 배너
- 로그인창
- 정보 제출 전 확인창
- 짧은 시간 방문하는 사이트의 마케팅 팝업
- 뉴스레터 가입
- 채팅창
이것들은 사이트에서 팝업이 사용되는 많은 예시 중의 일부일 뿐입니다.
이것들이 잘못 사용될 때
팝업의 종류들이 적재적소에 사용될 때 이것은 웹사이트의 사용자경험을 대폭 상승시키는 강력한 툴이 될 것입니다. 그러나 팝업을 남용하는 것은 컴퓨터가 바이러스에 걸린 듯 웹사이트가 안전하지 않은 것처럼 보일 수 있습니다.
모든 웹사이트에든 팝업의 남용은 피해야 합니다. 콘텐츠의 한가운데 나타나 당신의 집중력을 없애는 데다 종료하는 것조차 쉽지 않은 팝업만큼 짜증 나는 것은 없을 것입니다.
팝업을 사용할 때의 일반적인 실수는 닫기 버튼을 클릭하기 어렵거나 버튼을 클릭하는 것 외에는 팝업을 닫을 방법이 없는 것입니다. 이런 실수는 데스크탑을 기준으로 디자인된 팝업이 모바일 환경에서 테스트 되지 않았을 때 발생하며 버튼 사이즈가 너무 작아 인터렉션 할 수 없는 경우에 발생합니다.
