디자인 아틀라스
EN
◌ 로더·로딩 갤러리

뒤집히는 정사각형

Flip Square

정사각형이 축을 따라 뒤집히길 반복하며 리듬 있게 대기를 알리는 로더.

다른 이름: Cube flip loader
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="fscene" aria-hidden="true"><div class="fsq"></div></div>
  <span class="cap">perspective + rotateX/Y 스텝</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.fscene{perspective:220px}
.fsq{width:clamp(28px,9vmin,50px);height:clamp(28px,9vmin,50px);background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:6px;animation:flip 2.4s steps(1,end) infinite}
@keyframes flip{0%{transform:rotateX(0) rotateY(0)}25%{transform:rotateX(180deg) rotateY(0)}50%{transform:rotateX(180deg) rotateY(180deg)}75%{transform:rotateX(0) rotateY(180deg)}100%{transform:rotateX(0) rotateY(0)}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

회전형 로더가 대부분 "계속 도는" 느낌이라면 이건 "뒤집히는" 느낌이라 더 명확한 박자감을 줍니다. 카드가 뒤집히는 은유가 자연스러운 자리(플래시카드 앱, 전환 애니메이션 직전 대기)에 어울리고, 그 외에는 링 스피너처럼 더 무난한 형태가 낫습니다.

부모 요소에 perspective를 준 뒤 정사각형에 rotateX와 rotateY를 번갈아 90도씩 스텝으로 바꾸는 keyframe을 줍니다. ease 대신 steps()나 명확한 퍼센트 구간을 쓰면 부드럽게 도는 대신 "턱, 턱" 끊어지는 리듬이 살아나 뒤집히는 느낌이 강조됩니다.

화면 전체를 오래 가리는 로딩이면 스켈레톤이 낫고, 200ms 이내로 끝날 대기라면 생략하세요. role="status"·aria-live="polite"를 감싸는 요소에 주고 정사각형은 장식이므로 aria-hidden="true"로 숨깁니다. prefers-reduced-motion에서는 3D 회전 대신 단순한 밝기 변화로 대체하는 걸 권합니다 — perspective 회전은 전정기관에 민감한 사용자에게 특히 불편할 수 있습니다.