이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS 필터 효과 이해하기

Alex Danilo

소개

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

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

Scalable Vector Graphics (SVG) 사양의 일부로 사용된 필터 효과입니다. 이들은 서로 다른 픽셀 기반 이미지 효과를 벡터 그림에 적용하기 위해 만들어졌습니다. 시간이 지남에 따라 브라우저 공급업체가 브라우저에 SVG 기능을 추가하면서 필터의 유용성이 분명해졌습니다. Mozilla의 Robert O’Callahan은 CSS를 '일반' HTML 콘텐츠에 적용하여 SVG 필터를 사용한다는 멋진 아이디어를 내놓았습니다. 로버트는 필터와 CSS 스타일링의 조합이 얼마나 강력한지 보여주는 초기 버전의 프로토타입을 제작했습니다. W3C의 CSS 및 SVG 실무 그룹은 CSS 스타일 지정을 통해 HTML과 SVG의 필터 사용을 조화롭게 조정하기로 결정함에 따라 CSS의 'filter' 속성이 탄생했습니다. 현재 CSS 및 SVG 관련 공동 태스크포스는 보편적으로 유용한 필터를 만들기 위해 많은 노력을 기울이고 있습니다. 이와 관련된 모든 항목의 현재 사양은 여기에서 확인할 수 있습니다.

'filter' CSS 속성의 새로운 수명

데자 뷰는 CSS 스타일의 '필터'를 볼 때 웹 개발자에게 경고를 울릴 때가 있습니다. 이전 버전의 Internet Explorer에는 플랫폼별 기능을 수행하기 위해 CSS를 통해 노출된 '필터' 속성이 있었기 때문입니다. 이는 지원 중단되었으며 이제 CSS3의 일부인 표준 'filter' 속성으로 대체됩니다. 따라서 일부 오래된 웹페이지에서 '필터링'을 사용한다고 해서 혼란스러울 필요는 없습니다. 새로운 '필터' 속성은 모든 작업이 있는 곳이며 새로운 버전의 IE에서는 모든 최신 브라우저와 동일하게 이 속성을 구현합니다.

필터 작동 방식

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

브라우저는 웹페이지를 로드할 때 스타일을 적용하고 레이아웃을 수행한 다음 페이지를 렌더링하여 살펴볼 내용이 있어야 합니다. 필터는 모든 단계를 수행한 후 페이지가 화면에 복사되기 직전에 작동합니다. 이들은 렌더링된 페이지의 스냅샷을 비트맵 이미지로 찍고, 스냅샷의 픽셀에서 그래픽 매직을 수행한 다음 그 결과를 원본 페이지 이미지 위에 그립니다. 카메라 렌즈의 전면에 부착되는 필터라고 생각하면 됩니다. 렌즈를 통해 보이는 것은 필터의 효과에 의해 수정된 바깥 세계입니다.

물론 필터가 적용된 페이지를 그릴 때는 시간이 걸리지만, 필터를 제대로 사용하면 사이트 속도에 미치는 영향은 최소화됩니다.

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

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

필터는 원래 SVG에서 제공되었기 때문에 다양한 방법으로 정의하고 사용할 수 있습니다. SVG 자체에는 XML 문법을 사용하여 다양한 필터 효과의 정의를 요약하는 <filter> 요소가 있습니다. CSS에서 정의한 필터 집합은 동일한 그래픽 모델을 활용하지만, 스타일 시트에서 쉽게 사용할 수 있는 훨씬 더 간단한 정의입니다.

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

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는 필터를 매우 쉽게 사용할 수 있도록 다양한 표준 필터 효과를 도입합니다.

각 유형을 살펴보고 어떤 일을 하는지 알아보겠습니다.

회색조(양): 이렇게 하면 입력 이미지의 색상이 회색 음영으로 변환됩니다. 적용된 '금액'에 따라 적용되는 회색 전환이 결정됩니다. 값이 100% 이면 모든 것이 회색 음영으로 표시되고 0% 로 설정하면 색상에 변화가 없습니다. 백분율보다 부동 소수점 수를 사용하려면 여기서 부동 소수점 숫자를 사용할 수 있습니다. 즉, 0은 0% 와 동일하게 작동하지만 1.0은 100%와 동일하게 작동합니다.

