CSS 필터 효과 이해하기

소개

필터는 웹 작성자가 흥미로운 시각 효과를 얻기 위해 사용할 수 있는 강력한 도구입니다. 이 도움말에서는 필터 효과의 역사, 작동 방식, 사용 방법을 설명합니다. CSS에 대해 정의된 모든 사전 정의된 필터의 예와 몇 가지 예를 살펴보겠습니다. 필터의 속도 영향을 파악하는 것이 우수한 사용자 환경을 제공하는 데 중요하므로 데스크톱 및 휴대기기에서 필터를 사용할 때의 성능 고려사항도 다룹니다. 마지막으로 최신 브라우저의 현재 구현 상태를 검토합니다.

필터 효과의 과거, 현재, 미래

필터 효과는 Scalable Vector Graphics(SVG) 사양의 일부로 시작되었습니다. 벡터 그림에 다양한 픽셀 기반 이미지 효과를 적용하기 위해 만들어졌습니다. 시간이 지남에 따라 브라우저 공급업체가 브라우저에 SVG 기능을 추가함에 따라 필터의 유용성이 분명해졌습니다. Mozilla의 로버트 오캐러한은 '일반적인' HTML 콘텐츠에 CSS를 적용하여 SVG 필터를 사용하는 기발한 아이디어를 생각해 냈습니다. 로버트는 필터와 CSS 스타일 지정의 조합이 얼마나 강력한지 보여주는 초기 버전의 프로토타입을 제작했습니다. W3C의 CSS 및 SVG 작업 그룹은 CSS 스타일 지정을 통해 HTML과 SVG 모두에 필터를 사용하는 것을 조화시키기로 결정했으며, 이에 따라 CSS의 'filter' 속성이 탄생했습니다. 현재 CSS 및 SVG를 담당하는 공동 태스크포스가 필터를 보편적으로 유용하게 만들기 위해 많은 노력을 기울이고 있습니다. 이러한 모든 항목의 최신 사양은 여기에서 확인할 수 있습니다.

'filter' CSS 속성의 새로운 기능

데자뷔는 CSS 스타일에서 '필터'를 보게 되면 웹 개발자를 떠올립니다. 이는 이전 버전의 Internet Explorer에 일부 플랫폼별 기능을 실행하기 위해 CSS를 통해 노출된 'filter' 속성이 있었기 때문입니다. 이제 CSS3의 일부인 표준 'filter' 속성을 위해 지원 중단되었습니다. 따라서 일부 오래된 웹페이지에는 '필터링'이 표시되어 있더라도 혼동하지 않으셔도 됩니다. 새 'filter' 속성은 모든 작업이 수행되는 위치이며 IE의 새 버전에서는 모든 최신 브라우저와 동일하게 구현됩니다.

필터 작동 방식

그렇다면 필터는 정확히 어떤 역할을 할까요? 필터를 가장 쉽게 생각하는 방법은 모든 페이지 콘텐츠가 배치되고 그려진 후에 마법 같은 작업을 실행하는 후처리 단계라고 생각하는 것입니다.

브라우저가 웹페이지를 로드할 때 스타일을 적용하고 레이아웃을 수행한 다음 페이지를 렌더링해야 볼 수 있습니다. 이러한 모든 단계를 거친 후 페이지가 화면에 복사되기 직전에 필터가 적용됩니다. 렌더링된 페이지의 스냅샷을 비트맵 이미지로 만든 다음 스냅샷의 픽셀에 그래픽 마법을 실행하고 결과를 원본 페이지 이미지 위에 그립니다. 카메라 렌즈 전면에 장착된 필터라고 생각하면 됩니다. 렌즈를 통해 보는 것은 필터의 효과로 인해 수정된 외부 세계입니다.

즉, 필터가 적용된 페이지를 그릴 때 시간이 소요되지만 필터를 적절하게 사용하면 사이트 속도에 미치는 영향은 최소화됩니다.

