패스트캠퍼스 환급챌린지 12일차 미션 (2월 12일) : 인터랙티브 웹 강의 후기

Interactive Web/Fast Campus

패스트캠퍼스 환급챌린지 12일차 미션 (2월 12일) : 인터랙티브 웹 강의 후기

박철준 2024. 2. 12. 15:51

서론

웹 개발에서의 시각적 요소 처리는 사용자 경험을 풍부하게 만드는 데 중요하다. SVG(Scalable Vector Graphics)는 이러한 시각적 요소를 해상도에 구애받지 않고 확장 가능하게 만들어주는 XML 기반의 마크업 언어이다. SVG를 통해, 개발자는 CSS와 JavaScript로 스타일링하고 조작할 수 있는 벡터 기반 그래픽을 웹에 적용할 수 있다. 특히, defs 태그는 SVG 내에서 재사용 가능한 요소를 정의하는 데 사용되며, 이를 활용해 Gooey 효과를 만드는 과정은 매우 흥미롭다.

본론

환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 이번에도 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.

첫 번째 강의: 캔버스 파티클 다루기 심플예제 - svg 필터 입히기
두 번째 강의: 캔버스 파티클 다루기 심플예제 - dat.GUI 활용하기

첫 번째 강의: 캔버스 파티클 다루기 심플예제 - svg 필터 입히기

이 강의에서는 Gooey 이펙트를 만드는 두 가지 방법에 대해 배웠다. 첫 번째 방법은 캔버스 CSS에서 filter: blur와 contrast 값을 사용하는 것이었으나, 이 방법은 배경색이 필요하고, 파티클 색상이 배경색의 대비색으로만 나타난다는 단점이 있었다. 두 번째 방법은 SVG 내의 필터 속성을 활용하여 CSS 필터에 커스텀 필터를 적용하는 것이었다. 이 방법은 <svg>와 <defs> 태그를 사용하여 블러와 각종 필터를 정의하고, 이를 적용하여 Gooey 이펙트를 구현한다. SVG 필터를 직접 수정하는 것이 어려울 수 있지만, yoksel.github.io/svg-filters/ 페이지를 이용하면 코드 샌드박스 형식으로 수치를 테스트할 수 있다는 점이 매우 유용했다.

SVG는 웹에서 그래픽을 다루는 데 있어 강력한 도구이다. 특히, defs 태그는 SVG 내에서 재사용할 요소들을 정의하는 데 사용된다. 이 태그는 그 자체로는 화면에 렌더링되지 않지만, 내부에 정의된 요소는 필요한 곳에서 재사용될 수 있다.

<defs> 태그는 그라디언트, 패턴, 필터 등을 정의하는 데 주로 사용된다. 디자인에서 반복적으로 사용되는 그라디언트나 복잡한 패턴을 defs 안에 정의하고, 이를 여러 곳에서 참조함으로써 코드의 중복을 줄이고 효율성을 높일 수 있다.

Gooey 효과는 필터를 사용해 구현된다. SVG의 <filter> 요소는 defs 태그 내에 정의되며, 다양한 시각적 효과를 생성한다. 특히, feGaussianBlur와 feColorMatrix 필터는 Gooey 효과 구현에 필수적이다.

feGaussianBlur 필터는 요소에 가우시안 블러 효과를 적용한다. stdDeviation 속성을 조절함으로써 블러의 강도를 조정할 수 있으며, Gooey 효과에서는 이를 통해 파티클들 사이의 경계를 부드럽게 만든다.
feColorMatrix 필터는 요소의 색상을 변형시킨다. value 속성을 통해 색상 채널의 변형을 정의하며, Gooey 효과에서는 블러 처리된 이미지의 명암 대비를 조절해 더 두드러진 효과를 만든다.

두 번째 강의: 캔버스 파티클 다루기 심플예제 - dat.GUI 활용하기

두 번째 강의에서는 dat.GUI 라이브러리를 CDN으로 가져와 Gooey 이펙트의 블러 값과 알파 채널을 실시간으로 조정하는 방법을 배웠다. const controls = new function()을 통해 블러 값과 알파 채널, 알파 오프셋을 설정하고, let gui = new dat.GUI()를 사용하여 인터페이스를 구현하는 방법은 아직 완전히 이해하기 어렵지만, 실제 코드로 연습해보며 더 배워나갈 필요가 있다. 이 방법은 사용자가 직접 효과의 강도를 조절할 수 있게 하여 인터랙티브한 웹 개발에 큰 장점을 제공한다.

SVG 필터를 사용해 Gooey 효과를 만드는 과정은 다음과 같다.

<svg> 태그 내에 <defs>를 생성하고, 이 안에 <filter>를 정의한다.
feGaussianBlur와 feColorMatrix를 <filter> 내에 추가하여 필요한 블러와 콘트라스트 효과를 설정한다.
생성된 필터를 적용하고자 하는 요소의 style 속성이나 CSS에서 filter: url(#gooey);로 참조한다.

결론

SVG와 defs 태그를 활용한 Gooey 효과 구현은 웹 개발에서의 시각적 다양성과 창의성을 높인다. 이러한 기술을 통해 개발자와 디자이너는 사용자에게 더욱 풍부하고 매력적인 인터랙티브 경험을 제공할 수 있다. 웹 개발 역량을 한 단계 끌어올리는 이러한 고급 기술의 이해와 적용은 앞으로도 계속해서 탐구해볼 가치가 있다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://bit.ly/48sS29N