웹사이트나 업무 프로그램에서 항목을 선택해야 할 때, 작은 화살표를 누르면 아래로 선택지가 펼쳐지는 UI를 자주 보게 됩니다. 진료과를 선택하거나 환자 상태를 필터링할 때 사용하는 이 기능이 바로 Dropdown(드롭다운)입니다.
드롭다운은 여러 선택지를 한곳에 모아두었다가 사용자가 필요할 때 펼쳐 보여주는 UI 요소입니다. 화면을 처음부터 선택지로 가득 채우지 않으면서도 다양한 항목을 제공할 수 있다는 장점이 있습니다.
1. Dropdown은 어떤 모습일까?
예를 들어 병원 EMR에서 진료과를 선택한다고 생각해 보겠습니다.
처음에는 입력 영역에 '진료과를 선택하세요'라는 안내 문구와 아래쪽 화살표가 보입니다. 이 영역을 누르면 다음과 같은 선택지가 펼쳐집니다.
내과
외과
정형외과
신경과
재활의학과
영상의학과
사용자가 '재활의학과'를 선택하면 펼쳐진 목록은 닫히고, 선택한 항목이 입력 영역에 표시됩니다.
시각적 예시는 EMR 환자 조회 화면을 기준으로 구성하면 이해하기 쉽습니다. 왼쪽에는 접힌 상태의 진료과 선택 입력창을, 오른쪽에는 클릭 후 선택지가 펼쳐진 모습을 나란히 배치하면 됩니다.
2. Dropdown은 어디에 사용할까?
드롭다운은 사용하는 목적에 따라 여러 형태로 구현할 수 있습니다.
① 단일 선택
한 번에 하나의 항목만 선택하는 방식입니다. 진료과, 환자 상태, 담당 부서, 결제 수단 등을 선택할 때 사용합니다.
② 다중 선택
여러 항목을 동시에 선택하는 방식입니다. 여러 진료과를 한꺼번에 필터링하거나 여러 업무 상태를 선택할 때 활용할 수 있습니다.
③ 검색 가능한 드롭다운
선택지가 매우 많을 때 목록 안에서 검색어를 입력해 원하는 항목을 찾는 방식입니다. 수백 개의 의료기관 코드나 직원 목록처럼 항목이 많은 경우에 적합합니다.
모든 드롭다운에 검색 기능이나 다중 선택을 넣을 필요는 없습니다. 선택지 개수와 실제 업무 흐름을 고려해 가장 단순한 방식을 선택하는 것이 좋습니다.
3. Dropdown과 일반 버튼은 무엇이 다를까?
버튼은 누르면 정해진 동작을 즉시 실행합니다. 예를 들어 '저장' 버튼을 누르면 입력한 내용이 저장됩니다.
반면 드롭다운은 누르면 선택지가 펼쳐지고, 사용자가 그중 하나를 고른 뒤에야 값이 결정됩니다.
또한 Dropdown Menu와 Select Box는 비슷해 보이지만 용도가 조금 다릅니다.
Select Box: 폼이나 검색 조건에서 정해진 값 하나 또는 여러 개를 선택하는 입력 요소
Dropdown Menu: 메뉴나 작업 목록을 펼쳐 이동 또는 기능을 실행하는 요소
예를 들어 '진료과 선택'은 Select Box가 적합하고, 사용자 프로필을 눌렀을 때 '내 정보 수정', '설정', '로그아웃'이 나타나는 것은 Dropdown Menu에 가깝습니다.
4. 실제 화면에서 이해하기 — 병원 EMR 진료과 필터
환자 목록에서 특정 진료과의 환자만 확인하고 싶다고 가정해 보겠습니다.
선택 전
전체 진료과가 기본값으로 표시됩니다.
환자 목록에는 모든 진료과의 환자가 나타납니다.
드롭다운을 열면
내과, 외과, 정형외과, 신경과, 재활의학과 등의 목록이 펼쳐집니다.
재활의학과를 선택하면
입력 영역에 재활의학과가 표시됩니다.
환자 목록은 해당 진료과 조건으로 다시 조회됩니다.
선택한 필터가 적용 중이라는 사실을 사용자가 알 수 있어야 합니다.
필터를 '전체 진료과'로 되돌리면 다시 전체 목록을 조회하도록 만들 수 있습니다.
5. AI에게 어떻게 요청해야 할까?
막연한 요청은 다음과 같습니다.
“진료과 선택 메뉴를 만들어 줘.”
이렇게만 요청하면 단순한 모양만 만들어지고, 선택한 값이 실제 검색 조건에 반영되지 않을 수 있습니다.
보다 구체적인 요청은 다음과 같습니다.
“환자 목록 상단에 진료과를 선택하는 드롭다운을 만들어 줘. 진료과 목록을 펼쳐 보여주고, 항목을 선택하면 선택한 진료과를 검색 조건에 적용해 환자 목록을 다시 조회하도록 해 줘. 전체 진료과로 초기화하는 기능도 제공해 줘.”
핵심은 드롭다운을 열고 닫는 동작뿐 아니라 선택한 값이 실제 업무 기능에 연결되도록 요청하는 것입니다.
6. 바로 복사해서 사용하는 실전 프롬프트
병원 EMR 환자 목록 화면에 진료과 선택용 Dropdown을 구현해 줘.
환자 목록 상단의 검색 필터 영역에 진료과 선택 입력창을 배치해 줘.
기본 안내 문구는 '전체 진료과'로 표시해 줘.
내과, 외과, 정형외과, 신경과, 재활의학과, 영상의학과를 선택 항목으로 제공해 줘.
입력창을 클릭하면 선택 목록이 아래쪽으로 펼쳐지고, 바깥 영역을 클릭하거나 항목을 선택하면 목록이 닫히도록 해 줘.
항목을 선택하면 선택한 진료과명이 입력창에 표시되도록 해 줘.
선택한 진료과를 실제 환자 목록 조회 조건에 연결해 줘.
'전체 진료과'를 선택하면 진료과 필터를 해제하고 전체 목록을 다시 조회해 줘.
검색어, 진료과 필터, Pagination이 함께 동작하도록 해 줘. 필터가 변경되면 현재 페이지를 1페이지로 초기화해 줘.
키보드 방향키와 Enter, Escape로도 선택하고 닫을 수 있도록 해 줘.
현재 선택된 항목을 시각적으로 구분하고 선택 영역과 펼쳐진 목록의 너비 및 정렬을 일관되게 유지해 줘.
모바일에서는 터치하기 쉬운 크기로 표시하고 화면 밖으로 목록이 잘리지 않도록 해 줘.
기존 EMR의 디자인 시스템과 일관성을 유지해 줘.
7. 결과가 마음에 들지 않을 때
선택지가 너무 많다면
“드롭다운 항목이 많을 경우 목록 상단에 검색 입력창을 추가해 줘. 사용자가 몇 글자만 입력해도 일치하는 항목만 남도록 필터링해 줘.”
선택한 항목이 눈에 띄지 않는다면
“현재 선택된 항목에 체크 아이콘과 배경 강조를 적용해 줘. 선택이 완료된 뒤에도 입력 영역에서 선택값을 명확하게 확인할 수 있도록 해 줘.”
드롭다운이 화면 밖으로 잘린다면
“화면 아래쪽 공간이 부족할 때는 펼쳐지는 방향을 위쪽으로 자동 전환해 줘. 모바일에서도 목록이 화면 안에 표시되도록 크기와 위치를 조정해 줘.”
선택해도 검색 결과가 바뀌지 않는다면
“드롭다운의 선택값이 실제 API 요청의 진료과 필터 파라미터로 전달되는지 확인해 줘. 선택값이 변경되면 목록을 다시 조회하고 Pagination도 첫 페이지로 초기화해 줘.”
키보드로 조작할 수 없다면
“드롭다운에 키보드 접근성을 적용해 줘. Tab으로 포커스 이동, Enter 또는 Space로 열기, 방향키로 항목 이동, Enter로 선택, Escape로 닫기가 가능하도록 해 줘.”
8. Dropdown을 사용할 때 기억할 점
선택 목적을 분명히 하세요. 하나를 선택하는지 여러 개를 선택하는지 먼저 결정해야 합니다.
기본값과 안내 문구를 제공하세요. 사용자가 무엇을 선택해야 하는지 알 수 있어야 합니다.
선택 결과를 명확하게 보여주세요. 선택한 항목이 입력 영역에 반영되어야 합니다.
선택지가 많으면 검색을 고려하세요. 긴 목록을 계속 스크롤하는 불편을 줄일 수 있습니다.
실제 데이터와 연결하세요. 화면에서 선택한 값이 검색, 필터, 저장 등 해당 업무 기능에 반영되어야 합니다.
키보드와 모바일 사용성을 고려하세요. 마우스 클릭만으로 조작할 수 있게 만들지 않는 것이 좋습니다.
특히 병원 EMR에서는 진료과, 병동, 담당 의사, 환자 상태, 검사 유형, 처방 구분 등 다양한 항목을 선택할 때 드롭다운을 활용할 수 있습니다. 반복적으로 입력해야 하는 값을 표준화하고 입력 오류를 줄이는 데도 도움이 됩니다.
오늘 기억할 한 가지
Dropdown은 여러 선택지를 필요할 때 펼쳐 보여주고, 사용자가 원하는 항목을 선택하도록 돕는 UI 요소입니다.
AI에게 요청할 때는 펼쳐지는 모양만 설명하지 마세요. 단일·다중 선택 여부, 실제 데이터 연동, 검색과 필터의 연결, 키보드 및 모바일 사용성까지 함께 지정하면 더 완성도 높은 UI를 만들 수 있습니다.
다음 편에서는 화면 안에서 서로 다른 콘텐츠를 탭으로 전환해 보여주는 Tabs(탭 UI)를 살펴보겠습니다. 병원 EMR의 환자 상세 화면에서 기본 정보, 진료 기록, 검사 결과, 처방 내역을 탭으로 구분하는 예시와 실전 프롬프트를 알아보겠습니다.