명세표 입력을 누르면 모달창을 띄워 데이터를 입력시키려고 계획했었다 하지만 의문이 들었다 나는 왜 모달창을 사용해서 화면을 만드려고 하는것인가? 그래서 모달창의 용도? 부터 공부하기위해 여러가지 검색해봤다
모달창의 주요 기능
- 직관적인 사용자 경험 제공: 모달창은 사용자가 현재 작업 흐름을 떠나지 않고 추가 정보를 제공하거나 입력할 수 있도록 도와준다. 사용자는 모달이 나타나면 배경이 어두워지는 것을 보고, 현재 작업을 잠시 멈추고 있음을 알 수 있다.
- 공간 절약: 추가 정보나 작은 작업을 위해 새로운 페이지를 로드하지 않고도 모달창 내에서 처리할 수 있다. 이는 사용자가 원래 페이지를 벗어나지 않고도 추가 작업을 할 수 있도록 한다.
- 시각적 집중: 모달창이 나타나면 사용자는 그 내용에 집중할 수 있다. 배경이 흐릿해지거나 모달창이 팝업되면서 사용자의 시선이 모달창으로 이동하도록 유도할 수 있다.
- 작업 흐름 통제: 중요한 작업을 모달창으로 처리하면 사용자가 더 이상의 작업 흐름을 따라가지 않도록 할 수 있다. 예를 들어, 데이터 입력, 확인, 경고 등의 작업을 모달창에서 처리하여 사용자의 실수를 줄이거나 안전한 작업을 유도할 수 있다.
- 단순화된 UI 디자인: 모달창은 기본적으로 콘텐츠를 단순하게 보여주는 UI 패턴이다. 복잡한 페이지 전환 없이 필요한 작업을 단순하게 처리할 수 있다.
- 접근성 개선: 모달창은 웹 접근성을 개선하는 데 도움을 줄 수 있다. 사용자가 현재 위치에서 이동하지 않고 정보를 제공하고 입력할 수 있으므로 사용성이 향상이 가능.
팝업창 vs 모달창
- 팝업창은 웹 시작과 동시에 켜지는 경우가 많음.
- 모달창은 중간 중간에만 사용자에게 보여주는 경우가 많다.
- 새로운 다른 창을 여는 것이 아닌 새로운 레이어를 까는 것, 제거를 하지 않아도 자동으로 사라짐, 기존 페이지와 부모-자식의 관계
- 팝업창은 팝업을 허용시켜야 페이지를 볼때도 있음 (불편함)
- 팝업창은 현재 의도하는 목적과 상관없이 뜨는 창
- 모달창은 다음 진행으로 넘어가기위한 필요에 의해 사용되는 창.
=> 결론적으로 반드시 노출해서 보여줘야 할 창엔 모달을 사용하는 것이 맞다!
출처: https://chlolisher.tistory.com/101 [클로리셔 작은 공간:티스토리]