SVG 필터를 사용한 손그림 '끓는' 효과 시뮬레이션

2025-07-21
SVG 필터를 사용한 손그림 '끓는' 효과 시뮬레이션

이 글에서는 손으로 그린 애니메이션에서 자주 볼 수 있는 '끓는' 효과를 SVG 필터를 사용하여 시뮬레이션하는 방법을 설명합니다. 이 효과는 이미지 가장자리에 미세한 왜곡을 적용하여 미묘한 움직임을 만듭니다. feTurbulence 및 feDisplacementMap 필터를 사용하여 노이즈 텍스처를 생성하고 이미지에 적용하는 방법과 JavaScript를 사용하여 필터 매개변수를 애니메이션화하여 '끓는' 효과를 만드는 방법을 자세히 설명합니다. 대화형 데모를 통해 매개변수를 조정하고 효과의 변화를 관찰할 수 있습니다. 간단한 SVG 필터와 JavaScript만으로 웹에서 사실적인 손그림 애니메이션 효과를 시뮬레이션하는 데 성공했습니다.

더 보기
개발

ERB와 작별! Phlex를 사용하여 순수 Ruby로 이메일 템플릿 작성하기

2025-03-03
ERB와 작별! Phlex를 사용하여 순수 Ruby로 이메일 템플릿 작성하기

Rails에서 ERB를 사용하여 이메일 템플릿을 작성하는 데 지쳤나요? 이 기사에서는 Ruby 라이브러리인 Phlex를 사용하여 순수 Ruby로 HTML 이메일 템플릿을 작성하는 방법을 보여줍니다. ERB의 번거로움과 비효율성을 제거합니다. Phlex 뷰와 레이아웃 생성, roadie-rails를 사용한 인라인 스타일 적용 등 ERB에서 Phlex로 마이그레이션하는 단계를 자세히 설명하고, 최종적으로 ERB를 사용하지 않는 세련된 Rails 애플리케이션을 구현합니다. 기사에는 완벽한 코드 예제와 테스트 케이스가 포함되어 있어 독자가 쉽게 시작할 수 있도록 도와줍니다.

더 보기