[Semantic UI] 모바일 디바이스에서 modal 팝업 스크롤링 안되는 현상.

 

 

안녕하세요! 레미입니다.

 

최근 프로젝트에서 프레임워크를 사용하였습니다.

선택한 이유는 반응형 대응이 잘 되어 있고, 공통으로 사용하는 기능에 대해 처리가 잘되어 있으며,

기본 컴포넌트 구성도 짜임새 있게 되어 있기에 쉽고 예쁘게 화면을 구성 할 수 있기 때문입니다.

크게 유명한 몇 가지의 프레임 워크를 비교하였고, 관련 커뮤니티가 있으면서,

디자인도 깔끔한 semantic UI를 최종적으로 선택하게되었어요.

 

 

이번에 마주친 문제는 모바일 디바이스에서 일정 높이 이하로 줄어들 시,

close을 클릭해서 창을 닫으면 본 창 스크롤이 먹통이 된다는 점이었습니다.

시맨틱 UI 모달을 닫는 방법은 3가지가 있습니다.

 

1. dimmed 처리된 검정 레이어 클릭(default로 설정되어 있습니다.)

2. 확인/닫기 등 팝업 액션 버튼 클릭(3번 예시 참고.)

3. 직접 지정한 close 버튼  클릭

(EX.

   $('.special.modal') .modal({

      selector : { 

         close : '.close, .actions .button', 

      },

  });

)

 

이렇게 지정을 할 수 있습니다. 

모달의 높이가 짧아질 때 해당 현상이 발생했는데요, 이번 문제는 안드로이드, IOS 에서 동일하게 나타났습니다.

재밌는건, dimmer를 눌러서 모달을 닫으면 잘된다는 점이에요. 허허~ 

close 버튼을 클릭해서 닫을 시에만 문제 현상이 나타났습니다.

그리고 웹에서 모바일 모드로 볼 때는 dimmer, close 버튼 둘 다 문제 없이 잘 되었어요.

폰과 컴퓨터를 번갈아가며 파악한 결과,

모달 오픈 시 dimmer가 깔리며 body 태그에 overflow:hidden 처리가 되는데요.

close 버튼으로 클릭해서 닫을 때 overflow 속성이 제대로 제거되지 않았다는 추측이 들었습니다.

(이 부분은 안드로이드 크롬 모바일 디버깅으로 확인해 볼 예정입니다.)

 

구글링 한 결과, modal.js를 최신 버전으로 업데이트 하면 해결되는 문제였습니다.

대신, semantic UI가 아닌, fomantic UI에서 받은 파일로 적용해야 합니다.

그 이유는, 현재 semantic UI는 마지막 업데이트가 2년 전입니다. (ㅠ^ㅠ)

활발한 개발 환경 조성을 위해 만들어진게 fomantic UI(community fork of semantic UI)입니다.  

지금도 활발하게 에러 대응과 피드백이 이루어지고 있습니다.

조만간, FUI로 변경하는 작업을 진행해야겠습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

하지만, 이번 프로젝트에선 꽤나 고생을 많이 했습니다. 

프로젝트 진행하는 기업 공식 사이트 디자인 개편으로 그 디자인을 따라가야 했어요.

그래서, 시맨틱 UI에 대한 고려 없이 타 회사 디자인을 그대로 적용하려고 하니 화면 마다 손이 매우 많이 들어갔습니다.

특히, form 요소가 쓰인 회원가입