이전에 netflix clone사이트를 만들면서 Modal이란 말이 나왔다.
대략적으론 별도의 창을 띄우는 기능을 말하는 것 같긴 했는데, 뭔지 의미가 궁금했다.
고럼 알아봐야지.
Modal은 무엇인가
위 사진이 보여주는 것이 Modal창 이다. 다양한 영화목록을 포스터 리스트로 보여주고, 특정 포스트를 클릭하면 해당 영화의 상세 설명을 보여주는 창을 띄워준다.
이렇게 창을 띄워주는 것은 흔히 들어본 Pop-up창 도 존재하는데 그렇담 이 둘의 차이는 무엇일까?
pop-up창과의 차이는?
먼저 pop-up창(팝업)은 아예 별도의 창을 띄워준다. "응? 뭔 말이야?" 싶을 수도 있지만 정말 말 그대로다.
팝업창은 현재의 창(brower)와 다른 새로운 하나의 창(brower)를 열어서 화면을 보여주게 된다.
그렇다면 Modal은 어떨까?
팝업과 달리 현재의 화면에서 그대로 새로운 화면을 띄워준다.
React로 설명을 하자면 새로운 창(brower)를 띄우지 않고 component를 띄우는 것이다.
이 외에 더 명확한 구분과 설명이 있을 지도 모르겠지만 일단 Modal이 무엇인지에 관해서는 이 정도만 이해하고 있어도 될 것 같다.
추가로 Modal에 관해서 찾던 중 UI용어에 대해 잘 설명해둔 글이 있어서 참고용으로 남겨놓으려 한다.
오래된 글이긴 하지만 4탄까지 있으니 참고하기에 좋을 것 같다.
잘못된 부분에 대한 지적은 얼마든지 환영입니다.
감사합니다.
2년차 응애 FE 개발자입니다👶