CSS 페이지 말림 모서리 효과 수식과 3D 종이 접힘 가이드

직접 해보기 →

온라인 잡지 매거진, E-Book 전자책 브라우저 카드, 종이 느낌의 감성적 포트폴리오 사이트에서 카드 모서리가 진짜 실물 종이처럼 살짝 접혀 말려 들어간 느낌을 연출하는 디자인 기법이 바로 CSS 페이지 말림(Page Curl / Fold) 효과입니다.

과거에는 카드 모서리에 이미지(PNG) 삼각 조각을 가져다 붙여 어색하게 가렸지만, 모던 CSS3 환경에서는 의사 요소(::before, ::after)의 linear-gradient 모서리 잘라내기 기법과 3D box-shadow 회전 조율을 결합하여 가볍고 부드러운 순수 CSS 기반 3D 종이 접힘 UI를 만들어낼 수 있습니다. 본 글에서는 페이지 말림 모서리 기하학 수식과 삼각 그라디언트 렌더링법을 해설합니다.

---

1. 삼각 접힘 및 그림자 오프셋 기하학 수식 공식

종이가 45도 각도로 말려 접혀 올라갈 때 카드 귀퉁이에 발생하는 시각적 구조는 1) 접혀 올라간 삼각 플랩(Folded Flap)과 2) 그 아래에 떨어지는 입체적 사선 그림자(Cast Shadow)의 이중 결합으로 이루어집니다:

[ \text{Curl Offset} = \text{LinearGradient}\left(135^\circ, \text{Transparent } d_{\text{fold}}, \text{PaperColor } d_{\text{fold}}\right) \circ \text{ShadowTransform}\left(\theta_{\text{rot}}, \text{Blur}_{\text{px}}\right) ]

구성 요소 기하학 수식:

• 접힘 대각선 각도 (135도): 상단 우측 귀퉁이를 45도 사선으로 접어 올리기 위해 90도 + 45도 = 135도 사선 그라디언트 스톱 마스크를 선언합니다.
• 접힘 너비 수치: ::before 의사 요소의 너비와 높이를 30px로 지정하고 사각형을 45도 회전시킵니다.
• 곡면 음영 섀도우 (box-shadow): 접혀 말린 종이 면 뒤쪽에 box-shadow: -3px 3px 6px rgba(0,0,0,0.15)의 은은한 부드러운 섀도우를 드리워 종이의 두께감과 공중 입체감을 완성합니다.

---

2. 순수 CSS 종이 모서리 말림 구현 소스

다음은 마우스 오버 시 모서리가 더 크게 구겨지며 말리는 반응형 CSS 소스입니다:

<div class="page-curl-card">
  <h3>E-Book Chapter 01</h3>
  <p>디지털 스크린 위에서 펼쳐지는 실물 종이 질감의 아날로그 감성 인터랙션 가이드.</p>
</div>

.page-curl-card {
  position: relative;
  width: 320px;
  padding: 32px 24px;
  background: #ffffff;
  color: #1e293b;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* 우측 상단 종이 모서리 잘라내기 배경 마스킹 */
  background: linear-gradient(
    225deg,
    transparent 28px,
    #ffffff 29px
  );
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 말려 올라간 종이 삼각 플랩 (Folded Corner) */
.page-curl-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 32px 32px 0;
  border-color: transparent #e2e8f0 transparent transparent;
  box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* 마우스 호버 시 종이가 더 깊게 접히는 인터랙션 연출 */
.page-curl-card:hover {
  background: linear-gradient(
    225deg,
    transparent 42px,
    #ffffff 43px
  );
}

.page-curl-card:hover::before {
  border-width: 0 48px 48px 0;
  box-shadow: -5px 5px 12px rgba(0, 0, 0, 0.25);
}

[!NOTE] 매번 225도 각도 계산과 border-width 픽셀을 일일이 변경하며 종이 접힘 비율을 테스트하지 않고, CSS 페이지 말림 효과 생성기 도구를 활용하면 접힘 크기, 카드 색상, 그림자 짙기를 슬라이더로 조절하여 즉시 최적화된 CSS 코드를 복사할 수 있습니다.

---

3. 실무 UI 카드 디자인 시 주의사항

1. 테두리(border) 속성과의 충돌 주의: background: linear-gradient 투명 잘라내기로 모서리를 깎아낸 상태에서 카드 전체에 border: 1px solid #ddd 속성을 주면, 깎여나간 사선 모서리에 테두리가 이어지지 않고 뚫려 보일 수 있습니다. 테두리가 필요할 경우 box-shadow: inset 0 0 0 1px #ddd 속성을 이용해 내부에 경계선을 그리는 방식이 권장됩니다.
2. 다크 모드에서의 종이 삼각 플랩 음영 보정: 다크 모드 카드 바탕색이 어두울 경우, 접혀 올려진 삼각 플랩(::before)의 색상을 카드 바탕색보다 살짝 밝은 차콜 톤으로 설정해야 시각적 인지도가 명확히 살아납니다.