본문으로 건너뛰기

DUOLABS PAGE페이지 패턴

전체 패턴273 페이지 레시피20 패턴 추가 이력 패턴 비교함

개요 실시간 협업 현황판 승인 파이프라인 작업 의존 관계도 팀 업무 배분표 회의 안건 타이머 업무 인계 체크리스트 피드백 분류함 비동기 업무 공유판 스토리보드 스트립 편집기 세계 일조 시간 계획표 서비스 큐 비주얼라이저 공간 주석 스레드 효과·노력 우선순위표 가용 시간 캘린더 마이크로 칸반 보드 챕터 리딩 레일 스크롤 진행 바 서비스 준비 현황 패널 도입 여정 카드 도입 프로세스 라인 회사 소개와 팀 FAQ 프로세스 스텝 복사 버튼 팀 카드

개요 캘린더 히트맵 순위 변동 범프 차트 다중 신호 호라이즌 차트 필터형 비스웜 분포 코드 관계 탐색기 레이어형 스트림그래프 변화폭 슬로프 비교 시계열 범위 브러시 불확실성 밴드 차트 코호트 리텐션 탐색기 인터랙티브 생키 플로우 채널별 스몰 멀티플 추이 응답 균형 발산형 차트 목표 대비 불릿 차트 시장 구성 마리메코 다기준 평행 좌표 비교 상자 수염 분포 탐색기 공정 안정성 관리도 드릴다운 트리맵 기간별 지표 추이 카드 지역별 지표 버블 지도

개요 제스처 패턴 잠금 접근 가능한 서명·동의 패드 프로필 설정 패널 로그인 보안 설정 활성 세션 관리자 연결 계정 관리자 역할 권한 매트릭스 계정 위험 작업 영역 멀티스텝 온보딩 폼 조건부 스마트 폼 태그 토큰 입력 검색형 콤보박스 금액·통화 입력 OTP 인증 코드 주소 자동완성 폼 스키마 폼 빌더 비밀번호 강도 입력 파일 드롭존 무료 업무 진단 신청 폼 상담 안내 분할 폼 뉴스레터 구독 연락처 섹션 엘라스틱 슬라이더 로그인 화면 설정 항목 목록 기간 선택 필드

개요 버전 비교 화면 의사결정 기록 적응형 브레드크럼 시대 줌 타임라인 내비게이터 페이지 미니맵 내비게이션 방사형 필터 탐색기 변경 이력 탐색기 분할 비교 검색 연관 주제 탐색기 비선형 여정 스위처 공간 북마크 캔버스 키네틱 그리드 메뉴 노선 경로 탐색기 검색 결과 페이지 패싯 필터 패널 활성 필터 칩 바 정렬·보기 전환 툴바 저장된 검색 조건 고급 검색 쿼리 빌더 검색 결과 없음 상태 오디오 파형 탐색기 세그먼트 보기 전환 타임라인 탭 섹션 연동 그리드 레이디얼 액션 메뉴 관리 콘솔 사이드바 메뉴 범위 지정 검색창

개요 상품 옵션 구성 미니 장바구니 주문 요약 패널 단계형 결제 가격 플랜 비교표

개요 다중 색상 그라디언트 편집기 색상 팔레트 편집기 오디오 파형 트리머 레이어 편집기 포스터 편집기 자막 타임라인 편집기 반응형 아트보드 반응형 이미지 초점 편집기

개요 서비스 상태 요약 분기 시나리오 탐색기 활동 데이터 테이블 카운트업 통계 FAQ 아코디언 마퀴 스트립 고객 후기 기능 그리드 출시 상태 안내 바 파트너 로고 띠 기술 역량 근거 섹션 프로젝트 쇼케이스 인덱스 핵심 원칙과 FAQ 벤토 그리드 스티키 스택 스크롤리텔링 가로 스크롤 섹션 스플릿 히어로 사이트 헤더 사이트 푸터 CTA 밴드 공지 바 로고 클라우드 카운트다운 블로그·리소스 카드 기능 쇼케이스 하단 고정 CTA 바 사례 카드 아코디언 갤러리 별자리 관계 맵 연동 서비스 선택 카드 기능별 코드 미리보기 배포 소스 선택기

