프론트엔드 작업을 하다보면 'modal로 만들어 주세요~'와 'popup으로 만들어 주세요~'라는 요청이 들어온다
이때 modal과 popup 무슨 차이가 있지? 하는 생각에 찾아봤던 글들을 정리해 봄!
모달(MODAL) 이란
사용자의 이목을 끌기 위해 사용하는 화면 전환 기법이지만 화면을 전환한다기 보다는 이목을 집중해야 하는 화면을 다른 화면 위로 띄워 표현하는 방식이다
모달은 내비게이션 인터페이스와는 달리 정보의 흐름을 가지고 화면을 이동한다기 보다는 꼭 이목을 끌어야하는 화면에서 사용된다 그래서 모달로 보이는 화면은 되도록 단순하고 사용자가 빠르게 처리할 수 있는 내용을 표현하는 것이 좋다
팝업(POPUP)이란
과거 ‘팝업(Popup)’은 작은 새로운 윈도우를 띄우는 기능을 말했다
사이트 접속 직후 1-2개, 많으면 3-4개까지의 팝업을 사용함으로써 사용자에게 많은 불편을 주기도 했지만
최근에는 팝업 차단이나 브라우저들의 다중탭 기능 덕분에 팝업은 많이 사용하지 않는 기능이 되었다
공통점
특정 역영의 위치에 원하는 사이즈의 별도 레이어를 만들어 방문자에게 원하는 시점에 보여준다
차이점
팝업의 경우 웹 시작과 동시에 띄우는 경우가 많지만 모달의 경우 중간 중간 사용자에게 보여주는 경우가 많다
현재 의도하는 목적과 상관없는 경우에는 주로 팝업을 사용하고 관련있거나 다음 진행을 위해 필요한 내용에는 모달을 사용한다
팝업은 사용자가 원할 경우 브라우저의 옵션을 통해 열지 않도록 강제할 수 있는 기능이 있기 때문에 반드시 노출해야하는 부분은 모달을 사용하는 것이 좋을 것이다. 모달은 현재의 페이지 안에 존재하는 하나의 레이어 형태를 띄기 때문에 다른 요소들과 잘 어울려진 디자인이 가능하지만 팝업은 별도 브라우저 창을 이용하며 현재 브라우저창과 상관없이 컨트롤이 가능하다
🔽 이글들을 참고하여 작성했어요~ 🔽
'개발이야기 > Etc.' 카테고리의 다른 글
| Apollo 튜토리얼 - 데이터 소스에 연결하기 (0) | 2021.02.08 |
|---|---|
| Apollo 튜토리얼 - 스키마 만들기 (0) | 2021.02.04 |
| 어도비 너무 비싸? Adobe 모든 플랜 저렴하게 싸게 구매하는 법! (1) | 2021.02.01 |
| 반응형에서 이미지 비율 유지하기 (0) | 2021.01.16 |
| 크롬 확장프로그램 headingsMap으로 페이지의 헤딩 구조를 확인해보자! (0) | 2021.01.12 |