또한 카메라 렌즈에 여러 필터를 서로 겹쳐 적용할 수 있는 것처럼 임의의 수의 필터를 차례로 적용하여 다양한 효과를 얻을 수 있습니다.

SVG 및 CSS를 사용하여 정의된 필터

필터는 원래 SVG에서 가져왔으므로 필터를 정의하고 사용하는 방법에는 여러 가지가 있습니다. SVG 자체에는 XML 문법을 사용하여 다양한 필터 효과의 정의를 래핑하는 <filter> 요소가 있습니다. CSS에서 정의된 필터 세트는 동일한 그래픽 모델을 활용하지만 스타일 시트에서 사용하기 훨씬 간단한 정의입니다.

대부분의 CSS 필터는 SVG 필터로 표현할 수 있으며, 원하는 경우 CSS를 사용하여 SVG에 지정된 필터를 참조할 수도 있습니다. CSS 필터 디자이너는 웹 작성자가 필터를 더 쉽게 적용할 수 있도록 많은 노력을 기울였으므로 이 문서에서는 당분간 SVG 정의를 무시하고 CSS에서 직접 사용할 수 있는 필터에 대해 다룰 것입니다.

CSS 필터를 적용하는 방법

CSS의 필터는 웹페이지에 표시되는 모든 요소에 적용된 'filter' 속성을 사용하여 수행합니다. 아주 간단한 예로,

div { { % mixin filter: grayscale(100%); % } }

그러면 페이지의 모든 <div> 요소 내 콘텐츠가 회색으로 변합니다. 1940년대 TV 이미지처럼 페이지를 표시하는 데 적합합니다.

대부분의 필터는 필터링 정도를 제어하기 위해 일종의 매개변수를 사용합니다. 예를 들어 원본 색상과 그레이스케일 버전의 중간 지점으로 콘텐츠 스타일을 지정하려면 다음과 같이 하면 됩니다.

div { { % mixin filter: grayscale(50%); % } }

다양한 필터를 차례로 적용하는 방법은 간단합니다. 다음과 같이 CSS에 필터를 순서대로 배치하기만 하면 됩니다.

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

이 예에서는 먼저 모든 원본 색상을 그레이스케일로 만든 다음 세피아 효과를 적용하여 다음과 같이 표시됩니다.

필터를 하나씩 차례로 적용할 수 있는 유연성을 통해 다양한 효과를 얻을 수 있습니다. 놀라운 결과를 만들기 위한 실험은 전적으로 상상력에 달려 있습니다.

CSS를 사용하여 사용할 수 있는 필터 효과

따라서 원래 SVG 필터 메커니즘은 강력하지만 사용하기에는 부담스러울 수 있습니다. 따라서 CSS에서는 필터 효과를 매우 쉽게 사용할 수 있는 여러 표준 필터 효과를 도입합니다.

각 옵션의 기능을 살펴보겠습니다.

grayscale(amount)

입력 이미지의 색상을 회색조로 변환합니다. 적용된 '양'은 회색 전환이 적용되는 정도를 제어합니다. 이 값이 100%이면 모든 것이 회색 음영으로 표시되고 0%이면 색상이 변경되지 않습니다. 백분율보다 부동 소수점 숫자를 사용하려는 경우 여기에 부동 소수점 숫자를 사용할 수 있습니다. 즉, 0은 0% 와 동일하게 작동하지만 1.0은 100%와 동일하게 작동합니다.

sepia(amount)

이렇게 하면 이전 사진처럼 전달된 색상에 세피아 색조가 적용됩니다. 적용된 '양'은 'grayscale' 필터와 동일한 방식으로 작동합니다. 즉, 100% 는 모든 색상이 완전히 세피아 톤으로 변경되고 값이 작으면 효과를 더 작은 비율로 적용할 수 있습니다.

saturate(amount)

