Carousel(캐러셀) — 여러 정보를 한 화면에서 넘겨 보는 UI
웹사이트나 앱을 사용하다 보면 좌우 화살표를 누르거나 손가락으로 밀어서 여러 장의 카드와 이미지를 차례로 살펴보는 화면을 자주 만납니다. 첫 화면에는 한두 개의 콘텐츠만 보이지만, 옆으로 넘기면 다음 콘텐츠가 나타나는 방식입니다. 이 UI를 Carousel(캐러셀)이라고 합니다.
캐러셀은 제한된 화면 공간에 여러 콘텐츠를 담을 때 유용합니다. 다만 사용자가 내용을 놓치거나 중요한 정보가 숨겨질 수 있으므로, 무엇을 보여 주고 어떤 순서로 넘길지 명확하게 설계해야 합니다.
1. Carousel이란?
캐러셀은 여러 개의 콘텐츠를 하나의 영역 안에 배치하고, 좌우 이동 또는 자동 재생으로 순서대로 보여 주는 UI입니다.
대표적인 구성 요소는 다음과 같습니다.
슬라이드(Slide): 한 번에 표시되는 개별 콘텐츠
이전·다음 버튼: 앞이나 뒤의 콘텐츠로 이동하는 조작 버튼
페이지 표시기(Pagination Indicator): 현재 몇 번째 콘텐츠인지 점이나 숫자로 표시
자동 재생(Autoplay): 일정 시간마다 다음 슬라이드로 자동 이동하는 기능
일시정지(Pause): 자동 재생을 멈추는 기능
예를 들어 병원 홈페이지에서는 건강검진 안내, 진료과 소개, 의료진 정보, 공지사항을 캐러셀로 보여 줄 수 있습니다. 병원 내부 업무 시스템에서는 오늘의 주요 공지나 교육 자료를 카드 형태로 넘겨 보도록 구성할 수 있습니다.
캐러셀과 일반 카드 목록의 차이
일반 카드 목록은 여러 항목을 한 화면에 펼쳐 놓고 비교하거나 훑어보는 데 적합합니다. 반면 캐러셀은 한정된 영역 안에서 콘텐츠를 순차적으로 보여 주는 데 적합합니다.
따라서 항목을 서로 비교해야 하거나 모든 정보가 한눈에 보여야 한다면 일반 목록이나 그리드가 더 나을 수 있습니다. 캐러셀은 공간 절약과 콘텐츠 강조가 중요한 경우에 선택하는 편이 좋습니다.
2. 화면에서는 어떻게 보일까?
병원 홈페이지의 건강검진 안내 영역을 예로 들어보겠습니다.
화면 중앙에는 현재 선택된 검진 프로그램 카드가 크게 표시됩니다. 양쪽에는 이전 카드와 다음 카드의 일부가 살짝 보이고, 아래에는 현재 위치를 나타내는 점 표시와 좌우 이동 버튼이 배치됩니다.
시각적으로는 다음과 같은 구조를 생각하면 됩니다.
[이전 카드 일부] [현재 카드: 종합건강검진] [다음 카드 일부]
아래에는 다음 요소를 배치합니다.
왼쪽 화살표: 이전 검진 프로그램
오른쪽 화살표: 다음 검진 프로그램
페이지 표시기: 전체 4개 중 현재 1번째
카드 내부: 대표 이미지, 프로그램명, 간단한 설명, 상세 보기 버튼
시각적 예시 방향
캐러셀을 디자인할 때는 다음 세 가지 형태를 구분해 볼 수 있습니다.
단일 슬라이드형: 한 번에 콘텐츠 하나를 크게 보여 주는 방식입니다. 메인 배너나 핵심 메시지를 강조할 때 적합합니다.
다중 카드형: 한 화면에 카드 2~4개를 보여 주고 좌우로 이동하는 방식입니다. 의료진 소개, 진료과 안내, 교육 콘텐츠 목록 등에 적합합니다.
센터 강조형: 가운데 카드는 크게, 양옆 카드는 작거나 일부만 보이게 하는 방식입니다. 현재 콘텐츠와 다음 콘텐츠의 관계를 직관적으로 보여 줄 수 있습니다.
모바일에서는 화면 너비에 맞춰 한 장씩 표시하거나 다음 카드의 일부를 노출해 넘길 수 있다는 점을 알려 주는 것이 좋습니다.
3. 실전 예제: 병원 관리자 대시보드의 공지 캐러셀
병원 관리자 대시보드에 다음과 같은 공지가 있다고 가정하겠습니다.
1번: 감염관리 교육 일정
2번: 환자안전 주간 점검 안내
3번: 의료기관 인증 준비 공지
4번: 직원 필수교육 이수 안내
이 네 가지 공지를 대시보드 상단의 캐러셀로 구성하면, 제한된 공간에서도 주요 소식을 순서대로 확인할 수 있습니다.
다만 공지사항처럼 놓치면 안 되는 정보는 자동으로 빠르게 넘어가게 해서는 안 됩니다. 사용자가 직접 이동할 수 있도록 하고, 모든 공지를 별도의 전체 목록에서도 확인할 수 있게 만드는 것이 안전합니다.
4. 복사해서 사용하는 실전 프롬프트
아래 프롬프트를 ChatGPT 등 AI 도구나 바이브코딩 환경에 입력해 보세요.
병원 관리자용 웹 대시보드에 공지사항 Carousel UI를 구현해 줘.
목적
병원 운영과 관련된 주요 공지를 대시보드 상단에서 확인할 수 있도록 한다.
화면 공간을 효율적으로 사용하되, 공지 내용을 놓치지 않도록 한다.
데이터
감염관리 교육 일정
환자안전 주간 점검 안내
의료기관 인증 준비 공지
직원 필수교육 이수 안내
화면 구성
데스크톱에서는 한 번에 카드 2~3개가 보이는 다중 카드형으로 구성한다.
모바일에서는 한 번에 카드 1개가 보이도록 반응형으로 조정한다.
각 카드에는 공지 제목, 등록일, 요약, 중요도 배지, 상세 보기 버튼을 넣는다.
이전·다음 버튼과 현재 위치를 표시하는 페이지 인디케이터를 제공한다.
동작 조건
이전·다음 버튼을 누르면 해당 방향으로 이동한다.
페이지 인디케이터를 누르면 선택한 슬라이드로 이동한다.
키보드 방향키와 모바일 터치 스와이프를 지원한다.
자동 재생은 기본적으로 사용하지 않는다.
공지가 1개 이하라면 이동 버튼과 페이지 인디케이터를 숨긴다.
공지 전체 목록으로 이동할 수 있는 링크를 제공한다.
품질 조건
버튼에는 명확한 접근성 레이블을 제공한다.
키보드 포커스가 보이도록 한다.
움직임을 줄이기 위한 사용자 운영체제 설정을 존중한다.
실제 공지 데이터와 UI를 분리해 나중에 API로 연결할 수 있도록 구성한다.
임의의 가짜 기능을 만들지 말고, 동작 가능한 컴포넌트로 구현한다.
먼저 화면 구조와 컴포넌트 구성을 설명한 뒤 구현해 줘.
5. 결과를 개선하는 5가지 팁
AI가 처음 만든 캐러셀은 겉보기에는 그럴듯해도 실제 업무 환경에서는 불편할 수 있습니다. 다음 항목을 추가로 점검해 보세요.
① 자동 재생은 신중하게 사용하기
홍보 배너처럼 시각적 콘텐츠를 보여 주는 경우에는 자동 재생이 가능하지만, 업무 공지나 의료 관련 정보에는 사용자가 직접 이동하는 방식이 더 적절할 수 있습니다.
② 현재 위치를 분명하게 표시하기
사용자가 전체 콘텐츠 중 어디를 보고 있는지 알 수 있어야 합니다. 점 표시만으로 구분하기 어렵다면 '2 / 5'처럼 숫자를 함께 표시합니다.
③ 모바일 조작을 고려하기
모바일에서는 마우스 클릭보다 손가락 스와이프가 자연스럽습니다. 단, 스와이프만 제공하지 말고 버튼 조작도 함께 지원합니다.
④ 접근성을 확보하기
이전·다음 버튼에 의미 있는 이름을 부여하고, 키보드로도 이동할 수 있도록 합니다. 자동 재생을 제공한다면 멈춤 기능도 마련해야 합니다.
⑤ 중요한 정보는 캐러셀 밖에서도 제공하기
공지, 안전 안내, 필수 업무처럼 반드시 확인해야 하는 정보는 캐러셀 안에만 두지 않습니다. 전체 목록이나 별도의 알림 영역에서도 접근할 수 있어야 합니다.
6. 바이브코딩 실습 체크리스트
캐러셀을 구현했다면 다음 항목을 직접 확인해 보세요.
☐ 이전·다음 버튼으로 슬라이드가 정상 이동하는가?
☐ 페이지 표시기가 현재 슬라이드와 일치하는가?
☐ 마지막 슬라이드 다음에 처음으로 이동하는 동작이 명확한가?
☐ 모바일에서 터치 스와이프가 자연스럽게 작동하는가?
☐ 키보드만으로도 주요 기능을 사용할 수 있는가?
☐ 자동 재생이 있다면 멈출 수 있는가?
☐ 작은 화면에서도 카드와 텍스트가 잘리지 않는가?
☐ 캐러셀에 담긴 모든 정보에 별도 목록 등으로 접근할 수 있는가?
7. 핵심 정리
Carousel은 여러 콘텐츠를 한정된 공간에서 순서대로 보여 주는 UI입니다. 병원 홈페이지의 홍보 영역, 의료진 소개, 교육 콘텐츠, 관리자 대시보드의 주요 공지 등에 활용할 수 있습니다.
그러나 캐러셀을 사용한다고 해서 정보가 더 잘 전달되는 것은 아닙니다. 사용자가 직접 조작할 수 있는지, 현재 위치를 이해할 수 있는지, 중요한 내용을 놓치지 않는지를 함께 고려해야 합니다.
좋은 캐러셀은 콘텐츠를 숨기는 장치가 아니라, 많은 정보를 부담 없이 탐색하도록 돕는 장치입니다.
다음 편 예고 · 18편 Skeleton Loading
다음 18편에서는 Skeleton Loading(스켈레톤 로딩)을 살펴봅니다.
웹페이지나 앱에서 데이터가 아직 도착하지 않았을 때 회색 박스나 선 형태로 콘텐츠의 윤곽을 먼저 보여 주는 UI입니다. 단순히 로딩 표시를 띄우는 것과 무엇이 다른지, 병원 대시보드와 환자 조회 화면에서는 어떻게 활용할 수 있는지 알아보겠습니다.