캐러셀 UI 디자인: 원하는 슬라이드를 쉽게 찾는 방법

캐러셀은 한정된 공간에 관련 항목을 보여주고 차례로 살펴볼 수 있게 하는 UI입니다. 무엇이 있는지 파악하고, 원하는 항목으로 이동하고, 필요한 만큼 오래 머물 수 있어야 제 역할을 합니다. 이전·다음 화살표는 그 일부일 뿐입니다. 선택된 항목, 현재 위치, 함께 읽어야 할 설명도 명확하게 유지되어야 합니다.

Pixso의 프로토타입 작업 공간에서 탐색 과정을 연결해 비교해보세요. 먼저 애니메이션을 정하고 넣을 곳을 찾기보다 방문자가 살펴보고 싶은 콘텐츠에서 출발하는 것이 좋습니다.

콘텐츠를 숨겨도 되는지 먼저 판단하기

그리드는 여러 항목을 함께 보여주지만 캐러셀에서는 방문자가 직접 움직여야 나머지 콘텐츠가 드러납니다. 각 이미지를 크게 봐야 하는 작은 갤러리라면 이런 방식이 적절할 수 있습니다. 반면 여러 선택지를 동시에 비교해야 하거나 뒤쪽 슬라이드에 중요한 정보가 들어 있다면 적합하지 않을 수 있습니다.

네 개의 인터페이스 프로젝트를 소개하는 디자이너 포트폴리오 Oak Studio를 예로 들어보겠습니다. 각 프로젝트의 시각적 구조를 알아볼 수 있도록 충분한 공간이 필요합니다. 갤러리는 선택한 프로젝트를 크게 보여주고 썸네일로 나머지 항목을 알려줄 수 있습니다. 스튜디오 소개와 디자이너에게 연락하는 경로는 바뀌는 영역 바깥에 둡니다.

이번에는 방문 목적을 바꿔보겠습니다. 고객이 상세 사례를 읽기 전에 네 프로젝트의 요약을 한꺼번에 비교하고 싶다면 그리드가 더 적합할 수 있습니다. 캐러셀이라고 해서 본래 더 세련된 것은 아닙니다. 중요한 메시지를 모두 캐러셀에 넣어도 방문자가 그 메시지를 모두 보게 된다는 보장은 없습니다.

슬라이드 한 장의 역할 정하기

콘텐츠의 단위를 일관되게 유지하세요. Oak Studio에서는 한 항목이 프로젝트 미리보기 하나, 제목, 해당 사례 링크로 이루어집니다. 첫 항목에는 프로젝트 전체를, 다음에는 고객 후기 하나를, 그다음에는 문의 양식을 넣으면서 모두 같은 종류의 선택지처럼 보여주지 마세요.

두 번째 프로젝트는 “예약 흐름”입니다. 이 프로젝트를 선택하면 미리보기, 제목, 썸네일의 선택 표시, 위치 안내가 모두 같은 항목을 가리켜야 합니다. “4개 중 2번째”라는 표시는 현재 위치를 알려주고, 제목은 무엇을 보고 있는지 설명합니다. 전환 중에도 이미지와 제목, 위치 안내가 제각각 바뀌어서는 안 됩니다.

시각 요소가 복잡한 인터페이스 이미지 위에 설명을 겹치기보다 미리보기 옆이나 아래에 짧은 설명을 배치하세요. 상세 사례 링크는 선택한 프로젝트와 함께 움직여야 합니다. 목적지가 알리지 않고 바뀌는 “더 보기” 버튼보다 “예약 흐름 사례 읽기”처럼 대상을 명시하는 편이 분명합니다.

순서대로 보기와 직접 고르기 지원하기

이전·다음 버튼은 순차 탐색을 돕습니다. 썸네일은 다른 역할을 합니다. 알아보는 프로젝트를 바로 고르거나 이미 본 프로젝트로 돌아갈 수 있게 합니다. Oak Studio는 항목 수가 적고 미리보기가 서로 구분되므로 두 방식을 함께 제공할 수 있습니다.

컨트롤은 작품의 중요한 부분을 가리지 않는 곳에 두세요. 밝은 인터페이스 버튼 위에 화살표를 얹으면 눈에 잘 띄지 않거나 작품 속 버튼으로 오해할 수 있습니다. 각 컨트롤의 위치를 일관되게 유지하고, 알아볼 수 있는 이름과 편하게 조작할 수 있는 공간을 확보합니다.

