모달(Modal)의 종류
UI 디자이너가 알면 좋은 개발 지식
지난 포스트에서 모달(Modal)과 팝업(Popup)의 차이점에 대해 알아보았다. 이번 포스트는 예고했던 대로 모달의 종류에 대해 좀 더 자세히 알아보기로 한다.
지난 글을 읽으려면 아래 링크를 클릭
https://brunch.co.kr/@minakoro/156
이전 회사에서 주로 작업한 화면은 대시보드 UI였다. 소위 말하는 예뻐 보이는 것보다 정보가 시각적으로 잘 전달되는 것이 가장 큰 목적이었고 그 목적 안에서 딱딱 정리된 디자인을 해야 하는 참 어려운 작업들이었다. 그것과 비슷하게 어려운 것이 있다면 바로 개발자들의 언어를 알아듣는 것인데, 내가 볼 때는 같은 모양의 창도 개발자들은 구분을 해서 말하는 것에 적응하는 일이 쉽지 않았다.
나미 씨, 이건 팝업(popup)이 아니라 모달(modal)로 처리해야 돼요. 그리고 얘는 얼럿(Alert) 창이고, 이건 컨펌(Confirm) 창입니다.
같은 한국 사람이지만 한국어가 이해되지 않는 순간. 내 기준에서 그들이 하는 말은 외계어와 다름이 없었다.(영어가 기반이니까 그럴 수밖에 없다.) 그래서 가장 보편적으로 썼던 방법은 이미지로 대화하는 것이었다. 개발자들이 필요한 화면을 스크린숏 혹은 이미지를 내게 보여주며 만들어달라고 하는 식으로 업무를 진행했다. 물론 정확한 결과물을 위해서는 업무 요청에 레퍼런스는 반드시 필요한 부분이고, 말과 글로 소통하는 것보다 훨씬 명료하다. 이대로도 충분히 업무를 하는데 지장이 없었지만, 나는 그들이 말하는 것들을 확실히 알고 싶었다. (성격 강점에 '배움'이 괜히 있는 게 아닌 듯-)
모달(Modal)도 종류가 있다.
내 눈엔 다 똑같아 보이는 모달 창을 구분하는 룰이 있었다. 정확히 말하면 대화상자의 역할들인데, 가장 많이 사용되는 것이 얼럿(Alert)과 컨펌(Confirm)이었고, 사용자에게 입력 값을 요청하여 받아오는 프롬프트(Prompt)까지 3가지로 구분한다.
얼럿(Alert)
'알리다'라는 뜻을 가진 Alert은 단순히 메시지를 전달하는 역할을 한다. 반환하는 값이 없다. 확인을 누르거나 닫기(X) 버튼 혹은 얼럿 창 주변을 클릭하면 사라진다.
얼럿(Alert) 창 예시, 이미지 출처 : Moon's Blog - https://url.kr/rgq1fk컨펌(Confirm)
'확인하다'란 뜻을 가진 confirm은 사용자가 취한 행동에 대해 다시 한번 확인할 수 있게 하는 역할을 한다. 대체적으로 실수로 삭제를 눌렀을 때 '정말 삭제하려고 했던 것이 맞아?'라고 되물어보는 역할이다. true 또는 false 값을 반환하며, 확인에 해당하는 버튼(이미지 상에서는 '삭제')을 누르면 true, 취소를 누르면 false를 반환한다.
컨펌(Confirm) 창 예시, 이미지 출처 : https://m.blog.naver.com/ka28/222076803325프롬프트(Prompt)
'즉각적인'이란 뜻을 가진 Prompt는 컴퓨터 언어로 사용자의 명령을 받아들일 준비가 되었음을 모니터에 나타내는 표시라고 구글 사전에서 안내하고 있다. 주로 사용자가 입력한 값을 받아오기 위한 용도로 사용한다. 값을 받아야 하는 입력 필드와 함께 확인/취소 버튼이 존재하며 취소를 누르면 null을 반환한다.
프롬프트(Prompt) 창 예시 : 이미지 출처 : https://velog.io/@dram26/Temp-Title여기까지 모달의 종류에 대해 알아보았다. 다음은 레이어 팝업(Layer-popup)이라고 알고 있는, 모달리스(Modalless, Non-modal)라고 하는 녀석에 대해 알아볼 예정이다.
본문 내용 참고
https://www.codingfactory.net/10431
이미지 출처는 해당 이미지 캡션에 표기하였음.
