위키원
모달창
모달창(Modal Window)은 사용자의 이목을 집중시키기 위해 웹사이트에 작은 창을 띄우는 그래픽 인터페이스 기능이다.
 .jpg) |
개요
모달창은 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다. 영어에서 모달(Modal)은 명사인 모드(Mode)의 형용사인데, 이 기능을 사용하면 메인 화면이 뒷쪽에 보이기만 하고 사용할 수는 없는 모드를 만들기 때문이다. 모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라진다. 기존의 페이지와 부모-자식 관계를 갖는다. 브라우저의 새 창 제어 옵션에는 전혀 영향을 받지 않는다. 다시 말해, 하나의 페이지에서 하나의 작은 다른 페이지를 띄워 이 페이지에 대한 조작이 종료되기 전까지 부모 페이지로 돌아가지 못하도록 만든 창이다. 그래서 모달창을 이용하면 사용자의 상호작용을 요구로 하고, 사용자가 상호작용을 할 때까지 부모 페이지에 대한 어떠한 조작도 못하도록 되어 있다. 그래서 사용자로부터 특정 동작/메시지에 대한 주목이 필요할 때 모달을 사용한다.[1][2]
활용
모달창은 한 페이지 안의 많은 정보를 체계적으로 보여주고 싶을 때 사용하면 좋다. 전체 정보를 나열하지 않고, 각 항목을 클릭했을 때 모달창을 띄워 추가 정보를 보여주면 조금 더 짜임새 있는 페이지를 구성할 수 있기 때문이다. 페이지 전환 없이 그대로 모달창이 뜨고, 창을 닫으면 빠르게 기존 페이지로 돌아올 수 있다. 페이지를 이동하는 대신 모달창을 띄우는 이유는 페이지 전체가 바뀌는 것보다 모달창만 뜨는 것이 더 빠르고 편리하게 느껴지기 때문이다. 또, 페이지 안의 내용이 각각 별개가 아니라 연결된 정보라는 사실을 직관적으로 이해할 수 있다.[3]
권장사항
- 오류 메시지나 대기중, 또는 작업 성공을 알리기 위한 용도로 사용하지 않는다
웹디자이너들은 가끔 오류나 로딩 메시지, 또는 작업 성공을 알리기 위해서 모달창을 사용하기도 한다. 그러나 모달창은 이러한 용도에는 그다지 효과적이지 않다. 왜냐하면 모달창은 메인 화면의 동작을 아예 차단하기 때문이다.
- 에러: 오류 발생을 알려주는 방법은 그 맥락 안에서 함께 보여주거나, 아니면 별도의 창으로 보여주는 방식이 있다. 첫 번째 방식은 사용자들이 텍스트를 입력하는 양식에서 사용하면 좋은데, 왜냐하면 사람들이 그 메시지를 읽으면 무슨 상황인지를 금세 파악할 수 있기 때문이다. 반면에 두 번째 방식은 인터넷 연결이 끊어진 것과 같은 좀 더 일반적인 에러를 보여주는 데 사용하면 좋다.
- 로딩: 로딩 시간이 오래 걸리는 경우에는 '로딩중'이라는 메시지를 로딩 윈도우에서 보여주는 것이 일반적이다. 이런 경우에 모달창을 사용하면 좋은 이유는, 사용자들이 메인 화면에서 다른 작업을 하지 못하게 만들 수 있기 때문이다. 그러나 더 좋은 방법이 없는 것은 아니다. 예를 들어서, 로딩 작업을 알리는 버튼 안에 진행 상태를 추가해서 보여주면 더욱 근사해 보일 수 있다. 이렇게 하면 사용자들에게 기다려야 한다는 사실을 알려주는 동시에, 버튼을 다시 한 번 더 클릭하는 등의 행동을 막을 수 있다.
- 작업 성공: 이런 메시지는 같은 위치에서 보여주거나, 아예 별도의 페이지로 넘어가서 보여주는 것이 훨씬 더 좋다. 경고 메시지 용도로 모달창을 사용할 때는 사용자가 치명적일 수 있는 작업을 하려 하거나, 되돌리기 힘들거나 복구가 불가능한 선택을 하려고 할 때는 모달창을 사용할 수도 있다.
- 모달창은 주의해서 사용해야 한다
일반적으로 모달창에는 두 가지 유형이 있다. 하나는 사용자에 의해 유발되는 것이고, 다른 하나는 시스템에 의해서 유발되는 것이다. 사용자에 의해 유발되는 모달창은 사용자가 어떤 버튼을 누르는 동작 등을 할 때 실행된다. 그래서 사용자들은 그 윈도우가 왜 나타났는지 인지하고 있다. 시스템에 의해 유발되는 모달창은 사용자가 하고 있던 작업을 방해한다. 바로 이런 유형의 모달창이 큰 문제점 중 하나인데, 사용자들이 무엇을 하고 있었든 간에 모달창이 모든 것을 중단시킨다는 것이다. 그리고 사용자들은 그 윈도우가 왜 나타났는지를 잘 모를 수도 있다. 인터넷에서 디자이너들은 주로 프로모션의 목적을 위해서 시스템적인 모달창을 사용하는 경우가 많다. 이런 모달창은 사용자들을 방해하고, 특정한 행동을 하게끔 강제한다. 이처럼 원치 않았던 모달창은 사용자들에게 좋지 못한 인상을 남기는 경우가 많다. 그래서 사람들은 이런 메시지가 나타나면 그 즉시 닫기 버튼을 누르곤 한다. 가장 안전한 방식은 사용자의 행동과 직접적으로 관련된 경우나 정말로 긴급한 메시지를 보여줄 때만 사용하는 것이다.
- 사용자들에게 해야 할 일을 알려주는 용도로 활용한다
시스템적으로 실행된 모달창이 갑자기 나타난다면 사람들은 그 창이 나타난 이유를 궁금해할 것이다. 따라서 모달창에서 사용자들에게 그 창이 나타난 이유를 분명하게 알려줘야 한다. 즉, 사람들이 충분히 관심을 갖고 그 텍스트를 읽어야 하며, 그들에게 전달하고자 하는 메시지가 무엇이며 어떤 행동을 취할 수 있는지를 사람들이 이해할 수 있어야 한다. 이때는 모달창의 제목과 기본 확인 버튼의 텍스트를 동일하게 설정하는 것이 좋다. 그렇게 하면 사람들이 상황을 좀 더 쉽게 파악할 수 있기 때문이다. 그러한 버튼에서는 사용자가 그것을 클릭했을 때 어떤 결과가 나타날 지를 명확하게 알 수 있는 라벨을 사용하는 것이 좋다.
- 모달창 안에서의 콘텐츠와 기능적인 요소들에 우선순위를 두어야 한다
모달창 안에서 스크롤을 내려야 하는 상황은 피하는 것이 좋다. 스크롤은 위아래 방향으로 긴 페이지에 서는 괜찮지만, 모달창에서는 필수적인 정보와 필요한 버튼만 포함하고 있어야 한다. 이상적으로, 모달창 안의 텍스트는 1-2개의 문장으로 끝내는 게 좋다. 그리고 동일한 모달창 안에서 2가지 이상의 행동을 요구해서는 안 된다. '자세히 살펴보기'와 같은 추가적인 선택을 제시한다면, 사람들이 그곳에서 요구하는 작업을 완료하지 못할 가능성이 커진다. 왜냐하면 사용자들이 현재의 대화창에서 빠져나가야 하기 때문이다.
- 닫기 기능을 잘 보이게 만든다
사용자들은 자신이 원할 때 언제든 모달창을 빠져나갈 수 있어야 한다. 따라서 사용자들에게 모달창을 닫을 수 있는 기능을 제공해야 한다. 많이 쓰이는 몇 가지 방식은 다음과 같다.
- 윈도우의 오른쪽 위에 '닫기'나 'X' 버튼을 잘 보이게 추가한다.
- 모달창의 아래쪽에 '닫기'나 '취소하기' 버튼을 잘 보이게 추가한다.
- 모달창의 바깥쪽을 클릭하거나 터치하면 윈도우가 사라지게 만든다.
- 창의 크기를 적당하게 만든다
모달창의 사이즈가 너무 크면 안 된다. 그리고 화면 전체를 가려도 안 된다. 이상적으로 화면 전체의 25% 이상을 가리지 않는 것이 좋다. 만약 한 개의 윈도우 안에 콘텐츠를 넣을 수 없어 스크롤 바를 사용했다면, 모달창이 아니라 아예 별도의 페이지를 만드는 게 더 나을 수도 있다.
- 모달창에 시선이 집중되어야 한다
사용자들에게 모달창을 확실히 눈에 띄게 하는 대표적인 방법은 다음과 같다. 사용자들이 시선이 위치한 곳에서 모달창을 직접 보여준다. 모달창이 시야에 들어오지 않는다면, 사용자들은 그걸 찾기 위해서 스크롤을 내려야 할 수도 있다. 이런 경우의 문제라면 사용자들이 모달창이 있다는 사실을 알아차리지 못해서, 굳이 스크롤을 해야 하는 이유나 필요성을 느끼지 못할 수도 있다는 것이다. 웹페이지를 반응형으로 만들어야 하는 또 하나의 이유도 바로 여기에 있다. 그리고 모달창을 배경의 메인 페이지와 시각적으로 확실하게 구분되게 만들어야 한다. 배경의 메인 화면을 어둡게 만들면, 메인 페이지 위에 모달창이 나타났다는 사실을 사용자들이 좀 더 쉽게 인식할 수 있다.
- 데스크톱 사용자들이 키보드를 이용해서 모달창의 콘텐츠로 이동할 수 있게 한다
데스크톱 환경에서 모달창이 나타나면, 키보드의 포커스(focus)도 모달창으로 이동해야 한다. 사용자들은 키보드를 이용해서 모달창의 기능을 컨트롤 할 수 있어야 한다. 예를 들어, ESC 버튼을 누르면 모달창이 종료되도록 해야 한다. 만약에 데스크톱을 이용하는 사용자들은 어떤 창이 갑자기 나타나더라도, 자신들에게 익숙한 ESC 버튼을 눌러서 이전의 페이지로 돌아가고 싶어할 것이기 때문이다.
- 모달창을 중첩해서 사용하지 않는다
모달창에서 또 다른 모달창이 나타나는 식으로 디자인을 해서는 안 된다. 시각적으로 복잡해질 뿐이다.[4]
팝업창과 비교
모달창과 팝업창의 목적은 같다. 새 창을 띄운다는 것은 특정 내용을 사용자에게 강조하고 싶다는 뜻이다. 프로모션을 진행하거나 서비스에 대한 공지, 주의사항, 안내문 등을 전달해야 할 때 또는 강조해야 할 때 새 창을 이용한다. 그런데 요즘엔 팝업창을 잘 쓰지 않는다. 예전에는 한 페이지가 로드되면 팝업창이 4~5개씩 뜨기도 했다. 하지만 이는 사용자 입장에서 일일이 X를 누르며 지워야 하는 불편함이 있다. 불필요한 팝업창의 등장은 강조해야 하는 콘텐츠의 노출을 되려 떨어뜨리는 악효과를 낳는다. 또 브라우저 옵션에서 팝업창을 차단한 사용자는 팝업창을 볼 수 없다. 그럼에도 불구하고 여전히 많은 페이지에서는 팝업창을 띄운다. 사용자의 시선을 끌기에 팝업창이 유용하기 때문이다. 또한 팝업창의 경우 기존의 웹페이지와 분리된 상태에서 코딩을 하기 때문에 비교적 작업 과정이 수월하다. 또 일단 팝업창을 만들어 두면 언제든 재활용이 가능하며, 페이지별 이동이 자유롭다. 그래서 이런 팝업창의 이점을 모달창에 적용한 것이 iframe을 이용한 새 창 띄우기다.[2]
각주
- ↑ Bam, 〈모달 창 Modal〉, 《벨로그》, 2023-03-06
- ↑ 2.0 2.1 보망고, 〈모달창 VS 팝업창, 차이가 뭔데?〉, 《티스토리》, 2020-07-21
- ↑ 〈🤷🏻♀️ 모달이 모다? 헷갈리는 팝업, 모달 200% 활용법〉, 《아임웹》, 2023-07-25
- ↑ manager_sohee, 〈모달윈도우(팝업)를 디자인할 때 생각할 9가지 원칙〉, 《요즘IT》, 2021-05-20
참고자료
- manager_sohee, 〈모달윈도우(팝업)를 디자인할 때 생각할 9가지 원칙〉, 《요즘IT》, 2021-05-20
- 보망고, 〈모달창 VS 팝업창, 차이가 뭔데?〉, 《티스토리》, 2020-07-21
- Bam, 〈모달 창 Modal〉, 《벨로그》, 2023-03-06
- 〈🤷🏻♀️ 모달이 모다? 헷갈리는 팝업, 모달 200% 활용법〉, 《아임웹》, 2023-07-25
같이 보기
