CSS 페이지 말림 효과, 그림자로 만드는 원리
카드 UI 모서리 한쪽이 종이처럼 살짝 말려 올라간 디자인을 본 적 있을 것입니다. 실제로 종이가 접힌 게 아니라 CSS만으로 만든 착시인데, 원리를 모르면 그림자 방향이나 삼각형 각도를 하나씩 손으로 맞추다 계속 어긋나기 쉽습니다. 이 착시가 어떤 두 겹으로 만들어지는지 알면 직접 만들 때도, 색을 바꿀 때도 헤매지 않습니다.
요약 ① 카드 모서리가 말려 올라간 것처럼 보이는 건 실제 입체가 아니라, 배경에서 대각선으로 비워둔 자리에 삼각형 조각 하나를 겹쳐놓은 것입니다 ② 그 삼각형에 반대 방향으로 그림자(drop-shadow)를 걸어야 '떠 있는' 느낌이 생깁니다 ③ 비워둔 자리의 각도·크기와 겹친 삼각형의 각도·크기가 정확히 같아야 이음매 없이 자연스럽게 보입니다
카드 모서리는 왜 종이처럼 말려 올라가 보일까
눈으로 보면 카드 한쪽 귀퉁이가 배경에서 떨어져 살짝 들린 것처럼 느껴지지만, CSS에는 종이를 접는 기능이 없습니다. transform으로 회전시키거나 3D로 기울이는 것도 아닙니다. 이 효과는 평평한 두 겹의 배경만으로 만든 2차원 착시입니다.
첫 번째 겹은 카드 배경 자체입니다. linear-gradient로 '투명 → 카드색'을 대각선으로 배치하면, 지정한 모서리 한 귀퉁이만 카드색이 칠해지지 않은 삼각형 모양으로 비게 됩니다. 실제로 잘려나간 게 아니라 그 자리에만 배경색을 안 채운 것뿐입니다.
두 번째 겹은 그 빈 삼각형 자리 위에 정확히 겹쳐 놓은 작은 사각형(flap)입니다. 이 사각형도 대각선으로 반은 투명, 반은 접힌 뒷면 색으로 채워 삼각형처럼 보이게 만들고, 반대 방향으로 옅은 그림자를 걸면 마치 그 삼각형이 배경에서 살짝 들려 그림자를 드리우는 것처럼 보입니다.
확인하는 방법 — 대각선과 그림자 값 손으로 맞추기
이 효과를 손으로 직접 만들려면 세 가지 값을 동시에 맞춰야 합니다. 카드 배경의 대각선 각도와 접힘 크기, 겹쳐 놓을 삼각형(flap)의 위치와 각도, 그리고 그림자가 향하는 방향입니다. 우상단(top-right) 모서리라면 카드 배경은 -135도 대각선으로 비우고, flap은 카드 우측 상단에 같은 크기로 놓은 뒤 225도 대각선으로 채워야 두 삼각형 경계가 딱 맞물립니다.
그림자 방향도 모서리마다 달라집니다. 우상단이면 그림자를 왼쪽 아래로, 좌상단이면 오른쪽 아래로 옮기는 식으로, 항상 삼각형이 접힌 반대쪽을 향해야 '들린' 느낌이 유지됩니다. 방향을 반대로 넣으면 모서리가 파인 것처럼 보입니다.
값 하나만 바꿔도 나머지를 같이 고쳐야 하는 구조라, 접힘 크기를 20px에서 30px로 늘렸는데 flap의 너비·높이는 그대로 두면 삼각형과 비워둔 자리가 어긋나 버립니다. 색상까지 바꿔가며 눈으로 확인하려면 이 값들을 계속 왔다 갔다 하며 브라우저를 새로고침해야 합니다.
저희 도구로 확인하기. 모서리 방향 버튼만 고르면 대각선 각도·flap 위치·그림자 방향이 자동으로 맞춰지고, 슬라이더와 색상 선택으로 크기·그림자 농도·카드색·뒷면색을 바꾸면 미리보기와 복사 가능한 CSS 코드가 즉시 갱신됩니다.
무료 · 가입 불필요 · 브라우저에서 바로 CSS 복사
자주 막히는 지점
| 상황 | 왜 그런지 |
|---|---|
| 그림자를 삼각형과 같은 방향으로 걸었다 | 빛이 반대쪽에서 오는 것처럼 보여 모서리가 들린 게 아니라 파인 것처럼 보입니다 |
| 카드 배경의 대각선 각도와 flap의 각도를 다르게 설정했다 | 두 삼각형 경계가 어긋나 접힌 가장자리에 삐뚤어진 선이 생깁니다 |
| 접힘 크기만 늘리고 flap의 너비·높이는 그대로 뒀다 | 배경에서 비운 삼각형보다 덮는 조각이 작아 틈이 보입니다 |
| 카드 모서리에 큰 border-radius를 함께 줬다 | 둥근 테두리와 각진 대각선 접힘이 만나는 자리가 부자연스러워집니다 |
표에 정리된 네 가지 모두 결국 '비워둔 자리와 겹친 삼각형이 각도·크기·방향까지 정확히 같은가'로 귀결됩니다. 값 하나라도 어긋나면 눈에 바로 티가 납니다.
정리
카드 모서리가 종이처럼 말려 올라간 효과는 실제 입체나 3D 변형이 아니라, 배경에서 대각선으로 비워둔 자리 위에 삼각형 조각 하나를 겹치고 반대 방향으로 그림자를 건 2차원 착시입니다.
손으로 만들려면 대각선 각도·flap 크기·그림자 방향 세 가지를 모서리마다 다시 맞춰야 하지만, 방향만 고르면 이 값들이 자동으로 맞춰지는 도구를 쓰면 색과 크기만 눈으로 확인하며 바로 CSS를 가져다 쓸 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 바로 CSS 복사
자주 묻는 질문
이 효과는 CSS 3D transform으로 만드는 건가요?
아니요. rotate3d나 perspective 같은 3D 변형은 전혀 쓰지 않습니다. 배경 그라데이션 두 개와 drop-shadow 필터만으로 만든 평면(2D) 착시라서, 최신 브라우저라면 별도 설정 없이 그대로 작동합니다.
그림자가 너무 흐리거나 진하게 보이면 어떻게 조절하나요?
그림자 농도 슬라이더가 drop-shadow의 투명도를 0.05에서 0.6 사이로 조절합니다. 더 흐릿하거나 진하게 만들고 싶다면 복사한 CSS 코드에서 rgba 값의 마지막 숫자를 직접 바꾸면 됩니다.
접힘 크기를 카드보다 훨씬 크게 키워도 되나요?
카드 가로·세로 길이보다 접힘 크기가 커지면 삼각형이 카드 절반을 넘어가면서 비율이 깨져 보입니다. 카드 크기의 4분의 1 정도를 넘지 않는 선에서 조절하는 것이 자연스럽습니다.