SVG 에 네온 그림자 효과 주기

[ 이글은 2020년 11월 18일에 최종 수정되었습니다. ]
§

[이글은 front-end 개발자 분들을 위한 글 입니다. 일반인분들은 그냥 무시하고 지나치시면 됩니다.]

제가 개인적으로 가장 좋아하는 네온싸인들은 이런 모습입니다.
[이미지 출처: 이상태 간판제작 (https://soomgo.com/profile/users/1396923)]

낮 보다는 밤에 보면 많이 에쁩니다. 이런 효과는 주로 호텔 내부나 클럽 같은데서 많이 사용하는데, 싸인 자체는 바탕/배경색과 동일하게 만들고, 그 싸인 뒤로 네온을 달아서 네온빛 후광이 표현되게 만드는 고급스러운 싸인제작 기법입니다.

아, 물론 양키 취향의 이런 네온싸인도 좋아 보일 수 있겠죠. (개취 존중합니다.)

암튼 이번에 참여했던 프로젝에서 이 고급진 네온 효과를 웹상에서 주고 싶었는데요, 이런 효과는 svg 에 css 의 drop-shadow() 기능을 적용하면 구사 가능합니다. 제가 2017년에 제작해 현재 사용중인 제 홈피 로고도 같은 drop-shadow() 효과를 준 모습입니다.

filter: drop-shadow(0 0 2px #fff);

이렇게 간단하게 끝낼 수 있지만, 좀더 정밀한 제어가 가능한 방법을 알려드리고자 합니다.

제작방법

1. 먼저 일루에서 (일루 대안으로 Inkscape 도 좋은 프로그램이라는데 저는 사용해 본적이 없습니다) 이미지의 캔버스, artboard 의 여백을 충분히 확보하는 게 매우 중요합니다. 제가 그래픽디자이너가 아니라서 저한테 있는 calligraphy 라고는 제 싸인밖에 없네요. 켁.

암튼 충분히 여백을 확보해 놓아야 그림자가 짤리지 않습니다.

2. 준비되신 이미지를 svg 로 저장하신 후, 이 svg 를 사용하시는 IDE 로 열어 줍니다. (저는 VScode 쓰는데, 요즘도 VScode 많이들 쓰시나요?)

그리고, 아래처럼 filter definition 을 <svg> 태그 바로 아래 작성해 넣습니다.

일단 이해안되시더라도 ctrl+c,v 오케이? ㅎㅎ

<filter id="neon-shadow">
  <feDropShadow dx="0" dy="0" stdDeviation="15" flood-color="#FF9800" flood-opacity="1"/>
</filter>

필터의 사용법은 링크걸어드린 글을 참조하시면 되지만, 개발자 창 열어서 조금씩 조정해보시면 쉽게 이해가 됩니다.

dx 와 dy 는 그림자 위치, stdDeviation = 그림자 크기. flood-color 야 당근 이름 그대로 색상. opacity 야 css opacity 랑 동일. 이렇게만 이해하시면 됩니다.

3. <g> SVG element 를 하나 만들어 줍니다. div 에 wrapper 를 하나 씌우는거라고 생각하시면 이해하기 쉬우실 거에요. 물론 이 <g> 태그는 조금전 명시한 필터의 id, (id=”neon-shadow”) 와 이름이 같아야 겠죠?

<g filter="url(#neon-shadow)">

이 <g> 로 이미지 전체를 감싸주시는 겁니다.

이렇게. <g filter=”url(#neon-shadow)”> svg 이미지 </g>

그럼 끝입니다.

이렇게 svg 파일 내부에서 필터 definition 을 주면, 이미지의 각 요소들에 별도의/별개의 필터 효과를 줄 수 있어, 하나의 svg 이미지에 여러가지 효과를 더할 수 있게 됩니다.

위 svg 파일의 경우, #neon-shadow1, #neon-shadow2, 이렇게 두개의 필터 definition 을, 각 이미지에 해당하는 <g> 태그에 별도로/따로 따로 감싼 것 입니다.

hover 시, click 시, 페이지 로딩 시, 여러가지 filter 를 svg 이미지의 각 <g> element 요소에 적용하시면 예전 플래시1 느낌의 animation 도 구사하실 수 있습니다.

아래 링크에서 sgv 에 사용 가능한 필터들을 모두 확인하실 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter#See_also


1 플래시 가 뭔지 모르는 젊은 개발자 분들도 계실텐데, 예전에 에니메이션 영화를 한편 제작할 수 있을 정도의 그런 웹상의 에니메이션 기술이 존재했던 적이 있습니다. 20여년이 지난 지금까지도 90년대 당시 플래시 에니메이션 수준을 구사하기 어렵습니다. 하지만 이 기술은 Adobe 의 자체적 기술이라 정치적인 이유로 웹에서 사장되어 버렸습니다. 그리고 이 플래시를 대체하고자 나온 제품들이 지금 사용하는 Three.js, GreenSock 같은 자스 animation library 들 입니다.

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , , , ,

카테고리:

Ω

Leave a Reply

Your email address will not be published. Required fields are marked *