이 예제에서는 점 표시만으로 전달할 수 있는 정보가 적습니다. 점은 위치를 알려줄 수 있지만 어떤 프로젝트가 나올지는 설명하지 못합니다. 공간상 썸네일을 쓸 수 없다면 현재 제목과 탐색 버튼을 충분히 명확하게 보여주세요. 작은 점 하나가 특정 항목으로 가는 유일한 수단이 되어서는 안 됩니다.

갤러리 요소	해결하는 질문	Oak Studio의 구성
현재 제목	무엇을 보고 있나요?	선택한 미리보기 옆에 “예약 흐름”을 표시합니다.
위치 표시	전체 중 어디에 있나요?	탐색 버튼 가까이에 “4개 중 2번째”를 표시합니다.
이전·다음 버튼	차례대로 더 보려면 어떻게 하나요?	독립된 버튼을 일정한 위치에 둡니다.
썸네일	특정 프로젝트를 고르거나 다시 보려면 어떻게 하나요?	네 개의 미리보기에 모두 접근할 수 있게 하고 선택한 항목을 구분합니다.
상세 사례 링크	이 프로젝트를 자세히 보려면 어떻게 하나요?	선택한 프로젝트 이름을 링크에 쓰고 해당 상세 페이지로 연결합니다.

첫 항목과 마지막 항목에서의 동작 정하기

마지막 항목에서 다음 버튼을 누르면 멈출지, 처음으로 돌아갈지 정하세요. 두 방식 모두 이해하기 쉽게 만들 수 있지만 컨트롤과 피드백이 결정한 동작과 일치해야 합니다. 프로토타입에서는 순환하는데 실제 구현에서는 다음 버튼을 비활성화하는 식으로 달라져서는 안 됩니다.

Oak Studio에서는 양 끝에서 멈추도록 하겠습니다. 포트폴리오의 순서가 짧고 분명하며 썸네일로도 원하는 항목에 바로 갈 수 있기 때문입니다. 첫 프로젝트에서는 이전 버튼을, 마지막 프로젝트에서는 다음 버튼을 사용할 수 없다는 점을 시각적으로 표시합니다. 남은 버튼이 포인터 아래에서 갑자기 이동하지 않도록 두 버튼의 자리도 유지하세요.

순환하는 갤러리는 그 동작을 이해할 수 있는 전환이 필요합니다. 네 번째 프로젝트에서 첫 번째로 이동할 때 다섯 번째 항목이 추가된 것처럼 보여서는 안 됩니다. 디자인을 처음 보는 사람에게 전환을 테스트해보세요. 움직임은 어디로 이동했는지 이해하는 데 도움이 될 때 의미가 있습니다.

선택 상태와 키보드 포커스 구분하기

썸네일의 선택 표시는 현재 표시 중인 프로젝트를 나타냅니다. 키보드 포커스는 다음에 실행할 컨트롤을 나타냅니다. 두 상태는 동시에 서로 다른 곳을 가리킬 수 있습니다. “예약 흐름”이 계속 선택된 상태에서 다음 버튼으로 포커스를 옮길 수 있어야 합니다.

일반적인 컨트롤 사이를 Tab 키로 이동했다는 이유만으로 슬라이드를 바꾸지 마세요. 이 수동 갤러리에서는 다음 버튼을 실행했을 때 미리보기가 바뀌며, 포커스는 다음 버튼에 남아 다시 실행할 수 있습니다. 썸네일을 실행하면 해당 프로젝트가 선택되되 예상하지 못한 순간에 상세 사례로 이동해서는 안 됩니다.

W3C 캐러셀 튜토리얼(영문)은 키보드 접근, 움직임 제어, 변경 사항 전달을 다룹니다. 실제로 사용할 컨트롤 패턴은 개발자와 함께 정하세요. 구현에서는 접근 가능한 이름과 현재 항목을 이해할 수 있는 표시가 필요합니다. 썸네일 둘레에 눈에 보이는 테두리를 그리는 것만으로 그 정보가 모두 제공되지는 않습니다.

이미지의 목적을 설명하는 데 도움이 된다면 캡션이나 적절한 대체 텍스트를 사용하세요. 모든 썸네일의 접근 가능한 이름에 화면에 보이는 프로젝트 설명 전체를 반복하지는 마세요. 탐색 요소는 이동 대상을 식별할 수 있어야 하고, 큰 미리보기에는 그 작품을 이해하는 데 맞는 설명이 필요합니다.