세피아(양): 이렇게 하면 오래된 사진에서처럼 세피아 색조로 전달된 색상이 제공됩니다. 적용된 '양'은 '그레이 스케일' 필터와 같은 방식으로 작동합니다. 즉, 100% 로 설정하면 모든 색상이 완전히 세피아 색조가 되고 값이 작으면 효과가 더 작은 비율로 적용됩니다.

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

색조-회전(각도): 이 효과는 흥미로운 결과를 얻는 데 사용할 수 있는 약간의 색상 괴짜 효과입니다. 입력 이미지를 완전히 다르게 보이게 하기 위해 색상을 이동합니다. 색상환을 중심으로 빨간색에서 보라색으로 변하는 색상 스펙트럼을 상상할 수 있는 경우, 이 효과는 원판의 원래 색상을 입력으로 사용하고 'angle' 매개변수에 따라 회전하여 출력 색상 값으로 회전한 원판의 색상을 생성합니다. 따라서 이미지의 모든 색상은 휠에서 동일한 '각도'로 이동합니다. 이는 물론 작업을 단순화한 것이지만, 합당할 만큼 충분히 이해하기를 바랍니다.

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

불투명도(금액): 콘텐츠를 일부 공개로 필터링하고 싶다면 이 옵션을 사용하면 됩니다. ‘amount’ 값은 출력이 얼마나 불투명할지를 정의합니다. 따라서 값 100% 는 완전히 불투명하므로 출력이 입력과 정확하게 동일합니다. 값이 100% 미만으로 떨어지면 출력 이미지가 덜 불투명해지고 (더 투명해짐) 이미지가 점점 줄어듭니다. 이는 물론 페이지의 다른 부분과 겹치면 그 아래 부분이 보이기 시작합니다. '양'이 0% 이면 완전히 사라진다는 의미입니다. 하지만 완전히 투명한 객체에서 마우스 클릭 등의 이벤트가 계속 발생할 수 있으므로, 아무것도 표시하지 않고 클릭 가능한 영역을 만들 때 편리합니다.

이는 이미 알고 있는 '불투명도' 속성과 동일하게 작동합니다. 일반적으로 CSS '불투명도' 속성은 하드웨어 가속을 사용하지 않지만, 하드웨어 가속을 사용하여 필터를 구현하는 일부 브라우저에서는 필터 버전의 불투명도를 가속화하여 성능을 크게 향상합니다.

밝기(양): TV의 밝기 제어와 비슷합니다. 'amount' 매개변수에 비례하여 완전한 검은색과 원래 색상 간의 색상을 조정합니다. 이 값을 0% 로 설정하면 검은색만 표시되지만 값이 100% 쪽으로 올라감에 따라 입력 이미지와 동일한 위치에 100% 가 될 때까지 원본 이미지가 점점 더 밝아지는 것을 볼 수 있습니다. 물론 그냥 200% 로 설정하면 이미지가 원본보다 2배 더 밝아집니다. 어두운 사진을 보정하기에 좋습니다.

대비(금액): TV를 더욱 다양하게 제어할 수 있습니다. 이렇게 하면 입력 이미지에서 가장 어두운 부분과 가장 밝은 부분 간의 차이가 조정됩니다. 0% 를 사용하면 '밝기'처럼 검은색이 되므로 그다지 흥미롭지 않습니다. 그러나 값을 100% 로 높이면 100% 에 도달할 때까지 어두움의 차이가 변화하며 이는 다시 원래 이미지입니다. 이 효과는 100% 이상으로 설정할 수도 있습니다. 이렇게 하면 밝은 색상과 어두운 색상의 차이가 훨씬 더 커집니다.

블러(반경): 콘텐츠에 부드러운 가장자리를 원하는 경우 블러를 추가할 수 있습니다. 이 작품은 한때 인기 영화 제작 기법으로 사용되었던 전통적인 바셀린이 유리로 된 종이 위에 그려진 모양입니다. 눈의 초점이 맞지 않을 때처럼 모든 색상을 한꺼번에 번지르면서 효과를 퍼뜨립니다. '반경' 매개변수는 화면에서 얼마나 많은 픽셀이 서로 혼합되는지에 영향을 주므로 값이 클수록 더 흐리게 처리됩니다. 물론 0은 이미지를 변경하지 않고 그대로 둡니다.