이 옵션은 색상에 채도 효과를 적용하여 색상을 더 선명하게 만듭니다. 사진을 포스터나 만화처럼 보이게 할 수 있는 멋진 효과입니다. 이 효과를 사용하면 100%를 초과하는 값을 사용하여 채도를 강조할 수도 있습니다. 확실히 펑키한 느낌을 줄 수 있는 효과입니다.

hue-rotate(각도)

흥미로운 결과를 얻는 데 사용할 수 있는 색상 전문가 효과입니다. 색상을 이동하여 입력 이미지를 완전히 다르게 보이게 합니다. 색상환을 중심으로 빨간색에서 보라색으로 이어지는 색상 스펙트럼을 상상해 보세요. 이 효과는 색상환의 원래 색상을 입력으로 받아 'angle' 매개변수로 회전하여 회전된 색상을 출력 색상 값으로 생성합니다. 따라서 이미지의 모든 색상이 바퀴의 동일한 '각'만큼 이동합니다. 물론 작업을 단순화한 것이지만, 당연히 이해할 수 있을 만큼 가까워지기를 바랍니다.

invert(amount)

이 효과는 색상을 뒤집습니다. 따라서 적용된 '양'이 100%이면 출력물이 옛날 필름 카메라 시절의 사진 네거티브처럼 보입니다. 이전과 마찬가지로 100%보다 작은 값을 사용하면 점진적으로 반전 효과가 적용됩니다.

opacity(amount)

콘텐츠를 반투명하게 필터링하려면 이 옵션을 사용하면 됩니다. 'amount' 값은 출력의 불투명도를 정의합니다. 따라서 100% 값은 완전히 불투명하므로 출력은 입력과 정확히 동일합니다. 값이 100% 미만으로 떨어지면 출력 이미지가 불투명도가 낮아지고(더 투명해짐) 점점 더 적게 표시됩니다. 즉, 페이지의 다른 항목과 겹치면 그 아래에 있는 항목이 표시되기 시작합니다. '양'이 0%이면 완전히 사라집니다. 하지만 완전히 투명한 객체에서 마우스 클릭과 같은 이벤트가 계속 발생할 수 있으므로 아무것도 표시하지 않고 클릭 가능한 영역을 만들려는 경우 유용합니다.

이는 이미 알고 있는 'opacity' 속성과 동일하게 작동합니다. 일반적으로 CSS 'opacity' 속성은 하드웨어 가속되지 않지만, 하드웨어 가속을 사용하여 필터를 구현하는 일부 브라우저는 훨씬 더 나은 성능을 위해 필터 버전의 불투명도를 가속합니다.

밝기(양)

TV의 밝기 제어와 마찬가지입니다. 'amount' 매개변수에 비례하여 완전히 검은색과 원래 색상 간의 색상을 조정합니다. 이 값을 0%로 설정하면 검은색만 표시되지만 값이 100%에 가까워질수록 원래 이미지가 점점 밝아지다가 100%가 되면 입력 이미지와 동일해집니다. 물론 계속해서 조정할 수 있습니다. 예를 들어 200%로 설정하면 이미지가 원본보다 두 배 밝아집니다. 조명이 어두운 곳에서 촬영한 사진을 조정하는 데 유용합니다.

contrast(amount)

TV에서 더 많은 기능을 제어하세요. 이렇게 하면 입력 이미지에서 가장 어두운 부분과 가장 밝은 부분의 차이가 조정됩니다. 0%를 사용하면 '밝기'와 마찬가지로 검은색이 되므로 그리 흥미롭지 않습니다. 그러나 값을 100% 로 늘리면 100% 에 도달할 때까지 어두움의 차이가 바뀌고 다시 원래 이미지가 됩니다. 이 효과를 100% 이상으로 설정하면 밝은 색상과 어두운 색상의 차이가 더 커집니다.

blur(반경)

