Tabs(탭 UI) — 한 화면에서 여러 정보를 정리하는 방법
환자 한 명의 정보에는 기본 정보, 진료 기록, 검사 결과, 처방 내역처럼 서로 다른 종류의 데이터가 함께 들어 있습니다. 이 내용을 한 화면에 전부 펼쳐 놓으면 화면이 길어지고, 필요한 정보를 찾기도 어려워집니다.
이럴 때 사용하는 UI가 Tabs(탭 UI)입니다. 탭은 관련 정보를 몇 개의 영역으로 나누고, 사용자가 원하는 탭을 선택했을 때 해당 내용만 보여주는 인터페이스입니다.
1. 탭 UI를 쉽게 이해하기
책의 목차나 서류철의 인덱스를 떠올리면 됩니다. 서류철의 각 구분 탭을 넘기듯, 화면 상단의 탭을 선택하면 같은 화면 안에서 표시되는 정보가 바뀝니다.
예를 들어 병원 EMR의 환자 상세 화면을 다음과 같이 구성할 수 있습니다.
기본 정보: 환자 인적 사항, 연락처, 입원 정보
진료 기록: 진료 일자, 담당 의료진, 경과 기록
검사 결과: 혈액검사, 영상검사 등 검사 내역
처방 내역: 약품명, 용량, 투여 경로, 처방 기간
핵심은 서로 관련된 정보를 한 화면 안에서 논리적으로 구분하되, 사용자가 현재 어디를 보고 있는지 분명하게 알려주는 것입니다.
2. 시각적 예시 방향
본문 이미지 또는 프로토타입은 병원 EMR의 ‘환자 상세’ 화면을 기준으로 다음 구조를 보여주면 이해하기 쉽습니다.
화면 상단에는 환자 기본 식별 정보와 현재 상태를 간결하게 배치합니다.
그 아래에
기본 정보 | 진료 기록 | 검사 결과 | 처방 내역탭을 가로로 배치합니다.선택된 탭은 배경색이나 하단 강조선으로 구분합니다.
탭을 바꾸면 아래 콘텐츠 영역만 교체되고, 환자 식별 정보와 상단 구조는 유지합니다.
검사 결과 탭에는 검사일·검사명·결과·참고 범위를 표 형태로 보여주는 식으로 탭마다 정보에 맞는 화면을 구성합니다.
탭은 단순히 버튼 네 개를 나열하는 기능이 아닙니다. 각 탭에 어떤 정보가 들어가는지 예측할 수 있고, 선택 상태가 명확해야 좋은 탭 UI입니다.
3. 탭과 드롭다운·아코디언은 어떻게 다를까?
탭(Tabs): 같은 수준의 콘텐츠 여러 개를 빠르게 오가며 비교하거나 확인할 때 적합합니다.
드롭다운(Dropdown): 여러 선택지 중 하나 또는 여러 항목을 선택할 때 적합합니다.
아코디언(Accordion): 한 페이지 안에서 긴 설명이나 세부 항목을 접었다 펼치며 읽을 때 적합합니다.
환자 상세 화면에서 기본 정보·검사 결과·처방 내역처럼 자주 오가는 주요 영역은 탭이 적합합니다. 반면 검사 결과 안의 검사 항목별 상세 설명은 아코디언으로 펼쳐 보여줄 수 있습니다.
4. AI에게 바로 요청하는 실전 프롬프트
아래 프롬프트를 복사해 바이브코딩 도구에 입력해 보세요.
병원 EMR의 환자 상세 화면을 만들어줘.
화면 상단에는 환자번호, 환자명, 성별·나이, 병동·병실, 입원 상태를 요약해서 보여줘.
환자 요약 영역 아래에는 다음 네 개의 탭을 배치해줘.
기본 정보
진료 기록
검사 결과
처방 내역
탭을 클릭하면 페이지 전체가 새로고침되지 않고 아래 콘텐츠 영역만 바뀌게 해줘. 현재 선택된 탭은 색상과 하단 강조선으로 명확하게 표시해줘.
각 탭에는 해당 정보의 예시 데이터를 넣어줘. 진료 기록은 날짜·진료과·담당 의료진·기록 요약을 표로, 검사 결과는 검사일·검사명·결과·참고 범위를 표로, 처방 내역은 처방일·약품명·용량·투여 경로·기간을 표로 보여줘.
탭은 마우스뿐 아니라 키보드로도 이동하고 선택할 수 있도록 접근성을 고려해줘. 작은 화면에서는 탭이 잘리지 않도록 가로 스크롤 또는 적절한 반응형 처리를 적용해줘.
실제 환자 데이터는 사용하지 말고 가상의 예시 데이터만 사용해줘. 각 탭의 정보 구조가 명확하고 의료진이 빠르게 읽을 수 있는 깔끔한 업무용 UI로 구현해줘.
5. 결과를 더 좋게 만드는 개선 팁
처음부터 모든 기능을 한꺼번에 요청하기보다, 기본 탭 구조를 만든 다음 아래 항목을 순서대로 개선하면 좋습니다.
선택 상태를 분명하게: 활성 탭은 색상, 글자 굵기, 밑줄 중 두 가지 이하의 일관된 방식으로 강조합니다.
탭 이름을 짧고 구체적으로: ‘검사’보다 ‘검사 결과’처럼 사용자가 내용을 예상할 수 있는 이름을 사용합니다.
콘텐츠 높이와 밀도를 관리: 탭을 바꿀 때 화면이 크게 흔들리지 않도록 콘텐츠 영역의 레이아웃을 안정적으로 설계합니다.
데이터 로딩 상태 표시: 탭을 눌렀을 때 데이터 조회가 진행 중이라면 로딩 표시를 제공하고, 결과가 없을 때는 빈 상태 안내를 보여줍니다.
권한과 개인정보 보호: 탭을 숨기는 것만으로 접근을 통제했다고 볼 수 없습니다. 서버에서도 사용자 권한을 확인하고, 권한이 없는 데이터는 전달하지 않도록 설계해야 합니다.
키보드 접근성 확보: 탭 목록과 패널의 관계를 명확히 하고, 키보드 포커스와 선택 상태가 구분되도록 구현합니다.
특히 EMR에서는 탭을 바꿔도 현재 보고 있는 환자가 바뀌지 않도록 환자 컨텍스트를 유지해야 합니다. 다른 환자의 정보가 섞이지 않도록 환자 식별 정보와 데이터 조회 조건을 함께 검증하는 것도 중요합니다.
6. 오늘의 핵심 정리
탭 UI는 많은 정보를 무조건 한 화면에 쌓지 않고, 정보를 의미 있는 묶음으로 나누어 필요한 영역으로 빠르게 이동하게 만드는 방법입니다.
바이브코딩을 할 때는 “탭을 만들어줘”에서 멈추지 말고, 어떤 정보를 어떤 기준으로 나눌지, 탭을 바꿀 때 무엇이 유지되고 무엇이 바뀌어야 하는지까지 설명해야 원하는 결과에 가까워집니다.
다음 편 예고
다음 11편에서는 Accordion(아코디언)을 다룹니다. 긴 설명과 세부 항목을 접었다 펼치면서 화면을 깔끔하게 유지하는 방법을 병원 EMR의 검사 상세 정보와 업무 매뉴얼 사례로 살펴보겠습니다.