jQury로 레이어 팝업과 dim 구현하기

 

 jQury를 사용하여 간단한 레이어 팝업과 dim 페이지 만들기에 대해서 알아보겠습니다. 

 

---

1. 레이어 팝업이란?
2. dim
3. dim과 팝업을 하나로 만들기
4. dim을 별도 요소로 만들기
5. 레이어 팝업 닫기 버튼과 접근성

---

1. 레이어 팝업이란? 

 레이어 팝업은 window에서 제공되는 시스템 alert 창과는 달리 인위적으로 팝업 형태를 만들어 alert과 동일한 용도로 사용하는 것을 말합니다. 그냥 제공되어 위치를 옮기거나 꾸밀 수 없는 시스템 alert 과는 달리 제작자가 원하는 대로 디자인을 커스텀 할 수 있기 때문에 자주 사용됩니다.

 

 회사에 따라, 사람에 따라 레이어 팝업을 alert, 팝업, 모달 등으로 부르는 방법이 달라지기는 하지만 이번 포스팅에서 저는 '레이어 팝업'이라고 칭하도록 하겠습니다.

 

아래는 window와 자바스크립트에서 기본으로 제공되는 시스템 alert 창의 예시입니다. 

 

See the Pen Untitled by solip000 (@solip000) on CodePen.

2. dim

 딤(dim)은 레이어 팝업 뒤로 들어가는 반투명한 검은 배경입니다. 레이어 팝업에만 시선을 집중할 수 있도록 하고, 팝업이 켜져 있는 동안 페이지의 다른 부분의 클릭을 방지하여 팝업과 그 외 기능을 동시에 활성화할 수 없도록 합니다.

 

레이어 팝업뿐만 아니라 로딩 페이지나 사이드 메뉴를 열었을 때 등, 기본 레이어 창 위로 새로운 레이어를 띄울 때 자주 사용됩니다.

 

 

3. dim과 팝업을 하나로 만들기

 레이어 팝업과 팝업 뒤에 깔리는 dim 요소를 하나로 만든 예시입니다. dim 요소 안에 자식 요소로 레이어 팝업을 배치하였습니다. 이러한 방식은 동일 한 페이지에 여러 레이어 팝업을 만들 때 dim 요소를 팜업 개수만큼 만들어야 한다는 번거로움이 있습니다.

 

See the Pen Untitled by solip000 (@solip000) on CodePen.

4. dim을 별도 요소로 만들기

 레이어 팝업과 dim을 별도로 분리하여 함께 켜지고 꺼지도록 한 예시입니다. 이 방법을 사용할 경우 dim을 여러 개 만들 필요 없이 다양한 상황에서 사용할 수 있습니다. 팝업뿐만 아니라 로딩이나 사이드바, 상단의 gnb를 여는 등 다양한 상황에서 매번 dim 요소를 새롭게 만들지 않아도 됩니다.

 

그러나 이 경우 dim 을 사용하는 요소들끼리의 z-index 충돌이 일어나 오히려 복잡하게 꼬이게 될 수 있습니다. 흔치 않은 상황이지만 사이드 메뉴에서 팝업을 열게 하는 경우를 상상해 보시면 되겠습니다.

 

See the Pen 레이어 팝업 예시 2 by solip000 (@solip000) on CodePen.

5. 레이어 팝업 닫기 버튼과 접근성

 레이어 팝업에 대한 웹 접근성을 맞추기 위선 레이어 팝업 닫기 버튼 코드의 위치를 주의하여야 합니다.

 

레이어 팝업 닫기 버튼은 항상 팝업 내의 모든 콘텐츠를 읽어 내린 후에 접근되어야만 합니다. 이는 시각적인 요소를 이야기하는 것이 아니라 시각장애인을 위한 리더기를 사용하는 상황이나 마우스 없이 키보드만을 사용하는 사용자가 Tab 키를 통해 레이어 팝업에 접근할 경우를 상정하는 것입니다.

 

 때문에 위의 예시들을 보면 닫기 버튼은 시각적으로 위쪽에 있지만 실제 html 코드 상에서는 레이어 팝업의 가장 하단에 있는 것을 확인할 수 있습니다.

 

이처럼 레이어 팝업 닫기 버튼은 코드 상으로 레이어 팝업 컨텐츠의 가장 아래에 있어야 하며, 레이어 팝업의 모든 내용을 읽고 난 후 팝업을 빠져 나올 때 사용되어야 합니다.