캐러셀 vs. 마르퀴
짧은 답변
캐러셀은 조작 장치가 있는 각각의 슬라이드를 보여줘요. 마키는 한 줄의 내용이 계속 움직이게 해요.
항목마다 시간과 제어가 필요할 때는 캐러셀을 사용하세요. 중요한 장식이 아닌 경우에는 요구될 때 멈추거나 정지할 수 있는 마퀴를 사용하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
Carousel
↗ 캐러셀
캐러셀은 한 번에 하나나 몇 개의 패널만 보여줘요. 사람들은 화살표, 점, 또는 쓸어넘기기로 움직일 수 있어요.
사진 갤러리에는 이전, 다음 버튼이 있고 몇 번째 사진인지 알려줘요. 손가락으로 넘기는 것도 되고 자동 재생도 멈출 수 있어요.
- 사용할 때
- 항목에 순서가 있지만 모두 표시할 공간이 충분하지 않을 때 사용하세요.
- 다음 경우에는 사용하지 마세요
- 중요한 선택을 캐러셀 안에 숨기거나 캐러셀이 자동으로 너무 빨리 움직이게 하지 마세요.
- 코드에서 사용된 이름
aria-roledescription="carousel"
Marquee
↗ 마퀴
계속 움직이는 내용을 담은 가로줄이야. 움직임에 예민한 사람을 위해 멈춤 버튼이나 정지된 화면을 꼭 제공해야 해.
이름을 지정하십시오 · 검증 · 빌드하기 · 배송
축제 페이지가 짧은 후원자 목록을 천천히 움직여요. 마우스를 올리거나 선택하면 멈추고, 동작을 줄이면 줄바꿈된 가만히 있는 목록으로 바뀌어요.
- 사용할 때
- 필수적이지 않은 짧고 반복되는 콘텐츠에만 사용하세요. 움직임은 분위기를 더할 수 있지만 읽기를 방해해서는 안 됩니다.
- 다음 경우에는 사용하지 마세요
- 지침, 긴 텍스트, 긴급 메시지, 혹은 사람들이 읽기 위해 따라가야 하는 글에는 절대 사용하지 마세요.
- 코드에서 사용된 이름
overflow clip + duplicated track + prefers-reduced-motion
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 캐러셀Carousel | 항목에 순서가 있지만 모두 표시할 공간이 충분하지 않을 때 사용하세요. | 중요한 선택을 캐러셀 안에 숨기거나 캐러셀이 자동으로 너무 빨리 움직이게 하지 마세요. | aria-roledescription="carousel" |
| 마퀴Marquee | 필수적이지 않은 짧고 반복되는 콘텐츠에만 사용하세요. 움직임은 분위기를 더할 수 있지만 읽기를 방해해서는 안 됩니다. | 지침, 긴 텍스트, 긴급 메시지, 혹은 사람들이 읽기 위해 따라가야 하는 글에는 절대 사용하지 마세요. | overflow clip + duplicated track + prefers-reduced-motion |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
04
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 캐러셀 (Carousel)、마퀴 (Marquee)에서 선택하세요. 이 규칙 사용: 캐러셀은 조작 장치가 있는 각각의 슬라이드를 보여줘요. 마키는 한 줄의 내용이 계속 움직이게 해요. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.