▲ 포토샵이랑 일라리가 돈이 좀 아까운 분들은
남자답게 그냥 코드를 짜서 그림그리고 디자인해도 되겠습니다.
왜냐면 html에서 SVG를 쓸 수 있으니까요.
<svg width="100" height="100">
<path d="M10 10 50 30" stroke="black" fill="none" />
</svg>
html 파일에 대충 이렇게 적으면 (10, 10) (50, 30) 좌표를 차례로 지나는 선을 그릴 수 있습니다.
이제 일라리 구독 해지해도 될 것 같은데 근데 SVG보다 훨씬 유용한게 있습니다.
SVG 필터라는 것인데 html에서 기본기능으로 지원합니다.
'필터'는 그냥 이미지에 있던 수치들을 특정 규칙에 따라 바꾸는게 '필터'입니다.
그럼 간단하게 인스타 필터 같은 것도 만들 수 있겠지만
코드를 약간 첨가하면 훨씬 더 멋진 것들도 만들 수 있습니다.
1. Squigglevision
(youtube.com/@라멘조리기)
애니메이션을 만들 때 자글자글 테두리가 흔들리는 애니메이션을 가끔 사용합니다.
이건 애프터이펙트나 그런 곳에서 '뒤틀기 변위'를 조절하면 될텐데
SVG 필터로도 쉽게 구현이 가능합니다.
<svg width="300" height="300">
<filter id="filter1">
<feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1" seed="1" result="noise">
<animate attributeName="seed" values="1;2;3;4;5" dur="0.4s" repeatCount="indefinite" />
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
</filter>
<image href="doro.png" filter="url(#filter1)" />
</svg>1. <feTurbulence>를 쓰면 랜덤 노이즈를 생성가능합니다.
2. <animate>를 써서 0.4초마다 바꿔서 랜덤 노이즈의 seed를 바꾸라고 했습니다.
그럼 랜덤 노이즈가 0.4초마다 다르게 변하는 애니메이션이 생성됩니다.
3. 변하는 랜덤 노이즈를 noise라고 이름붙여서 <feDisplacementMap> 안에 쑤셔넣었습니다.
<feDisplacementMap> 은 noise 이미지의 밝기에 따라서 픽셀을 재배치해줍니다.
4. 그걸 doro.png에 적용하면 그럼 자글자글 움직입니다.
진짜임
문자도 가능합니다.
2. 찐득한 물리엔진
더러운 슬라임끼리 붙는 듯한 찐득한 효과를 넣을 수 있습니다.
어떤 식으로 하냐면 블러 필터를 준 다음 contrast를 높이면 되겠습니다.
<svg width="0" height="0" style="display: block;">
<filter id="goo-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blur"/>
<feColorMatrix in="blur" mode="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 18 -7"/>
</filter>
</svg><feGaussianBlur> 필터를 쓰면 블러효과 생성이 가능합니다.
<feColorMatrix> 필터를 쓰면 RGBA 색상 수치를 맘대로 조절이 가능합니다.
투명도 부분, 그니까 A 부분만 contrast를 조절하는게 포인트입니다.
위 코드에선 A 수치에 18을 곱하고 -7*255를 더하라고 해봤습니다.
▲ 실제로 버튼을 각각 누르면 Blur, Contrast 효과 적용이 가능합니다.
그럼 요소들이 가까이 있을 경우 들러붙는 식의 연출이 가능합니다.
문자에도 적용 가능합니다.
문자는 참고로 <feComposite operator="atop"> 이런 필터를 쓰면 선명하게 보일 수 있습니다.
문자 영역만 선명하게 잘라내는 역할임
3. Gradient 애니메이션
gradient 구현도 직관적으로 쉽게 할 수 있는데
필터로 구현하려면 <feComponentTransfer> 이런거 써도 되는데
직접 gradient 배경을 하나 만들고 싶으면 <linearGradient>를 쓰면 더 쉽습니다.
그럼 뭘 할 수 있냐면 gradient 배경을 특정 이미지 위에 덮어씌울 수 있습니다.
포토샵 이런데선 '클리핑 마스크'라고 하는데 그것도 코드로 구현이 가능한 것임
그럼 이런게 가능합니다.
도로롱 머리사진에 gradient배경 clipping 해놓은걸 앞에 깔고
도로롱 사진을 뒤에 깔았습니다.
이게 포토샵이 아니면 뭐임
(모바일 환경에선 디바이스 기울기에 반응함)
커서 위치에 따라서 gradient 위치를 변경하는 애니메이션을 주라고 해봤습니다.
구글 잼민이한테 부탁했는데 잘해주는 것 같군요.
근데 AI써도 애니메이션같은건 비주얼 피드백이 안되기 때문에 인간 노가다가 많이 필요합니다.
아무튼 결론은
SVG filter를 사용하면 포토샵이랑 애프터이펙트 없이도 이거저거 재밌는 효과를 넣을 수 있습니다.
그럼 이제 온라인 포토샵, 온라인 애프터이펙트 만들어오시면 되고
사용한 코드는 여기 나와있으니 참고합시다.
https://github.com/codingapple1/svg-filters
