[2024.04.20] 외부영역 클릭시 모달창 닫기(검은색 배경 수난기)

모달창 뒤에 검은 배경이 깔리는 이유

  웹사이트들의 모달창을 보면 '1. 반드시 '닫기' 버튼을 눌러야만 닫히는 모달창'과 '2. 모달창이 띄워지면 뒷 배경이 어두워지고, 모달창 이외의 영역을 누르면 모달창이 닫히는' 두 가지의 경우가 일반적입니다. 2번째 경우 모달창을 열 때 뒷 배경을 어둡게 해야 모달창에 집중할 수 있게 하는 효과가 있는데요. 모달창 외부영역을 클릭해서 닫는 거의 대부분의 경우는 이 검은색 화면이 동반되는 모습을 볼 수 있었습니다.

인프런의 경우 뒷배경이 어두워지면서 blur 처리가 되는 모습

 

때문에 모달창 이외의 영역을 클릭해 모달창을 닫을 때는 모달창 이외의 영역을 표시하는  wrapper나 container의 변수를 항상 관성적으로 써왔습니다. 

이런 느낌으로

 

 

관성적으로 코딩하다

  이번 프로젝트 막바지에 Firebase Realtime Database를 이용해 채팅 기능을 추가하였는데,  페이지 내 어느 곳에서든 가볍게 채팅을 열고 닫을 수 있는 기능을 목표로 잡았습니다. 그런데 모달  뒤에 container를 추가하게 되니 당연하게도 기존의 contents들이 클릭되지 않는 현상을 겪었습니다.

 

 

 

1. 이렇게 반응해야 하는 카드가

 

 

2. contianer를 추가하니 반응도 안한다.

 

  문제는 container가 기존 컨텐츠들보다 z-index 우선도가 높아 발생하였고, 이전부터 계속 사용해 오던 container에 집착한 나머지 계속 애꿎은 z-index값만 변경해 가며 해결방법을 강구하게 되었습니다. 그렇게 몇 번의 삽질을 더 하면 할 수록 이상해지는 결과물을 보며 '이 방법은 안 되겠구나' 결론짓고 다른 방향성을 생각해 봤습니다.

 

해결 방법은 의외로 간단?

  다른 방법은 무엇이 있을까 고민하던 와중, 굳이 container로 영역을 따로 지정할 것이 아니라, 모달창 이외의 영역만 구분해 주면 된다는 간단하고 명료한 해결책이 떠올랐습니다. 모달창이 열려 있을 때 모달창 이외의 영역 어느 곳이든 클릭하여 mouseup 이벤트가 발생한다면 기존에 모달을 여닫을 때 사용하던 toggleModal()을 호출하여 모달창이 닫히게 하는 것이었습니다.

모달창 이외의 영역 클릭시 모달창 닫힘

 

채팅창 모달 여닫기를 위해 사용했던 JS 전체 코드

프로젝트 기간에는 그렇게 속을 썩이던 부분이, 프로젝트가 끝나고 가볍게 기능 추가하기 위해 조금만 고민하니 쉽게 해답이 나왔던 다소 황당한 하루였습니다. 꼭 하던 대로, 관성적으로 한 가지의 방향성만을 바라볼 게 아니라 이 방향이 아닌 것 같으면 다른 방법도 생각해 보는 유연한 문제 해결방식을 기르는 게 중요하겠구나 생각하게 된 이슈였습니다.