웹사이트나 병원 업무 프로그램을 사용하다 보면 여러 메뉴를 거쳐 특정 화면에 도착하는 경우가 있습니다.
예를 들어 병원 EMR에서 환자 관리 메뉴에 들어가 환자 한 명을 선택하고, 다시 검사 결과를 조회한다고 생각해 보겠습니다. 현재 화면이 어떤 메뉴에 속해 있는지, 처음 화면으로 돌아가려면 어디를 눌러야 하는지 헷갈릴 수 있습니다.
이런 문제를 해결하는 UI 요소가 Breadcrumb Navigation(브레드크럼 내비게이션)입니다.
Breadcrumb은 빵가루라는 뜻입니다. 동화 속 헨젤과 그레텔이 길을 잃지 않기 위해 빵가루를 남긴 것처럼, 사용자가 현재 위치와 이전 메뉴 경로를 쉽게 파악할 수 있도록 표시하는 탐색 기능입니다.
1. Breadcrumb Navigation은 어떤 모습일까?
일반적으로 화면 상단의 제목 아래에 다음과 같은 형태로 표시합니다.
홈 > 환자 관리 > 환자 목록 > 환자 상세 > 검사 결과
각 항목은 현재 화면까지 이동한 경로를 나타냅니다.
홈: 처음 대시보드로 이동
환자 관리: 환자 관리 메뉴로 이동
환자 목록: 환자 목록으로 이동
환자 상세: 선택한 환자의 상세 화면으로 이동
검사 결과: 현재 위치 표시
보통 이전 경로는 클릭할 수 있도록 만들고, 현재 위치는 강조하거나 클릭할 수 없도록 구분합니다.
시각적 예시로는 병원 관리자 화면을 배경으로 상단에 '홈 > 환자 관리 > 환자 목록 > 환자 상세 > 검사 결과'라는 경로를 표시하고, 각 경로를 클릭하면 해당 상위 화면으로 이동하는 모습을 생각하면 됩니다.
2. 실제 화면에서 이해하기
환자 관리 업무를 예로 들어 보겠습니다.
첫 번째 화면 — 환자 목록
현재 위치: 홈 > 환자 관리 > 환자 목록
환자 목록에서 김○○ 환자를 선택합니다.
두 번째 화면 — 환자 상세
현재 위치: 홈 > 환자 관리 > 환자 목록 > 환자 상세
환자 상세 화면에서 검사 결과 메뉴를 선택합니다.
세 번째 화면 — 검사 결과
현재 위치: 홈 > 환자 관리 > 환자 목록 > 환자 상세 > 검사 결과
이제 사용자는 자신이 어떤 경로를 거쳐 검사 결과 화면에 도착했는지 확인할 수 있습니다. 상위 경로인 '환자 목록'을 누르면 환자 목록으로 돌아갈 수도 있습니다.
즉, Breadcrumb은 현재 위치를 알려주는 안내판이면서 이전 메뉴로 돌아가는 빠른 길이기도 합니다.
3. Breadcrumb과 Sidebar는 무엇이 다를까?
두 기능 모두 화면 이동을 돕지만 역할은 다릅니다.
Sidebar(사이드바)는 전체 메뉴를 보여주는 탐색 도구입니다. 사용자가 원하는 기능을 선택해 다른 메뉴로 이동할 수 있습니다.
Breadcrumb(브레드크럼)은 현재 화면까지 어떤 경로로 이동했는지 보여주는 위치 안내 도구입니다.
예를 들어 병원 EMR에서 사이드바는 환자 관리, 간호 업무, 처방, 검사, 영상, 원무 등의 메뉴를 보여줍니다. 반면 Breadcrumb은 현재 화면이 '환자 관리 > 환자 상세 > 검사 결과'라는 계층에 있다는 것을 알려줍니다.
두 기능을 함께 사용하면 메뉴 이동과 현재 위치 파악이 훨씬 쉬워집니다.
4. AI에게 어떻게 요청해야 할까?
막연한 요청은 다음과 같습니다.
“화면 위쪽에 현재 위치를 표시해 줘.”
이렇게만 요청하면 단순한 텍스트를 표시하거나 실제 메뉴 이동과 연결되지 않은 경로를 만들 수 있습니다.
보다 구체적인 요청은 다음과 같습니다.
“화면 상단에 Breadcrumb Navigation을 적용해 줘. 현재 화면까지의 메뉴 경로를 계층적으로 표시하고, 상위 경로를 클릭하면 해당 메뉴로 이동하도록 만들어 줘. 현재 화면은 강조 표시하고, 모바일에서도 경로가 자연스럽게 표시되도록 해 줘.”
중요한 것은 단순히 경로를 보여주는 것이 아니라 실제 메뉴 구조와 연결하는 것입니다.
5. 바로 복사해서 사용하는 실전 프롬프트
아래 프롬프트를 복사해서 병원 관리자 프로그램이나 EMR 화면에 적용해 보세요.
병원 EMR 프로그램에 Breadcrumb Navigation 기능을 구현해 줘.
화면 상단의 페이지 제목 아래에 Breadcrumb을 배치해 줘.
기본 경로는 홈 > 환자 관리 > 환자 목록 > 환자 상세 > 검사 결과로 구성해 줘.
각 경로 사이에는 구분 기호(>)를 표시해 줘.
현재 화면보다 상위에 있는 메뉴는 클릭할 수 있도록 만들어 줘.
현재 화면의 메뉴명은 굵은 글씨 또는 강조 색상으로 표시해 줘.
실제 라우팅 구조와 연결해 클릭하면 해당 상위 화면으로 이동하도록 해 줘.
페이지를 새로고침해도 현재 위치에 맞는 경로가 표시되도록 해 줘.
메뉴 구조가 변경되더라도 Breadcrumb이 자동으로 반영되도록 구성해 줘.
모바일에서는 경로가 너무 길어지지 않도록 일부 상위 경로를 축약해 줘.
전체 디자인은 기존 사이드바 및 상단 헤더와 일관성을 유지해 줘.
이 프롬프트는 단순한 디자인 구현을 넘어 실제 메뉴 구조와 연동하도록 요구한다는 점이 중요합니다.
6. 결과가 마음에 들지 않을 때
경로가 너무 길다면
“Breadcrumb 경로가 길어질 경우 중간 경로를 생략하고 현재 위치와 주요 상위 경로만 표시해 줘. 생략된 경로는 클릭하면 전체 경로를 확인할 수 있도록 해 줘.”
현재 위치가 명확하지 않다면
“현재 페이지의 메뉴명은 진한 글씨와 강조 색상으로 표시하고, 이전 경로와 시각적으로 구분해 줘.”
상위 메뉴를 클릭해도 이동하지 않는다면
“Breadcrumb의 각 상위 메뉴를 실제 라우팅 경로와 연결해 줘. 클릭하면 해당 메뉴의 목록 화면으로 이동하도록 하고, 현재 화면의 경로도 정확하게 갱신해 줘.”
모바일에서 경로가 잘린다면
“모바일 화면에서는 Breadcrumb을 한 줄로 유지하고, 중간 경로를 축약해 표시해 줘. 현재 위치는 항상 확인할 수 있도록 해 줘.”
AI가 만든 화면이 마음에 들지 않을 때는 전체를 다시 만들기보다 문제가 있는 기능만 구체적으로 수정 요청하는 것이 효율적입니다.
7. Breadcrumb을 사용할 때 기억할 점
메뉴 구조와 일치시켜야 합니다. 실제 화면의 계층 구조와 표시되는 경로가 다르면 혼란을 줍니다.
현재 위치를 명확하게 표시하세요. 사용자가 지금 어디에 있는지 한눈에 파악할 수 있어야 합니다.
상위 경로는 실제 이동과 연결하세요. 단순한 텍스트가 아니라 탐색 기능이어야 합니다.
경로를 지나치게 길게 만들지 마세요. 메뉴 계층이 깊다면 중간 경로를 축약하는 방법을 고려합니다.
모바일에서도 사용할 수 있어야 합니다. 작은 화면에서는 현재 위치를 중심으로 간결하게 표현하는 것이 좋습니다.
특히 병원 EMR처럼 환자, 진료, 처방, 검사, 영상, 원무 등 여러 업무 영역이 연결된 시스템에서는 Breadcrumb이 매우 유용합니다. 사용자가 현재 업무 위치를 파악하고 상위 메뉴로 빠르게 이동할 수 있기 때문입니다.
오늘 기억할 한 가지
Breadcrumb Navigation은 사용자가 현재 웹사이트나 프로그램의 어느 위치에 있는지 알려주고, 이전 메뉴로 쉽게 이동하도록 돕는 탐색 기능입니다.
AI에게 요청할 때는 메뉴 경로만 보여달라고 하지 마세요. 실제 라우팅 연결, 현재 위치 강조, 모바일 축약 방식까지 함께 지정하면 더 완성도 높은 UI를 만들 수 있습니다.
다음 편에서는 게시글이나 환자 목록이 많을 때 화면을 여러 페이지로 나누어 보여주는 Pagination(페이지네이션)을 살펴보겠습니다. 비아토 스토리 목록과 병원 환자 관리 화면을 예로 들어 실전 프롬프트를 알아보겠습니다.