관리자 프로그램이나 병원 업무 시스템을 사용하다 보면 여러 메뉴 사이를 자주 이동하게 됩니다. 환자 관리 화면에서 검사 결과를 확인하고, 다시 예약 관리로 이동한 뒤, 통계 화면을 열어야 할 수도 있습니다.
이때 메뉴가 화면 위쪽에 길게 나열되어 있거나 페이지마다 위치가 달라진다면 원하는 기능을 찾는 데 시간이 걸립니다.
이런 문제를 해결하는 대표적인 UI 구조가 **Sidebar Layout(사이드바 레이아웃)**입니다. 화면의 왼쪽이나 오른쪽에 메뉴 영역을 배치하고, 그 옆에 실제 업무 콘텐츠를 표시하는 방식입니다.
1. Sidebar Layout은 어떤 모습일까?
가장 흔한 형태는 화면 왼쪽에 세로 메뉴를 배치하는 것입니다.
예를 들어 병원 업무 프로그램이라면 다음과 같이 구성할 수 있습니다.
왼쪽 메뉴: 대시보드, 환자 관리, 간호 업무, 검사 결과, 예약 관리, 통계 분석, 설정
상단 영역: 현재 메뉴 제목, 검색창, 알림, 사용자 정보
중앙 영역: 선택한 메뉴의 실제 업무 화면
사용자가 왼쪽에서 ‘환자 관리’를 선택하면 중앙에 환자 목록이 표시되고, ‘검사 결과’를 선택하면 검사 결과 화면으로 전환되는 구조입니다.
사이드바의 장점은 메뉴가 일관된 위치에 있어 사용자가 화면마다 길을 다시 찾지 않아도 된다는 것입니다. 특히 기능이 많은 관리자 시스템이나 병원 업무 프로그램에서 유용합니다.
시각적 예시를 만든다면 왼쪽에는 아이콘과 메뉴명이 정렬된 세로 메뉴를 두고, 선택된 메뉴는 배경색이나 강조 표시로 구분합니다. 오른쪽에는 넓은 업무 영역을 확보해 표, 카드, 검색 조건 등을 배치하는 모습을 보여주면 좋습니다.
2. 고정형 사이드바와 접이식 사이드바
사이드바는 항상 펼쳐진 상태로 사용할 수도 있고, 필요할 때 접거나 펼치도록 만들 수도 있습니다.
고정형 사이드바는 메뉴가 계속 표시되어 있어 메뉴 이름을 쉽게 확인할 수 있습니다. 메뉴가 많거나 사용자가 여러 기능을 자주 이동하는 업무용 프로그램에 적합합니다.
접이식 사이드바는 메뉴 영역을 좁히거나 숨겨 중앙 콘텐츠 영역을 넓힐 수 있습니다. 화면 공간이 제한된 태블릿이나 작은 노트북에서 유용합니다.
다만 메뉴를 아이콘만 남긴 상태로 접으면 의미를 알아보기 어려울 수 있습니다. 이때는 마우스를 올렸을 때 메뉴명을 표시하는 Tooltip을 제공하거나, 메뉴를 다시 펼칠 수 있는 버튼을 명확하게 배치하는 것이 좋습니다.
3. AI에게 어떻게 요청해야 할까?
막연한 요청: “관리자 화면을 전문적으로 만들어 줘.”
이 요청만으로는 메뉴 위치, 메뉴 개수, 선택 상태, 모바일에서의 동작을 구체적으로 정하기 어렵습니다.
구체적인 요청: “관리자 화면을 Sidebar Layout으로 구성해 줘. 왼쪽에는 주요 메뉴를 세로로 배치하고, 오른쪽에는 선택한 메뉴의 콘텐츠를 표시해 줘. 현재 선택된 메뉴는 배경색으로 구분하고, 화면 상단에는 페이지 제목과 검색창을 배치해 줘. 작은 화면에서는 사이드바를 접을 수 있도록 만들어 줘.”
이처럼 화면 구조와 메뉴 동작을 함께 설명하면 AI가 의도에 맞는 결과를 만들 가능성이 높아집니다.
4. 바로 복사해서 사용하는 실전 프롬프트
병원 업무 관리 프로그램의 기본 화면을 만들어 줘.
전체 화면은 Sidebar Layout으로 구성해 줘.
왼쪽 사이드바에 대시보드, 환자 관리, 간호 업무, 검사 결과, 예약 관리, 통계 분석, 설정 메뉴를 배치해 줘.
각 메뉴에는 알아보기 쉬운 아이콘과 메뉴명을 표시해 줘.
현재 선택된 메뉴는 배경색과 글자 굵기로 명확하게 구분해 줘.
화면 상단에는 현재 페이지 제목, 검색창, 알림 버튼을 배치해 줘.
오른쪽 메인 영역에는 선택한 메뉴의 콘텐츠가 표시되도록 구성해 줘.
사이드바는 접고 펼칠 수 있도록 하고, 접힌 상태에서도 메뉴를 구분할 수 있도록 Tooltip을 제공해 줘.
PC에서는 사이드바를 기본적으로 표시하고, 태블릿과 모바일에서는 필요할 때 열 수 있는 메뉴 버튼을 제공해 줘.
메뉴를 선택했을 때 현재 위치가 명확하게 표시되도록 해 줘.
글자 가독성과 업무 효율을 우선하고 불필요한 애니메이션은 사용하지 말아 줘.
이 프롬프트는 메뉴 배치뿐 아니라 선택 상태, 접기·펼치기, 화면 크기에 따른 동작까지 지정합니다.
5. 결과가 마음에 들지 않을 때
사이드바가 너무 넓다면
“사이드바의 너비를 줄이고 메뉴명은 읽기 편한 크기로 유지해 줘. 접힌 상태에서는 아이콘을 표시하고, 마우스를 올리면 메뉴명이 나타나게 해 줘.”
현재 선택된 메뉴를 구분하기 어렵다면
“선택된 메뉴의 배경색과 글자 굵기를 조정해 현재 위치를 쉽게 알아볼 수 있게 해 줘. 단순히 아이콘 색만 바꾸지 말고 메뉴 영역 전체에서 선택 상태가 드러나게 해 줘.”
메인 콘텐츠 영역이 좁다면
“사이드바의 너비를 최적화하고 메인 콘텐츠가 남은 공간을 충분히 활용하도록 해 줘. 표와 카드가 불필요하게 좁아지지 않도록 해 줘.”
모바일에서 메뉴가 화면을 가린다면
“모바일에서는 메뉴 버튼을 눌렀을 때 사이드바가 열리도록 해 줘. 메뉴를 선택하면 사이드바가 닫히고 선택한 화면이 표시되도록 해 줘. 메뉴가 열려 있을 때는 닫기 동작도 명확하게 제공해 줘.”
전체 화면을 다시 생성하기보다 문제를 일으키는 요소만 지정해 수정하는 것이 효율적입니다.
6. Sidebar Layout을 사용할 때 기억할 점
메뉴를 논리적으로 묶으세요. 관련 기능을 그룹으로 정리하면 메뉴가 많아도 찾기 쉽습니다.
현재 위치를 명확하게 표시하세요. 선택된 메뉴와 페이지 제목이 일치해야 사용자가 길을 잃지 않습니다.
메뉴명을 이해하기 쉽게 작성하세요. 아이콘만으로 기능을 추측하게 하지 말고 의미가 분명한 이름을 사용하세요.
작은 화면에서의 동작을 지정하세요. PC의 사이드바를 모바일 화면에 그대로 적용하면 콘텐츠 공간이 부족해질 수 있습니다.
키보드와 접근성도 고려하세요. 메뉴를 키보드로 이동하고 선택할 수 있어야 하며, 열기·닫기 버튼에도 명확한 이름이 필요합니다.
병원 업무 프로그램에서는 메뉴의 일관성이 특히 중요합니다. 사용자가 환자 관리, 간호 업무, 검사 결과 화면을 이동하더라도 메뉴의 위치와 동작이 일관되면 업무 흐름을 익히기 쉽습니다.
오늘 기억할 한 가지
Sidebar Layout은 메뉴를 일관된 위치에 배치해 사용자가 여러 기능 사이를 빠르고 편리하게 이동하도록 만드는 화면 구조입니다.
AI에게 사이드바를 만들어 달라고 요청할 때는 메뉴 이름만 나열하지 마세요. 메뉴의 그룹, 현재 선택 상태, 접기·펼치기 동작, 모바일에서의 표시 방식까지 설명하면 훨씬 구체적인 결과를 얻을 수 있습니다.
다음 편에서는 페이지를 이동하더라도 화면 위쪽에 메뉴가 계속 남아 있도록 하는 **Sticky Header(스티키 헤더)**를 살펴보겠습니다. 긴 페이지와 병원 업무 화면에서 어떤 상황에 유용한지 실전 프롬프트로 알아보겠습니다.