수동 전환을 기본으로 시작하기

Oak Studio의 미리보기에는 인터페이스의 세부 요소가 담겨 있습니다. 방문자는 레이아웃을 살펴보거나 설명을 읽고, 자신의 관심사와 관련이 있는지 생각할 수 있습니다. 수동 전환을 사용하면 먼저 일시 정지 버튼을 찾지 않아도 각자 필요한 만큼 시간을 쓸 수 있습니다.

자동 전환은 되돌아가는 과정도 어렵게 만들 수 있습니다. 막 열려고 했던 프로젝트가 사라질 수 있기 때문입니다. 컨트롤을 사용하고 있는 동안 화면이 바뀌면 제공하려던 상호작용 자체를 방해할 수 있습니다. 이 포트폴리오에서는 자동 움직임이 선택에 주는 이점이 적으므로 사용하지 않습니다.

다른 제품에 자동 전환이 필요한 타당한 이유가 있다면 WAI-ARIA 캐러셀 패턴(영문)을 참고하세요. 전환 제어와 키보드 포커스 또는 포인터가 들어왔을 때 멈추는 동작을 설명합니다. 포커스가 들어온 뒤에는 사용자가 명시적으로 요청해야 자동 전환을 다시 시작합니다. 단순히 슬라이드 사이에 지연 시간을 넣는 데 그치지 말고 이러한 동작을 구체적으로 정해야 합니다.

이미지뿐 아니라 갤러리 전체를 좁은 화면에 맞추기

좁은 화면에서도 미리보기, 제목, 컨트롤의 관계를 유지하세요. 이미지 크기만 줄였는데 탐색 버튼이 캡션 아래로 멀리 밀리거나 현재 제목이 떠 있는 화살표 밑으로 줄바꿈된다면 충분한 대응이 아닙니다.

Oak Studio에서는 미리보기 아래 별도 행에 이전 버튼, 위치 표시, 다음 버튼을 둘 수 있습니다. 썸네일은 모든 항목에 접근할 수 있는 작은 띠 형태로 만들 수 있습니다. 스와이프는 추가 탐색 방식으로 제공할 수 있지만 유일한 수단이 되어서는 안 됩니다. 세 번째 프로젝트를 열기 위해 방문자가 제스처를 추측하게 만들지 마세요.

가능하면 미리보기 영역의 크기를 일정하게 확보해 이미지가 바뀌어도 컨트롤이 밀리지 않도록 합니다. 이미지를 맞추는 방식은 상세 사례에서 다루는 부분을 보존해야 합니다. 인터페이스 미리보기에서 탐색 영역을 잘라내면 방문자가 확인하려던 핵심이 사라질 수 있습니다. 자르기 규칙을 확정하기 전에 세로형과 가로형 작품을 모두 넣어 확인하세요.

Pixso에서 구체적인 갤러리 흐름 만들기

Pixso 파일에 Oak Studio의 네 프로젝트 미리보기를 배치하고 같은 갤러리 구조를 유지한 채 각 선택 상태를 만드세요. 미리보기, 썸네일, 위치 표시 모두에서 “예약 흐름”이 두 번째 항목이 되도록 맞춥니다. 검토자가 앞으로, 뒤로, 다른 프로젝트로 직접 이동할 수 있게 탐색 동작을 연결하세요.

검토자에게 “예약 흐름”을 열고 다른 프로젝트를 살펴본 다음 다시 “예약 흐름”으로 돌아오게 해보세요. 어떤 컨트롤을 고르는지, 썸네일 수를 다시 세지 않고도 현재 항목을 알 수 있는지 관찰합니다. 더 긴 프로젝트 제목을 넣고 좁은 화면에서도 반복하세요.

선택한 양 끝의 동작, 포커스 처리, 이미지 맞춤 규칙을 프레임 옆에 기록해 개발자에게 전달합니다. 이후 실제로 구현한 갤러리에서도 그 상호작용을 확인하세요. 좋은 캐러셀은 전환 효과가 가장 화려한 것이 아니라 다음 항목을 쉽게 찾고 현재 항목을 충분히 살펴볼 수 있는 것입니다.

Pixso에서 탐색하기 쉬운 갤러리 프로토타입 만들기