dialog 태그

 개발을 하다보면, 기획 및 디자인에, 레이어 팝업을 사용하는 디자인이 꽤나 많다. 자 생각해보자. 그러면 우리 개발자들은 레이어 팝업을 만들기 위해서 개발을 엄청 해왔다. 하지만 말이다. 뭐 특정 라이브러리를 사용하지 않는 이상, 꽤나 귀찮은 일이다.

 팝업을 만드는 경우에, 크롬, 엣지, 사파리 등등을 다 지원해야 하기때문에, css를 까닥 잘못했다가는 제대로 만들어지지 않는 경우가 있다.

 그것 뿐인가? 포커스를 생각해보자. 일반사용자가 tab을 이용하여, 하단에 노출되어있는 엘리먼트에 접근을 하는 것을 막기 위하여, click및 focus를 막기 위한, inert속성을 적용 해야하며, 해당 팝업이 닫혔을 때, 포커스를 되돌려 주어야 한다. 스크롤 조작때문이라도, 이렇게 진행 하는 것이 맞다.

 아주 귀찮은 일이며, 매 프로젝트 마다 해야한다. 이러한 귀찮음을 한번에 해결해 줄 dialog라는 태그가 있다! 당연하게도 ie는 안되니, polyfill을 찾아야 한다.

 dialog

 자 간단하게, 사용법 먼저 확인하자.

 간단하게, HTMLDialogElement showModal, show, close 함수를 제공한다. 위에서 확인하면 알듯이, showModal은 전체화면을 덮으며, 최상위에 노출이 되고, show는 노출은 되나, 최상위는 아니다. showModal이후에 show를 호출하는 행위는 해서는 안된다.

 close는 당연하게도 팝업을 닫는 행위를 진행한다.

 close이벤트 와 cancel이벤트를 제공을 하며, cancel의 경우 esc를 눌렀을 때의 이벤트며, 해당 창을 닫으며, close 발생 시키기에, 해당 기능이 필요 없다면, preventDefault를 사용하면 된다.

 form method="dialog"

 우리가 팝업을 왜 쓰나? 알림용도로만 사용 하는가? 그렇지 않다. 사용자의 입력을 받을때에도 사용 한다.

 그거 아는가? form에 method에 get, post만 알고 있을 것이다. 이제 dialog도 생겼다. 그런데... 실제로 사용하기에는 뭔가 처리가 필요해 보인다.

 코드를 보면서 생각보다 복잡해 보인다. 생각 할 것 이다. 맞다. 복잡하다.

 일단 문제가 많다.

 1. close이벤트 시 event에 returnValue를 확인하면 안된다. dialog에 returnValue를 확인하여야 한다.

 2. returnValue에 undefined는 없다. 기존에 값이 설정 되었다면, esc등으로 dialog를 껏을때, returnValue는 기존 값으로 유지 된다. 따라서 dialog.close('') 이것이 기본 값이 되어야 한다.

 3. 예/아니오 등 여러개의 선택이 중에 하나만 선택하는 거면 문제가 없지만... form을 사용하는 것 자체가, 여러 필드를 받기위해서 아닌가? 따라서 dialog내의 form 엘리먼트를 new Form을 이용하여 파싱 하여야 한다.

 dialog를 알아보았다. 솔직히 form과 연계하여서 사용하는 것은 무리가 있어 보인다. 하지만, dialog를 레이어 팝업을 작성 하지 않아도 되는 것 자체가 좋아 보이지 않는가?

 참고로 웹접근성 처리할 때는 필수적으로 사용 하는 것이 좋다. 해당 방식으로 하지 않으면, tab만 사용하는 시각장애인 입장에서는 하단 레이어에 focus가 되어 문제가 생긴다. 뭐 물론 inert등으로 처리하면 문제가 없지만 말이다.