Tabs(탭) — 관련 정보를 한 화면에서 나누어 보여주는 UI
환자 정보를 확인할 때 기본정보, 진료기록, 검사결과, 처방내역을 한꺼번에 펼쳐 놓으면 화면이 복잡해집니다. 반대로 정보를 확인할 때마다 새 화면으로 이동해야 한다면 업무 흐름이 끊길 수 있습니다.
이럴 때 활용하는 UI가 Tabs(탭)입니다. 하나의 화면 안에서 관련 정보를 여러 영역으로 나누고, 사용자가 탭을 선택해 필요한 내용을 전환해서 볼 수 있도록 하는 방식입니다. 책의 목차나 파일철의 구분 라벨처럼 정보를 주제별로 정리해 주는 역할을 합니다.
1. 탭을 쉽게 이해하기
서류철에 '기본정보', '검사결과', '처방내역'이라고 적힌 구분 라벨이 붙어 있다고 생각해 보세요. 필요한 라벨을 열면 그 주제에 해당하는 서류만 확인할 수 있습니다.
탭도 같은 원리입니다. 화면 상단이나 콘텐츠 영역 가까이에 여러 탭을 배치하고, 사용자가 하나를 선택하면 해당 내용이 표시됩니다.
병원 EMR의 환자 상세 화면을 예로 들면 다음과 같습니다.
기본정보: 환자의 기본 인적·등록 정보
진료기록: 진료 경과와 기록
검사결과: 검사 항목별 결과
처방내역: 처방 및 투약 관련 정보
간호기록: 간호사가 작성한 기록
탭은 관련된 정보를 한 화면 안에서 전환하도록 돕습니다. 다만 탭을 너무 많이 만들거나 서로 관계없는 기능을 한데 묶으면 오히려 사용성이 떨어집니다.
2. 시각적 예시 방향
본문 이미지나 프로토타입은 병원 EMR의 환자 상세정보 화면을 중심으로 구성하면 이해하기 쉽습니다.
화면 상단에 가상의 환자 요약 영역을 배치합니다. 실제 환자 개인정보는 사용하지 않습니다.
그 아래에 '기본정보·진료기록·검사결과·처방내역·간호기록' 탭을 가로로 배치합니다.
처음에는 '기본정보' 탭이 선택된 상태로 표시하고, 선택된 탭은 색상·밑줄·글자 굵기 등으로 명확하게 구분합니다.
'검사결과' 탭을 선택하면 탭 영역 아래 콘텐츠만 검사결과 화면으로 바뀌도록 표현합니다.
탭을 전환해도 환자 요약 영역과 공통 도구는 유지되어 현재 누구의 정보를 보고 있는지 알 수 있게 합니다.
화면 폭이 좁은 모바일에서는 탭이 잘리거나 지나치게 압축되지 않도록 가로 스크롤 또는 적절한 대체 탐색 방식을 보여줍니다.
시각적으로는 선택된 탭과 비선택 탭의 차이가 분명해야 합니다. 탭을 클릭했을 때 실제 콘텐츠가 바뀌는 장면까지 표현해야 단순한 버튼 모음과 탭 UI의 차이를 이해할 수 있습니다.
3. 탭의 대표적인 유형
① 기본 탭(Basic Tabs)
가장 일반적인 형태입니다. 탭을 선택하면 같은 화면의 콘텐츠 영역이 전환됩니다. 환자 상세정보의 기본정보·진료기록·검사결과 구분에 적합합니다.
② 아이콘 탭(Icon Tabs)
아이콘과 짧은 텍스트를 함께 사용해 기능을 구분합니다. 아이콘만 사용하는 경우에는 의미를 이해하기 어려울 수 있으므로 명확한 레이블을 함께 제공하는 것이 좋습니다.
③ 세로 탭(Vertical Tabs)
탭을 화면 왼쪽이나 오른쪽에 세로로 배치합니다. 설정 화면처럼 항목이 많거나 긴 레이블을 표시해야 할 때 유용합니다.
④ 스크롤 탭(Scrollable Tabs)
탭의 개수가 화면 폭을 넘을 때 가로로 이동해 나머지 항목을 확인하도록 합니다. 모바일이나 정보 범주가 많은 화면에서 활용할 수 있습니다. 다만 사용자가 다른 탭이 더 있다는 사실을 알아차릴 수 있도록 일부 탭이 보이거나 스크롤 가능성을 알려주는 단서를 제공해야 합니다.
4. 탭과 비슷한 UI는 어떻게 다를까?
탭(Tabs): 같은 맥락의 콘텐츠 영역을 전환합니다. 환자 상세정보처럼 하나의 대상에 관한 여러 정보를 볼 때 적합합니다.
아코디언(Accordion): 제목을 누르면 해당 영역이 펼쳐지거나 접힙니다. 여러 내용을 한 페이지에서 위아래로 살펴볼 때 유용합니다.
세그먼트 컨트롤(Segmented Control): 서로 배타적인 보기 방식이나 간단한 선택지를 전환합니다. 예를 들어 '일간·주간·월간' 통계 보기 전환에 적합합니다.
사이드바 내비게이션(Sidebar Navigation): 화면의 주요 메뉴나 서로 다른 업무 영역으로 이동합니다. 환자관리·수납·재고관리처럼 독립된 기능 간 이동에 사용합니다.
탭은 하나의 대상이나 작업 맥락 안에서 관련 콘텐츠를 바꾸는 데 사용합니다. 서로 다른 업무 기능이나 독립된 페이지로 이동해야 한다면 탭보다 메뉴나 내비게이션이 적절할 수 있습니다.
5. AI에게 바로 요청하는 실전 프롬프트
아래 프롬프트를 복사해 바이브코딩 도구에 입력해 보세요.
병원 EMR의 환자 상세정보 화면에 Tabs(탭) UI를 구현해줘.
실제 환자 개인정보를 사용하지 말고 가상의 환자 데이터로 화면을 구성해줘. 화면 상단에는 환자 요약 영역을 만들고, 그 아래에 '기본정보', '진료기록', '검사결과', '처방내역', '간호기록' 탭을 가로로 배치해줘.
처음 화면에서는 '기본정보' 탭이 선택되도록 해줘. 사용자가 다른 탭을 선택하면 페이지 전체를 이동하지 않고 탭 아래 콘텐츠 영역만 해당 내용으로 바뀌게 해줘. 선택된 탭은 배경색, 밑줄 또는 글자 굵기로 명확하게 구분하고, 비선택 탭과 시각적으로 구별해줘.
각 탭에는 해당 주제에 맞는 가상의 예시 콘텐츠를 표시해줘. 검사결과 탭에는 검사 항목·결과·참고범위의 예시를, 간호기록 탭에는 날짜별 기록 목록의 예시를 보여줘. 실제 진단이나 치료 판단으로 오해되지 않도록 모든 데이터에 시연용 예시임을 표시해줘.
탭을 전환해도 환자 요약 영역은 유지해 현재 선택한 환자의 맥락을 잃지 않게 해줘. 각 탭의 선택 상태가 URL이나 화면 상태와 일관되게 관리되도록 하고, 새로고침이나 뒤로 가기 동작이 필요한 경우에도 사용자가 혼란스럽지 않게 설계해줘.
키보드로 탭 사이를 이동하고 선택할 수 있도록 접근성을 고려해줘. 탭 목록과 패널의 관계를 명확히 하고, 현재 선택된 탭을 보조기술이 인식할 수 있도록 구현해줘.
모바일과 태블릿에서는 탭이 화면 밖으로 무질서하게 잘리지 않도록 반응형으로 구성해줘. 탭이 많으면 가로 스크롤을 제공하고, 사용자가 추가 탭이 있다는 것을 알아차릴 수 있도록 시각적 단서를 넣어줘.
탭별 콘텐츠가 로딩 중이거나 데이터가 없거나 오류가 발생한 경우의 상태도 각각 설계해줘. 화면 디자인은 병원 업무 시스템에 어울리는 단정하고 가독성 높은 스타일로 만들어줘.
먼저 화면 구조와 탭 전환 동작을 구현하고, 각 탭의 콘텐츠와 상태 처리가 정상적으로 작동하는지 확인해줘. 단순히 탭 모양만 만들지 말고 실제로 콘텐츠가 전환되도록 구현해줘.
6. 결과를 더 좋게 만드는 개선 팁
탭은 관련 있는 정보끼리 묶기: 서로 다른 업무 기능을 무리하게 한 화면의 탭으로 묶지 않습니다.
탭 이름은 짧고 명확하게: '검사결과', '간호기록'처럼 사용자가 내용을 바로 예측할 수 있는 이름을 사용합니다.
선택 상태를 분명하게 표시하기: 색상뿐 아니라 밑줄, 굵기, 테두리 등으로 현재 탭을 구분합니다.
탭 개수를 관리하기: 탭이 지나치게 많으면 사용자가 원하는 정보를 찾기 어렵습니다. 범주를 재구성하거나 별도 메뉴를 고려합니다.
전환 중에도 맥락 유지하기: 환자 요약이나 공통 도구처럼 계속 필요한 정보는 탭 전환 후에도 유지합니다.
키보드와 보조기술 지원하기: 키보드 탐색, 현재 선택 상태, 탭과 콘텐츠 패널의 관계를 명확히 구현합니다.
모바일 화면을 별도로 검토하기: 가로 스크롤이나 대체 탐색 방식을 적용하되, 숨겨진 탭이 있다는 사실을 알 수 있게 합니다.
로딩·빈 화면·오류 상태도 설계하기: 콘텐츠가 없거나 불러오지 못한 상황에서도 사용자가 원인을 이해할 수 있도록 안내합니다.
병원 업무 시스템에서는 탭을 전환하는 동안 현재 환자와 업무 맥락이 혼동되지 않도록 해야 합니다. 특히 환자 요약정보를 일관되게 유지하고, 탭별 데이터가 실제로 선택된 환자와 연결되는지 확인해야 합니다. 시연용 화면에서는 가상 데이터를 사용하고 실제 의료정보와 혼동되지 않도록 표시하는 것이 안전합니다.
7. 오늘의 핵심 정리
탭은 하나의 화면 안에서 관련 정보를 주제별로 나누고 빠르게 전환하도록 돕는 UI입니다. 정보를 적절하게 분류하고, 현재 위치를 명확하게 보여주며, 화면의 맥락을 유지하는 것이 핵심입니다.
바이브코딩을 할 때는 탭의 모양만 요청하지 말고, 어떤 정보를 어떤 탭으로 나눌지, 선택 시 무엇이 바뀌는지, 공통 영역은 어떻게 유지할지, 모바일과 키보드에서는 어떻게 작동할지까지 구체적으로 지정해야 합니다.
다음 편 예고
다음 17편에서는 Carousel(캐러셀)을 살펴봅니다.
여러 이미지와 콘텐츠 카드를 좌우로 넘기며 탐색하는 UI입니다. 병원 EMR의 검사 결과 카드와 비아토 스토리의 콘텐츠 목록을 사례로 활용해 캐러셀의 구조, 작동 방식, 효과적인 화면 설계 방법을 알아보겠습니다.