이미지 비교 슬라이더 시스템은(는) 무엇을 하나요?
목적
이미지 비교 슬라이더 시스템은 상호작용형 "Before and After" 시각 비교 컴포넌트를 구축하기 위한 체계적인 설계 및 공간 방법론을 제공합니다. 이 시스템은 두 가지 이미지 상태(예: 사진 복원, 색 보정, 디자인 목업, 환경 변화, 의료 결과)를 오버레이하여 사용자가 동적으로 슬라이드하고 세부 사항을 드러내며 대조할 수 있도록 하는 설계 과제를 해결합니다. 시각적 혼란을 방지하고, 레이아웃 안정성을 유지하며, 모바일 터치 타겟을 최적화하고, 구조화된 키보드 상호작용 및 스크린 리더 안내를 통해 WCAG AA 접근성 표준을 충족합니다.
사용 사례
- 창작 및 편집 소프트웨어 쇼케이스: 편집되지 않은 RAW 파일과 최종 편집 사진, 색 그레이딩 프리셋, 또는 리터칭 작업 비교.
- 건축 및 디자인 포트폴리오: 건설 전후 단계, 리모델링 프로젝트, 인테리어 스타일링, 또는 웹사이트 디자인 시스템 개편 전시.
- 전자상거래 및 제품 데모: 다양한 조건하의 제품 (예: 방수 원단 테스트, 화면 보호기, 세척 제품, 또는 마모 비교) 제시.
- 환경 및 과학 시각화: 빙하 후퇴, 도시 확장, 또는 재조림 프로젝트의 위성 매핑 등 시간 경과에 따른 변화 제시.
- 화장품 및 의료 케이스 스터디: 동일한 조명 및 공간 조건에서의 고해상도 치료 결과 제시.
사용하지 말아야 할 경우
- 다중 항목 발견: 2~5개의 개별 제품의 개별 속성을 비교해야 하는 경우
comparison-matrix-system을 사용하세요. - 일반 이미지 그리드: 표준 이미지 표시, 미디어 캐러셀 또는 갤러리의 경우
imagery-and-media-system또는carousel-and-slider-system을 사용하세요. - 텍스트 중심 비교: 주요 콘텐츠가 텍스트 또는 표 데이터(예: 소프트웨어 버전 기능)인 경우
data-table-ui-system또는<dl>목록 요소를 사용하세요. - 저대비 미묘한 변화: 두 이미지 간의 시각적 차이가 미미하여 쉽게 인지할 수 없는 경우, 선명한 캡션이 있는 나란히 또는 쌓인 레이아웃이 더 유용합니다.
입력
- 듀얼 코어 에셋: 정확히 동일한 공간적 관점, 프레임 및 해상도로 촬영된 두 개의 고품질 이미지("Before" 및 "After").
- 컴포넌트 치수: 종횡비(예: 16:9, 4:3, 1:1) 및 뷰포트 경계(
imagery-and-media-system에서). - 타이포그래피 및 브랜드 토큰: 레이블, 핸들 및 안내 텍스트의 타이포그래피 크기 및 색상(
fluid-typography-system에서). - 터치 및 모션 기본 설정: 터치 제스처 및 시스템 수준 모션 감소 상태에 대한 사용자 선택.
출력
- 슬라이더 해부도 청사진: 컨테이너, 배경 트랙, clip-path 오버레이, 핸들 바, 잡기 썸 및 상태 레이블을 지정하는 레이아웃 정의.
- 키보드 제어 사양:
ArrowLeft,ArrowRight,Home,End와 같은 키를 상대적 clip-path 백분율에 매핑하는 접근 가능한 좌표 추적. - 모바일 및 터치 동작 가이드: 터치 대상 치수, 제스처 드래그 임계값 및 썸 간격에 대한 정밀 사양.
- 레이아웃 보존 규칙: 레이아웃 이동(CLS)을 방지하기 위한 구조적 규칙(예: 종횡비 보존 및 절대 크기 조정).
워크플로우
1. 공간 트랙 및 컨테이너 설정
종횡비와 구조적 정렬 유지:
- 종횡비 고정: 컨테이너는 명시적인 종횡비(예:
aspect-ratio: 16 / 9또는aspect-ratio: 1 / 1)를 가져야 레이아웃 공간을 확보하고 누적 레이아웃 이동(CLS)을 방지합니다. - 절대 위치 오버레이: 컨테이너를
position: relative; overflow: hidden;으로 설정합니다. "After" 이미지를 표준 배경 이미지 블록(width: 100%; height: 100%; object-fit: cover;)으로 배치합니다. - 클리핑 오버레이 블록: "Before" 이미지를 절대 위치 오버레이 래퍼(
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;) 내에 배치합니다. - 이미지 동기화: 배경 이미지와 오버레이 이미지가 동일한 치수, 크기 조정 속성(
object-fit: cover) 및 정렬(object-position: center)을 가지도록 하여 정확히 겹쳐지도록 합니다.
2. 공개 Clip-Path 구현
시각적 왜곡을 방지하기 위해 이중 이미지 크기 조정 대신 최신 CSS 클리핑 사용:
- Clip-Path 값: 오버레이 래퍼에
clip-path: inset(0 calc(100% - var(--exposure-ratio)) 0 0);을 적용합니다. 여기서--exposure-ratio는 슬라이더 위치를 나타내는 CSS 사용자 정의 속성(예:50%)입니다. - 동적 변수 바인딩: 마우스, 터치 또는 키보드 입력을 통해
--exposure-ratio를 동적으로 업데이트합니다. - 이미지 왜곡 방지: 슬라이딩 중에 이미지 자체의 크기를 조정하지 말고 래퍼 컨테이너만 클리핑합니다. 이미지는 서로에 대해 고정된 상태를 유지해야 합니다.
3. 핸들 및 터치 썸 디자인
핸들은 상호작용을 위한 주요 시각적 어포던스 역할을 합니다:
- 수직 구분선:
left: var(--exposure-ratio);에 절대 위치로 배치된 수직 막대의 스타일을 지정합니다. 다양한 이미지 배경에서 두드러지도록 고대비 얇은 선(예:2px~4px) 너비에 그림자를 설정합니다. - 잡기 썸 타겟: 수직선 중앙에 원형 또는 둥근 잡기 썸을 배치합니다.
- 시각적 표시기: 잡기 썸 내부에 양방향 수평 화살표(← →) 또는 대비되는 질감을 포함하여 수평 드래그 기능을 알립니다.
- 터치 타겟 크기 (WCAG 2.2 SC 2.5.8): 상호작용 잡기 썸은 시각적 크기와 관계없이 모바일/터치 인터페이스에서 최소
44px x 44px의 물리적 터치 타겟을 가져야 합니다. 투명 의사 요소(::after) 또는 패딩을 사용하여 이를 달성합니다.
4. 접근 가능한 텍스트 레이블 구성
사용자 컨텍스트 및 방향 유지:
- 텍스트 레이블 배치: 컨테이너의 반대쪽 모서리에 레이블 (예: "BEFORE" 및 "AFTER")을 배치합니다 (예: "Before"는 왼쪽 상단, "After"는 오른쪽 상단).
- 고대비 디자인: 흰색 텍스트 레이블 뒤에 반투명 어두운 배경(스크림)을 사용하여 이미지 콘텐츠에 관계없이 최소 대비 비율
4.5:1(WCAG AA)을 보장합니다. - 상호작용 상태 피드백: 슬라이더가 활성화되면 텍스트 레이블을 선택적으로 페이드 아웃하여 시각적 방해를 최소화하고 상호작용이 끝나면 복원합니다.
5. 키보드 탐색 및 ARIA 통합 정의
인터페이스는 키보드만으로 완전히 탐색 가능해야 합니다:
- 범위 슬라이더 백킹: 시각적 비교를 기본적이지만 시각적으로 숨겨진
<input type="range">요소로 뒷받침합니다. 이는 기본 범위 처리, 포커스 상태 및 aria 역할을 제공합니다. - ARIA 속성 연결:
aria-label(예: "Before and after image comparison"),aria-valuemin="0",aria-valuemax="100"및 동적aria-valuenow(백분율 나타냄)를 할당합니다. - 키보드 이벤트 매핑:
ArrowLeft/ArrowDown: 위치를 1% (또는 빠른 이동을 위해 5%) 감소.ArrowRight/ArrowUp: 위치를 1% (또는 5%) 증가.PageUp/PageDown: 슬라이더 위치를 10% 단위로 이동.Home: 즉시 0%로 이동 ("After" 이미지 완전 공개).End: 즉시 100%로 이동 ("Before" 이미지 완전 공개).
- 포커스 표시기: 슬라이더에 포커스가 있을 때 잡기 썸 주위에 고대비, 독특한 포커스 링을 표시합니다. 포커스 스타일을 숨기지 마십시오.
결정 규칙
슬라이더 이동 모드 선택
| 상호작용 모드 | 사용 사례 기준 | 구현 방법 |
|---|---|---|
| 활성 클릭/탭 및 드래그 (기본값) | 고정밀 비교; 상세 분석에 가장 적합. | 마우스/터치가 썸을 누르고 있을 때만 pointermove에서 --exposure-ratio 업데이트. |
| 호버 따르기 | 캐주얼/탐색적 비교; 낮은 마찰의 랜딩 페이지 기능. | 커서가 컨테이너의 어떤 부분 위로 이동할 때 직접 --exposure-ratio 업데이트. 유일한 방법으로는 부적합; 모바일에서는 클릭/드래그 폴백 필요. |
| 이중 이미지 토글 (아무 곳이나 클릭) | 간단하고 빠른 비교; 뚜렷한 시각적 변화가 있는 작은 화면에 가장 적합. | 컨테이너의 아무 곳이나 클릭하면 부드러운 0.3s 이징으로 0%와 100% 공개 사이를 전환. |
제약 조건
- 접근성 (WCAG AA): 텍스트 레이블은
4.5:1대비 비율을 충족해야 합니다. 상호작용 컨트롤러는 전체 키보드 포커스, 가시적 표시기(:focus-visible) 및 최소44px x 44px의 터치 타겟을 지원해야 합니다. - 누적 레이아웃 이동 (CLS): 두 이미지와 해당 컨테이너는 정확히 동일한 미리 정의된 종횡비를 공유해야 합니다. 이미지 로딩 중에 컨테이너가
0px높이로 축소되지 않도록 합니다. CSSaspect-ratio또는 인라인 패딩 백분율을 사용합니다. - 반응형 유연성: 컴포넌트는 모바일 뷰포트에 맞게 동적으로 축소되어야 합니다.
< 480px화면에서는 레이블을 비례적으로 축소하거나 이미지 바로 아래로 이동하여 다른 핵심 시각적 기능과 겹치지 않도록 합니다. - 모션 감소: 사용자가 모션 감소를 선호하는 경우(
@media (prefers-reduced-motion: reduce)), 키보드 탐색 사용 시 부드러운 전환을 비활성화하고 명시적 클릭/탭 동작을 위해 호버 따르기 트리거를 피합니다.
일반적인 실패 패턴
- "이미지 찌그러짐" 함정: 드래그 상호작용 중에 이미지를 클리핑하지 않고 크기를 조정하거나 늘려 변형된 시각적 결과를 초래.
- "제로 CLS 붕괴": 컨테이너 치수를 설정하지 않아 이미지가 다운로드될 때 레이아웃이 급격히 점프.
- 키보드 배제: 마우스로만 드래그할 수 있는 슬라이더를 만들어 키보드, 스크린 리더 및 일부 보조 스위치 사용자에게 완전히 사용 불가능하게 만듦.
- 밝은 이미지에서 "보이지 않는 썸": 핸들과 썸에 그림자, 테두리 또는 고대비 오버레이를 추가하지 않아 밝거나 복잡한 이미지에 완전히 혼합.
- 터치 타겟 함정: 잡기 썸을 터치 패딩 없이 아주 작게(예:
10px너비) 만들어 모바일 기기에서 심각한 사용자 불편을 초래.
검증 기준
- 정확한 오버레이 정렬: "Before" 및 "After" 이미지가 슬라이딩 중에 수평 오프셋, 찌그러짐 또는 왜곡 없이 완벽하게 정렬됩니다.
- 누적 레이아웃 이동 제로: 컨테이너는 이미지가 로드되기 전에 일관된 종횡비 또는 명시적 치수를 사용하여 레이아웃 공간을 예약합니다.
- 모바일 터치 안전: 잡기 핸들/썸 터치 타겟은 모바일/터치 뷰포트에서 최소
44px x 44px입니다. - 전체 키보드 탐색 가능: 사용자는 표준 키보드 키(
화살표,Home,End)를 사용하여 슬라이더 위치를 탐색, 포커스 및 조정할 수 있습니다. - ARIA 표준 준수: 상호작용 컨트롤러는 의미론적 요소(
<input type="range">등) 또는 올바른 ARIA 역할(role="slider",aria-valuenow,aria-label)을 사용합니다. - 대비 AA 준수: 텍스트 레이블("Before" 및 "After") 및 포커스 표시기는 인접 표면에 대해 4.5:1 WCAG 대비 비율을 충족합니다.
- 모션 민감성: 상호작용 동작은 모션 감소(
prefers-reduced-motion: reduce)에 대한 사용자 기본 설정을 존중합니다.