콘텐츠의 가장자리가 부드럽게 보이도록 하려면 흐리게 처리를 추가하면 됩니다. 이 효과는 예전에 인기 있었던 영화 제작 기법인 유리판에 바셀린을 바르는 것처럼 보입니다. 모든 색상을 함께 흐리게 처리하고 효과를 퍼뜨립니다. 마치 눈의 초점이 맞지 않을 때와 비슷합니다. 'radius' 매개변수는 화면의 픽셀이 서로 혼합되는 정도에 영향을 미치므로 값이 클수록 더 흐리게 처리됩니다. 물론 0은 이미지를 변경하지 않습니다.

그림자(그림자)

콘텐츠가 햇빛이 비치는 야외에 있는 것처럼 보이게 하고 그 뒤에 있는 땅에 그림자를 만들 수 있으면 좋겠죠. 바로 '드롭섀도우'가 하는 역할입니다. 이미지의 스냅샷을 찍고 단일 색상으로 만든 다음 흐리게 처리한 후 결과를 약간 오프셋하여 원본 콘텐츠의 그림자처럼 보이게 합니다. 전달된 'shadow' 매개변수는 단일 값보다 조금 더 복잡합니다. 공백으로 구분된 일련의 값으로, 일부 값은 선택사항입니다. 'shadow' 값은 그림자가 배치되는 위치, 적용되는 블러의 양, 그림자의 색상 등을 제어합니다. 'shadow' 값의 작동 방식에 관한 자세한 내용은 CSS3 배경 사양에서 'box-shadow'를 자세히 정의한 내용을 참고하세요. 아래의 몇 가지 예를 통해 다양한 가능성을 파악할 수 있습니다.

이는 'box-shadow' 속성을 통해 사용할 수 있는 기존 CSS 기능과 유사한 또 다른 필터 작업입니다. 필터 접근 방식을 사용하면 위에서 설명한 '불투명도' 작업과 같이 일부 브라우저에서 하드웨어 가속을 받을 수 있습니다.

SVG 필터를 참조하는 URL

필터는 SVG의 일부로 시작되었으므로 SVG 필터를 사용하여 콘텐츠의 스타일을 지정할 수 있어야 합니다. 이는 현재의 'filter' 속성 제안을 사용하면 간단합니다. SVG의 모든 필터는 필터 효과를 참조하는 데 사용할 수 있는 'id' 속성으로 정의됩니다. 따라서 CSS에서 SVG 필터를 사용하려면 'url' 문법을 사용하여 참조하기만 하면 됩니다.

예를 들어 필터의 SVG 마크업은 다음과 같습니다.

<filter id="foo">...</filter>

그러면 CSS에서 다음과 같이 간단하게 할 수 있습니다.

