Drawer(드로어) — 현재 화면을 유지하며 옆에서 여는 패널
화면을 이동하지 않고도 상세 정보를 확인하거나 보조 작업을 수행하고 싶을 때가 있습니다. 예를 들어 환자 목록을 보다가 특정 환자를 선택해 상세 정보를 확인하거나, 업무 화면을 그대로 둔 채 알림과 필터 설정을 살펴보는 상황입니다.
이럴 때 유용한 UI가 Drawer(드로어)입니다. 화면의 왼쪽이나 오른쪽 가장자리에서 패널이 밀려 나오듯 열리며, 기존 화면의 맥락을 유지한 채 추가 정보나 기능을 제공합니다.
1. 드로어를 쉽게 이해하기
서랍장을 떠올려 보세요. 필요한 물건이 있을 때 서랍을 열어 확인하고, 사용이 끝나면 다시 닫습니다. 드로어도 이와 비슷합니다. 현재 보고 있는 화면은 그대로 두고, 필요한 정보나 기능을 옆 패널에서 확인하는 방식입니다.
병원 EMR의 환자 목록을 예로 들어보겠습니다.
환자 목록에서 한 명을 선택합니다.
화면 오른쪽에 환자 상세 패널이 열립니다.
패널 안에서 환자 기본정보, 병동·병실, 담당 의료진, 최근 기록 등을 확인합니다.
상세 내용을 확인한 뒤 패널을 닫으면 원래 환자 목록으로 돌아옵니다.
페이지 전체를 새로 열지 않아도 되므로 여러 환자를 빠르게 비교하거나 목록과 상세 정보를 오가며 작업할 때 편리합니다.
2. 시각적 예시 방향
본문 이미지나 프로토타입은 병원 EMR의 ‘환자 목록 + 우측 상세 드로어’ 화면으로 구성하면 좋습니다.
화면 왼쪽 또는 중앙에는 환자 목록 테이블을 배치합니다.
목록의 환자 한 명을 선택한 상태로 강조합니다.
화면 오른쪽 약 35~45% 영역에서 상세 패널이 슬라이드 인(slide-in) 방식으로 열리게 합니다.
패널 상단에는 환자명, 등록번호, 병동·병실과 닫기 버튼을 배치합니다.
본문에는 기본정보, 담당 의료진, 최근 진료·간호 기록을 요약해 보여줍니다.
패널 하단에는 필요한 경우 ‘상세 화면으로 이동’이나 ‘정보 수정’ 같은 다음 작업 버튼을 배치합니다.
드로어가 열려도 뒤쪽 환자 목록의 위치와 검색 조건이 유지되는 모습을 함께 보여주면 핵심 장점을 쉽게 이해할 수 있습니다.
3. 드로어의 대표적인 유형
① 우측 드로어
화면 오른쪽에서 열리는 형태입니다. 웹 업무 시스템에서 가장 흔히 볼 수 있으며, 목록의 상세 정보나 보조 설정을 보여줄 때 적합합니다. 환자 목록에서 선택한 환자의 상세정보를 확인하는 화면에 활용할 수 있습니다.
② 좌측 드로어
화면 왼쪽에서 열리는 형태입니다. 전역 메뉴, 내비게이션, 업무 카테고리 등을 보여줄 때 자주 사용합니다. 다만 모바일에서는 메뉴 버튼과 결합해 전체 화면에 가까운 패널로 동작할 수 있습니다.
③ 전체 화면형 드로어
화면 폭이 좁거나 입력·검토할 내용이 많을 때 패널이 화면 대부분 또는 전체를 차지하는 형태입니다. 모바일 환경의 상세정보 확인이나 복잡한 편집 작업에 적합합니다.
방향과 크기는 디자인 취향만으로 정하지 말고, 현재 화면에서 유지해야 할 정보가 무엇인지와 패널 안에서 수행할 작업의 복잡도를 기준으로 결정해야 합니다.
4. 드로어·모달·페이지는 어떻게 다를까?
드로어(Drawer): 기존 화면의 맥락을 유지하면서 옆 패널에서 상세 정보나 보조 기능을 보여줍니다. 목록의 상세 미리보기, 필터, 알림함 등에 적합합니다.
모달·다이얼로그(Modal / Dialog): 사용자의 주의를 특정 확인이나 입력 작업에 집중시키며, 보통 배경과의 상호작용을 제한합니다. 삭제 확인이나 처방 저장 전 검토 등에 적합합니다.
별도 페이지(Page): 독립적인 주소와 넓은 작업 공간이 필요하거나 여러 단계의 복잡한 업무를 수행할 때 적합합니다. 환자 진료기록 전체 조회나 상세 편집처럼 깊이 있는 작업에 사용할 수 있습니다.
예를 들어 환자 목록에서 간단한 정보를 확인할 때는 드로어가 편리하지만, 환자의 전체 진료기록을 검토하고 여러 항목을 편집해야 한다면 별도 페이지가 더 적합할 수 있습니다.
5. AI에게 바로 요청하는 실전 프롬프트
아래 프롬프트를 복사해 바이브코딩 도구에 입력해 보세요.
병원 EMR의 환자 목록 화면에 우측 Drawer(드로어) UI를 구현해줘.
메인 화면에는 가상의 환자 목록 테이블을 표시해줘. 열은 환자번호, 환자명, 병동·병실, 담당 의료진, 입원일로 구성하고 실제 환자 개인정보는 사용하지 말아줘.
사용자가 목록에서 환자 행을 클릭하면 화면 오른쪽에서 상세 패널이 부드럽게 열리도록 해줘. 패널은 데스크톱에서 화면 너비의 약 40%를 사용하되 너무 좁거나 넓어지지 않도록 최대·최소 너비를 설정해줘.
패널 상단에는 환자명, 환자번호, 병동·병실, 닫기 버튼을 배치해줘. 본문은 ‘기본정보’, ‘담당 의료진’, ‘최근 기록’ 세 영역으로 나누고 가상의 예시 데이터를 사용해줘.
드로어가 열려 있는 동안에도 뒤쪽 목록의 검색어, 필터, 스크롤 위치가 유지되도록 해줘. 다른 환자를 선택하면 패널 내용이 해당 환자 정보로 바뀌게 하고, 닫기 버튼과 Escape 키로 패널을 닫을 수 있게 해줘. 배경 클릭으로 닫는 동작은 사용자가 입력 중인 내용이 사라질 위험이 없는 경우에만 허용해줘.
패널이 열리고 닫힐 때 애니메이션을 적용하되 움직임을 줄이도록 설정한 사용자의 운영체제 설정도 존중해줘. 키보드 포커스 이동과 접근성 이름을 제공하고, 모바일에서는 패널이 화면 전체 또는 대부분을 차지하도록 반응형으로 구현해줘.
데이터 로딩 중, 데이터가 없는 경우, 조회 오류가 발생한 경우를 각각 구분해서 보여줘. 상세정보 수정 기능은 조회 기능과 분리하고, 저장 전후 상태를 명확히 표시해줘.
전체 디자인은 의료진이 빠르게 정보를 확인할 수 있는 단정하고 가독성 높은 업무용 UI로 만들어줘.
6. 결과를 더 좋게 만드는 개선 팁
드로어의 목적을 하나로 정하기: 상세정보 확인, 필터 설정, 알림 확인 등 한 패널에서 너무 많은 역할을 수행하지 않도록 합니다.
열리는 방향을 화면 구조에 맞추기: 목록이 왼쪽에 있고 상세정보가 오른쪽에 배치되는 구조라면 우측 드로어가 자연스럽습니다.
패널 크기를 적절히 제한하기: 너무 좁으면 내용이 답답하고, 너무 넓으면 기존 화면을 유지하는 장점이 줄어듭니다.
닫기 동작을 명확히 제공하기: 닫기 버튼, Escape 키 등 예측 가능한 방법을 제공하고 입력 중인 내용이 있을 때는 유실 여부를 확인합니다.
기존 화면 상태를 보존하기: 검색어, 필터, 정렬, 스크롤 위치가 유지되어야 패널을 닫은 뒤 업무를 이어가기 쉽습니다.
모바일 대응하기: 작은 화면에서는 우측의 좁은 패널보다 전체 화면형 상세 패널이 더 편리할 수 있습니다.
접근성 고려하기: 패널이 열릴 때 적절한 포커스 이동, 키보드 탐색, 명확한 제목과 닫기 버튼을 제공해야 합니다.
병원 시스템에서는 환자 상세 드로어에 표시되는 정보도 권한과 접근 통제를 적용해야 합니다. 목록에서 환자를 선택했다는 이유만으로 모든 민감정보를 보여주어서는 안 되며, 사용자의 역할과 업무 목적에 맞는 최소한의 정보만 제공하도록 설계해야 합니다.
7. 오늘의 핵심 정리
드로어는 현재 화면을 떠나지 않고 추가 정보나 보조 기능을 확인할 수 있게 해주는 패널형 UI입니다. 기존 화면의 맥락을 유지하면서 필요한 정보에 빠르게 접근하게 하는 것이 핵심 가치입니다.
바이브코딩을 할 때는 단순히 ‘오른쪽 패널을 만들어줘’라고 요청하는 데 그치지 말고, 어떤 행동으로 열리는지, 패널의 크기와 내용은 무엇인지, 닫은 뒤 기존 화면 상태를 어떻게 유지할지까지 지정해야 합니다.
다음 편 예고
다음 14편에서는 Toast(토스트 알림)를 살펴봅니다. 저장 완료, 오류, 작업 진행 상태처럼 사용자의 업무 흐름을 크게 방해하지 않으면서 짧고 명확하게 상태를 전달하는 방법을 병원 EMR 사례로 알아보겠습니다.