Modal / Dialog(모달·다이얼로그) — 중요한 순간에 사용자의 선택을 받는 창
화면을 사용하다 보면 현재 작업을 잠시 멈추고 확인하거나, 추가 정보를 입력해야 할 때가 있습니다. 예를 들어 환자 정보를 수정하기 전에 변경 내용을 확인하거나, 처방을 저장하기 전에 최종 확인을 받는 상황입니다.
이때 사용하는 UI가 Modal(모달)과 Dialog(다이얼로그)입니다. 화면 위에 별도의 창을 띄워 사용자의 시선을 모으고, 확인·취소·입력 같은 특정 작업을 수행하도록 돕습니다.
1. 모달과 다이얼로그를 쉽게 이해하기
업무 중 중요한 서류에 서명하기 전에 담당자가 잠시 업무를 멈추고 내용을 확인해 달라고 요청하는 장면을 떠올려 보세요. 모달·다이얼로그는 이처럼 현재 화면 위에 작은 작업 공간을 열어 사용자의 주의를 집중시킵니다.
병원 EMR에서는 다음과 같은 상황에 활용할 수 있습니다.
환자 정보 수정: 변경할 항목을 입력하고 저장 여부를 결정
처방 저장 확인: 처방 내용과 주의사항을 확인한 뒤 저장 또는 취소
검사 오더 확인: 선택한 검사 항목과 시행 정보를 검토
삭제 확인: 기록이나 항목을 삭제하기 전에 다시 확인
일반적으로 모달은 뒤쪽 화면과 상호작용을 제한하고, 다이얼로그는 확인·입력·알림을 위한 대화형 창을 폭넓게 가리키는 용어로 사용됩니다. 제품과 디자인 시스템에 따라 두 용어를 구분하는 방식은 다를 수 있습니다.
핵심은 창을 띄우는 것 자체가 아니라, 사용자가 지금 어떤 결정을 해야 하는지 명확하게 보여주는 것입니다.
2. 시각적 예시 방향
본문 이미지나 프로토타입은 EMR의 ‘처방 저장 전 확인’ 화면을 기준으로 구성하면 이해하기 쉽습니다.
배경에는 환자 상세 화면과 처방 입력 화면을 흐리게 보여줍니다.
화면 중앙에는 흰색 확인 창을 배치하고, 제목을 ‘처방 내용을 확인해 주세요’로 표시합니다.
창 안에는 약품명, 용량, 투여 경로, 투여 기간 등 핵심 항목을 간결하게 정리합니다.
하단에는 ‘취소’와 ‘확인 후 저장’ 버튼을 배치합니다.
저장이 진행 중일 때는 버튼을 비활성화하고 진행 상태를 표시하며, 완료 또는 오류 결과를 분명하게 알려줍니다.
배경을 어둡게 처리하는 것은 사용자의 시선을 모으기 위한 시각적 장치입니다. 중요한 정보까지 가려서는 안 되며, 창의 크기와 내용은 작업의 복잡도에 맞춰야 합니다.
3. 자주 쓰는 다이얼로그 유형
① 확인 다이얼로그
삭제, 저장, 전송처럼 결과가 발생하는 작업을 실행하기 전에 사용자의 최종 의사를 확인합니다. ‘정말 진행하시겠습니까?’처럼 막연하게 묻기보다 어떤 대상에 어떤 변화가 생기는지 구체적으로 알려야 합니다.
② 입력 다이얼로그
현재 화면을 벗어나지 않고 간단한 정보를 입력받을 때 사용합니다. 예를 들어 환자 정보 수정 사유나 메모를 입력하는 경우입니다. 입력 항목이 많거나 복잡하면 별도 페이지나 전체 화면 편집이 더 적합할 수 있습니다.
③ 알림 다이얼로그
중요한 안내나 오류를 전달할 때 사용합니다. 다만 단순한 성공 메시지까지 매번 모달로 띄우면 업무 흐름을 방해할 수 있으므로, 중요도에 따라 토스트(Toast) 등 다른 UI를 선택해야 합니다.
4. 모달·다이얼로그와 드로어는 어떻게 다를까?
모달·다이얼로그(Modal / Dialog): 사용자의 주의를 특정 작업에 집중시키고, 확인이나 입력을 마칠 때까지 배경 작업을 제한하는 데 적합합니다.
드로어(Drawer): 화면 한쪽에서 패널이 열리며 현재 화면의 맥락을 유지한 채 상세 정보나 보조 기능을 보여주는 데 적합합니다.
토스트(Toast): 화면 한쪽에 짧게 나타났다 사라지는 비차단형 알림으로, 저장 완료 등 간단한 상태 전달에 적합합니다.
예를 들어 처방을 최종 저장하기 전에는 확인 다이얼로그를 사용할 수 있지만, 저장이 성공했다는 안내는 토스트로 전달하는 편이 업무 흐름을 덜 방해합니다.
5. AI에게 바로 요청하는 실전 프롬프트
아래 프롬프트를 복사해 바이브코딩 도구에 입력해 보세요.
병원 EMR의 처방 입력 화면에 ‘처방 저장 확인’ 다이얼로그를 구현해줘.
화면 배경에는 환자 요약 정보와 처방 입력 폼이 보이게 하고, 사용자가 ‘저장’ 버튼을 누르면 화면 중앙에 확인 다이얼로그가 열리게 해줘.
다이얼로그 제목은 ‘처방 내용을 확인해 주세요’로 해줘. 본문에는 가상의 예시 데이터로 약품명, 용량, 투여 경로, 투여 횟수, 투여 기간을 정리해서 보여줘. 실제 환자 정보나 실제 처방 지시를 사용하지 말아줘.
하단에는 ‘취소’와 ‘확인 후 저장’ 버튼을 배치해줘. 취소를 누르면 다이얼로그만 닫히고 입력 중인 내용은 유지해줘. 확인 후 저장을 누르면 중복 제출이 발생하지 않도록 버튼을 비활성화하고 로딩 상태를 보여줘. 저장 성공과 실패 상태도 각각 구분해서 표시해줘.
다이얼로그가 열리면 키보드 포커스가 창 안으로 이동하고, Tab 키로 창 내부 요소를 이동할 수 있게 해줘. Escape 키로 닫을 수 있는 상황인지 작업의 위험도에 따라 판단하고, 닫힐 때는 포커스를 원래 열었던 버튼으로 돌려줘. 제목과 설명이 보조기술에 전달되도록 접근성 속성을 적용해줘.
작은 화면에서는 창이 화면 밖으로 나가지 않도록 반응형으로 만들고, 내용이 길면 창 내부에서 스크롤되게 해줘. 확인 버튼을 누르기 전에는 실제 저장이 실행되지 않도록 동작을 분리해줘.
디자인은 의료진이 빠르게 내용을 확인할 수 있도록 단정하고 명확하게 구성해줘.
6. 결과를 더 좋게 만드는 개선 팁
제목에 작업 결과를 담기: ‘확인’보다는 ‘처방 내용을 저장할까요?’처럼 사용자가 무엇을 결정하는지 명확하게 표현합니다.
버튼 문구를 구체적으로 작성: ‘예/아니오’보다 ‘취소/삭제’, ‘돌아가기/확인 후 저장’처럼 결과를 예측할 수 있는 문구가 좋습니다.
위험도에 맞게 확인 절차 설계: 되돌릴 수 있는 단순 작업마다 확인창을 띄우면 피로도가 높아집니다. 삭제나 확정처럼 영향이 큰 작업에 신중하게 적용합니다.
입력 중인 내용 보존: 사용자가 취소하거나 창을 닫았을 때 작성 중이던 데이터가 예기치 않게 사라지지 않도록 합니다.
중복 실행 방지: 저장 버튼을 여러 번 눌러 요청이 중복 전송되지 않도록 처리합니다.
키보드와 접근성 지원: 포커스 이동, 닫기 동작, 제목·설명 연결, 명확한 버튼 이름을 구현합니다.
모바일 화면 고려: 작은 화면에서는 좁은 팝업보다 전체 화면에 가까운 다이얼로그가 더 편리할 수 있습니다.
특히 의료정보 시스템에서는 다이얼로그가 떴다는 사실만으로 저장이나 처방이 완료된 것이 아닙니다. 실제 서버 처리 결과를 확인한 뒤 성공·실패를 표시해야 하며, 중요한 임상 판단이나 처방 결정은 UI의 확인 버튼만으로 대체할 수 없습니다.
7. 오늘의 핵심 정리
모달·다이얼로그는 사용자의 흐름을 잠시 멈추고 중요한 확인이나 입력을 받는 UI입니다. 자주 띄우는 것이 좋은 것이 아니라, 정말 주의를 집중해야 하는 순간에 명확한 선택지를 제공하는 것이 중요합니다.
바이브코딩을 할 때는 창의 모양만 요청하지 말고, 어떤 행동에서 열리는지, 취소하면 무엇이 유지되는지, 확인하면 어떤 처리가 실행되는지, 오류가 나면 어떻게 안내할지까지 구체적으로 설명해야 합니다.
다음 편 예고
다음 13편에서는 Drawer(드로어)를 다룹니다. 현재 화면의 맥락을 유지하면서 옆에서 열리는 상세 패널을 병원 EMR의 환자 상세정보와 업무 메뉴 사례로 살펴보겠습니다.