나무모에 미러 (일반/어두운 화면)
최근 수정 시각 : 2024-10-08 16:44:12

모달 창

<nopad>파일:나무위키 설정 창.png
나무위키의 설정 창

modal window

1. 개요2. 모양3. 용도

[clearfix]

1. 개요

그래픽 사용자 인터페이스의 요소 중 하나. 주 창에 종속된 그래픽 인터페이스를 의미한다. 웹으로 말하자면 브라우저 프로그램 자체에서 새 창을 띄우는 팝업 창과 달리 같은 창 내부에서 상위 레이어를 띄우는 방식을 사용하는 창을 의미한다. 웹에서 팝업 창이 거의 사라진 요즘은 보통 이와 같은 방식을 사용한다.

모달 창 특성상 모달 창이 띄워질 경우 이 창을 종료시키지 않는 이상 원래 창에서 진행 중이던 작업에는 손을 댈 수 없다. 따라서 사용자의 이목을 집중시키기 때문에 신중히 사용될 필요가 있다. 팝업 창을 대신하는 모달 창이 무분별하게 사용될 경우 창의 내용을 보지도 않고 '닫기'나 'OK' 버튼을 누르는 습관을 만들 수도 있다.

2. 모양

모달 창은 원래 화면과 분리되는 요소이기 때문에 시각적으로 분리될 필요가 있다. 일반적으로는 모달 창 바깥 부분을 조금 어둡게 보이도록 반투명한 검은색 박스를 덮는 방법을 많이 사용하며 반투명한 흰색 박스를 사용하기도 한다. 배경을 흐리게하는 블러 효과를 주기도 한다. 또 박스에 그림자를 주어 배경과의 분리를 확실히 하기도 한다.

보통 모달 창을 닫을 수 있는 닫기 버튼을 포함하며, 좀 더 유연한 상호 작용을 위해 모달 창 바깥 부분을 클릭해도 닫히도록 설계하는 경우가 많다.

3. 용도

모달이라는 이름에서 알수 있듯 대화 상자로 사용되는 경우가 많다.

팝업 창과 마찬가지로 첫 화면에 공지할 내용을 띄우는 용도로 사용되기도 한다. 이 경우 높은 확률로 원래 팝업 창에서 자주 볼 수 있었던 '7일 동안 보지 않기' 등의 버튼을 포함하고 있다.

블로그 같은 곳에서 이미지를 클릭 했을 때 이미지를 확대해서 보여주는 용도로 사용되기도 한다. 이 경우 원래 이미지가 서서히 모달 창으로 바뀌는 애니메이션을 적용하기도 한다.