CSS 텍스트 그림자 생성기 (멀티 레이어)

CSS text-shadow는 쉼표로 구분된 목록을 받습니다. 사람들이 이 속성 하면 떠올리는 효과 — 네온, 입체 글자, 가짜 외곽선, 길게 늘어지는 사선 그림자 — 는 사실 오프셋과 흐림, 색이 각기 다른 레이어를 쌓아 올린 결과일 뿐입니다. 이 도구는 그 스택을 눈으로 보면서 쌓게 해 줍니다. 레이어를 더하고 빼고, 레이어마다 x·y·흐림·색을 조절하고, 원하는 배경 위에서 미리 보고, 여섯 가지 프리셋에서 출발할 수 있습니다. 결과물은 스타일시트에 그대로 붙여 넣는 일반 CSS입니다.

스택의 동작을 좌우하는 속성의 특성은 두 가지입니다. 레이어는 적힌 순서대로 그려지며 첫 번째 그림자가 글자에 가장 가깝고 뒤로 갈수록 뒤에 깔립니다. 그래서 순서를 바꾸면 겹치는 부분에서 어느 색이 이기는지가 달라집니다. 또 흐림 값은 문자 그대로의 픽셀 반경이 아닙니다. 명세는 이를 주어진 길이의 절반을 표준편차로 하는 가우시안 블러로 정의합니다. 흐림 12가 12픽셀보다 눈에 띄게 더 퍼지는 이유도, 값을 두 배로 올려도 광량이 두 배가 되지 않는 이유도 여기에 있습니다.

사람들이 걸려 넘어지는 것은 없는 기능, 즉 확산(spread)입니다. box-shadow에는 그림자를 바깥으로 키우는 네 번째 길이 값이 있지만 text-shadow에는 없습니다. 그래서 외곽선 효과는 글자 주위로 네 개나 여덟 개의 사본을 조금씩 어긋나게 쌓아 흉내 내야 하고, 큰 크기에서는 사선 획에 틈이 생기며 사본마다 레이어를 하나씩 잡아먹습니다. 진짜 획이 필요하다면 -webkit-text-stroke나 paint-order: stroke fill이 선언 하나로 더 깔끔하게 해냅니다. 그림자 스택은 외곽선이 아니라 발광, 깊이감, 색 번짐이 필요할 때 꺼내 쓰세요.

미리보기가 알려 주지 못하는 것이 둘 있습니다. 그림자는 명암비에 포함되지 않습니다. WCAG는 글자 색과 그 뒤 배경만 비교하므로, 짙은 광채 덕분에 읽히던 옅은 글자도 검사에서는 여전히 탈락하고, 색을 강제로 바꿔 쓰는 사용자에게는 아예 사라집니다. 또 크고 흐린 레이어는 그리는 비용이 큽니다. 헤드라인 하나에 흐린 그림자 여덟 겹은 괜찮지만 백 줄짜리 스크롤 목록에 같은 스택을 쓰면 곤란하고, 이 속성을 애니메이션하면 매 프레임마다 글자 전체를 다시 그리게 됩니다.