3D & Depth

고리 모양으로 늘어선 패널이 3D 공간에서 세로축을 중심으로 회전합니다.

[적용할 곳]에 3D 캐러셀(3D Carousel)을 넣어 줘. 회전 링 캐러셀(rotating ring carousel)이라고도 불러.
패널을 원근감 있는 고리 모양으로 배치하고, 다음을 누를 때마다 고리 전체가 세로축을 중심으로 부드럽게 돌아 다음 패널이 앞으로 오게 해 줘.
컨트롤은 키보드로도 쓸 수 있게 하고, 현재 패널을 스크린 리더에 알려 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.

마커나 호가 그려진 3D 지구가 레이아웃 안에서 회전합니다.

[적용할 곳]에 3D 글로브(3D Globe)를 넣어 줘. 인터랙티브 글로브(interactive globe)라고도 불러.
표면에 마커 몇 개가 있는 지구본이 마커와 함께 축을 중심으로 느리고 일정하게 돌게 해 줘. 차분하고 끊김 없이.
장식으로 두고 보여 주는 정보는 텍스트 대체를 마련하고, 화면 밖에 있을 때는 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.

포인터를 올리면 카드가 원근감 있게 뒤로 기울고, 핀과 빛이 보는 사람 쪽으로 솟아오릅니다.

[적용할 곳]에 3D 핀(3D Pin) 호버 효과를 넣어 줘. 핀 호버 3D(pin hover 3D)라고도 불러.
포인터가 카드 위에 오면 카드가 원근감 있게 뒤로 기울고, 밑동에 은은한 빛이 있는 핀이 가운데에서 솟아오르게 해 줘. 포인터가 벗어나면 모두 제자리로. 부드럽게, 튕기지 않게.
레이아웃에서 카드가 차지하는 자리는 그대로 두고, 키보드 포커스에도 같은 효과를 보여 줘.

카드가 포인터 쪽으로 원근감 있게 기울고, 겹겹이 놓인 내용이 표면에서 떠오릅니다.

[적용할 곳]에 3D 틸트(3D Tilt) 효과를 넣어 줘. 퍼스펙티브 틸트(perspective tilt), 틸트 카드(tilt card)라고도 불러.
포인터가 움직이면 카드가 그쪽으로 원근감 있게 기울고, 안쪽 레이어들이 서로 다른 깊이로 표면에서 떠오르게 해 줘. 포인터가 벗어나면 부드럽게 평평하게 돌아오게. 부드럽고 은은하게.
글자가 잘 읽히도록 기울기는 살짝만 주고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 카드를 평평하게 둬.

카드가 축을 중심으로 반 바퀴 돌아 뒷면을 보여 줍니다.

[적용할 곳]에 카드 플립(Card Flip) 효과를 넣어 줘. 플립 카드(flip card), 카드 플립 3D(card flip 3D)라고도 불러.
포인터가 카드 위에 오면 카드가 세로축을 중심으로 원근감 있게 뒤집혀 뒷면을 보여 주고, 벗어나면 다시 돌아오게 해 줘. 부드럽고 일정하게.
각 면의 뒤쪽은 숨겨서 앞뒷면이 서로 비쳐 보이지 않게 하고, 키보드 포커스와 터치 기기의 탭으로도 뒤집히게 해 줘.

카드가 조금씩 어긋나게 쌓여 있고, 맨 위 카드가 비켜나며 다음 카드를 드러냅니다.

[적용할 곳]에 카드 스택(Card Stack)을 넣어 줘. 스택드 카드(stacked cards)라고도 불러.
카드를 조금씩 어긋나게 뒤로 겹쳐 두고, 누를 때마다 맨 위 카드가 옆으로 휙 빠져 맨 뒤로 들어가면서 나머지가 한 칸씩 앞으로 나오게 해 줘. 부드럽고 가볍고 빠르게.
키보드로 조작할 수 있게 하고, 스크린 리더가 모든 카드에 순서대로 닿게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.

가운데 항목은 정면을 보고, 양옆 항목은 원근감 있게 비스듬히 돌아가 있습니다.

[적용할 곳]에 커버플로(Coverflow) 캐러셀을 넣어 줘. 커버 플로 캐러셀(cover flow carousel)이라고도 불러.
가운데 항목은 정면을 보고 양옆 항목은 원근감 있게 비스듬히 돌아가 있게 해 줘. 옆으로 드래그하면 줄이 밀리고, 손을 떼면 가장 가까운 항목에 부드럽게 멈추게.
드래그 말고도 방향키와 스와이프를 지원하고, 터치 기기에서 페이지 세로 스크롤이 계속 되게 해 줘.

내용이 놓인 정육면체가 회전하며 다음 면을 보여 줍니다.

[적용할 곳]에 큐브 로테이트(Cube Rotate) 전환을 넣어 줘. 3D 큐브(3D cube), 큐브 트랜지션(cube transition)이라고도 불러.
원근감 있는 정육면체의 옆면들에 내용을 배치하고, 다음을 누를 때마다 정육면체가 세로축을 중심으로 부드럽게 돌아 다음 면이 앞으로 오게 해 줘.
키보드와 스크린 리더는 앞면에만 닿게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.

밝은 하이라이트가 반사광처럼 포인터를 따라 카드 표면 위를 움직입니다.

[적용할 곳]에 글레어 / 홀로그래픽 카드(Glare / Holographic Card) 효과를 넣어 줘. 글레어 카드(glare card), 글레어 호버(glare hover)라고도 불러.
은은하고 밝은 하이라이트가 반사되는 빛처럼 포인터를 따라 카드 표면을 움직이고, 카드는 포인터 쪽으로 살짝 기울게 해 줘. 포인터가 벗어나면 둘 다 사라지게. 부드럽고 은은하게.
클릭은 빛 레이어를 통과하게 하고, 그 아래 내용은 잘 읽히게 두고, 터치 기기에서는 빛 없이 카드를 보여 줘.