CSS, 텍스트에 여러 색상 외곽선 입히는 레트로 효과 구현법

프론트엔드 개발자라면 텍스트에 멋을 부리고 싶을 때가 많다. CSS text-stroke 속성은 텍스트에 외곽선을 쉽게 추가해주는 고마운 친구다. 하지만 한 가지 아쉬운 점이 있다면, 외곽선 색상을 하나밖에 못 쓴다는 거다. 만약 빨강, 파랑, 노랑 세 가지 색깔로 층층이 쌓인 레트로풍 외곽선을 만들고 싶다면? text-stroke만으로는 불가능하다.

하지만 방법은 언제나 있는 법. CSS의 다중 외곽선 텍스트 효과 글은 이 문제를 해결하는 기발한 트릭을 소개한다. 핵심은 같은 글자를 여러 레이어로 겹치는 것이다. 각각의 레이어에 다른 두께와 색상의 text-stroke를 적용하면, 마치 여러 겹의 외곽선이 쌓인 것처럼 보이는 효과를 낼 수 있다.

레이어를 쌓아 만드는 환상적인 텍스트 효과

이 기법의 원리는 간단하다. 마치 포토샵에서 여러 레이어를 만들고 각각에 다른 스타일을 적용하는 것과 비슷하다. CSS에서는 position: absolute와 z-index를 활용해 같은 위치에 텍스트를 여러 번 겹칠 수 있다. 예를 들어:

1. 가장 밑 레이어: 가장 두껍고 어두운 색의 외곽선을 준다.
2. 중간 레이어: 그보다 얇고 밝은 색의 외곽선을 준다.
3. 가장 위 레이어: 외곽선 없이 텍스트 본연의 색을 보여준다.

이렇게 하면 텍스트 주변으로 여러 겹의 색상 외곽선이 자연스럽게 나타난다. 마치 80년대 아케이드 게임 로고에서나 볼 법한 그런 디자인을 만들 수 있는 거지. 이와 비슷한 원리로 색상 그림자 반그림자 같은 기술도 텍스트뿐만 아니라 다른 요소에도 적용할 수 있는 흥미로운 시도다.

물론 이 방법은 DOM 요소가 여러 개 추가된다는 단점이 있지만, 디자인적 임팩트가 크다는 장점이 이를 상쇄할 때가 많다. 특히 레트로 디자인이나 특정 브랜딩에 필요한 경우 유용하게 활용될 수 있다. 단순히 text-stroke 하나만 알던 개발자라면, 이 트릭으로 텍스트 스타일에 새로운 지평을 열 수 있을 거다. 때로는 정해진 속성만 고집하기보다, 여러 속성을 조합해 예상치 못한 효과를 만들어내는 것이 프론트엔드의 묘미 아니겠는가.