Fade-Out Gradient 효과 구현기

Fade-Out Gradient 효과 구현기

이 글에서는 내가 개발 중인 프로젝트에서 overflow가 발생하는 컴포넌트에 적용한 "fade-out gradient" 스타일에 대해 설명한다. overflow된 부분이 단순히 잘리는 대신, 서서히 사라지는 느낌을 주기 위해 이 효과를 사용했다. 이 글에서는 문제 해결 과정과 함께, Tailwind CSS를 활용하여 효과를 구현한 방법을 공유하려 한다.

 

접근 방법 - Pseudo 클래스 활용하기

현재 프로젝트에서는 Tailwind CSS를 사용하고 있다. Tailwind는 기본적으로 mask-image 속성을 지원하지 않지만, 양쪽 끝에 fade-out gradient를 적용하라는 요구사항이 있었다. 처음 시도한 방법은 before와 after pseudo 요소를 사용하여 좌우에 gradient 효과를 주는 방식이었다. before와 after 요소를 각각 absolute로 배치한 후, 좌측에는 배경색에서 투명으로, 우측에는 투명에서 배경색으로 변화하는 linear gradient를 적용하는 방식이다.

양측에 linear gradient를 적용한다는 느낌은 다음과 같다!

cn(
	before:content-[' '],
	before:from-gradient-200-from,
	before:absolute,
	before:left-0,
	before:top-0,
	before:z-10,
	before:block,
	before:h-10,
	before:w-14,
	before:bg-gradient-to-r,
	before:to-transparent,
	after:content-[' '],
	after:from-gradient-200-from,
	after:absolute,
	after:right-0,
	after:top-0,
	after:block,
	after:h-10,
	after:w-14,
	after:bg-gradient-to-l,
	after:to-transparent
)

 

문제점 세 가지

이 방법을 사용했을 때, 세 가지 주요 문제점이 나타났다.

1. Pseudo 클래스와 상호작용 이슈
   before와 after pseudo 요소가 실제 HTML 요소 위에 배치되어, 터치나 클릭 시 요소 간의 상호작용을 방해하는 경우가 발생했다.
2. 복잡한 Gradient 설정
   배경이 단색이라면 문제가 없었으나, 배경에 gradient를 적용하면 pseudo 요소에서 동일한 gradient를 정확하게 적용하기 어려웠다. 이를 해결하려면 복잡한 gradient 계산이 필요하고, 위치 변경 시 재사용성이 낮아졌다.
3. 재사용성 한계
   배경이 단색이라도 배경 색상이 바뀔 때마다 pseudo 요소의 gradient 색상을 수정해야 하므로 재사용성이 떨어졌다.

 

해결 방법 - Arbitrary Class와 Mask Image 활용

위 문제를 해결하기 위해 Tailwind CSS의 arbitrary class 기능을 사용해 mask-image 속성을 적용하는 방법을 찾았다. 예를 들어, 일반적인 방식으로 Tailwind에서 지원하지 않는 크기나 색상을 적용할 때, [mask-image:linear-gradient(...)] 형식으로 사용할 수 있다. 

[mask-image:linear-gradient(-------------)]

 

새로운 문제 - 여러 개의 Gradient 적용 시 띄어쓰기

이 방식으로 단순한 gradient 효과는 쉽게 구현할 수 있었지만, gradient에 폭(width)을 지정해야 하는 경우 class 속성에서 띄어쓰기를 사용할 수 없었다. Tailwind는 이 문제를 해결하기 위해 띄어쓰기를 _로 치환하여 표현할 수 있도록 지원한다.

 

[mask-image:linear-gradient(to_left,rgba(0,0,0,0)_0%,rgba(0,0,0,1)_40px,rgba(0,0,0,1)_calc(100%_-_80px),rgba(0,0,0,0))]

 

마무리

프로젝트 내에서 fade-out gradient가 자주 사용된다면, 관련 플러그인을 만드는 것도 좋은 방법이 될 것이다. 아직까지는 그 정도로 빈번히 사용하지 않아 플러그인 제작까진 고려하지 않았지만, Tailwind CSS가 생각보다 다양한 속성을 다룰 수 있음을 확인할 수 있었다.