Ears바이브코딩 용어사전UI 패턴
모달 (Modal)
모달은 화면 위에 오버레이로 떠서 배경과의 상호작용을 차단하고 사용자의 응답을 요구하는 창으로, 삭제 확인·중요한 결정처럼 지금 답해야만 진행되는 순간에 씁니다.
최종 업데이트
"modal"은 원래 '모드(mode)를 만드는'이라는 뜻이에요. 모달이 떠 있는 동안 앱은 "이것부터 처리해야 하는 모드"에 들어가고, 뒤 화면은 어두워지며 클릭이 막힙니다. 이 차단성이 모달의 본질입니다.
모달
언제 쓰나요?
되돌리기 어려운 작업의 확인(삭제, 결제), 흐름을 끊고서라도 받아야 하는 입력에 씁니다. 차단은 강력한 만큼 비싸요 — 사용자의 흐름을 강제로 멈추는 것이라, 모달을 남발하는 앱은 금방 피곤해집니다. "이 순간 사용자가 다른 걸 하면 안 되는가?"에 예라고 답할 수 있을 때만 쓰세요.
잘 만든 모달의 조건: ESC로 닫기, 오버레이 클릭으로 닫기(파괴적 작업 확인은 예외), 열릴 때 포커스가 모달 안으로 이동.
AI에게 시키기
삭제 버튼 클릭 시 확인 모달을 띄워줘.
- 배경 어두운 오버레이, 뒤 화면 클릭 차단
- 제목 "정말 삭제할까요?" + 되돌릴 수 없다는 안내 한 줄
- 취소(기본 포커스) / 삭제(빨간색) 버튼
- ESC로 닫기, 삭제 확인이므로 오버레이 클릭으로는 닫히지 않게혼동 주의
- 다이얼로그(Dialog): 더 넓은 개념이에요. 모달은 "차단하는 다이얼로그"이고, 차단하지 않는 논모달(non-modal) 다이얼로그도 있습니다. HTML의
<dialog>요소는 둘 다 지원해요 - 팝업: 별도의 브라우저 창을 여는 것 — 요즘 UI에서 쓸 일이 거의 없고, 광고 차단기의 표적입니다
- 드로어/시트: 화면 옆이나 아래에서 밀려 들어오는 패널. 차단할 수도 안 할 수도 있어요
- 토스트: 정반대 — 차단하지 않고 알아서 사라짐