디자인 아틀라스
EN
↝ 모션

페이지 컬

Page curl

종이책의 모서리를 들추듯, 페이지 한쪽 귀퉁이가 말려 올라가며 뒷면이 살짝 비치는 전환 효과. 전자책·매거진 앱이 "다음 페이지가 있다"는 것을 암시할 때 씁니다.

다른 이름: Corner peelCurl transition
···
html
<div class="book">
  <div class="lines"><i></i><i></i><i></i><i></i><i></i></div>
  <div class="corner" id="corner"></div>
</div>
css
.book{position:relative;width:min(72%,300px);aspect-ratio:4/3;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.15);overflow:hidden}
.lines{position:absolute;inset:14% 12%;display:flex;flex-direction:column;gap:12%}
.lines i{height:6%;border-radius:3px;background:var(--line)}
.lines i:nth-child(3){width:70%}
.corner{position:absolute;right:0;bottom:0;width:0;height:0;
  background:linear-gradient(135deg, var(--surface) 42%, var(--bg) 43%, var(--muted) 46%, var(--bg) 50%, transparent 52%);
  clip-path:polygon(100% 0, 0 100%, 100% 100%);
  filter:drop-shadow(-3px -3px 6px rgba(0,0,0,.25));
  animation:curl 3.6s ease-in-out infinite}
@keyframes curl{
  0%,100%{width:0;height:0}
  45%{width:52%;height:52%}
  55%{width:52%;height:52%}
}

핵심 착시는 두 가지입니다 — 접히는 삼각형 영역과 그 아래 비치는 "뒷면" 색, 그리고 접힌 능선을 따라 생기는 그림자입니다. 모서리에서부터 대각선으로 잘라낸 삼각형(clip-path나 별도 요소)에 앞면과 다른 색(용지 뒷면 톤)을 주고, 그 삼각형의 크기를 0에서 코너 대각선 길이까지 애니메이션하면 "말려 올라가는" 인상을 줍니다. 능선에는 그라데이션 그림자(box-shadow 또는 linear-gradient)를 겹쳐 입체감을 더합니다.

진짜 3D 컬(원통형으로 말리는 곡면)을 구현하려면 WebGL로 페이지를 메시로 쪼개 각 정점을 원통 좌표로 변형해야 하지만, CSS만으로는 "삼각형 접힘 + 그림자"로 충분히 그 느낌을 흉내 낼 수 있습니다 — 실제로 대부분의 전자책 UI도 이 근사를 씁니다.

과도하게 쓰면 스킨모피즘(skeuomorphism) 특유의 "실물 흉내가 콘텐츠보다 시선을 끈다"는 비판을 받기 쉽습니다. 페이지 전환이라는 은유가 실제로 의미 있는 리더 앱에서만, 모서리 힌트 정도로 절제해 쓰는 게 안전합니다.

언제 쓰나

전자책·매거진처럼 "종이를 넘긴다"는 은유가 콘텐츠와 맞아떨어질 때만 씁니다. 일반 웹 페이지네이션에는 과한 장식입니다.