div { { % mixin filter: url(#foo); % } }

완성! 문서의 모든 <div>는 SVG 필터 정의로 스타일이 지정됩니다.

맞춤(제공 예정)

맞춤 필터가 곧 제공될 예정입니다. 이러한 효과는 그래픽 GPU의 성능을 활용하여 특수 음영 처리 언어를 사용하여 상상력에 의해서만 제한되는 놀라운 효과를 실행합니다. 'filter' 사양의 이 부분은 아직 논의 중이며 계속 변화하고 있습니다. 하지만 가까운 브라우저에 이 기능이 출시되는 대로 가능한 한 기능에 대해 더 자세히 설명해 드릴 예정입니다.

성능에 대한 고려사항

모든 웹 개발자가 관심을 두는 한 가지는 웹페이지 또는 애플리케이션의 성능입니다. CSS 필터는 시각적 효과를 위한 강력한 도구이지만 동시에 사이트의 실적에 영향을 줄 수 있습니다.

CSS 필터를 지원하는 휴대기기에서 사이트가 제대로 작동하도록 하려면 필터의 작동 방식과 성능에 미치는 영향을 이해하는 것이 중요합니다.

첫째, 모든 필터가 동일하게 작동하는 것은 아닙니다. 실제로 대부분의 필터는 어떤 플랫폼에서든 매우 빠르게 실행되며 성능에 미치는 영향은 매우 적습니다. 그러나 필터를 흐리게 처리하는 필터는 다른 필터보다 속도가 느릴 수 있습니다. 물론 '흐리게 처리'와 '그림자'를 뜻합니다. 사용을 해서는 안 된다는 의미는 아니지만, 효과를 이해하는 것이 도움이 될 수 있습니다.

blur를 실행하면 출력 픽셀 주변의 픽셀에서 색상을 혼합하여 흐리게 처리된 결과를 생성합니다. 예를 들어 radius 매개변수가 2이면 필터는 혼합 색상을 생성하기 위해 각 출력 픽셀 주위의 모든 방향에서 2개의 픽셀을 확인해야 합니다. 이는 출력 픽셀마다 발생하므로 radius를 늘리면 계산이 많아집니다. blur는 모든 방향을 보므로 '반경'을 두 배로 보면 4배 더 많은 픽셀을 봐야 하므로 radius가 2배로 증가할 때마다 4배 더 느려집니다. drop-shadow 필터는 효과의 일부로 blur를 포함하므로 shadow 매개변수의 radius 및 spread 부분을 변경하면 blur와 마찬가지로 동작합니다.

일부 플랫폼에서는 GPU를 사용하여 속도를 높일 수 있으므로 blur가 완전히 무용지물이 되는 것은 아닙니다. 하지만 모든 브라우저에서 이 기능을 사용할 수 있는 것은 아닙니다. 확실하지 않은 경우 원하는 효과를 주는 '반지름'을 실험한 다음 허용 가능한 시각적 효과를 유지하면서 최대한 줄여보세요. 이렇게 조정하면 특히 휴대전화에서 사이트를 사용하는 사용자의 만족도가 높아집니다.

SVG 필터를 참조하는 url 기반 필터를 사용하는 경우 임의의 필터 효과를 포함할 수 있으므로 속도가 느려질 수 있습니다. 따라서 필터 효과가 어떤 역할을 하는지 파악하고 모바일 기기에서 실험하여 성능이 양호한지 확인해야 합니다.

최신 브라우저에서 사용 가능 여부

현재 WebKit 기반 브라우저와 Mozilla에서 여러 CSS filter 효과를 사용할 수 있습니다. IE10뿐만 아니라 Opera에서도 곧 이 기능을 사용할 수 있을 것으로 예상됩니다. 이 사양은 아직 개발 중이기 때문에 일부 브라우저 공급업체는 공급업체 접두사를 사용하여 이 사양을 구현했습니다. 따라서 WebKit에서는 -webkit-filter를 사용해야 하고 Mozilla에서는 -moz-filter를 사용해야 하며 다른 브라우저 구현이 등장할 때마다 주의 깊게 살펴봐야 합니다.

일부 브라우저에서는 일부 필터 효과를 즉시 지원하지 않으므로 결과는 다를 수 있습니다. 현재 Mozilla 브라우저는 공급업체 접두사 없이 filter: url() 함수만 지원합니다. 이 구현이 다른 효과 함수보다 먼저 만들어졌기 때문입니다.

아래에는 다양한 브라우저에서 사용할 수 있는 CSS 필터 효과와 소프트웨어에 구현될 때의 대략적인 성능 지표를 요약했습니다. 많은 최신 브라우저에서 하드웨어(GPU 가속)로 이를 구현하기 시작하고 있습니다. GPU 지원으로 빌드하면 느린 효과의 성능이 크게 개선됩니다. 성능을 평가하는 가장 좋은 방법은 여러 브라우저에서 테스트하는 것입니다.

기타 유용한 리소스

예술작품을 실험하고 공유할 수 있는 멋진 대화형 추상화 애플리케이션입니다. Eric Bidelman의 훌륭한 대화형 필터 페이지 확인해 보세요. 예시가 있는 유용한 필터 관련 튜토리얼입니다. 공식 W3C Filter Effects 1.0 초안 사양 http://dev.w3.org/fxtf/filters/ 필터를 사용하여 만든 UI 예