개요 로테이팅 타이핑 파티클 인트로 타이포 커튼 인트로 스크램블 텍스트 샤인 텍스트 스플릿 플랩 아웃라인 필 네온 텍스트 웨이브 텍스트 시네마틱 랜드스케이프 히어로 에디토리얼 건축 히어로 제품 전시 히어로 몰입형 포털 히어로 필드 노트 콜라주 히어로 시네마틱 장면 릴 히어로 평행 세계 렌즈 히어로 키네틱 월드 모자이크 라이브 타이포 마스크 히어로 가변 타이포 축 편집기 키네틱 타이포 시퀀서 에디토리얼 타이포 시스템 원형 타이포 오비트

개요 SVG 아이콘 형태 전환 길게 눌러 확인 토스 카드 의사결정 자석식 항목 분류 근접 반응 그리드 종이 접기 펼침 홀로그램 출입증 포커스 타이머 자석 버튼 3D 틸트 쇼케이스 스크롤 나타내기 글리치 텍스트 스크롤 텍스트 필 스포트라이트 카드 보더 빔 컨페티 버스트 커서 트레일 오빗 배지 맨 위로 버튼 비포/애프터 슬라이더 공유 요소 모프 스크롤 구동 애니메이션 앵커 툴팁 구이 내비 3D 링 캐러셀 근접 반응 독 카드 팬 키네틱 다이얼 스크래치 카드 스프링 전환 조율기 모션 경로 작곡기 상태 전환 지도 올가미 다중 선택 제약 조건 패널 리사이저 2축 파라미터 패드

개요 배경 질감 조절기 미우라 오리가미 지형 연쇄 도미노 필드 렌티큘러 플립 타일 육각 서리 결정 정원 파동 함수 붕괴 미니 도시 클라드니 공명판 스텐실 그림자 극장 기어 연동 장치 리액션 디퓨전 플루이드 잉크 보로노이 크리스털 셀 오로라 라이트 커튼 샌드 드리프트 포톤 웨이브 서피스 크리스털 프랙처 볼류메트릭 라이트 빔 뉴럴 펄스 네트워크 리퀴드 메탈 멤브레인 마그네틱 필링 필드 셀룰러 라이프 그리드 빛나는 광섬유 다발 크로매틱 코스틱 리사주 빛 베틀 인터랙티브 워프 터널 레이더 스캔 필드 이퀄라이저 바 파티클 그물망 오로라 배경 워프 스타필드 매트릭스 레인 리퀴드 블롭 포인터 빔 그리드 하프톤 필드 토포그래픽 등고선 필름 그레인 필드 프리즘 레이 펄스 회로 기판 인터랙티브 모아레 포인터 플로우 필드 탄성 도트 매트릭스 리플 래티스 메타볼 커서 필드 인터랙티브 전기장 픽셀 웨이크 반응형 스웜 필드 커플드 스트링 필드 그래비티 웰 삼각 메쉬 멤브레인 레인 디플렉터 분광 유리 표면 ASCII 파동 필드 종이 절개 깊이 장면 스캔라인 변위 포스터

개요 미리보기 메가 메뉴 라이브 데모 모달 솔루션 런처 앱 다운로드 오버레이 토스트 알림 쿠키 동의 배너 커맨드 팔레트 라이브 액티비티 컨텍스트 메뉴 알림 센터 스포트라이트 가이드 변경 검토 다이얼로그 다중 선택 트레이

개요 모바일 필터 드로어 모바일 에이전트 세션 카드 모바일 드로어

비포/애프터 슬라이더

모션·인터랙션

두 레이어를 겹쳐 놓고 손잡이를 끌어 경계를 옮기는 비교 슬라이더. before/after가 ReactNode라 이미지든 컴포넌트든 비교 가능. 포인터 드래그 + 키보드(←/→·Home/End) 지원.

comparison slider drag a11y

미리보기

새 탭에서 열기

옛 랜딩

정보는 많지만 위계가 없습니다

클릭

BEFORE

새 랜딩

여백·대비·리듬을 다시 잡았습니다

무료로 시작하기

AFTER

손잡이를 끌거나, 포커스 후 ←/→(Shift로 크게)·Home/End로 움직일 수 있습니다. before/after는 ReactNode라 이미지든 컴포넌트든 비교 가능합니다.