drop-shadow(shadow): 콘텐츠가 햇빛 아래 바닥에 그림자가 드리워진 것처럼 보이게 할 수 있다는 것은 굉장히 좋은 일입니다. 바로 '그림자'가 하는 일입니다. 이미지의 스냅샷을 찍어 단색으로 만들고 흐리게 처리한 다음 결과를 약간 오프셋하여 원본 콘텐츠의 그림자처럼 보입니다. 전달된 'shadow' 매개변수는 단일 값보다 약간 더 복잡합니다. 공백으로 구분된 일련의 값이며 일부 값도 선택사항입니다. '그림자' 값은 그림자가 배치되는 위치, 흐림 정도, 그림자의 색상 등을 제어합니다. '그림자' 값의 기능에 대한 자세한 내용은 CSS3 배경 사양에서 '상자 그림자'를 자세히 정의합니다. 아래의 몇 가지 예를 통해 다양한 가능성에 대한 아이디어를 얻을 수 있습니다.

drop-shadow(10px -16px 30px 보라색) — drop-shadow(10px -16px 30px 30px 보라색)

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

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

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

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

CSS에서 다음과 같은 간단한 작업을 할 수 있습니다.

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

짜잔! 문서의 모든 <div>은(는) SVG 필터 정의로 스타일이 지정됩니다.

맞춤 (제공 예정): 맞춤 필터도 곧 지원될 예정입니다. 그래픽 GPU의 성능을 활용하여 특수 음영 언어를 사용하여 상상력에만 국한된 놀라운 효과를 구현할 수 있습니다. '필터' 사양의 이 부분은 아직 논의 중이며 계속 변경될 예정이지만, 사용 가능한 브라우저에 대해 곧 자세한 내용을 제공해 드리겠습니다.

성능에 대한 고려사항

모든 웹 개발자는 웹페이지 또는 애플리케이션의 성능을 중요하게 생각합니다. CSS 필터는 시각 효과를 위한 강력한 도구이지만 동시에 사이트의 성능에 영향을 줄 수 있습니다.

특히 휴대기기에서 CSS 필터를 지원하는 경우 사이트가 제대로 작동하도록 하려면 이러한 요소가 무엇을 하는지, 그리고 이것이 실적에 어떤 영향을 미치는지 이해하는 것이 중요합니다.

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

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

일부 플랫폼에서는 GPU를 사용하여 가속할 수 있으므로 blur로 모든 것이 손실되지는 않지만, 모든 브라우저에서 이를 사용할 수 있는 것은 아닙니다. 확실하지 않은 경우 원하는 효과를 얻을 수 있는 '반경'으로 실험해 본 다음 허용 가능한 시각 효과를 유지하면서도 가능한 한 반경을 줄이는 것이 좋습니다. 이렇게 조정하면 특히 휴대전화에서 사이트를 사용할 때 사용자의 만족도를 높일 수 있습니다.

SVG 필터를 참조하는 url 기반 필터를 사용하는 경우 필터에 임의의 필터 효과가 포함될 수 있으므로 필터 효과의 속도가 느려질 수 있다는 점을 알고 있어야 합니다. 필터 효과가 어떤지 확인하고 휴대기기에서 실험하여 성능이 양호한지 확인하세요.

필터 효과	브라우저 지원	성능
회색 이미지	Chrome	매우 빠름
세피아	Chrome	매우 빠름
채도	Chrome	매우 빠름
색조-회전	Chrome	빠름
반전	Chrome	매우 빠름
opacity	Chrome	속도가 느릴 수 있습니다
밝기	Chrome	빠름
대비	Chrome	빠름
흐리게 처리	Chrome	가속하지 않으면 느림
drop-shadow	Chrome	속도가 느릴 수 있습니다
url()	Chrome, Mozilla	다양함, 빠름에서 느림

기타 유용한 리소스

예술작품을 실험하고 공유할 수 있는 멋진 필터를 사용한 대화형 추상화 애플리케이션 에릭 비델만의 훌륭한 양방향 필터 페이지도 확인해 보세요. 예시가 포함된 필터에 대한 학습 가이드 공식 W3C 필터 효과 1.0 초안 사양 http://dev.w3.org/fxtf/filters/ 필터를 사용하여 만든 UI 예